/*--------------------------------------------------
    project:yg-macao
    producer:Chan.
    date:2020-03-19
--------------------------------------------------*/


/*
    初始化
*/
body{ margin: 0; padding: 0; width:100%; height: 100%; font-family: 'Microsoft YaHei'; background: #fff; position: relative;}
h1,h2,h3,h4,h5,h6,ul,ol,li,p,figure{list-style: none; padding: 0; margin: 0;}
a,a:hover{text-decoration: none;}
.color-blue{background: #2663ff; color: #2663ff;}


/*--------------------------------------------------
    组件
--------------------------------------------------*/

/*
    container
*/
.container{ width: 1400px; padding: 0; max-width: 1400px;}


/* 
    banner
*/
.banner{background: url('../images/topbanner.jpg') no-repeat; width: 100%; height: 760px; background-size: cover; background-position: center;}


/* 
    header
*/
.header{overflow: hidden; position: fixed ; width: 100%; left: 0; top: 0; z-index: 999; transition: all .5s;}
.header.bgw{background: #fff; transition: all .5s; border-bottom: 1px solid #ddd;}
.header .logo{float: left; line-height: 80px;}
.header .menu{float: right;}
.header .menu .menu-item{display: inline-block; margin: 0 10px;}
.header .menu .menu-link{line-height: 80px; padding: 0 20px; color: #333; position: relative; display: block; transition: all .3s;}
.header .menu .menu-link:hover{color: #d7000f;}
.header .menu .menu-link.active{color: #d7000f;}
.header .menu .menu-link::before{content: ''; position: absolute; left: 50%; bottom: 12px; background: #fff; width: 72px; height: 2px; transform: translate(-50%,0); transition: all .5s;}
.header .menu .menu-link.active::before{background: #d7000f;}
.header.bgw .menu-link::before{background: #bbb;}

.headerB{background: #fff;}
.headerB .menu-link{ line-height: 36px !important; border: solid 1px #ddd; margin-top: 20px; padding: 0 30px !important; border-radius: 10px; color: #000;}
.headerB .menu-link::before{ display: none !important; }

#mb-menu{display: none;}


/* 
    mainbox
*/
.mainbox{padding: 80px 0;}


/* 
    tem-ti
*/
.tem-ti{font-size: 24px; color: #333; margin-bottom: 20px; text-align: center;}
.tem-lti{font-size: 42px; color: #333; text-align: center; line-height: 1.4em;}
.tem-text{margin-top: 30px; text-align: justify;}
.tem-text.w1200{width: 1200px; display: block; margin: 30px auto 0;} 
.tem-text p{ font-size: 16px; color: #777; line-height: 2em; margin-bottom: 15px; text-indent: 2em;}
.tem-text p:last-child{  margin-bottom: 0px;}


/* 
    more-bt
*/
.tem-more{min-width: 144px; line-height: 40px; background: none; border-radius: 5px; text-decoration: none; font-size: 14px; color: #2663ff;  display: table; transition: all .3s; text-align: center;  border: solid 1px #2663ff; margin-top: 30px; padding: 0 20px;}
.tem-more:hover{background: #2663ff; color: #fff;}
.tem-more.center{margin: 30px auto 0;}
.index-more{margin: 46px auto 0 !important ;}
.index-more .iconfont{position: relative; font-weight: bold; padding: 0 1px; margin-left: 2px;}
.index-more .iconfont::after{content: ''; width: 1.5px; height: 77%; position: absolute; left: 0; top: 10%; background: #2663ff; transition: all .3s;}
.index-more:hover .iconfont::after{ background: #fff; transform: translate(16px,0);}

.tem-more.red{border: solid 1px #ff454d; color: #ff454d;}
.tem-more.red:hover{background: #ff454d; color: #fff;}
.tem-more.red .iconfont::after{background: #ff454d;}
.tem-more.red:hover .iconfont::after{ background: #fff; }

.tem-more.orange{border: solid 1px #f64d14; color: #f64d14;}
.tem-more.orange:hover{background: #f64d14; color: #fff;}
.tem-more.orange .iconfont::after{background: #f64d14;}
.tem-more.orange:hover .iconfont::after{ background: #fff; }

.tem-more.white{border: solid 1px #fff; color: #fff;}
.tem-more.white:hover{background: #fff; color: #2663ff;}
.tem-more.white .iconfont::after{background: #fff;}
.tem-more.white:hover .iconfont::after{ background: #2663ff; }

.tem-more.green{border: solid 1px #fff; color: #fff;}
.tem-more.green:hover{background: #fff; color: #237a8e;}
.tem-more.green .iconfont::after{background: #fff;}
.tem-more.green:hover .iconfont::after{ background: #237a8e; }

.tem-more.black{border: solid 1px #333; color: #333;}
.tem-more.black:hover{background: #2663ff; color: #fff; border: solid 1px #2663ff;}
.tem-more.black .iconfont::after{background: #333;}
.tem-more.black:hover .iconfont::after{ background: #2663ff; }
.tem-more.mb-more{display: none;}


/* 
    index-news
*/
#index-news{}
#index-news .swiper-banner{position: relative;}
#index-news .swiper-banner img{width: 100%; object-fit: cover; object-position: center;}
#index-news .swiper-banner .index-more{position: absolute; left: 17.6%; bottom: 20%;}
#index-news .swiper-pagination-bullets{bottom: 30px;}
#index-news .swiper-pagination-bullet{background: #fff; width: 15px; height: 15px; opacity: .5; margin: 0 8px;}
#index-news .swiper-pagination-bullet-active{ opacity: 1;}
#index-news .swiper-button-next,#index-news .swiper-button-prev{background: #fff ; width: 48px; height: 48px; line-height: 48px; border-radius: 50%;text-align: center; box-shadow: 0 0 10px rgba(0,13,27,.2); opacity: 0; transition: all .3s;}
#index-news .swiper-button-next{right: 36px;}
#index-news .swiper-button-prev{left: 36px;}
#index-news .iconfont{font-size: 22px; font-weight: 700; opacity: .5; transition: all .3s;}
#index-news  .swiper-button-next:hover .iconfont,#index-news  .swiper-button-prev:hover .iconfont{opacity: 1;}
#index-news:hover .swiper-button-next,#index-news:hover .swiper-button-prev{opacity: 1;}


/* 
    tec-area
*/
.tec-area{}
.tec-area .box{overflow: hidden; margin-top: 60px;}
.tec-area .box .left{float: left;}
.tec-area .box .right{float: right; padding-right: 40px;}
.tec-area .img{position: relative;}
.tec-area .img .index-more{position: absolute; right: 60px; bottom: 40px;}
.tec-area .nav{width: 320px;}
.tec-area .nav-link{width: 100%; line-height: 80px; padding: 0; text-align: center; margin-bottom: 39px; background: #eaf0ff; font-size: 20px; color: #333; border-radius: 10px; position: relative;}
.tec-area .nav-link:last-child{margin-bottom: 0;}
.tec-area .nav-link.active{background: #336dff;}
.tec-area .nav-link.active::after{content: '\e871'; position: absolute; left: -45px; top: 50%; font-family: iconfont; color: #336dff; transform: translate(0,-50%);}


/* 
    star-light
*/
.star-light{padding: 40px 0 80px;}
.star-light .box{margin-top: 60px;}
.star-light .box .list{position: relative; height: 382px;}
.star-light .box .list .img{position: absolute;}
.star-light .box .list .con{position: absolute;}
.star-light .box .list .con h5{font-size: 24px; font-weight: bold; margin-bottom: 30px;}
.star-light .box .list .con p{font-size: 16px;  line-height: 2em; margin-bottom: 60px;}
.star-light .box .list .con .tem-more{margin: 0 !important;}
.star-light .box .list .con .tem-more:hover .iconfont::after{background: #fff;}

.star-light .box .list:nth-child(odd){background: #e5f6fe;}
.star-light .box .list:nth-child(odd) .img{left: 0; top: 0;}
.star-light .box .list:nth-child(odd) .con{left: 700px; top: 50%; transform: translate(0,-50%);}

.star-light .box .list:nth-child(even){background: #cceefd;}
.star-light .box .list:nth-child(even) .img{right: 0; top: 0;}
.star-light .box .list:nth-child(even) .con{left: 120px; top: 50%; transform: translate(0,-50%);}

.star-light .box .list:nth-child(1) .con{width: 408px; left: auto; right: 120px;}
.star-light .box .list:nth-child(2) .con{width: 512px;}
.star-light .box .list:nth-child(3) .con{width: 582px;}
.star-light .box .list:nth-child(4) .con{width: 434px;}
.star-light .box .list:nth-child(5) .con{width: 567px;}
.star-light .box .list:nth-child(6) .con{width: 534px;}
.star-light .box .list:nth-child(7) .con{width: 623px;}
.star-light .box .list:nth-child(8) .con{width: 566px;}


/* 
    bottom
*/
.bottom{overflow: hidden; line-height: 140px; border-top: 1px solid #bbb; background: #f1f1f1;}
.bottom .copy{text-align: center;}
.bottom .copy p, .bottom .copy a{display: inline-block; font-size: 14px; color: #000; margin-right: 15px; transition: all .2s ;}
.bottom .copy a:hover{color: #666;}


/* 
    star-banner
*/
.star-banner{margin-top: 80px;}
.star-banner img{width: 100%;}


/* 
    star-page
*/
.star-page{display: flex;}

.star-page .menu{width: 20%; margin-top: 120px; padding-right: 30px; display: inline-block; position: sticky; top: 100px;}
.star-page .menu.sticky{position: fixed; top: 80px; }
.star-page .menu li{margin-bottom: 10px;}
.star-page .menu li a{line-height: 3em; font-size: 20px; display: block; color: #000; position: relative; padding: 0 20px; transition: all .3s;}
.star-page .menu li a:hover{background: #f6f6f6;}
.star-page .menu li a.active{background: #f6f6f6;}
.star-page .menu li a.active::after{content: ''; width: 100%; height: 2px; background: #336dff; position: absolute; left: 0; top: 0;}

.star-page .box{ float: right; width: 80%; padding: 80px; border-left: 1px solid #b9b9b9;}
.star-page .box .top{height: 158px; position: relative; background: #e5f6fe; }
.star-page .box .top .img{position: absolute; left: 106px ; top: 0; height: 100%;}
.star-page .box .top img{height: 100%;}
.star-page .box .top .text{position: absolute; right: 220px; top: 50%; transform: translate(0,-50%); text-align: center;}
.star-page .box .top .textA{}
.star-page .box .top .textB{right: 240px;}
.star-page .box .top .textC{right: 240px;}
.star-page .box .top .textD{}
.star-page .box .top .textE{}
.star-page .box .top .textF{right: 240px;}
.star-page .box .top .textG{right: 140px;}
.star-page .box .top .textG{right: 140px;}
.star-page .box .top .textH{right: 180px;}
.star-page .box .top h5{font-size: 42px; font-weight: bold; color: #336dff;}
.star-page .box .top p{font-size: 18px;  color: #333; margin-top: 10px;}

.star-page .box .topB{margin-top: 80px;}
.star-page .box .topB .text{right: auto; width: 100%;}

.star-page .box .center{margin-bottom: 60px; background: #f6f6f6; padding: 20px;}
.star-page .box .center h5{font-size: 20px; line-height: 2.5em; color: #333; margin-bottom: 10px; font-weight: bold;}
.star-page .box .center p{font-size: 16px; line-height: 2.5em; color: #333; }

.star-page .stroy{margin-top: 100px;}
.star-page .stroy .top-ti{}
.star-page .stroy .top-ti h5{font-size: 30px; font-weight: bold; color: #333; margin-bottom: 30px;}
.star-page .stroy .top-ti p{font-size: 18px; color: #333; word-spacing: 1em;}
.star-page .stroy .txt{margin-top: 40px;}
.star-page .stroy .txt p{font-size: 16px; color: #333; line-height: 2.2em; text-indent: 2em; margin-bottom: 15px; text-align: justify;}
.star-page .stroy .txt p.bold{font-weight: bold;}
.star-page .stroy .pic{display: table; margin: 30px 0;}
.star-page .stroy .pic img{max-width: 100%;}
.star-page .stroy .pic .bold{text-align: center ; margin-top: 20px; font-size: 20px;}


/* 
    移动端
*/

@media all and (max-width: 768px){
    /*
    container
    */
    .container{ width: 100%; padding: 0; max-width: 100%;}


    /* 
        banner
    */
    .banner{background: url('../images/topbanner.jpg') no-repeat; width: 100%; height: 180px; background-size: cover; background-position: center;}


    /* 
        header
    */
    .header{ background: #fff; display: none;}
    .header .logo{float: none; line-height: 80px;}
    .header .menu{float: none;}
    .header .menu .menu-item{display: inline-block; margin: 0 10px;}

    /* 
    mb-header
    */
    .mb-header{width: 100%;padding: 0 15px 0 15px;border-bottom: solid 1px #d3d3d3;display: block;position: fixed;left: 0;top: 0;background: #fff;z-index: 99;}
    .mb-header .head{height: 60px;text-align: center;overflow: hidden;position: relative;}
    .mb-header .menu-button{float: left;line-height: 60px;text-decoration: none;}
    .mb-header .menu-button i{font-size: 24px;color: #000;line-height: 60px;}
    .mb-header .menu-button:active i{color: #2b68ff;}
    .mb-header .mb-logo{position: absolute;top: 0;left: 50%;;margin-left: -70px;line-height: 60px;width: 120px;}
    .mb-header .mb-logo img{width: 100%;}


    /* 
        mainbox
    */
    .mainbox{padding: 60px 0;}


    /* 
        tem-ti
    */
    .tem-ti{font-size: 24px; color: #333; margin-bottom: 20px; text-align: center;}
    .tem-lti{font-size: 30px; color: #333; text-align: center; line-height: 1.4em;}
    .tem-text{margin-top: 30px; text-align: justify;}
    .tem-text.w1200{width: 100%; display: block; margin: 30px auto 0; padding:  0 15px;} 
    .tem-text p{ font-size: 16px; color: #777; line-height: 2em; margin-bottom: 15px; text-indent: 2em;}
    .tem-text p:last-child{  margin-bottom: 0px;}


    /* 
        more-bt
    */

    .tem-more.red{border: solid 1px #ff454d; color: #ff454d;}
    .tem-more.red:hover{background: #ff454d; color: #fff;}
    .tem-more.red .iconfont::after{background: #ff454d;}
    .tem-more.red:hover .iconfont::after{ background: #fff; }

    .tem-more.orange{border: solid 1px #f64d14; color: #f64d14;}
    .tem-more.orange:hover{background: #f64d14; color: #fff;}
    .tem-more.orange .iconfont::after{background: #f64d14;}
    .tem-more.orange:hover .iconfont::after{ background: #fff; }

    .tem-more.white{border: solid 1px #fff; color: #fff;}
    .tem-more.white:hover{background: #fff; color: #2663ff;}
    .tem-more.white .iconfont::after{background: #fff;}
    .tem-more.white:hover .iconfont::after{ background: #2663ff; }

    .tem-more.green{border: solid 1px #fff; color: #fff;}
    .tem-more.green:hover{background: #fff; color: #237a8e;}
    .tem-more.green .iconfont::after{background: #fff;}
    .tem-more.green:hover .iconfont::after{ background: #237a8e; }

    .tem-more.black{border: solid 1px #333; color: #333;}
    .tem-more.black:hover{background: #2663ff; color: #fff; border: solid 1px #2663ff;}
    .tem-more.black .iconfont::after{background: #333;}
    .tem-more.black:hover .iconfont::after{ background: #2663ff; }


    /* 
        index-news
    */
    #index-news{}
    #index-news .tem-more{display: none;}
    #index-news .tem-more.mb-more{display: table; margin-top: 30px !important;}
    #index-news .swiper-banner{position: relative;}
    #index-news .swiper-banner img{width: 100%; object-fit: cover; object-position: center; }
    #index-news .swiper-banner .index-more{position: absolute; left: 17.6%; bottom: 20%;}
    #index-news .swiper-pagination-bullets{top: 100px;}
    #index-news .swiper-pagination-bullet{background: #fff; width: 8px; height: 8px; opacity: .5; margin: 0 4px;}
    #index-news .swiper-pagination-bullet-active{ opacity: 1;}
    #index-news .swiper-button-next,#index-news .swiper-button-prev{display: none;}


    /* 
        tec-area
    */
    .tec-area{}
    .tec-area .tem-more{display: none;}
    .tec-area .tem-more.mb-more{display: table; margin-top: 30px !important;}
    .tec-area .box{overflow: hidden; margin-top: 30px;}
    .tec-area .box .left{float: none;}
    .tec-area .box .right{float: none; padding: 0 15px ;}
    .tec-area .img{position: relative;}
    .tec-area .img img{width: 100%;}
    .tec-area .img .index-more{position: absolute; right: 60px; bottom: 40px;}
    .tec-area .nav{width: 100%; margin-bottom: 30px;}
    .tec-area .nav-link{width: 100%; line-height: 50px; padding: 0; text-align: center; margin-bottom: 10px; background: #eaf0ff; font-size: 16px; color: #333; border-radius: 10px; position: relative;}
    .tec-area .nav-link:last-child{margin-bottom: 0;}
    .tec-area .nav-link.active{background: #336dff;}
    .tec-area .nav-link.active::after{content: '\e871'; position: absolute; left: -30px; top: 50%; font-family: iconfont; color: #336dff; transform: translate(0,-50%);}


    /* 
        star-light
    */
    .star-light{padding: 10px 0 0;}
    .star-light .tem-lti{font-size: 26px;}
    .star-light .box{margin-top: 60px;}
    .star-light .box .list{position: static; height:auto; margin-bottom: 10px;}
    .star-light .box .list:last-child{margin-bottom: 0;}
    .star-light .box .list .img{position: static;}
    .star-light .box .list img{width: 100%;}
    .star-light .box .list .con{position: static; padding: 30px 20px;}
    .star-light .box .list .con h5{font-size: 24px; font-weight: bold; margin-bottom: 30px;}
    .star-light .box .list .con p{font-size: 16px;  line-height: 2em; margin-bottom: 30px;}
    .star-light .box .list .con .tem-more{margin: 0 !important;}

    .star-light .box .list:nth-child(odd){background: #e5f6fe;}
    .star-light .box .list:nth-child(odd) .img{left: 0; top: 0;}
    .star-light .box .list:nth-child(odd) .con{left: 0; top: 50%; transform: translate(0,0);}

    .star-light .box .list:nth-child(even){background: #cceefd;}
    .star-light .box .list:nth-child(even) .img{right: 0; top: 0;}
    .star-light .box .list:nth-child(even) .con{left: 0; top: 50%; transform: translate(0,0);}

    .star-light .box .list:nth-child(1) .con{width: 100%; left: auto; right: 120px;}
    .star-light .box .list:nth-child(2) .con{width: 100%;}
    .star-light .box .list:nth-child(3) .con{width: 100%;}
    .star-light .box .list:nth-child(4) .con{width: 100%;}
    .star-light .box .list:nth-child(5) .con{width: 100%;}
    .star-light .box .list:nth-child(6) .con{width: 100%;}
    .star-light .box .list:nth-child(7) .con{width: 100%;}
    .star-light .box .list:nth-child(8) .con{width: 100%;}


    /* 
        bottom
    */
    .bottom{overflow: hidden; line-height: 2em; padding: 20px 15px;}
    .bottom .copy{text-align: center;}
    .bottom .copy p, .bottom .copy a{display: inline-block; font-size: 14px; color: #000; margin-right: 15px; transition: all .2s ;}
    .bottom .copy a:hover{color: #666;}


    /* 
        star-banner
    */
    .star-banner{margin-top: 60px;}
    .star-banner img{width: 100%; height: 120px; object-fit: cover; object-position: 62% 50%;}


    /* 
        star-page
    */
    .star-page{overflow: hidden;}

    .star-page .menu{float: none; position: static; width: 100%; margin-top: 10px; padding-right: 0px; display: flex; flex-wrap: wrap   ;}
    .star-page .menu li{margin-bottom: 10px; width: 50%; flex: 0 0 50%; min-width: 50%;}
    .star-page .menu li a{line-height: 3em; font-size: 16px; display: block; color: #000; position: relative; padding: 0 15px; transition: all .3s;}
    .star-page .menu li a:hover{background: #f6f6f6;}
    .star-page .menu li a.active{background: #f6f6f6;}
    .star-page .menu li a.active::after{content: ''; width: 100%; height: 2px; background: #336dff; position: absolute; left: 0; top: 0;}

    .star-page .box{float: none; width: 100%; padding: 0 15px; border-left: 1px solid #b9b9b9; margin-top: 30px;}
    .star-page .box .top{height: auto; position: relative; background: #e5f6fe; }
    .star-page .box .top .img{position: static; left: 0 ; top: 0; height: auto;}
    .star-page .box .top img{height: auto; width: 100%;}
    .star-page .box .top .text{position: static; right: 0; top: 50%; transform: translate(0,0); text-align: center; padding: 20px;}
    .star-page .box .top h5{font-size: 26px; font-weight: bold; color: #336dff;}
    .star-page .box .top p{font-size: 18px;  color: #333; margin-top: 10px;}

    .star-page .box .topB{margin-top: 80px;}
    .star-page .box .topB .text{right: auto; width: 100%;}

    .star-page .box .center{margin-bottom: 60px; background: #f6f6f6; padding: 20px;}
    .star-page .box .center h5{font-size: 20px; line-height: 2.5em; color: #333; margin-bottom: 10px; font-weight: bold;}
    .star-page .box .center p{font-size: 16px; line-height: 2.5em; color: #333; }

    .star-page .stroy{margin-top: 60px;}
    .star-page .stroy .top-ti{}
    .star-page .stroy .top-ti h5{font-size: 24px; font-weight: bold; color: #333; margin-bottom: 30px;}
    .star-page .stroy .top-ti p{font-size: 18px; color: #333; word-spacing: 1em;}
    .star-page .stroy .txt{margin-top: 30px;}
    .star-page .stroy .txt p{font-size: 16px; color: #333; line-height: 2.2em; text-indent: 2em; margin-bottom: 15px; text-align: justify;}
    .star-page .stroy .txt p.bold{font-weight: bold;}
    .star-page .stroy .pic{display: table; margin: 30px 0;}
    .star-page .stroy .pic img{max-width: 100%;}
    .star-page .stroy .pic .bold{text-align: center ; margin-top: 20px; font-size: 20px;}

    /* 
    手机菜单
    */
    #mb-menu{display: block; z-index: 999;}
    .menu-area{width: 100%;position: fixed;top: 0;left: 0;background: #fff;height: 60px;z-index:999; display: block; padding: 0 15px; border-bottom: 1px solid #ededed;}

    .menu-area .logo{z-index: 999; float: left; line-height: 60px;}
    .menu-area .logo img{width: 120px;}

    .menu-area .menu-button{float: right; display: block; line-height: 60px; height: 60px;text-align: center; border-radius: 5px; }
    .menu-area .menu-button i{font-size: 30px; color: #000;}
    .menu-area .menu-button:hover i{color: #d7000f;}
    .menu-area .menu-button:active i{color: #d7000f;}

    .menu-con{width: 0;height: 100%;position: fixed;left: 0;top:0;background: rgba(0,0,0,.6);z-index: 999;transition: .2s;}

    .menu-con .mb-menu{width: 75%;height: 100%;transition: .3s;background: #fff;overflow: auto;position: relative;}
    .menu-con .mb-logo{height: 80px;text-align: center;line-height: 80px}
    .menu-con .mb-logo img{display: inline-block; width: 130px;}

    .menu-con .mb-menu h3{font-size: 20px;color: #000;text-align: center;line-height: 70px;}
    .menu-con .mb-menu li{width: 100%;height: auto;overflow: hidden;}
    .menu-con .mb-menu li>a{display: block;line-height: 54px;padding-left: 30px; color: #000;text-decoration: none;font-size: 16px; border-bottom: 1px solid #e9e9e9; position: relative; z-index: 1; font-weight: bold;}
    .menu-con .mb-menu li>a.active{background: #e9e9e9; color: #d7000f;}
    .menu-con .mb-menu li>a.active:after{content: '';position: absolute; left: 5px; top: 50%; width: 6px; height: 24px; transform: translate(0,-50%); background: #d7000f;}
    .menu-con .mb-menu li>a::before{content: '';position: absolute; left: 50%; top:0; width: 0; height: 100%; transform: translate(-50%,0); background: #d9d9d9; z-index: -1; opacity: 0; transition: all .3s;}
    .menu-con .mb-menu li>a:hover::before{width: 100%; opacity: 1;}
    .menu-con .mb-menu li>a i{float: right; margin-right: 15px;}
    .menu-con .sub-menu{ display: none; width: 100%;}
    .menu-con .sub-menu li>a{display: block;width: 100%;padding-left: 40px;font-size: 14px;background: #f6f6f6; line-height: 48px; color: #666;}
    .menu-con .sub-menu li>a:hover{background: #fff; color: #000;}
    .menu-con .sub-menu li{width: 100%;}

    #close-bt{width: 50px;height: 50px;position: absolute;right:5%;top: 3%;display: none; z-index: 999; text-align: center; line-height: 50px;}
    #close-bt i{font-size: 30px;color: #fff;}
}

@media all and (min-width: 1200px) and (max-width: 1400px){

    .container{width: 1200px; min-width: 1200px;}
    .tec-area .nav{width: 260px;}
    .tec-area .img{width: 840px;}
    .tec-area .img img{width: 100%;}
    .tec-area .nav-link{line-height: 70px; margin-bottom: 33px;}
    .star-light .box .list{height: 320px;}
    .star-light .box img{height: 320px; object-fit: cover;}
    
    .star-light .box .list .con p{margin-bottom: 40px;}
    .star-light .box .list:nth-child(odd){background: #e5f6fe;}
    .star-light .box .list:nth-child(odd) .img{left: 0; top: 0;}
    .star-light .box .list:nth-child(odd) .con{left: 550px; top: 50%; transform: translate(0,-50%);}

    .star-light .box .list:nth-child(even){background: #cceefd;}
    .star-light .box .list:nth-child(even) .img{right: 0; top: 0;}
    .star-light .box .list:nth-child(even) .con{left: 120px; top: 50%; transform: translate(0,-50%);}

    .star-light .box .list:nth-child(1) .con{width: 408px; left: auto; right: 80px;}
    .star-light .box .list:nth-child(2) .con{width: 512px;}
    .star-light .box .list:nth-child(3) .con{width: 582px;}
    .star-light .box .list:nth-child(4) .con{width: 434px;}
    .star-light .box .list:nth-child(5) .con{width: 567px;}
    .star-light .box .list:nth-child(6) .con{width: 534px;}
    .star-light .box .list:nth-child(7) .con{width: 623px;}
    .star-light .box .list:nth-child(8) .con{width: 566px;}

    .star-page .menu li a{font-size: 18px;}
    .star-page .box{padding: 60px;}
    .star-page .stroy{margin-top: 70px;}

    .star-page .box .top .img{left: 60px;}
    .star-page .box .top .textA{right: 140px;}
    .star-page .box .top .textB{right: 200px;}
    .star-page .box .top .textC{right: 200px;}
    .star-page .box .top .textD{right: 180px;}
    .star-page .box .top .textE{right: 200px;}
    .star-page .box .top .textF{right: 200px;}
    .star-page .box .top .textG{right: 180px;}
    .star-page .box .top .textG{right: 100px;}
    .star-page .box .top .textH{right: 140px;}

}