/* ir overview */
.left-right-open-close{
    padding: 120px 0;
}

.left-right-open-close > .container{
    display: flex;
}

.left-right-open-close .left-img{
    width: 520px;
    margin-right: 40px;
}

.left-right-open-close .left-img img{
    object-fit: contain;
    object-position: top;
}

.left-right-open-close .right-block{
    width: calc(100% - 560px);
}

.left-right-open-close h1 + p{
    padding-top: 16px;
}

.left-right-open-close .right-open-close-wrapper{
    margin-top: 28px;
}

.left-right-open-close .right-open-close-wrapper .open-close-item .content{
    padding: 0 24px 16px 72px;
}

.auo-financials{
    padding: 120px 0 152px;
    background-color: var(--gray-5);
}

.summary{
    display: flex;
    position: relative;
}

.summary .left-block{
    width: 420px;
    margin-right: 160px;
}

.summary .left-block h1{
    padding-top: 12px;
}

.summary .right-number{
    width: calc(100% - 580px);
}

.summary .number-info-block + .number-info-block{
    margin-top: 28px;
}

.summary .number{
    font-size: 60px;
    line-height: 68px;
}

.summary .number + p{
    padding-top: 20px;
}

.summary .btn-block{
    margin-top: 36px;
}

.sales-revenue{
    padding-top: 136px;
}

.chart-scroll-block{

    margin-top: 40px;
    width: 100%;
   
}

.chart-canvas-block{
    margin: 0 auto;
    height: 498px;
    width: 1056px;
    /* width: 1080px; */
    /* height: 513px;
    background-color: var(--innovative-purple); */
}

.ir-events{
    padding: 120px 0;
    background-color: var(--auo-blue);
}

.ir-events .html-content-wrapper{
    padding-top: 20px;
}

.ir-sub-unit-wrapper{
    display: flex;
    flex-wrap: wrap;
    margin-top: 80px;
}

.ir-sub-unit{
    display: block;
    width: 340px;
    margin-right: 30px;
}

.ir-sub-unit .unit-img {
    height: 255px;
}

.ir-sub-unit h2{
    padding-top: 20px;
}

.ir-sub-unit:nth-child(3n){
    margin-right: 0;
}

.ir-sub-unit:nth-child(n+4){
    margin-top: 80px;
}

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

.left-right-open-close .fixed-pattern1,
.auo-financials .fixed-pattern2,
.ir-events .fixed-pattern3{
    max-width: none;
    
}

.left-right-open-close .fixed-pattern1::before{
    width: 80px;
    height: 80px;
    background-image: url('../../images/career/auo-career-pattern-2.png');
    top: 524px;
    left: 258px;
}

.auo-financials .fixed-pattern2::before{
    width: 300px;
    height: 332px;
    background-image: url('../../images/ir/auo-ir-overview-pattern-1.png');
    top: -214px;
    right: 0px;
}

.ir-events .fixed-pattern3::before{
    width: 500px;
    height: 324px;
    right: 195px;
    top: -120px;
    background-image: url('../../images/ir/auo-ir-overview-pattern-2.png');
}

.ir-events .fixed-pattern4::before{
    width: 109px;
    height: 113px;
    left: -120px;
    bottom: 195px;
    background-image: url('../../images/ir/auo-ir-overview-pattern-3.png');
}

@media screen and (max-width: 1199px) {
    .left-right-open-close{
        padding: 80px 0 160px;
    }

    .left-right-open-close .left-img{
        width: 280px;
        margin-right: 48px;
    }

    .left-right-open-close .right-block{
        width: calc(100% - 328px);
    }

    .left-right-open-close .right-open-close-wrapper .open-close-item .content{
        padding: 0 16px 20px 16px;
    }

    .left-right-open-close .right-open-close-wrapper{
        margin-top: 40px;
    }

    .auo-financials{
        padding: 120px 0 80px;
    }

    .summary .left-block{
        width: 320px;
        margin-right: 48px;
    }


    .summary .right-number{
        width: calc(100% - 368px);
    }

    .summary .number{
        font-size: 40px;
        line-height: 56px;
    }

    .summary .number + p{
        padding-top: 0;
    }

    .summary .number-info-block + .number-info-block{
        margin-top: 40px;
    }

    .summary .left-block h1{
        padding-top: 0;
    }

    .summary .btn-block{
        margin-top: 20px;
    }

    .sales-revenue{
        padding-top: 80px;
    }

        .chart-scroll-block {
    
            margin-top: 40px;
            width: 100%;
            overflow-x: scroll;
    
        }
    
        .chart-canvas-block {
            width: 917px;
            height: 392px;
            /* height: 513px;
        background-color: var(--innovative-purple); */
        }


    .ir-events{
        padding: 80px 0;
    }

    .ir-events .html-content-wrapper{
        padding-top: 10px;
    }

    .ir-events .btn-block{
        margin-top: 28px;
    }

    .ir-sub-unit h2{
        padding-top: 16px;
    }

    .ir-sub-unit{
        width: 320px;
        margin-right: 48px;
    }

    .ir-sub-unit .unit-img {
        height: 240px;
    }

    .ir-sub-unit:nth-child(3n){
        margin-right: 48px;
    }

    
    .ir-sub-unit:nth-child(2n){
        margin-right: 0px;
    }

    .ir-sub-unit:nth-child(n+4){
        margin-top: 0;
    }
    
    .ir-sub-unit:nth-child(n+3){
        margin-top: 40px;
    }

    
    .left-right-open-close .fixed-pattern1::before{
        width: 56px;
        height: 56px;
        top: 282px;
        left: 109px;
    }
    .auo-financials .fixed-pattern2{
        text-align: right;
    }

    .auo-financials .fixed-pattern2::before{
        width: 208px;
        height: 182px;
        background-image: url('../../images/ir/auo-ir-overview-pattern-1-tb.png');
        top: -232px;
        right: 0px;
    }
    
    .ir-events .fixed-pattern3::before{
        width: 215px;
        height: 124px;
        right: 40px;
        top: -80px;
    }


}

@media screen and (max-width: 767px) {
    

    .left-right-open-close{
        padding: 80px 0;
    }

    .left-right-open-close > .container{
        display: block;
    }

    .left-right-open-close .left-img{
        width: 100%;
        margin-right:0;
        text-align: center;
    }

    .left-right-open-close .left-img img{
        object-fit: cover;
        object-position:center;
    }

    .left-right-open-close .right-block{
        width: 100%;
        margin-top: 60px;
    }

    .left-right-open-close h1 + p{
        padding-top: 20px;
    }

    .left-right-open-close p + .open-close-list{
        margin-top: 40px;
    }

    .auo-financials{
        padding: 80px 0;
    }

    .summary{
        display: block;
    }

    .summary .right-number,
    .summary .left-block{
        width: 100%;
    }

    .summary .left-block .btn-block{
        margin-top: 28px;
    }

    .summary .right-number{
        margin-top: 40px;
    }



    .ir-events{
        padding:200px 0 80px;
    }

    .ir-sub-unit-wrapper{
        display: block;
    }

    .ir-sub-unit {
        /* tbc */
        width: 320px;
        margin-right: auto!important;
        margin-left: auto;
    }

    .ir-sub-unit +  .ir-sub-unit{
        margin-top: 40px;
    }

    .ir-sub-unit .unit-img {
        /* height: auto; */
        /* width: 320px;
        margin-left: auto;
        margin-right: auto; */
    }

    .auo-financials .fixed-pattern2::before{
        right: -53px;
        top: -116px;
    }

    .ir-events .fixed-pattern3::before{
        top: -200px;
        right: 20px;
    }
}
/* governance */
.governance{
    padding: 120px 0;
}

.governance .select-block + .block-title{
    margin-top: 40px;
}

.governance .common-select{
    width: 360px;
}


.right-block .bottom-open-close-list .open-close-item .content{
    padding: 0px 24px 20px 72px;
}

.financial-sort-block{
    background-color: var(--gray-5);
    padding: 40px;
}

.financial-sort-block .select-block-group{
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
}

.financial-sort-block .select-block{
    display: block;
    width: 480px;
}

.financial-sort-block .common-select select{
    background-color: #fff;
    padding: 14px 60px 14px 24px;;
}

.financial-sort-block .common-select + .common-select{
    margin-top: 28px;
}

.financial-sort-block .btn-block{
    align-self: flex-end;
    margin-left: auto;
}

.ir-download-type{
    margin-top: 60px;
}


.ir-download-type  li:nth-child(even){
    background-color: var(--gray-6);
}

.ir-download-type  li:nth-child(odd){
    background-color: #fff;
}

ul.ir-download-type > li:first-child{
    padding: 16px 20px;
    background-color: var(--energetic-yellow);
}

.ir-download-type > li a{
    display: block;
    padding: 16px 76px 16px 20px;
    position: relative;
}

.ir-download-type > li:hover a{
    color: var(--gray-1);
}

.ir-download-type > li a::before,
.ir-download-type > li a::after{
    
    content: '';
    position: absolute;
    display: block;
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    transition: opacity .4s;
}

.ir-download-type > li a::before{
    opacity: 1;
    background-image: url('../../images/common/auo-download-icon.svg');
}
.ir-download-type > li a.blank::before{
    opacity: 1;
    background-image: url('../../images/common/auo-downloadcenter-blank.svg');
}
.ir-download-type > li a::after{
    opacity: 0;
    background-image: url('../../images/common/auo-download-icon-hover.svg');
}
.ir-download-type > li a.blank::after{
    opacity: 0;
    background-image: url('../../images/common/auo-downloadcenter-blank-hover.svg');
}



.ir-download-type > li:hover a::before{
    opacity: 0;
}

.ir-download-type > li:hover a::after{
    opacity: 1;
}

.subsidiaries-wrapper .click-insert-card-block>ul{
    /* gap: 36px 28px; */
}

.subsidiaries-wrapper  .click-insert-card-block .insert-item{
    padding: 40px 0 4px 0;
}

.subsidiaries-wrapper .click-insert-card-block .click-card{
    width: 214px;
    padding: 28px 20px 20px;
    margin-right: 28px;
}

.subsidiaries-wrapper .click-insert-card-block .click-card:nth-of-type(3n){
    margin-right: 0;
}

.subsidiaries-wrapper .click-insert-card-block .click-card:nth-of-type(n+3){
    margin-top: 0;
}

.subsidiaries-wrapper .click-insert-card-block .click-card:nth-of-type(n+4){
    margin-top: 36px;
}


.subsidiaries-wrapper .click-card .name{
    padding-top: 0;
    padding-bottom: 20px;
}

.subsidiaries-wrapper .click-insert-card-block .content{
    min-height: 78px;
}






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

    .tb-not-banner-select{
        padding: 80px 0 80px;
    }

    .governance .common-select{
        width: 320px;
    }

    .right-block .bottom-open-close-list .open-close-item .content{
        padding: 0 16px 16px 16px;
    }

    .financial-sort-block {
        margin-left: calc(-1 * (100vw - 688px)/2);
        margin-right: calc(-1 * (100vw - 688px)/2);
    }

    .financial-sort-block .select-block-group{
        padding-top: 24px;
    }

    .ir-download-type{
        margin-top: 40px;
    }

    .financial-sort-inner{
        max-width: 688px;
        margin: 0 auto;
    }

    .financial-sort-block .select-block-group{
        display: block;
    }

    .financial-sort-block .select-block{
        width: 100%;
    }

    .financial-sort-block .select-block + .btn-block{
        margin-top: 40px;
    }

    .financial-sort-block .common-select + .common-select{
        margin-top: 20px;
    }

    .ir-download-type > li a{
        padding: 16px 54px 16px 20px;

    }

    .ir-download-type>li a::before,
    .ir-download-type>li a::after {
        width: 24px;
        height: 24px;
        right: 16px;
    }

    .subsidiaries-wrapper .click-insert-card-block .click-card{
        width: 320px;
    }

    .subsidiaries-wrapper .click-insert-card-block .click-card:nth-of-type(2n){
        margin-right: 0;
    }

    .subsidiaries-wrapper .click-insert-card-block .content{
        min-height: 76px;
    }

    .subsidiaries-wrapper .click-insert-card-block>ul{
        /* gap: 20px 48px; */
    }

    .subsidiaries-wrapper .click-insert-card-block .click-card:nth-of-type(n+4){
        margin-top: 0;
    }

    .subsidiaries-wrapper .click-insert-card-block .click-card:nth-of-type(n+3){
        margin-top: 20px;
        /* margin-right: 48px; */

    }

    .subsidiaries-wrapper .click-insert-card-block .click-card:nth-of-type(odd){
        margin-right: 48px;
    }

    .subsidiaries-wrapper .click-insert-card-block .insert-item{
        padding: 40px 0 20px;
    }

}

@media screen and (max-width: 767px) {
    .governance .select-block + .block-title{
        margin-top: 60px;
    }

    .governance .common-select{
        width: 100%;
    }

    .financial-sort-block{
        margin-right: -20px;
        margin-left: -20px;
        padding: 40px 20px;
        margin-top: 28px;
    }

    .subsidiaries-wrapper .click-insert-card-block .insert-item{
        padding: 40px 0 20px 0;
    }

    .subsidiaries-wrapper .click-insert-card-block .click-card:nth-of-type(odd),.subsidiaries-wrapper .click-insert-card-block .click-card:nth-of-type(2n){
        margin-right: auto;
    }

}