h1, h2 {
	text-align:center;
	font-family:"nanumR";
	font-size:18px;
	width:53%;
	margin:auto;
	color:#f64949;
}

h2 {
    font-family:"jalnan";
	text-align:center;
	margin:20px auto 80px auto;
    font-size:29px;
    line-height: 45px;
    color:#444;
    font-weight: normal;
}

#introduction, #class, #consultation {
	transform: skew(-0.03deg);
	width:100%;
	max-width:1460px;
	margin:auto;
	overflow:hidden;
}
#inner_introduction, #inner_class, #inner_consultation {
	width:100%;
	padding:100px 0;
	overflow: hidden;
	margin:auto;
}

/*---- banner ----*/
#banner {margin-top: 0px;}
#banner, #banner_silder div {height:700px;}
#banner_silder div:first-of-type {background:url(/assets/img/main_banner_1.jpg) center center; background-repeat:no-repeat; background-size:cover;}
#banner_silder div:nth-of-type(2) {background:url(/assets/img/main_banner_2.jpg) center center; background-repeat:no-repeat; background-size:cover;}
#banner_silder div:last-of-type {background:url(/assets/img/main_banner_3.jpg) center center; background-repeat:no-repeat; background-size:cover;}
#banner_silder div dl {height:410px; padding-top:290px; background-color:rgba(0,0,0,0.3);}
#banner_silder div dl dt, 
#banner_silder div dl dd {width:550px; padding-right:550px; text-align:left;}

/*---- index_notice ----*/
#index_notice {width:100%; height:60px; background:#222;}
#index_notice dl {width:calc(90% - 220px); max-width:1180px; padding-left:5%; padding-right:calc(5% + 220px); overflow: hidden; margin:auto;}

#index_notice dl dt,
#index_notice dl dd {float:left; line-height: 60px; height:60px;}

#index_notice dl dt {width:140px; color:white; letter-spacing: 1px; margin-right:20px;}
#index_notice dl dt span {color:white;}
#index_notice dl dt img {width:60px; float:left; margin-right:20px;}
#index_notice dl dd button {width:100px; line-height:60px; border:none; background:none; color:#888; position:relative; z-index:51; letter-spacing:1px;}

#index_notice dl dd:nth-of-type(1) {width:calc(100% - 290px);}
#index_notice dl dd ul {position: relative; z-index:51; width:100%; overflow: hidden;}
#index_notice dl dd ul li {float:left; color:#eee; transform: skew(-0.03deg);}
#index_notice dl dd ul li:nth-of-type(1) {color:#888; width:62px; text-align: center;}
#index_notice dl dd ul li:nth-of-type(2)::before {width:25px; content: "|"; margin:0 10px; color:#444;}
#index_notice dl dd ul li:nth-of-type(3) {width:calc(100% - 107px); overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}

/*---- introduction ----*/
#inner_introduction dl {width:300px; height:auto; min-height:320px; padding:50px; border-radius:30px; box-shadow:0 0 30px rgba(0,0,0,0.1); float:left; background:white;}
#inner_introduction dl:first-of-type {margin-left:30px;}
#inner_introduction dl:nth-of-type(2) {margin:0px 100px;}
#inner_introduction dl:last-of-type {margin-right:30px; float:right;}
#inner_introduction dl dt {margin-bottom:30px; text-align: center;}
#inner_introduction dl dt img {width:70px;}
#inner_introduction dl dd {font-size:14px; line-height:24px; text-align:justify;}
#inner_introduction dl dd:first-of-type {margin-bottom:20px; font-family: "nanumEB"; font-size:23px; line-height:35px; text-align:center;}


/*---- picture & video ----*/
#wrap_content {width:100%; overflow: hidden; padding:50px 0;}
#content {width:calc(100% - 136px); max-width:1280px; margin:auto; padding:50px 0;}
#inner_content {width:100%;}
#inner_content .box {float:left; width:320px; height:241px;}
#inner_content .box dl dt {width:320px; height:180px; background:#f5f6f8;}
#inner_content .box dl dt img {width:100%; height:100%;}
#inner_content .box dl dd:first-of-type {margin:20px 0 10px 0; font-size:13px; transform: skew(-0.03deg); color:#888;}
#inner_content .box dl dd:last-of-type {font-family:"nanumB"; font-size:15px; height:18px; line-height:18px; transform: skew(-0.03deg); display:block; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}

#content .more_Button {width:100%; text-align: center;}
#content .more_Button button {padding:15px 70px; border-radius: 30px; border:1px solid #ccc; background:white; margin-top:25px;}

div.video .box dl dd:last-of-type {font-family: "nanumRoundR" !important; font-weight: bold;}

/*---- consultation ----*/
#consultation {max-width:100%; background:#f5f6f8;}
#inner_consultation {max-width:1460px;}
#inner_consultation dl {margin-bottom:30px;}
#inner_consultation dl dt {font-size:16px; font-family: "nanumB"; transform: skew(-0.05deg);}
#inner_consultation dl dd {margin-top:10px; transform: skew(-0.01deg); }
#inner_consultation input,
#inner_consultation select,
#inner_consultation textarea {width:100%; padding:10px 0; background:none; border: none; border-bottom: solid 1px #888; font-family: "nanumR"; color:#888; transform: skew(-0.03deg);}
#inner_consultation div.div_consultation {width:950px; height:376px; margin:auto;}
#inner_consultation div.input_info {width:450px; float:left;}
#inner_consultation div.input_info dl:nth-of-type(-n+2) input {width:calc(100% - 5px); padding-left:5px;}
#inner_consultation div.input_content {width:450px; float:right;}
#inner_consultation div.input_content dl dd {margin-top:20px;}
#inner_consultation div.input_content dd:first-of-type {border: solid 1px #888; background-color:white;}
#inner_consultation div.input_content textarea {width:410px; height:190px; margin:20px; padding:0px; border:none;}
#inner_consultation div.input_content input {height:50px; padding:10px; color:#eee; border: none; background-color:#444; cursor: pointer;}

#inner_consultation select {
	background: url('/assets/img/icon_select.png') no-repeat 100% 50%;
	background-size: 8px 8px;
}

/*---- 반응형 ----*/
@media (max-width:1500px) {
	h1, h2 {width:60%;}
	#introduction, #class, #inner_consultation {max-width:1190px;}

	/*---- index_notice ----*/
	#index_notice dl dd:nth-of-type(1) {width:calc(100% - 260px);}
	#index_notice dl dd ul li:nth-of-type(3) {margin-right:0px;}

	/*---- introduction ----*/
	#inner_introduction dl {width:261px; padding:40px; min-height:290px;}
	#inner_introduction dl:nth-of-type(2) {margin: 0 50px;}
	#inner_introduction dl:last-of-type {float:left;}
	#inner_introduction dl dd {font-size:13px; line-height:22px;}
	#inner_introduction dl dd:first-of-type {font-size:21px; line-height:31px;}
}

@media (max-width:1200px) {
	/*---- common ----*/
	h1, h2 {width:80%;}
    #banner_silder div dt, #banner_silder div dl dd {margin-left:10%;}
    
	/*---- introduction ----*/
	/*
	#inner_introduction dl {width:calc(33.3% - 40px); padding:30px; min-height:0; box-sizing:border-box;}
	#inner_introduction dl:nth-of-type(2) {width:calc(33.3% - 40px); margin:0 30px;}
	#inner_introduction dl dd:first-of-type {font-size:18px; margin:0; line-height: 24px;}
	#inner_introduction dl dd:last-of-type {display:none;}
	*/

	#inner_introduction dl {width:70%; max-width:600px; min-height:0; text-align:center; height:auto;}
	#inner_introduction dl:first-of-type {margin:auto; float:none;}
	#inner_introduction dl:nth-of-type(2) {margin:50px auto; float:none;}
	#inner_introduction dl:last-of-type {margin:auto; float:none;}
	#inner_introduction dl dd {font-size:14px; line-height:24px;}
	#inner_introduction dl dd:first-of-type {font-size:23px; line-height:35px;}
	

	/*---- consultation ----*/
	#inner_consultation div.div_consultation {width:80%; height:auto;}
	#inner_consultation div.input_info {width:90%; margin:auto; float:none; height:186px;}
	#inner_consultation div.input_info dl:nth-of-type(n) {width:47.5%; height:63px;}
	#inner_consultation div.input_info dl:nth-of-type(2n-1) {padding-right:2.5%; float:left;}
	#inner_consultation div.input_info dl:nth-of-type(2n) {padding-left:2.5%; float:right;}
	#inner_consultation div.input_content {width:90%; margin:auto; float:none;}
	#inner_consultation div.input_content textarea {width:100%; height:150px;}
}

@media (max-width:900px) {
	/*---- common ----*/
	h1 {font-size:16px;}
	h2 {font-size:26px; line-height:40px;}

	/*
	#inner_introduction dl dd:first-of-type {font-size:16px; line-height:20px;}
	*/

}

@media (max-width:800px) {
	#banner_silder div dl dt, 
	#banner_silder div dl dd {width:80%; text-align:left;}

	/*---- index_notice ----*/
	#index_notice dl {width:95%; padding-left:2.5%; padding-right:2.5%;}

	#index_notice dl dd:nth-of-type(1) {width:calc(100% - 260px);}
	#index_notice dl dd ul li:nth-of-type(3) {margin-right:0;}
}


@media (max-width:600px) {
	/*---- common ----*/
	h1 {width:90%; font-size:14px;}
	h2 {width:90%; font-size:20px; line-height:30px; margin-top:10px; margin-bottom:40px;}

	#inner_introduction, #inner_class, #inner_consultation {padding: 60px 0;}
	
	/*---- banner ----*/
	#banner, #banner_silder div {height:400px;}
	#banner_silder div {border-radius:0;}
	#banner_silder div dl {height:255px; padding-top:145px;}
	#banner_silder div dl dt, 
	#banner_silder div dl dd {width:80%; padding-right:0; text-align:center;}
	

	/*---- index_notice ----*/
	#index_notice {height:50px; font-size:12px; transform: skew(-0.03deg);}
	#index_notice dl dt span {display:none;}
	#index_notice dl dt,
	#index_notice dl dd {line-height: 50px; height:50px;}

	#index_notice dl dt {width:75px; margin-right:5px;}
	#index_notice dl dt img {width:50px; margin-right:0px;}

	#index_notice dl dd button {font-size:12px; width:70px; line-height:50px;}
	#index_notice dl dd:nth-of-type(1) {width:calc(100% - 150px);}
	#index_notice dl dd ul li:nth-of-type(1) {width: 60px;}
	#index_notice dl dd ul li:nth-of-type(2) {width: 14px;}
	#index_notice dl dd ul li:nth-of-type(2)::before {margin:0 5px;}
	#index_notice dl dd ul li:nth-of-type(3) {width:calc(100% - 74px);}

	/*---- introduction ----*/
    #inner_introduction dl:nth-of-type(2) {margin:20px auto; float:none;}
	#inner_introduction dl dd {line-height:20px;}
	#inner_introduction dl dd:first-of-type {font-size:18px; line-height:30px; margin-bottom:0;}
    #inner_introduction dl dd:last-child {display: none;}

	/*---- consultation ----*/
	#inner_consultation div.div_consultation {width:95%; height:auto;}
	
	/*---- picture & video ----*/
	#content {width:calc(100% - 30px);}
}