@charset "utf-8";

/* 슬라이드 버튼  */
.swiper-button-prev,.swiper-button-next { width: 90px; height: 90px; bottom: 0; background-repeat: no-repeat; background-size: 100%; transition: all 0.3s; } 
.swiper-button-prev { background-image: url(../../images/os/new_img1/common/prev-btn-active.jpg); left: 0; } 
.swiper-button-next { background-image: url(../../images/os/new_img1/common/next-btn-active.jpg); right: 0; }

/** layer **/
.layer-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000; } 
.layer-wrap:before { content: " "; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } 
.layer-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1000px; } 
.layer-top { background: #3e215d; padding: 28px 0; } 
.layer-inner { width: 620px; margin: 0 auto; } 
.layer-top-cont-wrap { position: relative; } 
.layer-title { font-size: 30px; font-weight: 300; color: #fff; } 
.layer-close { cursor: pointer; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } 
.layer-cont-wrap { padding: 40px 0; background: #fff; } 
.layer-cont { margin-bottom: 40px; } 
.layer-cont .flexible-box { display: flex; align-items: center; width:100%; } 
.layer-cont .select-cont { font-size: 0; } 
.layer-cont>label { display: block; margin-bottom: 20px; font-size: 20px; } 
.radio-cont label:first-child { margin-right: 40px; } 
.layer-cont select { margin-right: 20px; width: 193px; } 
.layer-cont select:last-child { margin-right: 0; } 
.layer-cont .check-icon { width: 20px; height: 20px; margin-right: 5px; } 
.layer-cont .label-txt { font-size: 18px; font-weight: 300; } 
.layer-btn-wrap { text-align: center; } 
.planner-search-btn { background: #000; color: #fff; font-size: 18px; font-weight: 300; width: 180px; height: 60px; } 
.planner-search-btn img { margin-left: 13px; } 
/** ...layer **/

/* 뉴스 리스트 영역 */
.main-news-tab-list { display: flex; justify-content: center; margin-bottom: 40px; } 
.main-news-tab-list li { margin-right: 90px; } 
.main-news-tab-list li:last-child { margin-right: 0; } 
.main-news-tab-list li a {color: #959595;font-size: 18px;position: relative;opacity: 1;} 
.main-news-tab-list li a.active { color: #3e215d; font-weight: 600; opacity: 1; } 
/* .news-list-wrap { margin-bottom: 50px; } */
.news-list { display: flex; flex-wrap: wrap; justify-content:space-between; }
.news-list li { margin-bottom: 0px; width: 270px !important; margin-right: 40px; } 
.news-list-wrap td:nth-child(4n) .news-list li { margin-right: 0; } 
.news-thumb { width: 100%; height: 357px; background-repeat: no-repeat; background-position: center; background-size: 100%; transition: 0.2s; } 
.news:hover .news-thumb { background-size: 130%; } 
.news-info { margin-top: 20px; } 
.news-kinds { font-weight: 600; font-size: 14px; margin-bottom: 14px; } 
.news-tit { font-size: 20px; font-weight: 300; margin-bottom: 10px; word-break: keep-all; line-height: 1.6; width: 75%; } 
.news-date { opacity: 0.6; font-size: 14px; font-weight: 300; letter-spacing: 0; } 
/* ...뉴스 리스트 영역 */

.circle-btn-wrap.listAddBtn { margin-bottom:90px; } 
.circle-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90px; height: 90px; background: #3e215d; border-radius: 50%; margin: 0 auto; } 
.circle-btn img { max-width: 17px; } 
.circle-btn span { display: block; color: #fff; font-size: 14px; margin-top: 5px; letter-spacing: 0; } 
/* ============================== 홈페이지 메인 =================================== */
/** section 1 **/
.section1 { margin-bottom: 90px; } 
.section1 .swiper-wrapper { /*width: 1920px; */height: 870px; } 
.section1 .swiper-slide { background-size: 1920px 100%; background-repeat: no-repeat; background-position: center; } 
.section1 .swiper-slide.slide1:after,
.section1 .swiper-slide.slide2:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; background: rgba(0, 0, 0, 0.3); z-index: -1; } 
.section1 .swiper-slide.slide1 { background-image: url("../../images/os/new_img1/main/pc_main_slide1.jpg"); } 
.section1 .swiper-slide.slide2 { background-image: url("../../images/os/new_img1/main/pc_main_slide2.jpg"); } 
.section1 .swiper-slide.slide3 { background-image: url("../../images/os/new_img1/main/pc_main_slide3.jpg"); } 
.section1 .swiper-slide.slide4 { background-image: url("../../images/os/new_img1/main/pc_main_slide4_1.jpg"); } 
.section1 .swiper-slide.slide5 { background-image: url("../../images/os/new_img1/main/pc_main_slide5.jpg"); }
.section1 .swiper-slide.slide6 { background-image: url("../../images/os/new_img1/main/pc_main_slide6.jpg"); }
.section1 .swiper-slide.slide7 { background-image: url("../../images/os/new_img1/main/pc_party_main_slide.jpg"); } 
.section1 .swiper-slide.slide8 { background-image: url("../../images/os/new_img1/main/2nd_party_main_visual_pc.jpg"); }
.section1 .swiper-slide .slide-cont-wrap { position: absolute; top: 55.2%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; opacity: 0; transition: 0.7s; } 
.section1 .swiper-slide.swiper-slide-active .slide-cont-wrap { top: 60.2%; opacity: 1; } 
.slide-cont-wrap p,.slide-cont-wrap a { color: #fff; font-weight: 200; } 
.slide-cont-wrap .slide-product-name { font-size: 80px; margin-bottom: 30px; } 
.slide-cont-wrap .slide-description { font-size: 24px; line-height: 1.5; margin-bottom: 30px; } 
.link-wrap a { display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #fff; border-radius: 50%; width: 92px; height: 92px; margin: 0 auto; transition: all 0.4s; } 
/*.section1 .swiper-slide:hover .link-wrap a { background: #3e215d; } */
.link-wrap a img { max-width: 17px; } 
.link-wrap span { display: block; font-size: 14px; margin-top: 5px; } 
.section1 .swiper-pagination { bottom: 90px; } 
.section1 .swiper-pagination span { color: #fff; font-size: 18px; font-weight: 300; } 
span.swiper-pagination-current { font-weight: 600; } 
.section1 .swiper-button-next,.section1 .swiper-button-prev { background: none; color: #fff; bottom: 90px; width: auto; height: auto; } 
.section1 .swiper-button-prev { left: 46.3%; } 
.section1 .swiper-button-next { right: 46.3%; } 
/** ...section 1 **/
/** section 2 **/
.section2 { margin-bottom: 90px; } 
.sec-title { font-size: 40px; font-weight: 300; font-family: 'Nanum Gothic', sans-serif; text-align: center;    margin: 90px 0 21px 0; } 
.section2 #productsSwiper { margin-top: 35px; margin-bottom: 40px; } 
.prodList a { display: block; background: #f4f2f5; } 
.prodList .product-img-box { width: 100%; height: 450px; overflow: hidden; } 
.prodList .product-img-box img { width: 100%; height: 100%; } 
.product-txt-box { padding: 30px 20px; } 
/* .product-info-box { text-align: center; border-bottom: 1px solid #000; padding-bottom: 20px; } */
.product-info-box .product-name { font-size: 30px; font-weight: 600; margin-bottom: 20px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.product-info-box .product-description { font-size: 18px; font-weight: 300; margin-bottom: 40px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.product-info-box .product-price { font-size: 20px; font-weight: 600; letter-spacing: 0; } 
.product-sub-box { margin-top: 17px; } 
.product-sub-box:after { content: " "; display: block; clear: both; } 
.product-sub-box p { font-size: 20px; font-weight: 600; } 
.product-sub { float: left; letter-spacing: -0.05em; } 
/** ...section 2 **/

/** section3 **/
.section3 { padding: 65px 0 30px; background: #f7f7f7; } 
.sec-title-wrap { margin-bottom: 40px; } 
.tit-description { margin-top: 20px; text-align: center; font-weight: 300; font-size: 18px; } 
.sec3-cont-box { display: flex; justify-content: center; margin-bottom: 70px; } 
.sec3-cont { margin-right: 20px; } 
.sec3-cont:last-child { margin-right: 0; } 
.sec3-cont .img-box { margin-bottom: 30px; } 
.sec3-cont .img-box img { border-radius: 50%; box-shadow: 0 0 25px #999; } 
.sec3-cont .txt-box { text-align: center; } 
.sec3-cont .txt-box strong { font-size: 26px; letter-spacing: 0; } 
.sec3-cont .txt-box p { font-size: 18px; font-weight: 300; margin-top: 13px; } 
.section3 .caution { font-size: 18px; color: #666; text-align: center; font-weight: 300; } 
/** ...section 3 **/
/** tv section **/
.tv-section {margin-bottom: 150px;}
.tv-section .tv-sec-title {font-size: 40px; font-weight: 400; letter-spacing: 0; text-align: center; margin-bottom: 70px;}
.tv-section .tv-cont-box { display: flex; justify-content:space-between; } 
.tv-section .tv-cont-box .video-thumb { position: relative; cursor: pointer; } 
.tv-section .tv-cont-box .video-thumb img { width:100%; } 
.tv-section .tv-cont-box .video-thumb:after { content: " "; display: block; width: 135px; height: 134px; background-image: url(../../images/os/new_img1/main/video_btn_off.png); background-repeat: no-repeat; background-size: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); box-shadow: 2px 0 34px rgba(39, 24, 55, 0.6); border-radius: 50%; overflow: hidden; transition: 0.3s; } 
.tv-section .tv-cont-box .video-thumb:hover:after { background-image: url(../../images/os/new_img1/main/video_btn_on.png); }
.tv-section .tv-cont-box .video-thumb2 { position: relative; cursor: pointer; } 
.tv-section .tv-cont-box .video-thumb2 img { width:100%; } 
.tv-section .tv-cont-box .video-thumb2:after { content: " "; display: block; width: 135px; height: 134px; background-image: url(../../images/os/new_img1/main/video_btn_off.png); background-repeat: no-repeat; background-size: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); box-shadow: 2px 0 34px rgba(39, 24, 55, 0.6); border-radius: 50%; overflow: hidden; transition: 0.3s; } 
.tv-section .tv-cont-box .video-thumb2:hover:after { background-image: url(../../images/os/new_img1/main/video_btn_on.png); } 
.tv-section .tv-cont-box .right-cont { display: flex; flex-direction: column; justify-content: center; width: 50%; padding-left: 60px; } 
.tv-section .tv-cont-box .right-cont h2 { font-size: 60px; font-weight: 100; color: #fff; line-height: 1.2; margin-bottom: 55px; letter-spacing: 0; } 
.tv-section .tv-cont-box .right-cont h2 span { font-family: 'NanumGothic'; font-weight: 600; } 
.tv-section .tv-cont-box .right-cont .video-play-btn { box-sizing: border-box; width: 200px; height: 40px; font-size: 18px; font-weight: 500; letter-spacing: 0.05em; background: #000; color: #fff; cursor: pointer; transition: 0.3s; } 
.tv-section .tv-cont-box .right-cont .video-play-btn:hover { background: #8c20ff; } 
.tv-section .tv-cont-box .right-cont .video-play-btn img { margin-left: 36px; } 
/** ...tv section **/

.tv-section .tv-sec-title {
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 70px;
}

.tv-swiper-outer {
    padding: 0 40px;
    position: relative;
}

.tv-swiper-outer .swiper-container {
    margin-bottom: 40px;
}

.tv-swiper-outer .swiper-button-next,
.tv-swiper-outer .swiper-button-prev {
    width: 13px;
    height: 22px;
    top: 50%;
    transform: translateY(-50%);
    background-size: 100%;
}

.tv-swiper-outer .swiper-button-prev {
    background-image: url(../../images/os/new_img1/main/award-swiper-prev.png);
}

.tv-swiper-outer .swiper-button-next {
    background-image: url(../../images/os/new_img1/main/award-swiper-next.png);
}


.tv-section .tv-cont-box .video-thumb {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 301px;
    background-size: 100%;
    background-position: center center;
}

.tv-section .tv-cont-box .video-thumb img {
    width: 100%;
    height: auto;
}

.tv-section .tv-cont-box .video-thumb:after {
    content: " ";
    display: block;
    width: 135px;
    height: 134px;
    background-image: url(../../images/os/new_img1/main/video_btn_off.png);
    background-repeat:  no-repeat;
    background-size: 100%; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow:  2px 0 34px rgba(39, 24, 55, 0.6);
    border-radius: 50%;
    overflow: hidden;
    transition: 0.3s;
}

.tv-section .tv-cont-box .video-thumb:hover:after {
    background-image: url(../../images/os/new_img1/main/video_btn_on.png);
}

.tv-section .tv-cont-box .tv-description {
    font-size: 20px;
    text-align: center;
    padding-top: 17px;
}

/** ...tv section **/
/** section 4 **/
.section4 { padding: 175px 0 83px; } 
.section4 .sec-title { letter-spacing: 0; margin-bottom: 50px; } 
.sec4-cont-wrap { background: url(../../images/os/new_img1/main/sec4-bg.jpg) no-repeat center center; height: 405px; position: relative; overflow: hidden; } 
.sec4-cont-wrap .bg-cont-wrap { position: relative; position: absolute; margin: 0 auto; height: 100%; left: 52%; transform: translateX(-50%); } 
.sec4-cont-wrap .bg-cont-wrap .sec4-cont { position: absolute; } 
.sec4-cont-wrap .bg-cont-wrap .cont1 { left: -525px; } 
.sec4-cont-wrap .bg-cont-wrap .cont2 { left: 240px; bottom:0; } 
.sec4-cont-wrap .btn-wrap { display: flex; justify-content: center; align-items: center; height: 100%; } 
.sec4-cont-wrap .btn-wrap a { box-sizing: border-box; display: block; font-size: 40px; background: #000; color: #fff; padding: 20px 0; width: 340px; white-space: nowrap; transition: 0.3s; } 
.sec4-cont-wrap .btn-wrap a:first-child { color: #cbc8d4; margin-right: 60px; text-align: right; padding-right: 30px; } 
.sec4-cont-wrap .btn-wrap a:first-child img { margin-right: 8px; } 
.sec4-cont-wrap .btn-wrap a:last-child { color: #efc5bc; padding-left: 30px; } 
.sec4-cont-wrap .btn-wrap a:hover { background: #3e215d; color: #fff; } 
.sec4-cont-wrap .btn-wrap a:last-child img { margin-left: 8px; } 
.sec4-cont-wrap .btn-wrap a img { vertical-align: middle; margin-bottom: 8px; } 
/** ...section 4 **/
/** new-section1 **/
.new-section1 { margin-bottom: 90px; } 
.new-section1 .sec-title { position: relative; font-weight: 400; font-family: 'Noto Sans KR', sans-serif; margin-bottom: 40px; } 
.new-section1 .sec-title:after,.new-section1 .sec-title:before { content: " "; display: block; width: 383px; height: 1px; background: #000; position: absolute; top: 50%; } 
.new-section1 .sec-title:after { right: 0; } 
.new-section1 .flex-box { display: flex; } 
.new-section1 .left { padding-left: 50px; min-width: 272px; } 
.new-section1 .grade-box { text-align: center; } 
.new-section1 .grade-box .grade { font-size: 180px; font-weight: 600; color: #3e215d; letter-spacing: 0; margin-bottom: 10px; padding-top: 15px; } 
.new-section1 .grade-box span { color: #3e215d; font-size: 18px; font-weight: 600; } 
.new-section1 .right { position: relative; margin-left: 45px; } 
.new-section1 .right .icon { position: absolute; z-index: 2; right: -81px; top: -33px; } 
.new-section1 .right .swiper-container { max-width: 760px; } 
.new-section1 .right .swiper-slide { max-width: 360px; cursor: default; } 
.new-section1 .right .review { box-sizing: border-box; width: 360px; height: 360px; text-align: center; padding: 102px 0; background: #3e215d; position:relative;} 
.new-section1 .right .review p { color: #fff; font-weight: 200; } 
.new-section1 .right .review .star-grade { margin-bottom: 10px; } 
.new-section1 .right .review .review-txt { font-size: 20px; line-height: 1.6; text-align: center; word-break: keep-all; padding: 0 20px; } 
.new-section1 .right .review .review-product { width: 100%; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); line-height: 1.3; font-weight: 500; letter-spacing: 0; font-size: 20px; } 
.new-section1 .right .swiper-button-next2,.new-section1 .right .swiper-button-prev2 { bottom: 0; } 
.new-section1 .right .swiper-button-next2 { background-image: url(../../images/os/new_img1/main/review-next-btn.jpg); left: -185px; } 
.new-section1 .right .swiper-button-next2:hover { background-image: url(../../images/os/new_img1/common/next-btn-active.jpg); } 
.new-section1 .right .swiper-button-prev2 { background-image: url(../../images/os/new_img1/main/review-prev-btn.jpg); left: -274px; } 
.new-section1 .right .swiper-button-prev2:hover { background-image: url(../../images/os/new_img1/common/prev-btn-active.jpg); } 
/** ...new-section1 **/
/** new-section2 **/
.new-section2 { margin-bottom: 90px; } 
.new-section2 .sec-title { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; margin-bottom: 15px; } 
.new-section2 .sec-sub-txt { font-size: 18px; font-weight: 200; text-align: center; } 
.new-section2 .cont-list { display: flex; justify-content: center; margin-top: 40px; margin-bottom: 33px; } 
.new-section2 .cont-list li { width: 270px; height: 270px; border-radius: 50%; overflow: hidden; margin-right: 40px; position: relative; } 
.new-section2 .cont-list li:last-child { margin-right: 0; } 
.new-section2 .cont-list li .outer { display: flex; align-items: center; justify-content: center; text-align: center; position: absolute; top: 0; width: 100%; height: 100%; z-index: 3; background: rgba(0, 0, 0, 0.6); transition: 0.3s; opacity: 0; } 
.new-section2 .cont-list li:hover .outer { opacity: 1; } 
.new-section2 .cont-list li .hash-tag { color: #fff; font-size: 30px; font-weight: 600; } 
.new-section2 .cont-list li .description { font-size: 18px; font-weight: 200; line-height: 1.67; color: #fff; } 
.new-section2 .new-sec2-subject { text-align: center; font-size: 20px; font-weight: 300; line-height: 1.6; } 
/** ...new-section2 **/

/** new-section3 **/
.new-section3 { background: url(../../images/os/new_img1/main/sec3-bg.jpg) no-repeat center; box-sizing: border-box; height: 653px; padding-top: 85px; padding-bottom: 110px; position: relative; margin-bottom: 170px; } 
.new-section3 .sec-title { color: #fff; font-family: 'Noto Sans KR', sans-serif; font-weight: 400; margin-bottom: 20px; } 
.new-section3 .sec-sub-txt { text-align: center; color: #fff; font-size: 18px; font-weight: 200; } 
.new-section3 .speech-box { width: 912px; height: 335px; margin: 0 auto; margin-top: 40px; position: relative; } 
.new-section3 .speech-box .s-bubble { position: absolute; opacity: 0; transition: 0.6s; } 
.new-section3 .speech-box .s-bubble:nth-child(1) { top: 0; left: -20px; transition-delay: 0.1s; transform: translateX(-50px); } 
.new-section3 .speech-box .s-bubble:nth-child(2) { top: 30px; right: 0; transition-delay: 0.5s; transform: translateX(50px); } 
.new-section3 .speech-box .s-bubble:nth-child(3) { top: 115px; left: 0; transition-delay: 0.9s; transform: translateX(-50px); } 
.new-section3 .speech-box .s-bubble:nth-child(4) { bottom: -25px; right: -20px; transition-delay: 1.4s; transform: translateX(50px); } 
.new-section3 .speech-box .s-bubble.video-bubble { cursor: pointer; } 
.new-section3 .speech-box.on .s-bubble { opacity: 1; transform: none; } 
.new-section3 .circle-btn-wrap { position: absolute; left: 50%; bottom: -75px; transform: translateX(-50%); } 
.new-section3 .circle-btn { width: 150px; height: 150px; box-sizing: border-box; border: 3px solid #fff; font-size: 18px; font-weight: 200; color: #fff; } 
.new-section3 .circle-btn span.bold { line-height: 1.3; font-size: 24px; font-weight: 600; } 
/** ...new-section3 **/

/** new-section4 **/
.new-section4 { margin-bottom: 90px; } 
.new-section4 .flex-box { display: flex; justify-content: center; align-items: center; } 
.new-section4 .flex-box .left { margin-right: 90px; } 
.new-section4 .flex-box .right .sec-title { font-family: 'Noto Sans KR',sans-serif; font-weight: 400; margin-bottom: 36px; } 
.new-section4 .flex-box .right .description { font-size: 18px; font-weight: 200; margin-bottom: 10px; } 
.new-section4 .flex-box .right .description-bold { font-size: 30px; font-weight: 600; line-height: 1.4; margin-bottom: 32px; } 
.new-section4 .flex-box .right .odometer-wrap { margin-bottom: 40px; } 
.new-section4 .flex-box .right .odometer-wrap span { font-size: 20px; font-weight: 200; vertical-align: bottom; } 
.new-section4 .flex-box .right .odometer-wrap .odometer-inside span { font-weight: 600; font-size: 36px; color: #3e215d; } 
.new-section4 .flex-box .right .test-btn { display: block; background:#3e215d; width: 180px; height: 60px; line-height: 60px; text-align: center; color: #fff; } 
.new-section4 .flex-box .right .test-btn span { font-size: 18px; font-weight: 200; margin-right: 17px; } 
/** ...new-section4 **/

/** section 6 **/
.section6 { padding: 70px 0; margin-bottom: 90px; } 
.section6 .section-inner { position: relative; } 
.section6 .section-inner:after { content: " "; display: block; position: absolute; top: -70px; right: -350px; width: 1092px; height: 521px; z-index: -1; background: url(../../images/os/new_img1/main/sec4-chairman.jpg) no-repeat; } 
.sec6-cont-box { text-align: left; } 
.sec6-title { font-size: 60px; font-weight: 600; text-align:left; line-height: 1.2; } 
.sec6-subject { font-size: 18px; font-weight: 300; line-height: 1.6; margin: 24px 0 40px; } 
.section6 .circle-btn { margin: 0; } 
/** ...section 6 **/

/** new section5 **/
.new-section5 { margin-bottom: 85px; } 
.new-section5 .sec-title { font-family: 'Noto Sans KR',sans-serif; font-weight: 400; margin-bottom: 180px; } 
.new-section5 .best-leader-list { display: flex; justify-content: center; } 
.new-section5 .best-leader { box-sizing: border-box; width: 220px; position: relative; border: 1px solid #000; margin-right: 25px; padding: 80px 14px 50px; } 
.new-section5 .best-leader:last-child { margin-right: 0; } 
.new-section5 .best-leader .best-leader-img { width: 180px; height: 180px; overflow: hidden; border-radius: 50%; position: absolute; top: -140px; left: 50%; transform: translateX(-50%); } 
.new-section5 .best-leader .best-leader-img img { width: 100%; }
.new-section5 .best-leader .leader-name { font-size: 30px; font-weight: 600; text-align: center; margin-bottom: 30px; } 
.new-section5 .best-leader .leader-typho { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 200; line-height: 1.67; word-break: keep-all; margin-bottom: 5px; text-align:center; } 
.new-section5 .best-leader .leader-info { text-align: center; } 
.new-section5 .best-leader .leader-info span { font-size: 16px; font-weight: 200; } 
.new-section5 .best-leader .icon-box { width: 122px; height: 30px; background: #fff; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); text-align: center; } 
.new-section5 .best-leader .icon-box a { display: inline-block; width: 35px; height: 100%; background-repeat: no-repeat; transition: 0.3s; } 
.new-section5 .best-leader .icon-box a.leader-detail { background-image: url(../../images/os/new_img1/main/detail.jpg); margin-right: 6px; } 
.new-section5 .best-leader .icon-box a.leader-detail:hover { background-image: url(../../images/os/new_img1/main/detail-active.jpg); } 
.new-section5 .best-leader .icon-box a.leader-join { background-image: url(../../images/os/new_img1/main/join.jpg); } 
.new-section5 .best-leader .icon-box a.leader-join:hover { background-image: url(../../images/os/new_img1/main/join-active.jpg); } 
.new-section5 .circle-btn-wrap { margin-top: 55px; } 
/** ...new section5 **/
/** section 5 **/
.section5 { background: #f7f7f7; padding: 90px 0; margin-bottom: 90px; } 
.section5 .tab-list { display: flex; justify-content: center; padding-bottom: 20px; } 
.section5 .tab-list li { margin-right: 90px; cursor: pointer; } 
.section5 .tab-list li:last-child { margin-right: 0; } 
.section5 .tab-list li { color: #959595; font-size: 18px; position: relative;opacity: 1; } 
.section5 .tab-list li.choice { opacity: 1; font-weight: 600; color: #3e215d; } 
.section5 .tab-list li:after { content: " "; display: block; width: 8px; height: 8px; background: #3e215d; position: absolute; bottom: -24px; left: 50%; border-radius: 50%; transform: translateX(-50%); } 
.sec5-cont-wrap { margin-top: 40px; } 
.sec5-cont-box { position: relative; height: 360px; } 
.sec5-cont { display: flex; justify-content: space-between; position: absolute; width: 100%; opacity: 0; left: -70px; transition: 0.4s; } 
.sec5-cont-active { opacity: 1 !important; left: 0 !important; z-index: 3; } 
.sec5-cont-left { margin-right: 90px; } 
.sec5-cont-right { width: 100%; display: flex; flex-direction: column; justify-content: center; } 
.sec5-strong { font-size: 30px; } 
.sec5-subject { font-size: 20px; font-weight: 300; line-height: 1.6; margin: 31px 0 32px; word-break: keep-all; } 
.section5 .circle-btn { margin: 0; } 
/** ...section 5 **/
/** section 7 **/
.section7 { margin-bottom: 90px; } 
.sec7-cont-wrap { margin-top: 40px; } 
.sec7-cont-wrap .news-list-wrap { margin-bottom: 40px; } 
.news-list li:nth-child(4n) { margin-right: 0; } 
/** ...section 7 **/
/* fix btn */
.fix-btn-list { font-size: 0; position: fixed; top: 50%; right: 50px; transform: translateY(-50%); z-index: 1000; } 
.fix-btn { width: 80px; height: 80px; margin-bottom: 10px; text-align: center; } 
.fix-btn:nth-child(2) { display: none; } 
.fix-btn a,.fix-btn span { display: block; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 50%; position: relative; } 
.fix-btn:nth-child(1) span { color: #3e215d; font-size: 20px; font-weight: 600; line-height: 0.7; } 
.fix-btn:nth-child(1) span,.fix-btn:nth-child(3) a { background: #fff; border: 1px solid #000; } 
.fix-btn:nth-child(2) a { background: #3e215d; } 
.top-btn a { border: 1px solid #000; background: #fff; font-size: 18px; font-weight: 200; color: #000; letter-spacing: 0; transition: 0.3s; } 
.top-btn a:before { content: "▲"; display: block; font-size: 14px; margin-bottom: 4px; } 
.fix-sub-btn { font-size: 16px; font-weight: 600; position: absolute; top: 50%; right: 0; background: #fff; border: 2px solid #3e215d; border-radius: 20px; transform: translateY(-50%); padding: 0 35px; width: 0; height: 55px; line-height: 55px; z-index: -1; white-space: nowrap; overflow: hidden; opacity: 0; transition: 0.3s; } 

/* ============================== 쇼핑몰 메인 =================================== */

/* 비주얼배너 */
/* .shopTop { width:1200px; height:500px; margin:20px auto 25px auto; } 
#mainVis { float:left; width:875px; position:relative; height:500px; overflow:hidden; } 
#slides2 { } 
#slides2 li { width:875px; margin:0 auto; height:500px; text-indent: -9999px; } 
#slides2 li a { display:block; width:100%; height:500px; } 
#slides2 .img1 { background:url("../../images/os/new_img1/mall/m_vis01.jpg") no-repeat top center; } 
#slides2 .img2 { background:url("../../images/os/new_img1/mall/m_vis02.jpg") no-repeat top center; } 
#slides2 .img3 { background:url("../../images/os/new_img1/mall/m_vis03.jpg") no-repeat top center; } 
#slides2 .img4 { background:url("../../images/os/new_img1/mall/m_vis04.jpg") no-repeat top center; } 

#mainVis .mainVisTxt { display:table; margin:0 auto; position:absolute; bottom:20px; left:25px; z-index:500; } 
#mainVis .pagination { width:100%; margin:0 auto; } 
#mainVis .pagination li { display:block; float:left; width:190px; height:32px; line-height:32px; cursor:pointer; z-index:9999; text-align:center; font-size:14px; color:#777; background:#fff; margin:0 8px; border-radius:7px; } 
#mainVis .pagination li:hover { background:#18b0bc !important; color:#fff !important; } 
#mainVis .noCurrent { background:#18b0b !importantc; color:#fff !important; } 
#mainVis .current { background:#18b0bc !important; color:#fff !important; } 

.shopTop .newPds { float:right; width:300px; height:500px; border-top:4px solid #18b0bc; background:#f4f4f4; box-sizing:border-box; text-align:center; padding:40px; position:relative; } 
.newPds h2 { font-family: 'Lato', sans-serif; color: #212121; font-size:26px; line-height:22px; text-transform: uppercase; } 

#slides3 .slidesjs-container { width:100%; height:410px !important; } 
#slides3 .slidesjs-container ul { width:220px; display: block; } 
#slides3 .slidesjs-container li a { display:block; } 
#slides3 .slidesjs-container li:first-child { margin:30px 0; } 
#slides3 .slidesjs-container li img { width:220px; height:220px; border-radius:50%; overflow:hidden; } 
#slides3 .slidesjs-container dt { font-family: 'Lato', sans-serif; color: #959595; font-size:14px; text-transform: uppercase; } 
#slides3 .slidesjs-container dd.Tit { font-size:16px; color:#4c4c4c; margin:10px 0 18px 0; } 
#slides3 .slidesjs-container dd { } 

#slides3 .slidesjs-pagination { position:absolute; left:50%; bottom:20px; width:60px; height:8px; margin-left:-30px; z-index:9998; } 
#slides3 .slidesjs-pagination li { float:left; width:8px; height:8px; margin:0 2px; cursor:pointer; } 
#slides3 .slidesjs-pagination li a { display:block; width:8px; height:8px; border-radius:50%; background:#c7c7c7; font-size:0; text-indent:-9999em; line-height:0; } 
#slides3 .slidesjs-pagination li a.active, #slides3 .slidesjs-pagination li a:hover.active { background:#18b0bc; } 

#slides3 a.slidesjs-next,
#slides3 a.slidesjs-previous,
#slides3 a.slidesjs-play,
#slides3 a.slidesjs-stop { display:block; position:absolute; text-indent:-9999px; } 
#slides3 a.slidesjs-next { width:18px; height:35px; background:url('../../images/os/new_img1/main/pd_arr_right.png') no-repeat center right; bottom:100px; right:50%; margin-right:-135px; } 
#slides3 a.slidesjs-previous { width:18px; height:35px; background:url('../../images/os/new_img1/main/pd_arr_left.png') no-repeat center left; bottom:100px; left:50%; margin-left:-135px; } 

.shopTop .newPdsOn { float:right; width:300px; height:500px; } */

/* 쇼핑몰, 마이오피스 상단 공지사항 공통단 */
.noticeTab { width:100%; height:230px; border:1px solid #ddd; padding:20px; box-sizing:border-box; position:relative; } 
.noticeTabs { margin:0 auto 10px auto; border-bottom:1px solid #d7d6d6; } 
.noticeTabs li { float:left; margin-right:5px; position:relative; list-style:none; } 
.noticeTabs li a { display:inline-block; line-height:34px; font-size:15px; background:#d7d6d6; color:#fff; text-align:center; padding:0 20px; transition-duration: 0.5s; } 
.noticeTabs li a:hover, .noticeTabs li a.active, .noticeTabs li a.tabOn { background:#f16995; } , .noticeTabs li a.tabOn { background:#f16995; } 
.NoticeMore { position:absolute; right:25px; top:30px; } 
.NoticeMore a { display:block; font-size:13px; color:#888; transition-duration: 0.5s; } 
.NoticeMore a:hover { color:#222; } 

.notice_content li { width: 100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:23px; padding-left:3px; } 
.notice_content li:before { content: ""; float:left; width:4px; height:4px; border-radius:2px; background:#6f6f6f; margin:10px 7px 0 0; } 
.notice_content li a { color:#777; font-size: 13px; transition-duration: 0.5s; } 
.notice_content li a:hover { color:#212121; } 

.newPds2 { width:100%; height:250px; border-top:4px solid #18b0bc; background:#f4f4f4; box-sizing:border-box; padding:30px 20px 20px 20px; position:relative; margin-top:20px; } 
.newPds2 h2 { font-family: 'Lato', sans-serif; color: #212121; font-size:24px; line-height:22px; text-transform: uppercase; text-align:center; } 

#slides4 .slidesjs-container { width:100%; height:175px !important; } 
#slides4 .slidesjs-container dl { width:260px; height:130px; margin:20px 0; } 
#slides4 .slidesjs-container dl a { display:block; width:100%; height:130px; } 
#slides4 .slidesjs-container dt { float:left; width:130px; height:130px; margin-right:10px; } 
#slides4 .slidesjs-container dt img { width:130px; height:130px; } 
#slides4 .slidesjs-container dd { float:left; width:120px; } 
#slides4 .slidesjs-container li:first-child { font-family: 'Lato', sans-serif; color: #959595; font-size:14px; text-transform: uppercase; } 
#slides4 .slidesjs-container li.Tit { font-size:15px; color:#333; margin:5px 0 10px 0; } 
#slides4 .slidesjs-container li { font-size:13px; line-height:22px; } 

#slides4 .slidesjs-pagination { position:absolute; left:50%; bottom:15px; width:60px; height:8px; margin-left:-30px; z-index:9998; } 
#slides4 .slidesjs-pagination li { float:left; width:8px; height:8px; margin:0 2px; cursor:pointer; } 
#slides4 .slidesjs-pagination li a { display:block; width:8px; height:8px; border-radius:50%; background:#c7c7c7; font-size:0; text-indent:-9999em; line-height:0; } 
#slides4 .slidesjs-pagination li a.active, #slides4 .slidesjs-pagination li a:hover.active { background:#18b0bc; } 

#slides4 a.slidesjs-next,
#slides4 a.slidesjs-previous,
#slides4 a.slidesjs-play,
#slides4 a.slidesjs-stop { display:block; position:absolute; text-indent:-9999px; z-index:9900; } 
#slides4 a.slidesjs-next { width:9px; height:18px; background:url('../../images/os/new_img1/main/pd_arr_right.png') no-repeat center right; bottom:15px; right:50%; margin-right:-135px; } 
#slides4 a.slidesjs-previous { width:9px; height:18px; background:url('../../images/os/new_img1/main/pd_arr_left.png') no-repeat center left; bottom:15px; left:50%; margin-left:-135px; } 

.quickBrand { width:1200px; height:224px; margin:0 auto; } 
.quickBrand li { float:left; width:224px; height:224px; margin-left:20px; } 
.quickBrand li:first-child { margin:0; } 
.quickBrand .Tit { width:85%; height:75px; margin:0 auto; font-size:18px; color:rgba(0, 0, 0, 1); background:rgba(250, 250, 250, 0.8); text-align:center; text-transform: uppercase; line-height:22px; } 
.quickBrand .Tit p { font-family: 'Lato', sans-serif; font-size:13px; color:rgba(0, 0, 0, 0.7); padding-top:16px; } 
.quickBrand a { display:block; width:100%; height:224px; padding-top:135px; box-sizing:border-box; } 
.quickBrand .brandBg01 { background:url('../../images/os/new_img1/mall/brand_pd01.png')no-repeat; } 
.quickBrand .brandBg02 { background:url('../../images/os/new_img1/mall/brand_pd02.png')no-repeat; } 
.quickBrand .brandBg03 { background:url('../../images/os/new_img1/mall/brand_pd03.png')no-repeat; } 
.quickBrand .brandBg04 { background:url('../../images/os/new_img1/mall/brand_pd04.png')no-repeat; } 
.quickBrand .brandBg05 { background:url('../../images/os/new_img1/mall/brand_pd05.png')no-repeat; } 

.contLine { width:100%; height:1px; background:#ddd; margin:60px 0 80px 0; clear: both; } 

.shopPdInner { width:1200px; margin:0 auto; height: auto; position:relative; } 
.shopPdInner .shopTabs { display:table; margin:40px auto; } 
.shopTabs li { float:left; margin:0 10px; } 
.shopTabs li a { display:inline-block; font-size:16px; color:#4c4c4c; line-height:50px; padding:0 40px; border:1px solid #ddd; transition-duration: 0.5s; } 
.shopTabs li a:hover, .shopTabs li a:active, .shopTabs li a.On { color:#18b0bc; border:1px solid #18b0bc; } 

.shopTit { display:table; margin:0 auto; text-align:center; } 
.shopTit p { font-family: 'Lato', sans-serif; font-size:17px; color:#4c4c4c; } 
.shopTit p:before { content: ""; display:block; width:80px; height:1px; background:#d6d6d6; float:left; margin:12px 15px; } 
.shopTit p:after { content: ""; display:block; width:80px; height:1px; background:#d6d6d6; float:right; margin:12px 15px; } 
.shopTit h3 { font-size:38px; color:#212121; margin-top:20px; } 
.shopTit .More { position: absolute; right: 0; top: 50px; } 
.shopTit .More a { display: inline-block; padding: 3px 7px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px; letter-spacing: -0.1em; } 

.shopPdtList { width:100%; } 

.prod_content { width: 1200px; height:auto; border:none; margin: 0 auto; } 
.shop_cont { float:left; border:1px solid #efefef; box-sizing:border-box; margin: 0 15px 30px 15px; } 
.prod-box { display:inline-block; height:380px; width:100%; margin:0 auto; position:relative; } 
.prod-box dl { text-align:center; margin:0 auto; } 
.prod-box dl dt { width:230px; height:230px; margin:0 auto; } 
.prod-box dl dt img { width:230px; height:230px; background:#fff; } 
.prod-box dl dd { margin: 0 20px !important; line-height:20px; } 
.prod-box .t-title { font-size:16px; color:#212121; margin-bottom:10px !important; } 
.prod-box .t-title:before { content:""; display:block; width:100%; height:1px; background:#efefef; margin-bottom:20px; } 
.prod-box .t-s-eng { font-size:12px; color:#acacac; } 
.prod-box .t-price { font-size:16px; color:#d30318; vertical-align:baseline; margin-top:15px; } 
.prod-box .t-price strong { color:#333; font-size:16px; font-weight:500; } 
.prod-box .t-price2 { font-size:14px; color:#888; } 
.prod-box .t-pv { font-size:14px; color:#005ac92017-12-27; } 
.prod-box .t-amt { font-size:14px; color:#f53e3c; } 
.prod-box .t-amt2 { font-size:14px; color:#222; } 
.prod-box .PIcon { position:absolute; right:30px; top:30px; } 
.prod-box .pdlist-bottom { width:170px; display:inline-block; margin:15px auto 0 auto; } 

/* 제품 가격미표출 */
.prod-box-none { display:inline-block; width:100%; margin:0 auto; position:relative; } 
.prod-box-none dl { text-align:center; } 
/* .prod-box-none dl dt { margin:10px auto; } */ 
.prod-box-none dl dt img { width:230px; height:230px; background:#fff; } 
.prod-box-none dl dd { padding:0 30px; line-height:22px; } 
.prod-box-none .t-title { font-size:16px; color:#212121; height:40px; line-height:22px; word-wrap: break-word; margin-bottom:10px; } 
.prod-box-none .t-no { font-size:14px; color:#9e9e9e; line-height:1.4; } 
.prod-box-none .t-no:before { content:""; display:block; width:60px; height:1px; background:#bdbdbd; margin:20px auto; } 
.prod-box-none .t-s-eng { font-size:12px; color:#acacac; } 
.prod-box-none .t-price { font-size:16px; color:#d30318; vertical-align:baseline; margin:5px 0; } 
.prod-box-none .t-price strong { color:#333; font-size:16px; font-weight:500; } 
.prod-box-none .t-price2 { font-size:14px; color:#888; } 
.prod-box-none .t-pv { font-size:14px; color:#005ac9; } 
.prod-box-none .t-amt { font-size:14px; color:#f53e3c; } 
.prod-box-none .t-amt2 { font-size:14px; color:#222; } 
.prod-box-none .PIcon { position:absolute; right:15px; top:15px; width:45px; font-size:12px; color:#fff; padding:3px 0; border-radius:3px; } 
.prod-box-none .pdlist-bottom { width:170px; display:inline-block; margin:15px auto 0 auto; } 

.pdlist-bottom span { float:left; display:inline-block; margin-left:2px; } 
.pdlist-bottom span:first-child { margin-left:0px; } 
.pdlist-bottom span input { width:50px; height:30px; line-height:30px; border:1px solid #ddd; padding:0 5px; background:#fff; text-align:right; } 
.pd-btn { display:inline-block; height:30px; font-size:14px; padding:0 10px; text-align:center; line-height:30px; -webkit-transition-duration:0.3s; transition-duration:0.3s; } 
.pd-btn i { line-height:30px; color:#fff; } 
.pdlist-bottom .bx-controls-direction { width:1200px; margin:0 auto; } 

/* 제품리스트 호버시 */
.shop_cont:hover .PdsMu .social { -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; } 

.shop_cont .PdsMu { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 30; display: block; transition-duration: 0.5s; } 
.shop_cont .PdsMu:hover { background:rgba(0,0,0,0.12); width: 100%; height: 100%; z-index: 30; display: block; /*cursor:pointer; */ } 
.shop_cont .PdsMu ul { display:table; margin: 0 auto 0; height: 100%; position: relative; } 
.shop_cont .PdsMu ul li { /* float:left; */margin:0 5px; display: table-cell; vertical-align: middle; } 
.shop_cont .PdsMu ul li:last-child { /* position:absolute; *//* top:30px; *//* left:50%; *//* margin-left:-30px; */ } 
.shop_cont .PdsMu i { font-size: 25px; } 

.shop_cont .PdsMu .social { width: 60px; height: 60px; display: inline-flex; justify-content: center; align-items: center; color: #fff; border-radius: 50%; font-size: 14px; line-height: 1; margin-bottom: 8px; opacity: 0; -moz-transform-origin: center 50%; -ms-transform-origin: center 50%; -webkit-transform-origin: center 50%; transform-origin: center 50%; -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; } 

.shop_cont .PdsMu .social2 { width: 110px; height: 35px; color: #fff; border-radius: 5px; line-height: 1; } 

.shop_cont .PdsMu .PdMuBtn { background: #18b0bc; } .shop_cont .PdsMu .PdMuBtn:hover { background: #12a3ae; transition:0.3s all; } 
.shop_cont .PdsMu .PdMuBtn2 { background: #333; } .shop_cont .PdsMu .PdMuBtn2:hover { background: #111; transition:0.3s all; } 

.shop_cont:hover .PdsMu .social { opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 
.shop_cont:hover .PdsMu .social:nth-child(1) { -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } 
.shop_cont:hover .PdsMu .social:nth-child(2) { -moz-transition-delay: 0.05s; -o-transition-delay: 0.05s; -webkit-transition-delay: 0.05s; transition-delay: 0.05s; } 
.shop_cont:hover .PdsMu .social2:nth-child(1) { -moz-transition-delay: 0.15s; -o-transition-delay: 0.15s; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } 

/* 메인 롤링 팝업 */
.mainPop{border:1px solid #ccc;width:520px !important;height:760px !important;background: transparent !important;}
.mainPop #popRoll{background:#fff;}
.mainPop .popRollWrap{position:relative;width:100%;height:100%;}
.mainPop .popRollWrap .topClose{position:absolute;top:5px;right:5px;z-index:9999;width:20px;height:20px;line-height:20px;background:rgba(255,255,255,0.7);}
.mainPop .lSSlideOuter{width:520px;}
.mainPop .popRollImg{width:520px;height:680px;}
.mainPop .lSSlideOuter:hover .lSAction > a{opacity:1;background-color:#8c8c8c;}
.mainPop .lSPager{position:absolute;bottom:85px;left:0;width:100%;text-align:center;}
.mainPop .lSPager li{display:inline-block;margin:0 3px;}
.mainPop .lSPager li a{display:inline-block;width:12px;height:12px;background:#f8f8f8;border-radius:50%;text-indent:-999em;}
.mainPop .lSPager li.active a{background:#0060af;}
.mainPop .popRollInfo{display:table;width:520px;height:50px;border-top:1px solid #ccc;box-sizing:border-box;}
.mainPop .popRollInfo p:first-child{width:400px;line-height:1.4;text-align:left;padding-left:10px;-webkit-line-clamp:2;overflow:hidden;}
.mainPop .popRollInfo p{display:table-cell;vertical-align:middle;width:120px;}
.mainPop .popRollInfo p a{width:100px;height:36px;line-height:36px;background:#888;color:#fff;border-radius:25px;display:inline-block;text-align:center;}
.mainPop .lSAction > a.lSPrev{background:url('../../images/os/main/popArrowL.png')no-repeat;}
.mainPop .lSAction > a.lSNext{background:url('../../images/os/main/popArrowR.png')no-repeat;}
.mainPop .lSAction > a{width:50px;height:50px;opacity:0;margin-top:-25px;}
.mainPop .popToday{position:absolute;left:0;line-height:30px;background:rgba(245,245,245,0.9);width:100%;text-align:left;}
.mainPop .popToday input{margin:0 0 0 5px;width:20px;height:20px;vertical-align:middle;}
.mainPop .popToday span{color:#555;}
.mainPop .popToday .b-close{color:#000;}

.season-section{
	margin-bottom:100px;
}
.season-section a{
	display:block;
	box-sizing:border-box;
	width:1200px;
	height:341px;
	margin:40px auto 0;
	background-image:url(/myoffice/images/os/new_img1/main/season_img.jpg);
	background-size:cover;
	background-position:center;
	position:relative;
}
.season-section a .tit-wrap{
	position:absolute;
	top:50%;
	left:160px;
	transform:translateY(-50%);
}
.season-section a .tit-wrap .season-pdt-name{
	color:#212121;
	font-size:48px;
	margin-bottom:25px;
	font-weight:bold;
}
.season-section a .tit-wrap .season-pdt-sub-name{
	display:flex;
	align-items:center;
	font-size:26px;
	color:#9c4392;
	letter-spacing:0;
	font-weight:400;
}
.season-section a .tit-wrap .season-pdt-sub-name::before, .season-section a .tit-wrap .season-pdt-sub-name::after{
	content:"";
	display:inline-block;
	width:2px;
	height:24px;
	background:#9c4392;
}
.season-section a .tit-wrap .season-pdt-sub-name::before{
	margin-right:20px;
}
.season-section a .tit-wrap .season-pdt-sub-name::after{
	margin-left:20px;
}

/* 2025.07_리뉴얼 */
.main-visual-section {
    width: 100%;
    max-height: 100vh;
    overflow: hidden;
    font-size: 0;
    position: relative;
}
.bg-video-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}
.bg-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/***** 메인 스토리 섹션 영역 *****/
.main-story-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: background-image 0.5s;
}

.story-swiper-outer {
    margin-top: 90px;
    position: relative;
}

#storySwiper {overflow: visible;}
#storySwiper img {
    min-height: 175px;
    object-fit: cover;
    object-position: center;
}
    
.story-img-swiper {
    font-size: 0;
    max-width: 1280px;
    max-height: 530px;
    border-radius: 20px;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.6s;
}
.story-img-swiper .swiper-slide-active {transform: scale(1);}

.story-swiper-cont-box {
    position: relative;
    top: -60px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 20px;
    max-width: 790px;
    margin: 0 auto;
    z-index: 2;
}

.story-content-inner {
    display: grid;
    align-items: center;
    grid-template-areas: ". .";
    gap: 160px;
}

.story-content {
    box-sizing: border-box;
    padding: 39px 84px;
    background: #fff;
    border-radius: 15px;
}

.content-tit {
    font-size: 30px;
    margin-bottom: 10px;
    font-weight: 500;
}

.content-desc {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    word-break: keep-all;
}

.content-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    background-color: #000;
    border-radius: 50%;
}
.content-link i {
    color: #fff;
    font-size: 2.6rem;
}

#storySwiperProgress {
    border-radius: 5px;
    width: 75%;
    max-width: 790px;
    height: 3px;
    background: #ccc;
    margin: 35px auto 0;
    overflow: hidden;
}
#storySwiperProgress .swiper-progress-cont {
    border-radius: 5px;
    height: 100%;
    background: #000;
    transition: width 0.5s;
}

/***** ...메인 스토리 섹션 영역 *****/

/***** 메인 브랜드 섹션 영역 *****/
.main-brands-section {
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
}
.main-brands-section .section-tit-box {
    margin-bottom: 90px;
}
.main-brands-section .main-brand-content-wrap {
    display: grid;
    grid-template-areas: ". .";
    grid-auto-columns: 1fr;
}
.main-brands-section .main-brand-txt-box {
    box-sizing: border-box;
    width: 100%;
    max-width: 750px;
    padding: 200px 75px 200px 50px;
    margin-left: auto;
    position: relative;
    z-index: 5;
}
.main-brands-section .main-brand-list .main-brand {
    box-sizing: border-box;
    width: 110%;
    position: relative;
}
.main-brands-section .main-brand-list .main-brand::before {
    content: "";
    position: absolute;
    top: 0;
    left: -89px;
    width: 130%;
    height: 100%;
    border-radius: 20px;
    opacity: 0;
    transition: all 0.7s;
    transform: translateX(-40px);
}
.main-brands-section .main-brand-list .main-brand#brand-exoregen::before {
    background-color: #3e215d;
}
.main-brands-section .main-brand-list .main-brand#brand-exoheal::before {
    background-color: #43695c;
}
.main-brands-section .main-brand-list .main-brand#brand-healthyexo::before {
    background-color: #f36c21;
}
.main-brands-section .main-brand-list .main-brand#brand-lumiete::before {
    background-color: #991F24;
}
.main-brands-section .main-brand-list .main-brand#brand-cell::before {
	background-color: #F5B800;
}
.main-brands-section .main-brand-list .main-brand .main-brand-info-box {
    display: grid;
    align-items: center;
    grid-template-areas: ". . .";
    grid-auto-columns: max-content 1fr max-content;
    gap: 40px;
    position: relative;
    padding: 52px 0;
}
.main-brands-section .main-brand-list .main-brand .exo-icon {
    display: block;
    width: 60px;
    height: 64px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.main-brands-section .main-brand-list .main-brand .exo-icon.regen-icon {
    background-image: url("../../images/os/new_img1/main/exoregen_icon.png");
}
.main-brands-section .main-brand-list .main-brand .exo-icon.heal-icon {
    background-image: url("../../images/os/new_img1/main/exoheal_icon.png");
}
.main-brands-section .main-brand-list .main-brand .exo-icon.healthy-icon {
    background-image: url("../../images/os/new_img1/main/healthyexo_icon.png");
}
.main-brands-section .main-brand-list .main-brand .exo-icon.lumiete-icon {
    background-image: url("../../images/os/new_img1/main/lumiete_icon.png");
}
.main-brands-section .main-brand-list .main-brand .exo-icon.cell-icon {
    background-image: url("../../images/os/new_img1/main/cellevante_icon.png");
}
.main-brands-section .main-brand-list .main-brand .main-brand-name {
    font-size: 30px;
    margin-bottom: 10px;
    line-height: 1;
    transition: step-start color 0.7s;
    font-weight: 500;
}
.main-brands-section .main-brand-list .main-brand .main-brand-desc {
    font-size: 18px;
    font-weight: 300;
    transition: step-start color 0.7s;
    letter-spacing: -0.04em;
    word-break: keep-all;
}
.main-brands-section .main-brand-list .main-brand .content-arrow-wrap {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.7s;
}
.main-brands-section .main-brand-list .main-brand .content-arrow-wrap .content-arrow-wt i.regen-arrow {
    color: #3e215d;
}
.main-brands-section .main-brand-list .main-brand .content-arrow-wrap .content-arrow-wt i.heal-arrow {
    color: #43695c;
}
.main-brands-section .main-brand-list .main-brand .content-arrow-wrap .content-arrow-wt i.healthy-arrow {
    color: #f36c21;
}
.main-brands-section .main-brand-list .main-brand .content-arrow-wrap .content-arrow-wt i.lumiete-arrow {
    color: #991F24;
}
.main-brands-section .main-brand-list .main-brand .content-arrow-wrap .content-arrow-wt i.cell-arrow {
    color: #F5B800;
}
.main-brands-section .main-brand-list .main-brand.active::before {
    opacity: 1;
    transform: translateX(0);
}
.main-brands-section .main-brand-list .main-brand.active .main-brand-name, .main-brands-section .main-brand-list .main-brand.active .main-brand-desc {
    color: #fff;
}
.main-brands-section .main-brand-list .main-brand.active .content-arrow-wrap {
    opacity: 1;
}
.main-brands-section .main-brand-list .main-brand.active .exo-icon.regen-icon {
    background-image: url("../../images/os/new_img1/main/exoregen_icon_hover.png");
}
.main-brands-section .main-brand-list .main-brand.active .exo-icon.heal-icon {
    background-image: url("../../images/os/new_img1/main/exoheal_icon_hover.png");
}
.main-brands-section .main-brand-list .main-brand.active .exo-icon.healthy-icon {
    background-image: url("../../images/os/new_img1/main/healthyexo_icon_hover.png");
}
.main-brands-section .main-brand-list .main-brand.active .exo-icon.lumiete-icon {
    background-image: url("../../images/os/new_img1/main/lumiete_icon_hov.png");
}
.main-brands-section .main-brand-list .main-brand.active .exo-icon.cell-icon {
    background-image: url("../../images/os/new_img1/main/cellevante_icon_hover.png");
}

.main-brands-section .main-brand-img-box {
    width: 100%;
    height: 100%;
}
.main-brands-section .main-brand-img-box .main-brand-img {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.main-brands-section .main-brand-img-box .main-brand-img img {
    position: absolute;
    top: 0;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.7s;
}
.main-brands-section .main-brand-img-box .main-brand-img img.active {
    opacity: 1;
}
.main-brands-section .mo-main-brand-img-box {
    display: none;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.102);
    border-radius: 20px;
    width: 100%;
    height: auto;
    margin: 0 auto 30px;
    overflow: hidden;
    isolation: isolate;
}
.main-brands-section .mo-main-brand-img-box .main-brand-img {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
}
.main-brands-section .mo-main-brand-img-box .main-brand-img img {
    position: absolute;
    top: 0;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    opacity: 0;
    transition: opacity 0.7s;
}
.main-brands-section .mo-main-brand-img-box .main-brand-img img.active {
    opacity: 1;
}

/***** ...메인 브랜드 섹션 영역 *****/

/***** 메인 새 상품 섹션 영역 *****/
.main-produt-section{overflow: hidden;}
.main-produt-section .section-inner h2{
    font-size: 40px;
    font-weight: 300;
    text-align: center;
    padding: 90px 0 21px 0;
}
.main-produt-section .section-inner #ProductSwiper{position: relative;}

.main-produt-section .section-inner .product-list .pro-inner{
   display: flex;
   flex-direction: column;
   padding: 21px;
   background-color: #F4F2F5;
   cursor: pointer;
}

.main-produt-section .section-inner .product-list .pro-inner .pro-tit{
                    font-size: 30px;
                    font-weight: bold;
                }
.main-produt-section .section-inner .product-list .pro-inner .pro-desc{
                    font-size: 18px;
                    font-weight: 300;
                    margin: 20px 0 40px 0;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
.main-produt-section .section-inner .product-list .pro-inner .pro-price{
                    font-size: 20px;
                    font-weight: bold;
                }

.main-produt-section .section-inner .swiper-button-next{
            right: 0;
            bottom: 0;
            top: unset;
            height: unset;
            width: 90px;
        }
.main-produt-section .section-inner .swiper-button-next:after{
                display: none;
            }
        
.main-produt-section .swiper-button-prev {
            left: 0;
            bottom: 0;
            top: unset;
            height: unset;
            width: 90px;
        }
        .main-produt-section .swiper-button-prev:after{
                display: none;
            }


@charset "UTF-8";
.main-produt-section .section-inner {
    overflow: hidden;
}
.main-produt-section .section-inner h2 {
    font-size: 40px;
    font-weight: 300;
    text-align: center;
    padding: 90px 0 21px 0;
}
.main-produt-section .section-inner #ProductSwiper {
    position: relative;
}
.main-produt-section .section-inner .product-list .pro-inner {
    display: flex;
    flex-direction: column;
    padding: 21px;
    background-color: #F4F2F5;
    cursor: pointer;
}
.main-produt-section .section-inner .product-list .pro-inner .pro-tit {
    font-size: 30px;
    font-weight: bold;
}
.main-produt-section .section-inner .product-list .pro-inner .pro-desc {
    font-size: 18px;
    font-weight: 300;
    margin: 20px 0 40px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.main-produt-section .section-inner .product-list .pro-inner .pro-price {
    font-size: 20px;
    font-weight: bold;
}
.main-produt-section .section-inner .swiper-button-next {
    right: 0;
    bottom: 0;
    top: unset;
    height: unset;
    width: 90px;
}
.main-produt-section .section-inner .swiper-button-next:after {
    display: none;
}
.main-produt-section .section-inner .swiper-button-prev {
    left: 0;
    bottom: 0;
    top: unset;
    height: unset;
    width: 90px;
}
.main-produt-section .section-inner .swiper-button-prev::after {
    display: none;
}
.main-produt-section .link-more {
    padding-top: 68px;
}
.main-produt-section .link-more a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background: #3E215D;
}
.main-produt-section .link-more a img {
    width: 17px;
}
.main-produt-section .link-more a span {
    color: #fff;
    font-size: 16px;
    font-weight: 300;
}
.main-news-section .section-inner {
    overflow: hidden;
}
.main-news-section .main-news-top {
    margin-bottom: 90px;
    display: grid;
    justify-content: space-between;
    align-items: flex-end;
    grid-template-areas: ". .";
}
.main-news-section .main-news-top .content-arrow-link {
    display: flex;
    align-items: center;
    gap: 20px;
}
.main-news-section .main-news-top .content-arrow-link b {
    font-size: 30px;
}
.main-news-section #mainNewsSwiper {
    padding-bottom: 100px;
}
/*
.main-news-section .news-thumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0px 30px 30px 30px;
    width: 100%;
    height: 0;
    padding-bottom: 65%;
    margin-bottom: 40px;
    position: relative;    
}

.main-news-section .news-thumb .brand-label {
    font-size: 18px;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    text-align: center;
}
.main-news-section .news-thumb .brand-label.regen-label {
    background: #3e215d;
}
.main-news-section .news-thumb .brand-label.heal-label {
    background: #43695c;
}
.main-news-section .news-thumb .brand-label.healthy-label {
    background: #f36c21;
}
.main-news-section .news-thumb .brand-label.biome-label {
    background: #000;
}
.main-news-section .news-tit {
    font-size: 30px;
    letter-spacing: -0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 9px;
    font-weight: 500;
}
.main-news-section .news-desc {
    font-size: 18px;
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 30px;
    line-height: 1.5;
}
.main-news-section .news-date {
    font-size: 18px;
    font-weight: 300;
    color: #9a9a9a;
}
*/
.main-tv-section {
    padding-bottom: 150px;
}
.main-tv-section .section-inner {
    overflow: hidden;
}
.main-tv-section .section-inner h2 {
    font-size: 40px;
    font-weight: 300;
    text-align: center;
    padding: 90px 0 21px 0;
}
.main-tv-section .section-inner #TvSwiper {
    position: relative;
}
.main-tv-section .section-inner #TvSwiper .tv-list li {
    display: flex;
    justify-content: space-evenly;
}
.main-tv-section .section-inner #TvSwiper .tv-list li a .tv-title {
    display: block;
    width: 100%;
    font-size: 20px;
    text-align: center;
    margin-top: 17px;
}
.main-tv-section .section-inner .swiper-button-next {
    display: block;
    right: 25px;
    bottom: 0;
    top: 50%;
    height: 0;
    width: 13px;
}
.main-tv-section .section-inner .swiper-button-next:after {
    display: none;
}
.main-tv-section .section-inner .swiper-button-prev {
    display: block;
    left: 25px;
    bottom: 0;
    top: 50%;
    height: 0;
    width: 13px;
}
.main-tv-section .section-inner .swiper-button-prev::after {
    display: none;
}
.main-tv-section .link-more {
    padding-top: 40px;
}
.main-tv-section .link-more a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    background: #3E215D;
}
.main-tv-section .link-more a img {
    width: 17px;
}
.main-tv-section .link-more a span {
    color: #fff;
    font-size: 16px;
    font-weight: 300;
}
.main-skintype-section {
    padding-bottom: 90px;
}
.main-skintype-section .section-inner .skin-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 90px;
}
.main-skintype-section .section-inner .skin-inner__right {
    display: flex;
    flex-direction: column;
}
.main-skintype-section .section-inner .skin-inner__right .skin-tit {
    font-size: 30px;
    padding-bottom: 36px;
}
.main-skintype-section .section-inner .skin-inner__right > span {
    font-size: 18px;
    font-weight: 300;
    padding-bottom: 10px;
}
.main-skintype-section .section-inner .skin-inner__right strong {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.3;
    padding-bottom: 36px;
}
.main-skintype-section .section-inner .skin-inner__right .count {
    display: flex;
    align-items: center;
    gap: 3px;
    padding-bottom: 38px;
}
.main-skintype-section .section-inner .skin-inner__right .count > span:first-child {
    font-size: 18px;
    font-weight: 300;
}
.main-skintype-section .section-inner .skin-inner__right .count > span:last-child {
    font-size: 30px;
    font-weight: bold;
    color: #3e215d;
}
.main-skintype-section .section-inner .skin-inner__right .skin-btn-area {
    width: 180px;
    height: 60px;
    background: #3e215d;
}
.main-skintype-section .section-inner .skin-inner__right .skin-btn-area .skin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100%;
    font-size: 18px;
    color: #fff;
    font-weight: 300;
}
.main-skintype-section .section-inner .skin-inner__right .skin-btn-area .skin-btn img {
    width: 17px;
}
.main-supporters-section .sup-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 92px;
}
.main-supporters-section .sup-inner .inner-left h2 {
    font-size: 60px;
    font-weight: 500;
    line-height: 1.3;
    padding-bottom: 23px;
}
.main-supporters-section .sup-inner .inner-left p {
    font-size: 18px;
    font-weight: 300;
    padding-bottom: 40px;
}
.main-supporters-section .sup-inner .inner-left .sup-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    background: #3E215D;
}
.main-supporters-section .sup-inner .inner-left .sup-btn img {
    width: 17px;
}
.main-supporters-section .sup-inner .inner-left .sup-btn span {
    color: #fff;
    font-size: 16px;
    font-weight: 300;
}
.main-culture-section {
    background: #f5f5f5;
    position: relative;
    padding: 200px 0;
    overflow: hidden;
}
.main-culture-section .culture-ani-txt {
    font-size: 26rem;
    font-weight: 500;
    color: #fff;
    opacity: 0.5;
    white-space: nowrap;
    position: absolute;
    transition: transform 1s;
    line-height: 1;
}
.main-culture-section .culture-ani-txt.culture-ani-txt1 {
    top: 0;
    left: 100vh;
}
.main-culture-section .culture-ani-txt.culture-ani-txt2 {
    bottom: 0;
    right: 100vh;
}
.main-culture-section .culture-list {
    display: grid;
    grid-template-areas: ". .";
    grid-auto-columns: 1fr;
    gap: 80px;
    margin-top: 90px;
}
.main-culture-section .culture {
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 0;
    padding-bottom: 83.3333333333%;
    position: relative;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    overflow: hidden;
}
.main-culture-section .culture::before {
    content: "";
    backdrop-filter: blur(5px);
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s;
}
.main-culture-section .culture:hover::before {
    opacity: 1;
}
.main-culture-section .culture:hover .culture-tit-wrap {
    transform: translateY(-110px);
}
.main-culture-section .culture:hover .culture-desc {
    opacity: 1;
}
.main-culture-section .culture.culture-cul {
    background-image: url("../../images/os/new_img1/main/culture_img.jpg");
}
.main-culture-section .culture.culture-recruit {
    background-image: url("../../images/os/new_img1/main/recruit_img.jpg");
}
.main-culture-section .culture-content {
    position: absolute;
    left: 0;
    bottom: 60px;
    box-sizing: border-box;
    width: 100%;
    padding-left: 60px;
}
.main-culture-section .culture-tit-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.5s;
    position: relative;
}
.main-culture-section .culture-tit-wrap .culture-tit {
    color: #fff;
    font-size: 30px;
}
.main-culture-section .culture-desc {
    color: #fff;
    position: absolute;
    top: 0;
    font-size: 18px;
    font-weight: 300;
    word-break: keep-all;
    letter-spacing: -0.06em;
    opacity: 0;
    transition: opacity 0.5s;
}
.main-awards-section .main-awards-content-wrap {
    display: grid;
    grid-template-areas: ". .";
    grid-auto-columns: 1fr;
    background-color: #0b2151;
    min-height: 600px;
}
.main-awards-section .main-awards-txt-box {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin: 0 auto;
    padding-left: 60px;
}
.main-awards-section .awards-link {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 90px;
}
.main-awards-section .awards-link b {
    color: #fff;
    font-size: 30px;
}
.main-awards-section .main-awards-img-box {
    width: 100%;
    height: 100%;
}
.main-awards-section .main-awards-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/***** 메인 공통 사용 타이틀 css *****/

.section-tit-box .section-tit.wt-tit span {
    color: #fff;
}
.section-tit-box .section-tit {
  font-size: 50px;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.05em;
}

.section-tit-box .section-tit.wt-tit,
.section-tit-box .section-tit .wt-tit span {color: #fff;}
.section-tit-box .section-tit .wt-tit strong {color: #fff; font-weight: 500;}

/***** ...메인 공통 사용 타이틀 css *****/