/* tablet vertical */
@media screen and (min-width: 961px) and (max-width: 1180px){
    .hide-on-pc{
        display: none;
    }
    .container{
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .one-container .site-content{
        padding: 0 !important;
    }
    .mobile-show{
        display: none;
    }
    .font-16px {
        font-size: 13px;
    }
    .font-20px{
        font-size: 15px;
    }
    .font-24px{
        font-size: 22px;
    }
    .font-24pc{
        font-size: 22px;
    }
    .font-36px{
        font-size: 34px;
    }
    .font-40px{
        font-size: 30px;
    }
    .w-80-center{
        width: 85%;
        max-width: auto;
    }
     /* !top-menu---------------------------------------------------------------------------------- */
     div#nav-header-menu {
        background: #fff;
        box-shadow: 0px 4px 4px 0px #00000040;
        position: relative;
        z-index: 10;
    }

    #nav-header-menu .d-grid.align-content-center.align-center {
        grid-template-columns: 1fr;
        padding: 1.5em 0;
        align-items: center;
        gap: 1rem;
        width: 80%;
        margin: auto;
    }

    .d-grid.align-content-center.align-center .logo a img {
        width: 200px;
    }

    ul#menu-menu-main {
        padding-left: 0;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: space-evenly;
    }

    .hover-text-underline:hover {
        border-bottom: 1px #CDB256 solid;
        transition:  600ms;
    }

    p.text-dark.font-w-200.d-flex {
        margin-bottom: 9px;
        justify-content: flex-end;
        padding-right: 20%;
    }

    ul#menu-menu-main li {
        position: relative;
    }

    ul#menu-menu-main li.current-menu-item::after {
        content: '';
        height: 5px;
        width: 100%;
        position: absolute;
        background-color: var(--color-green);
        bottom: -8px;
        /* border-top-left-radius: 10px;
        border-top-right-radius: 10px; */
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
    }
    ul#menu-menu-main li.current-menu-item a{
        color: var(--color-green)   !important;
    }

    ul#menu-menu-main li a {
        color: #393939;
        font-size: 0.9em;
        display: flex;
        flex-direction: row-reverse;
    }

    ul#menu-menu-main li#menu-item-27 a:after,
    ul#menu-menu-main li#menu-item-767 a:after,
    ul#menu-menu-main li#menu-item-768 a:after,
    ul#menu-menu-main li#menu-item-769 a:after,
    ul#menu-menu-main li#menu-item-770 a:after {
        content: '';
        height: 10px;
        width: 100%;
        position: absolute;
        background-color: var(--color-green);
        transform: scaleX(0);
        bottom: -14px;
        border-radius: 3px;
        /* border-top-left-radius: 10px;
        border-top-right-radius: 10px; */
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
    }

    ul#menu-menu-main li#menu-item-27 a:hover:after,
    ul#menu-menu-main li#menu-item-767 a:hover:after,
    ul#menu-menu-main li#menu-item-768 a:hover:after,
    ul#menu-menu-main li#menu-item-769 a:hover:after,
    ul#menu-menu-main li#menu-item-770 a:hover:after {
        
        transform: scaleX(1);
        transform-origin: bottom left;
    }
    .entry-content:not(:first-child), .entry-summary:not(:first-child), .page-content:not(:first-child) {
        margin-top: 0 !important; 
    }
    
    

    /* !top-menu---------------------------------------------------------------------------------- */


    /* !home ----------------------------------------------------------------------------------*/
    /* *start */


    /* *end */

    /* *start info */
    
    section.info{
        background: url('./assets/pc/banner/info_bg.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 4rem 0;
    }
    .info_s1_grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        align-items: end;
    }
    .info_s1_2_img{
        padding: 0 4rem;
    }
    .info_s2_grid{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 166px;
        gap: 1rem;
        align-items: center;
    }
    .w_mb{
        background: var(--color-mint);
        border-radius: 50px;
        padding: 0.5rem 2.5rem;
        width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-width: 560px;
        gap: 1rem;
    }

    /* *end info*/

    /* *start vdo_grid*/
    section.vdo_grid{
        background-color: #64CCC5;
    }

    .vdo_grid{
        display: grid;
        grid-template-columns: 45% 1fr;
        gap: 5%;
    }

    .vdo_title{
        padding: 2rem 20% 2rem 0%;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        justify-content: center;
    }
    .w_gb{
        background: #fff;
        border-radius: 50px;
        padding: 0.5rem 2.5rem;
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .left_bt{
        justify-content: flex-end;
    }
    .w-fit{
        width: fit-content;
    }

    /* *end vdo_grid*/

    /* *start article */


    section.article{
        padding: 6rem 0 4rem;
        background: #f5fffe;
    }
    .article_hightlight_grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .article_hightlight_img img {
        min-height: 100%;
        height: 100%;
        object-fit: cover;
    }
    .article_hightlight_text{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .bt_article{
        padding: 10px 2rem;
        background-color: #ffffff4b;
        border: 1px solid #43436C;
        border-radius: 30px;
    }
    .article_card_grid{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 2rem;
        padding: 2rem 0;
    }
    .article_card_text{
        padding: 1rem 0;
    }
    .bt_green{
        background: var(--color-green);
        border-radius: 20px;
        padding: 0.2rem 1rem;
        box-shadow: 0px 4px 4px 0px #00000040;
    }

    /* *End---article */

    /* *start quiz*/

    section.quiz_banner{
        position: relative;
    }
    .quiz_text{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 100%;
        height: 100%;
        padding: 0 15%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* *end quiz*/

    /* *start */


    

    /* !END-home ----------------------------------------------------------------------------------*/

    /* !footer ----------------------------------------------------------------------------------*/

    section.footer-grid{
        background: #444444;
        padding: 4rem 15% 2rem;
        display: grid;
        grid-template-columns: 40% 1fr;
        align-items: start;
        gap: 2rem;
    }

    .social-footer.d-flex.grid-5{
        display: flex;
        align-items: center;
        gap: 1.2rem;
    }
    .policy_footer {
        display: flex;
        flex-wrap: wrap;
        column-gap: 1rem;
    }
    section.copy-right{
        background: #1F1F1F;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .d-flex.copy-right-text{
        justify-content: space-between;
    }
    section.copy-right-mobile{
        display: none !important;
        background-color: #1F1F1F;
    }

    /* !END-footer ----------------------------------------------------------------------------------*/


    /* !know ----------------------------------------------------------------------------------*/
    .bg-knowledge{
        background: #F5FFFE;
    }

    /* *start info_know */
    section.info_know{
        background: url('./assets/pc/banner/know_info_bg.png');
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        padding: 4rem 6rem 2rem 6rem;
        position: relative;
    }
    .info_know_banner{
        background: #C8F0F0;
        padding: 10px 9%;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
    }
    .info_know .w-80-center {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .info_icon_grid{
        display: flex;
        gap: 9rem;
        justify-content: center;
        justify-items: center;
        padding-top: 3rem;
    }
    .info_icon_1 p{
        position: relative;
    }
    .info_icon_1 p::after{
        content : '';
        position: absolute;
        width: 58px;
        height: 58px;
        background: url('./assets/pc/icon/next_green.svg') no-repeat;
        right: -7rem;
        top: 15px;
    }

    .info_detail {
        position: relative;
        padding: 3rem 10%;
    }
    .info_detail_text{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 15%;
        display: flex;
        justify-content: center;
        padding: 0 25%;
    }

    /* *end info_know*/

    /* *start knowledge*/

    section.knowledge{
        padding: 4rem 0;
    }
    .w_mb_text{
        background: var(--color-mint);
        border-radius: 20px;
        padding: 0.5rem 2.5rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        min-width: 480px;
    }
    .w_mb_text::before{
        content: '';
        position: absolute;
        bottom: -30px;
        left: 30px;
        width: 38px;
        height: 36px;
        background: url('./assets/pc/icon/next_mint.svg') no-repeat;
    }
    .knowledge_s1_grid{
        display: grid;
        grid-template-columns: 1fr 35%;
        gap: 0rem;
        align-items: center;
    }

    /* *end knowledge*/

    /* *start virus*/

    .virus_grid{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 3rem;
        padding: 2rem 0;
    }
    .virus_item.i_1 center {
        position: relative;
    }
    .virus_item.i_1 center::after{
        content: '';
        position: absolute;
        width: 58px;
        height: 58px;
        background: url('./assets/pc/icon/next_pink.svg') no-repeat;
        right: -4rem;
        top: 50%;

    }

    /* *end virus*/

    /* *start title_block*/

    .title_block{
        position: relative;
        width: fit-content;
        margin-bottom: 4rem;
        z-index: 10;
    }
    .ribbin{
        position: absolute;
        left: -25%;
        top: -20%;
        z-index: 0;
    }
    .title_block_text{
        position: relative;
        width: fit-content;
    }


    /* *end title_block*/

    /* !END--know ----------------------------------------------------------------------------------*/

    /* !hpv ----------------------------------------------------------------------------------*/

    /* *start hpv_info*/

    section.hpv_info{
        background: url('assets/pc/banner/hpv_bg.png') no-repeat center / cover;
        padding: 6rem 0 4rem;
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }
    .hpv_info_s1_grid {
        display: grid;
        grid-template-columns: 38% 1fr;
        gap: 1rem;
        align-items: center;
        padding: 0 0 2rem 0;
    }
    .hpv_info_s1_grid img{
        max-width: 70%;
    }
    section.hpv_infp_2{
        padding: 4rem 0;
    }
    .hpv_margin{
        margin-top: 5rem;
    }

    /* *end hpv_info*/


    /* *start hpv_buttom*/

    section.hpv_buttom{
        background: url('./assets/pc/banner/hpv_buttom.png') no-repeat center / cover;
        padding: 6rem 20%;
        display: flex;
        flex-direction: column;
        gap: 4rem;
        justify-content: center;
    }
    .hpv_buttom_title{
        padding: 0 10%;
    }


    /* *end hpv_buttom*/

    /* *start hpv_table */

    .hpv_table{
        padding: 3rem;
        background: #EEFFFD;
        border: 2px solid var(--color-green);
        border-radius: 30px;
    }
    .hpv_table_grid{
        display: grid;
        grid-template-columns: 35% 1fr;
        gap: 0rem;
        align-items: center;
    }
    .hpv_table_text_grid{
        display: grid;
        grid-template-columns: 30% 1fr;
        gap: 4.5rem;
    }
    .hpv_table_box{
        padding: 1rem;
        text-align: center;
        border-radius: 20px;
        position: relative;
    }

    .b_pink{
        background: var(--color-pink);
    }
    .b_green{
        background: #ECECEC;
        border: 1px solid var(--color-green);
    }
    .b_pink::after {
        content: '';
        position: absolute;
        width: 45px;
        height: 45px;
        background: url(./assets/pc/icon/next_green.svg) no-repeat;
        right: -4rem;
        top: 0;
        transform-origin: center;
        transform: translateY(100%);
    }

    /* *end hpv_table */

    /* *start post_top*/

    .post_top{
        background: url('./assets/pc/banner/hpv_poster_top.png') no-repeat center / cover;
        padding: 4rem 0;
    }
    .post_top_title{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    .red_box{
        background: #BC3F3F;
        border-radius: 15px;
        padding: 0rem 1rem;
        min-height: max-content;
    }

    /* *end post_top*/

    /* *start post_t_m*/

    .post_t_m{
        background: url('./assets/pc/banner/hpv_poster_t_m.png') no-repeat center / cover;
        padding: 4rem 0;
    }
    .post_t_m_flex{
        display: flex;
        justify-content: center;
        justify-items: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
    }
    .poster_item{
        width: 31%;
    }
    .poster_item img {
        height: 287px;
    }
    .post_m{
        position: relative;
    }
    .post_m_ref {
        position: absolute;
        top: 5%;
        right: 20%;
    }

    /* *end post_t_m*/

    /* *start post_b*/

    .post_b{
        padding: 4rem 0 6rem;
        background: url('./assets/pc/banner/hpv_poster_b.png') no-repeat top / cover;
    }
    .post_b_title{
        margin: 2.5rem 0;
    }
    .white_box {
        padding: 1.5rem 0;
        background: #C8F5F2;
        border-radius: 20px;
    }

    /* *end post_b*/

    /* *start */


    /* *end */

    /* !end---hpv----------------------------------------------------------------------------------*/

    


    /* !protect ----------------------------------------------------------------------------------*/

    section.protect_info{
        background: url('./assets/pc/banner/protect_bg.png') no-repeat center / cover;
        padding: 6rem 15%;
        display: flex;
        flex-direction: column;
        gap: 4rem;
    }
    .info_s1_img {
        display: flex;
        justify-content: flex-end;
    }

    section.protect_info_2 {
        padding: 2rem 0 0 0;
    }
    .protect_info_2_img{
        position: relative;
    }

    .protect_buttom{
        background: url('./assets/pc/banner/protect_buttom.png') no-repeat center / cover;
        padding: 2rem 0;
    }

    .w-60 {
        max-width: 65%;
    }

    img.ribbin.protect_logo.w-fit {
        left: -10%;
        top: 15%;
    }
    .right_img{
        display: flex;
        justify-content: flex-end;
        position: relative;
        margin-top: -10rem;
    }
    .left_img{
        display: flex;
        justify-content: flex-start;
        position: relative;
        margin-top: -5rem;
    }

    .protect_table_img{
        position: relative;
    }
    .pab_13 {
        width: 12px;
        height: 12px;
        position: absolute;
        bottom: 30%;
        left: 46.4%;
    }
    .pab_14 {
        width: 12px;
        height: 12px;
        position: absolute;
        bottom: 30%;
        left: 47.7%;
    }
    .pab_19 {
        width: 12px;
        height: 12px;
        position: absolute;
        bottom: 30%;
        left: 48.9%;
    }

    .pab_20 {
        width: 12px;
        height: 12px;
        position: absolute;
        bottom: 30.03%;
        left: 92.4%;
    }

    .pab_3_n {
        width: 12px;
        height: 12px;
        position: absolute;
        bottom: 59.9%;
        left: 24.7%;
    }
    .pab_14_n {
        width: 12px;
        height: 12px;
        position: absolute;
        bottom: 59.9%;
        left: 25.8%;
    }
    .pab_14_n_2 {
        width: 12px;
        height: 12px;
        position: absolute;
        bottom: 59.9%;
        left: 80.3%;
    }
    .pab_15_n{
        width: 32px;
        height: 12px;
        position: absolute;
        bottom: 59.9%;
        left: 49.7%;
    }
    .b{
        border: 1px solid red;
    }

    /* !end---protect----------------------------------------------------------------------------------*/

    /* !cancel----------------------------------------------------------------------------------*/

    section.cancel_info{
        padding: 0 0 4rem 0;
        background: url('./assets/pc/banner/cancel_bg.png') no-repeat center / cover;
    }
    .cancel_grid{
        position: relative;
        top: -2rem;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 2rem;
        padding-bottom: 4rem;
    }
    .cancel_item{
        position: relative;
    }
    a.cancel_item_1 {
        position: absolute;
        width: 12px;
        height: 12px;
        bottom: 23%;
        left: 59%;
    }
    a.cancel_item_2 {
        position: absolute;
        width: 12px;
        height: 12px;
        bottom: 23%;
        left: 68%;
    }
    a.cancel_item_3 {
        position: absolute;
        width: 12px;
        height: 12px;
        bottom: 35%;
        left: 70%;
    }
    a.cancel_item_4 {
        position: absolute;
        width: 12px;
        height: 12px;
        bottom: 23%;
        left: 78%;
    }
    a.cancel_item_4_1{
        position: absolute;
        width: 12px;
        height: 12px;
        bottom: 23%;
        left: 85%;
    }
    .cancel_swiper{
        padding: 4rem 0;
        background: #DEFBF7;
    }
    .cancel_swiper_slide{
        position: relative;
    }

    .swiper-button-next, .swiper-rtl .swiper-button-prev {
        right: -45px !important;
        left: auto;
    }
    .swiper-button-prev, .swiper-rtl .swiper-button-next {
        left: -45px !important;
        right: auto;
    }
    .cancel_vdo{
        padding: 4rem 0 2rem;
    }
    img.ribbin.cancel_logo.w-fit {
        left: -9%;
    }



    /* !END-cancel ----------------------------------------------------------------------------------*/

    /* !quiz ----------------------------------------------------------------------------------*/

    section.quiz{
        padding: 3rem 0 6rem 0;
        background: #F5FFFE;
    }
    .quiz_popup{
        aspect-ratio: 16 / 7;
        height: auto;
        background: #fff;
        border-radius: 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }
    .quiz_popup_bg{
        background: linear-gradient(180deg, #30BDB5 0%, rgb(255 255 255) 100%);
        border-radius: 30px ;
        padding: 5px;
        box-shadow: 0px 4px 20px 0px #00000080;
        margin: 2rem 0;
    }

    /* !END-quiz ----------------------------------------------------------------------------------*/

    /* !article ----------------------------------------------------------------------------------*/

    /* *start */

    section.artcle_page{
        padding: 4rem 0;
    }

    section.reference{
        padding: 4rem 0 6rem;
        background: url('./assets/pc/banner/reference_bg.png') no-repeat top / cover;
    }
    img.ribbin.reference_logo.w-fit {
        top: 10%;
    }
    .reference_popup {
        aspect-ratio: 16 / 7;
        height: auto;
        background: #fff;
        border-radius: 25px;
        padding: 3rem;
    }
    section.reference_popup_detail {
        padding: 1rem 0 6rem 0;
        background: #F5FFFE;
    }

    /* *end */

    /* *start */


    /* *end */

    /* *start */


    /* *end */

    /* *start */


    /* *end */

    /* *start */


    /* *end */

    
    /* !END-article ----------------------------------------------------------------------------------*/

    /* !contact ----------------------------------------------------------------------------------*/
    .mt-10px{
        margin-top: -10px;
    }
    section.contact{
        background-image: url('./assets/pc/banner/contact-bg.png');
        background-size: cover;
        background-repeat: no-repeat;
        
    }
    .contact-form.d-grid {
        grid-template-columns: 1fr;
        padding: 4rem 4rem;
    }
    .contact-detail.d-flex{
        flex-direction: column;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 5px 0px 0px 5px;
        gap: 2rem;
    }
    .contact-logo img {
        width: 250px;
    }
    .contact-form-detail{
        background: #FFFFFF;
        border-top-right-radius: 5px;
        border-bottom-right-radius:5px;
        padding: 3rem;
    }
    h4.contact-text{
        font-size: 2.2rem;
    }
    .d-flex.icons-contact {
        gap: 1rem;
        align-items: flex-start;
    }

    /* ?form */

        div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {
            height: 100px !important;
        }
        label.wpforms-field-label {
            font-size: 1.1rem !important;
            font-weight: 400 !important;
            color: #393939 !important;
            display: flex !important;
            justify-content: space-between;
        }
        input#wpforms-553-field_0, input#wpforms-553-field_3, input#wpforms-553-field_1, textarea#wpforms-553-field_2 {
            border-radius: 10px;
            border: 1px solid var(--color-red);
            background-color: #fff;
        }
        button.form-bt {
            border-radius: 30px !important;
            background: linear-gradient(180deg, #B5001F 0%, #7C0015 100%) !important;
            color: #fff !important;
            padding: 1rem 3rem !important;
            font-weight: 300;
        }
        .wpforms-submit-container {
            display: flex;
            align-items: center;
            justify-content: center;
        }

    /* ?form */

    /* !END-contact ----------------------------------------------------------------------------------*/


    /* !single-post ----------------------------------------------------------------------------------*/

    .banner_post{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding: 0 0 6rem 0;
        height: 350px;
    }
    .recommend_article{
        padding: 4rem 0;
        background: #DEFBF7;
    }
    /* !single-post ----------------------------------------------------------------------------------*/


    .overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.4);
        transition: opacity 500ms;
        visibility: hidden;
        opacity: 0;
        z-index: 110;
        display: flex;
    }
    .overlay:target {
        visibility: visible;
        opacity: 1;
    }
    .popup {
        margin: 5rem auto;
        padding: 0;
        border-radius: 5px;
        position: relative;
        transition: all 1s ease-in-out;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 80%;
        height: fit-content;
    }
    .popup .close {
        position: absolute;
        top: 10px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
    }
    .popup .close:hover {
        color: #06D85F;
    }
    .popup .content {
        overflow: auto;
    }
    .content  {
        padding: 0;
    }
    .margin_shadow{
        margin: 0 !important;
        box-shadow: none !important;

        .quiz_popup {
            aspect-ratio: 16 / 8;
            padding: 4rem 5% 1rem;
            align-items: normal;
            justify-content: space-around;
        }
    }
    .bt_answer_flex{
        display: flex;
        gap: 2rem;
        justify-content: center;
        align-items: center;
    }
    div.bt_answer{
        border-radius: 20px;
        padding: 0.3rem 1.5rem;
        border: 3px solid var(--color-green);
        width: 200px;
        color: var(--color-green);
        background: transparent;
        transition: all 0.5s ease-out;
    }
    /* div.bt_answer:focus{
        color: #fff;
        background:  var(--color-green);
        transition: all 0.5s ease-out;
    } */

    .bt_true.selected{
        color: #fff;
        background:  var(--color-green) !important;
        transition: all 0.5s ease-out;
        filter: none !important;
    }
    .bt_false.selected{
        border: 3px solid var(--color-red-2) ;
        color: #fff;
        background:  var(--color-red-2) !important;
        transition: all 0.5s ease-out;
        filter: none !important;
    }

}