body { margin: 0; padding: 0; font: 13px/1.8 Arial, sans-serif; color: #000; text-align: center; background-color: #000;}
body.en { font-size: 14px;}
a { text-decoration: none; color: #fff;}
.clear:after { display: block; clear: both; height: 0; width: 0; content: '';}

.header { padding: 10px 0 18px 0; z-index: 9999; position: fixed; width: 100%; background-color: #000; box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.header .logo { line-height: 1.6; font-size: 30px; color: #fff; font-weight: bolder; float: left; padding: 4px 0 0 20px;}
.header .logo img { height: 38px; display: block;}
.nav { float: right; margin: 0 170px 0 0; padding: 13px 0 0 0; list-style: none;}
.nav li { float: left; margin-left: 30px; font-size: 13px; list-style: none;}
.nav li a { border-bottom: 1px solid transparent; padding-bottom: 10px; transition: all .3s ease;}
.nav li a:hover { border-bottom: 1px solid #fff; transition: all .3s ease;}
body.en .nav { margin-right: 160px;}
body.en .nav li { font-size: 15px;}

.language { position: absolute; right: 25px; top: 20px;}
.language a.cur { position: relative; text-align: left; text-indent: 27px; display: inline-block; padding: 2px 0; border-radius: 3px; width: 94px; background-color: #000; border: 1px solid #fff; color: #fff; transition: all .3s ease;}
.language a.cur i.icon-world { position: absolute; top: 5px; left: 7px; display: inline-block; width: 18px; height: 18px; background: url(../images/icon-language.png) no-repeat 0 0; background-size: 100% auto; transition: all .3s ease;}
.language a.cur:hover { background-color: #fff; border: 1px solid #fff; color: #000; transition: all .3s ease;}
.language a.cur:hover i.icon-world { background-position: 0 -18px; transition: all .3s ease;}
.language-box { display: none; position: absolute; background-color: #fff; padding: 3px 0; box-shadow: 0 1px 5px -1px rgba(10, 16, 34, .1); border-radius: 2px; border: 1px solid #fff; top: 40px;}
.language-box ul, .language-box li { list-style: none; margin: 0; padding: 0;}
.language-box li a { position: relative; text-indent: 28px; color: #000; display: block; width: 94px; text-align: left; padding: 3px 0;}
.language-box li a i { position: absolute; top: 7px; left: 9px; display: inline-block; width: 14px; height: 14px; background: url(../images/icon-language.png) no-repeat 0 -28px; background-size: 100% auto;}
.language-box li a i.icon-cn { background-position: 0 -28px;}
.language-box li a i.icon-en { background-position: 0 -42px;}
.language-box li a i.icon-jp { background-position: 0 -56px;}
.language-box li a i.icon-kr { background-position: 0 -70px;}
.language-box li a:hover { background-color: #eee;}
.language-box i.icon-triangle { left: 50%; margin-left: -4px; top: -5px; position: absolute; display: inline-block; width: 0; height: 0; border-bottom: 5px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent;}

.banner { margin: 0 auto; max-width: 680px; padding-top: 80px;}
.banner img { width: 100%;}

.container { text-align: left; margin: 0 auto; max-width: 800px; padding: 25px; background-color: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); border-radius: 4px;}
.container h1 { line-height: 1.2; font-size: 32px;}
.container h2 { font-size: 26px; padding-bottom: 5px;}
.container h3:before { display: inline-block; content: ''; width: 6px; height: 12px; border-radius: 2px; position: relative; margin-right: 5px; background-color: #0b70e2;}
.container ul, .container p { color: #666; line-height: 2;}
.container .essence-text { padding-left: 27px;}
.container .email { font-weight: bold; color: #0b70e2; text-align: center;}
.container .email span { display: inline-block; border: 1px solid #0b70e2; padding: 5px 35px; font-size: 14px;}
.container .email span i { position: relative; margin-right: 5px; top: 2px; display: inline-block; width: 16px; height: 14px; background: url("../images/icon-email.png") no-repeat; background-size: 100% auto;}

.footer p { color: #555; padding: 10px 0;}

#Cases, #Advantages, #Contact { padding-top: 20px;}

.contact-box { margin: 0 16%; padding: 10px 0 20px 0;}
.contact-box dd { float: left; width: 33.33%; margin: 0; padding: 0;}
.contact-box dd a { display: block; text-align: center; margin: 10px; padding: 20px 0; border: 1px solid transparent;}
.contact-box dd a:hover { border: 1px solid #eee; border-radius: 6px; box-shadow: 0 0 8px rgba(150, 150, 150, 0.1);}
.contact-box dd a h4 { color: #000; margin: 0; font-size: 14px;}
.contact-box dd a p { margin: 0; line-height: 1.2;}
.contact-box dd a i { display: inline-block; width: 40px; height: 40px; background: url(../images/icon-pic.png) no-repeat 0 0; background-size: 100% auto;}
.contact-box dd a i.icon-twitter { background-position: 0 -40px;}
.contact-box dd a i.icon-telegram { background-position: 0 -80px;}

@media screen and (max-width: 880px) {
    .container { margin: 0 20px;}
}


@media screen and (max-width: 750px) {
    .header { padding-bottom: 12px;}
    .nav { display: none;}
    .nav { float: none; width: 100%; margin: 0; padding: 65px 0 0 0;}
    .nav li { width: 25%; margin: 0;}
    .banner { padding: 75px 10px 0 10px;}
    body.en .container h2 { font-size: 20px;}
    body.en .language { top: 19px;}

    #Cases, #Advantages, #Contact { padding-top: 10px;}
    .contact-box { margin: 0; padding: 5px 0;}
    .contact-box dd a { margin: 0;}
    .contact-box dd a h4 { font-size: 12px;}
    .contact-box dd a p { font-size: 11px;}
}