/* BASIC css start */ /*¸ÞÀÎ °øÅë*/ .section,.section :is(*){box-sizing: border-box;font-family: "Pretendard Variable", Pretendard, sans-serif;} .section:not(#sec1){margin-bottom: 40px;} .section .sec_inner{padding:0 5%} .section h2{font-size:25px; font-family: "Pretendard Variable", Pretendard, sans-serif; color: #111111; font-weight: 600; margin-bottom: 25px;} .section .txt_area p.sub {color: #000; line-height: 1.6; font-weight: 500;transition: all .4s;font-size: 14px; text-align:right; } .section .txt_area p.big {color: #000; font-weight: 800; line-height: 1.3; transition: all .4s; font-size: 28px; text-align:right;} .section .txt_area p.sub_W {color: #FFF; line-height: 1.6; font-weight: 500;transition: all .4s;font-size: 14px; text-align:right;} .section .txt_area p.big_W {color: #FFF; font-weight: 800; line-height: 1.3; transition: all .4s; font-size: 28px; text-align:right;} .section .txt_area a.more{ width:auto; display: inline-block; font-size: 13px; transition: transform .4s, opacity .4s;border: 1px solid #000;color: #000; margin-top: 8px;font-weight: 600;padding:5px 15px; } @media screen and (min-width:320px){ #sec1 .swiper ul li .txt_area p.big{ font-size : 7vw; } } @media screen and (min-width:1000px){ #sec1 .swiper ul li .txt_area p.big{ font-size : 70px; } } @media screen and (min-width:320px){ #sec1 .swiper ul li .txt_area p.sub{ font-size : 3.5vw; } } @media screen and (min-width:1000px){ #sec1 .swiper ul li .txt_area p.sub{ font-size : 35px; } } .section :is(.sec_next,.sec_prev){position: unset;color: #000;width: 30px; background-color: #ddd; height:30px; border-radius: 50%; margin-top: 0; transition:all .1s} .section :is(.sec_next,.sec_prev)::after{font-size: 11px; font-weight:700} .section :is(.sec_next,.sec_prev):not(.swiper-button-disabled):hover{background-color:var(--main-color);color:#fff} .section .swiper-pagination-bullet-active{background-color:var(--main-color)} .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 #e8e9ed; padding:4px 0px; width:100% } .section .prd_more_btn>a button.btn_moreGray{background-color:#fff !important; color:#000; font-size:13px; font-weight:500; width:100%; display:flex; align-items:center ;justify-content:center; gap:2%;} .section .prd_more_btn>a button span{display:flex; align-items:center; justify-content:center;color:#000; } .section .prd_more_btn>a button span img{display:inline-block; transform:scale(.66); transform-origin:center center} /*sec1*/ #sec1{margin-bottom: 40px;} #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 .btn_wrap{padding: 10px; position: absolute; z-index: 4; bottom: 2%; left:4%; width: max-content; display: flex; align-items: center; gap: 7px;} #sec1 .swiper .btn_wrap>*{} #sec1 .swiper .btn_wrap>ul{background-color: rgba(0,0,0,.4);display: flex; align-items: center; gap: 13px; padding: 5px 10px; border-radius: 25px;} #sec1 .swiper .btn_wrap>ul li{} #sec1 .swiper .btn_wrap>ul li>div.swiper_prev, #sec1 .swiper .btn_wrap>ul li>div.swiper_next{display: flex; align-items: center; justify-content: center;} #sec1 .swiper .btn_wrap>ul li .swiper_prev{cursor: pointer; } #sec1 .swiper .btn_wrap>ul li .swiper_prev img{} #sec1 .swiper .btn_wrap>ul li .swiper-pagination{position: unset;color: #fff;font-size: 13px;display: flex; align-items: center; gap: 1px;} #sec1 .swiper .btn_wrap>ul li .swiper-pagination span{display: inline-block; font-size: 13px;} #sec1 .swiper .btn_wrap>ul li .swiper_next{cursor: pointer; } #sec1 .swiper .btn_wrap>ul li .swiper_next img{} #sec1 .swiper .btn_wrap .control{} #sec1 .swiper .btn_wrap .control a{cursor: pointer; display: flex;transition: all .1s; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;background-color: rgba(0,0,0,.4);} #sec1 .swiper .btn_wrap .control a.clicked{opacity: .5;} #sec1 .swiper .btn_wrap .control a img{} #sec1 .swiper ul li.swiper-slide-active .txt_area p{transform: translateY(0px); opacity: 1;} #sec1 .swiper ul li.swiper-slide-active .txt_area a.more{transform: translateY(0px); opacity: 1;} #sec1 .swiper ul li .txt_area {overflow: visible; position: absolute; bottom: 3%; transform: translateY(-50%); width: 100%; padding-left:10%; right:4%;} #sec1 .swiper ul li .txt_area>*{transform: translateY(-25px);} #sec1 .swiper ul li .txt_area p{opacity: 0; line-height: 1.3;} #sec1 .swiper ul li .txt_area p.big{transition: all .6s;transition-delay: .1s; margin-bottom: 6px; letter-spacing:-1px; -webkit-background-clip: text; text-align: left; display: inline;} #sec1 .swiper ul li .txt_area p.sub{font-weight: 500; transition: all .6s; margin-bottom: 17px; transition-delay: .37s; -webkit-background-clip: text; text-align: left;} #sec1 .swiper ul li .txt_area a.more{opacity: 0; transition-delay: .6s;} /*sec2*/ #sec2{margin-bottom:60px;} #sec2 .sec_inner{} #sec2 .sec_inner{} #sec2 .sec_inner .category {width:100%;} #sec2 .sec_inner .category>ul {display: flex;flex-direction: row;flex-wrap: wrap;align-items: center; width: 100%; justify-content:center;} #sec2 .sec_inner .category>ul>li {width: 18%; margin:0 2% 0 0;} #sec2 .sec_inner .category ul li.last{width: 18%; margin:0;} #sec2 .sec_inner .category>ul>li>a {} #sec2 .sec_inner .category>ul>li>a>img{ width: 100%; background-color:#F3F3F3; border-radius:15px;} #sec2 .sec_inner .category>ul>li>p{margin-top:6px; margin-bottom:30px; text-align: center;color: #000; font-size: 3vw; font-weight: 600;} @media screen and (min-width:1000px){ #sec2 .sec_inner .category>ul>li{ width: 15%; margin:0 5% 0 0; } } @media screen and (min-width:1000px){ #sec2 .sec_inner .category ul li.last{ width: 15%; margin:0; } } @media screen and (min-width:1000px){ #sec2 .sec_inner .category>ul>li{ width: 15%; margin:0 5% 0 0; } } @media screen and (min-width:1000px){ #sec2 .sec_inner .category>ul>li>p{ font-size: 20px; } } /*sec3*/ #sec3 .sec_inner{position:relative;} #sec3 .sec_inner .sec3_cont .swiper{padding-bottom:25px;} /*sec4*/ #sec4{} #sec4 .sec_inner{} #sec4 .sec_inner ul{display: flex; flex-wrap: wrap; gap: 25px;} #sec4 .sec_inner ul li{position: relative;width:100%} #sec4 .sec_inner ul li>a{display: block;width: 100%;} #sec4 .sec_inner ul li>a>img{width: 100%;} #sec4 .sec_inner ul li .txt_area{position: absolute; top: 50%;transform: translateY(-50%); left: 30px; max-width: 80% } #sec4 .sec_inner ul li .txt_area p{} #sec4 .sec_inner ul li .txt_area p.big{font-size: 25px; font-weight: 800; margin-bottom: 6px;transition-delay: .1s; color:#212121} #sec4 .sec_inner ul li .txt_area p.sub{font-size: 14px; transition-delay: .27s; color:#383838; text-align:left;} #sec4 .sec_inner ul li .txt_area p.go{font-size: 10px; transition-delay: .27s; color:#383838; margin-top:20px; font-weight:700;} #sec4.act .sec_inner ul li .txt_area p{transform: translateY(-15px); opacity: 1;} @media screen and (max-width:350px){ #sec4 .sec_inner ul li .txt_area p.big{ font-size : 20px; } } #main-banner .sec_inner ul {display: flex; flex-direction: row; align-items: center; width: 100%; justify-content:center; gap:10px;} #main-banner .sec_inner ul li {position: relative; width: 25%;} #main-banner .sec_inner ul li >a{display: block; width: 100%;} #main-banner .sec_inner ul li .txt_area {position: absolute; top: 20%;left: 50%; transform: translate(-50%, -50%); width: 100%; margin-top:1.5vw;} #main-banner .sec_inner ul li img {width:100%;} #main-banner .sec_inner ul li .txt_area p{} #main-banner .sec_inner ul li .txt_area p.big {font-size: 2.8vw; font-weight: 800; margin-bottom:0.5vw; color:#000; text-align:center; line-height:1.1;} #main-banner .sec_inner ul li .txt_area p.sub {font-size: 2vw; transition-delay: .27s; color:#000; text-align:center;} @media screen and (min-width:1000px){ #main-banner .sec_inner ul li .txt_area p.big{ margin-bottom:10px; font-size : 25px; } } @media screen and (min-width:1000px){ #main-banner .sec_inner ul li .txt_area p.sub{ font-size : 15px; } } @media screen and (min-width:1000px){ #main-banner .sec_inner ul li .txt_area{ margin-top:20px; } } /*sec6*/ #sec6{} #sec6 h2{padding-left:5%} #sec6 .sec_inner{position:relative; padding:0} #sec6 .sec_inner .sec6_cont{padding-left:5%} #sec6 .sec_inner .sec6_cont .swiper{} #sec6 .sec_inner .sec6_cont .swiper ul{} #sec6 .sec_inner .sec6_cont .swiper ul li{width:57%} #sec6 .sec_inner .sec6_cont .swiper ul li a{display: block; width: 100%;overflow:hidden;} #sec6 .sec_inner .sec6_cont .swiper ul li a img{width: 100%; transition:transform .3s} #sec6 .sec_inner .sec6_cont .swiper ul li .txt_area{padding:12px 0} #sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p{transition: all .3s;} #sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p.big{color: #161616; font-size:17px; margin-bottom:6px} #sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p.sub{color: #555555; font-size: 14px;line-height:1.4} /*sec7*/ #sec7{} #sec7 .sec_inner{} #sec7 .sec_inner .sec7_cont{} #sec7 .sec_inner .sec7_cont>div{} #sec7 .sec_inner .sec7_cont .banner_area{position:relative;flex-grow:1;} #sec7 .sec_inner .sec7_cont .banner_area>a{display: block;width: 100%;} #sec7 .sec_inner .sec7_cont .banner_area>a img{width: 100%;} #sec7 .sec_inner .sec7_cont .banner_area .txt_area{position: absolute; top: 50%;transform:translateY(-50%); left:30px; max-width: 80% } #sec7 .sec_inner .sec7_cont .banner_area .txt_area>*{color: #fff;} #sec7 .sec_inner .sec7_cont .banner_area .txt_area p.big{font-size: 21px; font-weight: 600; margin-bottom: 7px;} #sec7 .sec_inner .sec7_cont .banner_area .txt_area p.sub{font-size: 12px;line-height:1.3; transition-delay: .27s;} #sec7 .sec_inner .sec7_cont .item_area{height:auto; overflow-y:auto; margin-top:12px;} #sec7 .sec_inner .sec7_cont .item_area .swiper{height:100%} #sec7 .sec_inner .sec7_cont .item_area ul{} #sec7 .sec_inner .sec7_cont .item_area ul>li{display: flex; flex-wrap: nowrap; align-items: center; width:100%; height:fit-content; padding:6px 0} #sec7 .sec_inner .sec7_cont .item_area ul>li .thumb{width:30%} #sec7 .sec_inner .sec7_cont .item_area ul>li .thumb>a{display:block; width:100%} #sec7 .sec_inner .sec7_cont .item_area ul>li .thumb>a>img{object-fit: cover;} #sec7 .sec_inner .sec7_cont .item_area ul>li .info{width:70%; padding:0 20px 0 20px; max-height:100%; } #sec7 .swiper-vertical>.swiper-scrollbar{height:100%; width:2px; top:0; right:0} /* sec8 */ #sec8{} #sec8 .sec_inner{padding:0} #sec8 .sec_inner h2{padding:0 5%} #sec8 .sec_inner .sec8_cate{margin-bottom: 35px;} #sec8 .sec_inner .sec8_cate ul{} #sec8 .sec_inner .sec8_cate ul li{width:auto;} #sec8 .sec_inner .sec8_cate ul li:first-child{margin-left:5%} #sec8 .sec_inner .sec8_cate ul li a{overflow:hidden; display:block; width:100%;background-color: #f4f4f4; border-radius: 40px; padding: 8px 20px; text-align:center; color:#000;position:relative; font-size: 13px; font-weight: 500; display:block; transition:all .1s} #sec8 .sec_inner .sec8_cate ul li.on>a{ color: #fff;background-color: var(--main-color);} #sec8 .sec8_prd{padding:0 5%} #sec8 .sec8_prd>div{display: none; position:relative;opacity:0; transition:opacity .5s} #sec8 .sec8_prd>div.show{display: block;} #sec8 .sec8_prd>div.act{opacity:1} /*sec9*/ #sec9 {margin-bottom:70px !important;} #sec9 .sec_inner h2{display: flex; align-items: center; gap: 16px;} #sec9 .sec_inner h2 span{display: inline-block;color: #999999; font-size: 13px; font-weight: 500;} .map_info h1{ text-align: center; font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 5vw; font-weight: 800; margin-bottom: 30px; } .map_info h3{ text-align: center; font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 2vw; font-weight: 600; } .map_info h3 img{ display:inline; margin-bottom: 2%; } @media screen and (min-width:1000px){ .map_info h1{ font-size: 30px; } } @media screen and (min-width:1000px){ .map_info h3{ font-size: 15px; margin-bottom: 10px; } } .map_info img{ vertical-align: middle; display: flex; width: 15%; } #footer{margin-top:0 !important} /* BASIC css end */