@charset "utf-8";

/* ============= reset ============= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
title, mark, audio, video {margin:0;padding:0;font-size:100%;font:inherit;vertical-align:baseline;}

/* HTML5 display-roll reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}

body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
q:before, q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
th, td {word-break:break-all;vertical-align:middle;}
caption, legend {visibility:hidden;overflow:hidden;height:0;text-indent:-9999px;}
img, input, button, select, textarea {vertical-align:middle;}
img, fieldset, iframe {border:0;}

/* ============= common ============= */
/* font */
@font-face {
    font-family:'NanumGothic';
    font-style:normal;
    font-weight:normal;
    src: url(../font/NanumGothic-Regular.eot);
    src: url(../font/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
         url(../font/NanumGothic-Regular.woff2) format('woff2'),
         url(../font/NanumGothic-Regular.woff) format('woff')
}

@font-face {
    font-family:'NanumGothic';
    font-style:normal;
    font-weight:bold;
    src: url(../font/NanumGothic-Bold.eot);
    src: url(../font/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
         url(../font/NanumGothic-Bold.woff2) format('woff2'),
         url(../font/NanumGothic-Bold.woff) format('woff')
}

@font-face {
    font-family:'Roboto';
    font-style:normal;
    font-weight:bold;
    src: url(../font/Roboto-Regular.eot);
    src: url(../font/Roboto-Regular.eot?#iefix) format('embedded-opentype'),
         url(../font/Roboto-Regular.woff2) format('woff2'),
         url(../font/Roboto-Regular.woff) format('woff')
}
/* common */
body {-webkit-text-size-adjust:none;font-family:'NanumGothic','나눔고딕','Malgun gothic','맑은고딕',Dotum,'돋움','Roboto',arial,sans-serif;color:#2f2f2f;letter-spacing:-0.5px;}
a:hover, a:focus, a:active, a:link, a:visited {color:#2f2f2f;text-decoration:none;}
button {cursor:pointer;}
.blind {display:none;}

/* layout */
.wrapper {position:relative;top:145px;left:0;width:100%;height:480px;}
.header {width:1000px;height:60px;margin:0 auto}
.mainWrap {width:100%;height:380px;background:linear-gradient(to right, #f27221,#f47721,#f89f1e,#faaa1d)}
.container {position:relative;width:100%;height:100%;}
.footer {overflow:hidden;width:1000px;height:auto;margin:0 auto;padding-top:20px}

/* header */
.header h1 {overflow:hidden}
.header h1.logo {float:left;width:146px;height:39px;background:url(../img/logo_hanwha.png) no-repeat}
.header .language {float:right;font-size:13px;font-family:'Roboto',sans-serif;margin-top:30px }
.header .language a, .header .language hr {display:inline-block;vertical-align:middle;}
.header .language a {color:#b6aaa2;}
.header .language a:hover,
.header .language a.on {color:#f8a01e;}
.header .language .vertical {width:1px;height:10px;border:0;background-color:#bbb0a9;margin:0 5px}

/* contents */
.container {background:url(../img/mainbackground.png) no-repeat center;}
.mainStationery {position:absolute;left:50%;width:490px;height:100%;background:url(../img/mainstationery.png) no-repeat 5px 83px;margin-left:-490px}
/*20180801 추가*/.mainStationery.eng {background:url(../img/mainstationery_eng.png) no-repeat 40px 83px;}
.conents {position:absolute;left:50%;width:520px;height:100%;overflow:hidden;padding-top:40px;box-sizing:border-box}
.conents.mgl75 {margin-left:50px}/*inner login*/
.conents>div {float:left;border-radius:5px;box-shadow:2px 3px 5px #cb7d29}
.conents>div:last-child {box-shadow:none;margin-top:6px}
.conents>div:nth-child(2) {margin-right:6px;}
.conents>div:nth-child(4) {margin-top:6px;margin-right:6px}
.loginArea {width:200px;height:303px;background:#fff;margin-right:6px;padding:0 15px;box-sizing:border-box}
.loginArea_in {width:400px;height:303px;background:#fff;margin-right:6px;padding:0 40px;box-sizing:border-box}/*inner login*/
.login {width:100%;height:27px;background:url(../img/tit_login.png) no-repeat left;margin-top:32px}
.loginForm {width:100%;margin-top:35px;margin-bottom:25px}
.loginForm input[type=text],
.loginForm input[type=password] {width:100%;height:33px;background:#ededed;border:1px solid #ccc;border-radius:3px;padding:5px;font-size:13px;color:#463d37;font-weight:bold;box-sizing:border-box}
.loginForm input[type=password] {margin-top:5px;}
.loginForm input[type=button] {width:100%;height:33px;background:#e14707;border:0;border-radius:3px;color:#fff;text-align:center;font-size:15px;font-weight:bold;letter-spacing:-1px;margin-top:10px;cursor:pointer}
.loginForm input[type=button].engtext {letter-spacing:0;font-size:18px;font-weight:normal}/*english login*/
.loginForm input[type=button]:hover {background:#47433f;animation: pulse 1s;}
@keyframes pulse {
  0% {background-color:#e14707;}
  100% {background-color:#47433f;}
}
a.findpw {background:url(../img/ico_magnify.png) no-repeat 3px 50%;font-size:13px;color:#463d37;font-weight:bold;padding-left:22px;}
a.findpw:hover {color:#111} 
.bennerBox {width:148px;height:148px;}
.bennerBox>a {display:inline-block;width:100%;height:100%;border-radius:5px;padding:20px;box-sizing:border-box}
.bennerBox>a:hover {animation: pulse2 1s;}
@keyframes pulse2 {
  0% {background-color:#f5ebe6;}
  100% {background-color:#47433f;}
}
.bennerBox>a .title {font-size:16px;color:#e2610d;font-weight:bold;line-height:1.2em}
.bennerBox>a:hover .title, .bennerBox>a:hover .more {color:#fff}
.bennerBox>a .more {display:inline-block;font-size:11px;color:#706e6c;border-bottom:1px solid #706e6c;padding-bottom:2px;margin-top:58px}
.bennerBox>a:hover .title {color:#fff}
.bennerBox>a:hover .more {color:#fff;border-bottom:1px solid #fff}
.bennerBox>.newtrade {background:#f5ebe6 url(../img/ico_newtrade.png) no-repeat 89px 90px;}
.bennerBox>.newtrade:hover {background:#47433f url(../img/ico_newtrade_w.png) no-repeat 89px 90px;}
.bennerBox>.purchasing {background:#f5ebe6 url(../img/ico_purchasing.png) no-repeat 89px 90px;}
.bennerBox>.purchasing:hover {background:#47433f url(../img/ico_purchasing_w.png) no-repeat 89px 90px;}
.bennerBox>.certificate {background:#f5ebe6 url(../img/ico_certificate.png) no-repeat 89px 90px;}
.bennerBox>.certificate:hover {background:#47433f url(../img/ico_certificate_w.png) no-repeat 89px 90px;}
.bennerList {width:148px;height:148px;}
.bennerList ul {padding:5px;}
.bennerList ul li {width:100%;height:34px;border-bottom:1px dashed #d58d20}
.bennerList ul li a,
.bennerList ul li a span {display:inline-block;vertical-align:middle;line-height:2em} 
.bennerList ul li a span:first-child {width:19px;height:19px;background-position:center}
.bennerList ul li .label {font-size:12px;color:#633e0c;letter-spacing:-1px;font-weight:bold;padding-left:3px}
.bennerList ul li a:hover .label {color:#111}
.bennerList .icon_ethical {background:url(../img/ico_athical.png) no-repeat }
.bennerList .icon_winwin {background:url(../img/ico_winwin.png) no-repeat}
.bennerList .icon_fairtrade {background: url(../img/ico_fairtrade.png) no-repeat}
.bennerList .icon_credit {background:url(../img/ico_credit.png) no-repeat}

/* footer */
.footer .fnb {float:left;font-size:13px;font-weight:bold}
.footer .fnb a, .footer .fnb hr {display:inline-block;vertical-align:middle;}
.footer .fnb a {color:#777;}
.footer .fnb a:hover {color:#222}
.footer .fnb .vertical {width:1px;height:12px;border:0;background-color:#777;margin:0 8px}
.footer .copyright {width:206px;height:13px;float:right;background:url(../img/copyright.png) no-repeat}

/* message */
.messageWrap {background:#f1f1f1}
.messageWrap .wrap {position:relative;width:100%;height:100%;}
.messageWrap .container {position:fixed;left:50%;top:50%;width:500px;height:460px;margin-top:-280px;margin-left:-250px;box-shadow:0px 3px 8px #dadada;background:#fff}
.messageWrap .container2 {position:fixed;left:50%;top:50%;width:540px;height:500px;margin-top:-300px;margin-left:-270px;box-shadow:0px 3px 8px #dadada;background:#fff} 
.messageWrap .header {width:100%;height:52px;border-radius:5px 5px 0 0;background:#8e8c8b;box-sizing:border-box}
.messageWrap .header .logo {display:inline-block;width:152px;height:34px;background:url(../img/logo_message.png) no-repeat;margin:20px 0 0 25px;text-indent:-10000px;}
.messageWrap .section {width:100%;border-radius:0 0 5px 5px;box-sizing:border-box}
.messageWrap .section .subject {overflow:hidden;margin:60px auto 25px;}
.messageWrap .section .subject b,
.messageWrap .section .subject span {display:inline-block;letter-spacing:-1px}
.messageWrap .section .subject b {font-size:80px;font-weight:normal;vertical-align:top;letter-spacing:-6px}
.messageWrap .section .subject span {font-size:28px;color:#303030;font-weight:bold;line-height:1.2em;letter-spacing:-1px;padding-top:10px;padding-left:22px}
.messageWrap .section .explan {width:330px;min-height:32px;margin:0 auto;background:url(../img/ico_caution_y.png) no-repeat;padding-left:55px;font-size:12px;color:#7f7f7f;line-height:1.3em;}
.messageWrap .section .subject2 {width:330px;margin:60px auto 25px;}
.messageWrap .section .subject2 b {display:inline-block;min-height:32px;background:url(../img/ico_caution_y.png) no-repeat;padding-left:55px;padding-top:5px;font-size:24px;font-weight:bold;}
.messageWrap .section .explan2 {width:370px;margin:0 auto;font-size:13px;color:#252424;line-height:1.5em;text-align:center}
.messageWrap .section .subject3 {width:330px;margin:70px auto 30px;}
.messageWrap .section .subject3 b {display:inline-block;min-height:71px;background:url(../img/ico_logout_y.png) no-repeat;padding-left:100px;padding-top:5px;font-size:24px;font-weight:bold;line-height:1.3em;}
.messageWrap .section .hr {width:360px;height:1px;background:#b1b1b1;margin:40px auto}
.messageWrap .section .hr2 {width:400px;height:1px;background:#b1b1b1;margin:40px auto}
.messageWrap .section .commt {text-align:center;font-size:15px;color:#252424;line-height:1.6em;}
.messageWrap .section .commt b {font-weight:normal;}
.messageWrap .section .btn_bg_msg {width:280px;height:52px;border-radius:5px;border:0;background:#554a42;cursor:pointer;text-align:center;font-size:18px;color:#fff;line-height:1.3em}
.messageWrap .section .btn_bg_msg:hover {background:#492002}
.messageWrap .section .btn_cnt {text-align:center;margin-top:25px}