@charset "utf-8";
/* 문자열설정 */
/* 폰트설정 */
@import url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo.css");
@import url("../../fonts/Inter/Inter.css");

#content {margin-top: 100px; background: #fff;}
.purple {color: #8556E3;}

.line_map {padding: 36px 16.66% 40px;}
.line_map p {font-size: 16px; text-align: right;}
.line_map p span {color: #8556E3;}

.main_title {font-weight: 700; font-size: 46px; letter-spacing: -0.04em; margin-bottom: 30px;}
.main_title span {color: #8556E3;}
.sub_text {font-weight: 300; font-size: 18px; line-height: 26px; letter-spacing: -0.04em;}
.sub_text span {display: block;}

/* appointment */
input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {display: inline-block; width: 20px; height: 20px; border: 1px solid #C8C8C8; border-radius: 4px;
    vertical-align: middle; cursor: pointer; white-space: nowrap; position: relative;}
input[class="agree"] + label::after {content:''; width: 20px; height: 20px; background: rgba(0,0,0,0);}
input.agree:checked + label {border-color: #381187; background: #381187;}
input.agree:checked + label::after {content:''; width: 20px; height: 20px;
    background: url(../images/btn_wht_check_on.png) center no-repeat; background-size: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.appointment {width: 66%; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 999; padding: 19.5px 5%; box-sizing: border-box;
    background: #69488E; border: 1px solid rgba(46, 21, 102, 0.15); border-radius: 18px 18px 0 0; transition: all .2s;}
.appointment.off {display: none;}
.appointment .inner form {display: flex; align-items: center; justify-content: center; gap: 12px;}
.appointment .inner form .tab_ver {display: flex; align-items: center; justify-content: center; gap: 12px;}
.appointment .inner form h3 {font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.02em; color: #FFFFFF;}
.appointment .inner form ul {display: flex; align-items: center;}
.appointment .inner form ul.input_box {gap: 8px;}
.appointment .inner form ul.input_box input {background: #FFFFFF; border: 1px solid rgba(46, 21, 102, 0.15); border-radius: 8px; padding: 7px 12px; outline: none;
    font-weight: 500; font-size: 15px; line-height: 18px; color: #2E1566; vertical-align: middle; box-sizing: border-box;}
.appointment .inner form ul.input_box input::placeholder {font-family: 'Spoqa Han Sans Neo'; font-weight: 500; color: #8E8E8E;}
.appointment .inner form ul.input_box input.user_name {max-width: 164px;}
.appointment .inner form ul.input_box input.user_tel {max-width: 276px;}
.appointment .inner form ul.agree_box {gap: 12px;}
.appointment .inner form ul.agree_box li:first-child {min-width: 280px; position: relative;}
.appointment .inner form ul.agree_box label {font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #FFFFFF;}
.appointment .inner form ul.agree_box a {font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #FFFFFF;
    display: inline-block; white-space: nowrap;}
.appointment .inner form ul.agree_box button {background: #140537; border: 1px solid rgba(46, 21, 102, 0.15); border-radius: 100px; padding: 6px 12px;
    font-weight: 700; font-size: 15px; line-height: 22px; text-align: center; color: #FFFFFF; cursor: pointer;}
.appointment .inner form label span {display: inline-block; padding-left: 28px;}
.appointment .inner form li a {display: inline-block;}
.appointment .inner .close_btn {display: none;}

/* sub 02 */
.applicable .inner {padding: 0 16.66% 120px;position: relative;display: flex;align-items: center;justify-content: space-between; gap: 40px; box-sizing: border-box;}
.applicable .inner > div{width: 48%;}
.applicable .inner .text_box ul li span{width:24px;height: 24px;display: inline-block;background: url(/theme/daeat/images/icon_check.svg) no-repeat center;background-size:contain;margin-top: 6px;}
.applicable .inner .text_box ul li {margin-bottom: 5px;/* line-height: 38px; */display: flex;gap: 12px;align-items: flex-start;justify-content:flex-start;}
.applicable .inner .text_box ul li .sub_text{display: inline-block;font-size: 24px;flex:1;font-weight: 400;line-height: 1.5;}
.applicable .inner .img_box img{width: 100%; border-radius: 16px;}

.method .inner {padding: 120px 16.66%;}
.method_banner{position:relative;padding-top: calc(410/1280 * 100%);box-sizing: border-box;margin-top: 48px;background-size:100% 100%;background-repeat: no-repeat;}
.method_banner .text_box{color: #fff;  position: absolute; left: 50%; top: 50%; transform: translate(0, -50%);}
.method_banner .text_box .title{font-size: 32px; margin-bottom: 16px;}
.method_banner .text_box .sub_text{font-size: 18px; font-weight: 200; line-height: 1.5;color: #fff;}
.method_banner .text_box .sub_text b{font-weight: 300;}
.method_banner .text_box .sub_text .block{display: block;}
.method .notice{font-size: 18px; color: #29203B; letter-spacing: -0.02em;font-weight: 300; margin-top: 48px;}
.bookmark-wrap{position: absolute;top: 0;left: 2%;filter: drop-shadow(0 4px 4px rgba(50, 50, 0, 0.3));}
.bookmark {display: block;width: 65px;padding: 16px 0 40px;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 75%, 0% 100%);text-align: center;color: #fff;box-sizing: border-box;font-size: 14px;z-index: 1;}

/* 간편상담신청 css 깨짐 현상으로 인한 중간 미디어쿼리 추가 */
@media screen and (max-width: 1680px) {
    /* appointment */
    .appointment {width: 90%;}
    .appointment .inner form {gap: 32px; justify-content: space-between;}
    .appointment .inner form .tab_ver {width: 80%; flex-direction: column;}
    .appointment .inner form h3 {width: 20%; font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.02em; color: #FFFFFF;}
    .appointment .inner form ul {width: 100%; display: flex; align-items: center;}
    .appointment .inner form ul.input_box li:nth-child(1) {width: 40%;}
    .appointment .inner form ul.input_box li:nth-child(1) input.user_name {width: 100%; max-width: 100%; box-sizing: border-box;}
    .appointment .inner form ul.input_box li:nth-child(2) {width: 60%;}
    .appointment .inner form ul.input_box li:nth-child(2) input.user_tel {width: 100%; max-width: 100%; box-sizing: border-box;}
    .appointment .inner form ul.input_box li input {box-sizing: border-box;}
    .appointment .inner form ul.input_box input.user_name {width: 100%;}
    .appointment .inner form ul.input_box input.user_tel {width: 100%;}
    .appointment .inner form ul.agree_box {gap: 8px;}
    .appointment .inner form ul.agree_box li {width: 50%;}
    .appointment .inner form ul.agree_box button {display: block; width: 100%;}
}

/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .line_map {padding: 56px 12% 40px;}

    /* sub 02 */
    .applicable .inner {padding: 0 12% 120px;}
    .method .inner {padding: 120px 12%;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .line_map {padding: 56px 8% 40px;}

    /* sub 02 */
    .applicable .inner {padding: 0 8% 120px;}
    .method .inner {padding: 120px 8%;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .line_map {padding: 56px 6% 40px;}

    /* sub 02 */
    .applicable .inner {padding: 0 6% 60px;}

    .method .inner {padding: 120px 6%;}
    .method_banner{padding-top:calc(268/680 *100%);}
    .method_banner .text_box .sub_text .block{display: inline-block;}
    .method_banner .text_box .sub_text i{display: block;}
    .method_banner .text_box .title{font-size: 24px;}
    .method_banner .text_box .sub_text{font-size: 14px;}
    .bookmark-wrap{left: 3%; }
    .bookmark {width: 60px;font-size: 12px;padding: 15px 0 34px;}
}

/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    .line_map {padding: 32px 5% 46px;}
    .line_map p {font-size: 11px;}

    /* sub 02 */
    .applicable .inner {padding: 0 5% 80px;gap: 24px;}
    .applicable .inner .text_box .main_title .block {display: inline;}
    .applicable .inner .text_box .main_title i {display: block;}
    .applicable .inner .text_box ul li span{width:16px;height: 16px;margin-top: 3px;}
    .applicable .inner .text_box ul li {margin-bottom: 5px;align-items: flex-start;line-height: 20px;gap: 4px;}
    .applicable .inner .text_box ul li i{display: block;}
    .applicable .inner .text_box ul li .sub_text{font-size: 14px;/* line-height: 1.4; */}

    .method .inner {padding: 80px 5%;}
    .method .notice{font-size: 14px;margin-top: 16px;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    #wrap { min-width: 375px; }
    /* content */
    #content {margin-top: 106px;}
    .line_map {display: none;}

    /* appointment */
    input[type="checkbox"] + label {width: 14px; height: 14px;}
    input[class="agree"] + label::after {width: 14px; height: 14px;}
    input.agree:checked + label {border-color: #381187; background: #381187;}
    input.agree:checked + label::after {width: 14px; height: 14px;}

    .appointment {width: 100%; padding: 20px 5% 40px; bottom: 69px; display: none;}
    .appointment.on {display: block;}
    .appointment input[type="checkbox"] + label {vertical-align: bottom;}
    .appointment .inner form {flex-direction: column; align-items: flex-start; gap: 16px;}
    .appointment .inner form .tab_ver {width: 100%; align-items: flex-start; gap: 8px; flex-direction: row;}
    .appointment .inner form h3 {width: 100%; font-size: 18px; line-height: 26px; display: none;}
    .appointment .inner form ul {flex-direction: column;}
    .appointment .inner form ul.input_box {width: 70%;}
    .appointment .inner form ul.input_box li:nth-child(1) {width: 100%;}
    .appointment .inner form ul.input_box li:nth-child(2) {width: 100%;}
    .appointment .inner form ul.input_box li input {border-radius: 4px;}
    .appointment .inner form ul.agree_box {width: 30%; flex-direction: column-reverse; gap: 4px;}
    .appointment .inner form ul.agree_box li {width: 100%;}
    .appointment .inner form ul.agree_box li:nth-child(1) {position: absolute; bottom: 16px; left: 5%;}
    .appointment .inner form ul.agree_box label {font-weight: 400; font-size: 12px; line-height: 15px;}
    .appointment .inner form ul.agree_box label span {padding-left: 18px;}
    .appointment .inner form ul.agree_box a {font-size: 12px; line-height: 15px; vertical-align: initial;}
    .appointment .inner form ul.agree_box button {height: 77px; font-size: 14px; line-height: 20px; border: 1px solid rgba(46, 21, 102, 0.15);
        border-radius: 4px; padding: 6px; letter-spacing: -0.02em;}
    .appointment .inner .close_btn {display: block; color: #fff; font-size: 12px; line-height: 15px; position: absolute; bottom: 16px; right: 5%;}
    .appointment .inner .close_btn::before {content: ''; display: inline-block; width: 14px; height: 14px;
        background: url(../images/btn_close_wht.png) center no-repeat; background-size: contain; vertical-align: bottom; padding-right: 4px;}

    /* header */
    #headerAreaMobile .sub_page .header_inner .header_inner_top {padding: 18px 5%; display: flex;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .btn_back {display: inline-block; text-indent: -999px; width: 24px; height: 24px;
        background: url(../images/btn_back_mo.png) center no-repeat; background-size: contain;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here {font-weight: 700; font-size: 16px; position: relative; color: #29203B;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here::before {content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: text-top;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here::after {content: ''; display: inline-block; width: 24px; height: 24px; transform: rotate(0);
        position: relative; top: 0; right: 0; background: url(../images/arrow_bk_down_mo.png) center no-repeat; background-size: contain; vertical-align: text-top; transition: all .2s;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.on::after {transform: rotate(540deg);}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.non_arrow {pointer-events: none; cursor: default;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.non_arrow::after {display: none;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.non_arrow::before {display: none;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu {position: absolute; top: 48px; left: 50%; transform: translateX(-50%); z-index: 100;
        width: 70%; border: 1px solid #D9D9D9; box-shadow: 0px 4px 8px rgba(116, 53, 255, 0.15); border-radius: 8px; display: none;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu > li a {display: block; width: 100%; box-sizing: border-box; padding: 18px 5%;
        font-weight: 500; font-size: 14px; letter-spacing: -0.01em; text-align: center; color: rgba(46, 21, 102, 0.5);
        background: #FFFFFF; box-shadow: inset 0px -1px 0px rgba(46, 21, 102, 0.15);}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu > li a.on {color:#7435FF;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu > li:first-child a {border-radius: 8px 8px 0 0;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu > li:last-child a {border-radius: 0 0 8px 8px;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .all_menu {display: inline-block; width: 24px; height: 24px;
        background: url(../images/menu_mo_sub.png) right center no-repeat; background-size: contain;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .all_menu span {font-size: 0; color: #FFFFFF; text-indent: -9999px;}

    #headerAreaMobile .header_inner .header_inner_bottom {padding: 0px 5%; justify-content: normal; align-items: center; border-top: 1px solid rgba(46, 21, 102, 0.1);}
    #headerAreaMobile .header_inner .header_inner_bottom nav {overflow: hidden; position: relative; height: 46px;}
    #headerAreaMobile .header_inner .header_inner_bottom nav h3 {font-weight: 500; font-size: 15px; line-height: 46px; text-align: center; color: #2A1D39;}

    /* sub 02 */
    .applicable .inner {flex-direction: column;gap: 1em;padding: 0 5% 60px;}
    .applicable .inner::after {width: 80%; padding-top: calc(302/392*100%); right: -10%;}
    .applicable .inner .text_box {width: 100%; padding: 56px 0 0;}
    .applicable .inner .img_box{width: 100%;}
    .applicable .inner .img_box img{border-radius:8px;}
    .applicable .inner .text_box .main_title i {display: inline;}
    .applicable .inner .text_box .main_title b {display: block;}
    .applicable .inner .sub_text .block {display: inline;}
    .applicable .inner .sub_text i {display: block;}


    .method .inner {padding: 60px 5%;}
    .method .main_title i{display: block;}
    .method .sub_text i{display: block;}
    .method_banner{padding-top: calc(400/345 *100%);margin-top: 16px;}
    .method_banner .text_box{left:5%;top: 10%; transform: translate(0,0);}
    .bookmark-wrap{ left:auto;right: 5%;}
    .bookmark {width: 40px;font-size: 9px;padding: 10px 0 22px;}
}