@charset "utf-8";



.c_blue {color:#0033a1;}
.c_skyblue {color: #22abff;}
.c_lightblue {color:#bce0ff;}
.c_fff {color:#fff;}
.c_grey {color:#ccc;}

.bg_blue {background-color: #0033a1 !important;}
.bg_skyblue {background-color: #22abff !important}
.bg_lightblue {background-color: #bce0ff;}
.bg_333 {background-color: #333 !important;}

.font60 {font-size: clamp(30px,9.375vw,60px);}
.font30 {font-size: clamp(15px,4.6875vw,30px);}

body::-webkit-scrollbar {width: 8px; }
body::-webkit-scrollbar-thumb {background: #bce0ff;border-radius: 10px;}
body::-webkit-scrollbar-track {background: rgba(33, 122, 244, .1);}

.quizCon>div::-webkit-scrollbar {width: 5px;}
.quizCon>div::-webkit-scrollbar-thumb {background: #217af4;border-radius: 10px;}
.quizCon>div::-webkit-scrollbar-track {background: transparent; border-radius: 10px;}

.scrEvt {opacity:0; -webkit-transform: translateY(20%); -ms-transform: translateY(20%); transform: translateY(20%); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s;}
.scrEvt02 {opacity:0; -webkit-transform: translateY(30%); -ms-transform: translateY(30%); transform: translateY(30%); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s;}

.displayN {display: none !important;}
.displayF {display: -webkit-box;display: -ms-flexbox;display: flex;}


.rel {position: relative;}
.abs {position: absolute;}
.pcInner {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); max-width:1200px; width:100%;}



.nanum {font-family: 'NanumSquareNeo', 'Malgun Gothic', dotum, sans-serif !important;}
.mbc {font-family: 'MBC1961GulimM','Malgun Gothic', dotum, sans-serif !important; font-weight: normal;}

.alignS {align-self: flex-start;}
.txtAlignC {text-align: center;}
.txtCen {text-align: center;}
.txtLef {text-align: left;}
.txtRig {text-align: right;}

.inner640 {width:93.75%; margin:0 auto;}
.inner1200 {max-width: 1220px; width: 100%; margin:0 auto; padding:0 10px;}

@keyframes movingTxt {
  from{width:100%;}
  to {width:0%;}
}
.mvTxt { position: relative;}
.mvTxt::after,
.mvTxt::before {content:""; position: absolute; right:0; width:0%; height:50%; animation: movingTxt 1.5s linear 1; background-color: #0033a1;}
.mvTxt::after {top:0; width:100%; animation-delay: 1s; animation-fill-mode: forwards;}
.mvTxt::before {bottom:0; width: 100%; animation-delay: 2.5s; animation-fill-mode: forwards;}

.brdr01 {border-bottom:3px solid #d1eeff; width: 100%; margin:0 auto; }
.brdr02 {border-bottom:3px solid #d1eeff; width: 22%; margin:0 auto; }
.brdr03 {border-bottom:3px solid #d1eeff; width: 80%; margin:0 auto; }
.brdr04 {border-bottom:3px solid #d1eeff; max-width: 800px; width: 100%; margin:0 auto;}
.brdr05 {border-bottom:3px solid #d1eeff; width: 50%; margin:0 auto; }