@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);


/* 공통 */
body{
    font-family: 'Noto Sans KR', sans-serif;
    color: #3d3d3d;
    position: relative;
}
.clearFix:after{
    content: '';
    display: block;
    clear: both;
}

.area{
  min-width:1200px;
   height:90%;
  background-size:cover;
  background-position: center;
  margin-top:109px;
}
a{text-decoration: none; color: #353535;}
.blind{position: absolute; left: -9999em;}
.mCenter{width: 1050px; margin: 0 auto;}
.wid100{width: 100%;}
.subMarB{margin-bottom: 80px;}
.floatL{float: left;}
.floatR{float: right;}

.e_font{font-family: 'Roboto Condensed', sans-serif;}

/*#section0, #section1, #section2{min-width: 1200px;}*/
#slide1{background-color:#f0f0f0;}
#section1{background-color:#fff;}
#section2{background-color:#f0f0f0;}
#section3{background:#fff url("../img/m_4.jpg") no-repeat center; background-size:cover;}
#section4{background:#000 url("../img/m_5.jpg") no-repeat center; background-size:cover;}

.area{width:1200px; margin:0 auto; position:relative; overflow:hidden; height:100%;}
	.area .textArea{width:100%; position:absolute; top:27%;}
	.area .imgArea{position:absolute; right:0; top:30%; transition:all .5s;}

	.t_title{width:100%;}
		.sub{font-size:30px; font-weight:100; letter-spacing:15px; padding-left:2px; display:block;}
		.title{font-size:60px; font-weight:bold; letter-spacing:1.5px; display:block;}

		.t_btn{width:150px; height:40px; text-align:center; background-color:#f7931d; line-height:40px; margin:100px 0;}
			.t_btn a{color:#fff; width:100%; display:block;}
			.t_sub{font-size:12px; color:#999; line-height:2em;}

			.t_btn a:link, .t_btn a:visited{color:#fff;}

.indexArea{width:15px; position:absolute; top:50%; margin-top:-50px; margin-left:0; transition:all .5s; right:220px;}
	.indexArea li{width:10px; height:10px; margin:20px 0; border-radius:5px; border:1px solid #666;}
		.this_page{background-color:#666;}
.scrollArea{position:absolute; bottom:30px; left:50%; margin-left:-20px; font-size:12px;}
	.scrollArea img{display:block; margin:0 auto 10px;}

#section0 .indexArea{position:absolute; top:50%;}

	#slide1 .textArea{left:110px;}

#slide2{background:#fff url("../img/m2_back.jpg") no-repeat center; background-size:cover;}
	#slide2 .textArea{right:110px; text-align:right;}
		#slide2 .title2{font-size:40px; display:block;  margin-bottom:10px;}
	#slide2 .imgArea{left:0; width:700px;}
			#slide2 .bold{font-weight:bold;}
			#slide2 .red{color:#a70e12;}
		#slide2 .sub2{font-size:14px; line-height:1.8em;}

	#slide3{background-color:#f0f0f0;}
		#slide3 .textArea{left:110px;}
			#slide3 .t_title{width:50%; margin-right:50%;}
			#slide3 .title3{display:block; margin-bottom:50px; font-size:40px; text-align:left; line-height:1.5em;}
			#slide3 .sub3{display:block; font-size:14px; color:#333; line-height:1.8em; text-align:left;}
			#slide3 .bold{font-weight:bold;}
			.orange{color:#e6823b;}
			.orange span{color:#e6823b;}
			#slide3 .imgArea{top:-10%; right:3%; width:700px;}
		.red{color:#a70e12;}
		#slide3 .red span{color:#a70e12;}


#section1 .textArea{right:110px; text-align:right;}
	#section1 .sub{letter-spacing:9px;}
	#section1 .t_btn{float:right;}
#section1 .imgArea{left:0; top:-280px; width:700px;}

#section2 .textArea{left:110px; top:30%;}
	#section2 .sub{letter-spacing:9.5px;}
	#section2 .t_sub{font-size:16px; margin-top:50px;}
#section2 .imgArea{width:700px; right:0; bottom:0;}
	.imgArea img{width:100%;}


#section3 .textArea{width:100%; top:55%; margin-top:-220px; text-align:center;}
#section3 .t_s_title{color:#fff; font-size:18px;}
	#section3 .t_s_title .color{color:#6787d8; letter-spacing:18px; padding-left:18px; font-size:20px; line-height:2em;}

	#section3 .t_s_title:after{content:""; display:block; width:80px; height:1px; background-color:#fff; margin:40px auto 30px;}

	#section3 .t_title{font-size:80px; font-weight:100; color:#fff; text-shadow:5px 5px 5px rgba(26,35,57,0.5);}
		#section3 .t_title .bold{font-weight:bold; color:#fff;}
		#section3 .t_title .i_helmet{position:absolute; transform:translate(-15px,-20px) rotate(30deg); width:50px;}
			#section3 .t_title .i_helmet img{width:100%;}

			#section3 .t_btn{background-color:#151d31; margin:100px auto 0; padding:0 10px; font-size:14px;}
				#section3 .t_btn a{width:100%; display:block; width:100%;}

			#section3 .t_sub{font-size:25px; color:#fff; font-weight:100;}
				#section3 .t_sub .small{color:#fff; font-size:18px;}

				#section3 .scrollArea span{color:#fff;}
				#section3 .indexArea li{border:1px solid #fff;}
					#section3 .this_page{background-color:#fff;}


#section4 form{width:800px; margin:0 auto; position:absolute; left:50%; margin-left:-400px; top:57%; margin-top:-270px;}
	fieldset{border:none;}
		fieldset legend{font-size:40px; color:#fff; text-align:center; font-weight:100; margin-bottom:30px;}

		fieldset p{width:100%; height:40px; margin-bottom:25px; line-height:40px;}
			label{color:#fff; display:block; float:left; width:15%; font-size:18px;}

			input, textarea{height:30px; float:left; width:83%; background-color:rgba(225,225,225,0.9); border:1px solid #fff; padding:5px;}
			textarea{height:150px;}

			.n_letter{letter-spacing:37px;}
			.nu_letter{letter-spacing:9.2px;}

		#section4 .btnArea{background-color:#151d31; margin:150px auto 0; padding:0 5px; width:150px;}
		#section4 .btnArea input{width:100%; display:block; border:none; background-color:#151d31; color:#fff; line-height:40px; height:40px; padding:0 5px;}

		#section4 .indexArea li{border:1px solid #fff;}
			#section4 .this_page{background-color:#fff;}

			.btnArea input{cursor:pointer;}


@media screen and (min-width:768px) and (max-width:1200px){
  .title3{
    font-size:40px !important;
  }
#container section{width:100%; height:100%; padding-top:143px; overflow:hidden;}
	section .area{width:100%; left:0; position:relative; height:100%; margin:0;}

	.area .textArea{position:absolute; top:100px;}
	.t_title{width:100%;}
		.sub{font-size:30px; font-weight:100; letter-spacing:14.5px; padding-left:2px; display:block;}
		.title{font-size:60px; font-weight:bold; letter-spacing:1.5px; display:block;}

		.t_btn{width:150px; height:40px; text-align:center; line-height:40px; margin:70px 0;}
			.t_btn a{color:#fff; width:100%; display:block;}
			.t_sub{font-size:12px; color:#999;}

	.area .imgArea{position:absolute; right:0; top:100px;}

.indexArea{position:absolute; right:3%; top:50%; margin-top:-70px;}
	.indexArea li{width:10px; height:10px; margin:20px 0; border-radius:5px; border:1px solid #666;}
		.this_page{background-color:#666;}
.scrollArea{position:absolute; bottom:30px; left:50%; margin-left:-20px; font-size:12px;}
	.scrollArea img{display:block; margin:0 auto 10px;}

#section0 .indexArea{top:50%;}
#slide1 .textArea{left:5%;}
#slide1 .imgArea{width:500px; margin:0; right:5%; top:180px;}
	.imgArea img{width:100%;}

	#slide2 .textArea{right:110px; text-align:right;}
		#slide2 .title2{font-size:40px; display:block;  margin-bottom:10px;}
	#slide2 .imgArea{left:5%; width:550px; top:45%;}
			#slide2 .bold{font-weight:bold;}
			#slide2 .red{color:#a70e12;}
		#slide2 .sub2{font-size:14px; line-height:1.8em;}

	#slide3{background-color:#f0f0f0;}
		#slide3 .textArea{left:110px;}
			#slide3 .t_title{width:100%;}
			#slide3 .title3{display:block; margin-bottom:50px;}
			#slide3 .sub3{font-size:25px; color:#333; display:block; margin-bottom:20px; line-height:1.7em;}

			#slide3 .title3 img{width:400px;}
		#slide3 .imgArea{top:-5%; right:3%; width:700px;}
			#slide3 .imgArea img{position:absolute; top:0;}


#section1 .textArea{right:8%;}
	#section1 .sub{letter-spacing:2.1px;}
	#section1 .t_btn{float:right;}
#section1 .imgArea{left:0; top:-200px; width:500px;}

#section2 .textArea{left:5%; top:80px;}
	#section2 .sub{letter-spacing:9.5px;}
	#section2 .t_sub{font-size:16px; margin-top:30px;}
#section2 .imgArea{right:7%; bottom:0; width:500px;}
	#section2 .imgArea img{position:absolute; bottom:-100px;}


#section3 .textArea{width:100%; top:50%; margin-top:-230px; text-align:center;}
#section3 .t_s_title{color:#fff; font-size:18px;}
	#section3 .t_s_title .color{color:#6787d8; letter-spacing:21px; padding-left:18px; font-size:14px;}

	#section3 .t_s_title:after{content:""; display:block; width:80px; height:1px; background-color:#fff; margin:40px auto 0;}

	#section3 .t_title{font-size:60px; font-weight:100; color:#fff; text-shadow:5px 5px 5px rgba(26,35,57,0.5);}
		#section3 .t_title .bold{font-weight:bold; color:#fff;}
		#section3 .t_title .i_helmet{position:absolute; transform:translate(-15px,-20px) rotate(30deg); width:45px;}
			#section3 .t_title .i_helmet img{width:100%;}

			#section3 .t_btn{background-color:#151d31; margin:100px auto 0; padding:0 5px;}
				#section3 .t_btn a{width:100%; display:block; width:100%;}

			#section3 .t_sub{font-size:25px; color:#fff; font-weight:100;}
				#section3 .t_sub .small{color:#fff; font-size:18px;}

				#section3 .scrollArea span{color:#fff;}
				#section3 .indexArea li{border:1px solid #fff;}
					#section3 .this_page{background-color:#fff;}


#section4 form{width:650px; margin:0 auto; position:absolute; left:50%; margin-left:-325px; top:50%; margin-top:-250px;}
	fieldset{border:none;}
		legend{font-size:40px; color:#fff; text-align:center; font-weight:100; margin-bottom:30px;}

		fieldset p{width:100%; height:40px; margin-bottom:25px; line-height:40px;}
			label{color:#fff; display:block; float:left; width:15%; font-size:16px;}

			input, textarea{height:30px; float:left; width:83%; background-color:rgba(225,225,225,0.9); border:1px solid #fff; padding:5px;}
			textarea{height:150px;}

			.n_letter{letter-spacing:30px;}
			.nu_letter{letter-spacing:8.2px;}

		#section4 .btnArea{background-color:#151d31; margin:150px auto 0; padding:0 5px; width:150px;}
		#section4 .btnArea input{width:100%; display:block; border:none; background-color:#151d31; color:#fff; line-height:40px; height:40px; padding:0 5px;}

		#section4 .indexArea li{border:1px solid #fff;}
			#section4 .this_page{background-color:#fff;}

			.btnArea input{cursor:pointer;}
}

@media screen and (min-width:1201px) and (max-width:1600px){
  .title3{
    font-size:40px !important;
  }
	.indexArea{position:absolute; right:5%; top:50%; margin-top:-60px; transition:all .5s;}
	#section0 .imgArea{right:3%;}
	#section0 .indexArea{top:50%;}
}

@media screen and (min-width:980px) and (max-width:1200px){
  .title3{
    font-size:35px !important;
  }
  #slide3 .sub3{font-size:14px;}
	.area{min-width:980px; max-width:1200px; width:100%;}
	.area .textArea{top:220px;}
	.area .imgArea{right:5%;}
		.imgArea img{width:100%;}

	#slide1 .textArea{left:5%;}
	#slide1 .imgArea{top:30%; width:650px;}
	#section1 .textArea{right:8%;}
		#section1 .sub{letter-spacing:9px;}
		#section1 .t_btn{float:right;}
	#section1 .imgArea{left:0; top:-100px; width:550px;}

	#section2 .textArea{left:5%; top:220px;}
		#section2 .sub{letter-spacing:9.2px;}
		#section2 .t_sub{font-size:16px; margin-top:30px;}
	#section2 .imgArea{right:7%; bottom:0; width:650px;}
		#section2 .imgArea img{position:absolute; bottom:-100px;}

	#section3 .textArea{width:100%; top:50%; margin-top:-130px; text-align:center;}
	#section3 form{top:50%; margin-top:-210px;}
}

@media screen and (min-width:768px) and (max-width:979px){
  .title3{
    font-size:35px !important;
  }
  #slide3 .sub3{font-size:12px;}
	.area{min-width:768px; max-width:979px; width:100%;}
	.area .textArea{top:220px;}
	.area .imgArea{right:5%;}
		.imgArea img{width:100%;}

		.area .sub{font-size:25px; letter-spacing:12.5px;}
		.area .title{font-size:50px;}

	#slide1 .textArea{left:5%;}
	#slide1 .imgArea{top:40%; width:550px;}

		#slide2 .textArea{right:8%; text-align:right;}
		#slide2 .title2{margin-bottom:10px;}
		#slide2 .imgArea{left:3%; width:500px; top:48%;}

		#slide2 .sub2{font-size:12px;}


	.indexArea{top:50%; margin-top:-70px;}
	#section0 .indexArea{position:absolute; top:50%; margin-top:-70px;}
	#section1 .textArea{right:8%;}
		#section1 .sub{letter-spacing:7.8px;}
		#section1 .t_btn{float:right;}
	#section1 .imgArea{left:0; top:-100px; width:550px;}

	#section2 .textArea{left:5%; top:220px;}
		#section2 .sub{letter-spacing:8.2px;}
		#section2 .t_sub{font-size:16px; margin-top:30px;}
	#section2 .imgArea{right:7%; bottom:0; width:550px;}
		#section2 .imgArea img{position:absolute; bottom:-100px;}

	#section3 .textArea{width:100%; top:50%; margin-top:-130px; text-align:center;}
	#section4 form{top:50%; margin-top:-210px;}

}


@media screen and (min-width:320px) and (max-width:767px){
  .title3{
    font-size:22px !important;
  }
  .title3 .br{display:block;}

	.area{min-width:320px; max-width:767px; width:100%;  left:0; position:relative; height:100%; margin:0;}

	.area .textArea{top:120px;}
		.area .sub{font-size:16px; letter-spacing:10px;}
		.area .title{font-size:35px;}

		.area .t_btn{width:100px; height:30px; line-height:30px; margin:20px 0;}
			.t_btn a{font-size:12px;}
			.t_sub{font-size:10px;}

	.area .imgArea{width:200px;}
	.imgArea img{width:100%;}

	.indexArea{display:none;}

	.scrollArea{bottom:7px; left:50%; margin-left:-20px; font-size:10px;}
		.scrollArea img{width:20px; margin:0 auto 5px;}

	#slide1 .textArea{left:8%;}
	#slide1 .imgArea{right:8%; top:55%; width:250px;}

		#slide2 .textArea{right:8%; text-align:right;}
		#slide2 .title2{font-size:25px; display:block;  margin-bottom:10px;}
		#slide2 .imgArea{left:8%; width:250px; top:50%;}

		#slide2 .sub2{display:none;}

		#slide3 .textArea{left:5%;}
			#slide3 .t_title{width:100%;}
			#slide3 .title3{ display:block; margin-bottom:30px;}
				#slide3 .title3 img{width:200px;}
			#slide3 .sub3{display:none;}
			#slide3 .bold{font-weight:bold;}
			#slide3 .imgArea{top:5%; right:3%; width:300px;}
				#slide3 .imgArea img{position:absolute; top:0;}

	#section1 .textArea{right:8%;}
		#section1 .sub{letter-spacing:6.5px;}
	#section1 .imgArea{left:0; top:30px; width:250px;}

	#section2 .textArea{left:8%; top:130px;}
		#section2 .sub{letter-spacing:7px;}
		#section2 .t_sub{font-size:12px; margin-top:20px;}
	#section2 .imgArea{right:5%; bottom:-10px; width:270px;}
		#section2 .imgArea img{position:absolute; bottom:0;}


	#section3 .textArea{margin-top:-120px;}
	#section3 .t_s_title{font-size:14px;}
		#section3 .t_s_title .color{letter-spacing:15.5px; font-size:12px;}

		#section3 .t_s_title:after{width:30px; height:1px; margin:20px auto 0;}

		#section3 .t_title{font-size:35px;}
			#section3 .t_title .i_helmet{width:30px;}
				#section3 .t_btn{margin:40px auto 0; width:130px; font-size:12px;}
				#section3 .t_sub{font-size:18px;}
					#section3 .t_sub .small{font-size:14px;}


	#section4 form{width:300px; margin:0 auto; position:absolute; left:50%; margin-left:-150px; top:50%; margin-top:-125px;}

		#section4  legend{font-size:30px;}

		fieldset p{width:100%; height:30px; margin-bottom:10px; line-height:30px;}
			label{padding-right:1%; font-size:12px; overflow:hidden; display:inline-block; width:18%;}

			input, textarea{height:20px; width:78%; padding:1%;}
			textarea{height:80px;}

			.n_letter{letter-spacing:12px;}
			.nu_letter{letter-spacing:4px;}

		#section4 .btnArea{margin:80px auto 0; width:100px;}
		#section4 .btnArea input{line-height:30px; height:30px; cursor:pointer; font-size:12px;}
}

@media screen and (min-width:481px) and (max-width:767px){
	#slide1 .textArea{left:10%;}
	#slide1 .imgArea{right:5%; top:190px; width:340px;}

	#slide2 .textArea{right:8%; text-align:right;}
		#slide2 .title2{font-size:25px; display:block;  margin-bottom:10px;}
		#slide2 .imgArea{left:3%; width:350px; top:40%;}

	#slide3 .textArea{left:5%;}
		#slide3 .t_title{width:100%;}
		#slide3 .title3{display:block; margin-bottom:30px;}
			#slide3 .title3 img{width:200px;}
		#slide3 .sub3{display:none;}
		#slide3 .bold{font-weight:bold;}
		#slide3 .imgArea{top:0%; right:3%; width:450px;}
			#slide3 .imgArea img{position:absolute; top:0;}
      #slide3 .title3 .br{display:inline;}

	#section1 .textArea{right:10%;}
		#section1 .sub{letter-spacing:6.5px;}
		#section1 .t_btn{float:right;}
	#section1 .imgArea{left:0; top:-50px; width:320px; left:0;}

	#section2 .textArea{left:10%; top:130px;}
		#section2 .sub{letter-spacing:6.8px;}
		#section2 .t_sub{font-size:12px; margin-top:20px;}
	#section2 .imgArea{right:5%; bottom:-40px; width:300px;}
		#section2 .imgArea img{position:absolute; bottom:0;}

	.scrollArea{bottom:15px; left:50%; margin-left:-15px; font-size:10px;}
		.scrollArea img{width:20px; margin:0 auto 5px;}


	#section4 form{width:450px; position:absolute; left:50%; margin-left:-225px; top:50%; margin-top:-125px;}
		legend{font-size:20px;}
		fieldset p{width:100%; height:30px; margin-bottom:10px; line-height:30px;}
			textarea{height:80px;}

			.n_letter{letter-spacing:24px;}
			.nu_letter{letter-spacing:6px;}

		#section4 .btnArea{margin:80px auto 0; width:100px;}
		#section4 .btnArea input{line-height:30px; height:30px; cursor:pointer; font-size:12px;}
}