/* common mobile css */

/* Font 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@font-face {
	font-family: 'NanumGothic';
	src: url('/tpl/webfont/NanumGothic.eot');
	src: url('/tpl/webfont/NanumGothic.eot?#iefix') format('embedded-opentype'),
	url('/tpl/webfont/NanumGothic.woff') format('woff'),
	url('/tpl/webfont/NanumGothic.ttf') format('truetype');
}


/* Reset 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0; padding:0;}
fieldset,img{border:0 none;}
dl,ul,ol,menu,li{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,q:before, q:after{content:''; content:none;}
input,select,textarea,button{font-size:100%; vertical-align:middle;}
button{border:0 none; background-color:transparent; cursor:pointer;}
table{border-collapse:collapse; border-spacing:0;}
body{-webkit-text-size-adjust:none} /* 뷰표트 변환시 폰트크기 자동확대 방지 */
input[type='text'], input[type='password'], input[type='submit'], input[type='search']{-webkit-appearance:none; border-radius:0;}
input:checked[type='checkbox']{background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file']{-webkit-appearance:button; border-radius:0;}
input[type='search']::-webkit-search-cancel-button{-webkit-appearance:none;}
body,th,td,input,select,textarea,button{font-size:13px; line-height:1.5; font-family:'NanumGothic', '맑은 고딕', sans-serif; color:#333;} /* color값은 디자인가이드에 맞게사용 */
a{color:#333; text-decoration:none;}
a:active, a:hover{text-decoration:none;}
address,caption,cite,code,dfn,em,var{font-style:normal; font-weight:normal;}


/* Common
---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.mT5 {margin-top:5px;}
.mR7 {margin-right:7px;}
.mL7 {margin-left:7px;}
.mL20 {margin-left:20px;}
.mT30 {margin-top:30px;}
.mB60 {margin-bottom:60px;}
.ta_C {text-align:center;}

.hidden{margin:0; padding:0; width:0; height:0; line-height:0; font-size:0; text-indent:-9999em; overflow:hidden;}


/*  Layout
---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
html,body{height:100%;}
#wrap{position:relative; width:100%; min-width:320px;}


/*  Header
---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#header{padding:10px; width:100%; height:55px; box-sizing:border-box; background:#fff; } 
#header h1{float:left; width:auto; height:35px; line-height:0; font-size:0;}
#header h1 a{display:block; height:100%; line-height:1; font-size:20px;}
#header h1 a img{ width: auto ;height: 100%;}

#nav{z-index:777; transition:.3s background linear;}
#nav.open{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#70000000,endColorstr=#70000000);}

#nav .btn_allmenu{z-index:999; position:absolute; top:28px; right:10px;margin-top:-10px; width:26px; height:20px; cursor:pointer; transition:.3s all linear;}
#nav .btn_allmenu span{position:absolute; right:1px; display:block; width:26px; height:3px; transition:.3s all linear; background:#01663e; cursor:pointer;}
#nav .btn_allmenu span.line01{top:0;}
#nav .btn_allmenu span.line02,
#nav .btn_allmenu span.line03{top:9px; transform:rotate(0deg);}
#nav .btn_allmenu span.line04{top:18px;}
#nav.open .btn_allmenu{position:fixed;}
#nav.open .btn_allmenu span.line01{right:50%; width:0;}
#nav.open .btn_allmenu span.line02{transform:rotate(45deg);}
#nav.open .btn_allmenu span.line03{transform:rotate(-45deg);}
#nav.open .btn_allmenu span.line04{right:50%; width:0;}
#nav.open .btn_allmenu:after{display:none;}

/* ie8 용 */
#nav.open .btn_allmenu span.line01,
#nav.open .btn_allmenu span.line02,
#nav.open .btn_allmenu span.line03,
#nav.open .btn_allmenu span.line04{display:none\9;}
#nav.open .btn_allmenu:after{display:inline-block\9; content:"\2715\9"; font-weight:bold\9; font-size:29px\9; line-height:20px\9; color:#01663e\9;}

.navigation{z-index:888; position:fixed; -webkit-transform:translate(0); top:0; right:-280px; padding-top:65px; width:280px; height:100%; box-sizing:border-box; background:#f9f9f9; transition:.3s all linear;}
#nav.open .navigation{right:0;}

.navigation > li{border-top:1px solid #ddd;}
.navigation > li:last-child{border-bottom:1px solid #ddd;}
.navigation .main_menu{position:relative;display:block; padding:0 15px; height:45px; overflow:hidden; line-height:45px; font-size:15px; color:#333; cursor:pointer;}
.navigation .main_menu:after{position:absolute; top:50%; right:15px; display:inline-block; content:""; margin-top:-3px; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid #bbb;}
.navigation > li.active{border-color:#01663e;}
.navigation > li.active .main_menu{font-weight:bold; color:#01663e; background:#fff;}
.navigation > li.active .main_menu:after{border-bottom:6px solid #bbb; border-top:0;}

.sub_menu{display:none; background:#01663e;}
.sub_menu li a{display:block; padding:0 15px; height:40px; overflow:hidden; line-height:40px; font-size:13px; color:#fff; border-top:1px solid #719688;}
.sub_menu li:first-child a{border-top:0;}
.sub_menu li a:before{display:inline-block; content:"\2010"; margin-right:7px;}


/*  Footer
---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.footer{padding:25px 10px; width:100%; box-sizing:border-box; text-align:center; background:#eee;}
.footer a, .footer p, .footer dd{color:#626262;}
.footer > ul, foot_btn > dl{line-height:0; font-size:0;}

.foot_btn{margin:0 -2px;}
.foot_btn li{display:inline-block; margin:0 3px; line-height:0; font-size:0;}
.foot_btn li a{display:inline-block; padding:6px 10px; letter-spacing:-1px; line-height:1; font-size:13px; border:1px solid #a1a1a1;}

.foot_clause li{margin-top:20px; display:inline-block; margin-left:5px; padding-left:5px; line-height:10px; border-left:1px solid #bbb;}
.foot_clause li:first-child{margin-left:0; padding-left:0; border-left:0;}
.foot_clause li a{line-height:10px; font-size:13px;}

.foot_info{margin-top:20px;}
.foot_info dd{display:inline-block; margin:0 5px; word-break:break-all; line-height:1.4; font-size:12px;}
.foot_info + .copyright{margin-top:10px; font-size:12px;}


/*  Main Page
---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#main_contents{z-index:666;    position: relative;}
#main_contents:after{content:""; display:block; clear:both;}

.main_img{width:100%; margin:0; padding:0;line-height:0}
.main_img img{width:100%;}


.box {clear:both; margin:0 auto; padding:2% 1%; width:98%;}
.box:after {content:""; display:block; clear:both;}
.box .box_w {float:left; width: 32%; margin:0; padding:.5%}
.box .box_w a img{margin:0; padding:0}


/*  Sub Page
---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#subContainer{z-index:666; padding-top:12px; border-top:1px solid #ddd;}
#subContainer:after{content:""; display:block; clear:both;}

#contents{width:96%; margin:0 auto; padding:0 2% 5%}
#subContainer #mobile_contents h2,
#subContainer #contents h2{margin:0; padding:0; width:100%; height:40px; font-size:20px; text-align:left; color:#424242; letter-spacing:-1px; border-bottom:1px solid #dcdcdc}
#contents h3{margin:10px 0; font-size:1.6em; font-weight:bold; color:#2993e5; line-height:24px;}

/* 고객센터 */
.s_box {width:100%; padding:15px; margin:30px auto 0; box-sizing:border-box; border:1px solid #d3d3d3; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; box-shadow:1px 1px 0 #e5e5e5; font-size:14px; color:#666; line-height:25px;}
.s_box:after{content:""; display:block; clear:both;}
.s_box dt {clear:both; float:left; padding-left:9px; background:url(../images/icon_dot2.gif) left 10px no-repeat; font-weight:bold; letter-spacing:-1px;}
.s_box dd {float:left; margin-left:5px;}
.s_txt.cs {padding:20px 10px 50px;}
.s_txt.cs dt {color:#14905f;}


/* 고객센터 new*/
.cs_box {width:100%; padding:15px; margin:30px auto 0; box-sizing:border-box; border:1px solid #d3d3d3; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; box-shadow:1px 1px 0 #e5e5e5; font-size:14px; color:#666; line-height:25px;}
.cs_box:after{content:""; display:block; clear:both;}
.cs_box dt {clear:both; float:left; padding-left:9px; background:url(../images/icon_dot2.gif) left 10px no-repeat; font-weight:bold; letter-spacing:-1px;}
.cs_box dd {float:left; margin-left:5px;}


/* sub공통 */
.s_txt {width:100%; padding:30px 0 0;}
.s_txt h4 {font-size:20px; line-height:30px; color:#01663e; font-weight:700; background:url(/images/kor11-17-0368/sub/h4.gif)no-repeat; padding-left:36px;margin-bottom:15px; margin-top:50px; letter-spacing:-1px;}
.s_txt > h4:first-child {margin-top:0;}
.s_txt p {font-size:14px; color:#4d4d4d; line-height:20px; margin-bottom:20px; letter-spacing:-0.6px;}

/* JJE&T 소개 */
.sub1_1 ul {background:url(/images/kor11-17-0368/sub/history_line.gif)repeat-y 0 0; margin-left:15px;}		
.sub1_1 li,.sub1_1 li span {font-size:14px; line-height:20px; color:#4d4d4d;}
.sub1_1 li {background:url(/images/kor11-17-0368/sub/line_green.gif)no-repeat 0 45%; padding-left:20px; padding-bottom:10px;}
.sub1_1 li span {display:inline-block; width:50px;}	

/* 회사위치 */
.sub1_2 table {margin-top:15px; width:100%;}
.sub1_2 table th {width:22%; height:55px; line-height:55px; font-size:14px; color:#fff; font-weight:300; text-align:center; background-color:#6cb799; border-bottom:1px solid #dcdcdc;}
.sub1_2 table td {font-size:14px; padding-left:25px; color:#4d4d4d; border-right:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; letter-spacing:-0.6px;}
.sub1_2 table td a {color:#4d4d4d;}
.sub1_2 table td span {display:inline-block; font-size:14px;color:#6cb799;}
.sub1_2 table tbody > tr:first-child td {border-top:1px solid #dcdcdc;}

/* 해외표준규격알기 */
.sub2_1 table {width:100%;}
.sub2_1 th {
width:20%; height:47px; font-size:14px; color:#fff; font-weight:300; letter-spacing:-0.6px; text-align:center; line-height:20px; padding:10px; background-color:#6cb799; border-bottom:1px solid #dcdcdc; }
.sub2_1 td {font-size:14px; padding:15px; color:#4d4d4d; border-right:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; letter-spacing:-0.6px;}	
.sub2_1 td span {font-size:14px;color:#6cb799; padding-left:10px;}
.sub2_1 tbody > tr:first-child td {border-top:1px solid #dcdcdc;}

/* 원문서비스 소개 */
.sub3_1 li {position:relative; padding-left:18px; padding-bottom:10px; font-size:14px; color:#4d4d4d; letter-spacing:-0.6px; line-height:20px;}
.sub3_1 li:before {position:absolute;left:8px; top:8px; content:''; width:4px; height:4px; border-radius:50%; background:#2f8e68;}
.sub3_1 p {margin-top:20px; margin-left:8px;}
.sub3_1 img {padding-top:10px;}

/* 구독서비스 소개*/
.sub4_1 li {position:relative; padding-left:18px; padding-bottom:10px; font-size:14px; color:#4d4d4d; letter-spacing:-0.6px; line-height:20px;}
.sub4_1 li:before {position:absolute;left:8px; top:8px; content:''; width:4px; height:4px; border-radius:50%; background:#2f8e68;}
.sub4_1 li a {color:#e95b3f;}
.sub4_1 p.text_point {margin:25px 0 20px; margin-left:8px; font-size:20px; color:#f76719; line-height:24px;}
.sub4_1 img {padding-top:10px;}


.s_txt dt {font-size:16px; color:#0062aa; font-weight:bold; letter-spacing:-1.5px; line-height:20px;}
.s_txt dd {margin-top:10px; font-size:14px; color:#666; letter-spacing:-1px; line-height:20px;}
.s_txt dd .ls_0 {letter-spacing:0;}
.s_txt .slogan { font-size:18px; line-height:22px; color:#666; letter-spacing:-1px; }
.s_txt .slogan strong { color:#ff6c00; letter-spacing:-1px; }
.s_txt .title_strong { font-size:14px; font-weight:bold; line-height:18px; color:#666;}

.s_txt2 {width:94%; padding:0 3% 25px;}
.s_txt2 dt {margin-top:20px; padding-left:9px; background:url(../images/icon_dot.gif) left 5px no-repeat; font-size:14px; color:#71b948; font-weight:bold; letter-spacing:-1px;}
.s_txt2 dd {margin-top:10px; font-size:12px; color:#666; letter-spacing:-1px; line-height:18px;}
.s_txt2 dd .ls_0 {letter-spacing:0;}
.s_txt2 {width:94%; padding:0 3% 25px;}
.s_txt2 dt {margin-top:20px; padding-left:9px; background:url(../images/icon_dot.gif) left 5px no-repeat; font-size:14px; color:#71b948; font-weight:bold; letter-spacing:-1px;}
.s_txt2 dd {margin-top:10px; font-size:12px; color:#666; letter-spacing:-1px; line-height:18px;}


.notice {clear:both; width:100%;}
.notice li {width:94%; padding:15px 3% 15px; text-align:center; border-bottom:1px solid #d8d8d8; font-size:14px; color:#666; font-weight:bold;}
.notice li dl {width:100%; background:url(../images/btn_go.gif) right 10px no-repeat; *zoom:1;}
.notice li dl:after {content:""; display:block; clear:both;}
.notice li dl dt {width:90%; margin-bottom:10px; text-align:left; letter-spacing:-1px; line-height:18px;}
.notice li dl dd.name {padding-right:10px; border-right:1px solid #ddd; float:left; font-size:12px; color:#959595; font-weight:normal;}
.notice li dl dd.date {padding-left:10px; float:left; font-size:12px; color:#959595; font-weight:normal;}
.btn {width:94%; padding:20px 3% 15px;}
.btn_write {float:right; padding:10px 25px; text-align:center; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#efefef)); background: -moz-linear-gradient(top, #fefefe, #efefef); border:1px solid #aaa; font-size:14px; color:#333}

.paging {clear:both; width:94%; padding:40px 3% 15px; text-align:center; color:#888;}
.paging img {vertical-align:middle;}
.paging span {padding:0 1px;}
.paging .on {color:#333; font-weight:bold;}

.search {clear:both; width:94%; padding:0 3% 60px; text-align:center;}
.search select {height:32px;}
.form_search {height:28px; padding-left:7px;}
.btn_search {margin:0px; padding:7px 15px; text-align:center; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#efefef)); background: -moz-linear-gradient(top, #fefefe, #efefef); border:1px solid #aaa; font-size:14px; color:#333}

.tab {clear:both; width:96%; margin-bottom:10px; border-bottom:1px solid #bcbcbc; padding:30px 3% 0; *zoom:1;}
.tab:after {content:""; display:block; clear:both;}
.tab li {float:left; width:24.3%; padding:9px 0 8px; background:#f2f2f2; border:1px solid #bcbcbc; border-left:none; border-bottom:none; font-size:13px; color:#666; text-align:center;}
.tab li.first {border-left:1px solid #bcbcbc;}
.tab li.on {background:#fff; color:#000;}

.clause_txt {clear:both; width:94%; padding:30px 3%; font-size:14px; color:#666; line-height:20px;}
.tip {clear:both; width:94%; padding:30px 3%; font-size:12px; color:#999; text-align:center; line-height:20px;}

.login_box {width:84%; margin:30px 3% 0; padding:15px 5%; background:#f0f0f0; border:1px solid #c7cacb; *zoom:1;}
.login_box:after {content:""; display:block; clear:both;}
.input_area {float:left; width:70%;}
.input_area input {width:95%; height:28px; padding-left:5%; font-size:14px; color:#666; font-weight:bold;}
.login_btn {width:27%; float:right; padding:25px 0; text-align:center; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#efefef)); background: -moz-linear-gradient(top, #fefefe, #efefef); border:1px solid #aaa; font-size:14px; color:#333}
.login_box .check {clear:both; display:block; padding-top:10px; font-size:13px; color:#767676; letter-spacing:-1px;}
.login_box .check input[type="checkbox"] {vertical-align:-2px; margin-right:2px;}
.login_txt {width:90%; margin:0 3%; padding:10px 2%; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#efefef)); background: -moz-linear-gradient(top, #fefefe, #efefef); border:1px solid #c7cacb; border-top:none; }