@charset "utf-8";
@import url(layout_mobile.css);

/* 
 * Layout CSS Document
 * IEETU Web Standardization Team 
 * 2017-04-26 
 */
 
body.chn,.chn input,.chn textarea,.chn button,.chn select{font-family: Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif, 'Nanum Gothic', '나눔고딕', '맑은 고딕'; color:#333;}
body.jpn,.jpn input,.jpn textarea,.jpn button,.jpn select{font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, Meiryo, "メイリオ", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif, 'Nanum Gothic', '나눔고딕', '맑은 고딕'; color:#333;}
.chn .tabmenu ul li,
.chn [class*=conTit]{font-family: Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif, 'Nanum Gothic', '나눔고딕', '맑은 고딕';}
.jpn .tabmenu ul li,
.jpn [class*=conTit]{font-family: Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif, 'Nanum Gothic', '나눔고딕', '맑은 고딕';}

/*** Tablet 768px ~  ***/
@media all and (min-width:768px) {
	/*** Header ***/

	/*** Footer ***/
	#footer .nav_f .inr{padding-left:10px; text-align:left;}
	#footer .copy_area .browser{display:block;}	
	#footer > .inr{padding:25px 20px 45px;}
	#footer .nav_f a.directions{display:inline-block;}

	/*** Container ***/
	/* LNB */
	.lnb_area{float:left;}
	#lnb{padding-left:54px; border-right:1px solid #e6e6e6;}
	#lnb>li{position:relative; width:250px;}
	#lnb>li:first-child{width:54px;}
	#lnb>li>a{height:54px; padding:0 40px 0 20px; font-size:16px; line-height:54px;}
	#lnb>li>div{top:54px; left:-1px; right:-1px; border:1px solid #e6e6e6; border-top:0; box-shadow:none;}
	#lnb>li>div>ul>li>a{padding:16px 40px 17px 20px; font-size:16px;}
	/* 공유,프린트 */
	.section_lnb .util_area{display:block; float:right;}
	.section_lnb .util_area li{float:left; position:relative;}
	.section_lnb .util_area li > a{display:block; width:45px; height:54px;}
	.section_lnb .util_area li > a .sprh_com{position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; background-position:-30px -130px;}
	.section_lnb .util_area li.share.open > a .sprh_com{background-position:0 -130px;}
	.section_lnb .util_area li.print > a .sprh_com{width:22px; margin:-10px 0 0 -11px; background-position:-60px -130px;}
	.section_lnb .util_area li .share_lst{display:none; position:absolute; top:0; right:100%; width:80px; height:100%; border-right:1px solid #e7e7e7;}
	.section_lnb .util_area li.open .share_lst{display:block;}
	.section_lnb .util_area li .share_lst:after{content:''; display:inline-block; position:absolute; top:50%; right:-1px; width:7px; height:13px; margin:-7px 0 0; background:#f9f9f9 url(../images/common/sprh_com.png) -150px -130px;}
	.section_lnb .util_area li .share_lst a{float:left; width:26px; height:26px; margin:14px 7px 0 0;}
	.section_lnb .util_area li .share_lst a.facebook{background-position:-90px -130px;}
	.section_lnb .util_area li .share_lst a.twitter{background-position:-120px -130px;}
	/** 컨텐츠 **/
	.cont_wrap{padding:0 20px;}
	/* 컨텐츠 헤드 */
	.cont_head .title{font-size:45px;}
	.cont_head .desc{display:block; margin:20px 0 0; font-size:13px; color:#888;}
	/* 컨텐츠 바디 */
	.cont_body{}
	/* 컨텐츠 풋 */
	.cont_foot{margin:50px 0 50px;}
	.cont_foot .cont_manager .manager dd{margin:0 20px 0 5px;}
	.cont_foot .cont_manager .manager dd + dt{clear:none;}
	.cont_foot .cont_rating .label_wrap{margin:0 0 20px 0;}
	.cont_foot .cont_rating .label_wrap:last-child{margin-right:0;}
	.cont_foot .cont_rating .label_group{width:auto; margin:0 15px 0 0;}
	body.eng .cont_foot .cont_rating .label_group{width:50%; margin:0 0 14px 0;}
	.cont_foot .cont_rating .cmt_wrap{}
	.cont_foot .cont_rating .inp_cmt{margin:0 107px 0 0; border-right:0;}
	.cont_foot .cont_rating .btn_rate{position:absolute; top:0; right:0; width:107px; margin:0; border-radius:0 3px 3px 0;}
}

/*** Pc 1200px ~  ***/
@media all and (min-width:1200px) {
	#wrap{overflow:auto !important;}
	/*** Header ***/
	#header{height:138px;}
	#header .section_logo{width:1200px; height:76px; margin:0 auto;}
	#header .section_logo .logo{float:left; margin:20px 0 0;}
	#header .section_logo .logo a{padding:0;}
	#header .section_logo .logo .sprh_com{width:182px; height:45px; background:url(../images/header/logo.png) no-repeat 0 0;}
	#header .section_logo .util_area{display:block;}

	/* GNB */
	#header .section_gnb{width:1200px; height:62px; margin:0 auto;}
	#header #gnb{display:block; float:left;}
	#header #gnb>li{float:left;}
	#header #gnb>li>a{display:block; position:relative; z-index:31; overflow:hidden; height:62px; padding:0 30px; font-weight:600; font-size:19px; line-height:62px;}
	#header #gnb>li:first-child>a{margin-left:20px;}
	#header #gnb>li.open>a{color:#9cc10e;}
	#header #gnb>li:nth-child(5){position:relative;}
	#header #gnb>li:nth-child(5)>span{display:none; position:absolute; top:-10px; left:-58px; height:20px; padding:0 10px; border:1px solid #ddd; border-radius:3px; font-weight:400; font-size:12px; line-height:20px; white-space:nowrap;}
	html[lang=en] #header #gnb>li:nth-child(5)>span{left:-58px;}
	html[lang=zh] #header #gnb>li:nth-child(5)>span{left:2px;}
	html[lang=ja] #header #gnb>li:nth-child(5)>span{left:-28px;}
	#header #gnb>li:nth-child(5)>span:after{content:''; display:inline-block; position:absolute; bottom:-10px; left:50%; margin-left:-5px; border:5px solid transparent; border-top-color:#ddd;}
	#header #gnb>li:nth-child(5).open>span{display:inline-block;}
	#header #gnb>li.open>a:before{content:''; display:inline-block; position:absolute; left:50%; top:52px; z-index:32; width:60px; height:60px; margin-left:-30px; border-radius:50%; background:#9cc10e;}
	#header #gnb>li>div{display:none; position:absolute; top:138px; left:0; right:0; z-index:30; width: 100%; border-top:6px solid #9cc10e; background:#484848; color:#909090;}
	#header #gnb>li.open>div{display:block;}
	#header #gnb>li>div .inr{position:relative; width:1200px; margin:0 auto; padding:40px 0; background:url(../images/common/bg_gnb_div.png) no-repeat 20px 100%;}
	#header #gnb>li>div .inr:after{content:''; display:block; clear:both;}
	#header #gnb>li>div .head{float:left; width:330px; color:#bec0c5;}
	#header #gnb>li>div .head .title{display:block; position:relative; margin:0 0 30px; padding:5px 0 30px; /* font-family:"NanumSquare"; */ font-size:33px; line-height:1.2; color:#9cc10e;}
	#header #gnb>li>div .head .title:after{content:''; display:inline-block; position:absolute; left:0; bottom:0; width:50px; height:3px; background:#9cc10e;}
	#header #gnb>li>div .head > p{line-height:1.6;}
	#header #gnb>li>div .quicklink_area{position:absolute; top:50%; right:0; margin-top:-105px;}
	#header #gnb>li>div .quicklink_area a{display:block; box-sizing:border-box; width:106px; height:106px; margin:-1px 0 0; padding:17px 0 0; border:1px solid #6d6d6f; color:#fff; text-align:center;}
	#header #gnb>li>div .quicklink_area a:hover,
	#header #gnb>li>div .quicklink_area a:focus{background:rgba(0,0,0,.2);}
	#header #gnb>li>div .quicklink_area a:before{content:''; display:block; width:50px; height:50px; margin:0 auto; background-position:-80px -80px;}
	#header #gnb>li>div .quicklink_area a + a:before{background-position:-140px -80px;}
	#header #gnb>li>div .quicklink_area a span{display:block; margin:10px 0 0;}
	/* 2차 */
	#header #gnb>li>div .sub{overflow:hidden; float:left; position:relative; padding:19px 27px; border-left:1px solid #3c3c3c;}
	#header #gnb>li>div .sub:before{content:''; display:inline-block; position:absolute; top:0; left:0; width:1px; height:100%; background:#555;}
	#header #gnb>li>div .sub>ul>li{}
	#header #gnb>li>div .sub>ul>li a{display:block; position:relative; box-sizing:border-box; min-width:250px; max-width:400px; padding:10px 20px 10px 15px; font-size:17px; line-height:1.3; color:rgba(255,255,255,.5);}
	#header #gnb>li>div .sub>ul>li a:after{content:''; position:absolute; top:50%; right:10px; width:7px; height:11px; margin:-6px 0 0; background-position:-10px -90px; opacity:.2;}
	/*#header #gnb>li>div .sub>ul>li a[target=_blank]:after{content:''; display:inline-block; width:17px; height:16px; margin:0 0 0 5px; background-position: -30px -630px; vertical-align:middle;}*/
	#header #gnb>li>div .sub>ul>li.open a{background:url(../images/common/bg_menu1d_on.png) no-repeat 0 0; background-size:cover; color:#fff;}
	#header #gnb>li>div .sub>ul>li.open a:after{opacity:1;}
	/* 전체보기 */
	#header .section_wholeview{display:none;}
	/* 검색 */
	#header .section_search{float:right; position:relative;}
	#header .totalSearch{float:left; margin:7px 0 0;}
	#header .totalSearch .btn_open{position:relative; top:auto; right:auto;}
	#header .totalSearch .search_wrap{top:62px; left:auto; right:39px; width:325px; box-shadow:0 0 1px rgba(0,0,0,.4);}
	#header .totalSearch .search_wrap:after{content:''; display:inline-block; position:absolute; left:177px; top:-10px; width:20px; height:20px; background:#fff; box-shadow:-1px -1px 1px rgba(0,0,0,.1); -ms-transform:rotate(45deg); transform:rotate(45deg);}
	#header .totalSearch .search_wrap .search_area{padding:19px 50px 19px 20px;}
	#header .totalSearch .search_wrap .btn_close{top:19px; right:10px;}
	/* 퀵메뉴 */
	#header .quick_wrap{display:block;}
	/* 인트라넷 버튼 */
	#header .section_search .btn_intranet{display:block;}

	/*** Footer ***/
	#footer .nav_f .inr{width:1200px; margin:0 auto; padding-left:0;}
	#footer > .inr{width:1200px; margin:0 auto; padding-left:0; padding-right:0;}
	#footer > .inr:after{content:''; display:block; clear:both;}
	#footer > .inr .logo{display:block; float:left; margin:0 40px 0 0;}
	#footer .copy_area{float:left;}

	/*** Container ***/
	/* Sub Visual */
	.section_subvisual{height:94px; }
	.section_subvisual .txt{line-height:94px;}
	/* LNB */
	.section_lnb>.inr{width:1200px; margin:0 auto;}
	/** 컨텐츠 **/
	.cont_wrap{width:1200px; margin:0 auto; padding:0;}
	/* 컨텐츠 헤드 */
	.cont_head{min-height:225px; padding:75px 0 0; background:url(/cmsh/dgmif.re.kr/images/common/bg_conthead01.jpg) no-repeat 100% 0; text-align:left;}
	body.c00100001 .cont_head,
	body.c00200001 .cont_head,
	body.c00300001 .cont_head{background-image:url(/cmsh/dgmif.re.kr/images/common/bg_conthead01.jpg);}
	body.c00100002 .cont_head,
	body.c00200002 .cont_head,
	body.c00300002 .cont_head{background-image:url(/cmsh/dgmif.re.kr/images/common/bg_conthead02.jpg);}
	body.c00100029 .cont_head,
	body.c00200029 .cont_head,
	body.c00300029 .cont_head{background-image:url(/cmsh/dgmif.re.kr/images/common/bg_conthead02_02.jpg);}
	body.c00100034 .cont_head,
	body.c00200034 .cont_head,
	body.c00300034 .cont_head{background-image:url(/cmsh/dgmif.re.kr/images/common/bg_conthead02_03.jpg);}
	body.c00100040 .cont_head,
	body.c00200040 .cont_head,
	body.c00300040 .cont_head{background-image:url(/cmsh/dgmif.re.kr/images/common/bg_conthead02_04.jpg);}
	body.c00100003 .cont_head,
	body.c00200003 .cont_head,
	body.c00300003 .cont_head{background-image:url(/cmsh/dgmif.re.kr/images/common/bg_conthead03.jpg);}
	/* 컨텐츠 바디 */
	.cont_body{min-height:500px; margin:47px 0 0;}
	/* 컨텐츠 풋 */
	.cont_foot .cont_manager:after{content:''; display:block; clear:both;}
	.cont_foot .cont_manager h2{display:block; float:left; /* font-family:'NanumSquare'; */ font-size:17px; color:#777;}
	.cont_foot .cont_manager h2 strong{color:#444;}
	.cont_foot .cont_manager .manager{float:right; margin-top:3px;}
	.cont_foot .cont_rating{padding:0;}
	.cont_foot .cont_rating:after{content:''; display:block; clear:both;}
	.cont_foot .cont_rating .label_wrap{float:left; box-sizing:border-box; width:50%; margin:0; padding:35px 0 35px 25px; border-right:1px solid #e5e6e6;}
	.cont_foot .cont_rating .cmt_wrap{float:left; box-sizing:border-box; width:45%; margin:30px 0 0 33px;}

	/** 센터소개영역 **/
	#container .section_center{display:block; margin:80px 0 0; padding:0 0 70px; background:linear-gradient(#fff 70px, #f5f5f5 70px);}
	#container .section_center .btn_open{display:none;}
	#container .section_center .btn_close{display:none;}
	#container .section_center .scBg{display:none;}
	#container .section_center .inr{position:relative; z-index:0; right:auto; bottom:auto; width:1200px; margin:0 auto; text-align:left;
	-ms-transform:scale(1, 1);
	-webkit-transform:scale(1, 1);
	transform:scale(1, 1);
	opacity:1;
	}
	#container .section_center ul{margin:0 -14px;}
	#container .section_center ul:after{content:''; display:block; clear:both;}
	#container .section_center ul li{float:left; box-sizing:border-box; width:25%; margin:0; padding:0 14px;}
	#container .section_center ul li:first-child{display:none;}
	#container .section_center ul li a{padding:0 0 166px; background:#f5f5f5 url(../images/common/img_center_pic01.jpg) no-repeat 0 100%; /* font-family:'NanumSquare'; */ font-size:19px; color:#444; text-align:center; transition:all .3s;}
	#container .section_center ul li:nth-child(2) a{background-image:url(../images/common/img_center_pic01.jpg);}
	#container .section_center ul li:nth-child(3) a{background-image:url(../images/common/img_center_pic02.jpg);}
	#container .section_center ul li:nth-child(4) a{background-image:url(../images/common/img_center_pic03.jpg);}
	#container .section_center ul li:nth-child(5) a{background-image:url(../images/common/img_center_pic04.jpg);}
	#container .section_center ul li a.over{background-color:#9cc10e; color:#fff;}
	#container .section_center ul li a:after{display:none;}
	#container .section_center ul li a:before{top:26px; left:50%;}
	#container .section_center ul li:first-child a:before{width:38px; height:32px;  margin:0 0 0 -19px; background-position:-210px -270px;}
	#container .section_center ul li:nth-child(2) a:before{width:38px; height:32px;  margin:0 0 0 -19px; background-position:-210px -270px;}
	#container .section_center ul li:nth-child(3) a:before{width:39px; height:43px;  margin:-4px 0 0 -16px; background-position:-167px -262px;}
	#container .section_center ul li:nth-child(4) a:before{width:34px; height:38px;  margin:-3px 0 0 -17px; background-position:-130px -270px;}
	#container .section_center ul li:nth-child(5) a:before{width:32px; height:31px;  margin:0 0 0 -16px; background-position:-90px -270px;}
	#container .section_center ul li:first-child a.over:before{background-position:-210px -310px;}
	#container .section_center ul li:nth-child(2) a.over:before{background-position:-210px -310px;}
	#container .section_center ul li:nth-child(3) a.over:before{background-position:-167px -308px;}
	#container .section_center ul li:nth-child(4) a.over:before{background-position:-130px -310px;}
	#container .section_center ul li:nth-child(5) a.over:before{background-position:-90px -310px;}
	#container .section_center ul li a span{display:block; box-sizing:border-box; height:144px; padding:81px 0 0;}

}
