* {margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-r); font-weight: normal; font-size: 16px; color: #232323;}
ul, li {list-style: none;}
a {text-decoration: none; color: #232323;}
p, span {color: #232323;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0; font-size: 100%;vertical-align: baseline; font-variant-numeric: tabular-nums;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {	content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
::selection {background-color: #dbf0ff; color: #000;}

:root {
    --font-b: 'Pretendard-Bold';
    --font-sb: 'Pretendard-SemiBold';
    --font-m: 'Pretendard-Medium';
    --font-r: 'Pretendard-Regular';
    --font-l: 'Pretendard-Light';
    --font-ps: 'Paperlogy-SemiBold';
    --font-pb: 'Paperlogy-Bold';
    --m-color: #1d3967;
    --s-color: #f0f5fd;
    --g-color: #636363;
    --l-color: #e5e5e5;
}

button {display: inline-block; border: none; cursor: pointer; background-color: var(--m-color); color: #fff; border-radius: 4px; font-size: 13px;}
.common_btn {background-color: var(--m-color); color: #fff; border-radius: 4px; font-size: 13px; display: inline-block; text-align: center; padding: 10px 40px;}
select {border: 1px solid #e0e0e0; padding: 0 35px 0 15px; display: inline-block; height: 35px; outline: none; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url(/Content/img/select_arrow.png) no-repeat right 15px top 50% / 7px; font-size: 13px; color: #737373;}
select:focus {border: 1px solid var(--m-color);}

input {appearance: none; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 4px; padding: 0 15px; outline: none; font-size: 13px; border: 1px solid #e0e0e0; color: #737373; height: 35px;}
input::-ms-clear, input::-ms-reveal {display: none; width: 0; height: 0;}
input::-webkit-search-decoration, input::-webkit-search-cancel-button,
input::-webkit-search-results-button, input::-webkit-search-results-decoration {display: none;}

input[type="radio"] {accent-color: var(--m-color); appearance: auto; -webkit-appearance: auto; height: auto; vertical-align: middle; margin-right: 5px;}

textarea {resize: none; border-radius: 4px; padding: 14px; border: 1px solid #e9e9e9; outline: none; font-size: 16px;}

label {cursor: pointer; font-size: 14px; display: inline-block;}


/* page */
.page_btn {text-align: center; margin-top: 50px;}
.page_btn ul {display: flex; justify-content: center;}
.page_btn ul li {display: flex;}
.page_btn ul li a { width: 25px; height: 25px; line-height: 25px; color: #8b95a1; margin: 0 2px; display: inline-block; font-size: 12px; border: 1px solid var(--l-color);}
.page_btn ul li.num a {background-color: #fff;}
.page_btn ul li.num a.on {background-color: var(--m-color); color: #fff; border: 1px solid var(--m-color);}
.page_btn ul li a:hover {background-color: var(--s-color); transition: 0.3s;}

.contents {margin-top: 100px;}
.contents > .inner {margin: 100px auto;}
.inner {max-width: 1000px; margin: 0 auto;}

/* 서브페이지 공통 */
.contents .con_top img {width: 100%;}
.contents .con_top .con_txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.contents .con_top .con_txt span {color: #fff; font-size: 18px; display: inline-block; margin-bottom: 20px;}
.contents .con_top .con_txt h2 {color: #fff; font-size: 50px; font-family: var(--font-b);}

.sub_wrap .con_top {padding-bottom: 30%;}
.sub_wrap h3 {font-size: 35px; margin-bottom: 50px;}
.sub_wrap .sub_box {text-align: center; padding: 100px 0;}
.sub_wrap .sub_title {text-align: center; font-size: 26px; font-family: var(--font-sb); margin-bottom: 30px; display: inline-block; width: 100%; line-height: 34px;}
.sub_wrap .sub_txt {color: var(--g-color); font-size: 15px; line-height: 20px;}

/* 텝메뉴 공통 */
.sub_wrap .sub_tap {margin-top: -30px; position: relative; z-index: 1;}
.sub_wrap .sub_tap .inner {background-color: #fff;}
.sub_wrap .sub_tap ul {display: flex;}
.sub_wrap .sub_tap ul li {width: 100%; font-size: 15px; border: 1px solid var(--l-color); margin-right: -1px;}
/* .sub_wrap .sub_tap ul li:hover {background-color: #b6bfce; transition: .3s; border: 1px solid #b6bfce;}
.sub_wrap .sub_tap ul li:hover a { color: #fff; transition: .3s;} */
.sub_wrap .sub_tap ul li.on {background-color: var(--m-color); color: #fff; border: 1px solid var(--m-color);}
.sub_wrap .sub_tap ul li.on a {color: #fff;}
.sub_wrap .sub_tap ul li a {width: 100%; display: inline-block; text-align: center; height: 60px; line-height: 60px;}


/* 토글 리스트 */
.toggle_wrap {text-align: left; margin-bottom: 20px; display: inline-block; width: 100%;}
.toggle_wrap:nth-of-type(2) {margin-top: 60px;}
.toggle_wrap .toggle_list {border-top: 2px solid var(--m-color); border-bottom: 1px solid var(--m-color);}
.toggle_wrap .toggle_list .toggle_item {border-bottom: 1px solid var(--l-color);}
.toggle_wrap .toggle_list .toggle_item.active {background-color: var(--s-color);}
.toggle_wrap .toggle_list .toggle_item .toggle_tit {display: flex; cursor: pointer; padding: 20px; align-items: center; justify-content: space-between;}
.toggle_wrap .toggle_list .toggle_item.active .faq_q {border-bottom: none;}
.toggle_wrap .toggle_list .toggle_item .toggle_tit span {font-family: var(--font-sb); color: var(--m-color); width: 180px; text-align: left; font-size: 15px;}
.toggle_wrap .toggle_list .toggle_item .toggle_tit p {width: calc(100% - 195px); text-align: left; font-size: 15px;}
.toggle_wrap .toggle_list .toggle_item .toggle_tit i {transition: transform 0.5s ease; width: 15px; text-align: right; font-size: 15px;}
.toggle_wrap .toggle_list .toggle_item.active .xi-angle-down {transform: rotate(180deg);}

.toggle_wrap .toggle_list .toggle_item .toggle_txt {display: none; padding: 20px 20px 20px 200px; }
.toggle_wrap .toggle_list .toggle_item .toggle_txt p {color: var(--g-color); font-size: 15px; line-height: 22px;}
.toggle_wrap .toggle_list .toggle_item .toggle_txt span {font-family: var(--font-sb); display: inline-block; width: 100%; margin: 20px 0 5px;}
.toggle_wrap .toggle_list .toggle_item .toggle_txt .xi-full-moon {font-size: 4px; vertical-align: middle; margin-right: 5px;}
.toggle_wrap .toggle_list .toggle_item .toggle_txt .toggle_pl {padding-left: 16px;}


/* map */
.contact_con {display: flex; justify-content: space-between;}
.contact_con .contact_txt {text-align: left; width: 35%; margin-right: 5%;} 
.contact_con .contact_txt > li:nth-of-type(1) {margin-bottom: 70px;}
.contact_con .contact_txt p {font-family: var(--font-pb); color: var(--m-color); font-size: 13px; margin-bottom: 40px;} 
.contact_con .contact_txt span {font-size: 15px; color: var(--g-color); line-height: 20px;} 
.contact_con .contact_txt b {color: var(--g-color); font-family: var(--font-sb); width: 120px; display: inline-block;}
.contact_con .contact_txt .contact_info span {margin-bottom: 15px; display: inline-block;}

.contact_con .contact_map {width: 60%; border: 1px solid #ededed; height: 430px;}


/* swiper */
.contents .arrow_swiper {position: relative;}
.contents .swiper-button-prev {background: url(/Content/img/left_btn.svg) no-repeat; background-size: contain; background-position: center; width: 30px; height: 60px; left: 7%; right: auto;}
.contents .swiper-button-next {background: url(/Content/img/right_btn.svg) no-repeat; background-size: contain; background-position: center; width: 30px; height: 60px; right: 7%; left: auto;}
.contents .swiper-button-prev::after {display: none;}
.contents .swiper-button-next::after {display: none;}

.contents .swiper-button-prev.swiper_out_btn {left: -70px; height: 45px;}
.contents .swiper-button-next.swiper_out_btn {right: -70px; height: 45px;}

.contents .swiper-pagination {left: 50%; transform: translateX(-50%);}
.contents .swiper-pagination-bullet {opacity: 1; background-color: #dedede; margin: 0 3px;}
.contents .swiper-pagination-bullet-active {background-color: var(--m-color);}






/* 태블릿 */
@media screen and (max-width: 1200px) {
    .contents {margin-top: 80px;}
    .contents .inner {width: 100%; padding: 0 20px;}
    
    .sub_wrap .con_top {padding-bottom: 40%;}
    .sub_wrap .sub_tap .inner {padding: 0;}
    .sub_wrap .sub_tap ul li {margin-left: -1px; margin-right: inherit;}
    .sub_wrap .sub_title {word-break: keep-all;}

    .contents .con_top .con_txt {width: 100%;}
    .contents .con_top .con_txt h2 {font-size: 40px;}

    .contact_con .contact_txt {margin-right: 3%; width: 38%;}
    .contact_con .contact_txt b {width: 100%;}

}


/* 모바일 */
@media screen and (max-width:767px){
    .contents {margin-top: 60px;}
    .sub_wrap .con_top {padding-bottom: 65%;}
    .contents .con_top .con_txt span {margin-bottom: 10px;}
    .sub_wrap h3 {font-size: 30px;}
    .sub_wrap .sub_tap ul li a {height: 55px; line-height: 55px; font-size: 14px;}

    .sub_wrap .sub_title {font-size: 22px; line-height: 30px;}

    .contents .con_top .con_txt h2 {font-size: 34px;}


    .toggle_wrap .toggle_list .toggle_item .toggle_tit {flex-wrap: wrap; position: relative;}
    .toggle_wrap .toggle_list .toggle_item .toggle_tit span {width: 100%; margin-bottom: 10px;}
    .toggle_wrap .toggle_list .toggle_item .toggle_tit p {width: calc(100% - 15px); line-height: 20px; padding-right: 15px;}
    .toggle_wrap .toggle_list .toggle_item .toggle_txt {padding: 20px;}

    .toggle_wrap .toggle_list .toggle_item .toggle_tit i {position: absolute; top: 50%; transform: translateY(-50%); right: 20px;}

    .contact_con {display: inline-block; width: 100%;}
    .contact_con .contact_txt {width: 100%; margin-right: 0;}

    .contact_con .contact_txt > li:nth-of-type(1) {margin-bottom: 50px;}
    .contact_con .contact_txt p {margin-bottom: 20px;}
    .contact_con .contact_txt span {font-size: 14px; line-height: 18px;}
    .contact_con .contact_txt .contact_info span {width: 100%;}

    .contact_con .contact_map {width: 100%; height: 335px;}
}