
/* font */
/* font-family: 'Noto Sans KR', sans-serif; */

/* 기본설정 시작 */
html { background:#fff; font-family: 'Noto Sans KR', sans-serif; overflow-x:hidden; max-width:1920px; min-width:300px; width:100%; margin:auto; } 
body{overflow: hidden;font-family: 'Noto Sans KR', sans-serif;}
#aside,#ft,#hd { display:none; } 
h1, h2, h3, h4, h5, h6, p, span, strong { font-family: 'Noto Sans KR', sans-serif; } 
.ip{display: none;}

/*컴플리트 페이지*/
#hd,#ft,#aside { display:none; } 
.com_content { display:flex; flex-direction:column; justify-content:center; align-items:center; height:100vh; } 
.com_content h1 { text-align:center; font-size:3vw; } 
.com_content button { display:inline-block; border:9px solid #fff; border-radius:26px; height:108px; width:436px; font-size:38px; margin:30px; font-family:'nanumsquare'; font-weight:bold; color:#fff; text-align:center; display:flex; flex-direction:row; justify-content:space-evenly; align-items:center; background:linear-gradient(45deg, #dc5f64, #ae3f91); position:relative; cursor:pointer; }

section{width: 100%;position: relative;}
main { max-width: 700px; margin: 0 auto; overflow-x: hidden; } 
section { max-width: 700px; position: relative;left: 50%;transform: translateX(-50%);} 
section .big-img.poa{position: absolute;top: 0;left: 50%;transform: translateX(-50%);}
section .big-img{margin: 0 auto;max-width: 1000px;}
section .big-img img{width: 100%;}

.swiper { width: 100%; height: 100%; max-width: 1000px;margin: 0 auto;} 
.swiper-slide { text-align: center; font-size: 18px; background: #fff;
/* Center slide text vertically */
display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } 
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } 
.swiper .swiper-button-next, .swiper1 .swiper-button-prev { width: 30px; height: 30px; background-image: none; border-bottom: 2px solid rgb(255, 255, 255); border-right: 2px solid rgb(255, 255, 255); rotate: -45deg; } 
.swiper .swiper-button-prev { rotate: -225deg; } 
/* 기본설정 끝 */
/* 위에까지는 다 기본css 추후 랜딩 작업 시 위 부분 삭제하지 말것 */
/* ******************************************************************************************************** */
/* ******************************************************************************************************** */

/* 각각의 영역을 섹션으로 만드셔서 관리하시면 편합니다. 아래처럼 코드를 적어서 사용하시면 됩니다 */




/* ******************************************************************************************************** */
/* 밑에 코드들은 빠른상담 관련된 코드들입니다. 삭제하지 마시고 디자인적으로 필요한 요소들만 수정해 사용하시면 됩니다 */
/* ******************************************************************************************************** */
.tele, .cs_name-1{position: relative;}
.tele p, .cs_name-1 p{ position: absolute; color: #fff; font-size: 15px; top: -25px;}
.tele p{left: 80px; top: -19px;}

.fbx{padding-top: 10px; display: flex; align-items: center;justify-content: space-between;}
.fix-on {position:fixed !important;top: 0;left: 0;right: 0;}
section[index="11"]{max-width: 700px; margin: 0 auto; width: 100%;z-index: 999;position: fixed; bottom: 0px; background: linear-gradient(45deg, #2e8e8b, #312c4e);}
section[index="11"] form{padding: 0px 3% 0; display: flex;flex-direction: column; justify-content: space-evenly; height: auto;  margin: 0 auto;max-width: 700px;padding-bottom: 10px;}
section[index="11"] .letgo{padding: 10px 3% 0; text-align: center; color: #fff; font-size: 16px; width: 100%;}
section[index="11"] .letgo img{ width: 85%;}
section[index="11"] .font-bold{ font-weight:bold;}
.inputbox{width: 100%; display: flex; align-items: center;}
.inputbox label{}
.inputbox input,
.inputbox span{margin: 10px 0; padding: 5px 0;}
.cs_name{width: 100%;}
.tele{height: 33px; margin-left: 10px; display: flex;justify-content: flex-end; align-items: center;}
.tele span{color: #fff;}
.cs_tel1, .cs_tel2, .cs_tel3{width: 27%;}
.privacy a{color: #fff;}
.sub-btn{color: #171C61; border: 2px solid #171C61; font-size: 20px; font-weight: bold;  width: 150px;height: 40px;background: #fff;border-radius: 13px;}
.inputbox input, .inputbox span{font-size: 16px;margin: 0;box-sizing: border-box;height: 27px;padding: 0 5px;}
.inputbox span{padding: 5px;}
.cs_tel1{height: 27px;width: 27%; border: none; background-color: #fff;font-size: 20px;text-align: center;}
/* ******************************************************************************************************** */
/* ******************************************************************************************************** */
/* ******************************************************************************************************** */

/* input 기본 스타일 초기화 */
input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
            outline: none;
}
input::focus{border: none;}


/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; }

/* input type number 에서 화살표 제거 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}


img{max-width: 100%;}
.bn_con{max-width: 90%;margin: 0 auto;width: auto;}

.s1{position: relative; padding: 100px 0;background: url(../img/s1_bg.webp)no-repeat center /cover;}
.s1 img{margin: 0 auto;display: block;}
.s1 .s1_logo{position: absolute;top: 47px;left: 5%;cursor: pointer;max-width: 50%;}
.s2{padding: 58px 0;background: url(../img/s2_bg.webp)no-repeat center /cover;}
.s2 img{margin: 0 auto;display: block;}
.s3{padding: 60px 0 0;background: #F4F2F2;}
.s3 img{margin: 0 auto;display: block;}
.s4{position: relative; padding: 150px 0 232px;background: url(../img/s4_bg.webp)no-repeat center /cover;;}
.s4 img{margin: 0 auto;display: block;}
.s4 .s4_child{width: 15vw;max-width: 245px; position: absolute;bottom: 0px;right: 5%;cursor: pointer;}
.s5{padding: 150px 0;background: url(../img/s5_bg.webp)no-repeat center /cover;}
.s5 img{margin: 0 auto;display: block;}
.s5_2{margin: 160px 0 50px;display: flex;justify-content: center;gap: 30px;}
.s5_2_list{max-width: 500px;border-radius: 30px;overflow: hidden;display: flex;flex-direction: column;}
.s5_2_list_tit{padding: 23px 0;text-align: center;color: #fff;font-size: 20px;font-weight: 900;}
.s5_2_list_tit1{background-color: #1F1F1F;}
.s5_2_list_tit2{background-color: #2AA488;}

.s5_3{font-size: 20px;text-align: center;line-height: 1.5;font-weight: 500;}
.s5_3 .bold{font-weight: 700;color: #1CC397;}
.s6{padding: 50px 0 40px;background: url(../img/s6_bg.webp)no-repeat center /cover;}
.s6 img{margin: 0 auto;display: block;max-width: 662px;margin: 0 auto;width: 100%;}
.s6 .bn_con{display: flex;flex-direction: column;gap: 20px;text-align: center;font-size: 22px;line-height: 1.5;font-weight: 700;color: #fff;}
.s7{padding: 150px 0 0px;background: #F4F2F2;}
.s7 img{margin: 0 auto;display: block;}
.s8{padding: 200px 0;background: #F4F2F2;}
.s8 img{margin: 0 auto;display: block;}
.s9{padding: 130px 0;background: url(../img/s9_bg.webp)no-repeat center /cover;}
.s9 img{margin: 0 auto;display: block;}
.s9 .bn_con{display: flex;flex-direction: column;gap: 60px;align-items: center;}
.s9 .s9_1{display: flex;flex-direction: column;gap: 20px;}
.s9 .you{cursor: pointer;}
.s10{padding: 150px 0;background: #F4F2F2;}
.s10 img{margin: 0 auto;display: block;}
.s10 .bn_con{display: flex;flex-direction: column;gap: 100px;align-items: center;}
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus{box-shadow: none;border: none !important;}
.s11{padding: 130px 0;background: url(../img/s11_bg.webp)no-repeat center /cover;}
.s11 .s11_con{background-color: #07152271; border-radius: 60px; max-width: 90%;width: 1116px;margin: 0 auto;padding: 81px 0 70px;}
.s11 .s11_con_wrap{display: flex;flex-direction: column;gap: 75px;max-width: 820px;margin: 0 auto;width: 90%;}
.s11 .s11_tit{text-align: center;color: #fff;font-weight: 900;font-size: 50px;line-height: 1.4;width: max-content;margin: 0 auto;position: relative;}
.s11 .s11_tit::after{content: '';position: absolute;left: calc(100% + 10px);top: 50%;transform: translateY(-50%);width: 160px;height: 160px;background: url(../img/s11_img.png)no-repeat center /contain;}
.s11 .s11_input_list{display: flex;gap: 30px;align-items: center; padding: 18px 33px;border-radius: 13px;background-color: #fff;}
.s11 .s11_input_list input{font-family: 'Noto Sans KR', sans-serif; box-sizing: border-box; border: none;line-height: 1.6; font-size: 20px;font-weight: 600;}
.s11 .s11_input_list input{color: #303030;}
.s11 .s11_input_group form{display: flex;flex-direction: column;gap: 13px;}
.s11 .s11_input_tit{font-size: 20px;font-weight: 900;width: 70px;}
.s11 .s11_line{height: 25px;width: 1px;background-color: #303030;}
.s11 .s11_textarea{}
.s11 .s11_textarea textarea{resize: none; width: 100%;height: 180px;border-radius: 14px;font-family: 'Noto Sans KR', sans-serif;font-size: 20px; padding: 15px 32px;}
.s11 .privacy{color: #fff;font-size: 18px;}
.s11 .privacy .bold{font-weight: 700;}
.s11 .privacy a{display: inline-block;margin-left: 10px; font-size: 15px;padding: 0 10px; border-radius: 50px;background-color: #fff;color: #303030;font-weight: 600;}
.s1 .submit{position: relative;width: 100%;height: 100%;display: block;}
.s11 .sub-btn{border-radius: 19px; border: none;width: 670px;max-width: 100%; height: 81px;cursor: pointer; background: url(../img/s11_confirm.png)no-repeat right center /cover;}
.s11 .site_btn{border-radius: 0; border: none;width: 287px;height: 71px;cursor: pointer; }
.s11 .comfirm_btn_group{flex-direction: column; display: flex;gap: 21px;width: max-content;margin: 0 auto;max-width: 90%;}
.s11 .cs_check{cursor: pointer; padding-left: 15px;position: relative;font-family: 'Noto Sans KR', sans-serif;width: 21px;height: 21px;}
.s11 .cs_check::after{border: 1px solid #fff; content: '';top: 0;left: 0; position: absolute;width: 21px;height: 21px;}
.s11 .cs_check::before{z-index: 3; opacity: 0;transition: 0.4s ease; content: '';top: 0;left: 0; position: absolute;width: 21px;height: 21px;background: url(../img/s11_check.webp)no-repeat center /cover;}
.s11 .cs_check:checked::before{opacity: 1;}
.s11 .comfirm_btn_group2{display: flex;justify-content: center;gap: 16px;width: 100%;}
.s11{}
.s1{}

.b_767{display: none !important;}
@media screen and (max-width:767px) {
    .b_767{display: block !important;}
    .n_767{display: none !important;}
    .bn_con{max-width: 90%;margin: 0 auto;width: 400px;}

    .s1{padding: 150px 0 50px;}
    .s1 .s1_logo{max-width: 157px;left: 50%;transform: translateX(-50%);}
    .s1 img{}
    .s4 .s4_child{width: 245px;right: auto;left: 50%;transform: translateX(-50%);}
    .s4{padding: 60px 0 320px; }
    .s5{}
    .s5_2{margin: 30px 0;flex-direction: column;}
    .s5_2_list{width: 100%;border-radius: 16px;}
    .s5_2_list_tit{font-size: 14px;padding: 10px 0;}
    .s5_3{font-size: 18px;}
    .s6{}
    .s6 .bn_con{font-size: 18px;}
    .s7{padding: 60px 0; }
    .s8{display: none;}
    .s9{padding: 60px 0; }
    .s9 .you{max-width: 155px;}
    .s10{padding: 60px 0;}
    .s10 .bn_con{gap: 40px;}
    .s11{padding: 60px 0;}

    .s11 .s11_con_wrap{gap: 32px;width: 100%;}
    .s11 .s11_tit{font-size: 25px;max-width: 100%;}
    .s11 .s11_tit::after{width: 120px;height: 120px;bottom: calc(100% + 16px);top: auto; left: 50%;transform: translateX(-50%);}
    .s11 .s11_con{gap: 30px;background-color: transparent;padding-top: 145px;}
    .s11 .s11_input_tit{font-size: 15px;width: 42px;}
    .s11 .s11_input_list{padding: 18px;gap: 12px;}
    .s11 .s11_input_list input{font-size: 15px;width: calc(100% - 36px - 42px);}
    .s11 .s11_textarea textarea{padding: 18px;font-size: 15px;}
    .s11 .comfirm_btn_group{flex-direction: column;align-items: center;margin-top: 15px;}
    .s11 .comfirm_btn_group2{flex-direction: column;}
    .s11 .sub-btn{border-radius: 10px; width: 250px;aspect-ratio: 330/63; height: auto; background-image: url(../img/m_s11_confirm.png);}
    .s11 .site_btn{width: 250px;border-radius: 10px; aspect-ratio: 330/63; height: auto; max-width: 100%;}
    .s11 .comfirm_btn_group{gap: 16px;}
}

