
    
.button-pipaluk {
    width: 140px;
    display: block;
    margin: 74px auto 0;
    padding: 0 20px;
    border: none;
    background: none;
    color: inherit;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #fff;
    font-size:16px;
    height:50px;
    line-height:50px;
}
.button-pipaluk:focus {outline: none;}
.button-pipaluk::before,.button-pipaluk::after {
    content: '';
    border-radius: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transition: -webkit-transform 1s, background-color 1s;
    transition: transform 1s, background-color 1s;
    -webkit-transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
}
.button-pipaluk::before {border: 2px solid #c30d23;}
.button-pipaluk::after {background: #c30d23;}
.button-pipaluk:hover{ font-size: larger;}
.button-pipaluk:hover::before {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
.button-pipaluk::before,.button-pipaluk:hover::after {-webkit-transform: scale3d(0.8, 0.8, 1);transform: scale3d(0.8, 0.8, 1);}
.button-pipaluk:hover::after {background-color: #c30d23;}
.button-pipaluk.button-invited{ position: absolute; right: 0; bottom: 0;}
.button-pipaluk.button-moren{ width:80%; background: none;}
.button-pipaluk.button-moren::after{border: #fff 1px solid;}
.button-pipaluk.button-moren::after {background: none;}

.in-about dt{ width:43%; margin:0 0 0 2%; float:left;}
.in-about dd{ float:right; width:50%;}
.in-about dd .textwrap:before{ content:''; width:200px; height:2px; background: #c30d23; display: block;}
.in-about dd .textwrap ul{ overflow: hidden; margin:44px 0;}
.in-about dd .textwrap ul li{ float:left; width:33.3%; padding-right:4%;}
.in-about dd .textwrap ul li .imgauto{ height:36px;}
.in-about dd .textwrap ul li .imgauto img{margin:0 !important;}
.in-about dd .textwrap ul li .num{ font-size:14px; color:#333333; margin-top:10px;}
.in-about dd .textwrap .text h1{ font-size:24px; color:#333333; margin-bottom: 20px;}
.in-about dd .textwrap .text p{ font-size:14px; color:#333333}

.in-brand{}
.in-brand .section-title h1{ margin-bottom:0;}
.brandBox {width: 32%;float: left;}
.brandBox ul li {position: relative;padding: 32px 42px 32px 0px;transition: all 1s;-webkit-transition: all 1s;border-bottom: 1px solid rgb(219, 219, 219);}
.brandBox ul li::after{content:'';width:0; height:100%; position: absolute;right:0; top: 0; background: #fff;transition: all 1s;-webkit-transition: all 1s;}
.brandBox ul li em {font-size: 36px;color: rgb(51, 51, 51);font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;width: 54px;position: absolute;left: 0px;z-index: 2;transition: all 1s;-webkit-transition: all 1s;}
.brandBox ul li .text {width: 100%;z-index: 2;left: 0px;position: relative;padding: 10px 0px 0px 54px;transition: all 1s;-webkit-transition: all 1s;}
.brandBox ul li .text h1 {font-size: 24px;color: rgb(51, 51, 51);margin-bottom: 10px;}
.brandBox ul li .text p {font-size: 14px;color: rgb(51, 51, 51);}
.brandBox ul li.active{border-bottom: 0;}
.brandBox ul li.active:after{width:500%;}
.brandBox ul li.active em{color:#c30d23; left:10px;}
.brandBox ul li.active .text{left:10px;}
.brandBox2 {width: 63.2%;float: right;}
.brandBox2 ul li {float: left;width: 23%;margin-right: 2.6%;position: relative;}
.brandBox2 ul li:last-child{margin-right: 0;}
.brandBox2 ul li .box-content {width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;opacity: 0;background: url(../images/p6.png) center center / cover no-repeat;padding: 0px;}
.brandBox2 ul li .box-content .text {position: absolute;width: 100%;top: 50%;transform: translate(0px, -50%);left: 0px;text-align: center;color: rgb(255, 255, 255);}
.brandBox2 ul li .box-content em {font-size: 30px;font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;margin-bottom: 6px;}
.brandBox2 ul li .box-content h1 {font-size: 24px;}
.brandBox2 ul li.active .box-content{animation-name: loading;animation-duration: 1200ms;animation-iteration-count: 1;animation-timing-function: linear;opacity: 1;}
@keyframes loading{
    0%{
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40%{
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    60%{
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }
    80%{
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    100%{
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}


.in-news {float: left;width: 40%;padding-right: 9%;padding-top: 6%;}
.in-news .section-title {text-align: right;}
.in-news .ctr {margin-top: 20%;overflow: hidden;}
.in-news .ctr div {
    width: 60px;
    height: 60px;
    cursor: pointer;
    resize: none;
    background-color: rgb(195, 13, 35);
    opacity: 0.5;
    float: right;
    margin-right: 30px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: none;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 1s;
    -webkit-transition: all 1s;
}
.in-news .ctr div:first-child {
    margin-right: 0px;
}
.in-news .ctr div.swiper-next {
    background-image: url(../images/turn.png);
}
.in-news .ctr div.swiper-prev {
    background-image: url(../images/turn.png);
    transform: rotate(180deg);
}
.in-news .ctr div:hover{opacity:1;}
.newswrap { float: right;width: 59.8%;height: 480px;}
.newswrap .swiper-slide {position: relative;height: auto;}
.newswrap .swiper-slide::after {content: "";width: 0px;position: absolute;top: 0px;left: 0px;height: 100%;background: rgb(255, 255, 255);transition: all 1s ease 0s;}
.newswrap .swiper-slide .text {max-width: 750px;font-size: 0px;position: relative;z-index: 2;border-bottom: 1px solid rgb(213, 213, 213);padding: 5% 0px 4%;transition: all 1s ease 0s;}
.newswrap .swiper-slide .time {width: 16%;text-align: center;line-height: 1;}
.newswrap .swiper-slide .time em {display: block;font-size: 54px;color: rgb(64, 55, 55);font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;margin-bottom: 10px;transition: all 1s ease 0s;}
.newswrap .swiper-slide .time span {display: block;font-size: 18px;color: rgb(51, 51, 51);font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;}
.newswrap .swiper-slide .info {width: 84%;padding: 0px 4%;}
.newswrap .swiper-slide .info h1 {font-size: 18px;color: rgb(51, 51, 51);line-height: 1.2;margin-bottom: 10px;transition: all 1s;-webkit-transition: all 1s;}
.newswrap .swiper-slide .info p {font-size: 16px;color: rgb(153, 153, 153);line-height: 1.4;}
.newswrap .swiper-slide .time, .newswrap .swiper-slide .info {display: -moz-inline-stack;display: inline-block;vertical-align: middle;*vertical-align: auto;zoom: 1;*display: inline;}
.newswrap .swiper-slide.on:after{ width:100%;}
.newswrap .swiper-slide.on .time em{color:#c30d23;}
.newswrap .swiper-slide.on .info h1{color:#c30d23; font-weight:bold;}
@media screen and (max-width: 1600px) {
    
}

@media screen and (max-width: 1400px) {
    .newswrap .swiper-slide .text{ max-width:auto; width: 100%;}
}

@media screen and (max-width: 1023px) {
 
    .button-pipaluk {
        width: 112px;
        margin: 50px auto 0;
        padding: 0 20px;
        font-size:14px;
        height:40px;
        line-height:40px;
    }
    .button-pipaluk:hover{ font-size:14px;}

    .in-about dt{ float:none; margin:30px auto 0 auto; width:80%; }
    .in-about dd{float:none; width:100%;}
    .in-about dd .textwrap:before{ width:160px; height:2px;}
    .in-about dd .textwrap ul{ margin:30px 0;}
    .in-about dd .textwrap ul li .imgauto{ height:36px;}
    .in-about dd .textwrap ul li .num{ font-size:14px; margin-top:10px;}
    .in-about dd .textwrap .text h1{ font-size:22px; margin-bottom: 16px;}
    .in-about dd .textwrap .text p{ font-size:14px;}

    
    .brandBox {display:none;}
    .brandBox ul li {padding: 26px 34px 26px 0px;}
    .brandBox ul li em {font-size: 28px;width: 44px;}
    .brandBox ul li .text {padding: 4px 0px 0px 44px;}
    .brandBox ul li .text h1 {font-size: 20px;margin-bottom: 6px;}
    .brandBox ul li .text p {font-size: 14px;}
    .brandBox2{float:none; width:100%;}
    .brandBox2 ul li .box-content em {font-size: 30px;font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;margin-bottom: 6px;}
    .brandBox2 ul li .box-content h1 {font-size: 20px;}

    

    .in-news {float: none;width: 100%; padding:0 15px;}
    .in-news .section-title {text-align: left;}
    .in-news .ctr {margin-top: 10px;overflow: hidden;}
    .in-news .ctr div {float: left;}
    .in-news .ctr div:first-child {margin-right: 10px;}
    .in-news .ctr div {width: 40px;height: 40px;background-size: 30% auto;margin-right: 10px;}
    .newswrap { float: none;width: 100%;padding:0 15px; margin-top:30px;height: 400px;}
    .newswrap .swiper-slide .text {max-width: auto;}
    .newswrap .swiper-slide .time {width: 16%;text-align: center;line-height: 1;}
    .newswrap .swiper-slide .time em {font-size: 43px;margin-bottom: 10px;}
    .newswrap .swiper-slide .time span {font-size: 16px;}
    .newswrap .swiper-slide .info {width: 84%;padding: 0px 4%;}
    .newswrap .swiper-slide .info h1 {font-size: 18px;margin-bottom: 10px;}
    .newswrap .swiper-slide .info p {font-size: 14px;}
}

@media screen and (max-width: 767px) {
    .homeBanner .ctr div{ width: 30px; height: 30px; margin-top:-15px;background-size: 6px auto;}
    .button-pipaluk {
        margin: 40px auto 0;
    }

    /* .in-about dt{ display:none;} */
    .in-about dd{float:none; width:100%;}

    .in-about dd .textwrap ul{ margin:24px 0;}

    .in-about dt{ width:100%; }
    
    .brandBox2 {width: 100%;float: none; margin-top:30px;}
    .brandBox2 ul li {float: left;width: 50%;margin-right: 0; position: relative; overflow: hidden; padding-bottom:60%;}
    .brandBox2 ul li:last-child{margin-right: 0;}
    .brandBox2 ul li img{ width:100%; position: absolute; left: 0; top:50%; transform: translate(0,-50%);-webkit-transform: translate(0,-50%)}
    .brandBox2 ul li .box-content {opacity: 1; background: rgba(195,13,35,0.6);}
    
}


