@charset "utf-8";
/* 공통 */
.bx-controls *{display:block;}
.bx-controls-auto-item a,
.bx-controls-direction a{text-indent:-9999px; font-size:0; line-height:0;}
.bx-controls-auto-item a.active{display:none;}

#visual{position:relative; overflow:hidden; width:100%; text-align:center;}
#visual .slogan{position:absolute; top:210px; left:0; width:100%; font-size:50px; color:#fff; line-height:120%;}

#link{width:100%; height:281px; padding:33px 0 0 0; background:url(/foreign/en/img/main/bg_btn.gif) repeat; text-align:center;}
#link h3{width:250px; height:52px; line-height:52px; margin:0 auto 42px; color:#fff; font-size:25px; font-weight:normal; border-radius:26px; background:#23235d;}
#link ul {max-width:1400px; margin:0 auto;}
#link ul li {display:inline-block; width:16%; vertical-align:top;}
#link ul li *{display:block;}
#link ul li .ico{width:112px; height:112px; margin:0 auto 10px; border-radius:50%; background:#fff url(/foreign/en/img/main/ico_btn.png) no-repeat 26px 22px;}
#link ul li em{color:#fff; font-size:18px; line-height:120%;}
#link ul li.list2 .ico{background-position:-197px 22px}
#link ul li.list3 .ico{background-position:-420px 22px;}
#link ul li.list4 .ico{background-position:-643px 22px;}
#link ul li.list5 .ico{background-position:-867px 22px;}
#link ul li.list6 .ico{background-position:-1095px 22px;}
#link ul li:hover .ico,
#link ul li:focus .ico,
#link ul li:active .ico{box-shadow:inset 3px 3px 5px #aaa;}
#link ul li.list1 a:hover .ico{animation:link_01 0.3s infinite alternate;}
#link ul li.list2 a:hover .ico{animation:link_02 0.3s infinite alternate;}
#link ul li.list3 a:hover .ico{animation:link_03 0.3s infinite alternate;}
#link ul li.list4 a:hover .ico{animation:link_04 0.3s infinite alternate;}
#link ul li.list5 a:hover .ico{animation:link_05 0.3s infinite alternate;}
#link ul li.list6 a:hover .ico{animation:link_06 0.3s infinite alternate;}
@keyframes link_01 {
	from{background-position:26px 22px;}
	to{background-position:26px 32px;}
}
@keyframes link_02 {
	from{background-position:-197px 22px;}
	to{background-position:-197px 32px;}
}
@keyframes link_03 {
	from{background-position:-420px 22px;}
	to{background-position:-420px 32px;}
}
@keyframes link_04 {
	from{background-position:-643px 22px;}
	to{background-position:-643px 32px;}
}
@keyframes link_05 {
	from{background-position:-867px 22px;}
	to{background-position:-867px 32px;}
}
@keyframes link_06 {
	from{background-position:-1095px 22px;}
	to{background-position:-1095px 32px;}
}

#about {width:100%; background:url(/foreign/en/img/main/bg_about.gif) no-repeat right top;}
#about > div{width:1400px; margin:0 auto; padding:50px 0;}
#about h3 {display:inline-block; padding:0 40px 0 0; font-size:30px; line-height:130%; background:url(/foreign/en/img/main/bg_icon.png) no-repeat 130% -93px;}
#about h3 em{font-weight:bold;}
#about .con{overflow:hidden; width:100%; padding:40px 0 0 0;}
#about .map{float:left; width:35%; padding:0 5% 0 0;}
#about .greeting{float:left; width:60%; font-size:16px;}
#about .greeting h4{font-size:40px; line-height:120%;}
#about .greeting .detail{padding:1.7em 0 0.7em 0;}
#about .greeting p{padding:0 0 1.5em 0; line-height:150%; letter-spacing:0;}
#about .greeting .more{display:block; max-width:190px; height:48px; line-height:48px; padding:0 0 0 9px; text-transform:uppercase; font-size:20px; color:#fff; border-radius:5px; text-align:center; background:#636466 url(/foreign/en/img/main/bg_icon.png) no-repeat 57px 15px;}
#about .greeting .more:hover,
#about .greeting .more:focus,
#about .greeting .more:active{background-color:#404143;}

#promote{width:100%; background:url(/foreign/en/img/main/bg_promote.gif) repeat;}
#promote > div{overflow:hidden; width:1524px; margin:0 auto; padding:43px 0 77px 0;}
#promote h3{padding:50px 0 5px 62px; font-size:30px; background:url(/foreign/en/img/main/ico_flower.png) no-repeat;}
#promote .rolling{position:relative; float:left; width:953px; height:338px;  margin:0 35px 0 62px;}
#promote .rolling li{position:absolute;}
#promote .rolling li .num{position:absolute; top:0; right:27px; width:56px; height:54px; padding:20px 0 0 0; color:#fff; text-align:center; font-size:22px; background:url(/foreign/en/img/main/bg_icon.png) no-repeat 0 -211px;}
#promote .rolling li > div{overflow:hidden; width:100%; padding:11px 0 0 0;}
#promote .rolling .pic{float:left;}
#promote .rolling .txt{float:left;width:300px; height:327px; padding:0 0 0 37px; color:#fff; background:#1a8496;}
#promote .rolling .txt p{padding:90px 0 30px 0; font-size:28px; line-height:150%;}
#promote .rolling .txt p em{display:block; font-weight:bold;}
#promote .rolling .txt .more{display:block; width:140px; height:22px; padding:6px 0 6px 15px; line-height:22px; font-size:16px; border-radius:5px; border:2px solid #fff; color:#fff; background:#177787;}
#promote .rolling .txt .more .ico{float:right; width:30px; height:22px; border-left:1px dashed #fff; vertical-align:middle; background:url(/foreign/en/img/main/bg_icon.png) no-repeat 10px -595px;}
#promote .rolling .txt .more:hover,
#promote .rolling .txt .more:focus,
#promote .rolling .txt .more:active{background-color:#12444c;}
#promote .bx-controls-direction a{position:absolute; top:141px; left:5px; width:60px; height:60px; border-radius:50%; background:#000 url(/foreign/en/img/main/bg_icon.png) no-repeat 20px -502px; opacity:0.6;}
#promote .bx-controls-direction .bx-next{left:auto; right:10px; background-position:25px -380px;}
#promote .bx-pager{display:none; position:absolute; top:20px; right:18px; width:56px; font-weight:bold; font-size:22px;}
#promote .bx-pager a{display:none; color:#fff;}
#promote .bx-pager .active{display:block;}

#promote .banner{float:left; width:412px; padding:11px 0 0 0;}
#promote .banner li *{display:inline-block;}
#promote .banner .list1{height:135px; padding:21px 0 0 167px; margin:0 0 15px 0; border-radius:10px; background:#e3f2f5 url(/foreign/en/img/main/ico_call.png) no-repeat 18px 15px;}
#promote .banner .list1 .txt{display:block; font-size:24px; line-height:200%;}
#promote .banner .list1 .txt em{font-weight:bold;}
#promote .banner .list2 {width:100%; height:156px; text-align:center; background:url(/foreign/en/img/main/bg_banner.gif) repeat;}
#promote .banner .list2 a{color:#fff;} 
#promote .banner .list2 a .txt{width:100%; padding:1.5em 0 0.7em 0; font-size:25px; line-height:120%; font-weight:bold;}
#promote .banner .list2 a .more{width:130px; height:35px; line-height:35px; border-radius:20px; border:1px solid #fff; font-size:15px; text-transform:uppercase;}
#promote .banner .list2 a:hover,
#promote .banner .list2 a:active,
#promote .banner .list2 a:focus{opacity:0.6;}

@media all and (max-width:1024px){
	#visual .slogan{top:3em; font-size:40px;}
	#about > div,
	#promote > div{width:98%;}
	#about .greeting h4{font-size:35px;}
	#promote h3{padding-top:35px;}
	#promote > div{padding:1em 0 1em 0;}
	#promote .rolling{width:100%; height:468px; margin:0;}
	#promote .rolling li .num{right:20%;}
	#promote .rolling .pic{float:none; text-align:center;}
	#promote .rolling .txt{float:none; width:95%; height:130px; padding:0 0 0 5%; max-width:579px; margin:0 auto;}
	#promote .rolling .txt p{padding:0.5em 0 0.5em;}
	#promote .rolling .txt p em{display:inline-block;}
	#promote .rolling .txt p br{display:none;}
	#promote .bx-controls-direction a{top:55%; left:0;}
	#promote .bx-controls-direction .bx-next{right:0;}
	#promote .banner {width:100%; text-align:center; padding:1em 0 0 0;}
	#promote .banner li{display:inline-block; vertical-align:top;}
	#promote .banner .list1{width:30%; height:125px; margin:0 3% 0 0; padding:31px 0 0 15%; background-size:110px; background-position:18px 20px;}
	#promote .banner .list1 .num{width:180px;}
	#promote .banner .list1 .txt{font-size:20px;}
	#promote .banner .list2{width:46%;}
}
@media all and (max-width:768px){
	#visual .slogan{top:2.5em; font-size:30px;}

	#link {padding:2em 0; height:auto;}
	#link h3{width:180px; height:40px; line-height:40px; margin-bottom:2em; font-size:18px;}
	#link h3 img{width:170px;}
	#link ul li em{font-size:15px;}
	#link ul li .ico{width:85px; height:85px; background-size: auto 60px; background-position:15px 13px}
	#link ul li.list2 .ico{background-position:-198px 13px}
	#link ul li.list3 .ico{background-position:-409px 13px;}
	#link ul li.list4 .ico{background-position:-623px 13px;}
	#link ul li.list5 .ico{background-position:-837px 13px;}
	#link ul li.list6 .ico{background-position:-1057px 13px;}
	@keyframes link_01 {
		from{background-position:15px 13px;}
		to{background-position:15px 20px;}
	}
	@keyframes link_02 {
		from{background-position:-198px 13px;}
		to{background-position:-198px 20px;}
	}
	@keyframes link_03 {
		from{background-position:-409px 13px;}
		to{background-position:-409px 20px;}
	}
	@keyframes link_04 {
		from{background-position:-623px 13px;}
		to{background-position:-623px 20px;}
	}
	@keyframes link_05 {
		from{background-position:-837px 13px;}
		to{background-position:-837px 20px;}
	}
	@keyframes link_06 {
		from{background-position:-1057px 13px;}
		to{background-position:-1057px 20px;}
	}

	#about{background:none;}
	#about > div{padding:2em 0;}
	#about h3{font-size:25px; padding-bottom:10px; background-position:145% -93px;}
	#about .map{width:100%; padding:0.3em 0 1.5em; text-align:center;}
	#about .map img{max-width:350px;}
	#about .con{padding:0;}
	#about .greeting{width:100%; font-size:14px;}
	#about .greeting h4{font-size:30px;}
	#about .greeting .more{width:120px; height:35px; padding:0 0 0 15px; line-height:35px; font-size:17px; background-position:30px 8px;}

	#promote h3{padding:20px 0 3px 5px; font-size:22px; background-size:30px;}
	#promote h3 img{width:130px;}
	#promote .rolling{height:auto;}
	#promote .rolling li .num{right:1em;}
	#promote .rolling .txt{height:110px;}
	#promote .rolling .txt p{font-size:20px;}
	#promote .bx-controls-direction a{top:40%;}
	#promote .banner {padding:0.5em 0 0 0;}
	#promote .banner .list1{width:85%; height:100px; padding-top:15px; margin:0 0 0.3em; background-size:90px; background-position:10px 10px;}
	#promote .banner .list1 .txt{font-size:17px;}
	#promote .banner .list1 .num{width:150px;}
	#promote .banner .list2{width:100%; height:120px;}
	#promote .banner .list2 a .txt{padding:0.9em 0 0.4em;}
	#promote .banner .list2 a .txt img{width:260px;}
}
@media all and (max-width:550px){
	#visual > img{height:180px; max-width:200%;}
	#visual .slogan img{width:300px;}
	
	#about h3{font-size:20px; background-size:35px auto; background-position:100% -58px;}
	#about > div{padding:1.2em 0 1.5em;}
	#about .greeting .detail{padding:0.7em 0 0.5em;}
	#about .greeting p{padding:0 0 0.7em 0;}
	#about .greeting h4{font-size:28px;}

	#link{padding:1.5em 0 0.5em;}
	#link h3{margin-bottom:1.2em;}
	#link h3 img{width:140px;}
	#link ul li {width:32.6%; margin:0 0 1em;}
	#link ul li .ico{margin-bottom:6px;}

	#promote h3{font-size:20px;}
	#promote .rolling .txt p,
	#promote .rolling li .num{font-size:18px;}
	#promote h3 img{width:100px;}
	#promote .bx-controls-direction a{width:50px; height:50px; background-position:15px -507px;}
	#promote .bx-controls-direction .bx-next{background-position:22px -384px;}
}