@charset "utf-8";

@import url(common.css);

/* container */
#container { width:100%; position:relative; display:Table; padding:0; height:817px; margin-top:117px; background:url('/img/english/M_visual01.jpg') center center / cover no-repeat; background-size:cover; *background-size:100% auto}
#container:before {z-index:1;content:''; position:absolute; width:463px; height:389px; left:0; bottom:0; background:url('/img/english/M_visual02.png') left bottom / auto no-repeat;}
#container:after {z-index:1; content:''; position:absolute; width:414px; height:314px; right:0; bottom:0; background:url('/img/english/M_visual03.png') center center / auto no-repeat;}
#container div.border{text-align:center; margin:0 auto; position:absolute; top:30px; bottom:30px; left:30px; right:30px; display:block; background:transparent; border:1px solid #ddd; padding: 0;}
#container .borderWrap{width:100%; height:100%; display:block; position:relative; }
#container .borderWrap2{width:100%; height:50%; display:block; position:relative; }
#container .Wrap{width:1080px; height:100%; display:table; margin:0 auto; text-align:center; }

/* content */
.main_content {z-index:9; position:relative; width:100%; display:table-cell; vertical-align:middle;  margin:0 auto; font-family:"notokr"; font-weight:400;}
.content_area_1 {width:290px; height:403px; float:left; margin: 0 auto; }
.content_area_2 {width:760px; height:246px;  float:right; }
.content_area_3 {width:760px; height:142px;  float:right; margin-top:15px;}


/* visual */
.area_visual {position:relative; width:100%; height:181px; text-align:center;}
.area_visual p.slogan1 {    margin-top: 40px; font-size:50px; font-family:"notokr"; font-weight:500; color:rgba(255,255,255,.8); line-height:1.4; text-transform: uppercase; letter-spacing:-1px;}
.area_visual p.slogan2 {font-size:25px;     letter-spacing: 1px;font-family:"notokr"; font-weight:100; color:rgba(255,255,255,.8); line-height:1.4;}



/* Ministers Message */
.ministers {height:142px; background:#fff;}
.ministers .border{text-align:center; margin:0 auto; position:absolute; top:10px; bottom:10px; left:10px; right:10px; display:block; background:transparent; border:1px solid #ddd; padding: 0;}
.ministers a {width:100%; height:100%; display:block;}
.ministers h2 {color:#333; font-size:13px; line-height:1.4; letter-spacing:5px; text-align:left;  text-transform: uppercase; font-family:"notokr"; font-weight:500; padding:20px 0 0 20px; }
.ministers p {color:#777; font-size:12px; line-height:1.4; margin:15px 0 0 20px; letter-spacing:0px; text-align:left; }
.ministers a:hover, .ministers a:active, .ministers a:focus { text-decoration:none}
.ministers a span{ text-indent:-9999px; width:19px; height:19px; position:absolute; top:20px; right:20px; background:url('/img/controls.png') 0px -162px / auto no-repeat }
.ministers a:hover span{ background-position:-21px -162px; transition:all 0s ease-out; -ms-transition:all 0s ease-out; -webkit-transition:all 0s ease-out; -moz-transition:all 0s ease-out; }

/* Representative Numbers */
.Re_Num {height:246px; margin-top:15px; background:#383745;}
.Re_Num .border{text-align:center; margin:0 auto; position:absolute; top:10px; bottom:10px; left:10px; right:10px; display:block; background:transparent; border:1px solid rgba(255,255,255,.2); padding: 0;}
.Re_Num .border2{text-align:center; margin:0 auto; position:absolute; top:10px; bottom:46%; left:10px; right:10px; display:block; background:transparent; border:1px solid rgba(255,255,255,.2); padding: 0;}
.Re_Num a {background:url('/img/english/bg_Re_Num.png') bottom 20px right 20px / auto no-repeat; width:auto; height:auto; display:block; padding:20px; }
.Re_Num h2 {position:relative; color:#fff; height:60px; font-size:13px; line-height:1.4; letter-spacing:5px; text-align:left;  text-transform: uppercase; font-family:"notokr"; font-weight:500;  }
.Re_Num h2:after{position:absolute; width:6px; height:6px; border-radius:100%; border:2px solid rgba(255,255,255,.5); bottom:0; left:0px; }
.Re_Num h3 {position:relative; color:#fff; height:60px; font-size:13px; line-height:1.4; letter-spacing:5px; text-align:left;  text-transform: uppercase; font-family:"notokr"; font-weight:500; margin:15px 0 0 0;  }
.Re_Num h3:after{content:''; position:absolute; width:6px; height:6px; border-radius:100%; border:2px solid rgba(255,255,255,.5); bottom:0; left:0px; }
.Re_Num ul {position:relative; margin:0 0 0 0;padding-top:0px; }
.Re_Num ul li { font-size:13px; line-height:1.4; color:#fff; text-align:left;font-family:"notokr"; font-weight:300;letter-spacing:1px; }
.Re_Num ul:before{position:absolute; top:0; left:0; width:17px; height:3px; background:#fff; }
.Re_Num a:hover, .Re_Num a:active, .Re_Num a:focus { text-decoration:none}

/* Press */
.Press {position:relative; width:50%; height:246px; float:left; background:#fff;}
.Press .border{text-align:center; margin:0 auto; position:absolute; top:10px; bottom:10px; left:10px; right:10px; display:block; background:transparent; border:1px solid #ddd; padding: 20px;}
.Press h2 {height:40px; color:#333; font-size:13px; line-height:1.4; letter-spacing:5px; text-align:left;  text-transform: uppercase; font-family:"notokr"; font-weight:500; padding:0; }
.Press ul { border-top:1px solid #ebebeb; position:relative; overflow:hidden; margin:0;}
.Press ul li {text-align:left; height:28px; border-bottom:1px solid #ebebeb; width:100%; line-height:28px; font-family:"notokr"; font-weight:400; font-size:14px;}
.Press ul li a,
.Press ul li a:visited {position:relative; font-family:"notokr"; font-weight:400; font-size:13px; color:#555; padding-left:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; }
.Press ul li a:hover { text-decoration:underline}
.Press .btnMore{ text-indent:-9999px; width:19px; height:19px; position:absolute; top:20px; right:20px; background:url('/img/english/controls.png') 0px -162px / auto no-repeat }
.Press .btnMore:hover{ background-position:-21px -162px; transition:all 0s ease-out; -ms-transition:all 0s ease-out; -webkit-transition:all 0s ease-out; -moz-transition:all 0s ease-out; }
.Press ul li a:before{ content:''; position:absolute; top:7px; left:5px; width:4px; height:1px; margin:0; display:block; background-color:#777; -ms-transform:skewY(135deg); -webkit-transform:skewY(135deg); transform:skewY(135deg); }

/* Photos */
.Photos {position:relative; width:50%; height:246px; float:left; background:#ededed;}
.Photos .border{text-align:center; margin:0 auto; position:absolute; top:10px; bottom:10px; left:10px; right:10px; display:block; background:transparent; border:1px solid rgba(0,0,0,.1); padding: 20px;}
.Photos h2 {height:30px; color:#333; font-size:13px; line-height:1.4; letter-spacing:5px; text-align:left;  text-transform: uppercase; font-family:"notokr"; font-weight:500; padding:0; }
.Photos .btnMore{ text-indent:-9999px; width:19px; height:19px; position:absolute; top:20px; right:20px; background:url('/img/controls.png') 0px -162px / auto no-repeat }
.Photos .btnMore:hover{ background-position:-21px -162px; transition:all 0s ease-out; -ms-transition:all 0s ease-out; -webkit-transition:all 0s ease-out; -moz-transition:all 0s ease-out; }
.Photos p {position:absolute; top:78px; right:25px;}
.Photos p img {width:151px; height:122px;}
.Photos p span {position:absolute; top:45px; left:-2px; display:block; width:16px; height:33px; background:url('/images/template/01016/main/photo1_arrow.png') no-repeat left top;}
.Photos .owl-carousel .owl-wrapper-outer{height:140px}
.Photos .owl-wrapper{height:100%;}
.Photos .owl-item{height:100%;}
.Photos .owl-item > div{width:100%; height:100%; display:block; position:relative;}
.Photos .owl-item > div > a{width:100%; height:100%; display:block;}
.Photos .owl-item > div > a > div{position:absolute; top:0; width:100%; height:140px; margin:0 auto!important;}
.Photos .owl-item > div > a > dl{position:absolute; bottom:0; width:100%; height:20px;}
.Photos .owl-item > div > a > dl > dt{display:inline-block; vertical-align:bottom; font-family:"notokr"; font-weight:500; font-size:18px; color:#333; }
.Photos .owl-item > div > a > div > span{width:100%; height:100%; display:block; }
.Photos img{opacity:0;}
/* 더보기 */
.btn_more{ position:absolute; top:30px; right:25px; background:url('/images/template/01016/main/btn_more.png') no-repeat 0 0; width:4px; height:18px; text-indent:-10000px; z-index:10; cursor:pointer }

/* Help Desk */
.help_desk {position:relative; height:142px; background:#fff;}
.help_desk .border{text-align:center; margin:0 auto; position:absolute; top:10px; bottom:10px; left:10px; right:10px; display:block; background:transparent; border:1px solid rgba(255,255,255,.2); padding: 20px;}
.help_desk li > div{width:100%; height:100%;  background:url('/img/english/bg_Help.png') right bottom / auto no-repeat}
.help_desk li h2 {height:30px; color:#fff; font-size:13px; line-height:1.4; letter-spacing:5px; text-align:left;  text-transform: uppercase; font-family:"notokr"; font-weight:500; padding:0; }
.help_desk li {position:relative; width:25%; height:100%; display:table; float:left; vertical-align:middle; }
.help_desk li:nth-child(1){background:#4c516e;}
.help_desk li a {width: 100%; display:table-cell; vertical-align:middle;  height:auto;border-left:1px solid #d3d3d3;}
.help_desk li:nth-child(1), .help_desk li:nth-child(2){border-left:0;}
.help_desk li a:hover, .help_desk ul li :active, .help_desk ul li a:focus { text-decoration:none}
.help_desk li p.tit {margin:0 0 0 20px; font-family:"notokr"; font-weight:500; text-align:left; font-size:20px; color:#383745; }
.help_desk li p.txt {height:29px; margin:15px 0 0 20px; line-height:1.4; font-family:"notokr"; font-weight:400; text-align:left; font-size:13px; color:#5c5c5c; }
.help1 {background:url('/img/english/bg_Help1.jpg') no-repeat top 26px right 26px #fff;}
.help2 {background:url('/img/english/bg_Help2.jpg') no-repeat top 26px right 26px #fff;}
.help3 {background:url('/img/english/bg_Help3.jpg') no-repeat top 26px right 26px #fff;}
.help_desk li span{ text-indent: -120px; overflow: hidden; position:relative; width:37px; height:8px; margin:15px 0 0 20px; display:block; text-align:left; padding:0;}
.help_desk li span:before { content:''; position:absolute; bottom:1px; right:11%; height:100%; width:1px; background:#888; -webkit-transform:skew(-135deg, 0deg); -moz-transform:skew(-135deg, 0deg); -ms-transform:skew(-135deg, 0deg); -o-transform:skew(-135deg, 0deg); transform:skew(-135deg, 0deg); } 
.help_desk li span:after { content:''; position:absolute; bottom:0; right:0; height:1px; width:100%; background:#888;}


@media screen and (max-width:1200px) {				

	/* container */
	#container { height:1437px; margin-top:112px; background:url('/img/english/M_visual01_m.png') top center / contain no-repeat #a79f9d;}
	#container .Wrap{width:100%; }
	.main_content{display:block;}
	#container div.border{top:15px; right:15px; bottom:15px; left:15px;}
	.content_area_1,
	.content_area_2,
	.first_box,
	.news,	
	div.box_popup,
	.M_link,
	.info ul.info_link,
	.moe_site .site_list ul,
	.box_bannerZone {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	
	.content_area_1, .content_area_2,
	.area_visual .visual p,
	.M_link ul, .M_link div.ebook, 
	.info, .sns_cnt {-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease;}

	.area_visual{height:111px;}		
	.area_visual p.slogan1{font-size:23px;}
	.area_visual p.slogan2{font-size:17px;}
	.content_area_2{width:100%; height:auto; margin-top:15px;}
	#container:before{display:none;	}
	
	#container:after{display:none;	}
.Press, .Photos{float:none; width: 100%; margin:0 auto;}
 .content_area_1, .content_area_2, .content_area_3{float:none; width: 85%; margin:0 auto;}
.Photos, .content_area_2{margin-top:15px;}
 .content_area_3{margin-top:15px; height:285px;}
.help_desk li{width:50%;    height: 142px;}
.help_desk{height:285px;}
.help_desk li:nth-child(2){border-bottom:1px solid #ddd;}
}

@media screen and (max-width:690px) {	

	
}

@media screen and (max-width:480px) {
	
	
}

@media screen and (max-width :380px) {
		#container{margin-top:97px;}
	
	
	
}