/* BASIC css start */
#content {width:1400px;}
iframe {outline: none; border: 0; -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;}

/* 섹션 공통 */
section{width: 100%;margin-bottom:120px}
section .sec_inner{width: 1400px; margin:0 auto}
section h2{font-family: 'Noto Sans KR', sans-serif; font-size: 32px ; font-weight: bold; letter-spacing: -.5px; color: #000; margin-bottom:35px}
section h4{font-size: 16px; line-height: 28px; color: #595959; margin-bottom:35px;}

/* sec1 */
#sec1{}
#sec1 .swiper{width: 100%;}
#sec1 .swiper ul{width: 100%;}
#sec1 .swiper ul li{width: 100%;}
#sec1 .swiper ul li a{display: block; width: 100%;}
#sec1 .swiper ul li a img{width: 100.1%;}
#sec1 .swiper-pagination{width: auto; bottom: 25px; left: 50%; transform:translateX(-50%);}
#sec1 .swiper-pagination-bullet{background-color:#fff !important; margin:0 3.5px; opacity: .6; transition: width .5s; width:6px; height:6px;}
#sec1 .swiper-pagination-bullet-active{width:24px; border-radius: 10px !important;  opacity: 1 !important;}

/* sec2 */
#sec2 .sec_inner{overflow:inherit; position:relative;}
#sec2 .swiper-button-prev{background:url(/design/whatson/img/pc/arrow_l.png)no-repeat center; width: 64px; height: 65px; background-size: cover; top: 39%; left: -30px;}
#sec2 .swiper-button-next{background:url(/design/whatson/img/pc/arrow_r.png)no-repeat center; width: 64px; height: 65px; background-size: cover; top: 39%; right: -30px;}
#sec2 .item_list .info{text-align:center; padding:20px 0 0;}
#sec2 .item_list .info .prdname{line-height:26px; font-size:18px; font-weight:700;}
#sec2 .item_list .info .prdsubtxt{color:#595959; font-size:14px; line-height:22px; /*padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #e4e4e4;*/}
#sec2 .item_list .info .prdwish{font-size:13px; font-weight:bold; line-height: 1; margin: 0;}
#sec2 .item_list .info .prdwish img{vertical-align: bottom;}
#sec2 .item_list .tumb a {text-align:center;}
#sec2 .item_list .tumb a img {width:80%; border-radius:50%;}

/* works_wrap */
#works_wrap{overflow:hidden;}
#works_wrap div ul{display: flex; gap: 45px; flex-wrap:wrap; }
#works_wrap div ul li{background:#FFEFEC; width:436px; height:300px; padding:48px 40px 40px; position:relative;}
#works_wrap div ul li .num{width: 120px; height: 28px; color: #fff; background: var(--main-color); border-radius: 28px; line-height: 28px; text-align: center; font-size: 14px; font-weight: 700;}
#works_wrap div ul li .tit{font-weight: 700; font-size: 26px; line-height: 38px; color: #000000; padding:24px 0 16px;}
#works_wrap div ul li .subtit{font-size: 14px; line-height: 22px; color: #595959;}
#works_wrap div ul li img{position:absolute; right:40px; bottom:40px;}

/* sec3 */
#sec3{}
#sec3 .sec_inner{}
#sec3 .sec_inner h2{margin-bottom:10px;}
/*
#sec3 .sec_inner .level{display:flex; border-top:1px solid #bbb; box-sizing:border-box; text-align:center; line-height:67px;}
#sec3 .sec_inner .level p{flex:1; position:relative; font-size: 18px; font-weight: 700; cursor: pointer;}
#sec3 .sec_inner .level p:nth-of-type(2):before{content:''; display:inline-block; width:1px; height:16px; background: #ddd; position: absolute; left: 0; top:25px;}
#sec3 .sec_inner .level p:nth-of-type(2):after{content:''; display:inline-block; width:1px; height:16px; background: #ddd; position: absolute; right: 0; top:25px;}
#sec3 .swiper{}
#sec3 .video{position: relative; padding-top: 56%; width: 100%; height: 0; border-radius:6px; overflow:hidden/ pointer-events: none;}
#sec3 .video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 625px;}
#sec3 .swiper-pagination{width: auto; bottom: 25px; left: 50%; transform:translateX(-50%);}
#sec3 .swiper-pagination-bullet{background-color:#fff !important; margin:0 3.5px; opacity: .6; transition: width .5s; width:6px; height:6px;}
#sec3 .swiper-pagination-bullet-active{width:24px; border-radius: 10px !important;  opacity: 1 !important;}
*/
#sec3 .swiper-pagination{position:static; display:flex; border-top:1px solid #bbb; box-sizing:border-box; text-align:center; line-height:67px;}
#sec3 .swiper-pagination-bullet{background:none; width:100%; height:inherit; line-height:67px; font-size: 18px; font-weight: 700;}
#sec3 .swiper-pagination-bullet .swiper-pagination-bullet-active{}
#sec3 .level-cont{position:relative; height:627px}
#sec3 .tab-content{position:absolute; top:0; width:100%; opacity: 0; visibility:hidden; transition: opacity 0.3s ease;}
#sec3 .tab-content.active{opacity:1; visibility:visible;}

/* home */
#home_wrap{}
#home_wrap h2{margin-bottom:10px;}
#home_wrap ul{display: flex; flex-wrap: wrap; gap: 45px;}
#home_wrap ul li{width:436px;}
#home_wrap ul li img{}
#home_wrap ul li p{font-weight: 700; font-size: 20px; line-height: 29px; color: #000000; padding:16px 0 6px;}
#home_wrap ul li span{font-size: 14px; line-height: 22px; color: #595959; display:block;}

/* sec4 */
#sec4{background:#FAFAFA;}
#sec4 .sec_inner{padding:80px 0 112px;}
#sec4 .sec_inner h2{margin-bottom:10px;}
#sec4 .sec_inner h4{font-size:16px; color:#595959; line-height:28px; margin-bottom:35px; display:block;}
#sec4 .video_cont{display:flex; gap:30px;}
#sec4 .video_cont .left{flex:1;}
#sec4 .video_cont .right{flex:1;}
#sec4 .video_cont .video{position: relative; padding-top: 56%; width: 100%; height: 0; border-radius:6px; overflow:hidden;}
#sec4 .video_cont .video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* sec5 */
#sec5{}
#sec5 .sec_inner{}
#sec5 .sec5_banner{width: 100%;}
#sec5 .sec5_banner a{display: block;width: 100%;}
#sec5 .sec5_banner a img{width: 100%;}

/* subscribe_wrap */
#subscribe_wrap h2{margin-bottom:10px;}
#subscribe_wrap .video{position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden;}
#subscribe_wrap .video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#subscribe_wrap .standard{display: flex; gap: 15px; margin-top:64px;}
#subscribe_wrap .standard li{flex:1; padding:40px 25px; box-sizing:border-box; background: #FFFFFF; box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.12); border-radius: 6px; transition:all .3s ease;}
#subscribe_wrap .standard li:hover{transform: translateY(-10px);}
#subscribe_wrap .standard li .top{border-bottom:1px solid #ddd; margin-bottom:35px;}
#subscribe_wrap .standard li .top .member{display:inline-block; padding:0 16px; height: 28px; background: var(--main-color); border-radius: 40px; line-height: 28px; text-align: center; font-size: 14px; font-weight: 700; color: #fff; margin-bottom:24px;}
#subscribe_wrap .standard li .top .tit{font-weight: 700; font-size: 14px; line-height: 20px; color: #000000; margin-bottom:4px;}
#subscribe_wrap .standard li .top .price{}
#subscribe_wrap .standard li .top .price span{font-weight: 700; font-size: 24px; line-height: 35px; color: #000000; padding-right:3px;}
#subscribe_wrap .standard li .top .price span em{font-size:20px;}
#subscribe_wrap .standard li .top .price strike{font-size: 18px; line-height: 25px; color: #999999; display:block;}
#subscribe_wrap .standard li .top .subtit{font-size: 13px; line-height: 24px; color: #595959; padding-top:48px;}
#subscribe_wrap .standard li:first-child .top .subtit{padding-top:28px;}
#subscribe_wrap .standard li:first-child .top a{margin-bottom:20px}
#subscribe_wrap .standard li .top a{font-size: 14px; font-weight: 700; line-height: 48px; color: #000; border: 2px solid #000; display: block; border-radius: 48px; text-align: center; margin:24px 0 35px; transition: all .3s ease;}
#subscribe_wrap .standard li .top a:hover{color: #fff; background: #000;}
#subscribe_wrap .standard li .top .buy_btn{margin: 0 0 35px;}
#subscribe_wrap .standard li .bottom{}
#subscribe_wrap .standard li .bottom dl{}
#subscribe_wrap .standard li .bottom dl dt{font-weight: 700; font-size: 16px; line-height: 23px; margin-bottom:8px;}
#subscribe_wrap .standard li .bottom dl dd{font-weight: 500; font-size: 14px; line-height: 24px; color:#595959;}
#subscribe_wrap .standard li .bottom dl dd b{color:#000;}

/* sec6*/
#sec6{}
#sec6 .sec_inner{}
#sec6 .sec_inner .sec_tit{display:flex; justify-content: space-between; margin-bottom:35px;}
#sec6 .sec_inner .sec_tit h2{margin-bottom:0;}
#sec6 .sec_inner .sec_tit a{width: 171px; height: 40px; background: var(--main-color); color:#fff; border-radius: 40px; line-height: 40px; text-align: center; font-size: 13px; font-weight: 700; display: block;}
#sec6 .sec_inner .sec6_cont{}
#sec6 .sec_inner .sec6_cont ul{display: flex; flex-wrap: wrap; gap: 25px;}
#sec6 .sec_inner .sec6_cont ul li{max-width:331px;}
#sec6 .sec_inner .sec6_cont ul li img{width:100%;}

/* sec7 */
#sec7{}
#sec7 .sec_inner{}

/* sec8 */
#sec8{}
#sec8 .sec_inner{}
#sec8 .sec_inner ul{width: 100%;}
#sec8 .sec_inner ul li{width: 685px; float: left;}
#sec8 .sec_inner ul li:first-child{margin-right:30px;}
#sec8 .sec_inner ul li a{display: block;width: 100%;}
#sec8 .sec_inner ul li a img{width: 100%;}
#sec8 .sec_inner a img{width:100%;}
/* BASIC css end */