@charset "utf-8";
/* CSS Document */

/* 기준정보
 - #fffef1/rgba(255,254,241,1.0)
 - #1b1b1b/rgba(27,27,27,1.0)
*/

/* loader-sub page */
.loaderWrap {position:fixed; top:0; left:0; width:100%; height:100%; font-size:13px; text-align:center; background:#dee2e6; z-index:9999;}
.loaderWrap:before {content:'화면을 불러오고 있습니다'; position:absolute; top:50%; left:50%; width:100%; margin:0; color:#1b1b1b; font-weight:400; transform:translate(-50%, -50%);}
.loaderWrap:after {content:'잠시만 기다려 주세요'; position:absolute; top:50%; left:50%; width:100%; margin:20px 0 0 0; color:#1b1b1b; font-weight:400; transform:translate(-50%, -50%);}
.loaderWrap .loader, .loaderWrap .loader:before, .loaderWrap .loader:after {border-radius:50%; width:1.5em; height:1.5em; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation:load7 1.8s infinite ease-in-out; animation:load7 1.8s infinite ease-in-out;}
.loaderWrap .loader {position:absolute; top:50%; left:50%; margin:-80px 0 0 -10px; color:#1b1b1b; font-size:10px; text-indent:-9999em; transform:translateZ(0); animation-delay:-0.16s;}
.loaderWrap .loader:before, .loaderWrap .loader:after {content:''; position:absolute; top:0;}
.loaderWrap .loader:before {left:-3em; -webkit-animation-delay:-0.32s; animation-delay:-0.32s;}
.loaderWrap .loader:after {left:3em;}

@-webkit-keyframes load7 {
0%,80%,100% {box-shadow:0 2.5em 0 -1.3em;}
40% {box-shadow:0 2.5em 0 0;}
}
@keyframes load7 {
0%,80%,100% {box-shadow:0 2.5em 0 -1.3em;}
40% {box-shadow:0 2.5em 0 0;}
}

#wraper {position:relative; width:100%; height:100%; font-size:16px;}

/* section */
.stn {display:block; width:100%; text-align:center;}
.stn .inner {display:inline-block; overflow:hidden; position:relative; width:780px; height:100%; margin:0 auto;}

#reviewLibrary {display:block; padding:60px 0; }
#reviewLibrary .inner {width:1180px; text-align:center;}
#reviewLibrary .inner .tit {clear:both; overflow:hidden; width:100%; padding:30px 10px 20px 10px; text-align:center;}
#reviewLibrary .inner .tit h3 {display:inline-block; font-size:30px; font-weight:400;}
#reviewLibrary .inner .tit .btn_go_back {display:none;}
#reviewLibrary .inner #gridBox {position:relative; width:1180px; margin:0 auto; padding-bottom:80px;}
#reviewLibrary .inner #gridBox .grid {display:inline-block; width:calc(33.3333% - 20px); margin:10px; justify-content:center; align-items:center; border:1px solid rgba(27,27,27,0.1); background:#fffef1;}
#reviewLibrary .inner #gridBox .grid .txt {display:block; overflow:hidden; padding:15px; font-size:13px; font-weight:400; text-align:left; line-height:20px; letter-spacing:-0.75px; white-space:pre-line;}
#reviewLibrary .inner #gridBox .grid .txt a {display:inline-block; margin:0 5px 0 0; font-weight:700; letter-spacing:0;}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:15px;}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 5px;}
.mySwiper .swiper-pagination-bullet {width:4px; height:4px; border:1px solid rgba(255,254,241,0); background:rgba(255,254,241,1.0); opacity:1.0; transition:all 0.3s ease-out;}
.mySwiper .swiper-pagination-bullet-active {border:1px solid rgba(255,254,241,1.0); background:rgba(255,254,241,0); opacity:1.0; transition:all 0.3s ease-out;}

.mySwiper {position:relative; overflow:hidden;}
.swiper-backface-hidden .swiper-slide img {width:100%;}
.swiper-backface-hidden .swiper-slide video {width:100%;}

/* 제품  */
.ties_prod {display:block; position:fixed; bottom:0; left:0; width:100%; text-align:center; background:rgba(27,27,27,0.9); z-index:1000;}
.ties_prod .inner {display:inline-block; clear:both; overflow:hidden; position:relative; width:500px; margin:0 auto; padding:7px 0 3px 0;}
.ties_prod .inner .leftBox {float:left; width:55%;}
.ties_prod .inner .leftBox .thumb {float:left; width:60px; margin:0 5px 0 0;}
.ties_prod .inner .leftBox .thumb img {width:100%;}
.ties_prod .inner .leftBox .prodBox {float:left; width:calc(100% - 70px); color:#fffef1; text-align:left; line-height:14px;}
.ties_prod .inner .leftBox .prodBox .prod_name {display:inline-block; float:left; width:auto; margin:6px 20px 0 0; font-size:16px; font-weight:500; line-height:22px;}
.ties_prod .inner .leftBox .prodBox .prod_name span {display:block;font-size:14px; font-weight:300;}
.ties_prod .inner .leftBox .prodBox .prod_star {display:inline-block; margin:33px 10px 0 0; font-size:13px; opacity:0.7;}
.ties_prod .inner .leftBox .prodBox .prod_star:before {content:''; display:inline-block; width:12px; height:12px; margin:-1px 5px 0 0; vertical-align:middle; background:transparent url("https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_star_w.svg") no-repeat 50% 50%/100% auto;}
.ties_prod .inner .leftBox .prodBox .prod_review {display:inline-block; font-size:13px; opacity:0.7;}
.ties_prod .inner .leftBox .prodBox .prod_review:before {content:''; display:inline-block; width:12px; height:12px; margin:-1px 5px 0 0; vertical-align:middle; background:transparent url("https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_review_w.svg") no-repeat 50% 50%/100% auto;}

.ties_prod .inner .rightBox {float:left; width:45%; padding:10px 0 0 0;}
.ties_prod .inner .rightBox a {float:left; margin:2px; height:40px; font-size:12px; font-weight:400; line-height:40px; letter-spacing:-0.5px; border:1px solid #bababa;}
.ties_prod .inner .rightBox a:first-child:nth-last-child(1) {width:calc(100% - 4px);}
.ties_prod .inner .rightBox a:first-child:nth-last-child(2), .ties_prod .inner .rightBox a:first-child:nth-last-child(2) ~ a {width:calc(50% - 4px);}
.ties_prod .inner .rightBox a:hover, .ties_prod .inner .rightBox a:focus {border:1px solid #1b1b1b; background:#1b1b1b;}
.ties_prod .inner .rightBox a.ico {overflow:hidden; text-indent:-999px;}
.ties_prod .inner .rightBox a.ico.shopee {background:rgba(255,254,240,0) url("https://toun28.s3.ap-northeast-2.amazonaws.com/img/new/logo_shopee_w.svg") no-repeat 50% 50%/auto 45%;}
.ties_prod .inner .rightBox a.ico.amazon {background:rgba(255,254,240,0) url("https://toun28.s3.ap-northeast-2.amazonaws.com/img/new/logo_amazon_w.svg") no-repeat 50% 60%/auto 40%;}
.ties_prod .inner .rightBox a:hover.ico.shopee {background:rgba(255,254,240,1.0) url("https://toun28.s3.ap-northeast-2.amazonaws.com/img/new/logo_shopee_clr.svg") no-repeat 50% 50%/auto 45%;}
.ties_prod .inner .rightBox a:hover.ico.amazon {background:rgba(255,254,240,1.0) url("https://toun28.s3.ap-northeast-2.amazonaws.com/img/new/logo_amazon_clr.svg") no-repeat 50% 60%/auto 40%;}


#list-bottom-menu {display:none;}
.footer {display:none;}

/* -------------------- mobile -------------------- */
@media screen and (max-width:780px) {
.header {display:none;}
.stn .inner {width:100%; height:100%;}	

#reviewLibrary {padding:0 0 60px 0;}
#reviewLibrary .inner {width:100%;}
#reviewLibrary .inner .tit {position:fixed; padding:30px 20px 25px 20px; text-align:left; background:rgba(255,254,241,0.8); z-index:1000;}
#reviewLibrary .inner .tit h3 {float:left; font-size:1.25rem;}
#reviewLibrary .inner .tit .btn_go_back {display:block; overflow:hidden; float:right; width:24px; height:24px; margin:3px 0 0 0; text-indent:-99px; background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/img/new/ico_close_bk.svg") 50% 50% no-repeat; background-size:80%;  opacity:0.7;}
#reviewLibrary .inner #gridBox {width:100%; padding:83px 0 0 0;}
#reviewLibrary .inner #gridBox .grid {display:block; width:100%; margin:0 0 20px 0; border:none; background:none;}
#reviewLibrary .inner #gridBox .grid .txt {padding:20px; line-height:1.6;}
	
.ties_prod {display:block; height:74px;}
.ties_prod .inner {width:100%; padding:10px 5px 10px 0;}
.ties_prod .inner .leftBox {width:55%;}
.ties_prod .inner .leftBox .thumb {width:60px; margin:0;}
.ties_prod .inner .leftBox .prodBox {letter-spacing:-0.5px;}
.ties_prod .inner .leftBox .prodBox .prod_name {display:block; float:none; width:100%; margin:7px 0 0 0; font-size:0.85rem; line-height:18px;}
.ties_prod .inner .leftBox .prodBox .prod_name span {font-size:12px;}
.ties_prod .inner .leftBox .prodBox .prod_star {margin:0 10px 0 0; font-size:0.7rem;}
.ties_prod .inner .leftBox .prodBox .prod_star:before {width:10px; height:10px; margin:-1px 5px 0 0; vertical-align:middle;}
.ties_prod .inner .leftBox .prodBox .prod_review {margin:0 10px 0 0; font-size:0.7rem;}
.ties_prod .inner .leftBox .prodBox .prod_review:before {width:10px; height:10px; margin:-1px 5px 0 0; vertical-align:middle;}
.ties_prod .inner .rightBox {width:45%; padding:5px 3px 0 0;}

}