.wrap{position: relative; width: 100%; max-width: 1920px; min-width: 990px; height: 1150px; margin: 0 auto; background: url("../image/bg-wrap1.jpg") no-repeat top center; overflow: hidden;}
.logo{position: absolute; top: 15px; left: 20px; z-index: 1100; display: block; width: 233px; height: 94px; background: url("../image/logo1.png") no-repeat;}
.main{position: relative; width: 990px; height: 100%; margin: 0 auto;}
.slogan-s, .slogan{position: absolute; display: none;}
.slogan{top: 95px; left: 2px; width: 331px; height: 751px; background: url("https://static.web.sdo.com/cq/pic/act/2018/web/1210lwcc/slogan.png") no-repeat; animation: scale1 .4s .2s both; -webkit-animation: scale1 .4s .2s both; -moz-animation: scale1 .4s .2s both; -o-animation: scale1 .4s .2s both;}
@-webkit-keyframes scale1{0%{opacity: 0; -webkit-transform: scale(10,10);} 80%{-webkit-transform: scale(.8,.8);} 100%{opacity: 1; -webkit-transform: scale(1,1);}}
@-moz-keyframes scale1{0%{opacity: 0; -moz-transform: scale(10,10);} 80%{-moz-transform: scale(.8,.8);} 100%{opacity: 1; -moz-transform: scale(1,1);}}
@-o-keyframes scale1{0%{opacity: 0; -o-transform: scale(10,10);} 80%{-o-transform: scale(.8,.8);} 100%{opacity: 1; -o-transform: scale(1,1);}}
@keyframes scale1{0%{opacity: 0; transform: scale(10,10);} 80%{transform: scale(.8,.8);} 100%{opacity: 1; transform: scale(1,1);}}
.slogan-s{top: 400px; left: 240px; width: 49px; height: 344px; background: url("https://static.web.sdo.com/cq/pic/act/2018/web/1210lwcc/slogan-s.png") no-repeat; -webkit-animation: fadeInDown 1s .7s ease both; -moz-animation: fadeInDown 1s .7s ease both; -o-animation: fadeInDown 1s .7s ease both; animation: fadeInDown 1s .7s ease both;}
@-webkit-keyframes fadeInDown{0%{opacity: 0; -webkit-transform: translateY(-20px);} 100%{opacity: 1; -webkit-transform: translateY(0);}}
@-moz-keyframes fadeInDown{0%{opacity: 0; -moz-transform: translateY(-20px);} 100%{opacity: 1; -moz-transform: translateY(0);}}
@-o-keyframes fadeInDown{0%{opacity: 0; -o-transform: translateY(-20px);} 100%{opacity: 1; -o-transform: translateY(0);}}
@keyframes fadeInDown{0%{opacity: 0; transform: translateY(-20px);} 100%{opacity: 1; transform: translateY(0);}}
.nav-top{position: fixed; z-index: 1100; top: 0; right: 60px; width: 126px; height: 213px;} .nav-top ul{overflow: hidden; width: 100%; height: 213px; background: url("../image/bg-nav1.png") no-repeat top center;} .nav-top ul .li-home{margin-top: 28px;} .nav-top ul a{display: block; position: relative; margin: 0 auto 20px auto; width: 86px; height: 28px; border: 1px solid #a39475; color: #d9c896; font-size: 13px; text-align: center; line-height: 28px;} .nav-top ul a:hover{color: #553c24; background-color: #a39475;} .nav-top ul a:before, .nav-top ul a:after{display: block; position: absolute; top: 14px; content: ''; width: 10px; height: 1px; background-color: #8e826b;} .nav-top ul a:before{left: -12px;} .nav-top ul a:after{right: -12px;}
.btn-toggle{position: absolute; bottom: 0; left: 50%; width: 38px; height: 38px; margin-left: -18px; background: url("../image/btn-toggle.png") no-repeat;} .btn-toggle i{display: block; position: absolute; left: 50%; top: 11px; width: 14px; height: 12px; margin-left: -7px; background: url("../image/ico-arrow1.png") no-repeat; transform-origin: 50%; -ms-transform-origin: 50%; -o-transform-origin: 50%; -moz-transform-origin: 50%; -webkit-transform-origin: 50%;}
.open .btn-toggle:hover i{animation: floatAni .5s infinite alternate; -o-animation: floatAni .5s infinite alternate; -moz-animation: floatAni .5s infinite alternate; -webkit-animation: floatAni .5s infinite alternate;}
@keyframes floatAni{to{transform: translateY(-3px);}}
@-o-keyframes floatAni{to{-o-transform: translateY(-3px);}}
@-moz-keyframes floatAni{to{-moz-transform: translateY(-3px);}}
@-webkit-keyframes floatAni{to{-webkit-transform: translateY(-3px);}}
.btn-toggle i, .btn-toggle, .nav-top, .nav-top ul{transition: all .10s; -o-transition: all .10s; -moz-transition: all .10s; -webkit-transition: all .10s; -ms-transition: all .10s;} .nav-top.close{height: 0;} .nav-top.open ul{height: 100%;} .nav-top.close ul{height: 0;} .nav-top.open .btn-toggle{bottom: 0;} .nav-top.close .btn-toggle{bottom: -28px;} .nav-top.open .btn-toggle i{top: 11px;} .nav-top.close .btn-toggle i{top: 16px; transform: rotate(180deg);}
.nav-right{position: absolute; top: 341px; left: 50%; width: 207px; margin-left: -597px;}
.nav-main{position: absolute; top: 10px; right: -8px; -webkit-animation: fadeInRight 1s 1.3s ease both; -moz-animation: fadeInRight 1s 1.3s ease both; -o-animation: fadeInRight 1s 1.3s ease both; animation: fadeInRight 1s 1.3s ease both;}
@-webkit-keyframes fadeInRight{0%{opacity: 0; -webkit-transform: translateX(20px);} 100%{opacity: 1; -webkit-transform: translateX(0);}}
@-moz-keyframes fadeInRight{0%{opacity: 0; -moz-transform: translateX(20px);} 100%{opacity: 1; -moz-transform: translateX(0);}}
@-o-keyframes fadeInRight{0%{opacity: 0; -o-transform: translateX(20px);} 100%{opacity: 1; -o-transform: translateX(0);}}
@keyframes fadeInRight{0%{opacity: 0; transform: translateX(20px);} 100%{opacity: 1; transform: translateX(0);}}
.nav-main a, .nav-right a{display: block; position: relative; width: 207px; height: 68px; margin-bottom: 18px; line-height: 68px; text-indent: 7.5em;} .nav-main a:after, .nav-right a:after{display: block; position: absolute; left: 29px; bottom: -14px; content: ''; width: 10px; height: 10px; background: url("../image/ico-point.png") no-repeat;} .nav-right a:after{background: url("../image/ico-point2.png") no-repeat;}
.nav-6:after{display: none !important;}
.nav-main a .ico, .nav-right a .ico{display: block; position: absolute; top: 0; left: 0; width: 68px; height: 68px;}
.nav-main a em{font-size: 21px; color: #493a25;}
.nav-right a em{position: relative; z-index: 5; color: #bea36c; font-size: 18px;}
.nav-main a:hover em{color: #8a5009; font-weight: bold;}
.nav-right a:hover em, .nav-right a.on em{color: #f3ebcb; font-weight: bold;}
.nav-right a .bg-nav{position: absolute; right: 0; bottom: 16px; width: 207px; height: 70px; background: url("../image/img-light.png") no-repeat; opacity: 0; filter: alpha(opacity=0); transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s;}
.nav-right a:hover .bg-nav, .nav-right a.on .bg-nav{opacity: 1; filter: alpha(opacity=100);}
.nav-main .nav-1 .ico{background: url("https://static.web.sdo.com/cq/pic/act/2018/web/1210lwcc/btn-1.png") no-repeat;}
.nav-main .nav-2 .ico{background: url("../image/btn-2.png") no-repeat;}
.nav-main .nav-3 .ico{background: url("https://static.web.sdo.com/cq/pic/act/2018/web/1210lwcc/btn-3.png") no-repeat;}
.nav-main .nav-4 .ico{background: url("../image/btn-4.png") no-repeat;}
.nav-main .nav-5 .ico{background: url("https://static.web.sdo.com/cq/pic/act/2018/web/1210lwcc/btn-5.png") no-repeat;}
.nav-main .nav-6 .ico{background: url("../image/btn-6.png") no-repeat;}
.nav-main .nav-1:hover .ico{background: url("https://static.web.sdo.com/cq/pic/act/2018/web/1210lwcc/btn-1-on.png") no-repeat;}
.nav-main .nav-2:hover .ico{background: url("../image/btn-2-on.png") no-repeat;}
.nav-main .nav-3:hover .ico{background: url("https://static.web.sdo.com/cq/pic/act/2018/web/1210lwcc/btn-3-on.png") no-repeat;}
.nav-main .nav-4:hover .ico{background: url("../image/btn-4-on.png") no-repeat;}
.nav-main .nav-5:hover .ico{background: url("../image/btn-5-on.png") no-repeat;}
.nav-main .nav-6:hover .ico{background: url("../image/btn-6-on.png") no-repeat;}
.nav-right .nav-1 .ico{background: url("../image/nav-11.png") no-repeat;}
.nav-right .nav-2 .ico{background: url("../image/nav-21.png") no-repeat;}
.nav-right .nav-3 .ico{background: url("../image/nav-31.png") no-repeat;}
.nav-right .nav-4 .ico{background: url("../image/nav-4.png") no-repeat;}
.nav-right .nav-5 .ico{background: url("../image/nav-5.png") no-repeat;}
.nav-right .nav-6 .ico{background: url("../image/nav-6.png") no-repeat;}
.nav-right .nav-1:hover .ico, .nav-right .nav-1.on .ico{background: url("../image/nav-1-on1.png") no-repeat;}
.nav-right .nav-2:hover .ico, .nav-right .nav-2.on .ico{background: url("../image/nav-2-on1.png") no-repeat;}
.nav-right .nav-3:hover .ico, .nav-right .nav-3.on .ico{background: url("../image/nav-3-on1.png") no-repeat;}
.nav-right .nav-4:hover .ico, .nav-right .nav-4.on .ico{background: url("../image/nav-4-on.png") no-repeat;}
.nav-right .nav-5:hover .ico, .nav-right .nav-5.on .ico{background: url("../image/nav-5-on.png") no-repeat;}
.nav-right .nav-6:hover .ico, .nav-right .nav-6.on .ico{background: url("../image/nav-6-on.png") no-repeat;}
.nav-main a i, .nav-right a i{display: block; position: absolute; bottom: 16px; right: 0; width: 146px; height: 6px; background: url("../image/img-line.png") no-repeat;}
.nav-right a i{background: url("../image/img-line2.png") no-repeat;}
.popup{display: none; position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; min-width: 990px; height: 1150px; background: url("../image/bg-popup.jpg") no-repeat top center;} .popup .btn-close, .popup-table .btn-close{display: block; position: absolute; left: 50%; top: 180px; width: 86px; height: 86px; margin-left: -480px; background: url("../image/btn-close.png") no-repeat; -webkit-transition: all .5s; transition: all .5s;} .popup .btn-close{-webkit-transform: translate(0,-300px) rotate(180deg); transform: translate(0,-300px) rotate(180deg);} .popup .btn-close.show{-webkit-transform: translate(0,0) rotate(0deg); transform: translate(0,0) rotate(0deg);}
.btn-close:hover{transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.popup .wrap-scroll{display: none; position: absolute; top: 325px; left: 50%; width: 830px; height: 545px; margin-left: -357px; color: #d7d0be; font-size: 16px; line-height: 1.75em; text-align: center;} .popup .wrap-scroll .highlight{color: #ff8f00;} .popup .wrap-scroll .highlight-green{color: #00ff90;} .popup .wrap-scroll .highlight-blue{color: #0000ff;} .popup .wrap-scroll .highlight-purple{color: #c77aeb;} .popup .wrap-scroll .highlight-orange{color: #ffa500;} .popup .wrap-scroll .highlight-green i, .popup .wrap-scroll .highlight-blue i, .popup .wrap-scroll .highlight-purple i, .popup .wrap-scroll .highlight-orange i{display: inline-block; width: 14px; height: 14px; margin-right: 10px; border-radius: 2px; vertical-align: -5%;} .popup .wrap-scroll .highlight-green i{background-color: #00ff90;} .popup .wrap-scroll .highlight-blue i{background-color: #0000ff;} .popup .wrap-scroll .highlight-purple i{background-color: #c77aeb;} .popup .wrap-scroll .highlight-orange i{background-color: #ffa500;} .popup .wrap-scroll p, .popup .wrap-scroll h6{text-align: left;} .popup .wrap-scroll h6{position: relative; height: 55px; padding-left: 25px; margin: 25px 0 15px 0; line-height: 55px; font-size: 18px; font-weight: bold; color: #c3a972;} .popup .wrap-scroll h6 .ico-point{display: block; position: absolute; left: 0; top: 20px; width: 16px; height: 16px; background: url("../image/ico-point3.png") no-repeat;} .popup .wrap-scroll h6 .line-b{position: absolute; left: 0; bottom: 0; width: 370px; height: 1px; background: -webkit-linear-gradient(left, rgba(128,110,74,1), rgba(128,110,74,0));} .popup .wrap-scroll p img{vertical-align: middle; margin: 0 3px;} .popup .wrap-scroll .img-d{max-width: 80%; margin: 20px auto;} .popup .wrap-scroll .btn-detail{margin: 0 auto; color: red; text-decoration: underline;}
.wrap-scroll table{text-align: center; line-height: 1.5em;}
.wrap-scroll table{border-collapse: collapse; margin: 10px auto;} .wrap-scroll table p{text-align: center !important; margin-bottom: 0;} .wrap-scroll table td{border: 1px solid #d7d0be;} .wrap-scroll table th{border: 1px solid #d7d0be;}
.mCSB_scrollTools .mCSB_draggerRail{background-color: #3e3527; width: 4px; border-radius: 4px;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background-color: #d6ccad; width: 6px;}
.popup-table{position: relative; top: 0; left: 0; z-index: 10000; width: 100%; }
.nav-career{ margin: 0 auto; text-align:center;} .nav-career a{display: inline-block; width: 68px; height: 181px; background-size: 68px auto !important; margin:0 20px;} .nav-career .nav-c-1{background: url("../image/n1.png") no-repeat;} .nav-career .nav-c-2{background: url("../image/n2.png") no-repeat;} .nav-career .nav-c-3{background: url("../image/n3.png") no-repeat;} .nav-career .nav-c-4{background: url("../image/n4.png") no-repeat;} .nav-career .nav-c-5{background: url("../image/n5.png") no-repeat;} .nav-career .nav-c-6{background: url("../image/n6.png") no-repeat;} .nav-career .nav-c-1:hover, .nav-career .nav-c-1.on{background: url("../image/n1-hover.png") no-repeat;} .nav-career .nav-c-2:hover, .nav-career .nav-c-2.on{background: url("../image/n2-hover.png") no-repeat;} .nav-career .nav-c-3:hover, .nav-career .nav-c-3.on{background: url("../image/n3-hover.png") no-repeat;} .nav-career .nav-c-4:hover, .nav-career .nav-c-4.on{background: url("../image/n4-hover.png") no-repeat;} .nav-career .nav-c-5:hover, .nav-career .nav-c-5.on{background: url("../image/n5-hover.png") no-repeat;} .nav-career .nav-c-6:hover, .nav-career .nav-c-6.on{background: url("../image/n6-hover.png") no-repeat;}
.popup-table .btn-close{position: relative; top: auto; left: auto; margin: 0 auto;}
.table-scroll{display: none; position: relative; width: 100%; margin: 15px auto; color: #bfa36c; font-size: 13px;} .table-scroll table{text-align: center; table-layout: fixed; margin: 0 auto;} .table-scroll table{border-collapse: collapse;} .table-scroll table p{text-align: center !important; margin-bottom: 0;} .table-scroll table td{border: 1px solid #bfa36c;} .table-scroll table th{border: 1px solid #bfa36c;} .table-scroll table tr td{height: 35px; padding: 5px 5px;} .table-scroll table tr td:nth-child(1), .table-scroll table tr td:nth-child(2), .table-scroll table tr td:nth-child(3){font-size: 14px;} .table-scroll table tr:first-child, .table-scroll table tr:nth-child(2){height: 45px; font-size: 18px;} .table-scroll table tr:nth-child(2){font-size: 16px; font-weight: normal; background-color: #645338;}
.sp-c1{background-color: #bfa36c;}
.sp-c2{background-color: #a5977f;}
.sp-c1, .sp-c2{color: #4d3e2a;}
.table-scroll-1{display: block;}