@charset "utf-8";

/**** mobile layout *************************************************************************************************************/
@media screen and (max-width:640px) {
	body {min-width:320px; width:100%; height:100%;}

	#header {width:100%;}
	#header_content {height:100%; width:100%;}
	.main_header {height:59px; background:url('../images/common/header_bg.jpg') repeat; 
		background-position:20% top;
		background-repeat:no-repeat;
		background-size:cover;
		background-attachment:scroll; 
	}
	.sub_header {height:59px; background:url('../images/sub/sub_header_bg.gif') 0 0 repeat-x; border-bottom:1px solid #d3d3d3;}
	.logo {position:absolute; top:10px; left:15px;}
	.logo img {width:80%;}

	#gnb {display:none;}
	#topmenu {display:none;}

	/* nav */
	/*.allmenu , .allclose {float:right; display:block; margin:23px 20px 0 0; cursor:pointer; position:relative;}*/
	.all_btn {display:block;width:20px; height:20px;cursor:pointer; float:right; margin-right:20px;} 
	/* basic */ 
	.all_btn > span {width:20px;height:4px;display:block;position:relative;background-color:#fff; margin-top:27px; transition-duration:0.1s;} 
	.all_btn > span:before {content:"";width:20px;height:4px;position:absolute;left:0;top:-8px;display:block;background-color:#fff;transition-duration:0.1s;} 
	.all_btn > span:after {content:"";width:20px;height:4px;position:absolute;left:0;bottom:-8px;display:block;background-color:#fff;transition-duration:0.1s;} 
	/* basic hover */ 
	.all_btn:hover > span {background-color:#fff;} 
	.all_btn:hover > span:before {background-color:#fff;} 
	.all_btn:hover > span:after {background-color:#fff;} 
	/* active */ 
	.active > span {width:0;background-color:#fff;} 
	.active > span:before {top:0;background-color:#fff;transform:rotate(-45deg);} 
	.active > span:after {bottom:0;background-color:#fff;transform:rotate(45deg);} 
	/* active hover */ 
	.active:hover > span {width:0;background-color:#fff;} 
	.active:hover > span:before {top:0;background-color:#fff;transform:rotate(-45deg);} 
	.active:hover > span:after {bottom:0;background-color:#fff;transform:rotate(45deg);} 

	/*.allmenu , .allclose {float:right; display:block; margin:23px 20px 0 0; cursor:pointer; position:relative;}*/
	.all_btn2 {display:block;width:20px; height:20px;cursor:pointer; float:right; margin-right:20px;} 
	/* basic */ 
	.all_btn2 > span {width:20px;height:4px;display:block;position:relative;background-color:#333; margin-top:27px; transition-duration:0.1s;} 
	.all_btn2 > span:before {content:"";width:20px;height:4px;position:absolute;left:0;top:-8px;display:block;background-color:#333;transition-duration:0.1s;} 
	.all_btn2 > span:after {content:"";width:20px;height:4px;position:absolute;left:0;bottom:-8px;display:block;background-color:#333;transition-duration:0.1s;} 
	/* basic hover */ 
	.all_btn2:hover > span {background-color:#333;} 
	.all_btn2:hover > span:before {background-color:#333;} 
	.all_btn2:hover > span:after {background-color:#333;} 
	/* active */ 
	.active2 > span {width:0;background-color:#333;} 
	.active2 > span:before {top:0;background-color:#333;transform:rotate(-45deg);} 
	.active2 > span:after {bottom:0;background-color:#333;transform:rotate(45deg);} 
	/* active hover */ 
	.active2:hover > span {width:0;background-color:#333;} 
	.active2:hover > span:before {top:0;background-color:#333;transform:rotate(-45deg);} 
	.active2:hover > span:after {bottom:0;background-color:#333;transform:rotate(45deg);} 

	nav {display:block; z-index:1000;}
	#nav {position:absolute; top:59px !important; right:0; width:100%; text-align:center; z-index:1000;}
	#nav li {line-height:45px; background:#fff; font-size:15px; font-weight:700; position:relative;}
	#nav li a {color:#333; display:block; border-bottom:1px solid #d3d3d3; background:url('../images/mobile/nav_on.gif') 95% center no-repeat;}
	#nav li a.active {background:url('../images/mobile/nav_on.gif') 100% center no-repeat;}
	.nav_sub li {width:100% !important; font-size:13px !important; padding:0 !important; font-weight:400 !important; background:#f2f2f2 !important; line-height:35px !important;}
	.nav_sub li a {color:#666 !important; display:block !important; background:none !important; border-bottom:1px solid #d3d3d3 !important;}
	.nav_sub li a:hover {font-weight:700 !important;}

	/* mainvisual */
	#mainvisual {width:100%; height:auto; height:290px;}
	#mainvisual .visual_center {position:relative; width:100%;}
	#mainvisual .slideshow {width:100%; height:100%; margin:0; left:0;}
	#mainvisual .slideshow .slider {height:100%;}
	#mainvisual .slideshow .slider ul {height:100%;}
	#mainvisual .slideshow .slider ul li {height:100%;}
	#mainvisual .slider li {float:left; display:block; width:100%; height:100%;}
	#mainvisual .slider li.slider01 {
		background-position:30% top;
		background-repeat:no-repeat;
		background-size:cover;
	}
	#mainvisual .slider li.slider02 {
		background-position:30% top;
		background-repeat:no-repeat;
		background-size:cover;
	}
	#mainvisual .slider li.slider03 {
		background-position:30% top;
		background-repeat:no-repeat;
		background-size:cover;		
	}
	#mainvisual .slider li.slider04 {
		background-position:30% top;
		background-repeat:no-repeat;
		background-size:cover;	
	}

	#mainvisual .text1 {top:30%; left:50%; margin:0 0 0 -120px;}
	#mainvisual .text2 {top:30%; left:50%; margin:0 0 0 -130px;}
	#mainvisual .text3 {top:30%; left:50%; margin:0 0 0 -100px;}
	#mainvisual .text4 {top:30%; left:50%; margin:0 0 0 -100px;}
	#mainvisual .text p {font-size:12px;}
	#mainvisual .text span {font-size:41px;}

	.visual_center .pagi_wrap {bottom:90px; width:100%; left:0; margin-left:0;}
	.visual_center .pagination {width:100%;}
	.visual_center .pagination li span {display:inline-block; width:15px; height:15px;}
	
	/* main */
	#content_wrap {width:100%;}
	#contents {width:100%;}
	
	/* subvisual */
	#subvisual {width:100%; height:155px;
		background-position:50% center;
		background-repeat:no-repeat;
		background-size:cover;
	}
	#subvisual .visual_txt {width:100%;}
	#subvisual .visual_txt p {font-size:30px;}

	/* subtitle , subpath */
	#subtitle {width:100%; padding:30px 0; margin:0 0 30px 0;}
	#subtitle h4 {font-size:30px;}
	#sub_path {width:100%; height:40px; 
		background:url('../images/sub/path_bg.gif') 0 100% repeat-x;
	}
	.path_center {width:100%;}
	.path h3 {height:40px; width:40px; line-height:40px;}
	.path span {padding:0 10px; min-width:33%; line-height:40px; font-size:13px;}
	.path span.path_on {border-right:none; width:40%}
	.path span img {margin:18px 0 0 10px;}

	/* sub */
	#cont {padding:0 10px; width:auto;}
	#con_area {min-height:320px; padding:0 0 100px 0;}

	/* 01_01 */
	.intro span {display:block; margin:0 0 30px 0; clear:both;}
	.intro span img {width:100%;}
	.intro > div h5 {font-size:23px; line-height:30px; margin:0 0 20px 0; word-break:keep-all;}
	.intro > div p {font-size:15px; line-height:22px;;}
	.intro .left {text-align:left; width:100%; float:none;margin:0 0 20px 0;}
	.intro .right {padding:0; width:100%; float:none;}
	.intro .right p.sign {font-size:20px; text-align:right; margin:50px 0 0;}

	/* 01_02 */
	.history .right_wrap {overflow:hidden;}
	.right_wrap .hs_right {width:53%;}
	.right_wrap .hs_right .l_left {padding:0 0 0 30px; margin:0 0 20px 0; background:url('../images/sub/history_icon.png') left center no-repeat;}
	.right_wrap .hs_right .l_left span {font-size:30px;}
	.right_wrap .hs_right .l_right {padding:0 0 0 23px;}
	.right_wrap .hs_right .l_right dl dt {font-size:15px;}
	.right_wrap .hs_right .l_right dd {font-size:13px; word-break:keep-all; line-height:18px;letter-spacing: -0.03em; margin: 0 0 5px 0;}
	.left_wrap .hs_left {width:53%;}
	.left_wrap .hs_left .r_left {background:url('../images/sub/history_icon.png') right center no-repeat; padding:0 30px 0 0; margin:0 0 20px 0;}
	.left_wrap .hs_left .r_left span {font-size:30px;}
	.left_wrap .hs_left .r_right {padding:0 23px 0 0; text-align:right;}
	.left_wrap .hs_left .r_right dl dt {font-size:15px;}
	.left_wrap .hs_left .r_right dd {font-size:13px; word-break:keep-all; line-height:18px; margin: 0 0 5px 0;}
	.his01 , .his02 , .his03 , .his04 , .his05, .his06 {background:none;}

	/* 01_04 */
	.faculty {padding:30px 0;}
	.faculty .left {float:none; width:100%;}
	.faculty .left h4 {font-size:28px; margin:0 0 15px 0;}
	.faculty .left h5 {font-size:18px; margin:0 0 20px 0;}
	.faculty .left ul {padding:20px;}
	.faculty .left ul table th {font-size:14px;}
	.faculty .left ul table td {font-size:14px;line-height:25px;}
	.faculty .left p {font-size:15px;}
	.faculty .right {float:none; width:100%;}
	.faculty .right img {width:100%;}
	.faculty2 table thead th {font-size:14px; padding:10px 5px;}
	.faculty2 table tbody th {font-size:13px; padding:10px 5px;}
	.faculty2 table tbody td {font-size:13px; padding:10px 5px;}

	/* 01_05 */
	.map_area .map {width:100%; height:400px;}

	/* 02_01_01 */
	.concre ul.tab {margin:0 0 20px 0;}
	.concre ul.tab li {width:25%; min-width:25%; font-size:0.9em; word-break:keep-all;}
	.concre ul.tab li a {width:auto; height:60px; line-height:19px; padding:10px 5px 0;}
	.concre ul.tab li a:hover , .concre ul.tab li.on a {color:#fff; background:#ad1c1c; border:none; height:62px;}
	.concre ul.tab li.long a {padding:5px 0 0 !important;word-break:keep-all; height:65px; line-height:19px !important;}
	.concre ul.tab li.long a:hover, .concre ul.tab li.long.on a {height:67px;}
	.concre ul.tab li.short a {padding:15px 0 0; height:55px;}	
	.concre ul.tab li.short a:hover, .concre ul.tab li.short.on a {height:57px;}
	.concre_top {padding:20px; margin:0 0 40px 0;}
	.concre_top span {float:none; width:auto; padding-left:70px; background:url('../images/sub/con_icon.gif') left 0 no-repeat; font-size:18px;}
	.concre_top p {float:none; margin:0; font-size:15px; line-height:25px; word-break:keep-all;}
	.concre_center {padding:30px 0 0;}
	.concre_center h4 {float:none; width:100%; font-size:18px; margin:0 0 20px 0;}
	.concre_center div {float:none; width:100%;}
	.concre_center div table th {padding:10px; font-size:14px; word-break:keep-all;}
	.concre_center div table th img {display:block; text-align:center; margin:0 0 10px 0;}
	.concre_center div table td {padding:10px; font-size:13px; word-break:keep-all; line-height:22px;}

	/* 02_01_02 */
	.concre_center2 h4 {font-size:18px; margin:0 0 20px 0;}
	.concre_center2 {margin:0 0 40px 0;}
	.concre_center2 p img {width:100%;}
	.concre_3 h4 {float:none;}
	.concre_3 > div {float:none; width:100%; margin:0;}
	.concre_3 > div h5 {font-size:15px; margin:0 0 10px 0;}
	.concre_3 > div ul {padding:15px 10px;}
	.concre_3 > div ul li {font-size:14px; line-height:22px; margin:15px 0 0;}

	/* 02_01_03 */
	.concre_center3 {padding:40px 0;}
	.concre_center3 h4 {float:none; font-size:18px; margin:0 0 20px 0;} 
	.concre_center3 div {float:none; width:100%;}
	.concre_center3 div ul {background:none;}
	.concre_center3 div ul li span {float:none; width:100%; text-align:left; margin:0 0 10px 0; display:block; font-size:17px;}
	.concre_center3 div ul li dl {float:none; margin:0; width:100%;}
	.concre_center3 div ul li dl dt {font-size:15px;}
	.concre_center3 div ul li dl dd {font-size:14px; line-height:24px; word-break:keep-all;}
	.concre_step {padding:40px 0 0;} 
	.concre_step ul li p {float:none; width:100%;}
	.concre_step ul li p img {width:100%;}
	.concre_step ul li div {float:none; width:100%; margin:0;}
	.concre_step ul li div h5 {padding:20px 0 0; margin:0 0 20px 0; font-size:18px;}
	.concre_step ul li div dl dt {font-size:15px;}
	.concre_step ul li div dl dd {font-size:14px; line-height:24px;}

	/* 02_01_04 */
	.concre_center .table thead th {font-size:14px;}
	.concre_center .table tbody th {font-size:14px; }
	.concre_center .table tbody td {font-size:14px; line-height:18px;}

	/* 02_02_01 */
	.concre ul.tab2 {margin:0 0 20px 0;}
	.concre ul.tab2 li {width:25%; min-width:25%; font-size:12px; word-break:keep-all;}
	.concre ul.tab2 li a {width:auto; height:50px; line-height:50px; padding:0 5px;}
	.concre ul.tab2 li a:hover , .concre ul.tab2 li.on a {color:#fff; background:#ad1c1c; border:none; height:52px;}
	.concre ul.tab2 li.long a {padding:5px 0 0 !important; height:45px; line-height:19px !important; font-size:11px;}
	.concre ul.tab2 li.long a:hover, .concre ul.tab2 li.long.on a {height:47px;}
	
	.top2 {padding:20px; margin:0 0 40px 0;}
	.top2 span {float:none; width:auto; padding-left:70px; padding-top:10px; background:url('../images/sub/con_icon.gif') left 0 no-repeat; font-size:18px;}
	.top2 p {float:none; margin:0; font-size:15px; line-height:25px; width:100%; letter-spacing:-0.05em;}

	.concre_top4 {padding:20px; margin:0 0 40px 0;}
	.concre_top4 span.title {float:none; width:auto; background:url('../images/sub/con_icon2.gif') 10px 8px no-repeat; margin:10px 0 0; font-size:18px;padding:20px 0 0 80px;}
	.concre_top4 p {float:none; margin:0; width:100%; font-size:15px; line-height:25px; letter-spacing:-0.05em;}

	.poli {padding:30px 0 0;}
	.poli h4 {float:none; width:100%; font-size:18px; margin:0 0 20px 0;}
	.poli > div {float:none; width:100%;}
	.poli table tbody td {font-size:14px; line-height:23px; word-break:keep-all;}
	.poli table tbody td span {display:block; padding:0 0 0 10px; background:url('../images/sub/gray_dot.png') 0 10px no-repeat;}
	.poli table tbody td.longs {letter-spacing:-0.05em;}
	.poli table tbody td.longs2 {letter-spacing:-0.1em;}
	.poli table tbody td.longs3 {letter-spacing:-0.14em;}
	.poli table tbody td.left {width:60% !important;}
	.poli table tbody td.right {width:40% !important;}
	.poli ul {padding:40px 0;}
	.poli2 ul {padding:0 !important;}
	.poli ul li {float:none; margin:0 0 10px 0;}
	.poli ul li img {width:100%;}
	.poli p img {width:100%;}

	/* 02_02_04 */
	.concre_top3 div {float:none; width:auto; min-height:200px; height:auto;margin:20px 0 0 0; padding:20px 10px 0 20px;}
	.concre_top3 div span {padding:10px 0 0 70px; background:url('../images/sub/con_icon.gif') 0 0 no-repeat; font-size:18px; margin:0 0 10px 0;}
	.concre_top3 div p {font-size:15px; line-height:25px;}

	/* 03_01 */
	.top4 {margin:0 0 50px 0;}
	.top4 span {width:auto; background:url('../images/sub/con_icon.gif') 0 0 no-repeat; margin:20px 0 0;}
	.top4 p {width:100%; letter-spacing:-0.04em;}

	.crete h4 {float:none; width:100%; font-size:18px; margin:0 0 30px 0;}
	.crete div {float:none; width:100%;}
	.crete div ul li span {float:left; display:block; width:92px; height:92px; line-height:92px; text-align:center; font-size:16px; font-weight:700; color:#333;}
	.crete div ul li span.day1 {background:url('../images/sub/day1.png') 0 0 no-repeat;}
	.crete div ul li span.day2 {background:url('../images/sub/day2.png') 0 0 no-repeat;}
	.crete div ul li span.day3 {background:url('../images/sub/day3.png') 0 0 no-repeat;}
	.crete div ul li span.day4 {background:url('../images/sub/day4.png') 0 0 no-repeat;}
	.crete div ul li ol {width:61%; margin:0 0 0 20px;}
	.crete div ul li ol li , .crete div ul li p {font-size:15px; word-break:keep-all;}
	.crete div ul li ol li {background:url('../images/sub/gray_dot.png') 0 8px no-repeat; line-height:22px;}
	.crete div ul li ol li:first-child {background:url('../images/sub/gray_dot.png') 0 8px no-repeat;}
	.crete div ul li p {margin:30px 0 0 20px; width:58%;}
	.crete_ul {margin:40px 0 0; width:100%;}
	.crete_ul ul li {float:none; margin:0 0 10px 0;}
	.crete_ul ul li img {width:100%;}

	/* 05_01 */
	.top3 {padding:20px; margin:0 0 40px 0;}
	.top3 span {float:none; width:auto; padding-left:70px; padding-top:0; font-size:18px; line-height:22px; margin:0 0 20px 0;}
	.top3 p {float:none; margin:0; font-size:15px; line-height:25px; width:100%;}
	.vintage {margin:0 0 40px 0;}
	.vintage h4 {float:none; width:100%; font-size:18px; margin:0 0 20px 0;}
	.vintage div {float:none; width:100%;}
	.vintage div ul li {float:none; width:100%;}
	.vintage div ul li div {width:auto;}
	.vintage div ul li div p {width:auto; background:url('../images/sub/gray_dot.png') 0 8px no-repeat; font-size:15px; line-height:24px;}

	/* 05_02 */
	.vintage table td img {width:100%;}

	/* ���Խ��� */
	.counsel {width:100%;}
	.counsel h4 {padding:0 0 0 30px; font-size:15px; margin:0 0 20px 0; word-break:keep-all; line-height:20px;}
	.counsel th {font-size:14px; text-align:center; padding:10px 0;}
	.counsel td {font-size:13px; padding:10px 0 10px 10px;}
	.counsel td textarea {padding:5px;}
	.counsel div {margin:20px 0 0;}
	.counsel div a {padding:10px;font-size:14px;}

	/* footer */
	#footer {width:100%; height:auto; clear:both;}
	#footer_content {width:auto; padding:0;}
	#footer_content address.web_ad {display:none;}
	#footer_content address.mobile_ad {display:block; line-height:15px; font-size:11px; font-weight:400; color:#838383; text-align:center; padding:20px 0;}
	.section {padding:0; width:100%;}
	.section h2 {float:none; font-size:15px; line-height:auto; padding:30px 0 25px 20px; width:auto; background:url('../images/mobile/mobile_bar.gif') 20px 60px no-repeat;}
	.section h2 span {display:inline-block; font-size:16px;}
	.section .column1 {float:none; width:100%;}
	.section .column1 p img {width:100%;}
	.section .column2 {float:none; width:100%; margin:0;}
	.section .column2 ul {float:none; width:auto; margin:0 20px; padding-bottom:30px;}
	.section .column2 ul li span {width:20%;}
	#footer .top {text-align:center; padding:0 0 20px 0;}
	#footer .top a {text-align:center; display:inline-block; border:1px solid #4a4a4a; padding:2px 7px; font-size:11px; font-weight:400; color:#747474;}

	.pre {width:100%;}
}