@charset "utf-8";
@import url(reset.css);
@import url(header.css);
@import url(footer.css);

/* CSS Document */

.Content{width: 100%;height: auto;overflow: hidden;background: url(zjmj_bg.png) center top no-repeat #EDF6FD;background-size: 100% 810px;}

/*麻江概况*/
.Part1{width: 100%; height: auto; overflow: hidden;}
.mjgk{width: 1218px; height: auto; overflow: hidden; margin: 30px auto 0;}
.mjgk .stitle{width: 100%; height: auto; overflow: hidden; text-align: center;}
.mjgk .stitle a{width: auto; height: 100%; display: inline-block;}
.mjgk .mjgklist{width: 100%;height: 525px;overflow: hidden;position: relative;margin-top: 41px;background: url(zjmj_img02.png) center top no-repeat;}
.mjgk .mjgklist .hd{height: auto;position: absolute;right: 485px;top: 25px;z-index: 2;}
.mjgk .mjgklist .hd ul li{width: 133px; height: 50px; line-height: 50px; text-align: center; position: relative; margin-bottom: 7px;}
.mjgk .mjgklist .hd ul li:before{content: ''; width: 100%; height: 100%; background: #1352b7; position: absolute; left:0px; top: 0px; filter: alpha(opacity=78);opacity: 0.78;}
.mjgk .mjgklist .hd ul li:after{content: '';display: none;width: 53px;height: 100%;background: url(zjmj_img03.png) center center no-repeat;position: absolute;left: -30px;top: 0px;}
.mjgk .mjgklist .hd ul li a{width: 100%;height: 100%;display: block;color: #FFFFFF;font-size: 18px;position: relative;}
.mjgk .mjgklist .hd ul li.on:before{width: 163px;filter: alpha(opacity=100);opacity: 1;border-right: 3px solid #ffb80d;left: -30px;}
.mjgk .mjgklist .hd ul li.on:after{display: block;}
.mjgk .mjgklist .bd{width: 100%; height: auto; overflow: hidden;}
.mjgk .mjgklist .mjgkcon{width: 100%; height: auto; overflow: hidden;}
.mjgk .mjgklist .desc{width: 500px;height: auto; overflow: hidden; margin-left: 50px; float: left;}
.mjgk .mjgklist .desc .title{width: 100%;height: 48px;line-height: 48px;overflow: hidden;margin-top: 30px;position: relative;}
.mjgk .mjgklist .desc .title:after{content: ''; width: 59px; height: 4px; background: #ffb80d; position: absolute; left:0px; bottom: 0px;}
.mjgk .mjgklist .desc .title a{color: #333333; font-size: 24px; font-weight: bold;}
.mjgk .mjgklist .desc .title a:hover{color: #1352b7;}
.mjgk .mjgklist .desc .view{width: 100%;height: auto;line-height: 35px;text-indent: 2em;overflow: hidden;color: #333333;font-size: 16px;display: -webkit-box;-webkit-line-clamp: 7;-webkit-box-orient: vertical;margin-top: 48px;}
.mjgk .mjgklist .desc .more{width: 123px;height: 40px;line-height: 40px;border: 1px solid #dddddd;text-align: center;margin: 35px auto 0;}
.mjgk .mjgklist .desc .more a{width: 100%;height: 100%;display: block;color: #333333;font-size: 16px;}
.mjgk .mjgklist .desc .more:hover{background: #1352b7; border: 1px solid #1352b7;}
.mjgk .mjgklist .desc .more:hover a{color: #FFFFFF;}
.mjgk .mjgklist .img{ width: 618px;height: auto; overflow: hidden; float: right;}
.mjgk .mjgklist .img a{width: 100%; height: 100%; display: block;}
.mjgk .mjgklist .img img{ display: block; width: 100%;height: 525px;transition: transform 1s; transform: scale(1);}
/*.mjgk .mjgklist .img img:hover{transform: scale(1.07);}*/


/*麻江旅游*/
.Part2{width: 100%; height: auto; overflow: hidden; background: url(zjmj_img08.png) center bottom no-repeat;background-size: 100% 776px;}
.mjly{width: 1218px; height: auto; overflow: hidden; margin: 42px auto 70px;}
.mjly .stitle{width: 100%; height: auto; overflow: hidden; text-align: center;}
.mjly .stitle a{width: auto; height: 100%; display: inline-block;}
.mjly .mjlycon{width: 100%; height: auto; overflow: hidden;margin-top: 33px;}
.mjly .mjlycon .desc{width: 364px;height: 462px; float: right; position: relative;}
.mjly .mjlycon .desc .title{width: 100%;height: 48px;line-height: 46px;overflow: hidden;margin-top: 5px;position: relative;}
.mjly .mjlycon .desc .title:after{content: ''; width: 59px; height: 4px; background: #ffb80d; position: absolute; left:0px; bottom: 0px;}
.mjly .mjlycon .desc .title a{color: #333333; font-size: 24px; font-weight: bold;}
.mjly .mjlycon .desc .title a:hover{color: #1352b7;}
.mjly .mjlycon .desc .desccon{width: 431px; height: 380px;padding: 0px 33px; border-radius: 5px; position: absolute; bottom: 0px; right: 0px; z-index: 1; background: url(zjmj_img10.png) center center repeat;}
.mjly .mjlycon .desc .ztitle{width: 100%;height: 35px;line-height: 30px;overflow: hidden;margin-top: 35px;text-align: center;}
.mjly .mjlycon .desc .ztitle a{color: #1352b7;font-size: 18px;font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;width: 100%;}
.mjly .mjlycon .desc .ztitle a:hover{color: #1352b7;}
.mjly .mjlycon .desc .view{width: 100%;height: auto;line-height: 35px;text-indent: 2em;overflow: hidden;color: #333333;font-size: 16px;margin-top: 25px;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
.mjly .mjlycon .desc .more{width: 123px;height: 40px;line-height: 40px;border: 1px solid #dddddd;text-align: center;margin: 35px auto 0;}
.mjly .mjlycon .desc .more a{width: 100%;height: 100%;display: block;color: #333333;font-size: 16px;}
.mjly .mjlycon .desc .more:hover{background: #1352b7; border: 1px solid #1352b7;}
.mjly .mjlycon .desc .more:hover a{color: #FFFFFF;}
.mjly .mjlycon .img{ width: 828px;height: auto; overflow: hidden; float: left; border-radius: 5px;}
.mjly .mjlycon .img a{width: 100%; height: 100%; display: block;}
.mjly .mjlycon .img img{ display: block; width: 100%;height: 462px;transition: transform 1s; transform: scale(1);}
.mjly .mjlycon .img img:hover{transform: scale(1.07);}

/*视频麻江*/
.Part3{width: 100%; height: auto; overflow: hidden;}
.spmj{width: 100%; height: 695px; position: relative; padding-bottom: 80px;}
.spmj .stitle{width: 99px;height: 188px;background: url(zjmj_img05.png) center top no-repeat;position: absolute;left: 50%;margin-left: -609px;top: 0;z-index: 2;}
.spmj .stitle a{width: 100%; height: 100%; display: block;}
.spmj .stitle span{color: #1352b7;font-size: 24px;font-weight: bold;width: 30px;display: block;margin: 37px auto 0;line-height: 27px;text-align: center;}
.spmj .bd{width: 100%; height: auto; overflow: hidden;}
.spmj .bd .video{width: 100%; height: auto; overflow: hidden; position: relative;}
.spmj .bd .video .video_btn{ width: 114px; height: 114px; cursor: pointer; display: block; position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url(zjmj_img06.png) center center no-repeat;}
.spmj .bd video{width: 100%;height: 695px;object-fit: cover;overflow: hidden;}
.spmj .hd{width: 1248px;height: auto;position: absolute;left: 50%;margin-left: -624px;bottom: 0;}
.spmj .hd ul{width: 100%; height: auto; overflow: hidden;}
.spmj .hd ul li{width: 266px;height: 135px;padding: 10px;float: left;margin: 10px 13px;position: relative; cursor: pointer;}
.spmj .hd ul li:before{content: '';width: 100%;height: 100%;background: #ffffff;position: absolute;left:0px;bottom: 0px;filter: alpha(opacity=30);opacity: 0.3;box-shadow: 0px 4px 8px #cecece;}
.spmj .hd ul li img{width: 100%; height: 100%; position: relative; z-index: 2;}
.spmj .hd ul li.on:before{ filter: alpha(opacity=100);opacity: 1;}


/*旅行线路*/
.Part4{width: 1218px; height: auto; overflow: hidden; margin: 60px auto 0; position: relative;}
.Part4 ul{width: 100%; height: auto; overflow: hidden;}
.Part4 ul li{width: 283px; height: 255px; float: left; margin:0px 10px 10px 0px; position: relative;}
.Part4 ul li.m1{width: 576px;}
.Part4 ul li.m3{width: 337px; margin-right: 0px;}
.Part4 ul li .jdzs{width: 100%; height: 521px; position: absolute; top: 0; left: 0;}
.Part4 ul li a{width: 100%; height: 100%; display: block; position: relative; z-index: 10;}
.Part4 ul li a:before{content: ''; width: 93px; height: 93px; background: #187de5; border-radius: 50%; transition: all 1s; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);filter: alpha(opacity=74);opacity: 0.74;}
.Part4 ul li.m2 a:before{background: #4fb311;}
.Part4 ul li.m3 a:before{background: #ff684a;}
.Part4 ul li.m4 a:before{background: #537aeb;}
.Part4 ul li.m5 a:before{background: #cf72dd;}
.Part4 ul li.m6 a:before{background: #ffc14a;}
.Part4 ul li img{width: 100%; height: 100%;}
.Part4 ul li span{width: 93px; height: 93px; line-height: 30px; color: #ffffff; font-size: 24px; font-weight: bold; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; justify-content: center; align-items: center;}
/* .Part4 ul li:hover{background: #98c6ea;}
.Part4 ul li:hover .jdzs{background: #98c6ea;} 
.Part4 ul li:hover img{display: none;}*/
.Part4 ul li:hover a:before{width: 170px; height: 170px; filter: alpha(opacity=86);opacity: 0.86;}
.Part4 ul li.m1:hover a:before{background: url(zjmj_img12_1.png) center center no-repeat;}
.Part4 ul li.m2:hover a:before{background: url(zjmj_img12_2.png) center center no-repeat;}
.Part4 ul li.m3:hover a:before{background: url(zjmj_img12_3.png) center center no-repeat;}
.Part4 ul li.m4:hover a:before{background: url(zjmj_img12_4.png) center center no-repeat;}
.Part4 ul li.m5:hover a:before{background: url(zjmj_img12_5.png) center center no-repeat;}
.Part4 ul li.m6:hover a:before{background: url(zjmj_img12_6.png) center center no-repeat;}

/*图说麻江*/
.Part5{width: 100%; height: auto; overflow: hidden; margin-top: 72px;}
.tsmj{width: 100%; min-width: 1238px; height: 557px; overflow: hidden; position: relative;}
.tsmj .bd { width: 1238px; position: absolute;  left: 50%; margin-left: -619px}
.tsmj .tempWrap {overflow: visible !important;}
.tsmj .tempWrap ul { margin-left: -1238px !important;}
.tsmj .bd li {width: 1218px; overflow: hidden; height: auto; position: relative; padding: 0px 10px;}
.tsmj .bd li a{width: 100%; height: 100%; display: block;}
.tsmj .bd li .img{ width: 100%;height: auto; overflow: hidden;}
.tsmj .bd li .img a{width: 100%; height: 100%; display: block;}
.tsmj .bd li .img img{ display: block; width: 1218px;height: 557px;}
.tsmj .bd li .stitle{ display: none;width: 99px; height: 188px; background: url(zjmj_img05.png) center top no-repeat; position: absolute; left: 10px; top: 0;}
.tsmj .bd li .stitle a{width: 100%; height: 100%; display: block;}
.tsmj .bd li .stitle span{color: #1352b7;font-size: 24px;font-weight: bold;width: 30px;display: block;margin: 37px auto 0;line-height: 27px;}
.tsmj .bd li .desc{display: none;width: 304px;height: 439px;padding: 10px;position: absolute;top: 56px;right: 62px;background: url(zjmj_img09.png) center center repeat;}
.tsmj .bd li .desc .desccon{border: 1px solid #FFFFFF;height: 437px;overflow: hidden;padding: 0px 18px;}
.tsmj .bd li .desc .title{width: 100%;height: 60px;line-height: 30px;overflow: hidden;margin-top: 86px;text-align: center;}
.tsmj .bd li .desc .title a{color: #333333; font-size: 20px; font-weight: bold;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.tsmj .bd li .desc .title a:hover{color: #1352b7;}
.tsmj .bd li .desc .view{width: 100%;height: auto;line-height: 35px;text-indent: 2em;overflow: hidden;color: #333333;font-size: 16px;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;margin-top: 4px;}
.tsmj .bd li.on .stitle{display: block;}
.tsmj .bd li.on .desc{display: block;}
.tsmj .pnBtn {position: absolute;z-index: 1;top: 0;width: 100%;height: 557px;cursor: pointer;}
.tsmj .prev {left: -50%;margin-left: -629px;}
.tsmj .next {left: 50%;margin-left: 629px;}
.tsmj .pnBtn .blackBg {display: block;position: absolute;left: 0;top: 0;width: 100%;height: 557px;background: #000;filter: alpha(opacity=53);opacity: 0.53;}
.tsmj .pnBtn .arrow {position: absolute;top: 252px;z-index: 1;width: 57px;height: 57px;}
.tsmj .pnBtn .arrow:before{content: ''; width: 100%; height: 100%; position: absolute; left:0px; top: 0px; background: #FFFFFF;filter: alpha(opacity=67);opacity: 0.67; border-radius: 50%;}
.tsmj .pnBtn .arrow:after{content: '';width: 39px;height: 100%;position: absolute;left: 9px;top: 0px;z-index: 1;}
.tsmj .pnBtn .arrow:hover {filter: alpha(opacity=67);opacity: 0.67;}
.tsmj .prev .arrow { right: 30px;}
.tsmj .next .arrow { left: 30px;}
.tsmj .prev .arrow:after{ background: url(zjmj_img07.png) left center no-repeat;}
.tsmj .next .arrow:after{ background: url(zjmj_img07.png) right center no-repeat;}
