/* main */
.main_tit {text-align: center; margin-bottom: 40px;}
.main_tit .big {font-size: 45px; font-weight: 700}
.main_tit .small {font-size: 20px;}


.mainMore {
    font-size: 15px; color: #fff; background: var(--mainColor1); border-radius: 100px; display: inline-block;
    line-height: 1; padding: 6px 15px;
}


.main_top {width: 100%;}
.main_top .item {position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.main_top .item .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%}
.main_top .item .bg img {width: 100%; height: 100%; object-fit: cover;} 
.main_top .item .tit {
    position: relative; z-index: 1; color: #fff;
    width: 90%; max-width: 1400px; text-align: center;
}
.main_top .item .tit .big {font-family: 'Montserrat', 'GmarketSans', sans-serif; font-weight: 700; font-size: 75px; line-height: 1.2}
.main_top .item .tit .small {font-size: 24px; margin-top: 20px;}


.main_top .swiper_btn {width: 50px; height: 50px; position: absolute; z-index: 2; bottom: 40px; cursor: pointer;}
.main_top .swiperMainTopPrev {background: url('/default/img/mf/icon_main_top_prev.png') no-repeat center center / contain; right: 90px; }
.main_top .swiperMainTopNext {background: url('/default/img/mf/icon_main_top_next.png') no-repeat center center / contain; right: 40px;}


.main_wwd .list {display: flex; border-left: 1px solid var(--border);}
.main_wwd .item {width: 100%; border-right: 1px solid var(--border); display: flex; flex-direction: column;}
.main_wwd .item .tit {padding:0 20px; font-size: 24px; font-weight: 700; height: 90px; display: flex; align-items: center; justify-content: center; text-align: center;}
.main_wwd .item .text {padding: 20px 20px 0; flex: 1 0 0;}
.main_wwd .item .img {width: 100%; aspect-ratio: 5/3; overflow: hidden;}
.main_wwd .item .img img {width: 100%; height: 100%; object-fit: cover;}
.main_wwd .item .keyword {padding: 20px; display: flex; gap:5px 10px; flex-wrap: wrap}
.main_wwd .item .keyword p {
    font-size: 14px; color: var(--mainColor1); border-radius: 100px; border: 2px solid var(--mainColor1); padding: 3px 15px;
    font-weight: 700;
}


.main_prd .list {display: flex; flex-wrap: wrap; gap: 20px}
.main_prd .item {width: calc(50% - 10px); position: relative; overflow: hidden;}
.main_prd .item:nth-child(n+3) {width: calc(33.333% - 13.333px);}
.main_prd .item .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main_prd .item .bg img {width: 100%; height: 100%; object-fit: cover}
.main_prd .item .cont {
    padding: 20px; color: #fff; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between;
    height: 100%; gap: 40px;
}
.main_prd .item .cont .top {display: flex; align-items: flex-end; gap: 20px;}
.main_prd .item .cont .tit {flex: 1 0 0}
.main_prd .item .cont .tit .big {font-size: 20px; font-weight: 700}
.main_prd .item .cont .tit .small {font-size: 16px; margin-top: 5px}
.main_prd .item .cont .prd {display: flex; gap: 10px; flex-wrap: wrap}
.main_prd .item .cont .prd li {width: 110px; padding: 10px; background: rgba(1,112,185,.2); text-align: center;}
.main_prd .item .cont .prd .thumb {width: 100%; aspect-ratio: 1/1; overflow: hidden;}
.main_prd .item .cont .prd .thumb img {width: 100%; height: 100%; object-fit: contain;}
.main_prd .item .cont .prd .text {text-align: center; font-size: 12px; margin-top: 10px;}


.main_bot .list {display: flex;}
.main_bot .item {width: 100%; position: relative; overflow: hidden;}
.main_bot .item .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main_bot .item .bg img {width: 100%; height: 100%; object-fit: cover;}
.main_bot .item .cont {position: relative; z-index: 1; padding:100px 40px; color: #fff; display: flex; flex-direction: column; gap: 15px; align-items: flex-start}
.main_bot .item .cont .tit {font-size: 24px; font-weight: 700;}
.main_bot .item .cont .text {font-size: 18px; margin-bottom: 10px;}



/* product */
.prd_nav .inner {border-bottom: 1px solid var(--border); padding-bottom: 40px;}
.prd_nav .nav {display: flex; gap: 20px; justify-content: center;}
.prd_nav .nav a {
    width: 100%; max-width: 160px; height: 55px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 16px;
    background: #ededed; color: #aaa; border-radius: 100px; padding: 0 10px; line-height: 1.1;
}
.prd_nav .nav a.on {background: #000; color: #fff; font-weight: 700;}
.prd_nav .nav_sub {margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 20px;}
.prd_nav .nav_sub a {border-bottom: 3px solid transparent; color: #aaa; padding-bottom: 3px; font-size: 18px;}
.prd_nav .nav_sub a.on {border-bottom: 3px solid #000; font-weight: 700; color: #000;}


.prd_tit {margin: 0 auto; width: 100px; background: var(--mainColor1); padding: 10px; border-radius: 100px; color: #fff; text-align: center; margin-bottom: -40px;}


.prd_top {margin-bottom: 60px;}
.prd_top .inner {display: flex; gap: 60px; align-items: center; border-bottom: 1px solid var(--border);}
.prd_top .thumb {width: 500px; flex-shrink: 0;}
.prd_top .thumb p {aspect-ratio: 1/1; overflow: hidden; width: 100%;}
.prd_top .thumb p img {width: 100%; height: 100%; object-fit: cover;}
.prd_top .info {flex: 1 0 0;}
.prd_top .name {margin-bottom: 40px;}
.prd_top .name::after {
    display: block; content: ""; width: 60px; height: 5px; background: var(--mainColor1); margin-top: 10px;
}
.prd_top .name .small {color: var(--mainColor1); font-size: 18px;}
.prd_top .name .big {font-size: 44px; font-weight: 700;}
.prd_top .text {line-height: 1.5; color: #333;}


.prd_tab {background: #fff;}
.prd_tab.fixed {
    position: fixed; top: 90px; right: 0; left: 0; z-index: 900;
}
.prd_tab .tab {border-bottom: 1px solid #000; display: flex; overflow: hidden;}
.prd_tab .tab a {
    max-width: 150px; width: 100%; height: 55px; border-radius: 10px 10px 0 0; border: 1px solid #aaa; color: #aaa;
    padding: 10px; display: flex; align-items: center; justify-content: center; text-align: center; margin-bottom: -1px;
}
.prd_tab .tab a.on {border: 1px solid #000; background: #000; color: #fff; font-weight: 700;}


.prd_sec .inner {border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 90px;min-height: 650px;}


.prd_cont {max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; width: 100%;}
.prd_cont > div {width: 100%;}
.prd_cont > div.w50 {width: calc(50% - 20px);}


.prd_cont .tit {text-align: center; font-size: 24px; font-weight: 700;}
.prd_cont .img {font-size: 0; text-align: center;}
.prd_cont .list {display: flex; flex-direction: column; gap: 10px;}
.prd_cont .list .list_t {font-weight: 700;}
.prd_cont .list p {padding-left: 15px; position: relative;}
.prd_cont .list p:before {
    display: block; content: "กค"; position: absolute; left: 0;
}
.prd_cont .text {line-height: 1.6;}


.prd_cont .table table {width: 100%;}
.prd_cont .table th {background: var(--mainColor1); color: #fff; text-align: left;}
.prd_cont .table th,
.prd_cont .table td {padding:15px 10px; border: 1px solid #ddd; font-size: 15px; vertical-align: middle;}
.prd_cont .table .img {font-size: 0;}
.prd_cont .table a {color: var(--mainColor1); text-decoration: underline;}
.prd_cont .table .bgGr {background: #f5f5f5;}




.prd_cont .download {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 40px; justify-content: center;}
.prd_cont .download a {width: 150px; display: flex; gap: 15px; flex-direction: column; justify-content: center; text-align: center;}
.prd_cont .download a:hover {color: var(--mainColor1);}
.prd_cont .down_icon {width: 80%; margin: 0 auto; aspect-ratio: 1/1; background: url('/default/img/mf/product/icon_prd_down.png') no-repeat center center / contain; position: relative;}
.prd_cont .down_icon::before {
    display: block; width: 100%; max-height: 50%; padding:0 10px;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #000; font-size: 15px;
}
.prd_cont .down_icon.manual::before {content: "Manual";}
.prd_cont .down_icon.guide::before {content: "Guide";}
.prd_cont .down_icon.catalog::before {content: "Catalog";}
.prd_cont .down_icon.data::before {content: "Data sheet";}
.prd_cont .down_icon.broch::before {content: "Brochure";}
.prd_cont .down_icon.ex::before {content: "Example";}
.prd_cont .down_icon.pdf::before {content: "PDF";}


.prd_cont .t-vib {display: flex; gap: 40px; flex-wrap: wrap;}
.prd_cont .t-vib .item {width: calc(33.333% - 30px); border: 1px solid var(--border); background: #f1f1f1;}
.prd_cont .t-vib .item .thumb {aspect-ratio: 5/3; overflow: hidden;}
.prd_cont .t-vib .item .thumb img {width: 100%; height: 100%; object-fit: cover;}
.prd_cont .t-vib .item .cont {padding: 30px;}
.prd_cont .t-vib .item .big {padding-bottom: 20px; border-bottom: 1px solid var(--border); font-size: 24px; font-weight: 700;}
.prd_cont .t-vib .item .big p {font-size: 16px; font-weight: 500;}
.prd_cont .t-vib .item .txt {margin-top: 20px;}
.prd_cont .t-vib .item ul {padding-top: 20px; font-size: 14px; display: flex; flex-direction: column; gap: 5px;}
.prd_cont .t-vib .item ul li {padding-left: 10px; position: relative;}
.prd_cont .t-vib .item ul li::before {display: block; content: "กค"; position: absolute; left: 0;}
.prd_cont .t-vib .item .cont span {padding-top: 20px; color: #767676; font-size: 12px; display: block; line-height: 1.2;}


.prd_etc_top {background: url('/default/img/mf/bg_prd_etc.webp') no-repeat center center / cover; background-attachment : fixed; text-align: center; position: relative; color: #fff;}
.prd_etc_top::before {
    display: block; content: ""; width: 100%; height: 100%; background: #000; opacity: .4;
    position: absolute; top: 0; left: 0;
}
.prd_etc_top .inner {position: relative; z-index: 1;}
.prd_etc_top .text {font-size: 32px; font-weight: 700;}


.prd_etc_list .list {display: flex; gap: 40px;}
.prd_etc_list .item {width: 100%; padding:60px 30px; text-align: center; position: relative; overflow: hidden; color: #fff;}
.prd_etc_list .item .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.prd_etc_list .item .bg::before {position: absolute; top: 0; left: 0; background: #000; opacity: .2; display: block; content: ""; width: 100%; height: 100%;}
.prd_etc_list .item .bg img {width: 100%; height: 100%; object-fit: cover;} 
.prd_etc_list .item .big {font-size: 24px; font-weight: 700;}
.prd_etc_list .item .small {font-size: 18px; margin-top: 10px;}
.prd_etc_list .cmnt {margin-top: 40px; text-align: center;}


.prd_ren_top {margin-bottom: 0;}
.prd_ren_top .inner {max-width: 1000px;}
.prd_ren .prd_cont {flex-direction: row; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 90px;}
.prd_ren .prd_cont .img {width: 400px;}
.prd_ren .prd_cont .cont {flex: 1 0 0;}
.prd_ren .prd_cont .name {font-size: 24px; font-weight: 700;}
.prd_ren .prd_cont ul  {margin-top: 20px;}
.prd_ren .prd_cont ul li {padding-left: 15px; position: relative; font-size: 18px;}
.prd_ren .prd_cont ul li::before {position: absolute; left: 0; content: "กค"; display: block;}
.prd_ren .prd_cont .cmnt {background: #f1f1f1; padding: 15px; font-size: 14px; margin-top: 40px;}



/* ci */
.ci_top .img {background: #F8F9FB; padding: 120px 40px; display: flex; align-items: center; justify-content: center; text-align: center;}
.ci_top .img img {width: 80%; max-width: 400px}
.ci_top .text {margin-top: 40px; font-size: 18px; line-height: 1.6;}


.ci_grid .img {display: flex; gap: 40px;}


.ci_size .img {display: flex; gap: 40px; align-items: center}
.ci_size .img .space {flex: 4}
.ci_size .img .mini {flex: 1; text-align: center;}


.ci_color .img_box {display: flex; gap:40px 20px; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
.ci_color .img_box .ma {width: calc(67% - 10px);}
.ci_color .img_box .su {width: calc(33% - 10px);}
.ci_color .img_box .gr {width: 100%;}
.ci_color .img_box .box {display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;} 
.ci_color .img_box .box .tit {width: 100%; font-size: 18px; padding-bottom: 10px; border-bottom: 1px solid #000; font-weight: 700}
.ci_color .img_box .box .item {background: #000; color: #fff; padding: 30px; width: 100%; aspect-ratio: 3/2}
.ci_color .img_box .ma .item {width: calc(50% - 10px); font-size: 14px;}
.ci_color .img_box .ma .item:nth-child(2) {background:#005192;}
.ci_color .img_box .ma .item:nth-child(3) {background:#0073c4;}
.ci_color .img_box .su .item {background: #ffce3e}
.ci_color .img_box .gr .item {height: 100px; display: flex; align-items: center; background: linear-gradient(to right, #005192, #0073c4);}
.ci_color .img_box .gr .item .text {display: flex; align-items: center; justify-content: space-between; width: 100%;}