@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');} @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');} body, h1, h2, h3, h4, h5, h6, input, textarea, select { font-family: 'Noto Sans KR', sans-serif; }

ul{list-style: none; padding: 0; margin: 0}

html {
    font-family: 'Noto Sans KR', sans-serif; 
    overflow-x: hidden;
    width: 100%
}
body {
    font-family: 'Noto Sans KR', sans-serif; 
    overflow-x: hidden;
    width: 100%
}

.banner{ margin-top:80px; background: url(../images/banner.jpg); background-size: cover; padding: 300px 100px; text-align: right}
.banner h2{font-size: 30px; line-height: 40px; font-weight: 300; color: #fff}
.banner h1{font-size: 40px; line-height: 50px; font-weight: 500; color: #fff}


.inner{max-width: 1280px; margin: 0 auto}


.form{width: 100%; background: #2e3a49}
.form ul{display: flex; list-style: none; align-items: center;padding: 0; margin: 0}
.form ul li{ padding: 5px 20px}
.form ul li span{ display: inline-block; margin-left: 10px; color: #fff; font-size: 16px; vertical-align:middle; }
.form input[type="text"]{background:#40454b; color: #fff; font-size: 16px; width: 37%; box-sizing: border-box; border: 0; box-shadow: 5px 5px 5px #333; padding: 10px; margin: 0 5px 0; display: inline-block}
.form select{background:#40454b; color: #fff; font-size: 16px; width: 17%; box-sizing: border-box; border: 0; box-shadow: 5px 5px 5px #333; padding: 7px 10px 10px 10px; margin: 0 5px 0; display: inline-block}
.form .btn{background: #ffefd1; margin: 0; padding: 30px 50px; border-radius: 0}
.form .btn {font-size: 18px; color: #333; font-weight: 500; }

.s01{text-align: center; padding: 100px 0}
.s01 h1{font-size: 40px; color: #2e3a49; font-weight: 300; line-height: 45px; margin-bottom: 15px}

.s02{text-align: center; padding: 100px 0; background: #ffefd1}
.s02 h1{font-size: 50px; color: #1e1e1e; font-weight: 400; line-height: 60px; margin: 100px 0}



.video {
  width: 100%;
  max-width: 800px;
  margin: 30px auto;
box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}
 
.video-container {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 50%;
}
 
iframe {
  z-index: 1;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}



.s02 .tit3{ max-width: 980px; margin: 100px auto 0 auto}
.s02 .tit3 ul{display: flex; text-align: center}
.s02 .tit3 ul li{flex:1}
.s02 .tit3 ul li p{font-size: 20px; line-height: 25p; color: #000; margin: 20px 0 10px 0}
.s02 .tit3 ul li h2{font-size: 45px; line-height: 50p; color: #000; margin: 0; font-weight: 600}


.s02 .subtitle{font-size: 40px; color: #2e3a49; font-weight: 300; line-height: 50px; margin-bottom: 15px; margin-top: 100px;}




.s03{background: url(../images/bg02.jpg); background-size: cover; padding: 100px 0px; text-align: center}
.s03 h1{font-size: 50px; color: #1e1e1e; font-weight: 400; line-height: 60px; margin: 0px 0 30px 0}
.s03 p{font-size: 30px; color: #1e1e1e; font-weight: 400; line-height: 40px; margin: 0px 0 100px 0}

.s03 .tit2{ max-width: 1000px; margin: 100px auto 0 auto}
.s03 .tit2 ul{display: flex; text-align: center; margin-bottom: 40px}
.s03 .tit2 ul li{flex:1}



.s04{width: 100%}
.s04 ul{display: flex; text-align: center}
.s04 ul li{width: 50%}
.s04 ul li:last-child{padding:160px 50px}
.s04 ul li h1{font-size: 50px; line-height: 60px; font-weight: 400; margin: 0 0 80px 0}
.s04 ul li p{font-size: 30px; line-height: 40px; font-weight: 300; margin: 0 0 80px 0;}
.s04 .btn1{display: inline-block; padding: 10px 20px; color: #fff; background:#383a42; border:1px #383a42 solid; font-size: 20px;margin: 0 10px;transition: all .3s ease-in-out; }
.s04 .btn1:hover{ background:#fff;  color:#333; border:1px #333 solid; text-decoration:none;transition: all .3s ease-in-out; }
.s04 .btn2{display: inline-block; padding: 10px 20px; color: #222; background:#ffefd1; border:1px #ffefd1 solid; font-size: 20px; margin: 0 10px;transition: all .3s ease-in-out;}
.s04 .btn2:hover{ background:#fff;  color:#333; border:1px #333 solid; text-decoration:none;transition: all .3s ease-in-out; }



.s05{padding: 100px 0px; text-align: center}
.s05 h1{font-size: 50px; color: #1e1e1e; font-weight: 400; line-height: 60px; margin: 0px 0 30px 0; padding:0 10px 20px 10px; border-bottom: 1px solid #003663; display: inline-block}
.s05 p{font-size: 30px; color: #1e1e1e; font-weight: 400; line-height: 40px; margin: 0px 0 100px 0}

.s05 .tit2{ max-width: 1200px; margin: 100px auto 0 auto}
.s05 .tit2 ul{display: flex; text-align: center; margin-bottom: 40px}
.s05 .tit2 ul li{flex:1; margin: 0 20px}


.s06{padding: 100px 0px 0 0; text-align: center; background: #33363d}
.s06 h1{font-size: 50px; color: #fff; font-weight: 400; line-height: 60px; margin: 0px 0 30px 0;}
.s06 p{font-size: 30px; color: #fff; font-weight: 400; line-height: 40px; margin: 0px 0 100px 0}

.s06 .tit2{ max-width: 1000px; margin: 100px auto 0 auto}
.s06 .tit2 ul{display: flex; text-align: center; margin-bottom: 40px}
.s06 .tit2 ul li{flex:1}
.cheklist{padding: 30px; border: 1px solid #ffefd1}

.box{padding: 30px 0; text-align: left; position: relative}
.box h3{font-size: 30px; line-height: 35px; color: #fff; font-weight: 300; 
    display: inline-block; margin: 0}
.box input[id="cb1"] + label, .box input[id="cb2"] + label, .box input[id="cb3"] + label, .box input[id="cb4"] + label, .box input[id="cb5"] + label, .box input[id="cb6"] + label, .box input[id="cb7"] + label, .box input[id="cb8"] + label, .box input[id="cb9"] + label, .box input[id="cb10"] + label, .box input[id="cb11"] + label {
	position: absolute;
    right: 0;
	width: 40px;
	height: 40px;
	border: 0px solid #bcbcbc;
	cursor: pointer;
    vertical-align: middle;
    background: url(../images/checkoff.png);
    background-repeat: no-repeat;
    background-size: 40px 40px
}

.box input[id="cb1"]:checked + label {
				background: url(../images/checkon.png);
    background-repeat: no-repeat;
    background-size: 40px 40px
			}


.box input[id="cb1"] {
	display: none;
}

.box input[id="cb2"]:checked + label {
				background: url(../images/checkon.png);
    background-repeat: no-repeat;
    background-size: 40px 40px
			}


.box input[id="cb2"] {
	display: none;
}
.box input[id="cb3"]:checked + label {
				background: url(../images/checkon.png);
    background-repeat: no-repeat;
    background-size: 40px 40px
			}


.box input[id="cb3"] {
	display: none;
}
.box input[id="cb4"]:checked + label {
				background: url(../images/checkon.png);
    background-repeat: no-repeat;
    background-size: 40px 40px
			}


.box input[id="cb4"] {
	display: none;
}
.box input[id="cb5"]:checked + label {
				background: url(../images/checkon.png);
    background-repeat: no-repeat;
    background-size: 40px 40px
			}


.box input[id="cb5"] {
	display: none;
}
.box input[id="cb6"]:checked + label {
				background: url(../images/checkon.png);
    background-repeat: no-repeat;
    background-size: 40px 40px
			}


.box input[id="cb6"] {
	display: none;
}
.box input[id="cb7"]:checked + label {
				background: url(../images/checkon.png);
    background-repeat: no-repeat;
    background-size: 40px 40px
			}


.box input[id="cb7"] {
	display: none;
}
.box input[id="cb8"]:checked + label {
				background: url(../images/checkon.png);
    background-repeat: no-repeat;
    background-size: 40px 40px
			}


.box input[id="cb8"] {
	display: none;
}
.box input[id="cb9"]:checked + label {
				background: url(../images/checkon.png);
    background-repeat: no-repeat;
    background-size: 40px 40px
			}


.box input[id="cb9"] {
	display: none;
}
.box input[id="cb10"]:checked + label {
				background: url(../images/checkon.png);
    background-repeat: no-repeat;
    background-size: 40px 40px
			}


.box input[id="cb10"] {
	display: none;
}
.box input[id="cb11"]:checked + label {
				background: url(../images/checkon.png);
    background-repeat: no-repeat;
    background-size: 40px 40px
			}


.box input[id="cb11"] {
	display: none;
}


.s06 .topline{height: 130px; width: 1px ; background: #ffefd1; margin: 0 auto}
.s06 h2{color: #ffefd1; font-size: 30px; line-height: 35px; margin: 30px 0; font-weight: 300}
.s06 .qna{padding: 0px; width: 100% ; margin-top: 100px}
.s06 .qna ul{display: flex; text-align: center}
.s06 .qna ul li{font-size: 27px; line-height: 35px; font-weight: 300; color: #fff; padding: 30px; word-break: keep-all; letter-spacing: -0.5px}
.s06 .qna ul li a{color: #2e3a49 ;font-size: 30px; line-height: 35px; font-weight: 300;}

.s06 .qna ul li:first-child{background: #2e3a49; width: 80%}
.s06 .qna ul li:last-child{background: #ffefd1; width: 20%}







.s07{padding: 100px 0px; text-align: center}
.s07 h1{font-size: 50px; color: #1e1e1e; font-weight: 400; line-height: 60px; margin: 0px 0 30px 0; }
.s07 p{font-size: 30px; color: #1e1e1e; font-weight: 400; line-height: 40px; margin: 0px 0 100px 0}

.s07 .tit2{ max-width: 1200px; margin: 100px auto 0 auto}
.s07 .tit2 ul{display: flex; text-align: center; margin-top: 80px}
.s07 .tit2 ul li{flex:1}
.s07 .tit2 ul li p{font-size: 18px; line-height: 25px; margin: 10px 0 0}
.s07 .tit2 ul li p b{font-size: 20px}





.s08{padding: 100px 0px; text-align: center}
.s08 h1{font-size: 50px; color: #fff; font-weight: 400; line-height: 60px; margin: 0px 0 50px 0; }
.s08 p{font-size: 30px; color: #fff; font-weight: 400; line-height: 40px; margin: 0px 0 100px 0}

.s08 .tit2{ max-width: 1200px; margin: 100px auto 100px auto}
.s08 .tit2 ul{display: flex; text-align: center; margin-top: 80px; text-align: center}
.s08 .tit2 ul li{flex:1; text-align: center}
.s08 .tit2 ul li p{font-size: 18px; line-height: 25px; margin: 10px 0 0}
.s08 .tit2 ul li p b{font-size: 20px}



.s09{padding: 100px 0px; text-align: center}
.s09 h1{font-size: 50px; color: #1e1e1e; font-weight: 400; line-height: 60px; margin: 0px 0 80px 0; }
.s09 p{font-size: 30px; color: #1e1e1e; font-weight: 400; line-height: 40px; margin: 0px 0 100px 0}

.s09 .tit2{ max-width: 1200px; margin: 100px auto 0 auto}
.s09 .tit2 ul{display: flex; text-align: center; margin-top: 80px}
.s09 .tit2 ul li{flex:1}
.s09 .tit2 ul li p{font-size: 18px; line-height: 25px; margin: 10px 0 0}
.s09 .tit2 ul li p b{font-size: 20px}







.s10{width: 100%}
.s10 ul{display: flex; text-align: center}
.s10 ul li{width: 50%}


@media (max-width:1300px) {
     .banner{margin-top:0px; }
    .form ul li{padding: 5px 0; flex: auto}
    .s06 .qna ul li{flex: 1}
    
}



@media (max-width:800px) {
    
    .banner{ margin-top:0px; padding: 50px 10px; text-align: center}
    .banner h2{font-size: 16px; line-height: 25px;}
    .banner h1{font-size: 25px; line-height: 30px}
    
    .form ul{display: block}
    .form ul li{width: 100%; padding: 15px}
    .form input[type="text"]{margin: 5px 6px 0 0; width: 92%}
	.form select{ width: 27%; margin: 5px 6px 0 0; }
	.form .btn{ display: inline-block; width:92%; padding: 10px 0px; text-align:center;border-radius: 0}
	.form .btn {font-size: 18px; color: #333; font-weight: 500; }

    
    .s01{padding: 50px 10px}
    .s01 h1{font-size: 20px; line-height: 30px}
    .s01 img{width: 100%}
    
    .s02{padding: 50px 10px}
    .s02 h1{font-size: 20px; line-height: 30px; margin: 50px 0}
    .s02 img{width: 100%}
    .s02 .tit3 ul{display: block; }
    .s02 .tit3 ul img{width: 60%}
    .s02 .tit3 ul li{margin:10px 0}
    .s02 .subtitle{font-size: 18px; line-height: 30px; margin: 50px 0}
    
    
    .s03{padding: 50px 10px}
    .s03 h1{font-size: 20px; line-height: 30px; margin: 50px 0}
    .s03 p{font-size: 16px; line-height: 25px; margin-bottom: 30px}
    .s03 img{width: 100%}
    
    .s03 .tit2{margin: 0}
    
    .s04{padding: 50px 10px}
    .s04 h1{font-size: 20px; line-height: 30px; margin: 50px 0}
    .s04 p{font-size: 16px; line-height: 25px; margin-bottom: 30px}
    .s04 img{width: 100%}
    .s04 ul{display: block}
    .s04 ul li{width: 100%}
    .s04 ul li:last-child{padding:40px 20px;}
    .s04 ul li h1{ font-size: 20px; line-height: 30px; margin-bottom: 30px}
    .s04 ul li p{font-size: 16px; line-height: 25px; margin-bottom: 30px}
    
    .s04 .btn1, .s04 .btn2{width: 100%; margin: 10px 0; display: block;;}
    
    
    .s05{padding: 50px 10px}
    .s05 h1{font-size: 20px; line-height: 30px; margin: 50px 0}
    .s05 p{font-size: 16px; line-height: 25px; margin-bottom: 30px}
    .s05 img{width: 100%}
    
    
    .s06{padding: 50px 10px}
    .s06 h1{font-size: 20px; line-height: 30px; margin: 50px 0}
    .s06 p{font-size: 16px; line-height: 25px; margin-bottom: 30px}
    .s06 img{width: 100%}
    
    .cheklist{padding: 15px;}
    .box h3{font-size: 18px; padding-right: 50px; line-height: 25px}
    .s06 h2{font-size: 18px; line-height: 30px}
    
    .s06 .qna ul{display: block}
    .s06 .qna ul li:first-child{width: 100%}
    .s06 .qna ul li:last-child{width: 100%}
    
    .s07{padding: 50px 10px}
    .s07 h1{font-size: 20px; line-height: 30px; margin: 50px 0}
    .s07 p{font-size: 16px; line-height: 25px; margin-bottom: 30px}
    .s07 img{width: 100%}
    
    .s07 .tit2 ul{margin-top: 50px; display: block}
    .s07 .tit2 ul li{ width: 100%; margin: 15px 0}
    .s07 .tit2 ul li img{width: 70%}
    
    .s08{padding: 50px 10px}
    .s08 h1{font-size: 20px; line-height: 30px; margin: 50px 0}
    .s08 p{font-size: 16px; line-height: 25px; margin-bottom: 30px}
    .s08 img{width: 100%}
    
    .s08 .tit2 ul{margin-top: 50px; display: block}
    .s08 .tit2 ul li{ width: 100%; margin: 15px 0}
    .s08 .tit2 ul li img{width: 100%}
    
    .s10 ul{display: block}
    .s10 ul li{width: 100%;}
    .s10 ul li img{width: 100%}
    
}
























