﻿ ::-webkit-scrollbar-track-piece{width:11px;background-color:#f8f8f8}
::-webkit-scrollbar{width:11px;background-color:#ffa217}
::-webkit-scrollbar-thumb{width:11px;background-color:#aeaeae}
::-webkit-scrollbar-thumb:hover{width:11px;background-color:#ffa217}

article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block;}

html {
overflow:auto;overflow-x: hidden

 }

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after, q:before, q:after {content: '';content:none;}

table {border-collapse:collapse;border-spacing:0;}

a {text-decoration:none;color:inherit;}

a:hover {text-decoration:none;}

legend, caption, hr {display:none;}

em {font-style:normal;}

img {vertical-align:top;max-width: 100%;}

input {vertical-align:middle;}

p,h3,h2,h1{letter-spacing: normal;}

input,textarea,button,select{ font-family: sans-serif; }

section{width:100%;text-align: center;}



button{cursor: pointer}

button,select,input{ font-family:"microsoft yahei","STXihei","arial";-webkit-appearance: none;border: 0;background: transparent;  outline: 0;}

video{object-fit: cover;}

ol, ul,li { list-style: none; }

.clearfix:after{	clear: both;

	height: 0;

	content: "";

	line-height: 0;

	font-size: 0;

	display: block;

}

.dimmed{position: fixed;top:0;right:0;bottom:0;left:0;background: #fff;z-index: 999;width: 100%;height: 100%;opacity: 1;visibility: visible;}

.eng{font-family: 'Arial', sans-serif;background-color: transparent; -webkit-font-smoothing: antialiased;}

.ir_text, .alt_table, .hidden_label {position: absolute; top:-999999%; left:-999999%; text-indent: -9999px;overflow: hidden;height: 0;}

.ir_text > *, .alt_table > *{text-indent: -9999px;overflow: hidden;height: 0;}

#skipTo {width: 100%; overflow: hidden; position: relative; z-index: 1000;}

#skipTo a {margin: 0px -1px -1px 0px; width: 1px; height: 1px; text-align: center; line-height: 0; overflow: hidden; font-size: 0px; display: block;}

#skipTo a:focus {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}

#skipTo a:hover {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}

#skipTo a:active {background: rgb(32, 38, 44); margin: 0px; padding: 8px 0px 0px 15px; width: auto; height: 20px; color:#ffffff; line-height: 1; font-size: 12px; font-weight: 700;}





#wrap.en{font-family: 'Arial', sans-serif;}

#wrap.en button,#wrap.en select,#wrap.en input{ font-family:'Arial'}

#header{position: absolute;top:0;left:0;right:0;min-width:1083px;}

#gnb .navi:before {

    content: "";

    position: absolute;

    top: 0;bottom:0;

    left: 70px;right:70px;

    z-index: 1000;

    height: 100%;

    cursor: pointer;

    opacity: 0;

    background: rgba(0, 0, 0, 0.75);

    visibility: hidden;

}

body.stop{overflow-x: hidden; overflow-y: hidden;}

body.stop #gnb .navi:before {visibility:visible;opacity: 1;}

#misc_btns{position: relative;overflow: hidden; max-width: 1260px;margin: 0 auto;padding: 18px 0 12px;z-index: 999;opacity: 1;}

#misc_btns a{position: relative;display: inline-block;font-size: 11px;color: #d9deeb;line-height: 22px;padding: 0 11px;}

#misc_btns a:before{content: '';position: absolute;top:5px;bottom:0;left:0;height: 12px; width: 1px;background: #fff;opacity: 0.3}

#misc_btns a:first-child:before{content: none;}

#misc_btns .left_area{float: left;font-size: 0;letter-spacing: 0;word-spacing: 0;}

#misc_btns .left_area a{font-size: 12px;letter-spacing: 0; padding: 0;}

#misc_btns .right_area{float: right;}

#misc_btns .right_area a:last-child{background: #7c0118;padding: 0 8px;}

#misc_btns .right_area a:last-child:before{display: none;}

#misc_btns .right_area a:last-child:after{content: "";position: absolute;top: 2px;left: 2px;width: 90%;height: 74%;border: 1px solid #953044;}



#gnb{position: relative;  top: 0;text-align: center;width:100%;margin: 0 auto;z-index: 999;min-height: 70px; }

#gnb .navi{min-width:1260px;position: absolute;left:0;right: 0;top:0;  width: 100%;height:70px; background-color: #ffffff;max-width: 1260px;margin: 0 auto;font-size: 0;letter-spacing: 0;word-spacing: 0;}

#gnb .navi:after{content:none;}

#gnb .navi .center{position:relative;  width: 1450px;margin: 0 auto;  vertical-align: top;}

#gnb .navi .center> .center_inner>*{display: inline-block; vertical-align: top;}

#gnb .navi .btn_left{left:0;top:0;bottom:0;z-index: 1000; width: 70px;height:70px;font-size: 15px;position: absolute;top: 0;left: 0; }

body.active_right #gnb .navi .btn_left{z-index: 999;}

body.active_left #gnb .navi .btn_right{z-index: 999;}

#gnb .navi .btn_right{right:0;top:0;bottom:0;z-index: 1000;width: 70px;height:70px;font-size: 15px;position: absolute;top: 0;right: 0;}

#gnb .navi .btn_left{display: block;  background: url(../images/btn_business.png) no-repeat left center;}

#gnb .navi .btn_right{display: block; background: url(../images/btn_people.png) no-repeat right center;}

#gnb .navi .btn_left:hover{background-position:center center;}

#gnb .navi .btn_right:hover{background-position:center center;}

body.stop #gnb .navi .btn_left{background-position:right center;}

body.stop #gnb .navi .btn_right{background-position:left center;}





#wrap.main #gnb .navi > a.left:hover > div.rot_box:after{background-position:center center;}

#wrap.main #gnb .navi > a.right:hover > div.rot_box:after{background-position:center center;}

body.stop #wrap.main #gnb .navi > a.left > div.rot_box:after{background-position:right center;}

body.stop #wrap.main #gnb .navi > a.right > div.rot_box:after{background-position:left center;}



body.stop #misc_btns{opacity: 0;}



#wrap.main #gnb .navi {width:210px;min-width:210px;font-size:0;letter-spacing:0;word-spacing:0;background: none;overflow: hidden;}

#wrap.main #gnb .navi > * {width:70px;height:70px;}

#wrap.main #gnb .navi > *:hover > div.rot_box { transform: rotateX(-90deg);-ms-transform: rotateX(-90deg);-webkit-transform: rotateX(-90deg); }

#wrap.main #gnb .navi > * > div.rot_box {

    position:absolute;

    top:0;

    left:0;

    right:0;

    bottom:0;

    width:100%;

    height:100%;

    transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    -webkit-transform-style: preserve-3d;

    float:left;

    transform: rotateX(90deg); -ms-transform: rotateX(90deg); -webkit-transform: rotateX(90deg);

    transition: transform 1s cubic-bezier(.217,.60,.355,1);

}

#wrap.main #gnb .navi > div.center .center_inner{  position: relative;visibility: hidden;opacity: 0;/*min-width: 1060px;*/  min-width: 1120px;overflow: hidden}

#wrap.main #gnb .navi .btn_left{background: none;position: absolute;top: 0;left: 0;}

#wrap.main #gnb .navi .btn_right{background: none;position: absolute;top: 0;right: 0;}



#wrap.main #gnb .navi > div.center > div.rot_box { transition-delay:0.1s; }

#wrap.main #gnb .navi > a.right > div.rot_box { transition-delay:0.2s; }



#wrap.main #gnb .navi > * > div.rot_box:before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    bottom:0;

    width:100%;

    height:100%;



    transform: rotateX(0deg) translateZ(35px);

    backface-visibility: hidden;

}



#wrap.main #gnb .navi > a.left > div.rot_box:before { box-shadow: inset 0 0 0 3px #F1732F; }

#wrap.main #gnb .navi > div.center > div.rot_box:before { box-shadow: inset 0 0 0 3px #FFFFFF;}

#wrap.main #gnb .navi > a.right > div.rot_box:before { box-shadow: inset 0 0 0 3px #E91F3E;}



#wrap.main #gnb .navi > * > div.rot_box:after {

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    bottom:0;

    width:100%;

    height:100%;

    -webkit-transition: all 0.2s ease-out;

    -moz-transition: all 0.2s ease-out;

    -o-transition: all 0.2s ease-out;

    transition: all 0.2s ease-out;

    transform: rotateX(90deg) translateZ(35px);

    backface-visibility: hidden;

}



#wrap.main #gnb .navi > a.left > div.rot_box:after { background:#f1732f url('../images/btn_business.png') no-repeat left center;}

#wrap.main #gnb .navi > div.center > div.rot_box:after {background:#FFFFFF;}

#wrap.main #gnb .navi > a.right > div.rot_box:after {background:#e91f3e url('../images/btn_people.png') no-repeat right center;}





/* animation */

#wrap.main #gnb .navi.step1{}

#wrap.main #gnb .navi.step1 > * > div.rot_box{transform: rotateX(-90deg);}



/* step */

#wrap.main #gnb .navi.step2 {width:1260px;transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s;background: #fff;}

#wrap.main #gnb .navi.step2 > div.center {width:1120px;transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s;}

#wrap.main #gnb.scroll .navi.step2 {width:100%;transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s;}

#wrap.main #gnb .navi.step3 > div.center .center_inner{visibility: visible;opacity: 1; transition:all 0.5s 0.4s;-webkit-transition:all 0.5s 0.4s;-moz-transition:all 0.5s 0.4s;}

#wrap.main #gnb .navi.step3 {transition: all .4s;-webkit-transition: all .4s;-moz-transition: all .4s;}

#wrap.main #gnb.scroll .navi.step3 {transition: all .4s;-webkit-transition: all .4s;-moz-transition: all .4s;}

#wrap.main #gnb .navi.step3 .btn_left{background: #f1732f url(../images/btn_business.png) no-repeat left center;}

#wrap.main #gnb .navi.step3 .btn_right{background: #f1732f url(../images/btn_people.png) no-repeat right center;}

#wrap.main #gnb.scroll .navi.step3{background:#fff;max-width: 2000px;width:100%}



#gnb .navi ul.depth1{position: relative;font-size: 0;letter-spacing: 0;word-spacing: 0;margin: 0 auto;}

#gnb .navi ul.depth1 > li{ 
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
    margin: -1px 31px 0 19px;
}
 

#gnb .navi ul.depth1 > li > a{position: relative;display: block;color: #333333;height: 70px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; padding-top: 25px; font-size:16px}

#gnb .navi ul.depth1 > li > a em{display: block; color: #666666;font-size: 12px; font-weight: normal; line-height:10px}

#gnb .navi ul.depth1 > li:hover > a, 

#gnb .navi ul.depth1 > li.cur > a,

#gnb .navi ul.depth1 > li:hover > a em,

#gnb .navi ul.depth1 > li.cur > a em{ font-weight:bold; color:  #fe0000;}

#gnb .navi ul.depth1 > li:first-child > a:before{content: none;}

#gnb .navi ul.depth1 > li > a:after{content: none;}

#gnb .navi .logo{width: 210px;margin: 0;}

#gnb .navi .logo > a{position: relative;display: block;color: #333333;height: 70px;padding: 7px 0;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}



#gnb .navi .logo > a:before{content: '';position: absolute;left:0;top:27px;bottom:27px;width: 1px;background:#e9e9e9; }

#gnb .navi .logo > a:after{content: '';position: absolute;right:0;top:27px;bottom:27px;width: 1px;background:#e9e9e9; }

#gnb .navi .logo img{max-width: 227px;}



 

body.active_left #contents,body.active_right #contents{-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}

#contents:before {content: "";position: absolute;top: 0;bottom:0;left: 0;right:0;z-index: 1000;width: 100%;height: 100%;opacity: 0;background: rgba(0, 0, 0, 0.75);visibility: hidden;}



body.stop #contents:before {visibility:visible;opacity: 1;}

.header_inner_wrap .header_inner{ background: #fff;overflow-y: auto}

#header_left{position: fixed;top:0;left: 0;bottom:0;z-index: 0;width:100%;visibility: hidden;}

#header_left .header_inner_wrap{position: relative; max-width: 2000px;margin: 0 auto;height: 100%;overflow: hidden;}

#header_left .header_inner_wrap .header_inner{position: absolute;left:0;top: 0;bottom: 0;width: 480px;text-align: left;}

#header_left .header_inner_wrap .dimmed_area{position: absolute;left: 480px;top: 0;bottom: 0;right: 0;}



#header_left .header_inner_wrap .header_inner h3,

#header_right .header_inner_wrap .header_inner h3{background: url(../images/nav_bg.jpg) no-repeat center center;height: 70px;text-align: center;line-height: 70px;color: #ffffff;font-size: 20px;}

#header_left .header_inner_wrap .header_inner .block_box{background: url(../images/nav_bg2.jpg) no-repeat center center;height: 325px;padding-top: 25px;}

#header_left .header_inner_wrap .header_inner .block_box .icon{width: 158px;line-height: 0;margin: 0 auto;}

#header_left .header_inner_wrap .header_inner .block_box h4{margin-top: 28px;color: #fff;text-align: center;font-size: 16px;line-height: 24px;}

#header_left .header_inner_wrap .header_inner .block_box ul{margin: 25px auto 0;width: 370px;}

#header_left .header_inner_wrap .header_inner .block_box ul li{float: left;width: 89px;height: 89px;background: url(../images/kc_bg.png) no-repeat center center;color: #fff;line-height: 24px;margin-left: 50px;text-align: center;padding-top: 22px;}

#header_left .header_inner_wrap .header_inner .block_box ul li:first-child{margin-left: 0;}

#header_left .header_inner_wrap .header_inner .block_box2{border-top: 10px solid #f0f0f0;border-bottom: 10px solid #f0f0f0;padding: 25px 0;}

#header_left .header_inner_wrap .header_inner .block_box2 h4{text-align: center;color: #333333;font-size: 18px;}

#header_left .header_inner_wrap .header_inner .block_box2 .name{margin-top: 8px;text-align: center;color: #666666;font-size: 14px;}

#header_left .header_inner_wrap .header_inner .block_box2 ul{margin-top: 25px;text-align: center;}

#header_left .header_inner_wrap .header_inner .block_box2 ul li{display: inline-block;margin: 0 10px;}

#header_left .header_inner_wrap .header_inner .block_box2 ul li .icon{line-height: 0;height: 58px}

#header_left .header_inner_wrap .header_inner .block_box2 ul li .text{margin-top: 18px;}

#header_left .header_inner_wrap .header_inner .block_box2 ul li .text .bt{color: #333333;font-size: 15px;font-weight: bold;}

#header_left .header_inner_wrap .header_inner .block_box2 ul li .text p{color: #666666;font-size: 13px;margin-top: 10px;line-height: 24px;}

#header_left .header_inner_wrap .header_inner .block_box3{border-bottom: 10px solid #f0f0f0;}

#header_left .header_inner_wrap .header_inner .block_box3 table tr th{background: #e9e9e9;color: #333333;font-size: 15px;text-align: center;padding: 15px 10px;border: 1px dotted #cccccc;}

#header_left .header_inner_wrap .header_inner .block_box3 table tr td{color: #666666;font-size: 13px;line-height: 20px;border: 1px dotted #cccccc;text-align: center;padding: 15px 10px;}

#header_left .header_inner_wrap .header_inner .block_box4{height: 140px;line-height: 0;border-bottom: 10px solid #f0f0f0;}

#header_left .header_inner_wrap .header_inner .block_box5 a{display: block;float: left;width: 50%;height: 70px;color: #333333;padding-top: 25px;font-size: 18px;text-align: center;}

#header_left .header_inner_wrap .header_inner .block_box5 a:last-child{background: #e81f3e;color: #fff;}

#header_left .header_inner_wrap .header_inner .block_box5 a i{display: inline-block;margin-right: 12px;}

#header_left .header_inner_wrap .header_inner .block_box5 a .i1{background: url(../images/kc_bg2.png) no-repeat center center;width: 14px;height: 14px;}

#header_left .header_inner_wrap .header_inner .block_box5 a .i2{background: url(../images/kc_bg3.png) no-repeat center center;width: 20px;height: 19px;position: relative;top: 4px;}

#header_right .header_inner_wrap .dimmed_area{position: absolute;right: 480px;top: 0;bottom: 0;left: 0;}

#header_right{position:fixed;top:0;right:0;bottom:0;z-index: 0;width:100%;visibility: hidden;}

#header_right .header_inner_wrap{position: relative; max-width: 2000px;margin: 0 auto;height: 100%;overflow: hidden;}

#header_right .header_inner_wrap .header_inner{position: absolute;right:0;top: 0;bottom: 0;width: 480px;text-align: left;}

#header_right .header_inner_wrap .header_inner .block_box{border-bottom: 10px solid #f0f0f0;padding: 36px 0 30px;}

#header_right .header_inner_wrap .header_inner .block_box .icon{height: 27px;line-height: 0;text-align: center;}

#header_right .header_inner_wrap .header_inner .block_box h4{color: #333333;font-size: 16px;line-height: 24px;margin-top: 20px;text-align: center;}

#header_right .header_inner_wrap .header_inner .block_box ul{margin: 25px 20px 0;}

#header_right .header_inner_wrap .header_inner .block_box ul li{float: left;width: 33.3333%;padding: 0 1px;text-align: center;}

#header_right .header_inner_wrap .header_inner .block_box ul li .img{line-height: 0;}

#header_right .header_inner_wrap .header_inner .block_box ul li .text{margin-top: 12px;}

#header_right .header_inner_wrap .header_inner .block_box ul li .text .bt{color: #333333;font-size: 16px;}

#header_right .header_inner_wrap .header_inner .block_box ul li .text p{color: #666666;margin-top: 8px;font-size: 13px;line-height: 22px;}

#header_right .header_inner_wrap .header_inner .block_box2{padding: 20px;border-bottom: 10px solid #f0f0f0;}

#header_right .header_inner_wrap .header_inner .block_box2 .img{text-align: center;line-height: 0;}

#header_right .header_inner_wrap .header_inner .block_box3{border-bottom: 10px solid #f0f0f0;padding: 30px 20px 25px;}

#header_right .header_inner_wrap .header_inner .block_box3 h4{color: #333333;font-size: 16px;text-align: center;}

#header_right .header_inner_wrap .header_inner .block_box3 ul{margin-top: 20px;}

#header_right .header_inner_wrap .header_inner .block_box3 ul li{float: left;width: 130px;margin-left: 25px;text-align: center;}

#header_right .header_inner_wrap .header_inner .block_box3 ul li:first-child{margin-left: 0;}

#header_right .header_inner_wrap .header_inner .block_box3 ul li .img{line-height: 0;overflow: hidden;width: 130px;height: 130px;}

#header_right .header_inner_wrap .header_inner .block_box3 ul li p{color: #333333;font-size: 14px;margin-top: 15px;}

#header_right .header_inner_wrap .header_inner .block_box4 a{display: block;float: left;width: 50%;height: 70px;color: #333333;padding-top: 25px;font-size: 18px;text-align: center; background: #ffffff;}

#header_right .header_inner_wrap .header_inner .block_box4 a:last-child{background: #025aaa;color: #fff;}

#header_right .header_inner_wrap .header_inner .block_box4 a i{display: inline-block;margin-right: 12px;}

#header_right .header_inner_wrap .header_inner .block_box4 a .i1{background: url(../images/kc_bg2.png) no-repeat center center;width: 14px;height: 14px;}

#header_right .header_inner_wrap .header_inner .block_box4 a .i2{background: url(../images/kc_bg3.png) no-repeat center center;width: 20px;height: 19px;position: relative;top: 4px;}







body.active_left #header_left{z-index: 998;visibility: visible;}

body.active_right #header_right{z-index: 998;visibility: visible;}







#header_left .header_inner_wrap .header_inner{ -webkit-transform: translateX(-480px);-moz-transform: translateX(-480px);-ms-transform: translateX(-480px);-o-transform: translateX(-480px);transform: translateX(-480px);}

#header_right .header_inner_wrap .header_inner{-webkit-transform: translateX(480px);-moz-transform: translateX(480px);-ms-transform: translateX(480px);-o-transform: translateX(480px);transform: translateX(480px);}

body.stop.active_left #header_left .header_inner_wrap .header_inner{-webkit-transform: translateX(0px);-moz-transform: translateX(0px);-ms-transform: translateX(0px);-o-transform: translateX(0px); transform: translateX(0px);}

body.stop.active_right #header_right .header_inner_wrap .header_inner{-webkit-transform: translateX(0px);-moz-transform: translateX(0px);-ms-transform: translateX(0px);-o-transform: translateX(0px);transform: translateX(0px);}

body.stop.active_left #contents{-webkit-transform: translateX(480px);-moz-transform: translateX(480px);-ms-transform: translateX(480px);-o-transform: translateX(480px);transform: translateX(480px);}

body.stop.active_right #contents{-webkit-transform: translateX(-480px);-moz-transform: translateX(-480px);-ms-transform: translateX(-480px);-o-transform: translateX(-480px);transform: translateX(-480px);}

body.stop.active_left #misc_btns{-webkit-transform: translateX(480px);-moz-transform: translateX(480px);-ms-transform: translateX(480px);-o-transform: translateX(480px);transform: translateX(480px);}

body.stop.active_right #misc_btns{-webkit-transform: translateX(-480px);-moz-transform: translateX(-480px);-ms-transform: translateX(-480px);-o-transform: translateX(-480px);transform: translateX(-480px);}

body.stop.active_left #gnb {-webkit-transform: translateX(480px);-moz-transform: translateX(480px);-ms-transform: translateX(480px);-o-transform: translateX(480px);transform: translateX(480px);}

body.stop.active_right #gnb {-webkit-transform: translateX(-480px);-moz-transform: translateX(-480px);-ms-transform: translateX(-480px);-o-transform: translateX(-480px);transform: translateX(-480px);  }



#gnb.up .navi{top:-52px;}

#gnb.wide .navi{max-width: 2000px;width:100%;transition-duration: 0.3s;-webkit-transition-duration: 0.3s;-moz-transition-duration: 0.3s;}

#wrap.main #gnb.wide .navi.step2{max-width: 2000px;width:100%;}



#contents{background: #fff;}

.section{position: relative;width: 100%;  overflow: hidden;background: #fff;}



.mot2 {

    -webkit-transition: all 0.2s ease-out;

    -moz-transition: all 0.2s ease-out;

    -o-transition: all 0.2s ease-out;

    transition: all 0.2s ease-out;

}



.mot3 {

    -webkit-transition: all 0.3s ease-out;

    -moz-transition: all 0.3s ease-out;

    -o-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out;

}

.mot4 {

    -webkit-transition: all 0.4s ease-out;

    -moz-transition: all 0.4s ease-out;

    -o-transition: all 0.4s ease-out;

    transition: all 0.4s ease-out;

}

.mot5 {

    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease-out;

    -o-transition: all 0.5s ease-out;

    transition: all 0.5s ease-out;

}

.gnb_mot {



    -webkit-transition: all 0.5s ease-out;

    -moz-transition: all 0.5s ease-out;

    -o-transition: all 0.5s ease-out;

    transition: all 0.5s ease-out;



}

.fclear{

    *zoom:1

}

.fclear:after{

    display:block;

    content:"";

    clear:both;

}







.box {

    height: 70px;

    position: relative;

    color: #111;

    -webkit-transform-style: preserve-3d;

    transform-style: preserve-3d;



}

/*.btn_left,.btn_right,.center{ -webkit-perspective: 300px;perspective: 300px;}*/

.box div {

    position: absolute;

    text-align: center;

    left: 0;

    top: 0;

    width: 70px;

    height: 70px;

    line-height: 70px;

    font-size: 0;

    transform-origin: 50% 50% -35px;

    -webkit-transform-origin: 50% 50% -35px;

    -webkit-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    backface-visibility: hidden;

    -webkit-transition: transform 1s cubic-bezier(.217,.60,.355,1);

    -moz-transition: transform 1s cubic-bezier(.217,.60,.355,1);

    transition: transform 1s cubic-bezier(.217,.60,.355,1);

}

.box .side1 {transform: rotateX(90deg) rotateY(90deg) rotateZ(0deg);-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(0deg);}

.box .side2 {transform: rotateX(90deg) rotateY(270deg) rotateZ(0deg);-webkit-transform: rotateX(90deg) rotateY(270deg) rotateZ(0deg);}

.box .side3 {transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);}

.box .side4 {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);background: none !important;}

.box .side5 {transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);}

.box .side6 {transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);-webkit-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);}



.step1 .box .side1{transform: rotateX(-90deg) rotateY(90deg) rotateZ(0deg);-webkit-transform: rotateX(-90deg) rotateY(90deg) rotateZ(0deg);}

.step1 .box .side2{transform: rotateX(-90deg) rotateY(270deg) rotateZ(0deg);-webkit-transform: rotateX(-90deg) rotateY(270deg) rotateZ(0deg);}

.step1 .box .side3{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}

.step1 .box .side4{transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg);}

.step1 .box .side5{transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);-webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);}

.step1 .box .side6{transform: rotateX(-90deg) rotateY(180deg) rotateZ(0deg);-webkit-transform: rotateX(-90deg) rotateY(180deg) rotateZ(0deg);}

.btn_left .box div { background: #f1732f;}

.btn_right .box div { background: #e91f3e;}



.btn_left .box .side3 {background:#e81d21 url('../images/btn_business.png') no-repeat left center}

.btn_right .box .side3 {background:#015aaa url('../images/btn_people.png') no-repeat right center}

.btn_left .box .side5 {background:#e81d21;}

.btn_right .box .side5 {background: #015aaa;}

.center .box .side5 {background: #f7f7f7;}

.center .box{position: absolute;}

.center .box div { background: #fff;}



.step2 .center .box div{width: 1060px;-webkit-transition: all 1s;-moz-transition: all 1s;transition: all 1s;}

.step3 .box div{transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out}

.step3 .center .box div.side3{transform: none;-webkit-transform: none;}

#wrap.main #gnb .navi > a.left:hover > .box .side3{background-position:center center;}

#wrap.main #gnb .navi > a.right:hover > .box .side3{background-position:center center;}

body.stop #wrap.main #gnb .navi > a.left > .box .side3{background-position:right center;}

body.stop #wrap.main #gnb .navi > a.right > .box .side3{background-position:left center;}

body.stop #wrap #gnb .navi > a.left:before{content: '';position: absolute;left:0;top:0;bottom:0;width: 1px;background: #fff;  z-index: 1;}

body.stop #wrap #gnb .navi > a.right:before{content: '';position: absolute;right:0;top:0;bottom:0;width: 1px;background: #fff;  z-index: 1;}





.motion_top .banner_bg {

    -moz-transform: scale(1.12);

    -webkit-transform: scale(1.12);

    -o-transform: scale(1.12);

    -ms-transform: scale(1.12);

    transform: scale(1.12);

    opacity: 0;

}

.motion_top.in_motion .banner_bg {

    -moz-transform: scale(1);

    -webkit-transform: scale(1);

    -o-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    opacity: 1;

    -webkit-transition: transform 2s , opacity 1.5s;

    -moz-transition: transform 2s , opacity 1.5s;

    -ms-transition: transform 2s , opacity 1.5s;

    -o-transition: transform 2s , opacity 1.5s;

    transition: transform 2s , opacity 1.5s;

}



#gnb .navi ul.depth1 > li{

	position: relative;

}



#gnb .navi ul.depth1 > li > a i{

	display: inline-block;

	width: 9px;

	height: 6px;

	position: relative;

	margin-left: 5px;

	background: url(../images/lei4.png) no-repeat center center/cover;

}

#gnb .navi ul.depth1 > li .navbox{

	display: none;

	position:absolute;

	left:-21px;

	top: 100%;

	width:155px;

	background-color:#fff;

	z-index:1;

	box-sizing: border-box;

	-webkit-box-sizing: border-box;

    -webkit-transition: all 0.3s ease-out;

    -moz-transition: all 0.3s ease-out;

    -ms-transition: all 0.3s ease-out;

    transition: all 0.3s ease-out;

    font-weight: none;

}

#gnb .navi ul.depth1 > li:hover .navbox{

	display: block;

}

#gnb .navi ul.depth1 > li .navbox:before{

	content: "";

	position: absolute;

	left: 50%;

	top: -9px;

	margin-left: -8px;

	width: 17px;

	height: 9px;

	background: url(../images/lei3.png) no-repeat center center;

}

#gnb .navi ul.depth1 > li .navbox a{

	display: block;

	color: #333333;

	font-size: 14px;

	text-align: left;

	line-height: 40px;

	padding: 0 20px;

	position: relative;

	font-weight: normal;

}

#gnb .navi ul.depth1 > li .navbox a:before{

	content: "";

	position: absolute;

	right: 15px;

	top: 15px;

	width: 6px;

	height: 9px;

	background: url(../images/lei1.png) no-repeat center center;

}

#gnb .navi ul.depth1 > li .navbox a:hover{

	background: #015aaa;

	color: #fff;

}

#gnb .navi ul.depth1 > li .navbox a:hover::before {

	background: url(../images/lei2.png) no-repeat center center;

}





#header_left .header_inner_wrap .header_inner .block_box a.more, #header_right .header_inner_wrap .header_inner .block_box a.more{

    display: block;

    width: 159px;

    height: 40px;

    background: url(../images/btn_bg2.png) no-repeat center center;

    line-height: 40px;

    color: #fff;

    font-size: 14px;

    font-weight: bold;

    margin: 18px auto 0;

    text-align: center;

	border: none;

}



.motion_top {

    -moz-transform: scale(1.12);

    -webkit-transform: scale(1.12);

    -o-transform: scale(1.12);

    -ms-transform: scale(1.12);

    transform: scale(1.12);

    opacity: 0.8;

}

.motion_top.in_motion { height:100%; width:100%;

    -moz-transform: scale(1);

    -webkit-transform: scale(1);

    -o-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    opacity: 1;

    -webkit-transition: transform 2s , opacity 1.5s;

    -moz-transition: transform 2s , opacity 1.5s;

    -ms-transition: transform 2s , opacity 1.5s;

    -o-transition: transform 2s , opacity 1.5s;

    transition: transform 2s , opacity 1.5s;

}





/**2019-3-21**/

#misc_btns{

	max-width: 92%;

}

#gnb .navi{

	min-width:100%;

	max-width: 100%;

	border-left: 0px solid #e91d3a;

	border-right: 0px solid #015bad;

}

#gnb .navi .center{

	max-width: 92%;

}

#gnb .navi .logo{

	float: left;

	width: auto;

}

#gnb .navi .logo > a:before,

#gnb .navi .logo > a:after{

	display: none;

}

#gnb .navi ul.depth1{
	float: left;
	margin-left: 105px;

}

