@charset "utf-8";

/* 공통 */
/* .sec-title {text-align: center;}
.sec-title h2 {font-size: 23px; font-weight: 700; margin-bottom: 20px;}
.sec-title p {font-size: 16px; font-weight: 300;}
.bg {position: absolute; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; display: block; z-index: -1;}
.content-wrap {padding-top: 50px;} */

.search-wrap {display: inline-block;}
.search-box {display: flex; align-items: center; padding: 8px 30px 8px 26px; box-sizing: border-box; background-color: #f5f5f5; border: 1px solid #999; border-radius: 17px;}
.search-box input {padding-right: 5px; box-sizing: border-box; font-size: 16px; border: none; background-color: transparent;}
.search-box input::placeholder {color: #a6a6a6;}
.search-box button {border: none; background-color: transparent;}
.search-box button img {height: 20px; vertical-align: middle;}

/* 메인 */
#main {background-color: #f7f6f3;}
.section {width: 100%;}
.section-title {font-weight: 600; font-size: 30px; text-align: center;}
.top {position: fixed; width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; background-size: cover; background-color: #222; border-radius: 100%; right: 50px; bottom: 105px; border: none; cursor: pointer; z-index: 9; display: none; }
.top img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.section1 .main-banner {height: 866px; background-repeat: no-repeat; background-size: cover; background-position: center center;}

.box-wrap {display: flex; gap: 0;}
.box-wrap .box {width: 50%; min-height: 800px; background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 2.865vw 4.063vw; box-sizing: border-box;}
.section2 .box-wrap .box:nth-child(1) {color: #fff;}
.section2 .box-wrap .box:nth-child(2) {color: #00498c;}
.box h2 {font-size: 50px; font-weight: 700; margin-bottom: 62px; word-break: keep-all; white-space: nowrap;}
.box ul {display: flex; flex-direction: column; gap: 28px;}
.box ul li {font-size: 18px; padding-bottom: 8px; width: fit-content;; position: relative;}
.box ul li:hover::after {position: absolute; display: block; content: ''; height: 2px; width: 100%; bottom: 0px; left: 0;}
.section2 .box-wrap .box:nth-child(1) ul li:hover::after {background-color: #fff;}
.section2 .box-wrap .box:nth-child(2) ul li:hover::after {background-color: #00498c;}

.section3 {padding: 75px 0 80px; background-color: #00498c;}
.section3 .section-title {color: #fff; margin-bottom: 54px;}
.video-wrap {height: 700px; width: 90%; margin: 0 auto;;}
/* .video-wrap video {background-color: #ddd; width: 100%; height: 100%;;} */
.video-wrap iframe {background-color: #ddd; width: 100%; height: 100%;;}

.section4 {padding: 75px 0 90px;}
.section4 .section-title {color: #00498c; margin-bottom: 22px;}
.section4 .link-more {font-size: 14px; margin: 0 auto; display: block; text-align: center; color: #5e5e5e;}
.section4 .product-wrap {position: relative; width: 90%; margin: 0 auto;}
.section4 .product-swiper {width: 90%; margin: 45px auto 0;}
.thumbnail {margin-bottom: 30px;}
.thumbnail img {width: 100%;}
.prd-title {margin-bottom: 22px; font-size: 14px; word-break: keep-all; line-height: 120%;}
.discount {color: #ff0023; display: inline-block; margin-right: 14px;}
.prd-price {font-size: 16px; font-weight: 500;}
.product-swiper-button-prev, .swiper-rtl .product-swiper-button-next, .product-swiper-button-next, .swiper-rtl .product-swiper-button-prev {top: 45%; transform: translateY(-50%);}
.product-swiper-button-next {right: 0px; z-index: 9; left: auto;}
.product-swiper-button-prev {left: 0px; z-index: 9; right: auto;}
.product-swiper-button-prev.swiper-button-disabled, .product-swiper-button-next.swiper-button-disabled {opacity: 1;}
.swiper-button-next::after, .swiper-button-prev::after {display: none;}

.section5 .banner {height: fit-content; width: 100%; background-repeat: no-repeat; background-size: 100%; object-fit: cover;}

.section6 {padding: 85px 0 120px; position: relative;}
.section6 .section-wrap {border-top: 2px solid #00498c; border-bottom: 1px solid #cac9c6; display: flex; gap: 0;}
.section6 .section-wrap > div {width: 100%;}
.section6 .section-wrap .left {padding: 2.865vw 3.6vw; box-sizing: border-box; color: #00498c; font-weight: 800; font-size: 78px; border-right: 1px solid #cac9c6;}
.section6 .section-wrap .right .news-list li {height: 200px;}
.section6 .section-wrap .right .news-list li:not(:last-child) {border-bottom: 1px solid #cac9c6;}
.section6 .section-wrap .right .news-list li a {display: flex; flex-direction: column; gap: 18px; justify-content: center; height: 100%; padding-left: 60px; box-sizing: border-box;}
.section6 .section-wrap .right .news-list li a .type {color: rgba(0, 73, 140, 0.5); font-size: 14px;;}
.section6 .section-wrap .right .news-list li a .title {color: #00498c; font-weight: 600; font-size: 20px;}
.section6 .section-wrap .right .news-list li a .date {color: rgba(0, 73, 140, 0.7); font-size: 14px;}

/* 브랜드스토리 */
.brandstory {width: 100%; height: 1000px; position: relative; z-index: 0;}
.brandstory .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;}
.brandstory .txt {position: relative; z-index: 9; height: 90%; display: flex; flex-direction: column; gap: 70px; align-items: center; justify-content: center; color: #fff; word-break: keep-all;}
.brandstory .txt h2 {font-size: 50px; font-weight: 700;}
.brandstory .txt p {font-size: 18px; line-height: 135%; text-align: center;}

/* 회사소개 */
.company > div {color: #00498c;}
.company p {font-size: 35px; line-height: 150%; margin-bottom: 55px; font-weight: 700;}
.company-3 {padding: 15em 0;}
.company-3 .video-wrap {width: 70%;}

/* 팝업레이어 */
#front-pop {z-index:9999;position:relative;margin:0 auto;width:100%;height:0}
#front-pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.front-pops {position:absolute; /*border:1px solid #ddd; */background:#fff}
.front-pops-con {background:#000}
.front-pops-footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.front-pops-footer button {margin:0 5px;padding:5px 10px;border:0;background:#393939;color:#fff}
.sound-only {display:inline-block;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0 !important;line-height:0 !important;overflow:hidden}

/* 상품 페이지 */
.main-product {padding: 0 !important;}
.product-wrap {max-width: 1400px; margin: 0 auto; padding: 50px 0 130px;}
.product-wrap .search-wrap {margin-bottom: 40px;}
.product-wrap .result-wrap {margin-bottom: 150px; font-size: 15px; color: #2c2c2c;}
.prd-category {margin-bottom: 53px;}
.prd-category > div:nth-child(1) {margin-bottom: 10px;}
.prd-category ul {display: flex; gap: 10px; flex-wrap: wrap;}
.prd-category ul li {min-width: 170px;}
.prd-category ul li a {display: block; border: 1px solid #999; color: #2e2e2e; font-size: 13px; text-align: center; padding: 18px 0;}

.prd-list-wrap .prd-list-top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px;}
.prd-list-top .breadcrumb {font-size: 13px; color: #646464;}
.prd-list-top .breadcrumb span:not(:last-child) {margin-right: 10px;}
.prd-list-top .sort {display: flex;}
.prd-list-top .sort .prd-sort {display: flex; align-items: center; gap: 26px; margin-right: 20px;}
.prd-list-top .sort .prd-sort li {position: relative; color: #646464; font-size: 13px;}
.prd-list-top .sort .prd-sort li:not(:last-child):after {position: absolute; display: block; content: ''; height: 100%; width: 1px; background-color: #646464; top: 50%; right: -12px; transform: translateY(-50%);}
.prd-list-top .sort select {border: 1px solid #999; font-size: 13px; padding: 5px 22px 5px 12px; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('../images/ico_select.png') 92% no-repeat;}

.prd-list {display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 50px; row-gap: 75px;}
.prd-list .list-item .prd-title {margin-bottom: 12px;}
.prd-list .list-item .prd-info {font-size: 14px;}
.prd-list .list-item .prd-price {font-size: 16px; font-weight: 500; margin-top: 22px; color: #090909;}

.pagination {display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; margin-top: 126px; cursor: pointer;}
.pagination .navi {border: 1px solid #ddd; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;}
.pagination .navi img {height: 10px;}
.pagination .num {margin: 0 22px; display: flex; text-align: center;}
.pagination .num span {position: relative; z-index: 3; width: 28px; height: 35px; line-height: 35px; display: inline-block;}
.pagination .num span:hover::after {position: absolute; content: ''; display: block; width: 28px; height: 28px; background-color: #f5f5f5; border-radius: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1;}

/* board */
.content-area {padding: 90px 0 130px 0; max-width: 1200px; margin: 0 auto; box-sizing: border-box;}
.board-wrap .img-wrap {position: relative; height: 300px;}
.board-wrap .img-wrap .bg {height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.prd-wrap {height: 500px !important;}

/* 약관 */
.terms-wrap {margin-top: 50px;}
.terms-wrap .pre-tab-menu {border-bottom: none;}
.terms-wrap .pre-tab-menu ul {display: flex; justify-content: flex-start; gap: 0; margin-bottom: 40px;}
.terms-wrap .pre-tab-menu ul li {width: 50%; border: 1px solid #efefef; background-color: #f4f4f5; border-radius: 3px; height: 45px; line-height: 43px; text-align: center; cursor: pointer;}
.terms-wrap .pre-tab-menu ul li.active {background-color: #fff; border: 2px solid #00498c; color: #00498c; font-weight: 500; text-align: center;}
.terms-wrap .tab-con {margin-top: 30px; margin-bottom: 50px;}
.terms-box {background-color: #efefef; padding: 25px 30px; box-sizing: border-box; margin-bottom: 30px; border-radius: 6px;}
.terms-box:last-child {margin-bottom: 0;}
.terms-box .terms-title {font-weight: 600; margin-bottom: 20px; font-size: 22px;}
.terms-box .terms-con {height: 650px; overflow-y: scroll; background-color: #fff; padding: 20px; font-size: 15px; line-height: 150%; box-sizing: border-box; border-radius: 4px;}

.tab-con > div {display: none; font-size: 12px;}
.tab-con > div.on {display: block;}

.sub-banner-tit {text-align: center; color: #fff; font-size: 42px; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); font-weight: 500; letter-spacing: 1.5px;}

.visul__mouseicon {position: absolute; bottom: 83px; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 30px; border: 2px solid rgba(255, 255, 255, 1); border-radius: 10px;}
.visul__mouseicon > div {position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 5px; background-color: #fff;}
.visul__mouseicon-info {position: absolute; bottom: 60px; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 14px; font-family: "ProximaNovaRegular", "Noto Sans KR", sans-serif;}
.visul__vertical-bar {position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); width: 1px; height: 41px; background: #fff; z-index: 999;}

@media all and (max-width: 1024px) {
    .box-wrap .box {min-height: 600px; padding: 45px 50px;}
    .box-wrap .box h2 {font-size: 42px;}

    .sub-banner-tit {font-size: 30px; top: 50%; width: 100%;}
}

@media all and (max-width:768px) {
    .section1 .main-banner {height: 700px;}
    .box-wrap {flex-direction: column;}
    .box-wrap .box {width: 100%;}

    .section3 {padding: 55px 0 60px;}
    .section3 .section-title {margin-bottom: 45px;}
    .video-wrap {height: 450px;}
    
    .section4 {padding: 55px 0 70px;}
    .section4 .section-title {margin-bottom: 18px;}
    .product-swiper-button-prev img, .product-swiper-button-next img {height: 35px;}

    .section6 {padding: 65px 0 80px; position: relative;}
    .section6 .section-wrap {flex-direction: column;}
    .section6 .section-wrap > div {width: 100%;}
    .section6 .section-wrap .left {padding: 45px 30px; font-size: 65px; border-right: none; border-bottom: 1px solid #cac9c6;}
    .section6 .section-wrap .right .news-list li {height: 150px;}
    .section6 .section-wrap .right .news-list li a {padding-left: 45px;}

    /* 브랜드스토리 */
    .brandstory {padding: 0 20px; box-sizing: border-box;}

    /* 팝업레이어 */
    #front-pop {position:absolute; top: 100px; text-align: center; height: auto;}
    .front-pops {position: static; display: inline-block; width: 90% !important; height: auto !important;}
    .front-pops-con img {width: 100% !important;}
}

@media all and (max-width: 568px) {
    .section-title {font-size: 25px;}
    .top {width: 40px; height: 40px; right: 25px; bottom: 50px;}
    .section1 .main-banner {height: 600px;}
    .box-wrap .box {min-height: 350px; padding: 35px 40px;}
    .box-wrap .box h2 {font-size: 35px; margin-bottom: 30px;}
    .box-wrap .box ul {gap: 15px;}
    .box-wrap .box ul li {font-size: 16px; padding-bottom: 5px;}

    .section3 {padding: 45px 0 50px;}
    .section3 .section-title {margin-bottom: 35px;}
    .video-wrap {height: 280px;}
    
    .section4 {padding: 45px 0 60px;}
    .section4 .section-title {margin-bottom: 18px;}
    .section4 .product-swiper {margin: 30px auto 0;}
    .thumbnail {margin-bottom: 20px;}
    .prd-title {margin-bottom: 14px;}
    .product-swiper-button-prev {left: -10px;}
    .product-swiper-button-next {right: -10px;}
    .product-swiper-button-prev img, .product-swiper-button-next img {height: 25px;}

    .section5 .banner {min-height: 220px;}

    .section6 {padding: 35px 0 40px;}
    .section6 .section-wrap .left {padding: 25px 20px; font-size: 45px;}
    .section6 .section-wrap .right .news-list li {height: 130px;}
    .section6 .section-wrap .right .news-list li a {padding-left: 20px; gap: 12px;}
    .section6 .section-wrap .right .news-list li a .type, .section6 .section-wrap .right .news-list li a .date {font-size: 12px;}
    .section6 .section-wrap .right .news-list li a .title {font-size: 16px;}

    /* 브랜드스토리 */
    .brandstory {height: calc(100vh - 150px); padding: 0 25px;}
    .brandstory .txt {gap: 30px; height: 100%;}
    .brandstory .txt h2 {font-size: 30px;}
    .brandstory .txt p {font-size: 14px;}

    /* 회사소개 */
    .company-3 {padding: 5em 0;}
    .company-3 .video-wrap {width: 90%;}

    /* 상품페이지 */
    .product-wrap {padding: 25px 15px 80px;}
    .product-wrap .search-wrap {margin-bottom: 30px;}
    .product-wrap .result-wrap {margin-bottom: 30px; text-align: center;}
    .prd-category {margin-bottom: 30px;}
    .prd-category > div:nth-child(1) {margin-bottom: 5px;}
    .prd-category ul {gap: 5px;}
    .prd-category ul li {min-width: auto; width: calc(50% - 2.5px);}
    .prd-category ul li a {padding: 12px 0;}
    .prd-list-wrap .prd-list-top {margin-bottom: 30px; display: block;}
    .prd-list-wrap .prd-list-top .sort {justify-content: flex-start; margin-top: 10px;}
    .prd-list {grid-template-columns: repeat(2, 1fr); column-gap: 15px; row-gap: 50px;}
    .prd-list-top .sort .prd-sort {gap: 20px;}
    .pagination {margin-top: 70px;}
    
    .content-area {padding: 30px 15px 80px;}
    .board-wrap .img-wrap {height: 150px;}
    .prd-wrap {height: 250px !important;}

    .sub-banner-tit {font-size: 24px; top: 48%; width: 100%;}

    .visul__mouseicon {display: none;}
    .visul__mouseicon-info {display: none;}
    .visul__vertical-bar {display: none;}
}

@media all and (max-width:320px) {

}