/* BASIC css start */ #footer{margin-top:0 !important} .section :is(*){box-sizing:border-box} /* 메인 섹션 공통 */ .section:not(#sec1,#sec11){margin-bottom: 100px;} .sec_inner{padding:0 5%} .sec_inner.padding0{padding:0} .sec_inner.padding0 .item_list .info{padding:13px 5%} .sec_inner.padding0 .sec_cate{padding:0 5%} .section .sec_cate{margin-bottom: 25px; display: flex; justify-content: space-between; flex-wrap:wrap; flex-direction:column; gap:30px;} .section h2{font-family: 'Noto Sans KR', sans-serif; font-size: 26px; color: #000; font-weight: 600;} .section h2:not(:is(.sec_cate:has(ul)>h2)){margin-bottom:10px;} .section .sec_cate ul{display:flex; justify-content:left ; gap: 20px;} .section .sec_cate ul li{} .section .sec_cate ul li a{font-family: 'Noto Sans KR', sans-serif; display:block; width:100%; color:#aaaaaa; font-size: 14px; font-weight:500; letter-spacing: -.3px;transition: all .3s; position:relative; display:block;} .section .sec_cate ul li.on>a{ color: #000 !important; } .section .sec_prd>div{display: none; position:relative;} .section .sec_prd>div.show{display: block;} .section .prd_more_btn{text-align:center; margin-top:40px;} .section .prd_more_btn>a {display:inline-block;font-family: 'Noto Sans KR', sans-serif;display:inline-block; border:1px solid #000; padding:10px 0px; width:80% } .section .prd_more_btn>a button.btn_moreGray{background-color:#fff !important; color:#000; font-size:15px; font-weight:400; width:100%; } .txt_area p.sub{color: #fff; line-height: 1.6;font-family: 'Noto Sans KR', sans-serif; font-weight: 400;transition: all .4s; } .txt_area p.big{ color: #fff; font-weight: 500;line-height: 1.3; font-family: 'Noto Sans KR', sans-serif; transition: all .5s; } .txt_area a.more{width:auto; font-family: 'Montserrat', sans-serif;display: inline-block; transition: all .4s;border: 1px solid #fff;color: #fff; margin-top: 8px;font-weight: 400;padding: 8px 20px; } /* sec1 */ #sec1{margin-bottom:70px} #sec1 .swiper{} #sec1 .swiper ul{} #sec1 .swiper ul li{} #sec1 .swiper ul li>a{display: block; width: 100%;} #sec1 .swiper ul li>a>img{width: 100%; } #sec1 .swiper ul li .txt_area{overflow: visible; position: absolute; left: 0%; top: 48%;transform:translateY(-50%); padding-left: 38%; max-width: 100%; display:none;} #sec1 .swiper ul li .txt_area p{opacity: 0;} #sec1 .swiper ul li.swiper-slide-active .txt_area p{transform: translateY(25px); opacity: 1;} #sec1 .swiper ul li.swiper-slide-active .txt_area a.more{transform: translateY(35px); opacity: 1;} #sec1 .swiper ul li .txt_area p.sub{ font-size: 15px; font-weight: 400; transition: all .4s; margin-bottom: 10px; transition-delay: .25s;} #sec1 .swiper ul li .txt_area p.big{font-size: 28px;transition: all .5s;transition-delay: .42s;} #sec1 .swiper ul li .txt_area a.more{opacity: 0; transition-delay: .58s; font-size: 17px;} #sec1 .swiper-pagination{bottom: 32px; top: unset; left:8%; width:84%; height:2px; } #sec1 .swiper-pagination-progressbar{background-color:rgb(0 0 0 / 29%);} #sec1 .swiper-pagination-progressbar-fill{background-color: #fff;} #sec2 .swiper{padding-bottom:50px;} #sec2 .swiper-pagination{bottom: 0px; top: unset; left:14%; width:72%; height:1px; } #sec2 .swiper-pagination-progressbar-fill{background-color: #000;} /* sec4 */ #sec4{} #sec4 a{display: block;width: 100%;} #sec4 a img{width: 100%;} /* sec5 */ #sec5{} #sec5 .sec_inner{} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap{} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap>ul{margin-top:15px; opacity:0; transition:all .3s} #sec5 .sec_inner .swiper .sec5_prd>div.swiper-slide-active .sec5_wrap>ul{opacity:1} #sec5 .sec_inner .swiper{} #sec5 .sec_inner .swiper .sec5_prd>div{width: 90%;} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban{} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban{} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul{} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li{position:relative;} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li>a{display: block;width: 100%;} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li>a img{width: 100%;} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li .txt_area{overflow: visible; position: absolute; left: 0%;bottom: 0px; padding-left: 30px; max-width: 90%;} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li .txt_area p{opacity: 0} #sec5 .sec_inner .swiper .sec5_prd>div.swiper-slide-active .sec5_wrap .sec5_ban ul li .txt_area p{transform: translateY(-25px); opacity: 1;} #sec5 .sec_inner .swiper .sec5_prd>div.swiper-slide-active .sec5_wrap .sec5_ban ul li .txt_area a.more{transform: translateY(-35px); opacity: 1;} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li .txt_area p.big{font-size: 30px; font-family: 'Montserrat', sans-serif; transition-delay: .25s;} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li .txt_area p.sub{ font-size: 15px; margin-bottom: 30px; transition-delay: .46s;} #sec5 .sec_inner .swiper .sec5_prd>div .sec5_wrap .sec5_ban ul li .txt_area a.more{ transition-delay: .6s; font-size: 11px; padding:2px 7px;opacity: 0} #sec5 .item_list{border-bottom: 1px solid #e8e8e8; display: flex; padding: 8px 0;} #sec5 .item_list .thumb{width: 20%;} #sec5 .item_list .info{width: 80%; padding-left:15px; padding-top:0} #sec5 .item_list .info .price{font-size:15px; font-weight:500;} /* sec8 */ #sec8{} #sec8 a{display: block;width: 100%;} #sec8 a img{width: 100%;} /* sec9 */ #sec9{} #sec9 .sec_inner{} #sec9 .sec_inner .sec_cate{} #sec9 .sec_inner .sec_cate h2{} #sec9 .sec_inner .sec9_wrap{} #sec9 .sec_inner .sec9_wrap .video_area>ul{} #sec9 .sec_inner .sec9_wrap .video_area>ul>li{width:90%;} #sec9 .sec_inner .sec9_wrap .video_area>ul>li>div.ytb_wrap{ padding-bottom:56.25%; position:relative;} #sec9 .sec_inner .sec9_wrap .video_area>ul>li iframe{ position:absolute;top:0;left:0} #sec9 .sec_inner .sec9_wrap .video_area>ul>li.swiper-slide-active .video_info{opacity:1} #sec9 .sec_inner .sec9_wrap .video_area>ul>li .video_info{padding: 15px 0; display: flex; flex-direction: column; gap: 11px; width:90%; opacity:0; transition:all .3s} #sec9 .sec_inner .sec9_wrap .video_area>ul>li .video_info h3{font-family: 'Noto Sans KR', sans-serif; font-size: 18px; line-height: 1.3;font-weight: 500;} #sec9 .sec_inner .sec9_wrap .video_area>ul>li .video_info p{font-family: 'Noto Sans KR', sans-serif;color: #aaaaaa; font-size: 14px;line-height: 1.3; font-weight: 400;} #sec10{} #sec10 .sec_inner{} #sec10 .sec_inner ul{display: flex; flex-wrap: wrap; gap: 20px;} #sec10 .sec_inner ul li{position: relative;flex-grow: 1;} #sec10 .sec_inner ul li>a{display: block;width: 100%;} #sec10 .sec_inner ul li>a>img{width: 100%;} #sec10 .sec_inner ul li .txt_area{position: absolute; top: 56%;transform: translateY(-50%); left: 50%; max-width: 47%; } #sec10 .sec_inner ul li .txt_area p{opacity: 0;} #sec10 .sec_inner ul li .txt_area p.big{font-size: 22px; font-weight: 600; margin-bottom: 11px;transition-delay: .1s;} #sec10 .sec_inner ul li .txt_area p.sub{font-size: 13px; margin-bottom: 20px;transition-delay: .37s;} #sec10 .sec_inner ul li .txt_area a.more{font-size: 12px;opacity: 0; transition-delay: .58s;border:none;padding:0;} #sec10.act .sec_inner ul li .txt_area p{transform: translateY(-15px); opacity: 1;} #sec10.act .sec_inner ul li .txt_area a.more{transform: translateY(-25px); opacity: 1;} #sec10 .sec_inner ul li .txt_area.btxt p.big, #sec10 .sec_inner ul li .txt_area.btxt p.sub, #sec10 .sec_inner ul li .txt_area.btxt a.more{color:#fff;} /* sec11 */ #sec11{} #sec11 .sec11_wrap{position: relative;} #sec11 .sec11_wrap>a{display: block;width: 100%;} #sec11 .sec11_wrap>a img{width: 100%;} #sec11 .sec11_wrap .txt_area{position: absolute; top: 50%; transform: translateY(-50%); right:0; max-width:85%;padding-right:5%} #sec11 .sec11_wrap .txt_area p{color: #fff;font-family: 'Kumbh Sans', sans-serif; font-size: 33px; font-weight: 600; line-height: 1.2;} #sec11 .sec11_wrap .txt_area a{color: #fff;font-family: 'Montserrat', sans-serif;margin-top: 10px; transition: all .4s;display: inline-block; transition-delay: .7s; border: 1px solid #fff ;padding: 8px 20px; color: #fff; font-size: 13px; font-weight: 400; } /* BASIC css end */