/* ==================================================
   Basic Styles
================================================== */

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


html, body {
	height: 100%;
	margin:0;
	padding:0;
}

html, hmtl a{
	width:100%;
	font-size: 100%; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
}

body{
	position:relative;
	line-height:28px;
}


ul, ol{
   list-style:none;
   padding-left:0px;
   }


a:hover,
a:active,
a:focus{
	outline: 0;
	color:#FFFFFF;
	text-decoration:none;
}

a img {
	border: none;
}

a > img {
	vertical-align: bottom;	
}

img {
	max-width: 100%;
	padding:0;
	margin:0;
}

strong {
  	font-weight: 500;
}

p {
	margin: 0 0 30px;
}

.align_left{
	float:left;
	margin:0 25px 0 0px!important;
}

.align_right{
	float:right;
	margin:0 0 0 25px!important;
}

.text_align_left {
	text-align: left;
}

.text_align_center {
	text-align: center;
}

.text_align_right {
	text-align: right;	
}

.color-text {
    color: #DE5E60;
}


input, button, select, textarea {
	font-weight: 300;
	font-family: 'Titillium Web', sans-serif;
	outline: 0;
}

.ls1{
	letter-spacing:-1px;
}


.ls3{
	letter-spacing:-3px;
}




.fw300 {
	font-weight:300;
}

.fw400 {
	font-weight:400;
}

.fw500 {
	font-weight:500;
}

.fw600 {
	font-weight:600;
}


.yellow{color:#ffe24b;}

.fs14{
	font-size:14px !important;
}

.fs18{
	font-size:18px !important;
}


.textc {
	text-align:center;
	margin:0 auto;
	float:none;
}

.white {
	color:#fff !important;
}

.noto{
	font-family: 'Noto Sans KR', sans-serif;
}





.banner-top{	
	width:100%;
	background-color:#122448;
}

.logo{
	width:100%;
	background-color:#fff;
}

.main{
	background:/*url(../img/main_bg.jpg) no-repeat 50% 50%*/ #4d3a38;
	background-size:cover;
    background-attachment:fixed;
	padding:0px 0;
	z-index:99;
}

.main-banner{
	padding-top:0;
}
.main-banner ul li{
	padding-top:10px;	
}

.main_menu {
    display:block;
    padding:20px 15px;
    background:#f5f5f5;
    border-top:3px solid #1b2741;
}

.main_menu h3 {
    font-weight:bold;
	font-size:25px;
    margin:0;
    letter-spacing:0;
    color:#1b2741;
    text-align:center;
	padding-bottom:30px;
}


.btnWrap {
    text-align:center;
    padding-bottom:3%;
    margin:0 auto;
    width:100%;
}

.btn01 {
    color:white;
    width:100%;
    display:block;
    font-weight:bold; 
	font-size:1.4em;
    text-decoration:none;
	padding:1.5%;
    border-radius: 5px;
    border: 1px solid #e53326;
    background-color: #f58523;
    background-repeat: repeat-x;
    background: -webkit-linear-gradient(top, #ffa148, #f58523);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffa148), to(#f58523));
    background: -moz-linear-gradient(top, #ffa148, #f58523);
    background: -ms-linear-gradient(top, #ffa148, #f58523);
    background: -o-linear-gradient(top, #ffa148, #f58523);
}

.license {
    width: 100%;
    padding: 3%;
    font: 1em "malgun gothic";
    margin-bottom: 10px;
    border: 1px solid #999;
    background: white;
    border-radius: 0;
}

.main_menu input[type=text] {
    padding: 3%;
    font: 1em "malgun gothic";
    margin-bottom: 10px;
    border: 1px solid #999;
    width: 100%;
}

.ribbon {
    position: absolute;
	
    width: 54px;
    height: 80px;
    right: 15px;
    top: 0;
    background: url(../img/ribbon.png) no-repeat center top;
    color: white;
    border-bottom: 1px solid #fff;
}

.ribbon .rb01 {
    font: 12px/1.2em 'malgun gothic';
    border-bottom: 1px solid white;
    padding: 5px 0;
    margin: 0 auto;
    width: 70%;
    letter-spacing: -1px;
}
.ribbon .rb02 {
    font: bold 16px/1.2em 'malgun gothic';
    padding: 5px 0;
    margin: 0 auto;
    width: 70%;
}

.review {
    display: block;
    position: relative;
    text-align: left;
    padding-bottom: 18px;
    background: white;
}

.rv_title {
    display: block;
    border-bottom: 2px solid #213764;
    margin-bottom: 20px;
    font: 17px 'malgun gothic';
    padding: 20px;
    letter-spacing: -1px;
    color: #777;
}
.rv_title b {
    font: bold 27px 'malgun gothic';
    color: #333;
}

.review ul.list-r{
	width:100%;
}

.review li {
    list-style: none;
    margin-left: 5px;
    color: #555;
    font: 14px 'malgun gothic';
}
.review li .title {
	display: block;
	text-overflow:ellipsis;
	overflow: hidden;
	white-space: nowrap;
}


.sec-1{	
	background: url(../img/sec_1_bg.png) repeat-x left top;
}

.sec-1-text1{
	text-align:top;

}

.sec-1-2{
	text-align:top;
	background-color:#242833;
}


.sec-1-3{
	text-align:top;
	border-top:5px solid #c8830e;
}

.sec-2{	
	position:relative;
	background-color:#37302a;
	padding:50px 0 90px 0;
}

.sec-2 .sub_line01 {
	position:absolute; 
	bottom:0; 
	width:100%; 
	height:68px; 
	overflow: hidden; 
	background:url('../img/sec_2line.png') left bottom no-repeat; 
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-ms-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}

.sec-3{	
	position:relative;
	background-color:#463933;
	padding:50px 0 90px 0;
}

.sec-3-text2{
	padding-top:50px;
}

.sec-3 .sub_line01 {
	position:absolute; 
	bottom:0; 
	width:100%; 
	height:68px; 
	overflow: hidden; 
	background:url('../img/sec_3line.png') left bottom no-repeat; 
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-ms-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}

.sec-4{	
	position:relative;
	background-color:#131432;
	padding-bottom:50px;
}


.sec-5{	
	position:relative;
	background-color:#212356;
	padding:50px 0;
}

.sec-5 .sec-5-text2{
	padding:20px 0;
}

@media screen and (max-width:600px) {
	.sec-5 .sec-5-text2 img{
	max-width:20%;
	}
}

.sec-56-bg {
	background:url('../img/sec_56_bg.png') left top repeat-x; 
	height:14px;
}

.sec-56-bg1 {
	background:url('../img/sec_56_bg1.png') left top repeat-x; 
	height:14px;
}


.sec-6{	
	position:relative;
	padding:50px 0;
	background-color:#4e57b4;
}

.sec-6 .sec-6-text2{
	padding:30px 0;
}

.sec-7{	
	position:relative;
	padding:50px 0 100px 0;
	background-color:#212356;
}

.sec-7 .sub_line01 {
	position:absolute; 
	bottom:0; 
	width:100%; 
	height:86px; 
	overflow: hidden; 
	background:url('../img/sec_4line.png') left bottom no-repeat; 
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-ms-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}


.sec-8{	
	position:relative;
	padding:30px 0 100px 0;
	background-color:#1d2228;
}

.sec-8 .sub_line01 {
	position:absolute; 
	bottom:0; 
	width:100%; 
	height:84px; 
	overflow: hidden; 
	background:url('../img/sec_5line.png') left bottom no-repeat; 
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-ms-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}

.sec-9{	
	position:relative;
	padding:30px 0 100px 0;
	background-color:#0d0e10;
}



.sec-9 .sub_line01 {
	position:absolute; 
	bottom:0; 
	width:100%; 
	height:84px; 
	overflow: hidden; 
	background:url('../img/sec_6line.png') left bottom no-repeat; 
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-ms-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
}

.sec-9-text1{
	height:250px;
}
.sec-9-text2 {
	position:absolute;
	top:0;
	left:25%;
	width:50%;
}

.sec-9 input[type=text] {
    padding: 2%;
    font:bold 1em "malgun gothic";
    margin-bottom: 10px;
    border: 3px solid red;
    width: 100%;
}

.vedio_img{padding:10px; margin:0; background:black; text-align:right;}
.vedio_img a{margin:0; padding:0;}
.vedio_img img{width:50%;}

@media screen and (max-width:1024px) {

.sec-9-text2 {
	position:absolute;
	top:0;
	left:20%;
	width:60%;
	}
.vedio_img img{width:80%;}
}

@media screen and (max-width:800px) {

.sec-9-text2 {
	position:absolute;
	top:0;
	left:10%;
	width:80%;
	}
.vedio_img img{width:80%;}
}


@media screen and (max-width:600px) {

.sec-9-text2 {
	position:relative;
	top:0;
	left:0;
	width:100%;
	}
.vedio_img img{width:80%;}
}

@media screen and (max-width:469px) {
	.sec9-btn img {
		max-width:40%;
	}
	.sec-9-text1{
	height:230px;
	}
.vedio_img img{width:80%;}
}

@media screen and (max-width:320px) {
	.sec-9-text1{
	height:180px;
	}
	.vedio_img img{width:100%;}
}


.sec-10{	
	position:relative;
	padding:50px;
	background-color:#372f2c;
}


.sec-11{	
	position:relative;
	padding:50px;
	background: url(../img/sec11_bg.jpg) no-repeat 50% 50%;
	background-size:cover;
	padding: 70px 0;
	z-index: 99;
}

.sec-11-text2{
	padding:60px 0 45px 0;
}


.sec-12{	
	position:relative;
	padding:50px;
	background-color:#372f2c;
}

.footer{width:100%;  text-align:center; background:#082746; line-height:0;}
.copyright{padding:1em 0; font:1.2em/1em dotum; color:#fff;}
.copyright a{color:#fff; text-decoration:none; padding:5px 10px; border-radius:3px; margin-left:20px; border:1px solid #fff;}
.privacy{display:inline-block; padding-bottom:10px;}
.privacy input,.privacy span{vertical-align:middle;}
.privacy span{font:12px/1.5em 'dotum'; letter-spacing:-1px;}
.privacy a{
    color: white;
    display:inline-block;
    font-size:11px;
    text-decoration:none;
    padding:5px;
    border-radius:2px;
    line-height:1em;
    border: 1px solid #424452;
    background-color: #292929;
    background-repeat: repeat-x;
    background: -webkit-linear-gradient(top, #3e72a7, #2f4252);
    background: -webkit-gradient(linear, left top, left bottom, from(#3e72a7), to(#2f4252));
    background: -moz-linear-gradient(top, #3e72a7, #2f4252);
    background: -ms-linear-gradient(top, #3e72a7, #2f4252);
    background: -o-linear-gradient(top, #3e72a7, #2f4252);
}


.logo_img img{width:35%; margin-right:20px;}
.photo{border:1px solid black;}
.photo img{width:100%; margin:0;}

.sampleView{background:#ededed; display:block; padding:0; overflow:hidden;}
.circel01{display:inline-block; border:1px solid #2260d2; padding:2px 7px 0; border-radius:30px; line-height:14px; font-size:10px; color:#2260d2; vertical-align:middle;}
.circel02{display:inline-block; padding:3px 3px 0; line-height:15px; color:#2260d2; font-size:14px; vertical-align:middle;}
.btnLine{width:100%; text-align:center;}
.btnLine td{padding:15px 0; background:#3a57bf; color:#fff;}
.medal_list{position:absolute; right:15px; top:35px;}
.medal_list img{width:105px;}
.sampleView li{position:relative; background:white; display:block; padding:20px 10px 20px; margin-bottom:7px; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.sampleView p{float:left; color:#777; margin-right:7px;}
.sample_subject{display:block; font:bold 20px/1.2em 'malgun gothic'; overflow:hidden; clear:both; margin:10px 0 5px;}

.tit_img img{width:20%;}
@media screen and (max-width:1024px) {

.sec-9-text2 {
	position:absolute;
	top:0;
	left:20%;
	width:60%;
	}
.tit_img img{width:100%;}
}

@media screen and (max-width:800px) {

.sec-9-text2 {
	position:absolute;
	top:0;
	left:10%;
	width:80%;
	}
.tit_img img{width:100%;}
}


@media screen and (max-width:600px) {

.sec-9-text2 {
	position:relative;
	top:0;
	left:0;
	width:100%;
	}
	
}

@media screen and (max-width:469px) {
	.sec9-btn img {
		max-width:40%;
	}
	.sec-9-text1{

	}
	.tit_img img{width:100%;}
	
}

@media screen and (max-width:320px) {
	.sec-9-text1{

	}
	.tit_img img{width:100%;}
	
}
.mainfont{text-align:center; background:url('../img/main.png') #493735 top center;}
.bar_font{text-align:center; background:url('../img/bar.png') top center;}


.main-top{
	background: url(../img/top_bg.jpg) no-repeat 50% 50%;
	background-size:cover;
    background-attachment: fixed;

	z-index: 99;
}


.sec-01{
	background-color:#eee;

}

.sec-02{
	background-color:#fff;
}

.sec-03{
	position:relative;
	background-color:#453325;

}

.sec-03-01{
	position:relative;
	width:614px;
}

.sec-03-011{
	position:absolute;
	top:0;
	left:0;

}

@media screen and (max-width:614px) {
	.sec-03-01{
		position:relative;
		max-width:100%;
	}
}


.sec-04{
	background: url(../img/sec_03_bg.jpg) no-repeat 50% 50%;
	background-size:cover;
    background-attachment: fixed;
	z-index: 99;
}

.sec-041{
	position:relative;
	width:614px;
}

@media screen and (max-width:614px) {
	.sec-041{
		position:relative;
		max-width:100%;
	}
}


.sec-042{
	position:absolute;
    top: 100px;
    left: 0;
}



.sec-05{
	background-color:#fff;
}



.sec-06{
	background-color:#202328;
}

.sec-061{
	position:relative;
	width:614px;
}

@media screen and (max-width:614px) {
	.sec-061{
		position:relative;
		max-width:100%;
	}
}

.sec-062{
	position:absolute;
	top:0;
	left:0;

}

.sec-063{
	position:absolute;
	top:0;
	right:0;
}

.sec-064{
	position:absolute;
	top:50%;
	left:0;
	margin-top:-17px;
}

.sec-07{
	background-color:#fff;
}

.sec-071{
	position:relative;
	width:614px;
}

@media screen and (max-width:614px) {
	.sec-071{
		position:relative;
		max-width:100%;
	}
}

.sec-072{
	position:absolute;
	top:0;
	left:0;

}

.sec-08{
	position:relative;
	background-color:#eee;	
	width:100%;
}

.sec-081{
	position:relative;
	width:614px;
	z-index:10;
}

@media screen and (max-width:614px) {
	.sec-081{
		position:relative;
		max-width:100%;
	}
}

.sec-082{
	position:absolute;
	top:0;
	left:0;
	z-index:1000;

}

.sec-083{
	position:relative;
	z-index:100;

}

.sec-09{
	position:relative;
	background: url(../img/ba_sec_07_bg.gif) repeat-x left center;


	z-index: 99;
}

.sec-091{
	position:relative;
	width:614px;
	z-index:10;
}

@media screen and (max-width:614px) {
	.sec-091{
		position:relative;
		max-width:100%;
	}
}

.sec-092{
	position:absolute;
	top:0;
	left:0;
	z-index:1000;

}


.sec-10{
	position:relative;
	background-color:#372f2c;	
}


.sec-11{
	position:relative;
	background-color:#fff;	
}

.sec-12{
	position:relative;
	background-color:#372f2c;	
}

.sec-13{
	position:relative;
	background-color:#fff;	
}

.sec-14{
	position:relative;
	background-color:#202328;	
}

.sec-141{
	position:relative;
	width:614px;
	z-index:10;
}

@media screen and (max-width:614px) {
	.sec-141{
		position:relative;
		max-width:100%;
	}
}

.sec-142{
	position:absolute;
	top:0;
	left:0;
	z-index:1000;

}

input[type=checkbox]{width:20px; height:20px; vertical-align:middle;}
span{vertical-align:middle;}

.playpause{width:100%; position:absolute; left:0%; right:0%; top:0%; bottom:0%; margin:auto; background-size:contain; background-position:top; cursor:pointer;}
.playpause img{width:100%; height:100%;}
.video{width:100%; max-width:100%; height:auto; background:black;}
.wrapper{margin:0 auto; display:block; width:100%; position:relative; max-width:100%; background:#000;}
@media screen and (max-width:614px) {.wrapper{margin:0 auto; display:block; width:auto; position:relative; max-width:100%;}}
.videoWrapper{display:block; padding:0 20px; background:#fff;}
iframe{width:100%; height:210px;}
    @media screen and (max-width:1920px) and (min-width:900px){
    iframe{width:900px; height:506px; margin:0 auto; display:table; background:#000;}
    }