@charset "utf-8";

/******* common *******/
/* box_style */
.l_box{ float:left; width:66%; margin-right:2%;}
.r_box{ float:right; width:32%; margin:0;}

/* contents_area */
/* l_box_set */
.long1_box {position:relative; width:100%; height:226px; float:left; margin-right:0%; margin-bottom:20px; background:#fff url(../../images/eng/main/cont_line.gif) repeat-y right top;}
.short1_box {position:relative; width:49%; height:183px; float:left; margin-right:2%; margin-bottom:20px; background:#fff url(../../images/eng/main/cont_line.gif) repeat-y right top;}
.short2_box {position:relative; width:49%; height:183px; float:left; margin-right:0%; margin-bottom:20px; background:#fff url(../../images/eng/main/cont_line.gif) repeat-y right top;}
/* r_box_set */
.long2_box {position:relative; width:100%; height:226px; float:left; margin-right:0%; margin-bottom:20px; background:#fff url(../../images/eng/main/cont_line.gif) repeat-y right top;}
.short3_box {position:relative; width:100%; height:183px; float:left; margin-right:0%; margin-bottom:20px; background:#fff url(../../images/eng/main/cont_line.gif) repeat-y right top;}


/******* main visual *******/
/* visual_img */
#main_visual { position:relative; width:1238px; height:315px; margin:20px auto; overflow:hidden; background:#09C; z-index:1;}
.visual_img{ position:relative; width:100%; height:315px;}
.visual_slogan{ position:absolute; top:0; right:0px; z-index:9; width:30%; height:315px; background:url(../../images/eng/common/slogan_bg.jpg) repeat;}
.visual_slogan .slogan_map{ position:absolute; top:30px; right:5%; z-index:2; width:182px; height:93px; border:0px; background:url(../../images/eng/common/sub_visual_map.png) no-repeat 0 0; display:none}
.visual_slogan h4{ padding:20px 0 0 8%; color:#fff; line-height:34px;font-size:17px}
.visual_slogan h4 strong{ display:block; font-size:37px; line-height:30px; letter-spacing:-1px; color:#edd36c;/*color:#a7dcff; 겨울*//*color:#a1f4ac 봄*//*color:#ffc71d여름*/}
.visual_slogan p{ padding:0 8%; color:#d0d0d0;}
.visual_slogan a{display:block;background:url(../../images/eng/main/eng-40th.png) no-repeat;text-indent:-9999px; height:38px; width:87%; position:absolute; bottom:15px; left:30px; background-size:contain}
#main_visual .visual_img {position:relative;z-index:1; width:100%; height:315px; margin:0px 0px 0px 0px; overflow:hidden;}
#main_visual .visual_img img { position:absolute; left:0; top:0; }
#main_visual .visual_img .list {width:225px; height:172px; margin-top:0px;}
#main_visual .visual_img .list li {position:absolute; left:0; top:0; width:100%; height:100%;}
#main_visual .visual_img .list li a{ cursor:default;}
#main_visual .visual_img .list li:first-child {opacity:1; filter:alpha(opacity=100);}
#main_visual .visual_img .btnSet {position:absolute; left:3%; bottom:20px; width:40%; height:14px; z-index:10; }
#main_visual .visual_img .btnSet a.stop, /* {position:absolute; top:0px; left:0px;width:6px; height:9px; overflow:hidden; white-space:nowrap; font-size:0; letter-spacing:-100px; text-indent:0; background-repeat:no-repeat; background-position:50% 50%; } */
#main_visual .visual_img .btnSet a.stop, /* {background:url(../../images/eng/main/btn_stop.png) no-repeat;} */
#main_visual .visual_img .btnSet a.play, /* {background:url(../../images/eng/main/btn_play.png) no-repeat; } */
#main_visual .visual_img .btnSet a.prev,
#main_visual .visual_img .btnSet a.next{display:none;}
#main_visual .visual_img .btnSet .curIco {position:absolute; height:10px; line-height:10px; margin-left:5px;}
#main_visual .visual_img .btnSet .curIco a {display:inline-block; vertical-align:top; width:10px; height:10px; margin-left:7px; overflow:hidden; white-space:nowrap; font-size:0; letter-spacing:-100px; text-indent:0; background:url(../../images/eng/main/dot_poff.png) no-repeat;}
#main_visual .visual_img .btnSet .curIco a.on {display:inline-block;width:10px; height:10px;background:url(../../images/eng/main/dot_pon.png) no-repeat;}

/******* pop_banner *******/
.pop_banner{ position:relative;  width:1238px; margin:0 auto 20px auto;}
.pop_banner:after{ content:""; display:block; clear:both;}
.pop_banner .webzine{width:32%; float:left; margin-right:1.9%; height:184px; background:#2186ca url(../../images/eng/main/webzine_bg.jpg) no-repeat center top; position:relative}
.pop_banner .webzine a{ color:#fff; font-size:20px; line-height:27px; text-align:center; text-shadow:0 0 5px  #4f4f4f; padding-top:60px; display:block}
.pop_banner .box_blue{ width:32%; float:left; height:184px; background:#2186ca url(../../images/eng/main/box_blue_bg.jpg) no-repeat right top; position:relative }
.pop_banner .box_green{ width:32%; float:right; height:184px; background:#15b064 url(../../images/eng/main/box_green_bg.jpg) no-repeat right top;position:relative}
.pop_banner .inarea{ padding:20px 5%;}
.pop_banner .inarea2{ padding:0px 5%;}
.pop_banner h4 { font-size:17px; margin:0 0 8px 0; color:#ffe63f;}
.pop_banner h4 span{ font-size:20px}
.box_blue p{ margin-bottom:10px; color:#a8d6f4; line-height:18px;}
.box_blue p img{ margin-left:5px; margin-bottom:-5px;}
.box_blue a{ padding:2px 2%; background:#04588f; color:#fff; display:inline-block; position:absolute; bottom:30px; left:20px}
.box_green p{ margin-bottom:10px; width:50%; color:#fffe9d;}
.box_green a{ padding:2px 2%; background:#117343; color:#fff; display:inline-block;position:absolute; bottom:30px; left:20px}

/******* long1_box *******/
/* long1_box NEWS */
.tabmenu dl {position:relative; width:100%; height:auto; position:relative;}
.tabmenu dt {position:absolute; top:0; width:25%; z-index:9; height:47px; }
.tabmenu .tab01 {left:0;}
.tabmenu .tab02 {left:25%;}
.tabmenu .tab03 {left:50%;}
.tabmenu .tab04 {left:75%;}
.tabmenu dt a {display:block; width:100%; line-height:40px; color:#333333; font-size:16px; font-weight:normal; text-align:center; background:#dfdfdf;}
.tabmenu dt a span { display:block; border-right:1px solid #fff;}
.tabmenu dt a.over { height:40px; color:#fff; background:#0066a6;}
.tabmenu dt a.over span{ padding-bottom:7px; background:url(../../images/eng/main/board_tabbg.gif) no-repeat center bottom; }
.tabmenu dd {display:none; width:100%; min-height::auto; position:absolute; top:39px; height:165px; padding-top:20px; border-top:1px solid #eaeaea; border-bottom:1px solid #d7d7d7;}
.tabmenu dd .title { display:block; margin:0px 4%; font-size:16px; font-weight:600;}
.tabmenu dd .text { font-size:13px; font-weight:normal; height:40px; overflow:hidden;}
.tabmenu dd ul {display:block; width:92%; padding:0px 4%;}
.tabmenu dd ul li{display:block; margin:3px 0; padding:0 0 0 8px; line-height:normal; background:url(../../images/eng/common/depth4_bul.gif) no-repeat 0px 8px; }
.tabmenu dd ul a {display:inline-block;  float:left; width:74%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:13px; color:#666;}
.tabmenu dd ul a:hover, .tabmenu dd ul a:active {text-decoration:underline; color:#333;}
.tabmenu dd ul span.data {display:inline-block; width:25%; text-align:right; line-height:18px;}
.tabmenu dd .more_btn {display:block; position:absolute; top:-28px; right:15px;}

/* long2_box */
.long2_box .cont {padding:20px 5% 23px 5%; border-bottom:1px solid #d7d7d7; background:url(../../images/eng/main/long2_box_bg.gif) no-repeat right top; text-align:center; overflow:hidden;}
.long2_box .cont a {display:block; overflow:hidden; position:relative; width:100%; height:141px;}
.long2_box .more_btn { display:block; position:absolute; top:12px; right:15px;}

/* short1_box */
.short1_box .more_btn { display:block; position:absolute; top:12px; right:15px;}
.short1_box .cont,
.short2_box .cont { position:relative; padding:21px 5% 20px 5%; border-bottom:1px solid #d7d7d7;}
.short1_box .cont .books,
.short2_box .cont .books{ float:left; display:inline-block; width:75px; margin-right:20px; height:100px; background:url(../../images/eng/main/book_bg.gif) no-repeat right bottom;}
.short1_box .cont dl,
.short2_box .cont dl { height:100px; overflow:hidden;}
.short1_box .cont dt,
.short2_box .cont dt { font-size:15px; letter-spacing:-0.3px; color:#eb581e; font-weight:600;}

/* short2_box */
.short2_box .more_btn { display:block; position:absolute; top:12px; right:15px;}

/* short3_box */
.short3_box .more_btn { display:block; position:absolute; top:12px; right:15px;}
.short3_box ul{ padding:21px 5% 20px 5%; height:100px; border-bottom:1px solid #d7d7d7; background:url(../../images/eng/main/short3_bg.jpg) no-repeat 90% 20px;}
.short3_box ul li{ width:60%; margin:2px 0; padding-left:8px; background:url(../../images/eng/main/short3_bul.gif) no-repeat 2px 8px;}

/****** banner_area ******/
/* banner */
.banner_area {position:relative; width:100%; height:52px; margin-bottom:40px; background:#fff;}
.banner_area .banner {clear:both; width:100%;}
.banner_area .banner div { width:90%; height:50px; overflow:hidden;}
.banner_area .banner ul { width:100%; top:7px; height:36px; overflow:hidden;}
.banner_area .banner ul:after {content:""; display:block; clear:both;}
.banner_area .banner ul li {position:relative; float:left; width:225px; height:36px; text-align:center; line-height:15px; background:#fff url(../../images/eng/main/event_bg.png) no-repeat center bottom;}
.banner_area .banner ul li a {display:block; height:36px; }
.banner_area .banner .lbtn,
.banner_area .banner .rbtn { top:7px;}

@media all and (max-width:1440px){

}

@media all and (max-width:1280px){
/* main visual */
#main_visual {width:98%;}

/* main pop_banner */
.pop_banner{ width:98%;}
}

@media all and (max-width:1100px){
/* short2_box */
.long2_box .cont img{width:300px; height:141px; position:absolute; left:50%; margin-left:-150px;}

.visual_slogan p{display:none}
}

@media all and (max-width:1000px){
/* main visual */
#main_visual {width:96%;}
.visual_slogan h4{ padding:30px 0 0 8%; }
.visual_slogan h4 strong{ font-size:30px; line-height:25px;}

/* main pop_banner */
.pop_banner{ width:96%;}

/* long1_box NEWS */
.tabmenu dt {width:30%;}
.tabmenu .tab01 {left:0;}
.tabmenu .tab02 {left:30%;}

/* short3_box */
.short3_box ul{ background-size:23%; background-position:93% 40px;}
.short3_box ul li{ width:70%; }

.tabmenu .tab03 { display: none}
.tabmenu .tab04 { display: none}

}


@media all and (max-width:800px){
/* main visual */
.visual_slogan{ position:absolute; top:inherit; bottom:0px; z-index:9; width:100%; height:100px; background-size: cover }
.visual_slogan .slogan_map{ position:absolute; top:0px; right:5%;}
.visual_slogan h4{ margin:0; padding:15px 0 0 3%; }
.visual_slogan h4 strong{ display:inline-block; margin-right:10px;}
.visual_slogan p { display:none;}
.visual_slogan a{left:20px}
#main_visual .visual_img .btnSet { bottom:70px; }
#main_visual .visual_img img {height:150%; left:-20px}

/* pop_banner */
.pop_banner .webzine{width:100%; float:none; margin-bottom:15px; background-size:cover}
.pop_banner .box_blue{ width:100%; float:none;margin-bottom:15px }
.pop_banner .box_green{ width:100%; float:none;margin-bottom:15px }

/* contents_area */
.l_box{ float:none; width:100%; margin-right:0%;}
.r_box{ float:none; width:100%; }

/* r_box_set */
.long2_box { float:left; width:49%; margin-right:2%;}
.short3_box { float:left; width:49%; height:226px;}


/* short3_box */
.short3_box ul{ padding:21px 5% 64px 5%; background-size:95px; background-position:93% 70px; }
.short3_box ul li{ width:70%; }

}


@media all and (max-width:640px){	
/* l_box_set */
.short1_box { width:100%; margin-right:0%; }
.short2_box { width:100%; margin-right:0%; }

/* short3_box */
.short3_box ul{ background-size:70px; background-position:93% 100px; }

}


@media all and (max-width:600px){
	#main_visual { height: 230px}
	#main_visual .visual_img { height: 230px}
	#main_visual .visual_img img {height:172px; left:-20px}
	.visual_slogan a{left:14px}
}


@media all and (max-width:480px){
/* main visual */
.visual_slogan h4 span{ display:none;}

/* pop_banner */
.pop_banner h4 { font-size:16px !important;}
.box_green p{ width:70%;}

/* long1_box NEWS */
.tabmenu dt {width:40%;}
.tabmenu .tab01 {left:0;}
.tabmenu .tab02 {left:40%;}
.tabmenu dt a {font-size:14px;}

/* short3_box */
.short3_box ul{ background-image:none;}
.short3_box ul li{ width:100%; }

}