html,
body {
    font-size: 3.63vw;
    letter-spacing: 0.02em;
}

body {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    font-family: "Microsoft JhengHei", "微軟正黑", Arial;
    font-weight: 400;
    color: #333;
}

.header_nav a.logo_subs2{
    width: 29.46%;
    max-width: 191px;
    min-width: 131px;
    transform-origin: right;
}

img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

.xx_br{
    display: none;
}

h2{
    font-size: 1.85rem;
    line-height: 1.45;
    font-weight: 600;
}

h3{
    font-size:  1.65rem;
    line-height: 1.4;
    font-weight: 600;
}

h4{
    font-size:  1.25rem;
    font-weight: 600;
}

h4 p{
    font-size: 1em;
    font-weight: 600;
}

h5{
    font-size:  1.2rem;
    font-weight: 600;
}

p{
    font-size:  1rem;
    font-weight: 600;
}

h2 p.main_title{
    font-size:  1em;
    line-height: 1.3;
}

h2 p.sub_title{
    font-size:  0.65em;
    line-height: 1.25;
}

ul.list{
    font-size: 1rem;
    margin-left: 1.2em;
    letter-spacing: 0.01em;
    margin-bottom: 1rem;
}

ul.list li{
    line-height: 1.5;
    margin-bottom: 0.6rem;
}

p.note{
    font-size: 0.7rem;
    color: #555;
}

span.point{
    color: #3E8345;
}

a.btn{
    font-size:  1rem;
    font-weight: 700;
    transition: filter ease .3s;
}

a.btn:hover{
    filter: brightness(1.1);
}

a.btn.is-active:hover{
    cursor: default;
    filter: none;
}

a.btn .btn_arrow{
    transition: transform ease .2s;
}

a.btn:hover .btn_arrow{
    transform: translateX(3px);
}

a.btn p{
    font-size: 1em;
}

.btn_arrow{
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 100%;
    vertical-align: middle;
    box-sizing: border-box;
    flex: none;
}

.btn_arrow.arrow_line{
    border: 2px solid #6EA204;
}

.btn_arrow.arrow_line svg{
    display: block;
    stroke: #6EA204;
    stroke-width: 2.5px;
}

.btn_arrow.arrow_block{
    background: #fff;
}

a.btn_secondary{
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.8rem 1.3rem 0.8rem 1.7rem;
    letter-spacing: 0.02em;
    color: #5CB21A;
    font-size: 1.2rem;
    background: #fff;
    border: 2px solid #5A9B28;
    box-shadow: 0px 4px 12px rgba(210, 236, 190, 0.8);
    border-radius: 100px;
}

a.btn_secondary:hover{
    color: #fff;
    background: #5CB21A;
}

a.btn.btn_secondary.is-active:hover{
    cursor: pointer;
}

a.btn_secondary .btn_arrow{
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.5rem;
    background: #fff;
}

a.btn_secondary .btn_arrow.arrow_line{
    border-color: #77C040;
}

a.btn_secondary .btn_arrow.arrow_line svg{
    stroke: #77C040;
}

a.btn_primary{
    display: block;
    position: relative;
    margin: 3rem auto;
    letter-spacing: 0.02em;
    color: #fff;
    z-index: 1;
}

a.btn_primary p{
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: auto;
    text-align: center;
    padding: 1.1rem 1.3rem 1.1rem 1.7rem;
    font-size: 1.5rem;
    border-radius: 100px;
}

a.btn_primary.primary_green p{
    background: radial-gradient(50% 889.55% at 50% 50%, #68B82B 47.06%, #58B015 100%);
    border: 1px solid #5A9B28;
    box-shadow: 0px 4px 12px #D2ECBE;
}

a.btn_primary.primary_blue p{
    background: radial-gradient(50% 889.55% at 50% 50%, #41B6E6 47.06%, #1CA2D9 100%);;
    border: 1px solid #0076CE;
    box-shadow: 0px 4px 12px #88D8EA;
}

a.btn_primary.primary_blue .btn_arrow svg{
    stroke: #41B6E6;
}

a.btn_primary.primary_yellow p{
    background: radial-gradient(50% 889.55% at 50% 50%, #F2BA28 47.06%, #F2A000 100%);    border: 1px solid #0076CE;
    border: 1px solid #EE9611;
    box-shadow: 0px 4px 12px #A5A3F6;
}

a.btn_primary.primary_yellow .btn_arrow svg{
    stroke: #F2AF00;
}

a.btn_primary .btn_arrow{
    width: 1.5rem;
    height: 1.5rem;
    background: #fff;
    border: none;
    margin-left: 0.5rem;
}

a.btn_primary .dec_btn{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6.6rem;
    height: auto;
    margin: auto;
    z-index: -1;
}

a.btn_primary .dec_btn:first-of-type{
    left: -10%;
}

a.btn_primary .dec_btn:last-of-type{
    right: -10%;
}

a.btn_link{
    text-decoration: underline;
}

.header_nav.is-active{
    background: #fff;
}

/*.dec_bg {
    margin-top: -1px;
}*/

.title_section{
    position:  relative;
    overflow: hidden;
    transform: translateY(-2px);
    z-index: 1;
}

/*.title_section img.bg{
    position: relative;
    z-index: 0;
}*/
.title_content{
    text-align: center; 
}

.title_content.page_title{
    position:  absolute;
    margin: auto;
    top: 0; 
    bottom: 0;  
    left: 0;    
    right: 0;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: flex-end;
}

.title_content .content_inside{
    position: relative;
    filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.1));
}

.title_content.page_title h2{
    position: relative;
    z-index: 1;
    filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.1));
}
/*.title_content h2{
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
}*/

.title_content.page_title h2 .title_top{
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
}

.title_content.page_title h2 .title_top::before{
    content: "";
    display: block; 
    width:  100%;
    background: #fff;
}

.title_content.page_title h2 .title_top img{
    width:  1.75rem;
    position: relative;
    height: auto;
}

.title_content.page_title h2::after{
    content: "";
    display: block;
    position:  relative;
    width:  100%;
    height: 0.35rem;
    background-image: url("../images/title_dec_bottom.png"); 
    background-repeat: repeat-x;
}


.title_content.page_title h2 .title_inside{
    background:  #fff;
}

.title_content h2 p.main_title{
    color: #007C7C;
    letter-spacing: 0.03em;
    margin-bottom:  0.6rem;
}


.title_content.page_title h2 p.sub_title:before{
    content: "";
    display: block; 
    width:  100%;
    height:  1px;
    background-image: url("../images/title_dec_line.png");
    background-repeat: repeat-x;
}

.title_content h2 .sub_title{
    color: #42880D;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.title_content h2 .sub_title span{
    display: block;
    margin-top: 0.5rem;
}

.title_content h2.title_bg{
    position: absolute;
    bottom: 0; 
    right: 0;
    width:  100%;
    margin-right: -0.5rem;
    margin-bottom: -0.5rem;
    z-index: 0;
}

.title_content h2.title_bg  p{
    color: transparent;
}

.title_content h2.title_bg .title_top::before,.title_content h2.title_bg .title_inside{
    background:  #DDEADF;
}

.title_content h2.title_bg::after{
    background-image: url("../images/title_dec_bottom2.png"); 
}


section,footer{
    position: relative;
}

section::before,section::after{
    content: "";
    display: block;
    position: absolute;
    top: 15.3%;
    bottom: 0;
    width: 9%;
    height: 28.4%;
    padding-bottom: 28.4%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 0;

}

section:nth-of-type(odd)::before{
    left: 2%;
    background-image: url("../images/dec_cloud_left.png");
}

section:nth-of-type(odd)::after{
    right: 2%;
    transform: translateY(-10%);
    background-image: url("../images/dec_cloud_right.png");
}


section:nth-of-type(even)::before{
    left: 2%;
    transform: translateY(-10%);
    background-image: url("../images/dec_cloudB_left.png");
}


section:nth-of-type(even)::after{
    right: 2%;
    transform: translateY(0);
    background-image: url("../images/dec_cloudB_right.png");
}

section .container{
    position: relative;
    z-index: 1;
}

section .anchor{
    position: absolute;
}

.row_tab{
    align-items: center;
}

.row_center{
    justify-content: center;
}


.section_kv{
    position: fixed;
    top: 0;
    width: 100%;
}

.kv_bg{
    position: relative;
}

.kv_bg .kv_icon{
    position: absolute;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.1));
}

.kv_bg .kv_icon .line{
    filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.3));
}

.kv_bg .kv_icon .icon{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 76.8%;
    margin: auto;
    z-index: 2;
    animation: lighting 2s ease both infinite;
}
.section_kv .logo{
    position: absolute;
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.section_kv .logo img{
    width: 10rem;
    margin-right: 0.25rem;
    margin-bottom: 0.5rem;
}

.section_kv .logo p{
    font-size: 0.95rem;
    letter-spacing: -0.005em;
}

@keyframes lighting{
    0%{
        filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
        transform: scale(1);
    }
    50%{
        filter: drop-shadow(0 0 15px rgba(255,255,255,1));
        transform: scale(1.02);
    }
    100%{
        filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
        transform: scale(1);
    }
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.kv_bg .kv_icon:nth-of-type(1){
    animation: fade-up .5s .2s ease both;
}



.kv_bg .kv_icon:nth-of-type(2){
    animation: fade-up .5s .5s ease both;
}



.kv_bg .kv_icon:nth-of-type(3){
    animation: fade-up .5s .3s ease both;
}


.kv_bg .kv_icon:nth-of-type(4){
    animation: fade-up .5s .4s ease both;
}



.kv_bg .kv_icon:nth-of-type(5){
    animation: fade-up .5s .8s ease both;
}



.kv_bg .kv_icon:nth-of-type(6){
    animation: fade-up .5s .1s ease both;
}


.kv_bg .kv_icon:nth-of-type(1) .icon{
    width: 75.7%;
    top: 4.08%;
}



.kv_bg .kv_icon:nth-of-type(2) .icon{
    width: 80%;
    top: 6.354%;
}



.kv_bg .kv_icon:nth-of-type(3) .icon{
    width: 79.9%;
    top: 6%;
}


.kv_bg .kv_icon:nth-of-type(4) .icon{
    width: 100%;
    top: 0%;
}



.kv_bg .kv_icon:nth-of-type(5) .icon{
    width: 83.2%;
    top: 4%;
}



.kv_bg .kv_icon:nth-of-type(6) .icon{
    width: 80%;
    top: 4.2%;
}


.section_dialogue{
    padding-bottom: 5%;
    z-index: 1;
    background-color: #ECF9FC;
    background-image: linear-gradient( to bottom, #ECF9FC 20%, #ACEEEA 70%);
}

.section_dialogue .dec_bg{
    transform: translateY(-99%);
}

.section_dialogue .dec_bg.front{
    position: relative;
    z-index: 1;
}

.section_dialogue .dec_bg.bg{
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    margin: auto;
}

.section_dialogue .container{
    margin-top: -5%;
}

.section_dialogue .item_dialogue{
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    align-items: flex-start;
    padding: 0.25rem 0;
}

.section_dialogue .item_dialogue h5{
    position: relative;
    letter-spacing: 0;
    z-index: 1;
}

.section_dialogue .item_dialogue .dialogue_content{
    position: relative;
    margin: 1.5rem 1.5rem 0 1.5rem;
    border-radius: 2.5rem;
    display: flex;
    display: -ms-flexbox;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
}

.section_dialogue .item_dialogue .dialogue_content::before{
    position: absolute;
    top: 0.5rem; 
    content: "";
    display: block; 
    width: 2rem;
    height: 1.5rem;
    background-size: 100%;
    background-repeat: no-repeat;
}

.section_dialogue .item_dialogue  .dialogue_head{
    width: 6rem;
    flex: none;
}

.section_dialogue .item_dialogue.dialogueA .dialogue_content{
    background: #fff;
    color: #555;
}

.section_dialogue .item_dialogue.dialogueA .dialogue_content::before{
    left: -0.95rem;
    background-image: url("../images/dialogue_arrowA.svg");
}

.section_dialogue .item_dialogue.dialogueB{
    flex-direction: row-reverse;
}

.section_dialogue .item_dialogue.dialogueB .dialogue_content{  
    color: #fff;
    background: linear-gradient(103.07deg, #82CF66 36.75%, #88CC5F 72.51%);;
}

.section_dialogue .item_dialogue.dialogueB .dialogue_content::before{
    right: -0.95rem;   
    background-image: url("../images/dialogue_arrowB.svg");
}

.section_alert{
    padding-bottom: 7%;
    background-image: linear-gradient( to bottom, #96DBE9 25%, #E0F9FF 70%);
}

.section_alert .row{
    justify-content: center;
}

.item_alert{
    position: relative;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) ;
    margin-bottom: 1rem;
}

.alert_dec{
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 1.27rem;
}

.alert_icon{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 7.25rem;
    transform: translateY(-50%);
    background: #7FDCE9;
    border-radius: 100%;
    box-shadow: 0 3px 3px rgba(0,0,0,0.2) ;
}

.section_alert .title_content h2{
    margin-bottom: 1rem;
}

.section_alert .title_content::after{
    content: "";
    display: block; 
    width:  100%;
    height:  1px;
    margin-top: 1rem;
    background-image: url("../images/title_dec_line.png");
    background-repeat: repeat-x;
}

.section_alert .alert_content{
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.section_alert .alert_content .title{
    margin: 0rem 0 1.5rem 0;
    color: #333;
}

.section_alert .alert_content .alert_pic{
    width: 80%;
    margin: 0.5rem auto;
}

.section_alert .alert_content .content_item{
    width: 100%;
}

.section_alert .alert_content .content_item:nth-of-type(1){
    margin-right: 2.5px;
}

.section_alert .alert_content .content_item:nth-of-type(2){
    margin-left: 2.5px;
}

.section_alert .alert_content .alert_btn{
    display: block;
    text-align: center;
    color: #fff;
    padding: 1.75rem 0;
    width: 100%;
}

.section_alert .alert_content .content_item:nth-of-type(1) .alert_btn{
    background: #5DB766;
    border-radius: 0 0  0 1.5rem;
}

.section_alert .alert_content .content_item:nth-of-type(2) .alert_btn{
    background: #4199D9;
    border-radius: 0 0 1.5rem 0;
}

.section_alert .btn_line {
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    color: #3E8345;
}
.section_alert .btn_line .line_icon{
    width: 2.85rem;
    height: auto;
    flex: 0 0 2.85rem;
}

.section_alert .btn_line span{
    vertical-align: middle;
}

.section_alert .btn_line p{
    margin: 0.5rem;
    font-weight: bold;
}

.section_alert .btn_line .btn_arrow{
    width: 1.2rem;
    height: 1.2rem;
}

.section_alert .btn_line svg{
    stroke: #6EA204;
    stroke-width: 2px;
}

.section_alert .btn_line .btn_arrow{
    display: inline-block;
}

.section_lattitude{
    padding-bottom: 4%;
    background-image: linear-gradient( to bottom, #E0F9FF 1%, #B5EEE0 2%, #B5EEE0 25%, #E4FAD9 70%);
}

.section_lattitude .row{
    justify-content: center;
}

.section_lattitude .item_tab{
    display: flex;
    display: -ms-flexbox;
    justify-content: space-around;
    margin: 5% 0;
}

.section_lattitude .container_feature .btn_tab{
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: flex-start;
    width: 33%;
    padding: 0.2rem;
    color: #333;
    background: #fff;
    border-radius: 100px;
    border: 0.15rem solid #68B82B;
    box-shadow: 0px 4px 4px rgba(150, 192, 107, 0.42);
    transition: all ease .3s;
}

.section_lattitude .container_feature .btn_tab ~ .btn_tab{
    margin-left: 0.5rem;
}

.section_lattitude .container_feature .btn_tab:hover{
    background: #D1F1B9;
}



.section_lattitude .container_feature .btn_tab.is-active{
    color: #fff;
    background: #90C865;
}

.section_lattitude .tab_content{
    display: none;
}

.section_lattitude .container_feature .tab_content{
    text-align: center;
}

.section_lattitude .container_feature .item_info p{
    text-align: justify;
    color: #333;
    padding-right: 1rem;
    line-height: 1.7;
}

.section_lattitude .container_feature .item_content > .btn .btn_arrow.arrow_line{
    border-color: #3E8345;
}

.section_lattitude .container_feature .item_content> .btn .btn_arrow.arrow_line svg{
    stroke: #3E8345;
}

.section_lattitude .tab_content.is-active{
    display: block;
}

.section_lattitude .tab_content .item_content,.item_info{
    padding: 1rem 0;
}

.section_lattitude .tab_content .item_content{
    display: flex;
    display: -ms-flexbox;
    margin-bottom: 1rem;
}

.section_lattitude .container_feature .item_content > .btn{
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    align-items: center;
    width: 20%;
    color: #333;
}

.section_lattitude .container_feature .item_content .btn.btn_efficient{
    width: 45%;
}

.section_lattitude .tab_content  .btn p{
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    padding-left: 1.2rem;
}

.section_lattitude .tab_content .btn .btn_arrow{
   /* width: 1rem;
    height: 1rem;*/
    /*flex : 0 0 1rem;*/
    margin-left: 0.2rem;
}

.section_lattitude .item_content > .btn .btn_arrow svg{
    /*stroke-width: 3px;*/
}

.section_lattitude .item_content > .btn img{
    width: 3.9rem;
    margin: 0.5rem 0;
}

.section_lattitude .item_btn{
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
}

.section_lattitude .container_product{
    position: relative;
    padding-top: 15%;
}

.section_lattitude .container_product > .anchor{
    top: 0;
}

.section_lattitude .container_product .row{
    justify-content: space-around;
}


.section_lattitude .container_product .tab_content .anchor{
    position: absolute;
    top: 0;
}

.section_lattitude .container_product .item_product{
    /*position: relative;*/
    padding: 0 1rem 1rem 1rem;
    background: #FFFFFF;
    border: 1px solid #3E8345;
    border-radius: 50px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}


.section_lattitude .container_product .info_pic{
    width: 90%;
    margin: auto;
}

.section_lattitude .container_product .item_btn{
    position: absolute;
    width: 100%;
/*    top: 0;
    right: 0;
    left: 0;*/
    transform: translateY(-55%);
}

.section_lattitude .container_product .btn_tab{
    width: 7rem;
    height: 7rem;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0.5rem;
    margin: 0 1rem;
    color: #52A345;
    background: #F0F9DD;
    border: #52A345 2px solid;
    border-radius: 100% 100% 100% 0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}

.section_lattitude .container_product .btn_tab.is-active{
    color: #fff;
    background: #52A345;
}

.section_lattitude .container_product .title span:nth-of-type(1){
    vertical-align: middle;
}

.section_lattitude  .container_product .product_eco{
    padding: 0.75rem;
    margin: 1rem 0;
    background: #F1F7EE;
    border-radius: 1.5rem;
}

.container_product .product_eco img{
    width: 3rem;
}

.container_product .product_eco img ~ img{
    margin-left: 0.2rem;
}

.container_product .product_eco p{
    margin-left: 0.8rem;
}

.section_lattitude  .container_product .title{
    text-align: center;
    color: #3E8345;
    margin-bottom: 0.8rem;
}

.section_lattitude  .container_product .title .btn_arrow{
    display: inline-block;
    vertical-align: middle;
}

.section_xps{
    padding-bottom: 5%;
    background-image: linear-gradient( to bottom, #E4FAD9 1%, #fff 2%, #fff 25%, #C4E6FF 70%);
}

.section_xps .row_special{
    align-items: center;
    justify-content: center;
    padding-top: 2%;
}

.section_xps .item_info{
    width: 85%;
    margin: auto;
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section_xps .item_info img{
    width: 6.7rem;
    margin: auto;
    margin-bottom: 0.5rem;
}

.section_xps .item_info .title{
    margin-bottom: 0.5rem;
}

.section_xps .item_info .text{
    font-size: 0.9rem;
}

.section_xps h2 .sub_title{
    color: #3D94D6;
}

.section_xps a.btn_secondary{
    margin-top: 0.5rem;
    border-color: #0076CE;
    color: #0076CE;
    box-shadow: 0px 4px 12px #C1EDFF;
}

.section_xps a.btn_secondary:hover{
    color: #fff;
    background: #0076CE;
}

.section_xps .btn_secondary span{
    flex: none;
}

.section_xps a.btn_secondary .btn_arrow{
    border-color: #0076CE;
}

.section_xps a.btn_secondary .btn_arrow.arrow_line svg{
    stroke: #0076CE;
}

.section_xps .row_info{
    align-items: center;
    justify-content: space-between;
}

.section_xps .container_feature{
    padding-top: 6%;
}

.section_xps .container_feature .item_btn{
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
}

.section_xps .container_feature a.btn_tabXps{
    display: block;
    padding: 1rem;
    box-sizing: border-box;
    text-align: center;
    color: #0076CE;
    background: linear-gradient(140.07deg, #CCECF9 14.96%, #E4F7FF 86.59%);
    border: 1px solid #6ED5FF;
    box-shadow: 0px 4px 8px rgba(110, 151, 174, 0.5);
    border-radius: 1000px;
}

.section_xps .container_feature a.btn_tabXps .icon{
    width: 47%;
    background: linear-gradient(140.71deg, rgba(26, 188, 255, 0.5) 15.08%, rgba(104, 211, 255, 0.175) 82.19%);
    border-radius: 100px;
    margin: auto;
    margin-bottom: 0.5rem;
}

.section_xps .container_feature a.btn_tabXps p{
    margin-bottom: 1rem;
}

.section_xps .container_feature a.btn_tabXps .btn_arrow{
    background: #fff;
    margin: auto;
}

.section_xps .container_feature a.btn_tabXps .btn_arrow svg{
    stroke: #41B6E6;
    stroke-width: 3px;
    transform: rotate(90deg);
}

.section_xps .container_feature a.btn_tabXps:hover .btn_arrow{
    transform: translateY(3px);
}

.section_xps .container_feature a.btn_tabXps.is-active{
    color: #fff;
    background: linear-gradient(123.84deg, #41B6E6 20.27%, #4197E6 91.76%);
}

.section_xps .container_feature a.btn_tabXps.is-active .icon{
    background: linear-gradient(140.71deg, rgba(229, 247, 255, 0.5) 15.08%, rgba(229, 247, 255, 0.06) 82.19%);
}

.section_xps .container_feature .tab_content{
    display: none;
}

.section_xps .container_feature .tab_content p{
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.section_xps .container_feature .tab_content.is-active{
    display: block;
}

.section_xps .container_feature .item_pic{
    width: 95%;
    margin: auto;
}

.section_kol{
    background: linear-gradient(180deg, #75CBFC 30%, #C4E6FF 95%);
}


.section_kol .row{
    justify-content: space-evenly;
}

.section_kol .container{
    padding-top: 7%;
}

.section_kol .container a.btn{
    position: relative;
    display: block;
    text-align: center;
    padding: 1.5rem;
    margin-bottom:  1rem;
    box-sizing: border-box;
    background: #fff;
    border-radius: 1.5rem;
    overflow: hidden;
}

.section_kol .container a.btn p{
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    margin: 1rem 0 1.3rem 0;
    min-height: 2.5em;
    font-weight: 600;
}

.section_kol .container a.btn .btn_arrow{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.2rem;
    width:  2.2rem;
    height: 2.2rem;
    background: #0076CE;
    border-radius: 0;
}

.section_kol .container a.btn:hover .btn_arrow{
    transform: translate(0);
}

.section_kol .container a.btn .btn_arrow svg{
    stroke: #fff;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.section_kol .container a.btn:hover .btn_arrow svg{
    transform:  rotate(45deg) translateX(4px);
}

.section_transitionA{
    background: #DFFBFD;
    text-align: center;
}

.section_transitionA h4{
    padding: 2% 0 1% 0;
    line-height: 1.8;
    letter-spacing: 0.05em;
}


.section_transitionA h4 p{
    margin-bottom: 0.5rem;
}

.section_esg{
    padding-bottom: 3%;
    background: linear-gradient(180deg, #FFFFFF 20%, #E9FADE 80%);
}

.section_esg .row_info{
    justify-content: center;
    align-items: center;
    margin-bottom: 8%;
}

.section_esg h4{
    margin-bottom: 1rem;
    width: 100%;
}

.section_esg p{
    line-height: 1.5;
    font-weight: normal;
    text-align: justify;
    margin-bottom: 0.8rem;
}

.section_esg .item_info{
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    align-items: center;
    text-align: left;
}

.section_esg .item_pic{
    width: 90%;
    margin: auto;
}

.section_transitionB{
    background: #95E2D0;
    color: #fff;
    text-align: center;
}

.section_transitionB h3{
    padding: 2% 0 1% 0;
}



.section_survey {
    background-image: linear-gradient(180deg, #E6F7FF 20%, #D9F4FF 40%, #ADCEFF 60% , #8CB1F8 75%);
}

.section_survey .row_award{
    justify-content: center;
}

.section_survey  .container_award{
    margin-bottom: 3%;
}

.section_survey .item_award{
    width: 90%;
    text-align: center;
    margin: auto;
    margin-top: 2%;
    margin-bottom: 2rem;
}

.section_survey .item_award h5{
    display: inline-block;
    padding: 0 0.5rem;
    color: #70457D;
    margin-bottom: 0.5rem;
    background: #D8DDFA;
}

.section_survey .item_award h4{
    margin-bottom: 0.5rem;
}

.section_survey .row_info{
    align-items: center;
    justify-content: center;
}

.section_survey .row_info p{
    margin-bottom: 0.3rem;
}

.section_survey .row_info p.info{
    font-weight: normal;
    margin-top: 1rem;
}

.section_survey .alert_icon{
    width: 5.45rem;
}

.section_survey .item_alert{
    margin-top: 10%;
    line-height: 1.5;
    text-align: center;
    padding: 4rem 1rem 1.5rem 1rem;
    box-sizing: border-box;
}

.section_survey .item_alert a.btn_primary{
    margin: 1.5rem auto 0 auto;
}

.section_survey .item_alert a.btn_primary p{
    padding: 0.5rem 1.6rem 0.5rem 1.6rem;
}

.section_survey .container_footer{
    color: #fff;
    text-align: center;
}

.section_survey .container_footer h3{
    padding: 5% 0 2% 0;
}

.box_modal .container{
    width:  100%;
}



.box_modal .container p{
    text-align: justify;
    line-height: 1.5;
    margin-bottom:  0.5rem;
}


.box_modal .btn_close{
    width: 3em;
    min-width: 35px;
    height: 3em;
    min-height: 35px;
    transform: translate(30%,-30%);
}

.box_modal .title{
    text-align: center;
    color: #3E8345;
    margin-bottom:  2rem;
}

.box_modal  .item_info .title{
    margin-bottom:  1rem;
}

.box_modal .modal_content{
    position: relative;
    width: 95%;
    background: #fff;
    border-radius: 2.5rem;
    border: 3px solid #6EA204;
}

.box_modal .dec{
    position: absolute;
    left: 0;    
    bottom: 0;
    width:  11.3rem;
    transform: translate(-48.8%,12.8%);
}

.info_modal .content_inner{
    padding: 2rem;
    max-height: 80vh;
}

.notice_modal .content_inner{
    padding: 2.8rem;
    max-height: 80vh;
}

.info_modal .row{
    justify-content: center;
    align-items: center;
}

.info_modal .content_inner ul.list  li{
    line-height: 1.8;
    text-align: justify;
}

.media_modal .content_inner{
    padding: 2rem;
    max-height: 80vh;
}

.media_modal .media_item{
    border-radius: 1rem;
    overflow: hidden;
}

.box_modal.media_modal .title{
    margin-bottom:  1.5rem;
}

.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{
    background: rgba(139 ,195 ,74, 0.4);
}

.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical {
    top: 1.5rem;
    bottom: 1.5rem;
}

@media screen and (max-width:767px) {
	html,
    body {
        overflow-x: hidden;
    }


    .b_br {
        display: none;
    }

    .dec_bg{
        width:  100%;
        overflow: hidden;
    }
    
    .dec_bg img{
        width:  200%;
    }

    a.btn_secondary{
        font-size: 1.15rem;
        border-width: 1px;
    }

    a.btn_secondary .btn_arrow{
        width: 1.35rem;
        height: 1.35rem;
    }

    .btn_arrow.arrow_line{
        border-width: 1px;
    }

    a.btn_primary p{
        font-size: 1.2rem;
        padding: 1.1rem 0.8rem 1.1rem 1.5rem;
    }

    a.btn_primary .dec_btn:first-of-type{
        left: -12%;
    }

    a.btn_primary .dec_btn:last-of-type{
        right: -12%;
    }

    .title_content.page_title{
        position: relative;
        margin-top: -5%;
    }

    .title_content.page_title .content_inside{
        margin-bottom: 5%;
        width: 90%;
    }

    .title_content.page_title h2 .title_inside{
        padding: 0 0.5rem 1rem 0.5rem;
    }

    section:nth-of-type(even) .dec_bg img{
        transform: translateX(-50%);
    }


    section .anchor{
        top: -2%;
    }

    .kv_bg .kv_icon:nth-of-type(1){
        width: 8.825%;
        left: 16.8%;
        top: 36.3%;
    }

    .kv_bg .kv_icon:nth-of-type(1) .icon{
        top: 3.2%;
    }

    .kv_bg .kv_icon:nth-of-type(2){
        width: 8.825%;
        left: 35.1%;
        top: 42.6%;
    }
    .kv_bg .kv_icon:nth-of-type(3){
        width: 8.825%;
        left: 1.875%;
        bottom: 24.2%;
    }

    .kv_bg .kv_icon:nth-of-type(4){
        width: 8.825%;
        right: 23.5%;
        top: 41%;
    }

    .kv_bg .kv_icon:nth-of-type(5){
        width: 8.825%;
        right: 13.75%;
        top: 45.54%;
    }

    .kv_bg .kv_icon:nth-of-type(6){
        width: 8.825%;
        right: 4.68%;
        top: 43%;
    }

    .section_kv .logo{
        bottom: 2%;
        right: 2%;
    }

    .block{
        padding-top: 167%;
    }

    /*.section_dialogue{
        margin-top: 167%;
    }*/
    .section_alert .item_alert{
        margin-top: -7%;
    }
/*    .section_alert .dec_bg img{
        transform: translateX(-50%);
    }*/

    .section_alert .alert_icon{
        width: 5rem;
    }
    .section_alert .title_content h2{
        padding: 2.5rem 0.5rem 0 0.5rem;
    }

    .section_alert .alert_content .alert_btn{
        padding: 1.25rem 0;
    }

    .section_lattitude .title_content{
        background: #B5EEE1;
    }

    .section_dialogue .item_dialogue  .dialogue_head{
        width: 3.5rem;
    }

    .section_dialogue .item_dialogue .dialogue_content{
        border-radius: 1.5rem;
        padding: 0.6rem 0.8rem;
        margin: 1rem 1rem 0 1rem;
    }

    .section_dialogue .item_dialogue .dialogue_content::before{
        top: 0.4rem;
    }

    .section_lattitude .container_feature .btn_tab span{
        padding: 0.5rem 0;
        height: 2.5em;
        display: flex;
        display: -ms-flexbox;
        align-items: center;
    }

    .section_lattitude .container_feature  .btn_tab{
        text-align: center;
        flex-direction: column;
        padding: 0.2rem;
        margin: 0 0.1rem;
        border-radius: 1.6rem;
    }

    .section_lattitude .container_feature .btn_tab img{
        width: 4rem;
        margin-top: 0.5rem
    }

    .section_lattitude .container_product .tab_content{
        padding-top: 3rem;
    }

    .section_lattitude .container_product .item_product{
        border-radius: 1.3rem;
        padding: 0  0.3rem  0.3rem 0.3rem;
    }


    .section_lattitude .container_product .product_info{
        padding: 1rem;
    }

    .section_lattitude  .container_product .product_eco img{
        display: inline-block;
    }

    .section_lattitude  .container_product .product_eco p{
        display: inline;
        line-height: 1.5;
        margin-left: 0.3rem;
    }

    .container_product .product_eco img{
        width: 2rem;
        height: auto;
        flex: 0 0 2rem;
    }
    .section_lattitude .container_product .btn_tab{
        margin: 0 0.2rem;
        width: 4.5rem;
        height: 4.2rem;
        flex: 0 0 4rem;
        border-width: 1px;
    }

    .section_lattitude .container_product{
        padding-top: 25%;
    }

    .section_xps .row_special{
        align-items: flex-start;
        padding-top: 3%;
    }

    .section_xps .container_feature{
        padding-top: 18%;
    }

    .section_xps .container_feature > .anchor{
        top: 0;
    }


    .section_xps .container_feature a.btn_tabXps{
        width: 32%;
        padding: 0.5rem;
    }

    .section_xps .container_feature a.btn_tabXps ~ a.btn_tabXps{
        margin-left: 1.3%
    }

    .section_xps .container_feature a.btn_tabXps p{
        margin-bottom: 0.4rem;
    }

    .section_xps .item_info img{
        width: 5rem;
    }

    .section_xps .row_special:nth-of-type(2) .item_info{
        width: 95%;
    }

    .section_xps .row_special:nth-of-type(2) .item_info .btn_secondary{
        padding: 0.4rem 1rem 0.4rem 1.4rem;
    }

    .section_xps .row_special:nth-of-type(2) .item_info .btn_secondary .btn_arrow{
        margin-left: 0.2rem;
    }

    .section_esg > .anchor{
        top: -5%;
    }

    .section_esg .dec_bg img{
        transform: translateX(-25%);
    }


    .section_survey .dec_bg img{
        transform: translateX(-50%);
    }

    .section_survey .container_footer .dec_bg img{
        transform: translateX(-25%);
    }
    .info_modal .content_inner{
        padding: 1.3rem;
    }
    .media_modal .content_inner {
        padding: 1rem;
    }
    .box_modal .dec{
        width:  8rem;
    }

    .pic_modal .content_inner{
        padding: 1.5rem 0.6rem;
    }
}

@media screen and (min-width:768px) {
	html,
    body {
        font-size: 1.3vw;
        letter-spacing: 0.1em;
    }
    .container {
        width: 90%;
    }

    .s_br {
        display: none;
    }
    .btn_arrow{
        width: 1.3rem;
        height: 1.3rem;
    }
    .title_content.page_title{
        position: absolute;
        width:  100%;
        height: 100%;
    }
    .title_content.page_title .content_inside{
        margin-bottom: 1.5%;
    }
    .title_content.page_title h2 .title_inside{
        padding: 0 2.5rem 1rem 2.5rem;
    }

    section .anchor{
        top: -4%;
    }

    .kv_bg .kv_icon:nth-of-type(1){
        width: 4.94%;
        left: 18.4%;
        top: 20.5%;
    }

    .kv_bg .kv_icon:nth-of-type(2){
        width: 4.722%;
        left: 23.75%;
        top: 31.4%;
    }
    .kv_bg .kv_icon:nth-of-type(3){
        width: 4.94%;
        left: 15.5%;
        bottom: 23.88%;
    }
    .kv_bg .kv_icon:nth-of-type(4){
        width: 4.11%;
        right: 21.8%;
        top: 40%;
    }

    .kv_bg .kv_icon:nth-of-type(5){
        width: 4.45%;
        right: 17.29%;
        bottom: 34%;
    }
    .kv_bg .kv_icon:nth-of-type(6){
        width: 4.45%;
        right: 11.7%;
        top: 42.9%;
    }

    .section_kv .logo{
        top: 80%;
        right: 2%;
    }

    .block{
       padding-top: 64%;
    }

   /* .section_dialogue{
        margin-top: 64%;
    }*/

    .section_dialogue .item_dialogue  .dialogue_head{
        flex: 0 0 6rem;
    }

    .section_dialogue .item_dialogue .dialogue_content{
        padding: 1rem 1.5rem;
    }
    .section_alert .item_alert{
        margin-top: -12%;
    }
    .section_alert .title_content h2{
        padding: 3.5rem 0.5rem 0 0.5rem;
    }

    .section_lattitude .btn_tab span{
        padding: 0 1rem;
    }

    .section_lattitude .btn_tab img{
        width: 4.9rem;
        flex: 0 0 4.9rem;
    }


    .section_lattitude .container_product .tab_content{
        padding-top: 4rem;
    }

    .section_lattitude  .container_product .product_eco{
        display: flex;
        display: -ms-flexbox;
        align-items: center;
    }

    .section_lattitude .container_product .product_info{
        padding: 0.5rem;
    }

    .section_lattitude .container_product .col-12:nth-of-type(2) .product_info {
        margin-right: 0.5rem;
    }
    .section_lattitude .container_product .col-12:nth-of-type(3) .product_info{
        margin-left: 0.5rem;
    }

    .section_xps .container_feature .item_content{
        padding-left: 2rem;
    }

    .section_xps .container_feature a.btn_tabXps{
        width: 10.5rem;
        margin: 0 1rem;
    }


    .section_kol > .anchor{
        top: -10%;
    }

    .section_esg > .anchor{
        top: -10%;
    }

    .section_survey .item_award{
        width: 85%;
    }

    .info_modal .item_info .title{
        text-align: left;
    }

    .box_modal .container .item_pic{
        width:  80%;
        margin: auto;
    }



}

@media screen and (min-width:992px) {

    html,
    body {
        font-size: 1.3vw;
        letter-spacing: 0.1em;
    }

    h2{
        font-size: 2.75rem;
        line-height: 1.45;
    }

    .container {
        width: 90%;
    }

    .media_modal .modal_content{
        width: 80%;
    }
}


@media screen and (min-width:1366px) {

    html,
    body {
        font-size: 1.15vw;
        letter-spacing: 0.05em;
    }

    .xx_br{
        display: block;
    }
    h3{
        font-size:  2.5rem;
    }

    h4{
        font-size:  1.75rem;
    }

    h5{
        font-size:  1.5rem;
    }

    p{
        font-size:  1.2rem;
    }
    a.btn{
        font-size:  1.3rem;
    }

    ul.list{
        font-size: 1rem;
    }

    p.note{
        font-size: 0.85rem;
        color: #555;
    }



    .box_modal{
        width:  75%;
    }
    .pic_modal .item{
        width:  95%;
        margin: auto;
    }
}

@media screen and (min-width:1600px) {

    html,
    body {
        font-size: 0.9vw;
    }

    .container {
        width: 75%;
    }
    ul.list{
        letter-spacing: 0;
    }

    .pic_modal .item{
        width:  80%;
        margin: auto;
    }

}