/* =======================================
about-companyprofile start
========================================== */
.about-bg-wrapper{
    background-image: url('../../images/about/focaltech-about-top-bg.png');
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 100px 0;
}

.feature-icon-wrapper{
    margin-top: 124px;
}

.feature-icon-list{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

}

li.feature-icon-item{
    /* width: 320px; */
    width: calc((100% - 200px) / 3);
    padding: 76px 24px 40px 24px;
    background-color: #fff;
    box-shadow: 0px 0px 10px #00000029;
    position: relative;
    
}

.feature-icon-item .intro{
    margin-top: 16px;
    min-height: 84px;
}

.feature-icon-item .content{
    min-height: 108px;
}

.feature-icon{
    position: absolute;
    width: 88px;
    height: 88px;
    padding: 20px;
    border-radius: 50%;
    background-color: #FFB70F;
    top: -44px;
    left: 50%;
    transform: translateX(-50%);
}

.feature-icon-item + .feature-icon-item{
    margin-left: 100px;
}

.feature-icon-item:nth-child(n+4){
    margin-top: 84px;
}

.feature-icon-item:nth-child(3n+1){
    margin-left: 0;
}

.company-map-wrapper{
    padding: 100px 0 120px;
}

.company-map-wrapper .map-img{
    margin-top: 40px;
}

.company-map-wrapper  .title{
    text-align: center;
}

.company-map-wrapper .btn-block{
   margin-top: 40px;
   justify-content: center;
}



@media screen and (max-width: 767px) {
    .about-bg-wrapper{
        padding: 60px 0;
    }

    .company-map-wrapper{
        padding: 60px 0;
    }

    .feature-icon-wrapper{
        margin-top: 104px;
        
    }

    li.feature-icon-item{
        width: 300px;
        padding: 76px 20px 40px 20px;
        /* tbc  是否改為最小為3行的高度*/
        /* min-height: 186px; */
    }

    .feature-icon-item + .feature-icon-item{
        margin-left: 0;
        margin-top: 84px;
    }

    
    .feature-icon-item .intro{
        margin-top: 16px;
        min-height: 72px;
    }
    
    .feature-icon-item .content{
        min-height: 90px;
    }

    .feature-icon-list{
        max-width: 300px;
        margin: 0 auto;
        display: block;
        min-height: 196px;

    }

    .company-map-wrapper  .title{
        text-align: left;
    }
    
}
/* =======================================
about-companyprofile end
========================================== */
/* =======================================
about-core-value start
========================================== */
.core-value{
    padding: 100px 0;
    background-image: url('../../images/about/focaltech-about-core-value-bg.png');
    background-position: bottom center;
    background-repeat: no-repeat;
    min-height: 964px;
}

.core-value .feature-icon-wrapper{
    margin-top: 104px;
}

.core-culture{
    padding: 100px 0 120px;
}

.core-culture-img{
    margin-top: 40px;
    text-align: center;
}

@media screen and (max-width: 767px){
    .core-value .feature-icon-wrapper{
        margin-top: 84px;
    }

    .core-value{
        padding: 60px 0;
        background-image: url('../../images/about/focaltech-about-core-value-bg-m.png');

    }

    
    .core-culture{
        padding: 60px 0 80px;
    }
}
/* =======================================
about-core-value end
========================================== */

/* =======================================
about-milestone  start
========================================== */
.year-period-swiper::before{
    content: '';
    width: 100%;
    border-top: 2px solid #BDBDBD;
    display: block;
    position: absolute;
    top: 16px;
    left: 0;
}

.year-period-swiper .swiper-slide{
    display: flex;
    justify-content: center;
}

.year-period-item{
    padding-top: 38px;
    width: auto;
    cursor: pointer;
}

.year-period-item::after{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #747474;
    
    border-radius: 50%;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
}

.year-period-swiper .swiper-slide-thumb-active .year-period-item::after{
    width: 20px;
    height: 20px;
    top: 6px;
    background-color: #FFB70F;
}

.year-period-swiper .year-swiper-btn{
    position: absolute;
    top: 0;
    width: 32px;
    height: 32px;   
	outline: 0 !important;
	cursor: pointer;
    border-radius: 50%;
    background-color: #BDBDBD;
    transition:opacity.3s ease;
}

.year-period-swiper .year-swiper-btn:hover{
    background-color: #FFB70F;

}

.year-period-swiper .year-swiper-btn.pre-btn{
    left: 0;
}

.year-period-swiper .year-swiper-btn.next-btn{
    right: 0;
    background-image: none;
}



.year-period-swiper .year-swiper-btn::before,
.year-period-swiper .year-swiper-btn::after{
    position: absolute;
	content: '';
	display: block;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	background-repeat: no-repeat;
	background-position: center;
	/* background-size: 16px 13px;  */
	margin: -10px;
	z-index: 1;
	transition: opacity 0.3s ease;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
}

.year-period-swiper .year-swiper-btn:hover::before {
	opacity: 0;
}

.year-period-swiper .year-swiper-btn::after {
	opacity: 0;
}

.year-period-swiper .year-swiper-btn:hover::after {
	opacity: 1;
}

.year-period-swiper .year-swiper-btn.pre-btn::before {
	background-image: url('../../images/about/focaltech-year-period-prev-arrow-icon.svg');
}

.year-period-swiper .year-swiper-btn.pre-btn::after {
	background-image: url('../../images/about/focaltech-year-period-prev-arrow-icon-hover.svg');
}

.year-period-swiper .year-swiper-btn.next-btn::before {
	background-image: url('../../images/about/focaltech-year-period-next-arrow-icon.svg');
}

.year-period-swiper .year-swiper-btn.next-btn::after {
	background-image: url('../../images/about/focaltech-year-period-next-arrow-icon-hover.svg');
}
 
.year-period-swiper .year-swiper-btn.swiper-button-disabled{
    display: none;
}


.about-milestone-bg{
    background-image: url('../../images/about/focaltech-about-milestone-bg.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    
}

.milestone-list-swiper .milestone-list-wrapper{
    min-height: 720px;
}


.milestone-list{
    margin-top: 140px;
}

.milestone{
    display: flex;
}

.milestone + .milestone{
    margin-top: 54px;
}

.milestone-year {
    margin-right: 60px;
    width: 100px;
    text-align: center;
}

.milestone-intro-list{
   max-width: 900px;
}

.milestone-intro-list li + li{
    margin-top: 28px;
}

@media screen and (max-width: 767px) {
    .about-milestone-bg{
        background-image: url('../../images/about/focaltech-about-milestone-bg-m.png');

    }

    .milestone-list-swiper .milestone-list-wrapper{
        min-height: 616px;
    }
    

    .milestone-list{
        margin-top: 60px;
    }

    .milestone{
        display: block;
    }

    .milestone-year{
        width: 100%;
        margin-right: 0;
        text-align: left;
    }

    .milestone-intro-list{
        width: 100%;
    }

    .milestone-year + .milestone-intro-list{
        margin-top: 20px;
        
    }

    .milestone + .milestone{
        margin-top: 60px;
    }
}
/* =======================================
about-milestone  end
========================================== */

/* =======================================
 about-leadership start
========================================== */
.about-leadership .bottom-html-wapper{
    margin-top: 100px;
}

.about-leadership  .two-col-close-open{
    margin-top: 100px;
}

.about-close-open-title + .open-close-list{
    margin-top: 40px;
}

.about-leadership .two-col-close-open .open-close-item .content{
    padding: 16px 20px 20px 40px;
}


@media screen and (max-width: 767px) {
    .about-leadership .bottom-html-wapper{
        margin-top: 80px;
    }

    .about-leadership .two-col-close-open{
        margin-top: 80px;
    }

    .about-leadership .two-col-close-open .open-close-item .content{
        padding: 16px 20px 20px 24px;
    }
    
}

/* =======================================
 about-leadership end
========================================== */

/* =======================================
 about-global start
========================================== */
.global-location .title + .global-location-list{
    margin-top: 40px;
}

.global-location-list .info-list{
    margin-top: 16px;
}

.global-location-list .info{
    padding-left: 36px;
    position: relative;
}

.global-location-list .info + .info{
    margin-top: 8px;
}

.global-location-list .info::before{
    content: '';
    width: 28px;
    height: 28px;
    position: absolute;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.global-location-list .yellow-map::before{
    background-image: url('../../images/about/focaltech-about-map.svg');
}

.global-location-list .tel::before{
    background-image: url('../../images/about/focaltech-about-tel.svg');
}

.global-location-list .content{
    max-width: 548px;
}

.global-location-map{
    margin-top: 100px;
}

.global-location-map .title + .img{
    margin-top: 40px;
}


@media screen and (max-width: 767px) {
    .global-location-list .info{
        padding-left: 32px;
    }

    .global-location-list .info::before{
        width: 24px;
        height: 24px;
    }

    .global-location-list .content{
        max-width: 100%;
    }

    .global-location-map{
        margin-top: 80px;
    }
}
/* =======================================
 about-global end
========================================== */

/* =======================================
 about-qaulity start
========================================== */
.icon-list-wrapper{
    margin-top: 60px;
}

.icon-list-item{
    display: flex;
    position: relative;

}

.icon-block{
    width: 88px;
    height: 88px;
    padding: 20px;
    border-radius: 50%;
    background-color: #FFB70F;
    margin-right: 60px;
    position: relative;
    z-index: 2;

}

.icon-list-content{
    max-width: calc(100% - 148px);
}

.icon-list-content .content-title{
    padding-top: 8px;
}

.icon-list-content .content-title + .html-edit{
    margin-top: 28px;
}

.icon-list-item + .icon-list-item{
    margin-top: 90px;
}

.icon-list-item::before{
    content: '';
    position: absolute;
    top: 0;
    left: 43px;
    width: 2px;
    height: calc(100% + 90px);
    background-color: #FFB70F;
    z-index: 1;

}

.icon-list-item:last-child:before{
    display: none;
}

.qaulity-certificate{
    margin-top: 100px;
}

.certificate-list{
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
}

li.certificate-item{
    /* width: 368px; */
    width: calc((100% - 56px) / 3);
    height: 520px;
    box-shadow: 0 0 10px #00000029;
    position: relative;
    margin-right: 28px;
}


.certificate-item:nth-child(3n){
    margin-right: 0;
}

.certificate-item:nth-child(n + 4){
    margin-top: 40px;
}


.certificate-num{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.75);
    opacity: 0;
    padding: 30px 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s ease;
}

.certificate-num::after{
    content: '';
    position: absolute;
    display: block;
    top: 30px;
    left: 30px;
    width: calc(100% - 60px);
    height:calc(100% - 60px);
    border: 4px solid #FFB70F;
    opacity: 0;
    transition: .3s ease;
}

.certificate-item:hover .certificate-num{
    opacity: 1;
}

.certificate-item:hover .certificate-num::after{
    opacity: 1;
}


@media screen and (max-width: 767px) {
    .icon-list-wrapper{
        margin-top: 40px;
    }

    .icon-block{
        width: 60px;
        height: 60px;
        padding: 14px;
        margin-right: 24px;
    
    }

    .icon-list-item::before{
        left: 29px;
        height: calc(100% + 60px);

    }

    .icon-list-content{
        max-width: calc(100% - 84px);
    }

    .icon-list-item + .icon-list-item{
        margin-top: 45px;
    }

    .icon-list-content .content-title{
        padding-top: 15px;
    }

    .icon-list-content .content-title + .html-edit{
        margin-top: 20px;
    }

    .qaulity-certificate{
        margin-top: 80px;
    }
    
    li.certificate-item{
        width: 100%;
        height: auto;
        margin-right: 0;
    }

    .certificate-item + .certificate-item{
        margin-top: 40px;
    }
}
/* =======================================
 about-qaulity end
========================================== */

/* =======================================
 about-datacenter start
========================================== */
.ajax-select-wrapper{
    padding: 18px 20px;
    display: flex ;
    justify-content: center;
    background-color: #747474;
}

.ajax-select{
    min-width: 288px;
}

.ajax-select + .ajax-select{
    margin-left: 20px;
}

.ajax-select-wrapper .btn-block{
    margin-left: auto;
}

.common-btn.border-none{
    border: none;
}

.ajax-select-wrapper .common-btn.border-none:hover{
    background-color: #FDB70F;
    color: #FFFFFF;
}

.common-select.disable::after{
    background-image: url('../../images/common/focaltech-select-icon-disable.svg');
}

.data-download-block{
    margin-top: 40px;
}

.data-download-block .common-download-list{
    margin-top: 28px;
}

#submit-btn.disable, 
.common-select select.disable {
    background-color: #cbd2d6;
    color: #90a4ae;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    .ajax-select-wrapper{
        display: block;
        padding: 20px 16px;
    }

    .ajax-select{
        min-width: 100%;
    }

    .ajax-select + .ajax-select{
        margin-left: 0;
        margin-top: 20px;
    }

    .select-btn{
        margin-top: 20px;
    }

    #submit-btn{
        width: 100%;
        padding: 10px 20px;
    }

    .data-download-block{
        margin-top: 60px;
    }

    .data-download-block .common-download-list{
        margin-top: 22px;
    }
}

/* =======================================
 about-datacenter end
========================================== */