@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

   .nanumgothic * {
	font-family: 'Nanum Gothic', sans-serif;
}

@font-face {
    font-family: 'NEXON Lv1 Gothic Light';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;}
html,body,div,span,applet,object,iframe,video,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,address{margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; list-style:none;}
span,a{display:inline-block;}a{text-decoration:none;font-style:normal;}
html,body{font-family:'NEXON Lv1 Gothic OTF', 'Noto Sans KR'; font-weight:100; margin:0; width:100%; height:100%; line-height:normal; -webkit-overflow-scrolling:touch;}
body{background-color:#f8f8f8; color:#000;letter-spacing:-1px;-webkit-text-size-adjust:none;/*아이폰가로 폰트확대 방지*/vertical-align:top;}img{border:0;max-width:100%;vertical-align:top;}form{display:inline;}fieldset{border:0;}legend{display:none;}input,select,radio,div{vertical-align:top;}input[type=submit],button{cursor:pointer;}input[type=radio]{padding:0;margin:0;vertical-align:middle;}input[type=checkbox]{margin:0; vertical-align:middle;}h1,h2,h3,h4,h5,h6{font-weight:normal;}

/* guide */
.br320{display:block;}.br375,.br412,.br1200{display:none;}
.inner{width:100%; margin:0 auto;}
.flex{display:flex; justify-content: space-between; flex-wrap: wrap;}
/*fontStyle*/
p{font-family: 'Nanum Gothic', sans-serif; font-size: 1.4rem; padding:1rem 2rem;}
.text-point{color:#2fbac6}
.text-point2{color:#204478}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
/*btn*/
.btn{display:inline-block; padding:1rem 4rem; border-radius: 3px;; background-color:#204478; color:#fff;}
.bold{font-weight:bold;}
/* font */
html{font-size:62.5%;/*font-size:10px;*/}
/*scroll-y*/
.scroll-y{overflow-y: auto; height:300px;}

@media screen and (min-width:375px){
.br375{display:block;}.br320,.br412,.br1200{display:none;}
}
@media screen and (min-width:412px){ /*galaxy note9*/
.br412{display:block;}.br320,.br375,.br1200{display:none;}
}
@media screen and (min-width:415px){
.inner{/*max-width:41.2rem;*/}
}
@media screen and (min-width:1200px){
.br1200{display:block;}.br320,.br375,.br412{display:none;}
.inner{max-width:100rem;}
}

.hide{display:none;}

/*=========================start css=============================*/
/*preloader*/
.spinner-wrapper {position: fixed; z-index: 99999999; top: 0; right: 0; bottom: 0; left: 0; background: #8A23A2;}
.spinner {position: absolute; top: 50%; left: 50%; width: 3.75rem; height: 1.25rem; margin: -0.625rem 0 0 -1.875rem; text-align: center;}
.spinner > div {display: inline-block; width: 1rem; height: 1rem; border-radius: 100%; background-color: #fff; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both;}
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0); }
	40% { -webkit-transform: scale(1.0); }
}
@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
		transform: scale(1.0);
	}
}

@media screen and (min-width:375px){
}

@media screen and (min-width:412px){
}

@media screen and (min-width:415px){
}

/*popup*/
.layer_popup {position:absolute; top:100px; left:0px; width:100%; z-index: 9; }
.layer_popup div.layer_inner {position:relative; width:90%; max-width:328px; margin:0 auto; font-size:13px; border:1px solid #000; box-shadow: 3px 10px 10px rgb(0 0 0 / 50%);}
.layer_popup div.layer_inner img {vertical-align: bottom;}
.layer_popup div.close {padding-top:10px; height:30px; background-color:#000}
.layer_popup div.close #check {width:60%; padding-left:10px; float:left; color:#fff}
.layer_popup div.close #close {width:25%; text-align:right; float:right; padding-right:20px;}
.layer_popup div.close #close a{color:#fff; }
.layer_popup div.call {position: absolute; top: 216px; right: 22px; width: 90px; height: 90px;}
.layer_popup div.call a{display:block; width:90px; height:90px;  border-radius: 100%;}

/*pc*/
@media screen and (min-width:1200px){
	.layer_popup{position:absolute; top:130px; left:60%; width:650px; z-index: 9;}
	.layer_popup div.layer_inner{max-width:500px;}
	.layer_popup div.call {top: 330px; right: 28px; width: 140px; height: 140px;}
	.layer_popup div.call a{display:block; width: 140px; height: 140px; border-radius: 100%;}
	.layer_popup div.close {padding-top:15px; height:40px;}
	p{font-family: 'Nanum Gothic', sans-serif; font-size: 1.6rem;}
}


/** modal window styles **/
.modal-popup div.pc-img{display:none;}
.modal-popup div.mobile-img{display:block;}
.modal-popup div.mobile-img img{border-radius:10px;
-webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.text-left{text-align:left !important;}

#lean_overlay {
    position: fixed;
    z-index:9999;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}


.modal-popup {
 width: 320px; 
 height:auto;
 margin-top:0px;     
  
}

.modal-popup{background-color:#fff; padding:1rem; border-radius: 20px; z-index: 999999}
.modal-popup div.scroll-box{height:350px; overflow: auto; font-family: "Nanum";}
.modal-popup h2{width:80%; font-size:3rem; margin-top:0px; color:#204478; padding:10px 0px;}
.modal-popup li{font-size:1.6rem; padding:0.5rem 0; font-family: 'Nanum Gothic', sans-serif;}
.modal-popup p.paragraph2{text-align:left;}
.modal-popup .text-area{flex-basis:50%;}
.modal-popup .text-area h5.pd{padding-top:3rem;}
.modal-popup .icon-size{width:30px; margin-left:10px; border-radius: 4px; border:1px solid #ccc; vertical-align: middle;}
.modal-popup .video-container{margin-top:3rem;}
.modal-popup .model-video{flex-basis:45%; }
.modal-popup .scroll-y{overflow-y: auto; padding:2rem; height:400px; border:1px solid #ddd; border-radius: 10px;}
.modal-popup .scroll-y h4{font-size:1.8rem; padding:1rem 0}
.modal-popup .scroll-y p{padding:1rem 0;}
.modal-popup .flex{display:block}
.ul-list-style li{ margin-left:1.2rem; list-style : square url(../img/icon_dot.png) outside; }

.close-btn{width:60px; height:60px; position: absolute; top:0px; right:0px; z-index: 999999;}
.close-btn a{display:block; cursor: pointer;  width:60px; height:60px; margin:0 auto; background:url(../img/close_btn.png) no-repeat center; background-size:30px; border-radius: 100px;}
.close-btn a:hover{background:url(../img/close_btn2.png) no-repeat center; background-size:30px;}
.close-btn2{width:80px; height:80px;position: absolute; top:20px; right:20px; z-index: 999999;}
.close-btn2 a{display:block; cursor: pointer;  width:80px; height:80px; margin:0 auto; background:url(../img/close_btn2.png) no-repeat center; background-size:40px; border-radius: 100px;}
.close-btn2 a:hover{background:url(../img/close_btn2.png) no-repeat center; background-size:40px;}
#Info,
#Warning{background-color:#f8f8f8; padding:18px;}
.popup-content{padding:10px 0px; border-top:2px solid #333; border-bottom:1px solid #ddd;}
.popup-content li{padding:2px;}
.popup-content li span{ display:table-cell; font-size:12px;}
.popup-content li span.title{width:130px; float:left; color:#999;}
.popup-content li span.number{color:#3483ef; font-size:16px; font-weight: bold; padding-right:5px;}
.modal-popup div.btn-area{text-align:center; margin-top:20px;}
/*popup style*/
#curriculum01{background-color:#833bc4}
#curriculum02{background-color:#8923a2}
#curriculum03{background-color:#be5ed4}
#curriculum04{background-color:#7e39c2}
#curriculum05{background-color:#2c79be}
#curriculum06{background-color:#7272eb}

.curriculum_text{text-align:left; color:#fff; font-size:3rem; padding-left:0; margin-bottom:2rem;}
.curriculum_text h3{padding-bottom:10px; color:#fff9}
.curriculum_text li{margin-bottom:5px; font-size:1.6rem; font-weight:100; font-family: 'Nanum Gothic', sans-serif;}
.curriculum_text li span.point-box{display: inline-block; padding: 5px 15px; border-radius:10px; margin-right:10px; background-color: #0009;}

.instructor-content {padding: 0;  text-align:left;}
.instructor-content .left img{max-width:200px}
.instructor-content .right{padding:2rem 0 2rem 3rem;}
.instructor-content h2{text-align:left; font-size:3rem; color:#333}
.instructor-content h3{text-align:left; font-size:2rem; color:#833bc4}
.instructor-content p{padding-top:1rem; line-height:2rem; font-weight:200; text-align:left; font-size:1.4rem}

#success{background:url("../img/success_bg.png") no-repeat top #4a22a0; background-size:cover; }
#success h2{font-size:3rem; color:#fff; padding:2rem 0;}
#success p{font-size:1.6rem; padding:1rem; line-height:2.6rem; color:#fff;}
#success p strong{display:inline-block; background-color: #00000087; padding: 0.5rem 1rem; border-radius: 5px;}

@media screen and (min-width:1200px){
	
	.modal-popup{width:800px; padding:5rem; }
	.modal-popup .flex{display:flex}
	.modal-popup h2{font-size:5rem; margin-top:0px; color:#204478; padding:10px 0px;}
	.modal-popup .scroll-y{overflow-y: auto; height:500px; border:1px solid #ddd; border-radius: 10px;}
	.curriculum_text{font-size:3rem; padding-left:11rem; margin-bottom:5rem;}
	.curriculum_text li{font-size:2rem; font-family: 'NEXON Lv1 Gothic OTF', 'Noto Sans KR';}
	.instructor-content {display:flex; justify-content: space-between;  text-align:left; padding: 5rem 2rem;}
	.instructor-content .left{flex-basis: 50%;}
	.instructor-content .right{flex-basis: 48%;}
	.instructor-content h2{font-size:5rem;}
	.instructor-content h3{font-size:3rem;}
	.instructor-content p{line-height:3rem;font-size:1.8rem}
	#success h2{font-size:5rem;padding:2rem 4rem;}
	#success p{font-size:3rem;  padding:2rem; line-height:4rem; padding:2rem 4rem;}
	#success p strong{padding: 1rem 2rem;}
	.instructor-content .left img{max-width:100%}
	.icon-size{width:50px; }
	.flex{flex-wrap: nowrap;}
	.close-btn{width:80px; height:80px; position: absolute; top:20px; right:20px; z-index: 999999;}
}