@charset "utf-8";

/* font */
/*'InkLipquid' 'Black Han Sans' 'Gothic A1' 'Noto Sans KR', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {
    font-family: 'InkLipquid';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Tenada';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {font-family: 'agothic12';src: url('fonts/agothic12.otf') format('opentype');}
@font-face {font-family: 'agothic13';src: url('fonts/agothic13.otf') format('opentype');}
@font-face {font-family: 'agothic14';src: url('fonts/agothic14.otf') format('opentype');}
@font-face {font-family: 'agothic15';src: url('fonts/agothic15.otf') format('opentype');}
@font-face {font-family: 'agothic16';src: url('fonts/agothic16.otf') format('opentype');}
@font-face {font-family: 'agothic17';src: url('fonts/agothic17.otf') format('opentype');}
@font-face {font-family: 'agothic18';src: url('fonts/agothic18.otf') format('opentype');}


/* reset */
* {margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
li {list-style: none;}
a {color: inherit; text-decoration: none;}
img {max-width: 100%; vertical-align: top;}


/* common */
.wrap {width: 100vw; margin: 0 auto; font-family: 'Gothic A1';}
.inner{text-align: center;}
header,main,section,footer{width: 100vw;}
.flex{display: flex; flex-wrap: wrap; justify-content: center; align-content: center;}

/*txt*/
.txt{font-size: 1em; text-align: center; line-height: 1; letter-spacing: -3px;} /* 16px */
.tit1{font-family: 'rixdongnimgothic-pro'; font-size:3.75em; margin: 0.3em 0 0.5em 0;} /*60px 3.75rem*/
.tit2{font-family: 'agothic16';font-size:2.25em;}/*35px 2.25rem; 34px 2.125rem*/
.tit3{font-size:2.5em;}/*40px*/ 
.tit4{font-family: 'rixdongnimgothic-pro'; font-size:2.5em; margin: 14px 0;}/*40px*/ 
.tit5{font-family: 'agothic12'; font-size:1.25em; color: #5e5e5e;}/*20px 1.25rem*/
.tit6{font-family: 'agothic14';font-size:1.25em; color: #8c8c8c;}/*20px 1.25rem*/
.tit7{font-family: 'agothic18';}/*20px 1.25rem*/

.titr1{font-size:3rem;}/*48px*/

h1,h2,h3,h4,h5,h6{font-weight: 100;}
i{font-style: normal;}
.ink{font-family: 'InkLipquid';}



/*quick*/
.quick{position: fixed; bottom: 5%; right: 5%; z-index: 9999;}
.budy {animation:up ease-in 1;animation-fill-mode:forwards;animation-duration:3s; animation-delay: 0s;position: relative; z-index: -1; margin: 0 -14px;}
.budy img{position: relative; left: 50%; transform: translateX(-50%); margin: -60px 0; z-index: -1;}
.qbox{height: 100%; text-align: center; border-radius:20px 20px 20px 20px; box-shadow: rgba(255, 255, 255, 0.12) 0px 0px 2px 0px inset, rgba(0, 0, 0, 0.05) 0px 0px 2px 1px, rgba(0, 0, 0, 0.3) 0px 6px 40px;}
.q1{background: #e70067; color: #fff; width: 100px; border-radius:20px 20px 0 0; padding: 10px 0;}
.q1 a{display: block; color: #fff; padding: 10px 0;}
.qcut{height: 60px; line-height: 60px; width: 100px; background: #fff; border-bottom: 1px dashed #aeaeae;}
.qcut:last-child{border-bottom: none; border-radius: 0 0 20px 20px;}
.qtxt1{font-family: 'Gothic A1'; font-size:1em; font-weight: 700;}
.qtxt2{font-size:0.85em;}


/*long banner*/
.longbn{height: 100px; line-height: 100px; width: 100%; text-align: center; font-size: 1em; font-family: 'rixdongnimgothic-pro';}
.bntxt{display: inline-block; font-size:2.5em; color: #fff;} /*40px*/
.blink{display: inline-block; width: 40px; height: 40px; background: yellow; border-radius: 50%; margin: 0 0-10px 10px; opacity:0; animation:fadeIn2 ease-in 1;animation-fill-mode:forwards;animation-duration:1.3s; animation-iteration-count: infinite;}
.blink.delayed{display: inline-block; width: 60px; height: 60px; background: #fff;border-radius: 50%; margin: 0 0-20px -54px; animation:fadeIn1 ease-in 1;animation-fill-mode:forwards;animation-duration:1.3s; animation-iteration-count: infinite; animation-delay: 1.3s;}
.hpoint{display: inline-block; margin: 50px 0 0 -40px; position: relative; z-index: 2;}


.bank>.longbn{background:purple;}

/*purplebox*/
.ppbox{width: 70vw; height: 80px; line-height: 80px; border: 3px solid purple; background: #fff; text-align: center; margin: 0 auto; border-radius: 20px; margin-bottom: 40px; box-shadow: 2px 2px 20px purple; }


header {height: 5vh;}
header h1{background: url(../img/logo.svg) no-repeat; height: 3rem; text-indent: -9999px; margin:2rem;}

main .con1{height: 100%;}
.best{margin: 0 0 40px 0;}
.line1{background: url(../img/a-2.png) no-repeat top center;}
main .con1>.txt>p:last-child{margin-top: 5px;}
main .con1 figure{background: url(../img/a-3.png) no-repeat bottom center;background-size: contain; margin: 40px 0 0 0;}

main .con2 {height: 600px; position: relative; top:-5px;}
main .con2 .region{width: 100%; background: #00257a; height: 100px;}
main .con2 .region img{margin: 0 auto; position: absolute; top:0; left: 50%; transform: translateX(-50%); z-index: 1;}
main .con2 .img_bg{background: url(../img/b-bg.jpg); background-attachment: fixed; background-size: cover;}
main .con2 .img_bg::before{background: #008dff; opacity: 0.8;}


/* bg fixed*/
.img_bg,.img_bg::before{width: 100%; height: 100%;}
.img_bg::before{content: ''; position: absolute; top:0%; left: 0;z-index: -1;}
.img_bg{margin: 0 auto;  position: relative; top:0%; left: 0;z-index: 0;}
.img_bg>img{position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);}

main aside.reas12{margin-top: 95px;}
main .reas12>.longbn{background:#e70067;}

main article{margin: 50px 0 80px 0; letter-spacing: -3px;}
.part{margin: 0px 0 0px 0;}
main .departs .part ul{text-align: left;}
main .departs .part{gap:2%;}
main .departs .part ul li {
  font-family: 'agothic14';
  font-size: 1.88em;
  width: 315px;
  height: 57px;
  border-radius: 50px;
  margin-bottom: 14px;
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;
}
main .departs .part ul li:nth-child(1n){background:#006cff;}
main .departs .part ul li:nth-child(2n){background:#0035e3;}

main .con3{letter-spacing: -3px; }
main .ent .img_bg{background: url(../img/d-bg.jpg);background-attachment: fixed; background-size: cover;padding-top:50px;}
main .ent .img_bg::before{background: #e5f7ff; opacity: 0.9; top:0;}
.change{letter-spacing: -2px;}
.ent1{margin: 50px 0;}
.mterm1{display: none;}
.term1{ gap:10%;}
.term1>div>p{width: 445px; line-height: 98px; color: #fff;}
.term1 div:first-child p{background: url(../img/d-3.png) no-repeat center;}
.term1 div:last-child p{background: url(../img/d-4.png) no-repeat center;}
.term2 p{color: #000; }
.term1.flex{margin: 0 0 -50px 0;}
.term2.flex{gap:10%; margin: -100px 0 0 0;}

.ent1 a{display: block; width: 470px; height: 120px; line-height: 120px; font-weight: 700;}
.ent1 img{width: 128px; height: 166px; margin: 0px 0 50px 30px;}
.bo{background: url(../img/d-5.png) no-repeat center center; color: #fff; width: 50%;}
.ka{background: url(../img/d-6.png) no-repeat center center; color: #240103; width: 50%;}
.ent2{width: 100%; background: #002ab2; height: 100px; margin-top: 160px;}
.ent2 img{margin: 0 auto; position: absolute; bottom:0; left: 50%; transform: translateX(-50%); z-index: 1;}
.starline{background: url(../img/starline.png) no-repeat; display: inline-block; padding: 0 0 0 16px;}


main .con4{margin-top: 60px;}
.con4{font-size:1em;}
.bank .txt figure{margin-top: -70px;}
.line2{background: url(../img/line2.png) no-repeat top center;}
.bank .img_bg{background: linear-gradient(to top, #e4d5fc, #fff); padding-bottom: 60px;}

main aside.study{}
main .study>.longbn{background:#7e00ac;}

.con5{color: #fff;}
.story {background: #00005c; padding: 50px 0;}
.story>.txt>p{}



/*{font-size: 60px; background: linear-gradient(to right top, #861657, #ffa69e); color: transparent; -webkit-background-clip: text;}*/


footer{background: #0d1b2b; color: #fff; letter-spacing: -1px;}
footer .inner{padding: 32px 0; justify-content: space-evenly;}
footer .inner div{text-align: left; padding-left: 9%;}
.bduad{margin-bottom: 48px; line-height: 1.8; width: 40%; }
.bduad address{font-style: normal;}
.bduad .copyright{color: #aeaeae;}
.bduad .bt_lc{margin-top: 2rem; padding-left: 0;}
.bduad .flogo{width: 50%; background: url(../img/flogo.svg) no-repeat; height: 3rem; text-indent: -9999px; }
.bduad .certi{width: 50%; justify-content: flex-start; margin-top: 5px; gap:4px;}
.bduad .certi li{text-align: center;}
.bduad .certi li a{background-color: #fff;border-radius: 50%;padding: 3px;display: inline-block;}
.bduad .certi li a img{width: 36px;height: 36px;}
.bducall{width: 40%; }
.bducall p:first-child{font-size: 1.4em; font-weight: bold; }
.bducall p:nth-child(2){font-size: 2.5em; color: #0091ea; font-weight: bold; margin-bottom: 8px; }


/*PC*/
@media all and (max-width:1920px){
}

@media all and (max-width:1200px){
    
    .tit4{font-size: 2em;}
    .ent1 img{margin: 50px 0 0 30px;}
    .line2 {width: 100%;}
    .ent2{margin-top: 30px;}
    
    .term1.flex{margin: 0; gap:8%;}
    .term2.flex{margin: 0; gap:8%;}

    main .departs .part ul li{width: 250px;font-size: 1.6em;}

    
    

}

@media all and (max-width:1024px){
    .term1.flex,.term2.flex{gap:0%; margin: 0;}
    .term1.flex>div,.term2.flex>div{width: 50%;}
}

@media all and (max-width:960px){
    .txt{margin: 0 30px;}
    .tit2{font-size: 1.8em;}
    .titr1 {font-size: 2.5rem;}
    main .con1>.txt {margin-top: 10vh;}
    
    .ent1 a {display: block; height: 100px;line-height: 100px;width: 100%; font-size: 32px;}
    .bo,.ka{background-size: contain; background-position: center center;}
    .term1 div p{display: block; height: 100px;line-height: 100px;width: 100%;}
    .term1 div:first-child p{background-size: contain; background-position: center center;}
    .term1 div:last-child p{background-size: contain; background-position: center center;}

    main .departs .part ul li {width: 210px;font-size: 1.4em;}
    footer .inner{flex-direction: column-reverse; font-size: 1.5em;}
    .bduad,.bducall{width: 100%; margin: 0 0 30px 0;}
    .bt_lc.flex{flex-wrap: nowrap;}
    .bduad .certi {margin: 8px 20px 0 20px;}
    .bduad .certi li{width: 18%;}
    .bduad .certi li:nth-child(1){width: 22%;}
    .bduad .certi li:nth-child(2){width: 28%;}
    .blink,.blink.delayed,.hpoint{display: none;}
    .tit1>i{display: inline-block; margin: 10px 0 0 0;}


}



/*태블릿*/
@media all and (max-width:768px){
    main .departs .part ul li {width: 152px;font-size: 0.9em;}
    .bntxt {font-size: 1.7em;}
    .ent1 a {font-size: 28px;}
    .titr1 {font-size: 2.1rem;}
    .tit4 {font-size: 1.8em;}
}

@media all and (max-width:650px){
    .ent1 a{font-size: 24px;}
    .titr1 {font-size: 1.6rem;}
}
    


/*모바일*/
@media all and (max-width:500px){
    .blcok1{display: inline-block;}
    
     body{font-size: 8px;}
    .txt{margin: 0 20px; letter-spacing: -2px;}
    .tit1 {font-size: 5em; margin: 1em 0;}
    .tit2 {font-size: 2.25em;}
    .tit3 {font-size: 3.8em;}
    .tit4 {font-size: 3em;}
    .tit5,.tit6 {font-size: 2em;}
    .best{margin: 20px 60px;}
    .bntxt {font-size: 2.5em;}
    
    main .departs .part {gap: 3%;}
    
    
    .quick {position: relative; bottom: 0%;right: 0%; display: none;}
    .budy{display: none;}
    .qbox {width: 100vw; display: flex;}
    .qbox li:nth-child(2){background: #000; color: #fff;}
    .qbox li:nth-child(3){background: #000; color: #fff;}
    .qbox li:nth-child(4){display: none;}
    .q1 {display: none;}
    .qcut {height: 30px;line-height: 30px;width: 100vw; border-bottom:none;}
    .qbox
    
    main{margin: 80px 0 0 0;}
    main .con1>.txt{margin-top: 10vh;}
    main .con1 figure {background-size: cover;}
    
    main .con2{height: 100%;}
    main .con2 .region{height: 50px;}
    main aside.reas12 {margin-top: -5px;}
    main .con2 .img_bg{height: 200px; background-attachment: local;}
    
    main article{margin: 30px 0;}
    .longbn{height: 50px; line-height: 50px;}
    main .departs .part ul li{width: 176px;border-radius: 0;height: 50px;font-size: 2em; line-height: 1; letter-spacing: -1px; text-align: left; position: relative; border-radius: 10px;}
    main .departs .part ul li a{position: absolute; bottom: 0%; margin: 17px}
    .starline{padding: 20px 0 0 16px;}
    
    .ent1 {margin: 0px;}
    .ent1 .term1{width: 100%;height: 100%;}
/*    .ent1 a {height: 60px; font-size: 20px; line-height: 60px; width: 100%;}*/
    .ent1 .bbox {height: 60px; font-size: 20px; line-height: 60px; width: 100%;}
    .ent1 img{margin:0;}
    .mterm1{display: block; margin: 30px 0; font-size: 5em;}
    
    .mterm1 .colle{background: #000;color: #fff;font-weight: 700;padding: 10px 0; letter-spacing:-5px;}
    .owl-dots{display: none;}
    .term1{display: none;}
    .term1>p{color: #fff;margin-bottom: 10px; background-size: contain;font-size: 3em; width: 100%; height: 100%;}
    .line2 {width: 100%;}
    .ent2{height: 50px; margin: 80px 0 0 0;}
    .term2 div p{font-size: 3.5em;}
    .term2.flex{display: block;}
    .term1.flex>div, .term2.flex>div {width: 100%; margin: 30px 0;}

    

    
    main .con4{margin-top: 0;}
    .bank .txt figure {margin-top: -10px;}
        
    .story{padding:50px 10px;}
    .story>.txt>p{padding: 0;}
    .story>.txt>.tit1 {margin: 0 0 0.2em 0;}
}
    
  
    
}














