@charset "utf-8";

/* 공통 */
section{position: relative; width: 1920px; left: 50%; transform: translateX(-50%);}
.line{background: url(../image/line.jpg) center / cover; width: 100%; height: 69px; animation: line_ani 60s 0s infinite linear; position: absolute; z-index: 1;}
@keyframes line_ani {0%{background: url(../image/line.jpg) 0 0 fixed;} 100%{ background: url(../image/line.jpg)  -4000px 0 fixed;}}


/* 헤더 */
header{position: fixed; width: 1920px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; padding: 0 100px;
box-sizing: border-box; transition: 0.3s; z-index: 9999; height: 200px; }
header .logo{cursor: pointer;}
header .logo img{width: 100%; transition: 0.3s;}
header .none{opacity: 0;}
header nav ul{display: flex; gap: 65px;}
header nav ul li{font-size: 20px; font-family: 'Paperozi'; font-weight: 500; cursor: pointer;}

header.scroll_on{height: 90px; background: #fff;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);}
header.scroll_on .logo img{width: 70%;}

/* 메인01 */
#main01{height: 1050px;}
#main01 .bg{background: url(../image/main01_bg01.jpg) no-repeat center / cover; width: 1339px; height: 637px; border-radius: 250px;
position: absolute; left: 50%; transform: translateX(-50%); top: 185px;}
#main01 .ctn{position: absolute; top: 0; right: 30px;}
#main01 .title{position: absolute; top: 620px; left: 750px; z-index: 1;}
#main01 .img{position: absolute; z-index: 1;}
#main01 .img:nth-child(1){left: 0;}
#main01 .img:nth-child(2){top: 318px; right: 0;}

/* 메인02 */
#main02{background: url(../image/main02_bg01.jpg) no-repeat center / cover; width: 1800px; height: 843px;
display: flex; justify-content: center; align-items: center; gap: 50px; border-radius: 60px; overflow: hidden;}
#main02 .main02-swiper{width: 380px; height: 1025px; margin: 0;}
#main02 .main02-swiper .swiper-wrapper{transition-timing-function: linear;}
#main02 .main02-swiper .swiper-wrapper .swiper-slide img{width: 100%;}
#main02 .main02-swiper .swiper-wrapper .swiper-slide span{display: inline-block; font-size: 25px; width: 100px; height: 100px; border-radius: 100px;
display: flex; justify-content: center; align-items: center; color: #fff; font-weight: bold; position: absolute;}
#main02 .main02-swiper .swiper-wrapper .swiper-slide span.red{background: #e60012;}
#main02 .main02-swiper .swiper-wrapper .swiper-slide span.green{background: #094;}
#main02 .main02-swiper .swiper-wrapper .swiper-slide span.beige{background: #c8a063;}
#main02 .list{margin-left: 50px;}
#main02 .list li{width: 418px; height: 142px; background: #fff; border: 3px solid #000; border-radius: 100px;
display: flex; justify-content: center; align-items: center; transition: all 0.5s ease;}
#main02 .list li p{text-align: center; font-size: 21px; font-weight: 600; line-height: 1.5;}
#main02 .list li.on{background: #231815;}
#main02 .list li.on p{color: #fff;}
#main02 .list li.on p span{color: #fdd000;}
#main02 .list li+li{margin-top: -20px;}

/* 메인03 */
#main03{background: url(../image/main03_bg01.png) no-repeat center / cover; height: 847px; margin-top: 225px; padding-bottom: 75px;}
#main03 .title{position: absolute; left: 50%; transform: translateX(-50%); top: -75px; text-align: center;}
#main03 .list{display: flex; gap: 55px; position: absolute; left: 50%; transform: translateX(-50%); top: 275px;}
#main03 .list li:nth-child(odd){display: flex; flex-direction: column; gap: 25px;}
#main03 .list li:nth-child(2){position: relative; width: 460px; padding: 5px; box-sizing: border-box;}
#main03 .list li:nth-child(2) img:nth-child(1){width: 100%; animation: rotate_ani02 10s infinite linear reverse;}
#main03 .list li:nth-child(2) img:nth-child(2){position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: rotate_ani01 10s infinite linear;}
@keyframes rotate_ani01{0%{transform: translate(-50%, -50%) rotate(0deg);} 100%{transform: translate(-50%, -50%) rotate(360deg);}}
@keyframes rotate_ani02{0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);}}
#main03 .line{bottom: 0;}

/* 메인04 */
#main04{width: 1800px; height: 837px; background: #fff9dc; border-radius: 60px; margin: 60px 0 120px; overflow: hidden;}
#main04 .title{position: absolute; top: 190px; left: 245px;}
#main04 .img{position: absolute; left: 0; bottom: 0;}
#main04 .list{display: flex; gap: 35px; position: absolute; left: 775px; top: 50%; transform: translateY(-50%);}
#main04 .list li{width: 270px; height: 550px; text-align: center;}
#main04 .list li h4{margin:12px;}
#main04 .list li video{width: 100%; height: 100%; object-fit: cover; border-radius:24px; overflow: hidden;}
     
/* 메인05 */      
#main05{background: #ffd94c; height: 1150px;}       
#main05 .title{position: absolute; top: 150px; left: 250px;}
#main05 .img01{position: absolute; left: 1175px; top: -65px; animation: bounce_ani 1.6s cubic-bezier(.22,.61,.36,1) infinite;
transform-origin: center bottom; will-change: transform;}
#main05 .img02{position: absolute; left: 185px; top: 827px; z-index: 99999; animation: bounce_ani 1.6s cubic-bezier(.22,.61,.36,1) infinite reverse;
transform-origin: center bottom; will-change: transform;}
#main05 .ctn01{position: absolute; top: 430px; left: 260px;}
#main05 .ctn01 img{position: absolute;}
#main05 .ctn01 img:nth-child(1){z-index: 1;}
#main05 .ctn01 img:nth-child(2){mix-blend-mode: multiply;}
#main05 .ctn02{position: relative; display: inline-block; top: 425px; left: 715px;}
#main05 .ctn02 .blur{position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 350px; height: 150px; z-index: 9999; background: linear-gradient(to top, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);}
#main05 .ctn02 .main05-swiper{position: absolute; width: 350px; height: calc(100% - 10px); top: 0px; left: 50%; transform: translateX(-50%);}
#main05 .ctn02 .swiper-wrapper{transition-timing-function: linear;}
#main05 .ctn02 .swiper-slide{display: flex; justify-content: space-between; align-items: center; width: 100%; border-bottom: 1px dashed rgba(0, 0, 0, 0.5);}
#main05 .ctn02 .swiper-slide p{font-size: 23px; font-weight: 300; color: #231815;}
#main05 .ctn02 .swiper-slide strong{font-size: 23px; font-weight: 800; color: #231815;}
#main05 .ctn02 .text{font-size: 11px; position: absolute; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; bottom: 30px; z-index: 9999; font-weight: 500;}
#main05 .ctn03{position: absolute; top: 430px; left: 1300px;}
#main05 .line{bottom: 0;}
@keyframes bounce_ani{
  0%, 100%{transform: translateY(0) scaleX(1) scaleY(1);}
  15%{transform: translateY(-16px) scaleX(.98) scaleY(1.02);}
  35%{transform: translateY(0) scaleX(1.06) scaleY(.94);}
  55%{transform: translateY(-10px) scaleX(.99) scaleY(1.01);}
  75%{transform: translateY(0) scaleX(1.03) scaleY(.97);}
}

/* 메인06 */
#main06{padding: 175px 0; text-align: center;}
#main06 .title{margin-bottom: 45px;}
#main06 .swiper-wrapper{transition-timing-function: linear;}
#main06 .swiper-wrapper img{width: 100%; border:1px solid #111}
#main06 .ctn{position: absolute; top: 52.5%; left: 50%; transform: translate(-50% ,-50%); z-index: 1;}
#main06 .ctn img{position: absolute; top: 52.5%; left: 50%; transform: translate(-50% ,-50%);}

/* 메인07 */
#main07{background: #fff3b6; padding: 125px 0 200px; text-align: center;}
#main07 .title_wrap{margin-bottom: 45px;}
#main07 .title_wrap p{font-size: 20px; margin-bottom: 15px;}
#main07 .title_wrap h1{font-size: 60px; line-height: 1.3;}
#main07 .slider_wrap{display: flex; justify-content: center; gap: 20px;}
#main07 .slider_wrap .inner{background: #fff; border: 2px solid #000; border-radius: 35px; padding: 75px 0; clip-path: inset(0 0 -9999px 0); position: relative; }
#main07 .slider_wrap .inner01{width: 1084px;}
#main07 .slider_wrap .inner02{width: 699px;}

.inner .main07-swiper{overflow: visible; width: 1280px; left: 50%; transform: translateX(-50%);}
.inner .main07-swiper .swiper-wrapper{align-items: center;}
.inner .main07-swiper .swiper-wrapper .swiper-slide{transform: scale(0.8);}
.inner .main07-swiper .swiper-wrapper .swiper-slide.swiper-slide-active{transform: scale(1.2);}
.inner .main07-swiper .swiper-wrapper .swiper-slide img{width: 100%;}
.inner .main07-swiper-thumbs{position: absolute; width: 100%; height: auto; left: 50%; transform: translateX(-50%); bottom: -25px;}
.inner .main07-swiper-thumbs p{font-size: 30px; font-weight: bold; background: #fdd000; border: 2px solid #000; border-radius: 50px; display: inline-block; padding: 10px 35px;}
.inner .main07-swiper-thumbs .swiper-slide{transition: none !important; opacity: 0 !important;}
.inner .main07-swiper-thumbs .swiper-slide.swiper-slide-active{opacity: 1 !important;}
.inner .swiper-arrow{display: flex; gap: 250px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -25px; z-index: 1;}
.inner .swiper-arrow div{cursor: pointer;}
#main07 .line{bottom: 0;}

/* 메인08 */
#main08{background: url(../image/main08_bg01.jpg) no-repeat center / cover; width: 1800px; height: 921px; margin-top: 60px;}
#main08 .title{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}
#main08 .list{display: flex; width: 100%; height: 100%;}
#main08 .list li{width: 25%; height: 100%; background: rgba(32, 30, 23, 0.8); border-right: 1px solid rgba(255, 255, 255, 0.2); position: relative; transition: 0.5s;}
#main08 .list li .ctn{position: absolute; left: 50%; transform: translateX(-50%); bottom: 120px; z-index: 1;}
#main08 .list li .blur{position: absolute; bottom: 0; width: 100%; height: 400px; border-right: 1px solid rgba(255, 255, 255, 0);
background: linear-gradient(to top, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0) 100%); opacity: 0; transition: 0.5s;}
#main08 .list li.on{background: none;}
#main08 .list li.on .blur{opacity: 1;}

/* 메인09 */
#main09{padding: 125px 0; display: flex; justify-content: center; align-items: center; flex-direction: column;}
#main09 .title{margin-bottom: 35px;}
#main09 .ctn{position: absolute; top: 0; left: 1115px;}

/* 메인10 */
#main10{background: linear-gradient(to bottom, #ffd94c 50%, #ffffff 50%); padding: 150px 0;}
#main10 .title_wrap{text-align: center; margin-bottom: 25px;}
#main10 .title_wrap h1{font-size: 90px; margin-bottom: 10px;}
#main10 .title_wrap p{font-size: 25px;}
#main10 .img_wrap img{position: absolute; top: 50%; transform: translateY(-50%);}
#main10 .img_wrap img:nth-child(1){left: 0;}
#main10 .img_wrap img:nth-child(2){right: 0;}
#main10 .db_wrap{display: flex; align-items: center; justify-content: center; width: 100%; max-width: 722px; margin: 0 auto;
background: #fff; border-radius: 18px; padding: 80px 40px 70px 40px; box-sizing: border-box; box-shadow: 65px 65px 50px rgba(108, 94, 42, 0.3);}
#main10 .db_wrap .db_inner .db_list{display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 auto;}
#main10 .db_wrap .db_inner .db_list li{width: 49%; height: 58px;}
#main10 .db_wrap .db_inner .db_list li h2{font-size: 22px; font-weight: bold; margin-bottom: 7px;}
#main10 .db_wrap .db_inner .db_list li+li+li{margin-top: 65px;}
#main10 .db_wrap .db_inner .db_list li input{width: 100%; height: 100%; border: none; box-sizing: border-box; background: #fff; font-family: 'Paperozi';
border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.2);}
#main10 .db_wrap .db_inner .db_list li input[type="text"]{font-size: 15px; font-weight: 700; padding-left: 15px;}
#main10 .db_wrap .db_inner .db_list li input::placeholder{font-size: 15px; font-weight: 700;}
#main10 .db_wrap .db_inner .db_list li input:focus{outline: none;}
#main10 .db_wrap .db_inner .db_list li.agree{width: 100%; margin-top: 25px; display: flex; align-items: center; font-size: 15px;}
#main10 .db_wrap .db_inner .db_list li.agree a{cursor: pointer;}
#main10 .db_wrap .db_inner .db_list li.agree input{width: 17px; height: 17px; margin-right: 5px; cursor: pointer;}
#main10 .db_wrap .db_inner .db_list li.agree input[type="checkbox"]{accent-color: #111;}
#main10 .db_wrap .db_inner .db_list li.db_submit{width: 100%; margin-top: 35px;}
#main10 .db_wrap .db_inner .db_list li.db_submit input{height: 85px; border-bottom: none; background: #000000; color: #fff; font-size: 28px; font-weight: 500;
cursor: pointer; border-radius: 10px; font-weight: bold;}

.layer{position:fixed; display:none; left:0; top: 50%; transform: translateY(-50%); z-index: 99999; width:100%;}
.layer h2{color: #fff !important;}
.layer .close_btn{position:absolute; overflow: hidden; right:0; top:0;background:#d31a28; color: #fff;}
.layer .close_btn a{display: block;color: #fff;padding:14px 18px; font-size:20px; font-weight:bold;}
.layer .layer_wrap{position:relative;width:100%; max-width:700px; top:0px; margin:0 auto; background:rgba(0,0,0,0.95); text-align:left; letter-spacing:-0.5px; box-shadow:0 0 50px rgba(0,0,0,0.6);}
.layer .layer_wrap .DB_info_detail{width:100%; background: #231815; margin:18px auto; padding-bottom:16px; line-height:1.6; color: #fff;font-size:12px;}
.layer .layer_wrap .DB_info_detail h2{padding:22px;border-bottom:1px solid #222; font-size:24px; font-weight:bold;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap p{padding:8px;margin-bottom:12px; font-size:13px; }
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap{width:98%; height:360px; padding:8px 16px; overflow:auto; box-sizing:border-box;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dt{display:block; background: #fff; padding:7px 10px; font-weight: bold; color: #333;}
.layer .layer_wrap .DB_info_detail .DB_info_detail_wrap dl dd{margin-bottom:16px; padding:4px 12px; box-sizing:border-box;}

/* 푸터 */
footer{background: #231815; width: 1650px; height: 260px; border-radius: 200px; display: flex; justify-content: center; align-items: center;
margin: 0 auto 150px; gap: 50px; position: relative;}
footer ul li{color: #fff; font-size: 14px;}
footer ul li+li{margin-top: 7.5px;}
footer .ctn{position: absolute; top: 50%; transform: translateY(-50%); left: 50px;}

/* db */
.db_quick{position: fixed; max-width: 1920px; bottom: -200px; width: 100%; background: #231815; box-shadow:0 0 90px rgba(0,0,0,0.8); transition:0.5s;
z-index: 9999; padding: 10px 0;}
.db_quick.scroll_on{bottom:0;}
.db_quick .db{width:1450px; margin:0 auto; display: flex; justify-content: space-between; align-items: center;}
.db_quick .db ul{display: flex; gap:20px; row-gap: 0; flex-wrap: wrap; margin: 0 10px 0 15px;}
.db_quick .db ul li{width: calc(33.3333% - 20px);}
.db_quick .db ul li a{text-decoration:underline; cursor: pointer;}
.db_quick .db ul li input[type="text"]{width: 100%; height:45px; background:#fff; border:1px solid #fff; font-family: 'Pretendard'; font-size:15px; border-radius: 5px; padding-left: 10px;}
.db_quick .db ul li input[type="text"]::placeholder{color: #333; font-size:14px; text-align: left; font-weight: 600; opacity: 0.7;}
.db_quick .db ul li.agree{width: 100%; margin-top: 7px; display: flex; align-items: center; font-size: 14px; color: #fff;}
.db_quick .db ul li.agree a{cursor: pointer;}
.db_quick .db ul li.agree input{width: 17px; height: 17px; margin-right: 5px; cursor: pointer;}
.db_quick .db .db_submit{animation:submit_btn 0.3s 0s infinite alternate ease-in;}
@keyframes submit_btn {0%{transform:translate(0,-4px)} 100%{transform:translate(0,0)}}
.db_quick .db .db_submit input{transition:0.3s;}
.db_quick .db .db_submit input:hover{filter:contrast(150%)}