/* ===================contact-overview ===================================== */

.contact-overview-top .unit-title{
    padding-top: 120px;
}


.contact-overview-top .click-insert-block{
    padding: 60px 0 120px;
}

.contact-overview-top .click-insert-block .click-item{
    max-width: 340px;
}

.contact-overview-top .click-insert-block .click-item:not(:nth-of-type(3n)){
    margin-right: 30px;
}

.click-insert-block .content.selected .title, 
.click-insert-block .click-item:hover .content .title{
    color: #fff;
}

.click-insert-block .content .title{
    padding-top: 40px;
}

.contact-overview-top .click-insert-block .clone-item .btn-block:not(.qa-btn-block){
    padding-top: 40px;
}

.contact-overview-top .click-insert-block .img{
    height: 120px;
    object-fit: contain;
    object-position: center;
    text-align: center;
}

.contact-overview-top  .click-icon-title{
    text-align: center;
}

.contact-overview-top  .qa-item + .qa-item{
    padding-top: 40px;
}

.contact-overview-top  .click-insert-block .clone-item .btn-grow{
    width: auto;
    margin-right: 0;
}

.contact-overview-top .txt-answer{
    padding-top: 10px;
}

.contact-overview-top .click-insert-block .clone-item .qa-btn-block{
    padding-top: 20px;
}

.contact-overview-top .click-insert-block .insert-item{
    margin-top: 40px;
}

.contact-overview-top .click-insert-block.has-selected .insert-item~.click-item:nth-of-type(n+4){
    margin-top: 40px;
}

.contact-overview-top .click-insert-block .click-item{
    overflow: visible;
}

.general-block{
    padding: 80px 0 160px;
}

.general-block .list{
    padding-top: 60px;
}


.general-block .content{
    padding: 0 24px 20px 72px;
}

.contact-overview-top .fixed-pattern1{
    max-width: none;
}

.contact-overview-top .fixed-pattern1::before{
    width: 80px;
    height: 80px;
    right: 183px;
    top: 96px;
    left: auto;
    background-image: url('../../images/contact/auo-contact-overview-pattern-1.png');
}

.general-block .fixed-pattern2::before{
    width: 119px;
    height: 106px;
    top: 17px;
    left: -144px;
    background-image: url('../../images/contact/auo-contact-overview-pattern-2.png');

}

.general-block .fixed-pattern3::before{
    width: 560px;
    height: 465px;
    top: 0;
    right: -540px;
    background-image: url('../../images/contact/auo-contact-overview-pattern-3.png');

}

@media screen and (max-width: 1199px) {
    .contact-overview-top .click-insert-block{
        padding: 40px 0 80px;
    }

    .contact-overview-top .unit-title{
        padding-top: 80px;
        text-align: center;
    }

    .contact-overview-top .click-insert-block .click-item{
        max-width: 308px;
    }

    .contact-overview-top .click-insert-block .content{
        display: flex;
        align-items: center;
    }

    .contact-overview-top .click-insert-block .img{
        width: 80px;
        height: 80px;
        margin-right: 24px;
    }

    .click-insert-block .content .title{
        padding-top: 0;
        max-width: 204px;
    }



    .contact-overview-top .click-insert-block .click-item:nth-of-type(2n+1){
        margin-right: 72px;
    }

    .contact-overview-top .click-insert-block .click-item:nth-of-type(2n){
        margin-right: 0;
    }

    .contact-overview-top .click-insert-block .click-item:nth-of-type(n+3){
        margin-top: 30px;
    }
    .click-insert-block.has-selected .insert-item~.click-item:nth-of-type(n+3){
        margin-top: 40px;

    }

    .contact-overview-top .txt-answer{
        padding-top: 8px;
    }

    .click-insert-block .clone-item .tb-qa-contact-block .btn-grow:nth-child(n+3){
        margin-top: 0;
    }

    .tb-qa-contact-block{
        gap: 24px 24px;
    }

    .general-block{
        padding: 60px 0 80px;
    }

    .general-block .content{
        padding: 0 0 20px 16px;
    }
}

@media screen and (max-width: 767px) {
    .contact-overview-top .click-insert-block .click-item:nth-of-type(n){
        margin: 0 auto;
    }

    .contact-overview-top .click-insert-block .img{
        margin-left: 12px;
    }

    .contact-overview-top .click-insert-block .click-item:nth-of-type(n+2),
    .contact-overview-top .click-insert-block.has-selected .insert-item~.click-item:nth-of-type(n+2){
        margin-top: 28px;
    }

    .contact-overview-top #insert-item + .click-item{
        margin-top: 40px;
    }

    .click-insert-block .clone-item .tb-qa-contact-block .btn-grow:nth-child(n){
        margin: 0;
    }

    .click-insert-block .clone-item .tb-qa-contact-block{
        display: flex;
    }

    .general-block .list{
        padding-top: 40px;
    }

    .general-block .content{
        padding: 0 0 20px 16px;

    }
}
/* ===================contact-overview END ===================================== */
/* ===================contact-overview END ===================================== */
/* ===================contact Global Operations ===================================== */
/* ===================contact Global Operations ===================================== */
/* ===================contact Global Operations ===================================== */
.contact-inner-padding{
    padding: 120px 0 160px;
}

.top-corp-block{
    padding-bottom: 120px; 
}

.top-corp-block .content-wrapper{
    display: flex;
    align-items: center;
}

.top-corp-block .left-content{
    width: 480px;
    margin-right: 60px;
}

.top-corp-block .right-img{
    width: calc(100% - 540px);
}

.tel-ad-wrapper{
    padding-top: 40px;
}

.tel-ad-wrapper li a{
   display: flex;
   align-items: center;
}

.tel-ad-wrapper li + li{
    margin-top: 24px;
}

.tel-ad-wrapper li p{
    vertical-align: middle;
    max-width: calc(100% - 48px);
}

.tel-ad-wrapper .icon{

    width: 40px;
    height: 36px;
    margin-right: 8px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.tel-ad-wrapper .phone{
    background-image: url('../../images/contact/auo-contact-phone.svg');
}


.tel-ad-wrapper .location{
    background-image: url('../../images/contact/auo-contact-location.svg');
}

.top-corp-block .btn-block{
    margin-top: 40px;
}

.office-loction-block .full-open-close-wrapper{
    margin-top: 60px;
}

.office-loction-block .full-open-close-wrapper .open-close-item .content{
    padding: 30px 24px 60px 72px;
}

.office-item{
    display: flex;    
}

.office-item + .office-item {
    margin-top: 80px;
}

.office-item .left-img{
    width: 360px;
    margin-right: 40px;
}

.office-item .right-content{
    width: calc(100% - 400px);
}

.office-item .tel-ad-wrapper{
    padding-top: 20px;
}

.office-item .icon{
    /* padding-left: 48px;
    color: var(--gray-1);
    position: relative; */
}

.office-item .icon + .icon{
    margin-top: 20px;
}

/* .office-item .icon::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 40px;
    height: 28px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
} */

.office-item .phone::before{
    /* background-image: url('../../images/contact/auo-contact-phone.svg'); */
}
.office-item .location::before{
    /* background-image: url('../../images/contact/auo-contact-location.svg'); */
}
.tel-ad-wrapper li{
    border: none!important;
}

.office-loction-block .tel-ad-wrapper li + li{
    margin-top: 20px;
}

.office-loction-block  .tel-ad-wrapper .icon{
    height: 28px;
}

.office-loction-block .fixed-pattern1{
    max-width: none;
}

.office-loction-block .fixed-pattern1::before{
    width: 80px;
    height: 80px;
    right: 180px;
    top: -20px;
    background-image: url('../../images/contact/auo-contact-operation-pattern-1.png');
}


.office-loction-block .fixed-pattern2::before{
   width: 746px;
   height: 704px;
   top: -64px;
   left: -836px;
    background-image: url('../../images/contact/auo-contact-operation-pattern-2.png');
}

.office-loction-block .fixed-pattern3::before{
    width: 560px;
    height: 465px;
    top: 312px;
    right: -571px;
     background-image: url('../../images/contact/auo-contact-operation-pattern-3.png');
 }

 .fab-page .fixed-pattern1::before{
    top: 0;
 }

 .fab-page .fixed-pattern2::before{
     /* top: 120px; */
 }

 .fab-page .fixed-pattern3::before{
     /* top: 737px; */
 }


@media screen and (max-width: 1199px) {
    .contact-inner-padding{
        padding: 60px 0 80px;
    }

    .top-corp-block .left-content{
        width: 320px;
        margin-right: 48px;
    }

    .top-corp-block .right-img{
        width: calc(100% - 368px);
    }



    .tel-ad-wrapper{
        padding-top: 24px;
    }

    .tel-ad-wrapper li + li{
        margin-top: 20px;
    }
    
    .top-corp-block .btn-block{
        margin-top: 28px;
    }

    .office-loction-block .full-open-close-wrapper{
        margin-top: 40px;
    }

    .office-loction-block .full-open-close-wrapper .open-close-item .content{
        padding: 0 0 20px 16px;
    }

    .office-item .left-img{
        width: 288px;
    }
    
    .office-item .right-content{
        width: calc(100% - 328px);
    }

    .office-item .tel-ad-wrapper{
        padding-top: 12px;
    }

    .tel-ad-wrapper .icon{
        width: 24px;
        height: 22px;
    }
    
    .office-item + .office-item {
        margin-top: 60px;
    }

    .office-loction-block .fixed-pattern1::before{
        width: 40px;
        height: 40px;
        right: 40px;
        top: -40px;
    }
    
}

@media screen and (max-width: 767px) {
    .top-corp-block .content-wrapper{
        display: block;
    }

    .top-corp-block .right-img,
    .top-corp-block .left-content{
        width: 100%;
        margin-right: 0;
    }

    .top-corp-block .right-img{
        margin-top: 60px;
        text-align: center;
    }

    .office-loction-block .full-open-close-wrapper .open-close-item .content{
        padding: 0 16px 20px 16px;
    }

    .office-item{
        display: block;
    }

    .office-item + .office-item {
        margin-top: 40px;
    }

    
    .office-item .left-img,
    .office-item .right-content{
        width: 100%;
        margin-right: 0;
    }

    .office-item .right-content{
        margin-top: 16px;
    }
/* 
    .full-open-close-wrapper .open-close-item .office-item  .btn-block{
        padding-top: 24px;
    } */
}
/* =======================contact-operations-fabs start====================== */
/* =======================contact-operations-fabs start====================== */
/* =======================contact-operations-fabs start====================== */
.fab-html-wrapper{
    margin-top: 40px;
}
/* =======================contact-operations-fabs end====================== */
/* =======================contact-operations-fabs end====================== */
/* =======================contact-operations-fabs end====================== */