@charset "utf-8";
/* 폰트 ---------------------------------------- */
/* noto-sans-KR - Regular */
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 500;
src: url('../font/NotoSansKR-Regular.otf');
src: url('../font/NotoSansKR-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../font/NotoSansKR-Regular.woff') format('woff'); /* Modern Browsers */
}
/* noto-sans-KR - Medium */
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 600;
src: url('../font/NotoSansKR-Medium.otf');
src: url('../font/NotoSansKR-Medium.woff2') format('woff2'), /* Super Modern Browsers */
url('../font/NotoSansKR-Medium.woff') format('woff'); /* Modern Browsers */
}
/* noto-sans-KR - Bold */
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 700;
src: url('../font/NotoSansKR-Bold.otf');
src: url('../font/NotoSansKR-Bold.woff2') format('woff2'), /* Super Modern Browsers */
url('../font/NotoSansKR-Bold.woff') format('woff'); /* Modern Browsers */
}
/* Roboto - Regular */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url('../font/Roboto-Regular.otf');
src: local('Roboto Regular'), local('Roboto-Regular'),
url('../font/Roboto-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../font/Roboto-Regular.woff') format('woff'); /* Modern Browsers */
}
/* Roboto - Bold */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url('../font/Roboto-Bold.otf');
src: local('Roboto Bold'), local('Roboto-Bold'),
url('../font/Roboto-Bold.woff2') format('woff2'), /* Super Modern Browsers */
url('../font/Roboto-Bold.woff') format('woff'); /* Modern Browsers */
}
/* 폰트 ,Pretendard---------------------------------------- */
/* Pretendard - Regular */
@font-face {
font-family: 'Pretendard GOV';
font-weight: 400;
font-style: normal;
src: /*url('../fonts/PretendardGOV-Regular.subset.woff2') format('woff2'),*/
url('../font/PretendardGOV-Regular.subset.woff') format('woff');
}
/* Medium */
@font-face {
font-family: 'Pretendard GOV';
font-weight: 500;
font-style: normal;
src: /*url('../fonts/PretendardGOV-Medium.subset.woff2') format('woff2'),*/
url('../font/PretendardGOV-Medium.subset.woff') format('woff');
}
/* Bold */
@font-face {
font-family: 'Pretendard GOV';
font-weight: 700;
font-style: normal;
src: /*url('../fonts/PretendardGOV-Bold.subset.woff2') format('woff2'),*/
url('../font/PretendardGOV-Bold.subset.woff') format('woff');
}
/* reset ---------------------------------------- */
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
font-family: "Pretendard GOV", 'Noto Sans KR','Roboto','Microsoft Yahei', 'STXihei', 'Arial', 'sans-serif';
}
/* html{font-size:62.5%;} rem */
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,
legend,textarea,p,blockquote,
th,td,input,select,textarea,button{
margin:0;
padding:0;
font-family: "Pretendard GOV", 'Noto Sans KR','Roboto','Microsoft Yahei', 'STXihei', 'Arial', 'sans-serif';
}
fieldset,img{border:0 none}
dl,ul,ol,menu,li{list-style:none;}
li{
word-wrap:break-word;
word-break:keep-all;
white-space:pre-line;
}
blockquote, q{quotes:none}
blockquote:before,
blockquote:after,
q:before,
q:after{
content:'';
content:none
}
h1,h2,h3,h4,h5{
padding:0;
margin:0;
}
p:lang(ko), span:lang(ko), strong:lang(ko){
word-wrap:break-word;
word-break:keep-all;
}
p:lang(en), span:lang(en), strong:lang(en){
word-wrap:break-word;
word-break:keep-all;
}
p:lang(jp), span:lang(jp), strong:lang(jp){
word-wrap:break-word;
word-break:break-all;
}
p:lang(th), span:lang(th), strong:lang(th){
word-wrap:break-word;
word-break:break-all;
}
p:lang(fr), span:lang(fr), strong:lang(fr){
word-wrap:break-word;
word-break:keep-all;
}
p:lang(es), span:lang(es), strong:lang(es){
word-wrap:break-word;
word-break:keep-all;
}
p:lang(my), span:lang(my), strong:lang(my){
word-wrap:break-word;
word-break:keep-all;
}
p:lang(tw), span:lang(tw), strong:lang(tw){
word-wrap:break-word;
word-break:break-all;
}
a{
text-decoration:none;
color:#000;
}
a:hover{text-decoration:none;}
fieldset,img{border:0 none}
img{
position:relative;
vertical-align:middle;
}
input,select,textarea,button{vertical-align:middle}
input{
/* appearance: none; */
/* -webkit-appearance: none; */
-webkit-border-radius: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input.in{
appearance: none;
-webkit-appearance: none;
}
input::-ms-clear{display:none}
input::-webkit-contacts-auto-fill-button{
visibility:hidden;
display:none !important;
pointer-events:none;
position:absolute;
right:0;
}
input[type='text']{
/* color:#444; */
font-size:14px;
}
input[type='submit'],
button{
border:none;
border-radius:0;
background-color:transparent;
cursor:pointer;
box-shadow:none;
}
/* input[type='submit']:focus,
button:focus{outline:none;} */
address,caption,cite,code,dfn,em,var{
font-style:normal;
font-weight:normal;
}
caption{
height:0;
padding:0;
font-size:0;
text-indent:-9999px;
}
table{
border-spacing:0;
border-collapse:collapse;
}
textarea{
-ms-overflow-style:none;
width:100%;
border:none;
border-radius:0;
box-shadow:none;
font-family:"Pretendard GOV", 'Noto Sans KR','Roboto','Microsoft Yahei', 'STXihei', 'Arial', 'sans-serif';
resize:none;
appearance:none;
-webkit-appearance:none;
-webkit-border-radius:0;
}
select{
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-ms-appearance:none;
-webkit-appearance:none;
-moze-appearance:none;
appearance:none;
border-radius:0;
-webkit-border-radius:0;
}
select:disabled::-ms-expand{display:none;}
select::-ms-expand{display:none;}
/* focus ---------------------------------------- */
a:focus,
/* button:focus, */
input:focus,
select:focus,
iframe:focus,
textarea:focus{
/* outline-offset:1px !important; */
/* outline-style:solid !important; */
/* outline-color:#00428e !important; */
outline:1px solid #00428e !important;
/* outline : none; */
}
/* ie11 */
button:focus{
outline : none;
}
_:-ms-fullscreen, :root a:focus,
_:-ms-fullscreen, :root button:focus,
_:-ms-fullscreen, :root input:focus,
_:-ms-fullscreen, :root select:focus,
_:-ms-fullscreen, :root iframe:focus,
_:-ms-fullscreen, :root textarea:focus{
outline:1px solid #00428e !important;
}
/* hidden ---------------------------------------- */
.hidden{
overflow:hidden;
/* display:none; */
position:absolute;
width:1px;
height:1px;
margin:-1px !important;
clip:rect(0 0 0 0);
clip-path:polygon(0 0, 0 0, 0 0);
}
/* display ---------------------------------------- */
.dp{display:block;}
.idp{display:inline-block;}
.dpn{display:none;}
.df{display:flex;}
/* float ---------------------------------------- */
.cl{clear:both !important;}
.fl{float:left;}
.fr{float:right;}
/* 텍스트 ---------------------------------------- */
/* align */
.txl{text-align:left !important;}
.txc{text-align:center !important;}
.txr{text-align:right !important;}
/* margin ---------------------------------------- */
/* margin top */
.mt0{margin-top:0 !important}
.mt1{margin-top:1px !important}
.mt2{margin-top:2px !important}
.mt3{margin-top:3px !important}
.mt5{margin-top:5px !important}
.mt7{margin-top:7px !important}
.mt8{margin-top:8px !important}
.mt9{margin-top:9px !important}
.mt10{margin-top:10px !important}
.mt20{margin-top:20px !important}
.mt25{margin-top:25px !important}
.mt30{margin-top:30px !important}
.mt35{margin-top:35px !important}
.mt40{margin-top:40px !important}
.mt50{margin-top:50px !important}
.mt60{margin-top:60px !important}
.mt70{margin-top:70px !important}
.mt80{margin-top:80px !important}
.mt100{margin-top:100px !important}
/* margin left */
.ml0{margin-left:0 !important}
.ml1{margin-left:1px !important}
.ml2{margin-left:2px !important}
.ml3{margin-left:3px !important}
.ml4{margin-left:4px !important}
.ml5{margin-left:5px !important}
.ml6{margin-left:6px !important}
.ml7{margin-left:7px !important}
.ml8{margin-left:8px !important}
.ml9{margin-left:9px !important}
.ml10{margin-left:10px !important}
.ml15{margin-left:15px !important}
.ml20{margin-left:20px !important}
.ml30{margin-left:30px !important}
.ml40{margin-left:40px !important}
.ml50{margin-left:50px !important}
.ml60{margin-left:60px !important}
.ml70{margin-left:70px !important}
.ml80{margin-left:80px !important}
.ml90{margin-left:90px !important}
.ml100{margin-left:100px !important}
.ml105{margin-left:105px !important}
.ml110{margin-left:110px !important}
.ml115{margin-left:115px !important}
.ml120{margin-left:120px !important}
/* margin right */
.mrM12{margin-right: -12px !important}
.mr0{margin-right:0 !important}
.mr1{margin-right:1px !important}
.mr2{margin-right:2px !important}
.mr3{margin-right:3px !important}
.mr4{margin-right:4px !important}
.mr5{margin-right:5px !important}
.mr6{margin-right:6px !important}
.mr7{margin-right:7px !important}
.mr8{margin-right:8px !important}
.mr9{margin-right:9px !important}
.mr10{margin-right:10px !important}
.mr12{margin-right:12px !important}
.mr13{margin-right:13px !important}
.mr14{margin-right:14px !important}
.mr15{margin-right:15px !important}
.mr20{margin-right:20px !important}
.mr22{margin-right:22px !important}
.mr30{margin-right:30px !important}
.mr35{margin-right:35px !important}
.mr40{margin-right:40px !important}
.mr41{margin-right:41px !important}
.mr50{margin-right:50px !important}
.mr53{margin-right:53px !important}
.mr60{margin-right:60px !important}
.mr70{margin-right:70px !important}
.mr80{margin-right:80px !important}
.mr90{margin-right:90px !important}
.mr100{margin-right:100px !important}
.mr110{margin-right:110px !important}
.mr120{margin-right:120px !important}
.mr130{margin-right:130px !important}
.mr135{margin-right:135px !important}
.mr140{margin-right:140px !important}
.mr145{margin-right:145px !important}
.mr150{margin-right:150px !important}
.mr160{margin-right:160px !important}
.mr170{margin-right:170px !important}
.mr180{margin-right:180px !important}
.mr190{margin-right:190px !important}
.mr200{margin-right:200px !important}
/* margin bottom */
.mb0{margin-bottom:0 !important}
.mb1{margin-bottom:1px !important}
.mb2{margin-bottom:2px !important}
.mb3{margin-bottom:3px !important}
.mb4{margin-bottom:4px !important}
.mb5{margin-bottom:5px !important}
.mb6{margin-bottom:6px !important}
.mb7{margin-bottom:7px !important}
.mb8{margin-bottom:8px !important}
.mb9{margin-bottom:9px !important}
.mb10{margin-bottom:10px !important}
.mb15{margin-bottom:15px !important}
.mb20{margin-bottom:20px !important}
.mb25{margin-bottom:25px !important}
.mb30{margin-bottom:30px !important}
.mb35{margin-bottom:35px !important}
.mb40{margin-bottom:40px !important}
.mb50{margin-bottom:50px !important}
.mb60{margin-bottom:60px !important}
.mb70{margin-bottom:70px !important}
.mb80{margin-bottom:80px !important}
.mb90{margin-bottom:90px !important}
.mb100{margin-bottom:100px !important}
.mb200{margin-bottom:200px !important}
.mb300{margin-bottom:300px !important}
/* padding ---------------------------------------- */
.pd0{padding:0 !important}
.pd2{padding:2px !important}
.pd10{padding:10px !important}
.pd17{padding:17px !important}
.pd20{padding:20px !important}
/* padding top */
.pt0{padding-top:0 !important}
.pt1{padding-top:1px !important}
.pt2{padding-top:2px !important}
.pt3{padding-top:3px !important}
.pt4{padding-top:4px !important}
.pt5{padding-top:5px !important}
.pt6{padding-top:6px !important}
.pt7{padding-top:7px !important}
.pt8{padding-top:8px !important}
.pt9{padding-top:8px !important}
.pt10{padding-top:10px !important}
.pt15{padding-top:15px !important}
.pt20{padding-top:20px !important}
.pt30{padding-top:30px !important}
.pt40{padding-top:40px !important}
.pt50{padding-top:50px !important}
.pt60{padding-top:60px !important}
/* padding left */
.pl0{padding-left:0 !important}
.pl1{padding-left:1px !important}
.pl2{padding-left:2px !important}
.pl3{padding-left:3px !important}
.pl4{padding-left:4px !important}
.pl5{padding-left:5px !important}
.pl6{padding-left:6px !important}
.pl7{padding-left:7px !important}
.pl8{padding-left:8px !important}
.pl9{padding-left:9px !important}
.pl10{padding-left:10px !important}
.pl12{padding-left:12px !important}
.pl15{padding-left:15px !important}
.pl20{padding-left:20px !important}
.pl25{padding-left:25px !important}
.pl30{padding-left:30px !important}
.pl34{padding-left:34px !important}
.pl40{padding-left:40px !important}
.pl50{padding-left:50px !important}
.pl60{padding-left:60px !important}
/* padding right */
.pr0{padding-right:0px !important}
.pr1{padding-right:1px !important}
.pr2{padding-right:2px !important}
.pr3{padding-right:3px !important}
.pr4{padding-right:4px !important}
.pr5{padding-right:5px !important}
.pr6{padding-right:6px !important}
.pr7{padding-right:7px !important}
.pr8{padding-right:8px !important}
.pr9{padding-right:9px !important}
.pr10{padding-right:10px !important}
.pr12{padding-right:12px !important}
.pr15{padding-right:15px !important}
.pr20{padding-right:20px !important}
.pr30{padding-right:30px !important}
.pr40{padding-right:40px !important}
.pr50{padding-right:50px !important}
.pr60{padding-right:60px !important}
/* padding bottom */
.pb0{padding-bottom:0 !important}
.pb1{padding-bottom:1px !important}
.pb2{padding-bottom:2px !important}
.pb3{padding-bottom:3px !important}
.pb4{padding-bottom:4px !important}
.pb5{padding-bottom:5px !important}
.pb6{padding-bottom:6px !important}
.pb7{padding-bottom:7px !important}
.pb8{padding-bottom:8px !important}
.pb9{padding-bottom:9px !important}
.pb10{padding-bottom:10px !important}
.pb11{padding-bottom:11px !important}
.pb12{padding-bottom:12px !important}
.pb13{padding-bottom:13px !important}
.pb14{padding-bottom:14px !important}
.pb15{padding-bottom:15px !important}
.pb20{padding-bottom:20px !important}
.pb30{padding-bottom:30px !important}
.pb40{padding-bottom:40px !important}
/* width ---------------------------------------- */
.wide{width:100% !important;}
.wp60{width:60% !important;}
.wp50{width:50% !important;}
.wp40{width:40% !important;}
.wp30{width:30% !important;}
.wp20{width:20% !important;}
.w10{width:10px !important;}
.w40{width:40px !important;}
.w55{width:55px !important;}
.w60{width:60px !important;}
.w65{width:65px !important;}
.w71{width:71px !important;}
.w80{width:80px !important;}
.w90{width:90px !important;}
.w100{width:100px !important;}
.w110{width:110px !important;}
.w120{width:120px !important;}
.w130{width:130px !important;}
.w135{width:135px !important;}
.w140{width:140px !important;}
.w150{width:150px !important;}
.w160{width:160px !important;}
.w170{width:170px !important;}
.w180{width:180px !important;}
.w190{width:190px !important;}
.w200{width:200px !important;}
.w205{width:205px !important;}
.w220{width:220px !important;}
.w230{width:230px !important;}
.w250{width:250px !important;}
.w260{width:260px !important;}
.w290{width:290px !important;}
.w485{width:485px !important;}
.w490{width:490px !important;}
.w550{width:550px !important;}
.w590{width:590px !important;}
.w600{width:600px !important;}
.w605{width:605px !important;}
.w630{width:630px !important;}
.w640{width:640px !important;}
.w670{width:670px !important;}
.w680{width:680px !important;}
.w750{width:750px !important;}
.w800{width:800px !important;}
.w880{width:880px !important;}
.wm460{max-width:460px !important;}
.wm540{max-width:540px !important;}
.wm640{max-width:640px !important;}
.wm700{max-width:700px !important;}
.wm740{max-width:740px !important;}
.wm800{max-width:800px !important;}
.wm850{max-width:850px !important;}
.mw150{width:150px !important;}
.mw180{width:180px !important;}
@media (max-width:1024px){
.wauto{width:auto !important;}
}
@media (max-width:768px){
.mw150{
width:100% !important;
}
.mw180{
width:100% !important;
}
.wp20{width:100% !important;}
.wauto{width:auto !important;}
}
/* height ---------------------------------------- */
.tall{height:100% !important;}
.h80{height:80px !important;}
.h85{height:85px !important;}
.h100{height:100px !important;}
.h110{height:110px !important;}
.h120{height:120px !important;}
.h150{height:150px !important;}
.h160{height:160px !important;}
.h210{height:210px !important;}
.h260{height:260px !important;}
.h300{height:300px !important;}
.h400{height:400px !important;}
.h500{height:500px !important;}
.h740{height:740px !important;}
.h840{height:840px !important;}
/* min-height ---------------------------------------- */
.minh80{min-height:80px !important;}
/* border ---------------------------------------- */
.brdn{border:none !important;}
.brdTn{border-top:none !important;}
.brdRn{border-right:none !important;}
.brdBn{border-bottom:none !important;}
.brdLn{border-left:none !important;}
/* demo */
.inner.demo .section{
max-width:1920px;
padding:0;
}
.demoImg img{width:100%;}
/* teaser */
.container:after,
.container > .inner.teaser{
min-height:100vh;
min-height:calc(var(--vh, 1vh) * 100);
background:#EBF5FF/**#f6f7fb**/;
}
.teaser .section{
display:table;
table-layout:fixed;
height:100vh;
height:calc(var(--vh, 1vh) * 100);
padding:0;
vertical-align:middle;
}
.teaser .contArea{
display:table-cell;
max-width:900px;
padding-bottom:17%;
vertical-align:middle;
}
.teaser .contArea h1 img{
max-width:362px;
width:100%;
}
.teaser .flexBox{flex-direction:row;}
.teaser .flexBox > *{width:70%;}
.teaser .imgArea{
margin:auto 0;
text-align:center;
}
.teaser .imgArea img{
width:auto;
height:auto;
margin-top:50px;
}
.teaser .txtArea{text-align:left;}
.teaser h2{
margin-top:100px;
margin-bottom:20px;
color:#00428e;
font-size:36px;
font-weight:600;
line-height:40px;
}
.teaser .date{
color:#000;
font-size:18px;
letter-spacing:-.5px;
}
.teaser .date span{
display:block;
margin-bottom:2px;
font-size:24px;
line-height:26px;
}
.teaser .date b{font-weight:700;}
.teaser .info{
margin-top:50px;
color:#222;
font-size:14px;
line-height:19px;
white-space:normal;
}
.teaser .info span{
display:block;
margin-bottom:4px;
color:#00428e;
font-size:16px;
font-weight:700;
line-height:18px;
}
.teaser ul{
margin-top: 10px/**130px**/;
padding-top:17px;
/**background:url('../img/bgLine.png') no-repeat left -14px top;**/
background-size:100% 3px;
color:#555;
font-size:14px;
}
.teaser ul li{white-space:normal;}
.teaser ul li strong{font-weight:600;}
.teaser .copyLight{
color:#888;
font-size:14px;
}
.basic .section{
display:table;
table-layout:fixed;
height:100vh;
height:calc(var(--vh, 1vh) * 100);
padding:0;
vertical-align:middle;
}
.basic .contArea{
display:table-cell;
max-width:940px;
padding-bottom:7%;
vertical-align:middle;
}
.basic .contArea .txtArea{
margin-left:50px;
font-size:20px;
line-height:20px;
white-space:normal;
}
@media (max-width:1024px){
.basic .imgArea{
text-align:center;
margin:0 auto;
}
.basic .contArea .txtArea{
text-align:center;
margin:0 auto;
}
}
@media (max-width:840px){
.teaser .section{
width:100%;
padding:37px 30px 60px;
box-sizing:border-box;
}
.teaser .flexBox{
-webkit-box-direction:column;
-ms-flex-direction:column;
flex-direction:column;
}
.teaser .flexBox > *{width:100%;}
.teaser .imgArea img{
max-width:200px;
margin-top:30px;
}
.teaser .txtArea {text-align:center;}
.teaser h2{
margin:50px 10px;
font-size:34px;
}
.teaser ul{margin-top:20px;}
}
/*****font size*****/
.font24 {font-size: 24pt;}
.font20 {font-size: 20pt;}
.font18 {font-size: 18pt;}
.font16 {font-size: 16pt;}
@media (max-width:640px){
.font24 {font-size: 20pt;}
.font20 {font-size: 17pt;}
.font18 {font-size: 15pt;}
.font16 {font-size: 13pt;}
}
.scrollAuto {overflow-y:auto;}