/* 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}

/* 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%;}
#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 .3s; 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 .prdsubtxt01{color:#4f4f4f; 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{border-radius:50%; width:80%;}

/* works_wrap */
#works_wrap{overflow:hidden; padding-bottom:30px; margin-bottom:90px;}
#works_wrap div ul{display: flex; gap: 45px;}
#works_wrap div ul li{background:#FFEFEC; width:436px; height:548px; padding:56px 40px 0; position:relative;}
#works_wrap div ul li:nth-of-type(2){background:#eaeaea;}
#works_wrap div ul li .num{width: 49px; height: 28px; color: #fff; background: #000; 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;}
#works_wrap div ul li:nth-of-type(1) img{right:20px; bottom:0px;}
#works_wrap div ul li:nth-of-type(2) img{left:108px; bottom:-30px;}
#works_wrap div ul li:nth-of-type(3) img{left:108px; bottom:-30px;}

/* sec3 */

#sec3 .sec_inner h2{margin-bottom:10px;}

#sec3{}
#sec3 .sec_inner{font-size:0; width: 1500px; padding: 0 50px; overflow: hidden;}
#sec3 .swiper {clear:both;}
#sec3 .swiper-button-prev{background:url(/design/whatson/img/pc/arrow_l.png)no-repeat center; width: 64px; height: 65px; background-size: cover; top: 63%; left: -30px;}
#sec3 .swiper-button-next{background:url(/design/whatson/img/pc/arrow_r.png)no-repeat center; width: 64px; height: 65px; background-size: cover; top: 63%; right: -30px;}
#sec3 .sec_inner .sec3_L{width:43%; display:inline-block; border-radius: 5px; overflow: hidden;}
#sec3 .sec_inner .sec3_L .video{position: relative; padding-top: 100%; width: 100%; height: 0;}
#sec3 .sec_inner .sec3_L .video iframe{position: absolute; top: 0; left: 50%; width: 177%; height: 100%; transform: translateX(-50%);}
#sec3 .sec_inner .sec3_L .thumb{}
#sec3 .sec_inner .sec3_L .thumb a{}
#sec3 .sec_inner .sec3_L .thumb a img{}
#sec3 .sec_inner .sec3_R{position:relative; display:inline-block; width:54%; margin-left:3%; vertical-align: top;}
#sec3 .sec_inner .sec3_R h2{padding-bottom: 24px; border-bottom: 1px solid #eee; margin-bottom: 24px;}
#sec3 .sec_inner .sec3_R>p{font-family: 'Noto Sans KR', sans-serif; font-size: 17px; color: #595959; letter-spacing: -.5px; font-weight: 400; line-height: 30px; margin-bottom: 30px;}
#sec3 .sec_inner .sec3_R ul{}
#sec3 .sec_inner .sec3_R ul li}
#sec3 .sec_inner .sec3_R ul li .info{padding:0 !important; position: absolute; width: 260px; height: 260px; top: 0; left: 0; background-color: rgba(255,255,255,.8); border: 2px solid #ccc;  opacity: 0; transition: opacity .2s}
#sec3 .sec_inner .sec3_R ul li .info a{display:block; }
#sec3 .sec_inner .sec3_R ul li .info.show1{opacity: 1;}
#sec3 .sec_inner .sec3_R .tumb img {width:100%; border-radius: 6px; overflow: hidden;}
#sec3 .prdname {text-align:left; line-height:22px; padding:16px 0 14px; border-bottom:1px solid #e7e7e7; margin-bottom:14px; font-size:15px; font-weight:500; color:#000;}
#sec3 .prdsubname {font-size:14px; color:#999; }
.more_prd {width: 112px; height: 40px; background: var(--main-color); border-radius: 40px; line-height: 40px; text-align: center; font-size: 13px; font-weight: 700; display: block; float:right; margin-bottom:16px; color:#fff;}

/* 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%;}

/* 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 a img{width:100%;}
#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%;}

/* 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;}


/* BASIC css end */