/* global start */
.global {
    padding: 120px 0 140px;
}

.global .list>li {
    padding-bottom: 60px;
    border-bottom: 1px solid #CFD8DC
}

.global .list>li:nth-child(n+2) {
    padding-top: 60px;
}

.global .country {
    font-size: 36px;
    line-height: 55px;
    font-weight: bold;
    color: #005087;
}

.global .info-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 40px;
}

.global .info-list>li {
    width: calc((100% - 40px)/2);
}

.global .info-list>li:nth-child(n+3) {
    padding-top: 40px;
}

.global .info-list>li:nth-child(even) {
    margin-left: 40px;
}

.global .info-list>li a {
    color: #51626C !important
}

.global .city {
    font-size: 24px;
    line-height: 40px;
    color: #64DCF0;
    padding-bottom: 20px;
}

.global .address {
    padding-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.global .address::before {
    position: absolute;
    left: 0;
    content: '';
    display: inline-block;
    width: 10px;
    height: 18px;
    top: 8px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(../../images/common/auodplus-map-icon.svg);
}

.global .phone {
    position: relative;
    padding-left: 20px;
}

.global .phone::before {
    position: absolute;
    content: '';
    display: inline-block;
    width: 14px;
    height: 18px;
    top: 8px;
    margin-right: 6px;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(../../images/common/auodplus-phone-icon.svg);
}

.global .member {
    padding-top: 60px;
}

.global .member .title {
    padding-bottom: 40px;
    font-weight: bold;
    color: #2D3845;
}

.global .member .info {
    padding-bottom: 10px;
    color: #51626C;
}

.global .member a {
    text-decoration: underline;
    color: #64DCF0;
    font-size: 18px;
    line-height: 35px;
}

@media screen and (max-width:767px) {
    .global {
        padding: 80px 0;
    }

    .global .list>li {
        padding-bottom: 40px;
    }

    .global .list>li:nth-child(n+2) {
        padding-top: 40px;
    }

    .global .info-list>li {
        width: 100%;
    }

    .global .info-list>li:nth-child(even) {
        margin-left: 0;
        padding-top: 40px;
    }

    .global .country {
        font-size: 30px;
        line-height: 45px;
    }

    .global .city {
        font-size: 20px;
        line-height: 35px;
    }

    .global .member {
        padding-top: 40px;
    }
}

/* global end */
/* ===================================================
===================================================
=================================================== */

/* contact form */

.contact-form {
    width: 100%;
    height: auto;
}

.contact-form .up {
    padding: 100px 0;
    background-color: #fff;
}

.contact-form .down {
    padding: 115px 0 140px;
    background-color: #ECEFF1;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    padding: 0 10px;
}

.contact-form .input-wrapper {
    margin: 0 auto;
    width: 800px;
}

.contact-form .input-wrapper>div {
    padding: 20px;
}

.contact-form .input-wrapper>div.on-alert {
    background-color: #FCE5E8;
}

.contact-form input.on-alert {
    border: 1px solid #EF0000 !important;
}

.contact-form input.incorrect-format {
    border: 1px solid #EF0000 !important;
}

.contact-form .remind {
    color: red;
}

.contact-form p.question-title,
.contact-form label {
    margin: 0;
    font-size: 20px;
    line-height: 35px;
    color: #2D3845;
}

.contact-form .desc {
    margin-top: 20px;
    color: #51626C;
}

.contact-form .necessary-star {
    color: #DD2C00;
    display: none;
}

.contact-form .necessary .necessary-star {
    display: inline;
}

.contact-form .necessary-alert,
.contact-form .format-alert {
    margin-top: 8px;
    font-size: 20px;
    line-height: 35px;
    color: #EF0000;
    display: none;
}

.contact-form .on-alert .necessary-alert {
    display: block;
}

.contact-form .incorrect-format .format-alert {
    display: block;
}

/* select-wrapper */
.contact-form .select-wrapper label,
.contact-form .select-wrapper select {
    display: block;
}

.contact-form .select-wrapper select {
    margin-top: 20px;
    width: 100%;
    font-size: 20px;
    line-height: 36px;
    color: #51626C;
    border: none;
    border-bottom: 1px solid #CFD8DC;
    background-image: url(../../images/service-contact/auodplus-select-arrow.svg);
    background-size: 20px;
    background-position: calc(100% - 10px) 50%;
    background-repeat: no-repeat;
}

.contact-form .select-wrapper.form-column select {
    line-height: 50px;
}

/* select-wrapper end */

/* others */

.contact-form .others {
    display: none;
}

.contact-form .others input {
    margin-top: 8px;
    width: 100%;
    height: 50px;
    border: 1px solid #CFD8DC;
    border-radius: 3px;
    outline: none;
}

/* others end */

/* radio-wrapper */
.contact-form .radio-wrapper .option-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* The container */
.radio-input-wrapper label {
    display: block;
    position: relative;
    padding-left: 40px;
    cursor: pointer;
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio-input-wrapper label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 0;
    height: 28px;
    width: 28px;
    background-color: #fff;
    border: 1px solid #CFD8DC;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-input-wrapper label:hover input~.checkmark {
    /* background-color: #ccc; */
}

/* When the radio button is checked, add a blue background */
.radio-input-wrapper label input:checked~.checkmark {
    background-color: #64DCF0;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-input-wrapper label input:checked~.checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-input-wrapper label .checkmark:after {
    top: 7px;
    left: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
}

/* radio-wrapper end */

/* checkbox-wrapper */
.contact-form .checkbox-wrapper .option-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.contact-form .checkbox-wrapper input {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

/* The container */
.checkbox-wrapper label {
    display: block;
    position: relative;
    padding-left: 40px;
    cursor: pointer;
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-wrapper label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #fff;
}

/* On mouse-over, add a grey background color */
.checkbox-wrapper label:hover input~.checkmark-checkbox {
    /* background-color: #ccc; */
}

/* When the checkbox is checked, add a blue background */
.checkbox-wrapper label input:checked~.checkmark-checkbox {
    background-color: #64DCF0;
}

/* Create the checkmark-checkbox/indicator (hidden when not checked) */
.checkmark-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark-checkbox when checked */
.checkbox-wrapper label input:checked~.checkmark-checkbox:after {
    display: block;
}

/* Style the checkmark-checkbox/indicator */
.checkbox-wrapper label .checkmark-checkbox:after {
    left: 10px;
    top: 2px;
    width: 10px;
    height: 18px;
    border: solid white;
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* checkbox-wrapper end */

/* personal-info */

.contact-form div.personal-info {
    padding: 0;
    width: 100%;
}

.contact-form div.personal-info.on-alert {
    background-color: transparent;
}

.contact-form .full-input {
    width: 100%;
    padding: 20px;
}

.contact-form .personal-info input {
    margin-top: 8px;
    width: 100%;
    height: 50px;
    border: 1px solid #CFD8DC;
    border-radius: 3px;
    outline: none;
}

.contact-form .name-area {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-form .name-area label {
    display: block;
}

.contact-form .name-area input {
    display: block;
    width: 360px;
}

.contact-form .last-name,
.contact-form .first-name {
    padding: 20px;
    padding-top: 0;
}

/* personal-info end */

/* textarea-wrapper */

.contact-form .textarea-wrapper {
    padding-top: 40px;
}

.contact-form .textarea-wrapper label,
.contact-form .textarea-wrapper textarea {
    display: block;
}

.contact-form .textarea-wrapper textarea {
    margin-top: 8px;
    width: 100%;
    border: 1px solid #CFD8DC;
    border-radius: 3px;
    outline: none;
}

/* textarea-wrapper end */

/* privacy-policy-wrapper */
.contact-form .privacy-policy-wrapper label {
    display: block;
    font-size: 20px;
    line-height: 35px;
}

.contact-form .privacy-checkbox-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.contact-form .privacy-checkbox-wrapper input {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-right: 18px;
}

.contact-form .privacy-policy-desc {
    font-size: 20px;
    line-height: 35px;
    color: #2D3845;
}

.contact-form .privacy-policy-link {
    color: #2D3845;
}

/* The container */
.privacy-policy-wrapper label {
    display: block;
    position: relative;
    padding-left: 48px;
    cursor: pointer;
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.privacy-policy-wrapper label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark-checkbox {
    margin-top: 2px;
    position: absolute;
    top: 0;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #fff;
    border: 1px solid #CFD8DC;
    border-radius: 3px;
}

/* On mouse-over, add a grey background color */
.privacy-policy-wrapper label:hover input~.checkmark-checkbox {
    /* background-color: #ccc; */
}

/* When the checkbox is checked, add a blue background */
.privacy-policy-wrapper label input:checked~.checkmark-checkbox {
    background-color: #64DCF0;
}

/* Create the checkmark-checkbox/indicator (hidden when not checked) */
.checkmark-checkbox:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark-checkbox when checked */
.privacy-policy-wrapper label input:checked~.checkmark-checkbox:after {
    display: block;
}

/* Style the checkmark-checkbox/indicator */
.privacy-policy-wrapper label .checkmark-checkbox:after {
    left: 10px;
    top: 4px;
    width: 10px;
    height: 18px;
    border: solid white;
    border-width: 0 4px 4px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* privacy-policy-wrapper end */

/* verification-code-wrapper */

.contact-form .verification-code-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

.contact-form div.verification-code.on-alert {
    background-color: transparent;
}

.contact-form .verification-code-wrapper .vcode-left {
    margin-right: 15px;
    width: 380px;
}

.contact-form .verification-code-wrapper label {
    display: block;
}

.contact-form .verification-code-wrapper input {
    margin-top: 8px;
    display: block;
    width: 100%;
    height: 50px;
    border: 1px solid #CFD8DC;
    border-radius: 3px;
    outline: none;
}

.contact-form .renew-verification-code-icon {
    margin-left: 15px;
    cursor: pointer;
}

/* verification-code-wrapper end */

/* submit-area */

.contact-form div.submit-area {
    margin-top: 80px;
    padding: 0 20px;
}

.contact-form div.submit-area.contact {
    margin-top: 20px;
    padding: 0 20px;
}

.contact-form .submit-btn .btn-1 span {
    color: #FFB600;
    line-height: 48px;
    font-weight: bold;
}

.contact-form .submit-btn .btn-1:hover span {
    color: #fff;
}

/* submit-area end */

/* confidential-mailbox */

.contact-form .input-wrapper>div.confidential-mailbox {
    margin-top: 80px;
    padding: 0 20px;
}

.confidential-mailbox p {
    margin-top: 20px;
    font-size: 20px;
    line-height: 35px;
    color: #51626C;
}

/* confidential-mailbox end */

@media (max-width: 767px) {
    .contact-form .input-wrapper {
        width: 100%;
    }

    .contact-form .up {
        padding-top: 80px;
        padding-bottom: 60px;
    }

    .contact-form .down {
        padding: 55px 0 80px;
    }

    .contact-form .name-area {
        display: block;
        padding: 0 20px;
    }

    .contact-form .name-area input {
        width: 100%;
    }

    .contact-form .last-name,
    .contact-form .first-name {
        width: 100%;
        padding: 20px 0;
    }

    .contact-form .last-name {
        padding-top: 0;
    }

    .contact-form .verification-code-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-form .verification-code-wrapper .vcode-left {
        margin-right: 0;
        width: 100%;
        max-width: 380px;
    }

    .contact-form .vcode-right {
        margin-top: 20px;
    }

    .contact-form div.submit-area {
        margin-top: 60px;
        padding-top: 0;
    }
}


/* contact form end */
/* service_news & event start */
.news_list {
    min-height: 340px;
    background-color: #F0F3F5;
}

.news_list .news_event {
    background-color: #F0F3F5;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-top: -340px;
}

.news_list .news {
    width: calc((100% - 40px)/2);
    background-color: #fff;
    cursor: pointer;
}

.news_list .news:nth-child(n+2) {
    margin-top: 40px;
}

.news_list .news_event>.news:nth-child(3n+2) {
    margin-right: 40px;
}


.news_list .img_news {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}



.news_list .news a {
    display: block;
    width: 100%;
    height: 100%;

}

.news_list .news a:hover .right_block h4 {
    color: #64DCF0;
}

.news_list .img_news a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

.news_list .img_news .left_block {
    width: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* padding-top: 32.12%; */
    height: 574px;
}

.news_list .news .right_block {
    height: 560px;
    pointer-events: none;
}

.news_list .img_news .right_block {
    width: 50%;
    height: 574px;
}

.news_list .news .right_block {
    padding: 60px;
}

.news_list .news .right_block .category {
    color: #FFB600;
    font-size: 36px;
    line-height: 55px;
    margin-bottom: 100px;
    position: relative;
}

.news_list .img_news .right_block .category {

    margin-bottom: 110px;
}


.news_list .img_news .right_block .category::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: -85px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-right: 25px solid #fff;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
}

.news_list .news .right_block .time {
    color: #51626C;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 20px;

}

.news_list .news .right_block h4 {
    font-size: 24px;
    line-height: 40px;
    margin-bottom: 20px;
    color: #2D3845;
    overflow: hidden;
    max-height: 81px;
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.2s ease-out;

}

.news_list .news .right_block p {
    font-size: 16px;
    line-height: 28px;
    max-height: 168px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    color: #51626C;
}

/* ?�碼 */
.page_number {
    text-align: center;
    position: relative;
    width: 120px;
    margin: 0 auto;
    margin-top: 80px;
    padding-bottom: 140px;
}


.page_number .number {
    display: flex;
    justify-content: space-around;
    text-align: center;
    font-size: 18px;
    line-height: 34px;
    color: #2D3845;
}




.page_number .number div a {

    color: #2D3845;
}

.page_number .number .this_page a {

    color: #808891;
}

.left_arrow {
    top: 6%;
    left: -85px;
    width: 60px;
    outline: none;
    margin-top: 0;
}

.left_arrow::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 60px;
    height: 20px;
    background-image: url(../../images/service/contact/auodplus-left-normal.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.4s;
}

.left_arrow.disable {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}

.left_arrow::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 60px;
    height: 20px;
    opacity: 0;
    background-image: url(../../images/service/contact/auodplus-left-hover.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.4s;
}

.left_arrow:hover::before {
    opacity: 0;
}

.left_arrow:hover::after {
    opacity: 1;
}



.right_arrow {
    top: 6%;
    right: -85px;
    width: 60px;
    outline: none;
    margin-top: 0;
}

.right_arrow.disable {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}

.right_arrow::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 60px;
    height: 20px;
    opacity: 0;
    background-image: url(../../images/service/contact/auodplus-right-hover.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.4s;
}

.right_arrow::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 60px;
    height: 20px;
    background-image: url(../../images/service/contact/auodplus-right-normal.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.4s;
}

.right_arrow:hover::after {
    opacity: 1;
}

.right_arrow:hover::before {
    opacity: 0;
}



@media (max-width: 767px) {
    .news_list .news_event {
        margin-top: 0px;
        padding-top: 60px;
        position: static;
    }

    .news_list .img_news .left_block {
        width: 100%;
        padding-top: 98.97%;
        height: auto;
    }

    .news_list .img_news .right_block {
        width: 100%;
        padding: 40px 20px;
        height: auto;
    }

    .news_list .news .right_block {
        height: auto;
        padding: 40px 20px;
    }

    .news_list .news {
        width: 100%;
    }

    .news_list .news_event>.news:nth-child(3n+2) {
        margin-right: 0;
    }



    .news_list .news:nth-child(n+2) {
        margin-top: 20px;
    }


    .news_list .news .right_block .category {
        font-size: 24px;
        line-height: 40px;
        margin-bottom: 60px;
        display: inline-block;
    }

    .news_list .img_news .right_block .category::before {
        border-bottom: 25px solid #fff;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: none;
        left: 50%;
        transform: translateX(-50%);
        top: -65px;
    }

    .news_list .news .right_block h4 {
        display: block;
        max-height: none;
    }

    .news_list .news .right_block p {
        display: block;
        max-height: none;
        color: #808891;
    }


    /* ?�馬 */
    .page_number {
        margin-top: 60px;
        padding-bottom: 80px;
    }

    .page_number .number div.margin {
        margin: 0 20px;
    }

    .right_arrow,
    .left_arrow {
        top: 8%;
    }

    .right_arrow {
        right: -100px;
    }

    .left_arrow {
        left: -100px;
    }
}

/* service_news & event end */

/* service_news & event content start */
.addthis_block {
    padding: 80px 0px 68px 0px;
    background-color: #3C4F65;
}

.addthis_block .banner_title {
    color: #FFFFFF;
    font-size: 50px;
    line-height: 75px;
    font-weight: bold;
}

.addthis_block .bread_crumb span {
    color: #fff;
}

.addthis_block .bread_crumb a {
    color: #fff;
    text-decoration: none;
    outline: none !important;
    transition: 0.2s ease-out;
}

.addthis_block .bread_crumb a:hover {
    color: #FFB600;

}

.addthis_block .date {
    color: #FFFFFF;
    font-size: 20px;
    line-height: 34px;
    padding-bottom: 41px;
}

.addthis_block .blue_line {
    width: 100%;
    height: 1px;
    background-color: #78899F;
    margin: 30px 0 30px;
}

.addthis_block .flex_content {
    display: flex;
    justify-content: space-between;
}

.addthis_block .flex_content .event {
    font-size: 18px;
    line-height: 35px;
    color: #fff;
}

.addthis_block .flex_content .add_this {
    display: flex;
    justify-content: flex-end;
    width: 50%;
}

.addthis_block .flex_content .add_this div:nth-of-type(n+2) {
    margin-left: 20px;
}

.addthis_block .flex_content .add_this div a {
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.news_info {
    padding: 120px 0 140px;
}

.news_info .btn_block {
    text-align: center;
    margin-top: 100px;
}

.news_info .btn_block .btn-1 span {
    color: #FFB600;
    transform: translate(0);
}

.news_info .btn_block .btn-1:hover span {
    transform: translate(0);
    color: #fff;

}

.news_info .btn_block .btn-1 span::after {
    display: none;
}


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


    .addthis_block {
        padding: 60px 0px 60px 0px;
    }

    .addthis_block .blue_line {
        margin: 20px 0;
    }

    .addthis_block .date {
        padding-bottom: 10px;
        font-size: 16px;
        line-height: 24px;
    }

    .addthis_block .bread_crumb {
        display: none;
    }

    .addthis_block .banner_title {
        font-size: 24px;
        line-height: 40px;
    }



    .addthis_block .flex_content .add_this {
        width: auto;
    }

    .addthis_block .flex_content {
        justify-content: flex-end;
    }

    .news_info {
        padding: 80px 0;
    }

    .news_info .btn_block {

        margin-top: 60px;
    }
}

/* service_news & event content end */