/* BASIC css start */
@charset "euc-kr";
.main-box section > h2 { position: relative; font-size: 18px; margin-bottom: 15px; padding-left: 10px; }
.main-box section > h2:before { content: ''; display: block; position: absolute; top: 50%; left: 0; height: 17px; width: 1px; margin-top: -8px; background-color: #515151; }

/*메인 비쥬얼*/
.main-visual-wrap { overflow: hidden; position: relative; width: 100%; height: 580px; }
#mainVisual { overflow: hidden; position: absolute; top: 0; left: 50%; margin-left: -960px; width: 1920px; height: 580px; }
#mainVisual .swiper-slide { text-align: center; }
#mainVisual .swiper-slide span { position: absolute; top: 50%; left: 50%; display: block; border-radius: 3px; font-size: 18px; width: 150px; margin-top: 130px; margin-left: -490px; text-align: center; height: 45px; line-height: 45px; opacity: 0.65; }
#mainVisual .swiper-slide span:after { content: '>'; margin-left: 5px; }
#mainVisual .swiper-slide:hover span { opacity: 1; }
#mainVisual .swiper-slide span.white-btn { color: #fff; border: 1px solid #fff; }
#mainVisual .swiper-slide span.black-btn { color: #515151; border: 1px solid #515151; }
#mainVisual .swiper-util-btn { width: 1330px; position: absolute; top: 0; left: 50%; margin-left: -665px; height: 100%; }
#mainVisual .swiper-move-btn-wrap { position: absolute; bottom: 10px; right: 55px; font-size: 14px; color: #fff; background-color: rgba(0,0,0,0.5); border-top-left-radius: 5px; border-bottom-left-radius: 5px; z-index: 10; padding: 12px 10px; display: none; }
#mainVisual .swiper-move-btn-wrap > div { line-height: 0; }
#mainVisual .swiper-move-btn { width: 20px; height: 14px; fill: #fff; cursor: pointer; background-repeat: no-repeat; background-position: center center; background-size: 20px; line-height: 0; }
#mainVisual .swiper-button-play { display: none; background-image: url(https://image.plthink.com/homepage/Image_2020/AreaMain/main_visual/play_ico.png); }
#mainVisual .swiper-button-pause { background-image: url(https://image.plthink.com/homepage/Image_2020/AreaMain/main_visual/pause_ico.png); }
#mainVisual .swiper-pagination-fraction { position: absolute; left: auto; bottom: 10px; right: 0px; width: auto; display: inline-block; padding: 10px 12px; font-size: 15px; color: #fff; background-color: rgba(0,0,0,0.5); border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
#mainVisual .swiper-pagination-bullets { position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; z-index: 1; }
#mainVisual .swiper-pagination-bullets > span { margin: 0 10px; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0.4; outline: 0; vertical-align: middle; transition: all 0.3s; -webkit-transition: all 0.3s; }
#mainVisual .swiper-pagination-bullets > span.swiper-pagination-bullet-active { opacity: 1; width: 12px; height: 12px; margin: 0 8px; }
#mainVisual .main-visual-next { right: 0; }
#mainVisual .main-visual-prev { left: 0; }
#mainVisual .main-visual-next, #mainVisual .main-visual-prev { overflow: hidden; position: absolute; top: 50%; margin-top: -30px; display: block; width: 30px; height: 60px; background-position: center center !important; background-repeat: no-repeat !important; background-size: auto; margin: 0 10px; margin-top: -30px; text-indent: -9999px; opacity: 0; outline: 0; }
#mainVisual:hover .main-visual-next, #mainVisual:hover .main-visual-prev { opacity: 1; }
#mainVisual .main-visual-next { background-image: url(https://image.plthink.com/homepage/Image_2021/main/next_ico.png); }
#mainVisual .main-visual-prev { background-image: url(https://image.plthink.com/homepage/Image_2021/main/prev_ico.png); }


/*이벤트 배너*/
#mainBox01 { padding: 70px 0 25px; }

#siBanner { position: relative; float: left; height: 270px; width: 305px; overflow: hidden; margin-right: 33px; }
#siBanner > a { position: absolute; display: block; top: 0; left: 0; width: 305px; height: 270px; background: rgba(0,0,0,0.5) url(https://image.plthink.com/homepage/Image_2021/main/si_banner/si_ban_cover.png) no-repeat center center; z-index: 1; }
#siBanner.slide-style01 .owl-carousel .owl-nav { right: 0; }
#siBanner.slide-style01 .owl-carousel .owl-dots { display:none; }


#noticeBanner { height: 310px; float: left; width: 480px; }
#noticeBanner.slide-style03 .owl-carousel .owl-nav { right: 0; }
#noticeBanner.slide-style03 .owl-carousel .owl-dots { right: 25px; }

#eventBanner { height: 310px; float: right; width: 480px; }
#eventBanner.slide-style03 .owl-carousel .owl-nav { right: 0; }
#eventBanner.slide-style03 .owl-carousel .owl-dots { right: 25px; }


/*제품 리스트*/
#mainBox02 { background-color: #f6f6f6; padding: 60px 0 65px; }
#mainBox02 #bestItems { float: left; width: 785px; }
#mainBox02 #newItems { float: right; width: 525px; }
#mainBox02 section .item-list-2021 { height: 740px; /*background-color: #fff;*/ border-radius: 3px; }
#mainBox02 section .list-row { overflow: hidden; }
#mainBox02 section .list-row:after { content:""; display:block; clear:both; }
#mainBox02 section .item-list { font-size: 18px; background: #fff; height: calc(100% / 2); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
#mainBox02 .item-list-2021 .item-list { border-top: none; border-bottom: none;    border: #f6f6f6 2px solid; border-radius: 13px; }
#mainBox02 section#bestItems .item-list { width: 33.333%; }
#mainBox02 section#newItems .item-list { width: 50%; }
#mainBox02 .item-list-2021 .item-list > a { margin: 10px; }
#mainBox02 .item-list-2021 .item-list .item-img { height: auto; max-height: 225px; }
#mainBox02 .item-list-2021 .item-list .item-preview { top: 180px; }


/*뉴스 리뷰*/
#mainBox03 { background-color: #f6f6f6; padding-bottom: 60px; }
.main-box#mainBox03 section > h2 { padding-left: 15px; }
.main-box#mainBox03 section > h2:before { left: 5px; }
#mainBox03 .layout-wrap { width: 1340px !important; }
#mainBox03 section > h2 { padding-left: 5px; }
#mainBox03 #mainNews { margin-bottom: 50px; }
#mainBox03 #mainNews.slide-style02 .owl-carousel .owl-nav { right: 105px; }
#mainBox03 #mainNews.slide-style02 .owl-carousel .owl-dots { right: 130px; }
#mainBox03 #mainNews .btn-wrap { right: 5px; }
#mainBox03 #mainNews .owl-carousel .owl-stage-outer { padding: 5px 0; }
#mainBox03 #mainNews ul li > a { overflow: hidden; display: block; border-radius: 3px; background-color: #fff; transition: all 0.3s; -webkit-transition: all 0.3s; } 
#mainBox03 #mainNews ul li > a:hover { box-shadow: 0px 0px 5px rgba(0,0,0,0.3); }
#mainBox03 #mainNews ul li .thumb { line-height: 1; height: 230px; overflow: hidden; }
#mainBox03 #mainNews ul li .thumb img { width: 100%; }
#mainBox03 #mainNews ul li .board-info { padding: 15px; }
#mainBox03 #mainNews ul li .board-info .subject { overflow: hidden; margin-bottom: 10px; font-size: 14px; font-weight: bold; }
#mainBox03 #mainNews ul li .board-info .date { text-align: right; color: #aaa; }
#mainBox03 #mainNews ul li .board-info .content { height: 32px; overflow: hidden; margin-bottom: 10px; font-size: 14px; word-break: keep-all; }

#mainBox03 #mainReview.slide-style02 .owl-carousel .owl-nav { right: 105px; }
#mainBox03 #mainReview.slide-style02 .owl-carousel .owl-dots { right: 130px; }
#mainBox03 #mainReview .btn-wrap { right: 5px; }
#mainBox03 #mainReview .owl-carousel .owl-stage-outer { padding: 5px 0; }
#mainBox03 #mainReview ul li > a { overflow: hidden; display: block; border-radius: 3px; background-color: #fff; transition: all 0.3s; -webkit-transition: all 0.3s; }
#mainBox03 #mainReview ul li > a:hover { box-shadow: 0px 0px 5px rgba(0,0,0,0.3); }
#mainBox03 #mainReview ul li > a:after { content: ''; display: block; float: none; clear: both; }
#mainBox03 #mainReview ul li .thumb { float: left; width: 50%; line-height: 1; overflow: hidden; }
#mainBox03 #mainReview ul li .thumb img { width: 100%; }
#mainBox03 #mainReview ul li .board-info { float: left; width: 50%; padding: 20px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
#mainBox03 #mainReview ul li .board-info .subject { height: 52px; overflow: hidden; margin-bottom: 10px; padding-top: 20px; border-top: 1px solid #ddd; font-size: 14px; }
#mainBox03 #mainReview ul li .board-info .date { text-align: right; color: #aaa; }
#mainBox03 #mainReview ul li .board-info .content { height: 87px; overflow: hidden; margin-bottom: 13px; font-size: 14px; word-break: keep-all; }


/*샐러브리티 & 협력사 & 서포터즈*/
#mainBox04 { padding: 60px 0; }
#mainBox04 .celeb-spon-wrap { float: left; width: 545px; }
#mainBox04 #mainCeleb { margin-bottom: 53px; }
#mainBox04 #mainCeleb ul li > a { overflow: hidden; position: relative; display: block; border-radius: 3px; background-color: #000; width: 100px; height: 100px; }
#mainBox04 #mainCeleb ul li > a > img { width: 100%; opacity: 0.5; transition: all 0.3s; -webkit-transition: all 0.3s; }
#mainBox04 #mainCeleb ul li > a:hover > img { opacity: 1; }
#mainBox04 #mainCeleb ul li > a > span { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; text-align: center; color: #fff; font-size: 16px; word-break: keep-all; justify-content: center; align-items: center; transition: all 0.3s; -webkit-transition: all 0.3s; }
#mainBox04 #mainCeleb ul li > a:hover > span { opacity: 0; }

#mainBox04 #mainSpon ul li > a { overflow: hidden; position: relative; display: block; border-radius: 3px; background-color: #fff; width: 100px; height: 100px; border: 1px solid #e9e9e9; }
#mainBox04 #mainSpon ul li > a:hover { border-color: #515151; transition: all 0.3s; -webkit-transition: all 0.3s; }
#mainBox04 #mainSpon ul li > a > img { width: 100%; transition: all 0.3s; -webkit-transition: all 0.3s; }
#mainBox04 #mainSpon ul li > a:hover > img { opacity: 0.1; }
#mainBox04 #mainSpon ul li > a > span { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 100%; text-align: center; color: #515151; font-size: 16px; word-break: keep-all; justify-content: center; align-items: center; opacity: 0; transition: all 0.3s; -webkit-transition: all 0.3s; }
#mainBox04 #mainSpon ul li > a:hover > span { opacity: 1; }

#mainBox04 .partner-wrap { float: left; margin-left: 26px; }
#mainBox04 .partner-wrap a { overflow: hidden; display: block; border-radius: 3px; }
#mainBox04 .partner-wrap a:first-of-type { margin-bottom: 20px; }

#mainBox04 .support-wrap { float: right; }
#mainBox04 .support-wrap a { overflow: hidden; position: relative; display: block; border-radius: 3px; width: 430px; height: 290px; }
#mainBox04 .support-wrap a:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(https://image.plthink.com/homepage/Image_2021/main/support/support_bn_txt.png) no-repeat center center; }
#mainBox04 .support-wrap a img { transition: all 0.5s; -webkit-transition: all 0.5s; }
#mainBox04 .support-wrap a:hover img { transform: scale(1.1); -webkit-transform: scale(1.1);}

.main-pop-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); display: flex; justify-content: center; align-items: center; z-index: 5; display: none; }
.main-pop-wrap.active { display: flex; }
.main-pop-wrap .main-pop-con { overflow-y: auto; width: 1330px; max-height: 580px; padding: 20px; background-color: #fff; border-radius: 3px;  }
.main-pop-wrap .main-pop-con > h2 { font-size: 18px; margin-bottom: 15px; }
.main-pop-wrap .main-pop-con > ul > li { float: left; width: 10%; padding: 5px; }
.main-pop-wrap .main-pop-con > ul > li > a { display: block; text-align: center; }
.main-pop-wrap .main-pop-con > ul > li > a > img { overflow: hidden; display: inline-block; width: 100px; margin-bottom: 5px; border-radius: 3px; transition: all 0.5s; -webkit-transition: all 0.5s; }
.main-pop-wrap .main-pop-con > ul > li > a:hover > img { transform: rotateY(360deg); }
.main-pop-wrap .main-pop-con > ul > li > a > span { display: block; text-align: center; word-break: keep-all; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.main-pop-wrap .main-pop-clo { overflow: hidden; position: fixed; display: block; top: 50%; left: 50%; margin-left: 665px; width: 35px; height: 35px; margin-top: -12.5px; background-color: #fff; text-indent: -9999px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.main-pop-wrap .main-pop-clo:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 1px; height: 20px; transform: rotate(45deg); background-color: #515151; margin-top: -10px; }
.main-pop-wrap .main-pop-clo:after { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 1px; height: 20px; transform: rotate(-45deg); background-color: #515151; margin-top: -10px; }


/*브랜드*/
#mainBox05  { padding: 50px 0; }
#mainBox05 .brand-carousel { padding-left: 219px; }
#mainBox05 .brand-wrap > div { float: left; }
#mainBox05 .brand-wrap .brand-bn-box { width: 401px; height: 500px; border-top: 1px solid #515151; border-left: 1px solid #515151; border-bottom: 1px solid #e9e9e9; }
#mainBox05 .brand-wrap .brand-bn-box .brand-bn-carousel.owl-loading { opacity: 1; }
#mainBox05 .brand-wrap .brand-item-box { width: 710px; height: 500px; border-top: 1px solid #515151;br }
#mainBox05 .brand-wrap .brand-item-box ul li { float: left; width: 33.333%; border-right: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; }
#mainBox05 .brand-wrap .brand-item-box ul li a { position: relative; display: block; background-color: #fff; transition: background-color 0.5s; -webkit-transition: background-color 0.5s; }
#mainBox05 .brand-wrap .brand-item-box ul li a:hover { background-color: #f6f6f6; }
#mainBox05 .brand-wrap .brand-item-box ul li img { width: auto; }
#mainBox05 .brand-wrap .brand-item-box ul li a p { position: absolute; top: 20px; left: 0; width: 100%; text-align: center; }
#mainBox05 .brand-wrap .brand-item-box ul li a small { display: block; font-size: 14px; margin-bottom: 5px; }
#mainBox05 .brand-wrap .brand-item-box ul li a strong { display: block; font-size: 18px; font-weight: normal; }
#mainBox05 .brand-carousel > .owl-dots { position: absolute; top: 0; left: 0; width: 220px; z-index: 1; padding-right: 1px; padding-top: 1px; }
#mainBox05 .brand-carousel > .owl-dots .owl-dot { margin-top: -1px; border: 1px solid #e9e9e9; border-right: 1px solid transparent; transition: all 0.3s; -webkit-transition: all 0.3s; }
#mainBox05 .brand-carousel > .owl-dots .owl-dot.active { position: relative; width: 220px; border: 1px solid #515151; border-right: 1px solid #fff; }
#mainBox05 .brand-carousel > .owl-dots .owl-dot > button { overflow: hidden; display: block; width: 100%; height: 124px; background-repeat: no-repeat; background-position: center center; opacity: 0.4; filter: saturate(0); text-indent: -9999px; background-color: #fff; outline: 0; transition: all 0.3s; -webkit-transition: all 0.3s; }
#mainBox05 .brand-carousel > .owl-dots .owl-dot:last-child > button { height: 123px; }
#mainBox05 .brand-carousel > .owl-dots .owl-dot > button:hover { filter: saturate(1); opacity: 1; }
#mainBox05 .brand-carousel > .owl-dots .owl-dot.active > button { opacity: 1; filter: saturate(1); }
#mainBox05 .brand-carousel > .owl-dots .owl-dot > button.dot1 { background-image: url(https://image.plthink.com/homepage/Image_2021/main/brand/main_brand_dot1.png); }
#mainBox05 .brand-carousel > .owl-dots .owl-dot > button.dot2 { background-image: url(https://image.plthink.com/homepage/Image_2021/main/brand/main_brand_dot2.png); }
#mainBox05 .brand-carousel > .owl-dots .owl-dot > button.dot3 { background-image: url(https://image.plthink.com/homepage/Image_2021/main/brand/main_brand_dot3.png); }
#mainBox05 .brand-carousel > .owl-dots .owl-dot > button.dot4 { background-image: url(https://image.plthink.com/homepage/Image_2021/main/brand/main_brand_dot4.png); }


/* BASIC css end */