@charset "utf-8";

main, section{position: relative; box-sizing: border-box;}
@keyframes expand {0%{width: 0; opacity: 0;} 100%{width: 1800px; opacity: 1;}}
@keyframes fadeIn {0%{opacity: 0;} 100%{opacity: 1;}}



/* 공통 헤더 스타일 */
#header {
    position: fixed;
    top: 30px;
    width: 100%;
    background: #84d7d6;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1800px;
    margin: -28px auto;
    padding: 15px 20px;
}
.logo {
    height: 100px;

}
.form_logo {
    height: 70px;

}

/* PC 메뉴 */
.pc_menu {
    margin: 0 10px;
}
.pc_menu a {
    color: #000000;
    text-decoration: none;
    font-size: 22px;
    font-weight: 500;
}

/* 햄버거 메뉴 */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}
.hamburger span {
    width: 25px;
    height: 3px;
    background: #333;
    margin: 4px 0;
    transition: 0.3s;
}

/* 모바일 메뉴 */
.mb_menu {
    display: none;
    width: 100%;
    background: #84d7d6;
}
.mb_menu .inner {
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
}
.menu_item {
    border-bottom: 1px solid #3b8887;
}
.menu_item > a {
    display: block;
    padding: 12px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}
.submenu {
    display: none;
    padding: 0 20px 10px;
}
.submenu a {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    color: #666;
    text-decoration: none;
}

/* 반응형 */
@media screen and (max-width: 768px) {
    .pc_menu {
        display: none;
    }
    .hamburger {
        display: flex;
    }
    .logo {
    height: 100px;

}
}


/* 메인 */
#main{padding-top: 138px;}
#main .bg{background: url(../image/main_bg.jpg) no-repeat center / cover; 
    width: 1800px; 
    height: 922px; 
    border-radius: 100px;
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 150px; 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%);
}
#main .bg .title_wrap{text-align: center;}
#main .bg .title_wrap .title{margin: 30px 0;}
#main .bg .logo{position: absolute; top: 5%; right: 5%;}
#main .bg .img{animation: rotate 10s 0s infinite linear;}
@keyframes rotate{0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);}}

#main .ctn{position: absolute; top: 50%; left: 49.5%; transform: translate(-50%, -50%);}
#main .line01{background: url(../image/main_line01.png) center / cover; height: 49px; animation: line01 30s 0s infinite linear; 
			  position: absolute; width: 1920px; top: -20px;}
@keyframes line01 {0%{background: url(../image/main_line01.png) 0 0;} 100%{background: url(../image/main_line01.png)  -4000px 0;}}
#main .line02{background: url(../image/main_line02.png) center / cover; height: 53px; animation: line02 30s 0s infinite linear reverse;
			  position: absolute; width: 1920px; top: 50px;}
@keyframes line02 {0%{background: url(../image/main_line02.png) 0 0;} 100%{background: url(../image/main_line02.png)  -4000px 0;}}


/* 섹션1 */
#s01{margin-top: 95px;}
#s01 .bg{background: url(../image/s01_bg.jpg) no-repeat center / cover; height: 1120px; width: 1730px; border-radius: 0px;
		 position: relative; left: 50%; transform: translateX(-50%); overflow: hidden;} 
#s01 .bg .title{position: absolute; left:25%; top: 100px;}
#s01 .bg .s01_swiper{position: absolute; width: 1920px; left: 50%; transform: translateX(-50%); top: 585px;}
#s01 .bg .s01_swiper .swiper-wrapper{transition-timing-function: linear;}
#s01 .ctn{position: absolute; top: -285px; left: 950px; animation: rotate 10s 0s infinite linear;}

/* 섹션2 */
#s02{margin-top: -140px; width: 1920px; left: 50%; transform: translateX(-50%);}
#s02 .bg{background: url(../image/s02_bg.jpg) no-repeat bottom center / cover; width: 1800px; height: 1021px; text-align: center;
		 padding-top: 170px; box-sizing: border-box; border-top-left-radius: 100px; border-bottom-left-radius: 100px; margin-left: auto;}
#s02 .bg .title{margin-bottom: 40px;}
#s02 .ctn{position: absolute; top: 50%; transform: translateY(-50%); left: 50%; margin-left: -910px;}

/* 섹션2 */
#youtube .bg{background: url(../image/youtube_bg.jpg) no-repeat center; border-radius: 100px; width: 1800px; height: 1180px; margin: 100px 0 0; text-align: center;
		 padding-top: 150px; box-sizing: border-box; position: relative; left: 50%; transform: translateX(-50%); z-index: 1;}
#youtube .bg .title { margin-bottom: 40px;}
/* 섹션3 */
#s03{height: 900px; margin-top: 100px;}
#s03 .bg{background: url(../image/s03_bg.jpg) no-repeat bottom center / cover; width: 1800px; height: 1021px; text-align: center;
		 padding-top: 170px; box-sizing: border-box; border-top-left-radius: 100px; border-bottom-left-radius: 100px; margin-left: auto;}
#s03 .title{position: absolute; top: 280px; left: 50%; margin-left: -810px;}
#s03 .list_wrap{position: absolute; top: 50%; transform: translateY(-50%); right: 50%; margin-right: -900px; text-align: center;}
#s03 .list_wrap .list{display: flex; gap:10px; margin-bottom: 15px;}
#s03 .line01{background: url(../image/s03_line01.png) center / cover; height: 49px; animation: line01 30s 0s infinite linear; 
			  position: absolute; width: 1920px; top: 0;}
@keyframes line01 {0%{background: url(../image/s03_line01.png) 0 0;} 100%{background: url(../image/s03_line01.png)  -4000px 0;}}
#s03 .line02{background: url(../image/s03_line02.png) center / contain; height: 49px; animation: line02 30s 0s infinite linear reverse;
			  position: absolute; width: 1920px; bottom: 0;}
@keyframes line02 {0%{background: url(../image/s03_line02.png) 0 0;} 100%{background: url(../image/s03_line02.png)  -4000px 0;}}

/* 섹션4 */
#s04 .bg{background: url(../image/s04_bg.jpg) no-repeat center; border-radius: 100px; width: 1800px; height: 1180px; margin: 100px 0 0; text-align: center;
		 padding-top: 150px; box-sizing: border-box; position: relative; left: 50%; transform: translateX(-50%); z-index: 1;}
#s04 .bg .tab{display: flex; justify-content: center; gap:5px; margin: 50px 0 75px;}
#s04 .bg .tab li{height: 70px; cursor: pointer; transition: 0.3s;}
#s04 .bg .tab li:nth-child(1){background: url(../image/s04_tab01.png) no-repeat center / cover; width: 212px;}
#s04 .bg .tab li:nth-child(1).on{background: url(../image/s04_tab01_on.png) no-repeat center / cover;}
#s04 .bg .tab li:nth-child(2){background: url(../image/s04_tab02.png) no-repeat center / cover; width: 212px;}
#s04 .bg .tab li:nth-child(2).on{background: url(../image/s04_tab02_on.png) no-repeat center / cover;}
#s04 .bg .tab li:nth-child(3){background: url(../image/s04_tab03.png) no-repeat center / cover; width: 212px;}
#s04 .bg .tab li:nth-child(3).on{background: url(../image/s04_tab03_on.png) no-repeat center / cover;}
#s04 .bg .tab li:nth-child(4){background: url(../image/s04_tab04.png) no-repeat center / cover; width: 212px;}
#s04 .bg .tab li:nth-child(4).on{background: url(../image/s04_tab04_on.png) no-repeat center / cover;}
#s04 .bg .menu_wrap .s04_swiper{width: 1400px;}
#s04 .bg .menu_wrap .s04_swiper p{font-size: 24px; letter-spacing: -0.7px; font-weight: bold; color: #222;}

/* 섹션5 */
#s05{background: url(../image/s05_bg.jpg) no-repeat bottom center / cover; height: 1397px; margin-top: -450px; padding-top: 450px;
     left: 50%; transform: translateX(-50%); width: 1920px;}
#s05 .title{padding: 150px 0 50px 160px;}
#s05 .list{display: flex; justify-content: space-between; width: 1670px; margin: 0 auto;}

/* 섹션6 */
#s06{background: url(../image/s06_bg.jpg) no-repeat center / cover; height: 990px;}
#s06 .title{position: absolute; left: 50%; margin-left: -850px; top: 170px;}
#s06 .s06_swiper{position: absolute; width: 1200px; top: 50%; transform: translateY(-50%); right: 50%; margin-right: -1245px;}
#s06 .s06_swiper .swiper-wrapper{transition-timing-function: linear;}

/* 섹션7 */
#s07{background: url(../image/s07_bg.jpg) no-repeat center / cover; width: 1920px; height: 1129px; left: 50%; transform: translateX(-50%);}
#s07 .ctn{position: absolute; top: 333px; left: 50%; margin-left: -875px;}

/* 섹션8 */
#s08{text-align: center; width: 1920px; height: 2953px; left: 50%; transform: translateX(-50%);}
#s08 .title{padding-top: 165px; margin-bottom: 75px;}
#s08 .list li{position: absolute; z-index: 1;}
#s08 .list li:nth-child(1){top: 318px;}
#s08 .list li:nth-child(2){top: 809px;}
#s08 .list li:nth-child(3){top: 1300px;}
#s08 .list li:nth-child(4){top: 1792px;}
#s08 .list li:nth-child(5){top: 2285px;}
#s08 .list li:nth-child(odd){left: 50%; margin-left: -680px;}
#s08 .list li:nth-child(even){right: 50%; margin-right: -780px;}
#s08 .img_wrap .img{position: absolute;}
#s08 .img_wrap .img:nth-child(1){top: 366px; right: 0;}
#s08 .img_wrap .img:nth-child(2){top: 1025px; left: 0;}
#s08 .img_wrap .img:nth-child(3){top: 2014px; right: 0; z-index: 2;}

/* 섹션9 */
#s09{background: #abbbc6; height: 1200px; text-align: center; width: 1920px; left: 50%; transform: translateX(-50%); z-index: 1;}
#s09 .title{padding-top: 170px; margin-bottom: 35px; padding-left: 300px}
#s09 .s09_swiper{width: 1572px;}
#s09 .s09_swiper .left_arrow{position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; left: 365px; cursor: pointer;}
#s09 .s09_swiper .right_arrow{position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; right: 365px; cursor: pointer;}
#s09 .ctn{position: absolute; left: 0; top: 200px;}
#s09 .text{position: absolute; top: 400px; right: 100px;}

/* 유튜브 */
#video-background-container {
    width: 1267px;
    height: 713px;
    margin: 0 auto; /* 가운데 정렬 */
    position: relative;
    background: #ffffff;
}

#video-background {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    z-index: 0;
}

#video-overlay {
    display: none; /* 오버레이가 필요 없으면 숨김 */
}

/* 섹션10 */
#s10{background: url(../image/s10_bg.jpg) no-repeat center / cover; height: 1882px; text-align: center; width: 1920px; left: 50%; transform: translateX(-50%);}
#s10 .con01{padding: 225px 0 30px;}
#s10 .con02{padding: 30px 0 30px;}
#s10 .line{background: url(../image/s15_ctn.jpg) center / cover; width: 90px; height: 4000px; animation: line_left 30s 0s infinite linear; 
		   position: absolute; left: 0;}
@keyframes line_left {0%{background: url(../image/s15_ctn.jpg) 0 0;} 100%{background: url(../image/s15_ctn.jpg)  0 -4000px;}}

/* 섹션11 */
#s11{background: url(../image/s11_bg.jpg) no-repeat center / cover; height: 219px; width: 1920px; left: 50%; transform: translateX(-50%);}
#s11 .s11_swiper{position: absolute; width: 1250px; right: -100px; top: 50%; transform: translateY(-50%);}
#s11 .s11_swiper .swiper-wrapper{transition-timing-function: linear;}

/* 섹션12 */
#s12{margin-top: 95px;}
#s12 .bg{background: url(../image/s12_bg.jpg) no-repeat center / cover; height: 1120px; width: 1730px; border-radius: 0px;
		 position: relative; left: 50%; transform: translateX(-50%); overflow: hidden;} 
#s12 .bg .title{position: absolute; top: 100px; right: 140px; top: 100px;}
#s12 .bg .s12_swiper{position: absolute; width: 1920px; left: 50%; transform: translateX(-50%); top: 585px;}
#s12 .bg .s12_swiper .swiper-wrapper{transition-timing-function: linear;}
#s12 .ctn{position: absolute; top: -285px; left: 120px; animation: rotate 10s 0s infinite linear;}

/* 섹션13 */
#s13 {background: #dfe1e1; text-align: center; padding: 140px 0; width: 1920px; left: 50%; transform: translateX(-50%);}
#s13 .bg{background: url(../image/s13_bg.jpg) no-repeat center; border-radius: 100px; width: 1800px; height: 1180px; margin: 100px 0 0; text-align: center;
		 padding-top: 150px; box-sizing: border-box; position: relative; left: 50%; transform: translateX(-50%); z-index: 1;}
#s13 .title_wrap{display: flex; gap: 75px; padding: 0 0 40px 277px;}

/* 섹션14 */
#s14{background: url(../image/s14_bg.jpg) no-repeat center / cover; height: 1282px; text-align: center; width: 1920px; left: 50%; transform: translateX(-50%);}
#s14 .con01{padding: 225px 0 30px;}
#s14 .con02{padding: 30px 0 30px;}
@keyframes line_left {0%{background: url(../image/s15_ctn.jpg) 0 0;} 100%{background: url(../image/s15_ctn.jpg)  0 -4000px;}}
/* 섹션15 */
#s15{background: url(../image/s15_bg.jpg) no-repeat center / cover; height: 2242px; text-align: center; width: 1920px; left: 50%; transform: translateX(-50%);}
#s15 .con01{padding: 225px 0 130px;}
#s15 .line{background: url(../image/s15_ctn.jpg) center / cover; width: 90px; height: 4000px; animation: line_left 30s 0s infinite linear; 
		   position: absolute; left: 0;}
@keyframes line_left {0%{background: url(../image/s15_ctn.jpg) 0 0;} 100%{background: url(../image/s15_ctn.jpg)  0 -4000px;}}


/*대출*/
.loan {background:#fff;  padding:0px 0 0 0; text-align:center;}
.loan .top_tit p {margin:0px 0;} 
.loan .img_box {width:100%; margin:0 auto; }
.loan .img_box img{width:100%;}
.loan .bg_color {width:100%; padding:0 0 0 0;} 
.loan .top_space {margin-top:70px;}


/*무이자*/
.card {background:#fff;  padding:0px 0 0 0; text-align:center;}
.card .top_tit p {margin:0px 0;} 
.card .img_box {width:100%; margin:0 auto; }
.card .img_box img{width:100%;}
.card .bg_color {width:100%; padding:0 0 0 0;} 
.card .top_space {margin-top:70px;}



/* 푸터 */
footer{background: #151515; padding: 75px 0 200px; text-align: center; position: relative;}
footer p{line-height: 1.8; font-weight: 300; color: #fff; font-size: 15px;}

/* db */
.db_wrap{position: fixed; max-width: 1920px; width: 100%; bottom: -200px; background: url(../image/db_bg.jpg) no-repeat center / cover;
		 box-shadow:0 0 90px rgba(0,0,0,0.8); transition:0.8s; z-index: 9999; padding: 10px 0 5px; box-sizing: border-box;}
.db_wrap.scroll_on{bottom:0;}
.db_wrap .db{width:1180px; margin:0 auto; display: flex; justify-content: space-between; align-items: center;}
.db_wrap .db ul{display: flex; flex-wrap: wrap; margin: 0 20px 0 10px;}
.db_wrap .db ul li{width: 30%; margin: 0 1.5%;}
.db_wrap .db ul li a{text-decoration:underline; cursor: pointer;}
.db_wrap .db ul li input[type="text"]{width: 100%; padding:6px 5px; height:30px; background:#fff; border:1px solid #fff; font-size:15px; border-radius: 5px;}
.db_wrap .db ul li input[type="text"]::placeholder{color: #333; font-size:14px; text-align: left; letter-spacing: -1px; font-family: pretendard; padding-left: 10px; font-weight: 500;}
.db_wrap .db .agree{margin-top: 10px; text-align: left;color: #fff; font-size:14px; letter-spacing:-1px; font-family: pretendard; font-weight: 500;}
.db_wrap .db .agree a{text-decoration:underline;}
.db_wrap .db .agree input[type="checkbox"]{width:15px; height:15px; margin-right: 5px; vertical-align: middle;}
.db_wrap .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_wrap .db .db_submit input{transition:0.3s;}
.db_wrap .db .db_submit input:hover{filter:contrast(150%)}

.layer{position:fixed; display:none; left:0;top:180px; z-index:3000000; width:100%; font-family: pretendard;}
.layer .close_btn{position:absolute; overflow: hidden; right:0; top:0;background:#aa0000; 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%;  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;}




@media screen and (max-width: 768px) {




/* 공통 헤더 스타일 */
#header {
    position: fixed;
    top: 30px;
    width: 100%;
    background: #84d7d6;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1800px;
    margin: -28px auto;
    padding: 15px 20px;
}
}