/* 문자열설정 */
@charset "utf-8";

/* 폰트설정 */
@import url("../fonts/NotoSansCJKkr/NotoSansCJKkr.css");
@import url("../fonts/Inter/Inter.css");

/* CSS reset */
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%;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
address {font-style: normal;}
a {text-decoration: none; color: #333;}
img {border: 0; vertical-align: middle;}

html {font-size: 16px;}
body {font-family: 'NotoSansCJKkr';}
.hidden {display: block; position: absolute; left: -1000%; width: 1px; height: 1px; overflow: hidden; text-indent: -9999px; font-size: 0;}

.intro {width: 100%; height: 100vh; box-sizing: border-box; background: url(../images/img_background.png) center no-repeat; background-size: cover; overflow: hidden;}
.intro .inner {padding: 14.5vh 28% 6.3vh; height: 100vh; box-sizing: border-box; position: relative;}
/* .intro .inner {padding: 148px 25% 120px;} */
/* .intro .inner .logo {display: block; width: 226px; height: 23.5px; background: url(../images/logo.png) center no-repeat; background-size: contain; margin: 0 auto 13vh;} */
.intro .inner .logo {display: block; width: 226px; height: 23.5px; background: url(../images/logo.png) center no-repeat; background-size: contain; margin: 0 auto 18vh;} /*margin: 0 auto 4vh;*/

/*.intro .inner .national-flag { width: 231px; margin: 0 auto 4vh; text-align: center; padding: 0; }*/
/*.intro .inner .national-flag div {display: inline-flex; width: 50px; height: 35px; !* height: 400px; *! background-repeat: no-repeat; background-position: center center;  background-size: 50px 35px; }*/
/*!*.intro .inner .national-flag div img { width: 50px; height: 35px; }*!*/

/*.intro .inner .national-flag .korea {background-image: url(../images/korea.jpg); padding-right: 5px; }*/
/*.intro .inner .national-flag .usa {background-image: url(../images/usa.png); padding-right: 5px; }*/
/*.intro .inner .national-flag .china {background-image: url(../images/china.png); padding-right: 10px; }*/
/*.intro .inner .national-flag .japan {background-image: url(../images/japan.png); }*/

.intro .inner ul li {width: 47%; padding-top: calc(400/400*47%); /* height: 400px; */ background-repeat: no-repeat; background-position: center bottom; background-size: auto 100%; position: relative;}
.intro .inner ul { display: flex; justify-content: space-between;  margin-bottom: 15vh;}
.intro .inner ul .male {background-image: url(../images/img_bg_m.png);}
.intro .inner ul .female {background-image: url(../images/img_bg_f.png);}
.intro .inner ul li > a {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.intro .inner ul li .text_box {width: 100%; position: absolute; bottom: 33px; left: 50%; transform: translateX(-50%);}
.intro .inner ul li .text_box p {color: #fff; font-weight: 300; font-size: 0.875rem; line-height: 21px; letter-spacing: -0.04em; text-align: center; margin-bottom: 5.6vh;}
.intro .inner ul li .text_box p strong {display: block; font-weight: 900; font-size: 1.625rem; line-height: 38px; padding-bottom: 32px; position: relative;}
.intro .inner ul li .text_box p strong::after {content: ''; display: block; width: 16px; height: 2px; background: #fff;
    position: relative; bottom: -15px; left: 50%; transform: translateX(-50%);}
.intro .inner ul li .text_box .bnt_move {display: block; width: 70%; margin: 0 auto; text-align: center; font-size: 1rem; line-height: 24px; letter-spacing: -0.04em;
    color: #fff; padding: 10px; border: 1px solid #fff;}
.intro .inner ul li .text_box .bnt_move span {display: inline-block; width: 60.5px; height: 12.5px;
    background: url(../images/icon_arrow_right.png) center bottom no-repeat; background-size: contain; padding-left: 22.5px;}
.intro .inner .tel {font-weight: 400; font-size: 1rem; line-height: 24px; text-align: center; letter-spacing: -0.04em; color: #fff; position: absolute; bottom: 12.3vh; left: 50%; transform: translateX(-50%);}
.intro .inner .tel strong {display: block; font-family: 'Inter'; font-size: 1.875rem; line-height: 36px;}
/*.copy_info {color: #BFBFBF; font-size: 0.9rem; text-align: center; position: absolute; left: 50%; bottom: 6.3vh; transform: translateX(-50%);}*/
.intro .inner .national-url {font-weight: 400; font-size: 1.3rem; line-height: 24px; text-align: center; letter-spacing: -0.04em; color: #fff; position: absolute; bottom: 6.3vh; left: 50%; transform: translateX(-50%);}
.intro .inner .national-url a {color: #fff; text-decoration: underline; margin-left: 6px;}
.intro .inner .national-url a:first-child {color: #fff; text-decoration: underline; margin-left: 0;}
.intro .inner .national-url a:first-child::after {content:'|'; display: inline-block; clear: both; font-size: 0.75rem; vertical-align: middle;}
.intro .inner .national-url a::after {content:'|'; display: inline-block; clear: both; margin-left: 10px; font-size: 0.75rem; vertical-align: middle;}
.intro .inner .national-url a:last-child::after {content:''; display: inline-block; clear: both; }

/* 일반pc (해상도 1025px ~ 1280px)*/
@media screen and (max-width:1280px) {
    .intro .inner {padding: 14.5vh 20% 6.3vh;}
}

/* 태블릿 (해상도 769px ~ 1024px)*/
@media screen and (max-width:1024px) {
    .intro {height: auto;}
    .intro .inner {padding: 14.5vh 7% 6.3vh; overflow-y: scroll;}
    .intro .inner ul li {width: 48%;}
    .intro .inner .tel {position: relative; bottom: 0; margin-bottom: 20px;}
    /*.copy_info {position: relative; bottom: 0;}*/
    .intro .inner .national-url {position: relative; bottom: 0; /*margin-bottom: 30px;*/}
}


/* 모바일 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    body { min-width: 375px; }
    .intro .inner {padding: 50px 7% 40px;}
    .intro .inner .logo {margin: 0 auto 48px;} /* margin: 0 auto 50px; */
    .intro .inner ul {flex-direction: column; gap: 30px; margin-bottom: 45px;} /* margin-bottom: 42px; */
    .intro .inner ul li {width: 100%; height: auto; padding-top: calc(240/320*100%); background-size: cover;}
    .intro .inner ul .male {background-image: url(../images/img_bg_m_mo.png);}
    .intro .inner ul .female {background-image: url(../images/img_bg_f_mo.png);}
    .intro .inner ul li .text_box {width: 90%; bottom: 20px;}
    .intro .inner ul li .text_box p {font-weight: 500; text-align: left; margin-bottom: 21px;}
    .intro .inner ul li .text_box p strong {font-size: 1.563rem; line-height: 37px;}
    .intro .inner ul li .text_box p strong::after {width: 13px; height: 1.3px; left: 0; transform: translateX(0);}
    .intro .inner ul li .text_box a {width: 100%; box-sizing: border-box;}
    .intro .inner ul li .text_box a span {width: 40px; height: 10px; padding-left: 10px;}
    .intro .inner .tel {font-weight: 400; font-size: 1rem; line-height: 24px; text-align: center; letter-spacing: -0.04em; color: #fff; margin-bottom: 18px;}
    .intro .inner .tel strong {display: block; font-family: 'Inter'; font-size: 1.38rem; line-height: 36px;}
    /*.copy_info {font-weight: 400; font-size: 0.7rem; text-align: center; color: #BFBFBF; bottom: 0;}*/
    .intro .inner .national-url {font-weight: 400; font-size: 1.125rem; line-height: 24px; text-align: center; letter-spacing: -0.04em; color: #fff;}
    .intro .inner .national-url a {color: #fff;}
}