
@charset "utf-8";
html, body, div, span, h1, h2, h3, h4, h5, h6, address, img, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, header, footer, nav, section, p {margin:0;padding:0;border:0;font-family: "SUIT", sans-serif;}
body {margin:0;padding:0;font-size:0.75em;background:#e7e7e7}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-size:1em}
input[type="submit"]{cursor:pointer}
button {cursor:pointer}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
input[type=text],input[type=password], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}
input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus {
-webkit-box-shadow:  0 0 5px #9ed4ff;
-moz-box-shadow:  0 0 5px #9ed4ff;
box-shadow: 0 0 5px #9ed4ff;
border: 1px solid #558ab7 !important;
}
.placeholdersjs { color: #aaa !important; }

/* 레이아웃 크기 지정 */
#hd, #wrapper, #ft{min-width:1200px}
#wrapper { min-width: 100%; }
#ft{display: block;}
#hd_pop,
#hd_wrapper,
#tnb ul,
#gnb .gnb_wrap,
#container_wr,
#ft_wr{ width: 1200px;max-width: 1200px;}


/*인트로페이지*/
.intro{height: 100%;background-size: cover;background-color: #1a4b90;display: flex;flex-direction: column;overflow: auto;overflow-x:hidden;}
.intro_conbox{width: 100%;max-width: 1200px;margin:0 auto;position: relative;text-align: center;flex-grow: 1;z-index: 2;}
.intro_conbox > h1{display: block;margin:10rem auto 1.6rem;width: 15.3125rem;}
.intro_conbox > h1 > a > img { max-width:100%; }
.intro_conbox > strong{display: block; font-size: 1.7rem; text-align: center;color:#ffffff;position: relative;font-weight: normal;}
.intro_conbox > strong p:nth-child(2){display: block;font-size: 1.8rem;text-align: center;color:#ffffff;position: relative;font-weight: bold;}
.divider{position: absolute;top:-0.8vh;background-color: #00347d;width: 100%;height: 0.8vh;}
.intro .iconwrap {margin-top: 4rem;  margin-bottom: 4.75rem;}
.intro .iconwrap ul {display: flex; width: calc(100% + 1rem); margin:  -.5rem; flex-wrap: wrap;justify-content: center;}
.intro .iconwrap ul li {padding:.5rem; width: 33.333%; min-height: 21rem;}
.intro .iconwrap ul li a {display: flex; flex-direction: column; border-radius: 1rem; height: 100%; text-align: center; padding: 2rem 1rem; position: relative; justify-content: center;align-items: center; }
.intro .iconwrap ul li a.credit {background: #f1ebbd ;}
.intro .iconwrap ul li a.nonface {background:#bdddf4 ;}
.intro .iconwrap ul li a.plus {background: #c6eff4;}
.intro .iconwrap ul li a.sj {background: #dafeec;}
.intro .iconwrap ul li a .icon { margin-bottom:2rem; }
.intro .iconwrap ul li a .icon img {width: 100%;}
.intro .iconwrap ul li a strong {display: block; font-size: 1.2rem; color: #393939; line-height: 1.2;word-break: keep-all; height: 3.9rem;margin-bottom:.7rem; }
.intro .iconwrap ul li a .icon_btn {padding:.5rem 1rem; background: #fff; font-size: 1rem;border-radius: 2rem; display: flex; align-items: center ; justify-content: center; width: 10rem; margin:0 auto;font-weight:500;gap:.5rem; }
.intro .iconwrap ul li a .icon_btn em {width: 1.5rem; margin-left: .5rem;}
.intro .iconwrap ul li a .icon_btn em img { width:100%; }
.intro .iconwrap ul li a.credit .icon {width: 4.75rem;}
.intro .iconwrap ul li a.nonface .icon {width:5.75rem ;}
.intro .iconwrap ul li a.plus .icon {width: 7rem;}
.intro .iconwrap ul li a.sj .icon {width: 7.35rem;}
.intro_footer br { display: none; }
.intro_footer{width: 100%;bottom: 0;background-color: #fff !important;right: 0;text-align: center;display: flex;align-items: center;justify-content: center;font-size: 1rem;line-height: 1.7;
color: #939393;background: url(/html/images/intro/s2_intro_footerpat.png) center center no-repeat;background-size: auto 100%;word-break: keep-all;flex-shrink: 0;position: relative;padding: 2.5rem 1rem 6.25rem 1rem;flex-direction: column;}
.intro_footer p {word-break: keep-all;}
.intro_footer p span {display: inline-block ; padding-left: 2rem;}
@media(max-width:2000px){
    .intro_footer::before {width: 32.5rem;height: 35rem;}
    .intro_footer::after {width: 19.18rem;height: 36.25rem; }
}
@media(max-width:1827px){
    .intro_conbox {padding: 0 1rem;}
    .intro_footer::before,
    .intro_footer::after {display: none;}
}
@media(max-width:1024px){
    .intro_conbox > strong { font-size:1.5rem; }
    .intro_conbox > strong p:nth-child(2) { font-size:1.7rem; }
}
@media (max-width:767px){
    .intro .iconwrap ul li { width:100%;order:2; }
    .intro .iconwrap ul li:nth-child(3) { order:1; }
}
@media(max-width:640px){
    .intro_conbox { padding:4rem 1rem; }
    .intro_conbox > h1 { margin-top:0; width:13rem; }
    .intro_conbox > strong { font-size:1.3rem; }
    .intro_conbox > strong p:nth-child(2) { font-size:1.5rem; } 
    .intro_footer p br { display: block; }
    .intro_footer p span {display: block; padding-left: 0;}
    .intro .iconwrap { margin-bottom:0; margin-top:2rem; } 
    .intro .iconwrap ul li a .icon { margin-bottom:1rem; }
    .intro .iconwrap ul li a strong { font-size: 1.3rem;height:3.2rem; }
    .intro .iconwrap ul li a.credit .icon {width: 3.9rem;}
    .intro .iconwrap ul li a.nonface .icon {width:5.1rem ;}
    .intro .iconwrap ul li a.plus .icon {width: 5rem;}
    .intro .iconwrap ul li a.sj .icon {width: 7.1rem;}
}
@media(max-width:487px){
    .intro_conbox > h1 { width:11rem; }
    .intro .iconwrap ul li {width: 100%; min-height: 16rem;padding:.25rem; }
    .intro .iconwrap ul li a strong {font-size: 1rem;height: auto;}
    .intro .iconwrap ul li a {padding: 1rem;}
    .intro_conbox > strong { font-size:1rem; }
    .intro_conbox > strong p:nth-child(2) { font-size:1.2rem; }
    .intro .iconwrap ul li a .icon_btn { font-size:.8rem; }
    .intro .iconwrap ul li a .icon_btn em { width:1.2rem; }
}

