@charset "utf-8";

/* CSS Reset */
body,html {border:0;padding:0;margin:0;}
header,footer,aside,nav,section,article,details,figure,figcaption,menu,command,
div,dl,dd,ol,ul,li,form,fieldset,legend,iframe,table,caption,thead,tfoot,tbody,tr,th,td, /* Block Element */
h1,h2,h3,h4,h5,h6,dt,summary,input,textarea,button,select,datalist,
img,embed,object,canvas,audio,video,meter,progress,keygen, /* Inline Block Element */
a,label,output,dialog, /* Inline Element */
address,blockquote, /* Text Block Element */
p,pre,/* Text Inline Block Element */
span,b,strong,i,em,dfn,var,u,ins,s,del,q,mark,small,sub,sup,abbr,bdi,bdo,cite,time,ruby,rp,rt,code,kbd,samp, /* Text Inline Element */
acronym,big,frame,frameset,noframes,tt, /* Not HTML5 Used Element */
map,option,hr,*{border:0;padding:0;margin:0;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;}
header,footer,aside,nav,section,article,details,summary,figure,figcaption,menu,command{display:block} /* HTML5 Block Element */
applet,basefont,center,dir,font,strike{display:none} /* XHTML4, HTML5 Element Not Used Remove */
q,blockquote{quotes:none;content:none}
li,menu{list-style:none;word-break:break-all}
table{width:100%;border-spacing:0;border-collapse: separate;}
caption{text-align:left}
th,td{text-align:center;vertical-align:middle}
address{font-style:normal}
label{display:inline-block;}
a{text-decoration:none;display:inline-block;}

/* Common Setting */
html{}
html,body{min-width:320px;width:100%;height:100%;background:#fff;}
body {color:#5b5b5a; font-family:'HankookTire', 'HankookTireKR', NotoCJK, NotoSans, Helvetica,'droid sans fallback','?‚˜?ˆ” 고딕', Dotum, 'Apple SD Gothic Neo', 'AppleGothic', arial, helvetica, sans-serif; font-weight: normal; font-size:14px; line-height: 20px; letter-spacing: -0.013em;} 
div{outline:0} /* Script TabIndex Click Focusing Line Remove */
img {vertical-align:middle;}
span {display: inline-block;}
table {table-layout: fixed;}

h1,h2,h3,h4,h5,h6 {font-weight: bold;}
strong, b {font-weight: bold;}

a, select, input, label {outline: 0 none; -webkit-tap-highlight-color: transparent;}

button {cursor: pointer; background-color: transparent; outline: 0 none; -webkit-tap-highlight-color: transparent;}
button:hover, button:focus {background-color: rgba(0,0,0,0.05);}
button[disabled], button[readonly] {opacity: .2; cursor: text; outline: 0 none; background-color: #313131;}
button[disabled]:hover, button[readonly]:hover,
button[disabled]:focus, button[readonly]:focus {opacity: .2; cursor: text; background-color: #313131;}

input {outline: 0 none; -webkit-tap-highlight-color: transparent;}
input[disabled], input[readonly]{color:#999; cursor: text; outline: 0 none;}

input:focus::-webkit-input-placeholder{color: transparent;} 
input:focus::-moz-placeholder{color: transparent;} 
input:focus:-ms-input-placeholder{color: transparent;} 
input:focus::-ms-input-placeholder{color: transparent;}

::placeholder {color:#a8a8a8;}
::-webkit-input-placeholder {color:#a8a8a8;}
::-moz-placeholder {color:#a8a8a8;}
:-ms-input-placeholder{color:#a8a8a8;}
::-ms-input-placeholder{color:#a8a8a8;}


#wrap {width: 100%; height: 100%; position: relative;}
#wrap #header {padding: 10% 5.5% 5%; overflow: hidden;}
#wrap #header .logo-HTG {float: left; width: 25%; height: 0; padding-bottom: 15%; text-indent: -999rem;  background-image: url(../images/logo-HNC.jpg); background-position: top left; background-repeat: no-repeat; background-size: contain;}
#wrap #header .logo-hankook {float: right; width: 27.5%; height: 0; padding-bottom: 6.5%; text-indent: -999rem; background-image: url(../images/logo-hankook.png); background-position: top right; background-repeat: no-repeat; background-size: contain;}

#wrap #footer {background-color: #e9e9e9; width: 100%; padding: 5% 0;}
#wrap #footer p {text-align: center; font-size: 2.2vw; line-height: 3.5vw;}
#wrap #content {padding: 5% 0; box-sizing: border-box; width: 100%; display: table;}
#wrap #content .inbox {display: table-cell; vertical-align: middle;}
#wrap #content .down-inbox {vertical-align: top;}

.list {font-size: 0; padding: 0 2.5%;}
.list li {display: inline-block; vertical-align: top; width: 33.3333%; padding: 1.4% 3%; box-sizing: border-box;}
.list li a {display: block;}
.list .icon {background-image: url(../images/iconbg.png); background-position: center center; background-repeat: no-repeat; background-size: 100% 100%;}
.list .icon img {width: 100%;}
.list .text {font-size: 3.4vw; line-height: 3.8vw; font-weight: 500; padding: 6% 0; text-align: center; color: #5b5b5a;}

.down-inbox .list {padding-left: 0; padding-right: 0;}
.down-inbox .list li {padding: 0; width: calc(50% - 2%); background-color: #eae6e6;}
.down-inbox .list li:first-child {margin-right: 2%;}
.down-inbox .list li:last-child {margin-left: 2%;}
.down-inbox .list .text {background-repeat: no-repeat; background-position: center 36%; background-size: auto 40%; padding-top: 65%; padding-bottom: 15%;}
.down-inbox .list .text.icon-iOS {background-image: url(../images/icon-iOS.png);}
.down-inbox .list .text.icon-bus {background-image: url(../images/technoplexIOS.png);}
.down-inbox .list .text.icon-android {background-image: url(../images/icon-Android.png);}
.down-inbox .list .text.icon-link {background-image: url(../images/icon-link.png);}

.down-inbox .list li.full {width: calc(100% - 4%);}
.down-inbox .list li.full .text {background-size: auto 32%; padding-top: 28%; padding-bottom: 7%;}

.down-inbox .tit {text-indent: -999rem; background-position: center center; background-repeat: no-repeat; background-size: 30% auto; width: 100%; padding-top: 12%; height: 0; margin-bottom: 4%;}
.down-inbox .tit.icon-Arena {background-image: url(../images/icon-Arena.png);}
.down-inbox .tit.icon-Technoplex {background-image: url(../images/icon-Technoplex.png); background-size: 38% auto;}
.down-inbox .tit.icon-Smart {background-image: url(../images/icon-Smart.png);}
.down-inbox .tit.icon-GlobalReturn {background-image: url(../images/icon-GlobalReturn.png);}
.down-inbox .tit.icon-WOS {background-image: url(../images/icon-WOS.png);}
.down-inbox .tit.icon-Evidence {background-image: url(../images/icon-Evidence.png);}
.down-inbox .tit.icon-Barcode {background-image: url(../images/icon-Barcode.png);}
.down-inbox .tit.icon-Delivery {background-image: url(../images/icon-Delivery.png);}
.down-inbox .tit.icon-Tfleet {background-image: url(../images/icon-Tfleet.png);}
.down-inbox .tit.icon-LSMS {background-image: url(../images/icon-HKLSMS.png);}
.down-inbox .tit.icon-SMS {background-image: url(../images/icon-SMS.png);}
.down-inbox .tit.icon-ESP {background-image: url(../images/icon-ESP.png);}
.down-inbox .tit.icon-SmartGuide {background-image: url(../images/icon-SmartGuide.png);}
.down-inbox .stit {font-size: 5vw; line-height: 5.8vw; font-weight: 500; text-align: center; color: #5b5b5a; margin-bottom: 8%;}

.down-inbox .list li.hidden {background-color: transparent;}
.down-inbox .list li.hidden .text {background-image: none; font-size: 0;}

.downbox {/* border-top: 1px solid #ddd; */ padding: 2% 5.5%;}
.downbox + .downbox {margin-top: 6%;}

.linkbox {}
.linkbox .list {text-align: center;}
.linkbox .list li {width: calc(100% - 4%); margin: 0 !important;}
.linkbox .list li + li {margin-top: 6% !important;}
.linkbox .list li .text {padding-top: 13%; padding-bottom: 5%; padding: 8% 20% 8% 5%; background-position: 95% center; text-align: left;}








.downbox .down {font-size: 0;}
.downbox .down a {font-size: 4vw; line-height: 5vw; font-weight: 500; color: #fff; padding: 3.3% 0; text-align: center; display: inline-block; width: calc(50% - 2%); box-sizing: border-box; background-color: #a0a0a0;}
.downbox .down a:first-child {margin-right: 2%;}
.downbox .down a:last-child {margin-left: 2%;}