html,
body {
    font-size: 3.15vw;
    letter-spacing: 0.03em;
    line-height: 1.5;
    overflow-x: hidden;
}

button{
    background: transparent;
}

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

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

h2{
    font-size: 3.333rem;
    line-height: 1.25;
}

h2 p.sub_size{
    font-size: 0.65em;
}

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

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

h3{
    font-size: 1.666rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
    font-weight: 600;
}

h4{
    font-size: 1.25rem;
    line-height: 1.8;
}

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

h5{
    font-size: 1.08rem;
    line-height: 1.8;
    font-weight: 500;
}

h5 p{
    font-size: 1em;
}

p{
    font-weight: inherit;
}


a.btn_link{
    text-decoration: underline;
}

.light{
    color: #17E3FF;
}

.index ul{
    margin-left: 1.3em;
}

.index .section_kv h1{
    display: none;
}

.index .section_kv .kv{
    width: 100%;
    display: block;
}


.index .section_introduction .row{
    align-items: center;
}

.index .section_introduction .item_text{
    margin: 0 2.5rem;
}

.index .section_four{
    position: relative;
    padding: 4.5rem 0 ;
    background-image:  url("../images/index_four-bg.png"),linear-gradient(180deg, #000000 0%, #001A71 100%);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100%;
}

.index .section_dec{
    position: absolute;
}

.index .section_four .section_dec,.index .section_survey .section_dec:nth-of-type(1){
    top: 0;
    right: 0;
    width: 21.093%;
    transform: translateY(-44.75%);
}

.index section .row_title{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom:  3.625rem;
}

.index section .title{
    position: relative;
    display: inline-block;
    margin-bottom: 0.5rem;
    text-shadow: #0075FF 0 0 15px;
}

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

.index section .title::before{
    position: absolute;
    content:"";
    display: block;
    margin: auto;
    top: 0; 
    bottom: 0;
    z-index: 0;
    width:  100%;
    height: 50%;
    opacity: 0.3;
    background: radial-gradient(43.88% 50% at 50% 50%, #005EFF 38.73%, rgba(0, 94, 255, 0) 100%);
}

.index section .title_dec{
    display: block;
    margin: 0 auto;
    width:  4.375rem;
}

.index .section_four .row_card{
    justify-content: space-evenly;
}

.index .section_four .iten_four{
    position: relative;
    display: block;
    width:  95%;
    margin-bottom: 1.3rem;
    padding: 2px;
    overflow: hidden;
    background: linear-gradient(150deg, #488BFF 0%, rgba(0, 94, 255, 0) 51.28%);
    transition: all ease .3s;
}

.index .section_four .iten_four .pic img{
    display: block;
}

.index .section_four .iten_four .text{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin:auto;
    width: 100%;
    height: 100%;
}

.index .section_four .iten_four .text::after{
    position: absolute;
    content:"";
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin:auto;
    width: 100%;
    height: 100%;
    background: linear-gradient(25.62deg, rgba(6, 60, 230, 0.9) 21.14%, rgba(6, 60, 230, 0.2) 49.06%);
    transition: all ease .3s;
    transform-origin: bottom right;
}

.index .section_four .iten_four .item_title{
    position: relative;
    display: flex;
    align-items: center;
    height: 2.5em;
    margin: 1.25rem auto;
    text-align: center;
    z-index: 2;
}

.index .section_four .iten_four .arrow{
    position: absolute;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    right: 0;
    bottom: 0;
    width: 4.625rem;
    height: 4.625rem;
    padding: 1.25rem 0.625rem;
    box-sizing: border-box;
    background: linear-gradient(315deg, #3881FF 49.58%, rgba(56, 129, 255, 0) 49.58%);
    z-index: 1;
    transform-origin: bottom right;
    transition: all ease .3s;
}

.index .section_four .iten_four .arrow img{
    width: 50%;
}

.index .section_four .row_content{
    margin: 5% 0 0 0;
}

.index section .row_content{
    text-align: center;
    justify-content: center;
}

.index .section_survey{
    position: relative;
    padding: 7% 0;
    background-image:  url("../images/index_award-bg.png"),linear-gradient(0deg, #003DFF 0%, #001A71 99%);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
}

.index .section_survey .section_dec:nth-of-type(1){
    top: 0;
    left: 0;
    transform: translateY(-37.2%);
}

.index .section_survey .section_dec:nth-of-type(2){
    top: 0;
    right: -3.958%;
    width: 20.625%;
    transform: translateY(-10%);
}

.index .section_survey .row_content{
    margin-bottom: 3.625rem;
}

.index .section_survey .item_award{
    width: 90%;
    margin: auto;
}

.index .section_survey .item_award .number{
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.2rem 1.2rem;
    border-radius: 100px;
    background: #00068A;
}

.index .section_survey .content_list{
    text-align: left;
}

.index .section_survey .content_list li{
    margin-bottom: 0.5rem;
}

.index .section_survey .btn_survey{
    display: block;
    transition: all ease .3s;
}

.index .section_notice{
    position: relative;
    padding: 7%;
    background: linear-gradient(0deg, #000822 0%, #000D34 100%);
}

.index .section_notice .section_dec:nth-of-type(1){
    top: 0;
    left: 4.166%;
    width: 8.3854%;
    transform: translateY(31%);
}

.index .section_notice .section_dec:nth-of-type(2){
    top: 0;
    right: 0;
    width: 22.8125%;
    transform: translateY(-32.27%);
}

.index .section_notice .row_content{
    text-align: left;
}

.index .section_notice .row_content li{
    margin-bottom: 0.833rem;
}

.index .section_notice .title_dec{
    transform: scaleX(-1);
}



/*.box_modal .container{
    width:  100%;
}

.box_modal .btn_close{
    width: 3em;
    min-width: 35px;
    height: 3em;
    min-height: 35px;
    background: #EE6411;
}

.box_modal .title{
    text-align: center;
    color: #EE6411;
    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;
}*/


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

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

    .b_br {
        display: none;
    }

    .pc_block{
        display: none;
    }

    .index .section_kv .kv_pc{
        display: none;
    }

    .index .section_introduction{
        background-image: url("../images/index_introduce-bg_m.jpg"),linear-gradient(180deg, #001F88 66%, #000001 100%);
        background-position: top center;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .index .section_introduction .item_text{
        margin-top: -30%;
    }

    .index  .section_four{
        background-position: center;
        background-size:  200%,100%;
    }

    .index .section_four .section_dec,.index .section_survey .section_dec:nth-of-type(1){
        width: 28%;
        transform: translateY(-25%);
    }

    .index .section_survey{
        background-size:  200%,100%;
    }

    .index .section_survey .col-award ~ .col-award{
        margin-top: 2rem;
    }


}

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

    /*h4{
        font-size: 1.2rem;
    }*/

    .s_br {
        display: none;
    }

    .m_block{
        display: none;
    }

    .container {
        width: 95%;
    }

    .index .section_kv .kv_m{
        display: none;
    }

    .index .section_introduction{
        background-image: url("../images/index_introduce-bg_pc.jpg"),linear-gradient(180deg, #00155D 67.35%, #000001 100%);
        background-position: top center;
        background-size: 100%;
        background-repeat: no-repeat;
    }
}

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

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

    h3{
        font-size: 1.7rem;
    }


    h5{
        font-size: 1.666rem;
    }*/

    .container {
        width: 90%;
    }

}


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

    html,
    body {
        font-size: 1.2vw;
        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%;
    }
    
}

@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);
  }
}

@media (hover: hover) {
    .index .section_four .iten_four:hover .text::after{
        transform: scale(2.5);
    }
    .index .section_four .iten_four:hover .arrow{
        transform: scale(1.5);
    }
    .index .btn_survey:hover{
        transform: scale(1.1);
    }
}