@charset "utf-8";
@import url('normalize.css');

/* ----------------------------------------- 
	 english site css
----------------------------------------- */

@font-face {
  font-family: 'NanumGothic';
  font-style: normal;
  font-weight: 400;
  src: url(../font/NanumBarunGothic.eot);
  src: local('NanumGothic-Regular'),
       local('NanumGothic-Regular'),
       url(../font/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(../font/NanumGothic-Regular.woff) format('woff'),
	   url(../font/NanumGothic-Regular.woff2) format('woff2'),
       url(../font/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'NanumGothic';
  font-style: normal;
  font-weight: 700;
  src: url(../font/NanumGothic-Bold.eot);
  src: local('NanumGothic-Bold'),
       local('NanumGothic-Bold'),
       url(../font/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(../font/NanumGothic-Bold.woff2) format('woff2'),
       url(../font/NanumGothic-Bold.woff) format('woff'),
       url(../font/NanumGothic-Bold.ttf) format('truetype');
}


html, body { width:100%; min-width:100%; min-height:100% }
#all_wrap { position:relative; width:100%; height:100%; font-family: 'NanumGothic'; }

/* 컨텐츠 바로가기 */
#skiptoContent, #skiptoContent dt, .blindtext { font-size:0; height:0; width:0; text-indent:-9999px}
a.accessibility{position:absolute; display:block; width:100%; left:0; text-align:center; top:-10000px; z-index:9999; font-size:1.3em}
a.accessibility:hover, a.accessibility:focus, a.accessibility:active{position: absolute; top: 0; padding: 15px 0; font-weight:bold; color:#fff; background:#1d60a7; z-index:500}

/* max-width:1020px; font-size:13px */

.header { width:100%; height:195px }

.head-tool { width:100%; height:39px;  border-bottom:1px solid #eee; background-color:#f7f7f7 }
.tools { max-width:1020px; margin:0 auto; height:100%; font-size:12px }
.tools ul:after { display:block; clear:both; visibility:hidden; content:'' }
.tools li { display:block; float:left }
.tool-b { height:100% }
.gtc, .gtm { background-color:#fff}
.ft-size a, .ft-size strong { display:block; float:left }
.ft-size a { font-size:2em; border-left:1px solid #eee; }
.tool-b { float:right; color:#666;}
.tool-b ul { margin-top:15px }
.tool-b li { line-height:1; padding:0 10px }
.tool-b li + li { border-left:1px dotted #bbb }

@media only screen and ( max-width:768px ) {
	.header { height:auto }
	.head-tool {}
	.tool-b { font-size:0.9em }
	.tool-b ul {}	
	.tool-b li { padding:0 0.75em }
}

.head { box-sizing:border-box; max-width:1020px; padding-top:40px; height:117px; margin:0 auto }
.head:after, .search-wrap:after, .search-top:after, .search-list ul:after { display:block; clear:both; visibility:hidden; content:''}
#logo, .search-wrap, .search-bar, .search-more { float:left }
#logo { }
#logo a { display:block; width:323px; padding-top:16%; font-size:0; text-indent:-9999px; background:url(../images/cmm/logo_en.png) 0 0 no-repeat}
#logo a span { text-indent:-9999px; font-size:0; height:0; width:0}
.search-wrap { float:right }
.search-bar { position:relative; overflow:hidden; width:328px; padding-right:38px; height:28px; border:2px solid #19aad5; border-radius:5px }
.search-txt { border:none; outline:none; width:100%; height:100%; text-indent:0.5em; font-size:1em; line-height:.5}
.search-btn { position:absolute; right:0; top:0; bottom:0; width:38px; border:0; font-size:0; text-indent:-9999px; background:#19aad5 url(../images/cmm/btn_search.png) 55% 40% no-repeat; cursor:pointer }
.search-bar input:focus { outline:none }

.search-list { position:relative; height:15px; overflow:hidden; font-size:11px; line-height:1; font-family:dotum; color:#aaa }
.search-list ul { line-height:15px;  }
.search-list li { float:left; padding:0 1em }
.search-list li + li { border-left:1px solid #b3b3b3}
.search-list-btns { position:absolute; right:80px; top:1px; }
.search-list-btns span { float:left; display:block; width:13px; height:13px;  background-position:0 0; background-repeat:no-repeat; cursor:pointer;  text-indent:-9999px }
.search-list-btns span + span { margin-left:3px}
.search-list-btns .prev { background-image:url(../images/cmm/key-prevt.png) }
.search-list-btns .next { background-image:url(../images/cmm/key-next.png) }

.gnb-wrap { position:relative; width:100%; font-size:13px;  background-color:#25b4e8; color:#fff }
.gnb { position:static; max-width:1020px;  height:38px; margin:0 auto; z-index:10 }
.gnb:after { display:block; clear:both; visibility:hidden; content:''}
.gnb .dep1 { display:block; float:left; position:relative; width:25%; height:100%; box-sizing:border-box; border-right:2px dotted #bde8f8; z-index:11 }
.gnb .dep1:first-child { border-left:2px dotted #bde8f8 }
.gnb .dep1 .mn1 { display:block; width:100%; height:100%; font-size:15px; line-height:38px; text-align:center }

.deb2-back, .deb2-wrap { display:none; height:235px; }
.deb2-back { position:absolute; top:38px; left:0; right:0; width:100%; border-top:1px solid #bde8f8; background-color:#25b4e8; z-index:9 }
.mmtr { display:none } /* 모바일 메뉴 트리거 */
.mclose { display:none }
.deb2-wrap { box-sizing:border-box; margin-left:-2px; margin-right:-2px; padding:20px 17px; border-right:2px solid #42bbe7; color:#cce9f4; z-index:15}
.gnb .dep1:first-child .deb2-wrap { border-left:2px solid #42bbe7; }
.dep2  { }
.dep2 + .dep2 { margin-top:1em}
.dep2 .mn2 { font-size:13px; letter-spacing:-0.05em; }
.dep2.on .mn2, .dep2 .mn2:hover { color:#fff; text-decoration:underline; }

.mn1m { display:none } /* 모바일 1depth 메뉴 트리거 */


@media only screen and ( max-width:768px ) {
	.gnb-wrap { position:static }
	#logo { position:absolute; left:2.5%; top:124px; z-index:9  }

	#logo a { width:186px; padding-top:13%; background:url(../images/cmm/logo-m_en.png ) 0 0 no-repeat}
	.head { padding-top:0; height:70px; padding-top:20px }
	.search-wrap { float:initial; max-width:455px; width:90%; margin:0 auto }
	.search-top { position:relative; width:100%; box-sizing:border-box;  }
	.search-bar { width:100%; box-sizing:border-box }

	.gnb-wrap { height:50px; }
	.gnb { position:fixed; top:0; right:-300px; bottom:0; width:294px; padding-top:50px; border-left:6px solid #25b4e8; max-width:initial; height:auto; background-color:#fff;  }

	.gnb .dep1 { float:initial; width:100%; height:auto; text-indent:40px; border-right:0; border-top:1px solid #d9d9d9 }
	.gnb .dep1:first-child { border-left:0; border-top:1px solid #d9d9d9 }

	.gnb .dep1 + .dep1 + .dep1 + .dep1 + .dep1 + .dep1 { border-bottom:1px solid #d9d9d9 }

	.deb2-back { position:static }
	.deb2-wrap { height:auto; margin-left:0; margin-right:0; padding:0; border-right:0; background-color:#25b4e8 }
	.deb2-wrap-mb { height:auto }
	.gnb .dep1:first-child .deb2-wrap { border-left:0 }
	.dep2 { width:100%; border-top:1px solid #76cbea }
	.dep2 + .dep2 { margin-top:0 }
	.dep2 .mn2 { display:block; width:70%; padding-left:16%; height:100%; padding-top:10px; padding-bottom:10px; text-indent:0; color:#fff }
	.dep2 .mn2:before { display:inline-block; content:'■'; font-size:10px; width:10px;  margin-right:5px }
	.dep2.on .mn2, .dep2 .mn2:hover { text-decoration:none; }

	/* 메뉴 클릭 시 스타일 */
	.mgnb .dep1.clicked { color:#fff; background-color:#25b4e8; border-color:#25b4e8 }
	.mgnb .dep1.clicked + .dep1 { border-color:#25b4e8 }

	.gnb .dep1 .mn1 { display:inline; font-weight:700; color:#666; }
	.mgnb .dep1.clicked .mn1 { color:#fff }

	/* 메뉴 불러오기-닫기 */
	.mmtr { display:block; position:absolute; right:2.5%; top:123px; width:40px; height:25px !important; background:url(../images/cmm/mmtr.png) 0 0 no-repeat; background-size:auto 100%; cursor:pointer; z-index:9 } /* 모바일 메뉴 트리거 */
	.mclose { position:fixed; top:10px; right:-290px; display:block; width:35px; height:35px; background:url(../images/cmm/mclose.png) 50% 50% no-repeat; z-index:999}
	.mn1m { display:block; position:absolute; left:0; top:0; right:0; height:38px; cursor:pointer }
}


.index { max-width:1020px; margin:0 auto }

#footer { width:100%; font-size:13px; color:#6a6a6a }
.footervisual { width:100%; height:175px; text-indent:-9999px; background:#000 url(../images/cmm/footvisual_en.jpg) 50% 0 no-repeat }
.foot { background-color:#ecf4f5 }
.footmn, .fbot dl { max-width:1020px; margin:0 auto  }
.footmn:after, .fbot dl:after { display:block; visibility:hidden; clear:both; content:'' }
.fbot { width:100%; padding:25px 0; border-top:1px solid #dadad3 }
.fbot dl {}
.fbot dt,  .fbot .adrs { float:left }
.fbot dt { padding-right:60px }
.fbot dt span { display:block; width:275px; padding-top:32px; margin:0 0 10px; text-indent:-9999px; font-size:0; background:url(../images/cmm/logo-ft_en.png) 0 0 no-repeat }
.fbot .adrs li:first-child { margin-bottom:0.5em }
.fbot .adrs li:first-child + li + li { margin-top:1.5em }
.fbot .qrc { float:right;  }
.fbot .qrc span { display:block; width:45px; height:45px; text-indent:-9999px; background:url(../images/cmm/qr.jpg) 0 0 no-repeat; }

@media only screen and ( max-width:768px ) {
	#footer { position:relative }
	.ftop, .fbot dl { max-width:600px; width:90%; margin:0 auto }
	.footervisual,
	.fbot dt,
	.fbot .qrc { display:none }
	.footmn { float:initial; width:100%; margin:0; font-size:0.85em }
	.footmn li { padding-left:0.5em; padding-right:0.5em; height:auto;  }
	.footmn a { margin-top:0 }
	.fbot { font-size:0.9em }
	.fbot .adrs { padding-bottom:2.2em }

	.familysite { position:absolute; bottom:20px; right:5%;}
	.familysite select { min-width:50px; height:26px; font-size:0.9em }
	.familysite input[type=button] { height:25px}

}