html,
body {
    font-size: 2.8vw;
    letter-spacing: 0.03em;
}

button{
    background: transparent;
}

body {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    font-family: "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
    font-weight: 400;
    color: #fff;
    background: #042359;
}

img {
    display: block;
    width: 100%;
    height: auto;
}


/*pc 80px*/
h2{
    font-size: 1.82rem;
}

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

h2 p.sub_title{
    font-size: 0.7em;
    letter-spacing: 0.03em;
}

/*pc 152px*/
.section_what h2{
    font-size: 4.2rem;
}

/* m 40px*/ 
.title_hexagon h2 p,
.title_square h2 p,
.title_width h2 p{
    font-size:  2.35rem;
    font-weight: 800;
}


/*m 30px*/
.section_structure h3.card_title p{
    font-size: 2rem;
}


/*m 20px*/
.card_title h3 p,h3.card_title p,.section_survey h3.info p,.section_survey h3.info p,
a.btn_primary{
    font-size: 1.6rem;
    font-weight: 550;
}


/*m 18px*/
.section_what h3.content,h4.second_title,.info_block h4,h4.card_text p,h4.award_name{
    font-size: 1.28rem;
}

h4:has(.list_info),.inner_text h4 p{
    font-size:  1.1rem;
    font-weight:  400;
}

h4 p{
    font-size: 1em;
}

h5{
    font-size: 1.3rem;
}

h5 p{
    font-size: 1em;
}

p{
    font-weight: 600;
}

p.notice,span.notice,
.section_survey .section_info h3 p.notice,
.section_survey .section_info h3 span.notice {
    font-size: 1rem;
    font-weight: 400;
}


a.btn_link{
    text-decoration: underline;
}

a.btn_primary{
    position: relative;
    display: flex;
    display: -ms-flexbox;
    align-items:  center;
    justify-content: center;
    padding: 1rem 0.6rem 1rem 1.5rem;
    color: #fff;
    border-radius: 100px;
    overflow: hidden;
    font-weight: 600;
    z-index: 3;
    transition: all ease .3s;
}

a.btn_primary::before{
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, #0C3299 0%, #0972C0 70% , #54ace8 100%);
    z-index: 0;
    transition: all ease .3s;
}

a.btn_primary span{
    position: relative;
    z-index: 2;
}

a.btn_primary .arrow_icon{
    display: block;
    margin-left: 0.8rem;
    width: 1.6rem;
    max-width: 45px;
    min-width: 23px;
    background: #fff;
    border-radius: 100%;
}

ul.list_info{
    margin-left: 0.2em;
    line-height: 1.5;
}

ul.list_info li{
    list-style: none;
    padding-left: 1.1em;
    margin-bottom:  0.5rem;
    font-weight: 400;
}

ul.list_info li::before{
    content: "◆ ";
    margin-left: -1.1em;
}

ul.list_info li span{
}

.header_nav.is-active{
    background: rgba(2,16,39,0.85);
    backdrop-filter: blur(1rem);

}

.section_kv{
    min-height: 95vh;
}

.section_kv h1{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
    color: transparent;
}

section ~ section{
    padding-bottom: 5%;
}

section{
    position: relative;
}

section .anchor,
.section_content .anchor{
    position: absolute;
    top: -10%;
}

section .bg{
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    margin: auto;
}

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

.section_what{
    position: relative;
    padding-top: 3.5%;
}

.section_what .info_content{
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    flex-direction: column;
}

.section_what h2{
    position: relative;
    font-weight: bold;
    font-style: italic;
    color: #dcf0ff;
    font-weight: 700;
    text-align: left;
    z-index: 1;
}

.section_what h2 p:nth-of-type(1),.section_what h2 p:nth-of-type(3){
    position: absolute;
    top: 0;
    left: 0;
}


.section_what h2 p:nth-of-type(1){
    transform: translate( -27%, -55%);
    filter: blur(0.2rem);
    opacity: 34%;
    z-index: 0;
    width: 0;
    border-right: 1px solid transparent;
}


.section_what .aos-animate  h2 p:nth-of-type(1){
    width: 3.3em;
    animation: typing .5s steps(5, end), blink-caret .6s step-end ;
}



.section_what h2 p:nth-of-type(2){
    position: relative;
    z-index: 1;
    width: 0;
}

.section_what .aos-animate  h2 p:nth-of-type(2){
    width: 7.2em;
    animation: typing 1.2s .8s steps(15, end) backwards;
}


.section_what h2 p:nth-of-type(3){
    transform: translate(0.35rem, 0.35rem);
    color: #0d2255;
    text-shadow: 0 0 2px #dcf0ff;
    z-index: 0;
    opacity: 41%;
    width: 0;
} 

.section_what .aos-animate h2 p:nth-of-type(3){
    width: 7.2em;
    animation: typing 1.2s .8s steps(15, end) backwards;
}

.section_what h2 p{
    position: relative;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
}

.section_what h2 p ~ p::after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content:"";
    display: block;
    width: 1px;
    height: 0.9em;
    border-right: 1px solid transparent;
}

.section_what .aos-animate h2 p ~ p::after{
    animation: blink-caret 1.8s .8s step-end;
}

.section_what .content{
    text-align: center;
    line-height: 2em;
    margin-bottom: 5%;
}

.section_what .content span{
    font-size: 1.35em;
    color: #eab15e;
    border-bottom: 0.2rem solid #eab15e;
}

.section_what .card_content{
    position: relative;
    display: flex;
    display: -ms-flexbox;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 1;
}

.section_what .img_card{
    animation: downtoup-play 1.5s ease-in-out infinite alternate;
}

.section_what .product_content{
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}

.section_what .what_bg{
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    margin: auto;
}

section .title_hexagon{
    position: relative;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
}

section .title_hexagon .title_front{
    position: relative;
    width: 7.5rem;
    height: 7.5rem;
    margin-right: 0.5rem;
    flex: none;
}

section .title_hexagon .title_front p{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    color: #fff;
    font-size: 1.785rem;
}

section .title_hexagon h2{
    position: relative;
    padding-right: 1.5em;
    text-align: center;
}

section .title_hexagon h2 p{
    font-weight:  900;
    background: linear-gradient(180deg, #FCFDFF 30%, #8BC4F4 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

/*section .title_hexagon h2 p:nth-of-type(2){
    position: absolute;
    top: 0; 
    left: 0; 
}*/

section .title_hexagon h2::after{
    position: absolute;
    content:"";
    display: block;
    height: 5.28rem;
    width: 100%;
    top: 0;
    bottom: 0;
    left: -3rem;
    margin: auto;
    transform-origin: center;
    background: url("../images/title_bg.png") no-repeat;
    background-size: 100% 100%;
    z-index: -1;
}

.section_structure{
    position: relative;
}

.section_structure .bg{
    top: -10%;
}

.section_structure .dec{
    text-align: right;
    font-style: italic;
    opacity: 0.3;
}

.section_structure .row_card{
    justify-content: center;
    align-items: stretch;
    padding: 4% 0 0 0;
}

.section_structure .col-card{
    margin: 1rem;
}

.section_structure .item_card{
    padding: 1.25rem 0.85rem;
    box-sizing: border-box;
    height: 100%;
    border-radius: 1.32rem;
    background: linear-gradient(38deg, #0C3299 1.99%, #0972C0 98.01%);
    transition: all ease .3s;
}


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

.section_structure .card_title{
    margin-bottom: 1rem;
    text-align: center;
}

.section_structure .card_title p::after{
    content:"";
    display: block;
    width: 4em;
    height: 0.15rem;
    background: #fff;
    margin: auto;
}

.section_structure .item_card .card_text p{
    font-weight: 400;
    text-align: justify;
}

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

.section_multiple .item_platform img ~ img{
    margin-top: 0.5rem;
}

.section_multiple .row_card{
    margin-top: 5%;
    animation:  glow 2s ease forwards infinite;
}


.section_efficacy{
}

.section_efficacy .content_efficacy .row{
    justify-content: center;
}

.section_efficacy .content_efficacy .row:nth-of-type(2){
    transform: translateY(-18%);
}

.section_efficacy .content_efficacy .item_block{
    position: relative;
    margin: 0.5rem;
    animation:  glow2 2s ease forwards infinite;
}

.section_efficacy .content_efficacy .block_info{
    position: absolute;
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(4%);
    text-align: center;
    z-index: 1;
}

.section_efficacy .content_efficacy .info_time{
    position: relative;
    width: 100%;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
}

.section_efficacy .content_efficacy .info_time::after{
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    margin: auto;
    width: 70%;
    height: 0.07rem;
    background: #fff;
}

.section_efficacy .content_efficacy .info_time .bigger{
    font-size: 1.5em;
}

.section_efficacy .content_efficacy .info_space{
    color: #80bef2;
    margin-bottom: 0.5rem;
}

.section_efficacy .content_efficacy .notice{
    text-align: center;
    margin-top: 2rem;
}


section .title_square{
    position: relative;
    padding: 1.2rem 0;
    margin: 2% auto 6% auto;
    text-align: center;
}

section .title_square .block_line{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: calc(100% - 6rem);
    height: 100%;
    border: 0.2rem solid rgba(12, 50, 154, 1);
    border-image: linear-gradient(90deg ,rgba(12, 50, 154, 1) 0%, rgba(9, 114, 193, 1) 100%);
    border-image-slice: 1;
    border-width: 0.2rem;
}

section .title_square .block_line:nth-of-type(1){
    transform: translate(0.6em,-0.3em) skew(-30deg);
}

section .title_square .block_line:nth-of-type(2){
    transform: translate(-0.6em,0.3em) skew(-30deg);
}

section .title_square .square_dec{
    position: absolute;
    width: 3.28rem;
}

section .title_square .square_dec:nth-of-type(1){
    transform: scale(-1);
    top: -0.6rem;
    left: 0;
}

section .title_square .square_dec:nth-of-type(2){
    bottom: -0.6rem;
    right: 0;
}

.section_content{
    position: relative;
}


.section_content .content_card{
    position: relative;
}

.section_content .content_card::after,.section_content .content_card::before{
    position: absolute;
    content:"";
    display: block;   
}

.section_content .card_title{
    position: absolute;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-50%);
    z-index: 2;
}

.section_content .card_title h3{
    position: relative;
    padding: 0.5rem 2rem;
    border-radius: 1rem;
    background: url("../images/title_cardbg.png") no-repeat;
    background-size: 100% 100%;
}

.section_content .card_title h3::before,.section_content .card_title h3::after{
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: auto;
}

.section_content .card_title h3 p{
    position: relative;
    z-index: 2;
}

/*.section_content .card_title h3::before{
    background: linear-gradient(90deg, #071E27 0%, #061116 15.00%, #05090C 31.00%, #050709 51.00%, #05090C 72.00%, #071116 90.00%, #0A1A20 100%);
    background-blend-mode: screen;
    mix-blend-mode: screen;
    z-index: 1;
}*/

.section_content .card_title h3::after{
    border-radius: 1rem;
    border: 0.15rem solid #C8FEFF;
    box-shadow: 0 0 0.2rem 0.1rem rgba(93, 138, 207, 0.8),0 0 0.6rem 0.02rem #C8FEFF,0 0 1rem 0.1rem  #C8FEFF inset, 0 0 2rem 0.2rem  rgba(32, 77, 179, 0.8) inset ;
}


.section_content .card_info{
    position: relative;
    padding: 2rem;
    border-radius: 3rem;
    background: url("../images/efficacy_card-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


.section_content .card_info::before{
    content:"";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border: 0.08rem solid #CFFFFF;
    
    z-index: 0;
}

.section_content .card_info .second_title{
    margin: 1rem 0 1.5rem 0;
    text-align: center;
    line-height: 1.5;
}


.section_content .card_info .item{
    position: relative;
    z-index: 2;
}

.content_manager .info_arrow{
    display: flex;
    display: -ms-flexbox;
    justify-content: flex-start;
}

.content_manager .arrow{
    position: relative;
    text-align: center;
    width: 8.2rem;
    padding: 1rem 0 0 0;
    margin: 2rem 0;
}


.content_manager .arrow p{
    position: relative;
    z-index:  1;
}

.content_manager .arrow::before{
    content:"";
    display: block; 
    position: absolute;
    top: 0; 
    bottom: 0;  
    left: 0;    
    right: 0;
    width: 68.25%;
    background: #0672cb;
    border-radius: 0 0 10px 10px;
    margin: auto;
    z-index: 0;
}

.content_manager .arrow::after{
    position: absolute;
    bottom: 0;  
    left: 0;    
    right: 0;   
    content:"";
    display: block; 
    width: 0;   
    height: 0;  
    margin: auto;
    border-width: 3.7rem 4.1rem 0 4.1rem;
    border-style: solid;
    border-color: #0672cb transparent #0672cb transparent ;
    transform: translate(0,60%);
    z-index:  0;
}

.content_manager .arrow span.bigger{
    font-size: 2.1em ;
    font-weight: 400;
}

.content_manager .arrow p:nth-of-type(2){
    font-size: 1.42rem;
}



.content_service .block_inner{
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: space-evenly;
}

.content_service .info_block{
    position: relative;
    padding:  1.5rem 1.2rem 0.8rem 0;
    background:  #0672cb;
}

.content_service .info_block ~ .info_block{
    margin-top: 3rem;
}

.content_service .info_block .block_title{
    position: absolute;
    right: 1.2rem;   
    top: 0; 
    padding: 0.3rem 0.5rem 0.2rem 0.5rem;
    transform: translateY(-50%);
    color: #0672cb;
    background: #fff;
    border: 0.2rem solid #0672cb;
    z-index:  2;
}

.content_service .info_block:nth-of-type(2) .block_title{
    right: initial;
    left: 1.2rem;
}

.content_service .block_inner::after{
    content:"";
    position: absolute;
    top: 0; 
    left: 0;    
    right: 0;   
    bottom: 0;  
    margin: auto;
    content:"";
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    background: linear-gradient(135deg, #549EDB 0%, rgba(84, 158, 219, 0.5) 30%, rgba(84, 158, 219, 0.5) 70%, #549EDB 100%);
    filter: blur(0.4rem);
    z-index: 0;
}

.content_service .info_block .inner_text p{
    text-align: justify;
    line-height: 1.4;
}


.content_service .block_inner .inner_info{
    position: relative;
    z-index: 2;
}

.content_service .block_inner .inner_icon{
    flex: none;
    width: 9rem;
}

.content_service .block_inner .title{
    position: relative;
    padding-bottom:  0.5rem;
    margin-bottom:  0.7rem;
}

.content_service .block_inner .title::after{
    position: absolute;
    bottom: 0;  
    left: 0;    
    content:"";
    display: block; 
    width:  4.6rem;
    height:  0.14rem;
    background: #fff;
}

.content_service a.btn_primary{
    position: absolute;
    bottom: -0.15rem;
    transform: translateY(50%);
}

.section_vxrail{
    position: relative;
    text-align: center;
}

.section_vxrail .bg{
    position: absolute;
    top: -8%;
    bottom: 0;
    margin: auto;
    z-index: -1;
}

.section_vxrail .section_info{
    position: relative;
}

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

.section_vxrail .card_title{
    padding: 0.5rem;
    border-bottom: 0.2rem solid #fff;
}

.section_vxrail  .item_inner .card_title{
    opacity: 0;
}

.section_vxrail ul.info_text{
    list-style: none;
}

.section_vxrail ul.info_text li{
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    padding: 0.8rem;
    border-bottom: 1px dashed rgba(255,255,255,0.5);
}

.section_vxrail ul.info_text li:last-of-type{
    border-bottom: none;
}

.section_vxrail .item{
    padding: 1rem 1rem 0.5rem 1rem;
}

.section_vxrail .item_card{
    position: relative;
    border-radius: 1.25rem;
    background: #2282D1;
}

.section_vxrail .card_stamp{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

[data-aos=zoom-out]{
    transform: scale(3);
}

.section_vxrail .col-vxrail:nth-of-type(1) .item_card{
    background: linear-gradient(46deg, #0C3299 0%, #0972C0 100%);
}

.section_vxrail .btn_primary{
    margin-top: 2rem;
}

.section_dynamic{
    position: relative;
}

.section_dynamic::after{
    content:"";
    display: block;
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    width: 80%;
    height: 0;
    margin: auto;
    padding-bottom: 42%;
    background: radial-gradient(50.25% 49.27% at 50.00% 50.01%, #6BC1F8 0%, rgba(0, 116, 201, 0.00) 100%);
    z-index: -1;
}

.section_dynamic .bg{
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: auto;
    z-index: -1;
}

.section_dynamic .section_info{
    text-align: center;
    line-height: 1.5;
}

.section_dynamic .section_product{
    margin: 8% auto;
}


.section_dynamic .row{
    justify-content: center;
    margin: 0 -0.5rem;
}

.section_dynamic .col-card{
    margin: 0.5rem 0;
}

.section_dynamic .col-card:nth-of-type(1) .item.aos-animate{
    animation:  glow4 1s .5s ease forwards, glow 2s 2.5s ease forwards infinite;
}

.section_dynamic .col-card:nth-of-type(2) .item.aos-animate{
    animation:  glow4 1s 1s ease forwards, glow 2s 2.5s ease forwards infinite ;
}

.section_dynamic .col-card:nth-of-type(3) .item.aos-animate{
    animation:  glow4 1s 1.5s ease forwards, glow 2s 2.5s ease forwards infinite ;
}

.section_dynamic .col-card .item{
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    align-items: center;
    margin: 0 0.5rem;
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(37deg, #0C3299 0%, #0972C0 100%);
}

.section_dynamic .col-card .item .card_title{
    margin-bottom: 1rem;
    text-align: center;
}

.section_dynamic .col-card .item .card_title p{
    margin-bottom: 0.2rem;
}

.section_dynamic .col-card .item .card_title::after{
    content:"";
    display: block;
    width: 7.46rem;
    height: 0.15rem;
    background: #fff;
    margin: auto;
}

.section_title.title_width{
    position: relative;
    padding: 0.8rem 0;
    margin: auto;
    width: 90%;
    max-width: 1200px;
    text-align: center;
    color: #fff;
    background: linear-gradient(90deg, rgba(0, 116, 201, 0.00) 0%, rgba(22, 128, 206, 0.15) 3%, rgba(52, 145, 213, 0.35) 8%, rgba(78, 159, 220, 0.52) 12%, rgba(100, 172, 225, 0.67) 17%, rgba(118, 182, 230, 0.79) 23%, rgba(132, 190, 233, 0.88) 28%, rgba(142, 195, 236, 0.95) 34%, rgba(148, 198, 237, 0.99) 41%, #96C8EE 51%, rgba(147, 198, 237, 0.99) 59%, rgba(141, 195, 235, 0.94) 65%, rgba(130, 188, 233, 0.87) 72%, rgba(114, 180, 229, 0.77) 77%, rgba(94, 169, 224, 0.63) 83%, rgba(70, 155, 218, 0.47) 88%, rgba(41, 139, 211, 0.27) 94%, rgba(8, 120, 203, 0.06) 99%, rgba(0, 116, 201, 0.00) 100%);
}

.section_title.title_width h2{
    position: relative;
    z-index: 2;
}

.section_title.title_width::before{
    position: absolute;
    content:"";
    display: block;
    width: 100%;
    height: calc(100% - 0.4rem);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: linear-gradient(90deg, rgba(0, 116, 201, 0.00) 0%, rgba(3, 117, 201, 0.11) 4%, rgba(14, 121, 204, 0.42) 17%, rgba(22, 125, 206, 0.67) 28%, rgba(28, 127, 207, 0.85) 38%, rgba(32, 129, 208, 0.96) 46%, #2282D1 51%, rgba(31, 129, 208, 0.93) 57%, rgba(25, 126, 206, 0.74) 67%, rgba(15, 122, 204, 0.45) 81%, rgba(1, 116, 201, 0.04) 98%, rgba(0, 116, 201, 0.00) 100%);
    z-index: 0;
}

.section_media{
    padding: 2% 0 12% 0;
}

.section_media .row{
    padding: 3% 0;
    flex-wrap: nowrap;
    transform: translateX(5%) scale(1.1);
}

.section_media .item_media .media_info{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 94.5%;
    margin: auto;
}

.section_media .item_media{
    position: relative;
    animation: downtoup-play 1.5s ease-in-out infinite alternate;
}

.btn_media{
    display: block;
    transition: all ease .3s;
}

.section_media .col-media:nth-of-type(2){
    transform: translate(-19.5%,66%);
    z-index: 1;
}

.section_media .col-media:nth-of-type(3){
    transform: translate(-38.4%,27.3%);
    z-index: 0;
}

.section_media .col-media:nth-of-type(4){
    transform: translate(-35.5%,56.4%);
    z-index: 0;
}

.section_survey{
    text-align: center;
    background: linear-gradient(180deg, #0D2255 1.89%, #0C3299 27.7%, #0972C0 54.56%);
}

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

.section_survey .item_award{
    animation: glow 2s 2.5s ease forwards infinite;
}

.section_survey .section_info{
    padding: 5% 0;
    line-height: 1.5;
}

.section_survey  .award_name{
    margin: 0.5rem 0;
}

.section_survey  .btn_survey{
    margin: 3% 0;
    font-size: 2.5rem;
    box-shadow: 0.14rem 0.14rem 0.3rem rgba(7, 33, 93, 0.8);
}

footer {
    background: linear-gradient(180deg, #04193C 0%,#042E5F 60%, #004596 100%);
}


.box_modal .container{
    width:  100%;
}

.box_modal .btn_close{
    width: 3em;
    min-width: 42px;
    height: 3em;
    min-height: 42px;
    background: #0A4BA8;
}

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

.box_modal .modal_content{
    position: relative;
    padding: 1.66rem;
    width: 92%;
}

.box_modal .modal_content .dec{
    position: absolute;
    width: 10%;
    min-width: 5.5rem;
}

.box_modal .modal_content .dec:nth-of-type(1){
    top: 0;
    left: 0;
}

.box_modal .modal_content .dec:nth-of-type(2){
    bottom: 0;
    right: 0;
}

.box_modal .content_inner{
    position: relative;
    padding: 3rem;
    background: #fff;
}

.info_modal .content_inner{
    max-height: 80vh;
    color: #333;
}

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

.info_modal .content_inner ul.list{
    margin-left: 1.2em;
}

.info_modal .content_inner ul.list  li{
    line-height: 1.6;
    margin-bottom: 0.5em;
}

.award_modal .content_inner{
    padding: 0;
    background: transparent;
    max-width: 1200px;
    margin: auto;
}

.award_modal .btn_close{
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #fff;
    border-radius: 100%;
    min-width: 35px;
    min-height: 35px;
}

.award_modal .btn_close::before, .award_modal .btn_close::after {
    border-top: 2px solid #0A4BA8;
}


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

    .container{
        width: 92%;
        margin: auto;
    }

    .b_br {
        display: none;
    }

    .pc_block,.kv_pc{
        display: none;
    }

    ul.list_info li::before{
        font-size: 0.7em;
        display: inline-block;
        vertical-align: middle;
        margin-left: -1.5em;
        padding-right: 0.5em;
        margin-bottom: 0.1em;
    }

    .section_what h2{
        margin-left: 5%;
        margin-bottom: 1rem;
    }

    section .bg{
        width: 160%;
        transform: translateX(-20%);
    }


    .section_what .card_content .content{
        display: none;
    }

    .section_what .product_content{
        margin-top: -10%;
    }

    .section_what .img_card{
        width: 45%;
    }

    .section_what .what_bg{
        width: 160%;
        bottom: 5%;
        transform: translateX(-20%);
    }

    section .title_square .block_line{
        width: calc(100% - 4rem);
    }

    section .title_square .square_dec{
        width: 2.4rem;
    }

    .section_structure .dec p{
        font-size: 3.57rem;
        padding-right: 0.2em;
    }

    .section_structure .col-pic{
        order: 1;
    }

    .section_structure .col-card:nth-of-type(1){
        order: 2;
    }

    .section_structure .col-card:nth-of-type(2){
        order: 3;
    }

    .section_structure .col-card:nth-of-type(3){
        order: 1;
    }

    .section_structure .col-card {
        margin: 0.6rem;
    }

    .section_structure .item_card{
        padding: 1rem 0.7rem 1rem 0.8rem;
    }

    .section_structure .col-info{
        order: 2;
        padding-left: 0.8rem;
    }

    .section_structure .card_title{
        text-align: left;
    }

    .section_structure .card_title p::after{
        margin: inherit;
    }

    .section_structure .item_card .card_text p{
        letter-spacing: -0.01em;
    }

    .section_multiple .row_product{
        justify-content: space-between;
    }

    .section_multiple .col-cloud{
        padding: 3% 0;
    }

    .section_multiple .col-product{
        order: 3;
        margin: auto;
    }

    .section_efficacy .content_efficacy .row{
        margin: 0 -0.5rem;
    }

    .section_efficacy .content_efficacy .item_block{
        margin: 0.4rem;
    }

    .section_efficacy .content_efficacy .block_info{
        transform: scale(0.9) translateY(3%);
    }


    .section_efficacy .section_content{
        animation:  glow2 1.8s ease forwards infinite;
    }

    .section_content{
        padding: 8% 0;
    }


    .section_content .content_card{
        padding: 0rem;
        border-radius: 2rem;
        background: linear-gradient(225deg, #65A6E4 0.53%, rgba(222, 245, 255, 0.75) 2.65%, rgba(0, 77, 191, 0.00) 14.68%, rgba(0, 10, 102, 0.00) 82.30%, #E8FFFF 96.42%, #87BEFF 97.96%);
        box-shadow: 0px 0px 0.05rem 0 rgba(84, 146, 212, 1) , 0px 0px 0.4rem 0.01rem #0057C7 inset;
    }

    .section_content .content_card::after{
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: calc(100% - 0.3rem);
        height: calc(100% - 0.3rem);
        border-radius: 2.2rem;
        border: 1px solid #C2F4FF;
        box-shadow: 0px 0px 0.1rem 0px #B7E5FF;
    }

    /*.section_content .content_card::before{
        right: 0;
        top: 10%;
        width: 0.4rem;
        height: 70%;
        background: linear-gradient(180deg, rgba(45, 101, 181, 0.00) 0%, rgba(18, 57, 125, 1) 68.56%, rgba(18, 57, 125, 0.00) 100%);
    }*/

    .section_content .card_info{
        padding: 2.5rem 1rem 1.5rem 1rem;
        border-radius: 2rem;
        background-image: url("../images/efficacy_card-bg_m.jpg");
        background-size: cover;
    }



    .section_content .card_info .row{
        justify-content:  center;
    }

    .section_content .card_info::before{
        border-radius: 2rem;
        border-width: 1px;
        box-shadow: 0px 0px 0.3rem 0.08rem #FFF inset,0px 0px 2rem 0.1rem  #0085FF inset,  0px 0px 0.2em 0.1rem #BBFFFF;
    }



    /*.section_content .content_card::after{
        animation:  glow3 1.8s ease forwards infinite;
    }*/



    .content_manager .col-info:nth-of-type(1){
        order:2;
        margin-top: 1.5rem;
    }

    .content_manager .col-info .row{
        justify-content: space-between;
    }


    .content_manager .arrow{
        transform: scale(0.96);
        transform-origin: right;
        margin: 0.5rem 0 1rem 0;
    }




    .content_service .card_info{
        padding-bottom: 4rem;
    }

    .content_service .item_pic{
        margin-bottom: 10%;
    }

    .content_service .block_inner .inner_info{
        padding: 0 0.5rem;
    }

    .section_vxrail .section_product{
        width: 80%;
        margin: 0 auto 10% auto;
    }


    .section_vxrail .item{
        padding: 0.5rem 0.2rem 0.5rem 0.2rem;
    }

    .section_vxrail ul.info_text li:nth-of-type(3),
    .section_vxrail ul.info_text li:nth-of-type(6){
        height: 2.6em;

    }

    .section_vxrail ul.info_text li:nth-of-type(1),
    .section_vxrail ul.info_text li:last-of-type{
        height: 3.6em;
    }

    .section_vxrail .card_stamp{
        width: 5rem;
        transform: translate(-15%, -60%);
    }

    .section_dynamic::after{
        width: 95%;
    }

    .section_dynamic .section_product{
        width: 100%;
    }

    .section_dynamic .col-card .item{
        padding: 1rem 0.5rem;
        letter-spacing: -0.005em;
        min-height: 12rem;
    }

    .section_dynamic .col-card .item .card_title{
        letter-spacing: -0.01em;
    }

    section.section_media .anchor{
        top: -15%;
    }

    .section_award .col-award:nth-of-type(2){
        transform: translateY(50%);
    }

    .section_award .col-award:nth-of-type(3){
        transform: translateX(-40%);
    }

    .box_modal{
        height: 90vh;
    }

}

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

    .s_br {
        display: none;
    }

    .m_block,.kv_m{
        display: none;
    }

    .container {
        width: 95%;
    }

    .section_what .info_content .content{
        display: none;
    }

    .section_what .product_content{
        margin-top: -4%;
    }

    .section_what .img_card{
        width: 27.8%;
    }

    .section_what .product_content{
        width: 68%;
        transform: translateY(-15%);
    }

    .section_what .what_bg{
        bottom: 8%;
    }

    .section_content{
        padding: 3.5% 5%;
    }

    section .title_square{
        width: 90%;
    }

    .section_structure .dec p{
        font-size: 4.53rem;
    }

    .section_structure .item_card .item_pic{
        margin: 1rem 0;
    }

    .section_multiple .row_product{
        align-items: flex-end;
        margin-top: -3%;
    }

    .section_efficacy .bg{
        top: -16%;
    }


    .section_efficacy .section_content{
        animation:  glow2 2.2s ease forwards infinite;
    }

    .section_content .content_card::after,.section_content .content_card::before{
        animation:  glow3 2.2s ease forwards infinite;
    }

    .section_content .content_card{
        padding: 0.7rem 0.9rem 0.9rem 0.7rem;
        border-radius: 3.2rem;
        background: linear-gradient(225deg, #65A6E4 0.53%, rgba(222, 245, 255, 0.75) 2.65%, rgba(0, 77, 191, 0.00) 14.68%, rgba(0, 10, 102, 0.00) 82.30%, #E8FFFF 96.42%, #87BEFF 97.96%), linear-gradient(135deg, rgba(113, 178, 255, 0.80) 0%, rgba(198, 224, 255, 0.80) 4.70%, rgba(0, 70, 146, 0.5) 14.57%, rgba(0, 5, 129, 0.5) 30.06%, rgba(0, 19, 116, 0.5) 66.99%, rgba(0, 70, 146, 0.5) 88.24%, rgba(196, 230, 255, 0.80) 98.64%), url("../images/efficacy_card-bg.jpg"), lightgray 50% / cover no-repeat;
        box-shadow:  0px 0px 0.357rem 0.02rem #0057C7 inset, 0 0 0.8rem rgba(59, 144, 243, 1);
        /*    filter: drop-shadow(0 0 0.8rem rgba(59, 144, 243, 1));*/
    }

    .section_content .content_card::after{
        top: -0.2rem;
        bottom: 0;
        right: 0;
        left: -0.1rem;
        margin: auto;
        width: calc(100% - 1rem);
        height: calc(100% - 1rem);
        border-radius: 3.2rem;
        border: 0.12rem solid #C2F4FF;
        box-shadow: 0px 0px 0.357rem 0px #B7E5FF;
        mix-blend-mode: overlay;
        filter: blur(0.025rem);
    }


    .section_content .content_card::before{
        right: 0;
        top: 20%;
        width: 1rem;
        height: 70%;
        background: linear-gradient(180deg, rgba(79, 141, 212, 0.00) 0%, #12397D 68.56%, rgba(21, 69, 142, 0.00) 100%);
        mix-blend-mode: lighten;
    }

    .section_content .card_info::before{
        border-radius: 3rem;
        box-shadow: 0px 0px 0.8rem 0.08rem #FFF inset,0px 0px 4rem 0.1rem  #0085FF inset,  0px 0px 0.7rem 0.1rem #BBFFFF;
        filter: blur(0.04rem);
        mix-blend-mode: screen;
    }

    .section_content .card_info .row{
        justify-content: space-around;
        align-items: center;
    }

    .section_content .card_title h3::after{
        filter: blur(0.02rem);
    }


    .content_manager .arrow ~ .arrow{
        margin-left: 1rem;
    }


    .content_service .card_info{
        padding-bottom: 3rem;
    }

    .section_vxrail .section_product{
        width: 58.8%;
        margin: 0 auto 8% auto;
    }

    .section_vxrail ul.info_text li:last-of-type{
        height: 2.6em;
    }

    .section_vxrail .card_stamp{
        width: 8rem;
        transform: translate(20%, -45%);
    }

    .section_dynamic .section_product{
        width: 81.25%;
    }

    .section_dynamic .col-card .item{
        min-height: 13.6rem;
    }
}

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

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

    .title_hexagon h2 p,
    .title_square h2 p,
    .title_width h2 p{
        font-size: 2.857rem;
    }

    .section_what h2{
        font-size: 5.4rem;
    }

    /*pc 60px*/
    .card_title h3 p, h3.card_title p{
        font-size: 2.15rem;
    }

    /*pc 40px*/
    h3,.section_what h3.content,h4.second_title,.info_block h4,
    a.btn_primary,h4.card_text p,.section_survey h3.info p{
        font-size: 1.428rem;
    }

    h4:has(.list_info),.inner_text h4 p,.section_vxrail ul.info_text,h4.award_name{
        font-size:  1.25rem;
    }


    .container {
        width: 90%;
    }

}


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

    /*html,
    body {
        font-size: 1.1vw;
        letter-spacing: 0.1em;
    }
    h2{
        font-size: 2.619rem;
    }

    h3{
        font-size: 1.9rem;
    }*/

}

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

    html,
    body {
        font-size: 1.1vw;
        letter-spacing: 0.1em;
    }
    .container {
        width: 83.333%;
    }
    
}



@media (hover: hover) {
    .section_structure .item_card:hover{
        filter: drop-shadow(0 0 0.5rem #2282D1) brightness(1.2) contrast(110%);
    }
    a.btn_primary:hover::before{
        transform: translateX(-30%);
    }

    a.btn_primary:hover{
        filter: drop-shadow(0 0 0.5rem rgba(84, 173, 232, 0.7));
    }

    a.btn_media:hover{
        filter: brightness(1.2) contrast(110%);
    }
}


@keyframes downtoup-play {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, -0.8rem);
  }
}

@keyframes uptodown-play {
  0% {
    transform: translate(0, -20px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes color-change {
  0%{
    filter: contrast(100%) brightness(1) grayscale(0);
  }
  33% {
    filter: contrast(125%) brightness(1.1) grayscale(25%);
  }
  66% {
    filter: contrast(120%) brightness(0.9) grayscale(10%);
  }
  100% {
    filter: contrast(100%) brightness(1) grayscale(0);
  }
}

@keyframes typing {
    from { 
        width: 0; 
    }
}


@keyframes blink-caret {
    from,20%,40%,60%,80%, to {
        border-color: transparent; 
    }
    10%,30%,50% ,70%,90%{ 
        border-color: currentColor; 
    }
}

@keyframes blink-caret_none{
    0%{
        border-color: currentColor; 
    }
    100%{
        border-color: transparent;
    }
}


@keyframes glow{
    0%,100%{
        filter: drop-shadow(0 0 0rem rgba(84, 173, 232, 0.2)) brightness(1) contrast(100%);
    }
    50%{
        filter: drop-shadow(0 0 1rem rgba(84, 173, 232, 0.2)) brightness(1.2) contrast(110%);
    }
}

@keyframes glow2{
    0%,100%{
        filter: drop-shadow(0 0 0rem rgba(10, 75, 168, 0.2)) brightness(1) contrast(100%) hue-rotate(0deg);
    }
    50%{
        filter: drop-shadow(0 0 2rem rgba(10, 75, 168, 1)) brightness(1.04) contrast(105%) hue-rotate(-5deg);
    }
}

@keyframes glow3{
    0%,100%{
        filter: drop-shadow(0 0 0rem rgba(127, 224, 255, 0.2)) brightness(1) contrast(100%) hue-rotate(0deg);
    }
    50%{
        filter: drop-shadow(0 0 0.2rem rgba(127, 224, 255, 1)) brightness(2) contrast(130%) hue-rotate(-30deg);
    }
}

@keyframes glow4{
    0%,100%{
        filter: drop-shadow(0 0 0rem rgba(10, 75, 168, 0.2)) brightness(1) contrast(100%) hue-rotate(0deg);
    }
    50%{
        filter: drop-shadow(0 0 1rem rgba(10, 75, 168, 1)) brightness(1.3) contrast(120%) hue-rotate(-5deg);
    }
}