@charset "utf-8";
@import url("font.css");
/* 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, input, textarea, button,
article, aside, canvas, details, embed, figure, figcaption, footer, header, menu,
nav, output, ruby, section, summary, time, mark, audio, video
{ margin:0;padding:0;border:0;}
article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block;}
html {height:auto;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none; }
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;}
body{ font-family:"microsoft yahei","STXihei","arial";width: 100%;height: 100%;min-width:1200px;min-height: 600px; color:#333333;background-color: #f0f0f0;}
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; }
.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{ /* min-width: 1200px;max-width: 2000px;*/margin: 0 auto;}
#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: 28px 0 12px;z-index: 999;opacity: 1;}
#misc_btns a{position: relative;display: inline-block;font-size: 11px;color: rgba(255, 255, 255, 0.6);line-height: 12px;padding: 0 11px;}
#misc_btns a:before{content: '';position: absolute;top:-1px;bottom:0;left:0;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;line-height: 12px; padding: 0;}
#misc_btns .right_area{float: right;font-size: 0;letter-spacing: 0;word-spacing: 0;}
#misc_btns .right_area a:last-child{padding-right: 0;}
#misc_btns .right_area a.tel{background: url(../images/tel_icon.png) no-repeat left top; padding-left: 18px;}
#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;max-width: 1120px;margin: 0 auto;display: inline-block;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: #f1732f url(../images/btn_business.png) no-repeat left center;}
#gnb .navi .btn_right{display: block; background: #f1732f 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: 0 20px;}
#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: 17px; font-weight: 550; font-weight:bold;}
#gnb .navi ul.depth1 > li > a em{display: block; color: #666666;font-size: 12px;margin-top: 1px; font-weight: normal;}
#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{color: #e91f3e;}
#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: 20px 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;}

/*滚动条 */
#gnb.scroll{position: fixed;max-width: none;}
#gnb.scroll .navi{max-width: 2000px;width:100%;top:0 !important;}
#gnb.scroll .navi:after{content: '';position: absolute;bottom:0;left:0;right:0;height: 1px;background: #eaeaea;}
#gnb.scroll .navi ul.depth1 > li .depth2{border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;}

#wrap.media_360 #gnb{position: fixed;max-width: none;}
#wrap.media_360 #gnb .navi{max-width: 2000px;width:100%;}
#wrap.media_360 #gnb .navi:after{content: '';position: absolute;bottom:0;left:0;right:0;height: 1px;background: #eaeaea;}
#wrap.media_360 #gnb .navi ul.depth1 > li .depth2{border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;}
#contents{position:relative;left:0;}

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 h3{
	background: url(../images/nav_bg02.jpg) no-repeat center center;
}
#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 #ffffff;border-bottom: 10px solid #f0f0f0;padding: 5px 0;}
#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/nav_bg03.png) no-repeat center center;
	line-height: 40px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	margin: 18px auto 0;
	text-align: center;
}
#header_right .header_inner_wrap .header_inner .block_box a.more{
	background: url(../images/btn_bg2.png) no-repeat center center/cover;
}
#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: url(../images/nav_bg04.jpg) no-repeat center center/cover;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 #ffffff;
	padding: 25px 0;
}
#header_right .header_inner_wrap .header_inner .block_box .icon{
	height: 36px;
	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 .name{
	color: #666666;
	font-size: 16px;
	text-align: center;
	margin-top: 15px;	
}
#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 20px;
	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 20px 0;
	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_box2 ul li{
	width: 141px;
	float: left;
	text-align: center;
	padding: 20px 10px;
	border-right: 1px dotted #d9d9d9;
}
#header_right .header_inner_wrap .header_inner .block_box2 ul li:last-child{
	border-right: none;
}
#header_right .header_inner_wrap .header_inner .block_box2 ul li .bt{
	color: #333333;
	font-size: 15px;
	font-weight: bold;
}
#header_right .header_inner_wrap .header_inner .block_box2 ul li p{
	color: #666;
	margin-top: 10px;
	font-size: 13px;
}
#header_right .header_inner_wrap .header_inner .block_box3{
	height: 244px;
	padding-left: 20px;
	background: url(../images/pq_img2.jpg) no-repeat center center;
	padding-top: 20px;
	
}
#header_right .header_inner_wrap .header_inner .block_box3 a{
	display: block;
	line-height: 24px;
	margin-top: 30px;
}
#header_right .header_inner_wrap .header_inner .block_box3 a.zx{
	width: 193px;
	height: 47px;
	background: #0455a4;
	line-height: 47px;
	text-align: center;
	color: #ffffff;
	font-size: 14px;
	border-radius: 3px;
}
#header_right .header_inner_wrap .header_inner .block_box3 a.zx i{
	display: inline-block;
	width: 20px;
	height: 19px;
	background: url(../images/pq_icon1.png) no-repeat center center;
	margin-right: 10px;
	position: relative;
	top: 5px;
}
#header_right .header_inner_wrap .header_inner .block_box3 a.qp{
	color: #333333;
	font-size: 16px;
	background: url(../images/pq_icon2.png) no-repeat left center;
	padding-left: 25px;
}
#header_right .header_inner_wrap .header_inner .block_box3 .dh{
	margin-top: 30px;
	color: #0455a4;
	font-size: 18px;
	font-weight: bold;
	background: url(../images/pq_icon3.png) no-repeat left center;
	padding-left: 25px;
	line-height: 24px;
}

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:#f1732f url('../images/btn_business.png') no-repeat left center}
.btn_right .box .side3 {background:#e91f3e url('../images/btn_people.png') no-repeat right center}
.btn_left .box .side5 {background:#e85a0e;}
.btn_right .box .side5 {background: #d50021;}
.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 .expand_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 .expand_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{
	 /*   border-left: 13px solid #e91f3e;
    border-right: 13px solid #1d54a7;*/
}

.nyfont-54{font-size: 54px;}
.nyfont-50{font-size: 50px;}
.nyfont-36{font-size: 36px;}
.nyfont-34{font-size: 34px;}
.nyfont-32{font-size: 32px;}
.nyfont-30{font-size: 30px;}
.nyfont-28{font-size: 28px;}
.nyfont-26{font-size: 26px;}
.nyfont-24{font-size: 24px;}
.nyfont-20{font-size: 20px;}
.nyfont-22{font-size: 22px;}
.nyfont-18{font-size: 18px;}
.nyfont-16{font-size: 16px;}

@media(max-width: 1700px){
  .nyfont-54{font-size: 44px;}
  .font-50 {
    font-size: 40px;
  }
  .nyfont-50{font-size: 40px;}
  .nyfont-36{font-size: 32px;}
  .nyfont-34{font-size: 28px;}
  .nyfont-32{font-size: 28px;}
  .nyfont-30{font-size: 26px;}
  .nyfont-28{font-size: 24px;}
  .nyfont-26{font-size: 22px;}
  .nyfont-24{font-size: 22px;}
  .nyfont-22{font-size: 20px;}
  .nyfont-20{font-size: 18px;}
  .nyfont-18{font-size: 16px;}
  .nyfont-16{font-size: 16px;}
}

@media(max-width: 1500px){
    .nyfont-54{font-size: 34px;}
   .font-50 {
    font-size: 30px;
  }
  .nyfont-50{font-size: 30px;}
  .nyfont-36{font-size: 26px;}
  .nyfont-34{font-size: 24px;}
  .nyfont-32{font-size: 24px;}
  .nyfont-30{font-size: 22px;}
  .nyfont-28{font-size: 20px;}
  .nyfont-26{font-size: 18px;}
  .nyfont-24{font-size: 18px;}
  .nyfont-22{font-size: 16px;}
  .nyfont-20{font-size: 16px;}
  .nyfont-16{font-size: 14px;}
}

@media(max-width: 1100px){
    .nyfont-54{font-size: 30px;}
     .font-50 {
      font-size: 26px;
    }
    .nyfont-50{font-size: 26px;}
    .nyfont-36{font-size: 22px;}
    .nyfont-34{font-size: 20px;}
    .nyfont-32{font-size: 20px;}
    .nyfont-30{font-size: 18px;}
    .nyfont-28{font-size: 16px;}
    .nyfont-24{font-size: 16px;}
}