@charset "utf-8";
/* =============== 메인 css =============== */
/* 메인 비쥬얼 */
.main_visual {width: 100%; height: 940px; position: relative;}
.main_visual .swiper-slide {width: 100%; height: 100%; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover;}
.main_visual .swiper-slide:nth-child(1) {background-image: url(../../img/main-slide01.png);}
.main_visual .swiper-slide:nth-child(2) {background-image: url(../../img/main-slide02.png);}
.main_visual .swiper-slide:nth-child(3) {background-image: url(../../img/main-slide03.png);}
.main_visual .swiper-slide:nth-child(4) {background-image: url(../../img/main-slide04.png);}
.main_visual .swiper-slide .inner {position: absolute; top:50%; transform: translateY(-50%); left:45%;;}
.main_visual .swiper-slide span {font-size: 24px; color:#fff;}
.main_visual .swiper-slide h2 {font-size: 86px; font-weight: 600; margin-top:10px; color:#fff;}

.main_visual .pagination {position: absolute; bottom: 100px !important; left: 50% !important; transform: translateX(-50%); z-index:99; width:auto !important;}
.main_visual .pagination .swiper-pagination-bullet {width:50px; height:4px; background:#fff; border-radius:0;}


/* 제품 소개 */
.prd_intro {width: 100%; position: relative;}
.prd_intro::before {content:" "; display: block; position: absolute; bottom:0; left:0; right:0; width: 100%; height: 40%; background-color: #ebebeb;}
.prd_intro .inner {padding: 100px 18.5%;}
.prd_intro .tit_wrap {font-weight:600; border-bottom: 1px solid #cccccc; display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom: 55px;}
.prd_intro .tit_wrap > span {font-size: 24px; display:block; width:100%;}
.prd_intro .tit_wrap > .tit {font-size: 36px; margin-top:10px; margin-bottom:30px;}
.prd_intro .tit_wrap > .more_btn {color:#fff; background:#0054a6; padding:0 80px 0 20px; height:50px; line-height:50px; position:relative; font-weight:300; letter-spacing:1px;}
.prd_intro .tit_wrap > .more_btn > i {display:inline-block; width:8px; height:2px; background:#fff; position:absolute; top:50%; transform:translateY(-50%); right:20px;}
.prd_intro .tit_wrap > .more_btn > i:first-child {transform: translateY(-50%) rotate(90deg);}

.prd_slide {clear:both;}
.prd_slide.swiper-container {position: static !important;}
.prd_slide .swiper-slide {width: calc(100% / 4);padding-bottom: 27%;}
.prd_slide .swiper-slide .img_box {width:100%; border:1px solid #dddddd; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); background:#fff; position:absolute; top:0; left:0;}
.prd_slide .swiper-slide .img_box img {display:block; width:100%;}
.prd_slide .swiper-slide .name_box {display:block;width:100%;padding:15px 0;text-align:center;position:absolute;bottom: 0px;left:0;font-size:18px;}
/* index , product 페이지 동일 */
.name_box {line-height: 1.6;}
.name_box span {display: block; font-size: 14px;}

.prd_slide .swiper-slide .name_box.on {color:#fff; background: #222222;}
.prd_slide .swiper-slide .name_box.on::before {content:" "; display:block; position:absolute; left:50%; transform:translateX(-50%); top:-40px; width:1px; height:50px; background:linear-gradient(180deg, #222 40px, #fff 10px);}
.prd_slide .swiper-slide .name_box.on::after {content:" "; display:block; position:absolute; left:50%; transform:translateX(-50%); top:-40px; width:8px; height:8px; background:#222; border-radius:50%;}

.prd_slide .swiper-button {z-index:99; cursor:pointer; position: absolute; top:61%; transform: translateY(-61%); width: 60px; height: 60px; background: #fff; border:1px solid #ddd; border-radius: 50%;}
.prd_slide .next {right: 13%;}
.prd_slide .prev {left: 13%; transform: translateY(-61%) scaleX(-1);}

.prd_slide .swiper-button i {width: 16px; height: 2px; background-color: #737373; display:block; position: absolute; left:50%; transform: translateX(-50%) rotate(45deg);}
.prd_slide .swiper-button i:first-child {top:23px;}
.prd_slide .swiper-button i:last-child {bottom:23px; transform: translateX(-50%) rotate(-45deg);}


/* 배너 */
.banner {width: 100%; height: 428px; background: url(../../img/main_bg.png) no-repeat center / cover;}
.banner .inner { height: 100%; padding: 0 18.5%; display: flex;}
.banner .box {width: calc(100% / 3); height: 80%; text-align: center; border-right:1px solid #999; margin-top:43px; padding:0 40px; position:relative; background-position: center top 80px; background-repeat: no-repeat; transition: all .3s;}
.banner .box:first-child {border-left: 1px solid #999; background-image: url(../../img/main-icon01.png);}
.banner .box:nth-child(2) {background-image: url(../../img/main-icon02.png);}
.banner .box:nth-child(3) {background-image: url(../../img/main-icon03.png);}
.banner .box a {display: block; width: 100%; height: 100%;}
.banner .box .tit {position:absolute; left:50%; transform: translateX(-50%); top:160px; font-size: 28px; font-weight: 600; color:#fff; margin-bottom:20px; z-index:2; position: relative; transition: all .3s;}
.banner .box .tit::after {content:" "; display: block; opacity:0; width: 1px; height: 0; background-color: #fff; position: absolute; bottom:-50px; left:50%; transform: translateX(-50%); transition: height .3s;}
.banner .box .txt {position:absolute; left:50%; transform: translateX(-50%); top: 220px; font-size: 15px; font-weight: 300; color:#fff; line-height:1.6; word-break:keep-all; z-index:2; width:55%;}

.banner .box:hover {background-position: center top 40px; cursor:pointer;}
.banner .box:hover::before {content:" "; display:block; width:100%; height:428px; position:absolute; top:-43px; left:0; z-index:0;}
.banner .box:hover .tit {top:125px;}
.banner .box:hover .tit::after {height: 35px; opacity:1;}