@charset "utf-8";

#main, section{position: relative; overflow: hidden;}

/* 헤더 */
header{background: #a40303; padding: 35px 0; position: fixed; width: 1920px; left: 50%; transform: translateX(-50%); z-index: 9999; transition: 0.5s;}
header.scroll_on{padding: 15px 0;}
header.scroll_on img{transform: scale(0.8);}
header.scroll_on li{font-size: 18px;}
header nav ul{display: flex; justify-content: center; align-items: center; gap: 70px;}
header nav ul li{color: #fff; font-size: 20px; font-weight: 700; cursor: pointer; transition: 0.5s;}
header nav ul li img{transition: 0.5s;}

header .tel{position: absolute; right: 50%; margin-right: -900px; top: 50%; transform: translateY(-50%);}
header .tel img{transition: 0.5s;}

/* 메인01 */
#main01{background: url(../img/web/bg_main01.jpg) no-repeat center / cover; height: 950px;}
#main01 .title{position: absolute; top: 225px; left: 50%; transform: translateX(-50%); text-align: center;}
#main01 .title img:first-child{margin-bottom: 15px;}
#main01 .main01-swiper{position: absolute; width: 1920px; top: 585px; overflow: visible;}
#main01 .main01-swiper .swiper-wrapper{transition-timing-function: linear;}
#main01 .main01-swiper .swiper-wrapper img{animation: rotate_ani 5s infinite linear; width: 100%;}
@keyframes rotate_ani{0%{transform: rotate(360deg);} 100%{transform: rotate(0deg);}}
#line-text{background-color: #bb0101; width: 100%; padding: 25px 0;}
#line-text .inner{background: url(../img/web/line_text.png) no-repeat center / cover; height: 26px; animation: text_ani 40s 0s infinite linear;}
@keyframes text_ani {0%{background: url(../img/web/line_text.png) 0 0;} 100%{background: url(../img/web/line_text.png)  -6000px 0;}}

/* 메인02 */
#main02{background: url(../img/web/bg_main02.jpg) no-repeat center / cover; height: 1087px;}
#main02 .main02-swiper{text-align: center;}
#main02 .swiper-pagination{margin-bottom: 25px;}
#main02 .swiper-pagination .swiper-pagination-bullet{background: #fff; width: 15px; height: 15px; opacity: 0.5;}
#main02 .swiper-pagination .swiper-pagination-bullet-active{background: #fcc92c; opacity: 1;}

/* 메인03 */
#main03{background: #fff7dd; height: 1100px; text-align: center;}
#main03 .title{padding: 115px 0 40px;}
#main03 .ctn-wrap{display: flex; justify-content: center; gap: 35px;}
#main03 .ctn-wrap .ctn02{position: relative; width: 589px; height: 591px;}
#main03 .ctn-wrap .ctn02 img{position: absolute; left: 0;}

/* 메인04 */
#main04{background: url(../img/web/bg_main04.jpg) no-repeat center / cover; height: 1407px; text-align: center;}
#main04 .title{padding: 125px 0 140px;}
#main04 .list{display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; row-gap: 55px; width: 1500px; margin: 0 auto;}
#main04 .list li{position: relative; width: 462px; /* border: 4px solid #000; box-shadow: 5px 5px 0px rgba(0, 0, 0, 1); box-sizing: border-box; */}

#main04 .list li .main04-swiper{width: 100%;}
#main04 .list li .main04-swiper .swiper-wrapper{}
#main04 .list li .main04-swiper .swiper-wrapper .swiper-slide{}


#main04 .list li .ctn{position: absolute; right: 25px; top: -25px; animation: bounce_ani 0.8s infinite; z-index: 11;}
@keyframes bounce_ani {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translateY(-15px);
    animation-timing-function: ease-out;
  }
}
#main04 .list li p{position: absolute; font-size: 30px; color: #fff; font-weight: 800; bottom: 25px; left: 50%; transform: translateX(-50%); width: 100%;
text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px  2px 0 black, 2px  2px 0 black; z-index: 11;}
#main04 .list li span{position: absolute; font-size: 22px; color: #fff; font-weight: 700; top: 15px; left: 15px;
text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px  2px 0 black, 2px  2px 0 black; z-index: 11;}

/* 메인05 */
#main05{background: url(../img/web/bg_main05.jpg) no-repeat center / cover; height: 1039px; text-align: center;}
#main05 .title{position: absolute; top: 185px; left: 50%; margin-left: -555px;}
#main05 .youtube-wrap{width: 865px; height: 415px; background: #333; border-radius: 24px; overflow: hidden;
position: absolute; left: 50%; transform: translateX(-50%); top: 420px;}
#main05 .ctn{position: absolute; left: 50%; transform: translateX(-50%); top: 875px;}

/* 메인06 */
#main06{background: url(../img/web/bg_main06.jpg) no-repeat center / cover; width: 1800px; height: 1500px; text-align: center;
left: 50%; transform: translateX(-50%);}
#main06 .main06-swiper{width: 1200px; margin-top: 140px;}
#main06 .prev-arrow{position: absolute; top: 400px; left: 50%; margin-left: -690px; cursor: pointer;}
#main06 .next-arrow{position: absolute; top: 400px; right: 50%; margin-right: -690px; cursor: pointer;}
#main06 .title{margin: 85px 0 35px;}
#main06 .youtube-wrap{display: flex; justify-content: center; gap: 35px}
#main06 .youtube-wrap .youtube div{width: 640px; height: 360px; background: #333; border-radius: 24px; overflow: hidden;}
#main06 .youtube-wrap .youtube a{display: block; margin-top: 20px;}

/* 메인07 */
#main07{background: url(../img/web/bg_main07.jpg) no-repeat center / cover; width: 1800px; height: 1118px; text-align: center; left: 50%; transform: translateX(-50%);}
#main07 .title{padding: 185px 0 45px;}
#main07 .text{display: flex; justify-content: space-between; width: 1200px; margin: 0 auto;}
#main07 .img-wrap{display: flex; width: 625px; height: 625px; border-radius: 50%; margin: 0 auto; position: relative; z-index: 1;}
#main07 .img-wrap .img{width: 50%; overflow: hidden;}
#main07 .img-wrap .img img{animation: rotate_ani 10s infinite linear;}
#main07 .img-wrap .img02{display: flex; flex-direction: row-reverse;}
#main07 .ctn{position: absolute; left: 50%; transform: translateX(-50%); top: 500px; z-index: 1;}
@keyframes rotate_ani{0%{transform: rotate(360deg);} 100%{transform: rotate(0 deg);}}
#main07 .ripple-wrap{position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; top: 200px;}
#main07 .ripple-wrap li{position: absolute; width: 0; height: 0; border-radius: 50%; border: 2px solid #fff; animation: ripple 3s infinite ease-out; }
#main07 .ripple-wrap li:nth-child(1){ animation-delay: 0s; }
#main07 .ripple-wrap li:nth-child(2){ animation-delay: 1s; }
#main07 .ripple-wrap li:nth-child(3){ animation-delay: 2s; }
@keyframes ripple{ 0% { width: 0; height: 0; opacity: 1; } 100% { width: 1053px; height: 1053px; opacity: 0;}}

/* 메인08 */
#main08{text-align: center; padding-bottom: 125px;}
#main08 .title{padding: 200px 0 0; position: relative; z-index: 1;}
#main08 .ctn-wrap img:nth-child(1){position: absolute; top: 145px; right: 50%; margin-right: -940px;}
#main08 .ctn-wrap img:nth-child(2){position: absolute; top: 205px; left: 50%; margin-left: -1100px;}
#main08 .list{display: flex; justify-content: center; flex-wrap: wrap; gap: 50px; margin-top: 35px; position: relative; z-index: 1;}
#main08 .list li{width: 640px;}

/* 메인09 */
#main09{background: #fff9e5; text-align: center; padding-bottom: 125px;}
#main09 .title{padding: 150px 0 25px;}
#main09 .ctn-wrap{display: flex; justify-content: center; align-items: flex-end; gap:75px;}
#main09 .ctn-wrap .ctn01{position: relative;}
#main09 .ctn-wrap .ctn01 img:last-child{position: absolute; top: 100px; left: 25px;}
#main09 .ctn-wrap p{text-align: left; margin-top: 10px; font-size: 16px;}

/* 메인10 */
#main10{background: url(../img/web/bg_main10.jpg) no-repeat center / cover; height: 1052px; text-align: center; margin: 0 auto;}
#main10 .title{padding: 175px 0 25px;}
#main10 .ctn-wrap img:last-child{position: absolute; top: 200px; left: 50%; margin-left: 496px;}

/* 메인11 */
#main11{text-align: center; background: #fff9e5; padding-bottom: 125px;}
#main11 .title01{padding: 140px 0 25px;}
#main11 .ctn01{position: relative; right: 0;}
#main11 .ctn01 img:last-child{position: absolute; top: 75px; right: 260px;}
#main11 .title02{padding: 100px 0 35px;}

/* 메인12 */
#main12{background: #fcc92c; display: flex; justify-content: center; align-items: center; padding: 125px 0;}

/* db */
#db{position: relative; text-align: center; z-index: 11; display: flex; height: 974px;}
#db .inner{width: 960px; height: 100%; background: #a40303; display: flex; flex-direction: column; align-items: center;
justify-content: center;}
#db .img{width: 960px; height: 100%; overflow: hidden;}
#db .img .bg{animation: scale 10s infinite alternate linear; background: url(../img/web/bg_main13.jpg) no-repeat center / cover;width: 960px; height: 100%;}
@keyframes scale{ 0% {transform: scale(1);} 100% {transform: scale(1.2);}}

#db .inner h2{margin-bottom: 40px;}
#db .inner .db_info{width: 670px; margin:0 auto;}
#db .inner .db_info ul{display:flex; justify-content: space-between; flex-wrap: wrap;}
#db .inner .db_info ul li{width: 48%; margin-bottom: 25px;}
#db .inner .db_info ul li:nth-child(5){width: 100%;}
#db .inner .db_info ul li h4{font-size: 25px; font-weight:500; color: #fff; text-align: left; margin-bottom: 5px; padding-left: 2px;}
#db .inner .db_info ul li h4.must:after{content:'*'; margin-left:2px; color: #fff; display: inline-block; vertical-align: top; transform:translate(0,-5px);}
#db .inner .db_info ul li input[type="text"],
#db .inner .db_info ul li select{width:100%; font-size: 17px; font-weight: 400; color: #fff; appearance: none; box-sizing: border-box;
background: transparent; border: none; border-bottom: 1px solid #fff; padding: 15px 0;}
#db .inner .db_info ul li select{background:url(../img/web/select_arrow.png) no-repeat calc(100% - 16px) 50%;}
#db .inner .db_info ul li select option{color: #111;}
#db .inner .db_info ul li select,
#db .inner .db_info ul li input[type="text"]:focus{outline: none;}
#db .inner .db_info ul li input[type="text"]::placeholder{font-size:0.95em; color: #fff; letter-spacing:-0.5px; font-weight: 300; opacity: 0.7;}
#db .inner .db_info ul li .toggle-radio{display: flex; border: 1px solid #fff; border-radius: 0px; overflow: hidden; width: fit-content; width: 100%;}
#db .inner .db_info ul li .toggle-radio input[type="radio"]{display: none;}
#db .inner .db_info ul li .toggle-radio label{width: 100%; height: 40px; line-height: 40px; cursor: pointer; color: #fff; transition: all 0.2s; font-size: 14px; opacity: 0.5; font-weight: 500;}
#db .inner .db_info ul li .toggle-radio input[type="radio"]:checked + label {background-color: #fff; color: #000; opacity: 1; font-weight: bold;}
#db .inner .db_info ul .db_textarea input[type="text"]{}
#db .agree{margin-bottom:32px; display:flex; justify-content:center; align-items:center; color: #fff; font-size: 16px; }
#db .agree a{text-decoration:underline; font-weight:600; cursor:pointer;}
#db .agree input[type="checkbox"]{width:20px; height:20px; margin-right:6px;}
#db input[type="submit"]{width:515px; height: 90px; line-height: 90px; background:#111; color: #fff; font-size: 30px; cursor: pointer; appearance: none;
						 border:none; letter-spacing: -2.5px; font-weight: 400;}

.layer{position:fixed; left:0; top: 180px; z-index: 99999; width:100%; display: none;}
.layer .close_btn{position:absolute; overflow: hidden; right:0; top:0;background:#aa0000; border-radius:0 10px 0 10px; 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; border-radius:10px; 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%;  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;border-radius:3px; 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: #252525; text-align: center; color: #fff; padding: 75px 0;}
footer .logo{margin-bottom: 25px;}
footer p{font-size: 15px; line-height: 1.5; margin-bottom: 15px;}
footer cite{font-style: normal; opacity: 0.7; font-size: 14px; }