/******************** layout ********************/
html{overflow-y:scroll; width:100%;}
#allwrap {width:100%; min-width:320px;}
#allwrap:after {content:""; display:block; clear:both;}
#wrap {position:relative; width:100%;}
#wrap:after {content:""; display:block; clear:both;}










/********** rolling ***********/
/* base */
#mainRoll, #thum, #bannerSlide {position:relative; left:0; top:0; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; z-index:1; clear:both;}

.swiper-wrapper{position:relative; width:100%; -webkit-transition-property:-webkit-transform, left, top; -webkit-transition-duration:0s; -webkit-transform:translate3d(0px,0,0); -webkit-transition-timing-function:ease;
-moz-transition-property:-moz-transform, left, top; -moz-transition-duration:0s; -moz-transform:translate3d(0px,0,0); -moz-transition-timing-function:ease;
-o-transition-property:-o-transform, left, top; -o-transition-duration:0s; -o-transform:translate3d(0px,0,0); -o-transition-timing-function:ease; -o-transform:translate(0px,0px);
-ms-transition-property:-ms-transform, left, top; -ms-transition-duration:0s; -ms-transform:translate3d(0px,0,0); -ms-transition-timing-function:ease;
transition-property:transform, left, top; transition-duration:0s; transform:translate3d(0px,0,0); transition-timing-function:ease;}
.swiper-free-mode > .swiper-wrapper{-webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto;}
.swiper-slide{float: left;}

/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal{-ms-touch-action: pan-y;}
.swiper-wp8-vertical{-ms-touch-action: pan-x;}



/* re code declaration */
#mainRoll{width:100%; height:750px; overflow:hidden; z-index:54; background:#000;}
#mainRoll .swiper-slide{position:relative; width:1900px; height:750px; overflow:hidden;}
#mainRoll .swiper-slide .backimg{position:absolute; left:50%; top:0; margin:0 0 0 -950px; z-index:1;}
#mainRoll .swiper-slide .txtConf {position:relative; width:1060px; margin:0 auto; overflow:hidden; z-index:2; word-break:keep-all;}
#mainRoll .swiper-slide .txtConf .point {font-size:54px; color:#cc0000; font-weight:600; padding:237px 0 0 0;}
#mainRoll .swiper-slide .txtConf .point:after {content:""; display:block; clear:both;}
#mainRoll .swiper-slide .txtConf .point span {font-size:54px;}
#mainRoll .swiper-slide .txtConf .point u {display:block; font-size:54px; text-decoration:none;}
#mainRoll .swiper-slide .txtConf .txt {font-size:16px; color:#fff; font-weight:600; line-height:1.4; padding:30px 0 0 0; clear:both;}
#mainRoll .swiper-slide .txtConf .txt span {display:block; font-size:16px; color:#fff; font-weight:600; line-height:1.4;}
#mainRoll .swiper-slide .txtConf .more {display:block; height:20px; line-height:20px; font-size:14px; color:#cc0000; font-weight:600; padding:0 0 0 24px; margin:22px 0 0 0; background:url('../images/ico/ico_main_more.png') left 2px no-repeat;}

#thumWrap {position:relative; width:1060px; height:0; margin:0 auto; z-index:55;}
#thumWrap:after {content:""; display:block; clear:both;}
#thum {position:absolute; left:0; top:-247px; width:444px; height:130px;}
#thum .swiper-slide {float:left; width:128px !important; height:128px; margin:0 18px 0 0; border:1px #fff solid; cursor:pointer; background:url('../images/ico/ico_thum_plus_off.png') 14px 14px no-repeat;}
#thum .swiper-slide p {font-size:14px; color:#fff; font-weight:600; line-height:1.3; padding:63px 0 0 14px;}
#thum .active-nav {background:url('../images/ico/ico_thum_plus_on.png') 14px 14px #fff no-repeat;}
#thum .active-nav p {color:#cc0000;}

#bannerSlide{width:100%; height:370px; overflow:hidden; z-index:54; background:url('../images/bg/bg_bannerslide.gif') left top repeat;}
#bannerSlide .swiper-slide {position:relative; width:100%; height:370px; overflow:hidden;}
#bannerSlide .swiper-slide .conf {position:relative; width:1060px; margin:0 auto;}
#bannerSlide .swiper-slide .conf:after {content:""; display:block; clear:both;}
#bannerSlide .swiper-slide .conf .imgArea {float:left; width:53%;}
#bannerSlide .swiper-slide .conf .imgArea:after {content:""; display:block; clear:both;}
#bannerSlide .swiper-slide .conf .txtArea {float:left; width:47%;}
#bannerSlide .swiper-slide .conf .txtArea:after {content:""; display:block; clear:both;}
#bannerSlide .swiper-slide .conf .txtArea ul {width:100%; overflow:hidden;}
#bannerSlide .swiper-slide .conf .txtArea ul li {float:left; width:48%; padding:7px 0 0 7px; color:#706966; font-size:13px; color:#706966l; font-weight:600; background:url('../images/bg/bg_bannerslide_dot.gif') left 12px no-repeat;}
#bannerSlide .swiper-slide .conf .txtArea ul li.w65 {width:63%;}
#bannerSlide .swiper-slide .conf .txtArea ul li.w60 {width:58%;}
#bannerSlide .swiper-slide .conf .txtArea ul li.w40 {width:38%;}
#bannerSlide .swiper-slide .conf .txtArea ul li.w35 {width:33%;}
#bannerSlide .swiper-slide .conf .txtArea .tit {font-size:22px; color:#4b3527; font-weight:600; line-height:1.1; padding:37px 0 30px 0; word-break:keep-all;}
#bannerSlide .swiper-slide .conf .txtArea .txt {font-size:26px; color:#644734; font-weight:600; padding:0 0 10px 0; word-break:keep-all;}
#bannerSlide .swiper-slide .conf .txtArea .txt span {display:block; font-size:48px; color:#644734; font-weight:600; padding:10px 0 0 0;}
#bannerSlide .swiper-slide .conf .txtArea .txt span u {display:block; font-size:48px; text-decoration:none;}
#bannerSlide .swiper-slide .conf .txtArea .btn {position:absolute; left:53%; bottom:30px;} 
#bannerSlide .swiper-slide .conf .txtArea .btn a {font-size:18px; color:#644734; font-weight:600; padding:0 16px 0 2px; background:url('../images/bg/bg_bannerslide_arrow.png') right 2px no-repeat;}

.btnControl {position:relative; width:1060px; height:0; margin:0 auto;}
.btnControl:after {content:""; display:block; clear:both;}
.arrowBannerLeft {position:absolute; right:68px; top:36px; cursor:pointer; z-index:999;}
.arrowBannerRight {position:absolute; right:0; top:36px; cursor:pointer; z-index:999;}
.count {position:absolute; right:33px; top:41px;}
.count span {font-size:13px; color:#644734; font-weight:600;}








/**************** media query ****************/
/*** media query 1160px ***/
@media all and (max-width:1160px){


/* layout */
#header {width:auto; margin:0 20px;}
#navibg {width:100%;}
#fmenu {width:auto; margin:44px 40px 0;}
#fmenu ul li {margin:0 0 0 5.8%; padding:0 5.8% 0 0;}
#footer{width:auto; margin:0 40px;}


}





/**************** media query ****************/
/*** media query 1140px ***/
@media all and (max-width:1140px){

/* content */
#mainRoll .swiper-slide .txtConf {width:auto; margin:0 40px;}
#thumWrap {width:auto; margin:0 0 0 40px;}

#quickbanner {width:auto; margin:0 40px;}
#quickbanner ul li a h2 {padding:45px 0 12px;}
#quickbanner ul li a .info {font-size:15px; margin:0 40px 0 0;}
#quickbanner ul li a .info span {display:inline;}

#bannerSlide .swiper-slide .conf {width:auto;}
#bannerSlide .swiper-slide .conf .imgArea {width:50%;}
#bannerSlide .swiper-slide .conf .imgArea img {margin:0 0 0 0;}
#bannerSlide .swiper-slide .conf .txtArea {width:50%;}
#bannerSlide .swiper-slide .conf .txtArea .txt img {width:450px;}
#bannerSlide .swiper-slide .conf .txtArea .btn {left:50%;}

#mainInfo {width:auto; margin:50px 10px 40px;}

.btnControl {width:auto; margin:0 30px 0 0;}

}


/*** media query 1100px ***/
@media all and (max-width:1100px){
#header #navi ul li a {padding:23px 30px 21px;}
#header #navi ul li a#topNavi5 {padding:23px 40px 21px 30px;}
#header #navi ul li ul#topSubm1 {left:4.2%;}
#header #navi ul li ul#topSubm5 {right:3.8%;}
}



/*** media query 1050px ***/
@media all and (max-width:1050px){
#fmenu ul li {margin:0 0 0 5%; padding:0 5% 0 0;}
}



/*** media query 990px ***/
@media all and (max-width:990px){

#mainInfo ul li .info .txt u {display:inline;}
#bannerSlide .swiper-slide .conf .imgArea img {margin:0 0 0 -20%;}

}


/*** media query 960px ***/
@media all and (max-width:960px){

#header #navi ul li a {padding:23px 16px 21px;}
#header #navi ul li a#topNavi5 {padding:23px 40px 21px 16px;}
#header #navi ul li ul#topSubm2 {left:20%;}
#header #navi ul li ul#topSubm4 {left:70%;}
#header #navi ul li ul#topSubm5 {right:4.3%;}

#bannerSlide .swiper-slide .conf .imgArea img {margin:0 0 0 -10%;}
#bannerSlide .swiper-slide .conf .txtArea .txt img {width:400px;}
#bannerSlide .swiper-slide .conf .txtArea .txt span {font-size:40px;}
#bannerSlide .swiper-slide .conf .txtArea .txt span u {font-size:40px;}
#bannerSlide .swiper-slide .conf .txtArea .btn {position:relative; left:0; top:0; margin:20px 0 0 0;}


#mainInfo {margin:40px 10px 30px;}
#mainInfo ul li .ico {position:relative; left:0; top:0; text-align:center; margin:0 0 20px 0;}
#mainInfo ul li .info {margin:0; text-align:center;}
#mainInfo ul li .info .tit {font-size:20px; text-align:center;}
#mainInfo ul li .info .txt {text-align:center; padding:10px 0 15px;}
#mainInfo ul li .info .txt u {display:block; font-size:13px;}

#fmenu ul li {margin:0 0 0 4.6%; padding:0 4.6% 0 0;}




}



/*** media query 900px ***/
@media all and (max-width:900px){

#bannerSlide {height:750px;}
#bannerSlide .swiper-slide {height:750px;}
#bannerSlide .swiper-slide .conf .imgArea {float:none; width:100%; text-align:center; margin:30px 0 0 0;}
#bannerSlide .swiper-slide .conf .imgArea.mno {margin:0;}
#bannerSlide .swiper-slide .conf .imgArea img {margin:0 -20px 0 0; height:auto;}
#bannerSlide .swiper-slide .conf .txtArea {float:none; width:auto; margin:0 40px;}
#bannerSlide .swiper-slide .conf .txtArea .txt img {width:auto;}
#bannerSlide .swiper-slide .conf .txtArea ul li.w65 {width:48%;}
#bannerSlide .swiper-slide .conf .txtArea ul li.w60 {width:48%;}
#bannerSlide .swiper-slide .conf .txtArea ul li.w40 {width:48%;}
#bannerSlide .swiper-slide .conf .txtArea ul li.w35 {width:48%;}
#bannerSlide .swiper-slide .conf .txtArea .txt span u {display:inline;}

#fmenu ul li {margin:0 0 0 3.8%; padding:0 3.8% 0 0;}

}





/*** media query 840px ***/
@media all and (max-width:840px){

#header #navi h1 {margin:12px 0 12px 20px;}
#header #navi h1 img {width:160px; margin:2px 0 0 0;}
#header #navi ul {margin:0 0 0 0;}
#header #navi ul li a {padding:23px 20px 21px; font-size:15px;}
#header #navi ul li a#topNavi5 {padding:23px 20px 21px 20px;}
#header #navi ul li ul#topSubm3 {left:57%;}
#header #navi ul li ul#topSubm5 {right:3%;}
#header #snb ul li.last{padding: 0 20px 0 15px;}

#fmenu ul li {margin:0 0 0 3.4%; padding:0 3.4% 0 0;}
}




/*** media query 810px ***/
@media all and (max-width:810px){

#fmenu ul li {margin:0 0 0 3%; padding:0 2.8% 0 0;}

}






/*** media query 780px ***/
@media all and (max-width:780px){

#header #navi ul li ul li a span {display:block; padding:2px 0 0 0;}
#header #navi ul li ul#topSubm1 {left:3.2%;}
#header #navi ul li ul#topSubm2 {left:22%;}
#header #navi ul li ul#topSubm3 {left:51%;}
#header #navi ul li ul#topSubm4 {left:67%;}
#header #navi ul li ul#topSubm5 {right:5%;}


}





/*** media query 767px ***/
@media all and (max-width:767px){

#headWrap {position:relative; left:0; top:0; height:80px;}
#mnavi {display:block; position:absolute; left:-20px; top:15px; cursor:pointer;}
#mnaviHead {display:block; width:100%; height:80px;}
#mnaviHead a {display:block; width:100%; height:100%; text-align:right; overflow:hidden;}

#header {background:url(none);}
#header #snb {position:absolute; right:0; top:33px; width:auto;}
#header #snb ul li {line-height:12px; background:url('../images/bg/bg_snb_line_m.png') right 2px no-repeat;}
#header #snb ul li.last {padding:0 0 0 15px;}
#header #snb ul li img {width:auto;}
#header #snb ul li.first img {width:auto;}
#header #snb ul li.last img {width:auto;}

#header #navi {margin:0;}
#header #navi h1 img {margin:10px 0 0 0; width:auto;}

#header #navi #topWrap {position:absolute; left:-430px; top:0; float:none; width:410px; margin:0; background:#b09a83; z-index:9999;}
#header #navi ul {border-top:1px #c0ae9c solid; margin:0;}
#header #navi ul li {float:none;}
#header #navi ul li a {font-size:26px; padding:0 0 0 44px; line-height:70px; color:#fff; border-bottom:1px #c0ae9c solid; background:url('../images/bg/bg_mnavi_arrow_down.gif') 352px 28px no-repeat;}
#header #navi ul li a#topNavi5 {padding:0 0 0 44px;}
#header #navi ul li ul {display:none; position:relative; left:0; top:0; padding:12px 0; width:auto; height:auto; visibility:visible; border-top:0; border-bottom:1px #c0ae9c solid;}
#header #navi ul li ul li a {font-size:18px; line-height:1.2; border:0; padding:12px 0 12px 44px; color:#fff; font-weight:normal; background:url(none);}
#header #navi ul li ul li a span {display:inline; font-size:18px; color:#fff; font-weight:normal;}
#header #navi ul li ul li.f a {display:none; font-size:18px; line-height:1.2; border:0; padding:12px 0 12px 44px; margin:0; color:#fff; font-weight:normal;}

#header #navi ul li ul#topSubm1, #header #navi ul li ul#topSubm2, #header #navi ul li ul#topSubm3, #header #navi ul li ul#topSubm4, #header #navi ul li ul#topSubm5, #header #navi ul li ul#topSubm6 {left:0;}

#mainRoll {height:600px;}
#mainRoll .swiper-slide {height:600px;}
#mainRoll .swiper-slide .txtConf .point {padding:80px 0 0 0;}
#mainRoll .swiper-slide .txtConf .point span {display:block;}
#mainRoll .swiper-slide .txtConf .txt span {display:inline;}

#thum {top:-180px;}

#bannerSlide .swiper-slide .conf .imgArea img {height:300px;}
#bannerSlide .swiper-slide .conf .txtArea ul li {width:98%;}
#bannerSlide .swiper-slide .conf .txtArea ul li.w65 {width:98%;}
#bannerSlide .swiper-slide .conf .txtArea ul li.w60 {width:98%;}
#bannerSlide .swiper-slide .conf .txtArea ul li.w40 {width:98%;}
#bannerSlide .swiper-slide .conf .txtArea ul li.w35 {width:98%;}

#quickbanner ul li a h2 {padding:35px 0 12px; background:url("../images/bg/bg_quickbanner_arrow.png") right 36px no-repeat;}

#fmenuWrap {height:auto;}
#fmenu {margin:0;}
#fmenu ul {width:100%; overflow:hidden;}
#fmenu ul li {width:22%; padding:40px 3% 40px 0; margin:0 0 0 8%; border:0;}
#fmenu ul li.f {margin:0 0 0 8%;}
#fmenu ul li.mf {width:56%;}
#fmenu ul li.last {padding:40px 3% 40px 0;}
#fmenu ul li ul li {width:auto;}



}




/*** media query 670px ***/
@media all and (max-width:670px){

#quickbanner {height:auto; background:url(none); margin:0;}
#quickbanner ul li.l {float:none; width:100%; padding:0; border-bottom:1px #e5e5e5 solid;}
#quickbanner ul li.r {float:none; width:100%; padding:0;}
#quickbanner ul li a {width:auto; height:auto; padding:0 40px 35px 40px;}

#mainInfo {margin:30px 10px 40px;}
#mainInfo ul li .info .txt {display:none;}
#mainInfo ul li .info .btn {display:none;}


}




/*** media query 580px ***/
@media all and (max-width:580px){

#thum {height:120px;}
#thum .swiper-slide {width:120px !important;}
#thum .swiper-slide p {padding:50px 0 0 14px;}

#fmenu ul li {width:20%; padding:40px 2% 40px 0; margin:0 0 0 8%;}

}





/*** media query 540px ***/
@media all and (max-width:540px){

#headWrap {height:50px;}
#mnavi {top:12px;}
#mnavi img {width:20px;}
#header #snb {top:18px;}
#header #snb ul li {background:url('../images/bg/bg_snb_line.png') right 2px no-repeat;}
#header #snb ul li img {width:45px;}
#header #snb ul li.first img {width:65px;}
#header #snb ul li.last img {width:42px;} 
#header #navi h1 {margin:12px 0 0 10px;}
#header #navi h1 img {width:124px; margin:0 0 0 0;}
#header #navi #topWrap {left:-286px; width:266px;}

#mnaviHead {height:50px;}
#mnaviHead img {width:56px;}
#header #navi ul li a {line-height:50px; font-size:15px; padding:0 0 0 30px; background:url('../images/bg/bg_mnavi_arrow_m_down.gif') 230px 21px no-repeat;}
#header #navi ul li a#topNavi5 {padding:0 0 0 30px;}
#header #navi ul li ul {padding:6px 0;}
#header #navi ul li ul li a {font-size:12px; padding:6px 0 6px 30px;}
#header #navi ul li ul li.f a {font-size:12px; padding:6px 0 6px 30px;}
#header #navi ul li ul li a span {font-size:12px;}

#mainRoll {height:420px;}
#mainRoll .swiper-slide {height:420px;}
#mainRoll .swiper-slide .backimg {margin:0 0 0 -531px;}
#mainRoll .swiper-slide .backimg img {width:1062px;}
#mainRoll .swiper-slide .txtConf .point {padding:54px 0 0 0;}
#mainRoll .swiper-slide .txtConf .point {padding:40px 0 0 0;}
#mainRoll .swiper-slide .txtConf .point span {font-size:33px;}
#mainRoll .swiper-slide .txtConf .point u {font-size:33px;}
#mainRoll .swiper-slide .a1_1 {width:157px;}
#mainRoll .swiper-slide .a1_2 {width:165px;}
#mainRoll .swiper-slide .a1_3 {width:207px;}
#mainRoll .swiper-slide .txtConf {margin:0 20px;}
#mainRoll .swiper-slide .txtConf .txt {padding:10px 0 0 0; line-height:1.2;}
#mainRoll .swiper-slide .txtConf .txt span {font-size:13px; line-height:1.2;}
#mainRoll .swiper-slide .txtConf .more {margin:15px 0 0 0; font-size:13px;}

#thumWrap {margin:0 0 0 20px;}
#thum {width:400px; height:90px; top:-135px;}
#thum .swiper-slide {width:90px !important; background:url('../images/ico/ico_thum_plus_off.png') 6px 6px no-repeat;}
#thum .active-nav {background:url('../images/ico/ico_thum_plus_on.png') 6px 6px #fff no-repeat;}
#thum .swiper-slide p {font-size:12px; padding:35px 0 0 6px;}

#quickbanner ul li a h2 {font-size:15px; padding:20px 0 12px; background:url('../images/bg/bg_quickbanner_arrow_m.png') right 20px no-repeat;}
#quickbanner ul li a {padding:0 20px 20px;}
#quickbanner ul li a .info span {font-size:13px;}

#bannerSlide {height:600px;}
#bannerSlide .swiper-slide {height:600px;}
#bannerSlide .swiper-slide .conf .imgArea img {height:250px;}
#bannerSlide .swiper-slide .conf .txtArea {margin:0 20px;}
#bannerSlide .swiper-slide .conf .txtArea ul li {font-size:12px; line-height:1.1; background-position:left 13px;}
#bannerSlide .swiper-slide .conf .txtArea .tit {font-size:15px; padding:20px 0 15px;}
#bannerSlide .swiper-slide .conf .txtArea .txt {font-size:16px;}
#bannerSlide .swiper-slide .conf .txtArea .txt span {font-size:24px;}
#bannerSlide .swiper-slide .conf .txtArea .txt span u {font-size:24px;}
#bannerSlide .swiper-slide .conf .txtArea .btn a {font-size:14px; background:url('../images/bg/bg_bannerslide_arrow_m.png') right 2px no-repeat;}

#mainInfo {margin:30px 10px;}
#mainInfo ul li .info .tit {font-size:15px;}
#mainInfo ul li .ico img {width:90px;}

#fmenu {padding:0 0 20px 0;}
#fmenu ul li {width:20%; padding:20px 0 0 10%; margin:0; border:0;}
#fmenu ul li.f {margin:0;}
#fmenu ul li.mf {width:50%;}
#fmenu ul li.last {padding:20px 0 20px 10%;}
#fmenu ul li a {font-size:13px;}
#fmenu ul li ul li {padding:5px 0;}
#fmenu ul li ul li a {font-size:11px;}

#footer #flogo img {width:160px;}
#footer #fnb ul {width:190px;}
#footer #fnb ul li a {font-size:11px;}
#footer address {font-size:11px;}
#footer address span {display:block; font-size:11px;}

}




/*** media query 430px ***/
@media all and (max-width:430px){

#mainRoll .swiper-slide .txtConf .txt span {font-size:12px;}
#mainRoll .swiper-slide .txtConf {margin:0 10px;}
#thumWrap {margin:0 0 0 10px;}
#thum {width:316px;}
#thum .swiper-slide {margin:0 10px 0 0;}

#quickbanner ul li a {padding:0 10px 15px;}
#quickbanner ul li a h2 {font-size:13px; padding:15px 0 12px; background-position:right 14px;}
#quickbanner ul li a .info {line-height:1.2;}
#quickbanner ul li a .info span {font-size:12px; line-height:1.2;}


.btnControl {margin:0 20px 0 0;}
.arrowBannerLeft {right:68px; top:15px;}
.arrowBannerRight {top:15px;}
.count {top:20px;}


#fmenu ul li {width:27%; padding:20px 0 0 5%;}
#fmenu ul li.last {padding:20px 0 0 5%;}
}



/*** media query 420px ***/
@media all and (max-width:420px){
#fmenu ul li ul li a u {display:block; padding:2px 0 0 7px;}


}