body{background:#f3f3f3}
.max-img{width:100%;}
.banner {
    margin-top: 5.3rem;
}
.intro {
    padding: 0 25%;
    margin-top:10vh
}
.intro-box {
    background: #5c7440;
    color: #fff;
    padding: 2rem 8rem;
    text-transform: uppercase;
    margin-top: -4.5rem;
}
.intro-box-t {
    display: flex;
    justify-content: space-between;
    color: #f7dfc2;
    font-size: 1rem;
    border-bottom: 1px solid;
    padding-bottom: 1rem;
}
.intro-box-c {
    margin: 5rem 0 7rem;
}
.intro-title {
    text-align: center;
    font-size: 2.25rem;
}
.intro-title-en {
    text-align: center;
}
.intro-desc{margin:2rem 10rem}

.medal-item p{font-size:.75rem;margin-top:1rem;text-align:center}
.gd{width:100%}

.history{padding:10rem 20%}
.history-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8rem;
}
.history-title{color:#5c7440}
.history-title-sub{font-size:1.25rem}
.history-title-ch{font-size:2rem;font-weight:bold}
.history-title-en {
    font-size: .75rem;
    text-transform: uppercase;
    margin-top: 2rem;
}
.history-desc{width:55%;}
.history-desc p{margin-bottom:1rem}
.ggn {
    padding: 0 var(--doublesize);
    margin: 10rem 0;
}

.honor{padding:0 15%;text-align:center;}
.swiper-honor{padding-top:8rem;margin-top:5rem}
.swiper-button-next, .swiper-button-prev {
    width: 30px;
    height: 30px;
    border: 1px solid;
    border-radius: 50%;
    top: 2.5rem;
}
.swiper-button-next:after, .swiper-button-prev:after{font-size:15px;}
.swiper-container-horizontal > .swiper-scrollbar {
    left: 7.5%;
    height: 1px;
    width: 85%;
    background: rgba(0,0,0,.2);
    top: 1.75rem;
}
.swiper-scrollbar-drag{height:3px;top:-1px}
.honor-describe {
    color: #5c7440;
    margin-bottom: 2rem;
}
.honor-title-sub{font-size:1.5rem}
.honor-title {
    font-size: 2.25rem;
    font-weight: bold;
}
.honor-content .year{font-size:1.5rem;margin-bottom:1rem}
.honor-pic {
    max-width: 35rem;
    margin-top: 2rem;
}


.transition{text-align:center;position:relative}
.section-title {
    font-size: 1.5rem;
    display: inline-block;
    position: relative;
}
.section-title::after {
    content: "";
    position: absolute;
    bottom: 10%;
    left:50%;
    height: 4px;
    width:0%;
    background: var(--main-color);
    border-radius: 1px;
    transition: width .35s linear;
    transform: translateX(-50%);
    z-index:-1
}
.section-title.fade-in::after {
    width: 110%;
    transition-delay: .5s
}
.from-bottom-show{opacity:0;transform:translateY(50px)}
.section-desc {
    font-size: 3.25rem;
    opacity: 0;
    text-transform: uppercase;
    font-family: 'SourceHanSerifCN-Heavy';
}
.c-cursor-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /*background: hsla(0,0%,100%,.4);*/
    border: 3px solid #fff;
    margin-top: -50px;
    margin-left: -50px;
    -webkit-transform: scale(.8) translateZ(0);
    transform: scale(.8) translateZ(0);
    transition: opacity .3s cubic-bezier(.165,.84,.44,1),transform .3s cubic-bezier(.165,.84,.44,1),-webkit-transform .3s cubic-bezier(.165,.84,.44,1);
    cursor:pointer;
}
.c-cursor-play:after {
        content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 20px 0 20px 30px;
}
.video {
    position: relative;
    margin: 3rem 0 2rem;
}
.medal{display:block;margin:3rem auto 8rem;width:50rem}
.tran_pos {
    position: absolute;
    top: 35%;
    width: 100%;
    color: #ffffff;
}
.history .desc{margin-bottom:1rem;font-size:1rem}
.history .history_item_box{margin-top:5rem}
.item_title {
    padding-bottom: 1rem;
    border-bottom: 1px solid;
    margin-bottom: 0.5rem;
}
.item_title_d {
    color: #5c7440;
    font-size: 2rem;
    font-family: 'SourceHanSerifCN-Heavy';
    position:relative;
    display:inline-block
}
.item_title_t{font-size:2.25rem;font-family: 'SourceHanSerifCN-Heavy';}
.desc-eng {
    color: #5c7440;
    text-transform: uppercase;
    font-size: .75rem;
}
.item_content {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.item_content_txt{flex:1}
.item_content_img{width:40%;margin-left:3rem}
.item_title_d::after {
    content: "";
    position: absolute;
    left: 86%;
    top: 47%;
    background: url(../../Images/brand/about/Year.png)no-repeat center;
    background-size: cover;
    width: 68px;
    height: 40px;
}
.item_content_col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 47%;
}
.item_pic{display:flex;margin-top:3rem;justify-content:space-between;flex-wrap: wrap;}
.item_pic_i{width:32%;}
.strength{padding:10rem 15%;}
.str_content{margin-top:6rem}
.str_content_item{display:flex;margin-bottom:3rem;justify-content:space-between;background:#fff;flex-wrap:wrap}
.str_content_item_pic{width:60%;}
.str_content_item_txt {
    width: 34%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4rem;
}
.str_content_item_t {
    font-weight: bold;
    font-size: 1.75rem;
}
.line {
    width: 4rem;
    height: 2px;
    background: #000;
    margin: 1.5rem 0;
}
.img-fill{width:100%;display:block}
@media screen and (max-width:700px) {
    .intro{padding:0 10%}
    .medal{width:28rem}
     .history{padding:10rem 10%}
    .item_content_img{width:100%;margin-left:0;}
    .item_content_col{width:100%}
    .item_pic_i:first-child{width:100%;margin-bottom:.5rem;}
    .item_pic_i:not(:first-child){width:calc(50% - .25rem)}
    .str_content_item:nth-child(even){flex-direction:column-reverse}
    .str_content_item_pic{width:100%;}
    .str_content_item_txt{width:100%;padding:2rem}
    .honor{padding:0 8%}
    .honor-pic{width:25rem}
    .swiper-container-horizontal > .swiper-scrollbar {
        width: 65%;
        left: 17.5%;
    }
    .strength{padding:10rem 8% 0}
}