@charset "utf-8";

/* common */
html, body {margin:0px; font-family: 'Roboto', sans-serif; font-weight:normal; line-height:1.5; word-wrap: break-word;}
select {border:1px solid #e1e1e1; padding:0 5px; height:26px; line-height:26px; vertical-align: middle; }
input[type="radio"] {vertical-align:middle;}
input[type="text"], input[type="password"] {border:1px solid #e1e1e1; padding:0 5px; height:24px; line-height:24px; vertical-align: middle; box-sizing:content-box;}
img {border:0px; vertical-align:middle;}
button {border:0px; background:none; cursor:pointer; margin:0px; padding:0px; vertical-align:middle; line-height:120%;}
ul,ol,dl,dd {list-style:none; margin:0px; padding:0px;}
li {list-style:none; padding:0px;}
a {text-decoration:none; color:#212121;}
a:hover {text-decoration:none;}
caption {height:0px; overflow:hidden; text-indent:-1000px; font-size:0px;}

.ac {text-align:center;}
.al {text-align:left;}
.ar {text-align:right;}
.mobileHide {display:none;}
.fr {float:right;}
.fl {float:left;}
.fn {float:none;}
.skip {font-size:0; width:0; height:0; text-indent:1000px; line-height:0; overflow:hidden;}

/* top */
.topLayout {height:100px; overflow:hidden; transition:0.3s all; background-color:#fff; border-bottom:1px solid #dbdbdb; position:absolute; z-index:101; width:100%; top:0px; left:0px;}
	.topHeadBox {height:30px; background-color:#f9f9f9;}
	.topHeadBoxIn {max-width:980px; margin:0 auto;}
	.topHeadBoxIn ul {float:right;}
	.topHeadBoxIn ul li {float:left;  background:url('/assets/eng/images/main/top_line.png') no-repeat 0 50%;}
	.topHeadBoxIn ul li a {display:inline-block; padding:2px 14px; font-size:11px;}
	.naviBox {height:70px; border-bottom:1px solid #dbdbdb;}
	.naviBoxIn {position:relative; max-width:980px; margin:0 auto;}
	.naviBox h1 {position:absolute; z-index:100; top:15px; left:0px; margin:0px; font-family:'icon_wv'; font-size:13px;}
	.naviBox h1 span {font-size:40px; vertical-align:middle;}
		.naviBoxMenu {margin: 0px 0px 0px 200px; padding-top:5px;}
		.naviBoxMenu > ul {float:right;}
		.naviBoxMenu > ul > li {float:left; position:relative;}
		.naviBoxMenu > ul > li > a {display:inline-block; text-align:center;color:#3c3c3c; line-height:37px; height:37px; min-width:89px; background:url('/assets/eng/images/main/pointer02.png') no-repeat 0 50%; padding:15px 10px; font-size:13px; font-weight:bold;}
		.naviBoxMenu > ul > li:first-child > a {background:none;}
		.naviBoxMenu > ul > li:first-child .subBox {border-left:1px solid #eee;}
			.subBox {position:absolute; width:100%; font-size:13px; border-right:1px solid #eee; padding-top:16px; height:240px;}
			.subBox ul {padding-left:17px;}
		.naviBoxMenuR {position: absolute;  z-index: 100;  top:25px; right: 25px; display:none}
		
.mobileBox {display:none}		
.popup_open {overflow: hidden;  width: 100%;  height: 100%;}		


.mobileBox {position: fixed;  top: 0; bottom: 0;  left: 0;  right: 0; height: 100%;  background: url(/assets/eng/images/wvCommon/trans.png);  border-top: 0; z-index:200; transition: 0.3s all;}
.mobileBoxIn {position: fixed; margin: 0;  left:-260px;  top: 0;  bottom: 0;  width: 250px;  z-index: 2000;  background-color: white;  padding: 0; transition: .1s all;}
.mobileBoxIn.on {left:0} 

.Mheader {background-color:#4d75d9; width: 250px;  height: 50px; line-height: 50px;  position: fixed; text-align: left;  text-indent: 10px;  color: white;  z-index: 2;}
.Mheader span {vertical-align:middle; font-size:20px; margin-left:10px}
.Mheader .close {position: absolute; right: 0; height:50px; padding: 0px; top: 0px; width: 39px;  text-align: center; text-indent: 0;}
.Mheader .close img {margin-top:16px; vertical-align:top;}

.MmenuBox {overflow-y: auto; height: 100%;}
.MmenuBoxIn {padding-top:50px; display: inline-block; width: 100%;}
.MmenuBoxIn > li {float:none}
.MmenuBoxIn > li > a {text-align: left;  height: 40px;  line-height: 40px;  background: #eee;  border-bottom: 1px solid white;   padding: 0;   text-indent: 10px; display:block; position:relative}
.MmenuBoxIn > li:first-child > a {background:#eee}
.MmenuBoxIn > li > a .fa {font-size: 30px; color: #494948;  transition: 0.3s all; position: absolute;  right:9px;  top: 50%;  margin-top: -17px;}

.MsubBox {display:none}
.MsubBox ul li a {background-color: white;  width: 100%;  display: inline-block;  height: 45px; color: #575757; line-height: 45px;  font-size: 14px;  text-indent: 20px;  border-bottom: 1px solid #eee;}

		
/* main */
.main_container {margin-top:100px; background-color: #f6f6f6; display:inline-block; width:100%; padding-bottom:52px;}
.main_containerIn {position: relative; max-width: 980px;  margin: 0 auto; padding:45px 0 52px;}

.timeBox ul li dl {margin-top:4px}
.timeBox ul li:first-child dl {margin-top:0}

.scrollBox {overflow:auto}
.mobileS {display:block}


/* board */

.board_view_header {border-bottom:1px solid #e8e8e8; margin-bottom:10px; padding-bottom:10px; display: inline-block; width: 100%;}

.board_view_content {border-bottom: 1px solid #e8e8e8;  padding-bottom: 10px;}

.board_txt {font-size: 13px; line-height: 1.8; color: #2f2f2f; margin:5px 0 0 15px; min-height: 300px;}
.header_name {float:left; font-size:16px; font-weight:bold; margin:0 0 0 15px;}
.header_day {float:right; font-size:14px; font-weight:bold; color:#3b3b3b; margin:0 15px}
  
.board_view_footer {text-indent:5px; margin:10px 0; font-size:12px; padding-bottom: 10px; border-bottom: 1px solid #e8e8e8; text-indent:5px}
.board_view_footer a {color:#4391e1; margin:0 5px;}
.board_view_footer span {color:#333}
  
.board_img {float: right; margin: 0px 15px 10px 15px; max-width: 300px; text-align:center}

.board_txtBox {display:inline-block; margin:0 auto; text-align:left; max-width:300px}
.board_img img {max-height:200px; margin-bottom:10px}
.board_img_name {font-size:16px; color:#397bae; font-weight:bold; margin:0;}
.board_img_info {font-size:13px; color:#2f2f2f; font-weight:bold; line-height:130%}
.board_img_info li {margin-bottom:5px}

.sub_loginBox {position: relative; border: 1px solid #dadada; background-color: #f9f9f9; margin-bottom:30px; display:inline-block; width:100%;}
.sub_loginBoxIn {padding:5px 10px 10px}
.sub_loginBox strong {font-size:16px; color:#4d75d9;}
.sub_loginBox a {text-decoration:underline; color: #4d75d9;}
.sub_loginBox p {font-size:16px; margin:10px 0}

.infoBox {border: 1px solid #dadada; background-color: #f9f9f9; display:inline-block; width:100%; margin-bottom:30px; position:relative}
.infoBox p {margin:0; font-weight:bold}
.infoBox ul {display:inline-block; width:100%; position:relative}

.infoBox ul li {float:left; width:100%; margin:5px 0; position:relative; padding: 0 15px;}
.infoBox ul li > span {min-width: auto;  font-size: 12px; color:#555; font-weight:bold; display:inline-block}
.infoBox ul li select , .infoBox ul li input[type="text"] , .infoBox ul li input[type="password"]{width:100%; vertical-align:middle; padding:0; text-indent: 5px;}

.infoBoxIn {display:inline-block; width:100%}
.infoBoxIn strong {padding:10px; display:block; color:#4d75d9}
.infoBoxIn .info_searchBox {position: absolute; bottom:5px; right: 10px;}
.infoBoxIn .info_search {padding:6px 10px 5px; margin:0; font-size: 13px; color: #fff;  border-radius: 4px;  margin:0;  transition: 0.2s all; background-color: #4d75d9;  border: 1px solid #4d75d9} 
.infoBoxIn .info_search:hover {background-color: #0b88e8; border: 1px solid #0b88e8;}
.infoBoxIn .infoInput {padding:0 10px}

.infoLoInput {padding:0 10px}
.infoLoInput input {width:35%; height:30px; line-height:30px; margin:0 10px 0 0; padding: 0; text-indent: 5px;}
.infoLoInput button {background-color: #4d75d9; border: 1px solid #4d75d9; font-size:13px; padding:0 10px; color: white; height:30px; line-height:30px; border-radius:4px; transition:0.2s all}
.infoLoInput button:hover {background-color: #0b88e8; border: 1px solid #0b88e8;}

.infoBoxIn .infoTxt {margin: 10px; display: inline-block; font-size: 14px;}
.infoBoxIn .infoTxt a {color: #4d75d9;}
.infoBoxIn .infoTxt a:hover {text-decoration:underline}

.searchName01 {width:92px}
.searchName02 {width:120px}

.infoBox02 {border: 1px solid #dadada;  background-color: #f9f9f9;  display: inline-block;  width: 100%;  position: relative; padding-bottom:10px}
.infoBox02 ul li {float:left; width:100%; margin:5px 0; position:relative;}
.infoBox02 ul li > span {min-width: 120px;  display: inline-block;  font-size: 12px; vertical-align: middle;  text-indent: 5px;  position: absolute;  left: 10px;   color: #555;
    text-align: center; height: 100%; background-color: #eee; border: 1px solid #ccc;}
.infoBox02 ul li select , .infoBox02 ul li input[type="text"] , .infoBox02 ul li input[type="password"] {width:100%; vertical-align:middle; padding:0; text-indent: 5px;}
.infoBox02 ul li > span .vc {display:table; height: 100%; text-align: center;  width: 100%;}
.infoBox02 ul li > span .vcIn {display: table-cell; vertical-align: middle; }
 
.inputBox02 {font-size: 14px;  padding-left: 10px;  margin: 0 10px -2px 130px;}

.infoBox03 {display: inline-block; width: 100%;  position: relative;}
.infoBox03 {border: 1px solid #dadada;  background-color: #f9f9f9;  display: inline-block;  width: 100%;  position: relative; padding-bottom:10px}
.infoBox03 ul li {float:left; width:100%; margin:5px 0; position:relative;}
.infoBox03 ul li > span {min-width: 120px;  display: inline-block;  font-size: 12px; vertical-align: middle;  text-indent: 5px;  position: absolute;  left: 10px;   color: #555;
    text-align: center; height: 100%; background-color: #eee; border: 1px solid #ccc;}
.infoBox03 ul li select , .infoBox03 ul li input[type="text"] , .infoBox03 ul li input[type="password"] {width:100%; vertical-align:middle; padding:0; text-indent: 5px;}
.infoBox03 ul li > span .vc {display:table; height: 100%; width: 100%;}
.infoBox03 ul li > span .vcIn {display: table-cell; vertical-align: middle; }
 
.inputBox03 {font-size: 14px;  padding-left: 10px;  margin: 0 10px -2px 141px;}



.w100 input[type="password"] {width:200px}

.w100 {width:100% !important}
.w90 {width:90% !important}
.w80 {width:80% !important}
.w70 {width:70% !important}
.w60 {width:60% !important}
.w50 {width:50% !important}
.w40 {width:40% !important}
.w30 {width:30% !important}
.w20 {width:20% !important}
.w10 {width:10% !important}

.inputBox {margin:0 30px; padding:0; display:inline-block; min-width: 150px;}
	.nameBox {min-width: 487px;}

.downBTN {display:inline-block; width:100%; border-top: 2px solid #5070ba;}
.downBTN ul {margin-top:5px}
.downBTN ul li a {margin:0 10px; display:block; font-size:12px}
.downBTN ul li a:hover {text-decoration:underline; color: #4d75d9;}
.downBTN ul li .fa {color:#333; margin:0 5px 0 0}
.downBTN ul li a:hover .fa {color:#4d75d9}

.linkBTN {display:inline-block; width:100%}
.linkBTN ul li {float:left; text-align: center;}
.linkBTN ul li a {font-size:13px;}
.linkBTN ul li a:before {content:"/";  margin:0 4px; color:black}
.linkBTN ul li a:hover {font-weight:bold; color: #4d75db;}
.linkBTN ul li:first-child a:before {display:none}

.mobile_select {display:none; margin:20px 0; text-align:right}

.sub_login_left {display:inline-block; margin-top:5px}
.sub_login_right {float:right; margin:3px 0 5px;}
.sub_login_right button {background-color: #4d75d9;  border: 1px solid #4d75d9; font-size: 13px;  padding: 0 10px;  color: white;  height: 30px; line-height: 30px; border-radius:4px}
.sub_login_right button:hover {background-color: #0b88e8; border: 1px solid #0b88e8;}

.searchBu { background-color: #4d75d9;  border: 1px solid #4d75d9;}


/* new */




@media all and (min-width:641px) and (max-width:1000px) {/* tablets */
	
	.main_container {margin-top: 70px}
	.main_containerIn {padding:25px 20px 52px}
	
 	.topLayout {height:70px !important} 
	.topHeadBox {display:none}
	.naviBox {padding:0}
	
	.bodyLayout {margin:20px 20px 0 !important}
	
	.naviBoxMenu ul {display:none}
	.naviBoxMenuR {display:block; top: 20px;}
	
	.main_Z1 {width:38% !important; margin-right:2%}
	.main_Z1 .video_view {width:100%}
	.main_Z2 {width:60%; border:0; margin: 0;}
	.Z2wrap {border: 1px solid #e4e4e4;}
	.main_Z3 {width:100%; margin-top: 20px;}
	
	.timeBox {position:absolute; right:15px}

	.history .year {width:100%}
	.history dl {width:100%; margin-left:0; background:none}
	.history dl dd {width:100%; margin:5px 0 0 0}
	.history dl dt {background:none; padding-left:0}
	
	.sInput {margin-top:-5px}
	.sInput input[type="text"] , .sInput select {margin-top:5px}
	
	.responsibility p {margin:5px 0 0}
	
	.inputBox {font-size: 12px; margin: 0 10px 10px 145px; width:100%}
	.inputBox .readonly {background-color:#ebeef7; border: 1px solid #e1e1e1;}
	.infoBox ul li {width:100% !important; margin:0; padding:0}	
	.infoBox ul li > span {min-width: 130px; display: inline-block; vertical-align: middle; position: absolute;  left: 15px; }
	.infoBox ul li select , .infoBox ul li input[type="text"] , .infoBox ul li input[type="password"] {width:40%}
    
    .detailBox ul li select , .detailBox ul li input[type="text"] , .detailBox ul li input[type="password"]	{width:60%}
	
	.infoBox02 .w10 , .infoBox02 .w20 , .infoBox02 .w30 , .infoBox02 .w40 , .infoBox02 .w50 , .infoBox02 .w60 , .infoBox02 .w70 , .infoBox02 .w80 , .infoBox02 .w90 , .infoBox02 .w100 {width:100% !important;}
	.infoBoxIn .info_searchBox {bottom:9px}
	
	.nameBox {min-width:auto}
	
	
	
	.board_img {max-width:100%; text-align:center; float:none}
	.board_img img {display:block; margin:0 auto 10px}
	.board_img_info {max-width:300px; margin:0 auto; text-align:left}
	.board_img_name {max-width:300px; margin:0 auto; text-align:left}
	
    
	  /* 팝업 */

    .popup_boxIn {margin: 10px; top: 0; left: 0; right:0; width: auto; overflow: auto;}
    .popupCBox_blank {max-height: none;}
}

@media all and (max-width:640px) {/* phones */
	
	
	.mobileS {display:none}	
	
	.topLayout {height:70px !important}
	.naviBox {height:auto; padding:0}
	.naviBox h1 {left:15px}
	
	.contentLayout {min-height: 300px}
	
	.main_container {margin-top: 70px}
	.main_containerIn {padding:25px 15px 52px}
	.Z2wrap .C_menu li a p {font-size:12px}
		
	.bodyLayout {margin:20px auto 0}
	.naviBoxMenuR {display:block; right: 15px; top: 15px;}
	.naviBoxMenuR .bu_Mobile {margin:0}
	
	.message {background:none; padding-top:0}
	.message img {width:100%}
	.message .txt {padding:40px 15px}
	.message .txt p.list_01 {width:100%}
	
	.main_Z1 {width:100%}
	.main_Z1 .video_view {width:100%; height:300px}
	.main_Z2 {width:100%; margin:20px 0}
	.main_Z3 {width:100%}
	
	.timeBox {position:absolute; right:6px}
	
	
	.intro-vision {padding:0}
	.intro-vision p {width:100%; margin:0}
	.intro-vision img {width:100%}
	
	.history .year {width:100%}
	.history dl {width:100%; margin-left:0; background:none}
	.history dl dd {width:100%; margin:5px 0 0 0; font-size:12px}
	.history dl dt {background:none; padding-left:0}
	
	
	.course dl dt {width:100%; background-color:#f7f7f7; padding: 10px;}
	.course dl dd {padding:10px}
	
	
	.board_img {float:none; width:100%; margin:0 0 20px 0; text-align:center; max-width:100%;}
	.board_img img {width:100%; max-width:300px; display:block; margin:0 auto 10px}
	
	.sInput {padding:0 10px 10px; margin-top:-5px}
	.sInput input[type="text"] {margin-top:5px; width: 90%;}
	.sInput select {width:90%; margin-top:5px}
	
	.mobileH {display:none}
	.mobile_select {display:block}


	.responsibility {width:100%; display:inline-block; background: none; background-color: #f6f6f6; padding: 10px 0; margin-top: 20px;}
	.responsibility strong {margin-left:10px}
	.responsibility p {padding-left:10px}
	
	
	.inputBox {font-size: 12px; margin: 0 10px 5px 145px; display: block; min-width: auto;}
	.infoBox ul li {margin:0; padding:0}	
	.infoBox ul li > span {min-width: 130px; position: absolute; left: 15px; font-size: 12px;}
	.nameBox {margin:0 12px 5px 145px}
	
	.infoLoInput input {width:100%; margin:0 0 10px 0}
	.infoLoInput button {width:100%; padding:0}
	
	.w10 , .w20 , .w30 , .w40 , .w50 , .w60 , .w70 , .w80 , .w90 , .w100 {width:100% !important;}
	
	.infoBoxIn .info_searchBox {position: relative; bottom:-6px; right: 0;  left: 0;  margin: 0;  padding: 0 10px;  margin-bottom:15px; clear:both}
	.infoBoxIn .info_search {width:100%}
	
	.sub_loginBoxIn {padding:5px 10px 0}
	
	.sub_login_right {float:none; display:inline-block; margin:0; width:100%}
	.sub_login_right button {padding: 0 8px; height: 25px; line-height: 25px; float:right; margin:5px 3px 0 3px}
	
	/* 팝업 */

    .popup_boxIn {margin: 10px !important; top: 0 !important; left:0 !important; right:0; width: auto !important; overflow: auto;}
    .popupCBox {padding:20px 10px 10px}
    .popupCBox_blank {max-height: none; padding:10px}
    
    .infoInput input[type="text"] , .infoInput input[type="password"] {width:96%; margin:3px 0}
    .infoInput .bu_blue_s {width: 100%; padding: 5px 0; margin: 5px 0;}
    
    
    p.board_img_name {max-width:300px; margin:0 auto; text-align:left}
    .board_img_info {max-width:300px; margin:0 auto; text-align:left}
    .board_img_info li {line-height:1.5}	
}