@charset "UTF-8";

body {
    background: #000;
	font-size:12px;
	font-family:"微軟正黑體", "Microsoft JhengHei", "Arial", "Helvetica", "sans-serif";
    
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering: -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
    overflow-x: hidden;
}

a {
    position: relative;
    display: inline-block;
    color: inherit;
}
a:hover {
    color:inherit;
}
.loadingBox {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(215,0,15,1);
    z-index: 99999;
}
.loadingBox.current {
    display: block;
}
.loadingBox .textBox {
    position: absolute;
    display: block;
    width: 100%;
    top:calc(50% - 70px);
    text-align: center;
    font-size: 25px;
    line-height: 25px;
    letter-spacing: 5px;
    color:#fff;
}
.loadingBox ul {
    position: absolute;
    display: block;
    width: 120px;
    height: 20px;
    left: calc(50% - 60px);
    top:calc(50% - 30px);
    font-size: 0;
    line-height: 0;
}
.loadingBox ul li {
    position: relative;
    display: inline-block;
    width: calc(100% / 5 - 2px);
    height: 100%;
    margin: 0 1px 0 1px;
    background: rgba(255,255,255,1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.loadingBox ul li:nth-child(1) {
    -webkit-animation:webkit-loading_animate 0.5s linear 0s infinite alternate;
    animation:loading_animate 0.5s linear 0s infinite alternate;
}
.loadingBox ul li:nth-child(2) {
    -webkit-animation:webkit-loading_animate 0.5s linear -0.3s infinite alternate;
    animation:loading_animate 0.5s linear -0.3s infinite alternate;
}
.loadingBox ul li:nth-child(3) {
    -webkit-animation:webkit-loading_animate 0.5s linear -0.6s infinite alternate;
    animation:loading_animate 0.5s linear -0.6s infinite alternate;
}
.loadingBox ul li:nth-child(4) {
    -webkit-animation:webkit-loading_animate 0.5s linear -0.9s infinite alternate;
    animation:loading_animate 0.5s linear -0.9s infinite alternate;
}
.loadingBox ul li:nth-child(5) {
    -webkit-animation:webkit-loading_animate 0.5s linear -1.2s infinite alternate;
    animation:loading_animate 0.5s linear -1.2s infinite alternate;
}
@-webkit-keyframes webkit-loading_animate {
    from {-webkit-transform: scaleY(0);}
    to {-webkit-transform: scaleY(1);}
}
@keyframes loading_animate {
    from {transform: scaleY(0);}
    to {transform: scaleY(1);}
}
.wrap {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.wrap::before {
    content: "";
    position: relative;
    display: block;
    width: 100%;
    height: 65px;
    top:0;
    left: 0;
}
.wrap .nav {
    position: fixed;
    width: 100%;
    height: 65px;
    top:0;
    left: 0;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    z-index: 9999;
}
.wrap .nav .logo {
    position: absolute;
    display: block;
    width: 150px;
    left: 25px;
    top: 12px;
}
.wrap .nav .logo a {
    position: relative;
    display: block;
    width: 100%;
}
.wrap .nav .navContent {
    position: absolute;
    display: block;
    width: calc(100% - 500px);
    left: 250px;
    top:25px;
    font-size: 0;
    line-height: 0;
}
.wrap .nav .navContent li {
    position: relative;
    display: inline-block;
    margin: 0 50px 0 0;
    font-size: 15px;
    line-height: 15px;
    font-weight: bold;
    color:#0d1726;
}
.wrap .nav .navContent li::after {
    content: "";
    position: absolute;
    display: block;
    width: 120%;
    height: 2px;
    bottom: -5px;
    left: -10%;
    background: #d7000f;
    pointer-events: none;
    transform: scale(0,1);
    -webkit-transform: scale(0,1);
    transition: transform 0.3s ease 0s;
    -webkit-transition: -webkit-transform 0.3s ease 0s;
}
.wrap .nav .navContent li:hover::after {
    transform: scale(1,1);
    -webkit-transform: scale(1,1);
}
.wrap .nav .navContent li a {
    position: relative;
    display: block;
    width: 100%;
    color:#0d1726;
    transition: color 0.3s ease 0s;
    -webkit-transition: color 0.3s ease 0s;
}
.wrap .nav .navContent li a:hover {
    color:#d7000f;
}
.wrap .nav .navContent li.current a {
    color:#d7000f;
}
.wrap .nav .navLogin {
    position: absolute;
    display: block;
    right: 50px;
    top:25px;
    font-size: 0;
    line-height: 0;
}
.wrap .nav .navLogin li {
    position: relative;
    display: inline-block;
    margin: 0 0 0 50px;
    font-size: 15px;
    line-height: 15px;
    font-weight: bold;
    color:#d7000f;
}
.wrap .nav .navLogin li:nth-child(1)::before {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 15px;
    left: -20px;
    top:0px;
    background: url(../images/nav_icon1.svg) no-repeat center center;
    background-size: contain;
}
.wrap .nav .navLogin li:nth-child(2)::before {
    content: "";
    position: absolute;
    display: block;
    width: 15px;
    height: 15px;
    left: -20px;
    top:0px;
    background: url(../images/nav_icon2.svg) no-repeat center center;
    background-size: contain;
}
.wrap .nav .navLogin li::after {
    content: "";
    position: absolute;
    display: block;
    width: calc(120% + 20px);
    height: 2px;
    bottom: -5px;
    left: calc(-10% - 20px);
    background: #d7000f;
    pointer-events: none;
    transform: scale(0,1);
    -webkit-transform: scale(0,1);
    transition: transform 0.3s ease 0s;
    -webkit-transition: -webkit-transform 0.3s ease 0s;
}
.wrap .nav .navLogin li:hover::after {
    transform: scale(1,1);
    -webkit-transform: scale(1,1);
}
.wrap .nav .navLogin li a {
    position: relative;
    display: block;
    width: 100%;
    color:#d7000f;
    transition: color 0.3s ease 0s;
    -webkit-transition: color 0.3s ease 0s;
}
.wrap .nav .navLogin li a:hover {
    color:#d7000f;
}
.wrap .nav .burger {
    display: none;
}
@media screen and (max-width: 1100px) {
    .wrap::before {
        height: 50px;
    }
    .wrap .nav {
        width: 100%;
        height: 50px;
    }
    .wrap .nav .logo {
        width: 125px;
        left: 15px;
        top: 10px;
    }
    .wrap .nav .navContent {
        width: 100%;
        max-width: 400px;
        height: calc(100vh - 50px);
        left: auto;
        right: 0;
        top:100%;
        background: #fff;
        border-left: 2px solid rgba(215,0,15,1);
        transform: translate(100%,0);
        -webkit-transform: translate(100%,0);
        transition: transform 0.3s ease 0s;
        -webkit-transition: -webkit-transform 0.3s ease 0s;
    }
    .wrap .nav.expand .navContent {
        transform: translate(0,0);
        -webkit-transform: translate(0,0);
    }
    .wrap .nav .navContent li {
        display: block;
        margin: 0;
        padding: 25px;
        text-align: center;
        border-top:1px solid rgba(0,0,0,0.1);
    }
    .wrap .nav .navContent li::after {
        display: none;
    }
    .wrap .nav .navLogin {
        width: 100%;
        max-width: 400px;
        right: 0;
        top:310px;
        text-align: center;
        border-top:1px solid rgba(0,0,0,0.1);
        transform: translate(100%,0);
        -webkit-transform: translate(100%,0);
        transition: transform 0.3s ease 0s;
        -webkit-transition: -webkit-transform 0.3s ease 0s;
    }
    .wrap .nav.expand .navLogin {
        transform: translate(0,0);
        -webkit-transform: translate(0,0);
    }
    .wrap .nav .navLogin li {
        margin: 25px 20px 0 40px;
    }
    .wrap > .nav .burger {
        position: absolute;
        display: block;
        width: 40px;
        height: 30px;
        right: 25px;
        top:10px;
        cursor: pointer;
    }
    .wrap > .nav .burger span {
        position: absolute;
        display: block;
        width: 100%;
        height: 15%;
        background: #d7000f;
        top:calc(50% - 7%);
        transition: 
            background 0.4s ease 0s,
            transform 0.4s ease 0s;
        -webkit-transition: 
            background 0.4s ease 0s,
            -webkit-transform 0.4s ease 0s;
    }
    .wrap > .nav .burger span:nth-child(1) {
        transform: translate(0,-250%);
        -webkit-transform: translate(0,-250%);
    }
    .wrap > .nav .burger span:nth-child(2) {
        transform: translate(0,250%);
        -webkit-transform: translate(0,250%);
    }
    .wrap > .nav.expand .burger span:nth-child(1) {
        transform: translate(0,0) rotate(45deg);
        -webkit-transform: translate(0,0) rotate(45deg);
    }
    .wrap > .nav.expand .burger span:nth-child(2) {
        transform: translate(0,0) scale(1,0);
        -webkit-transform: translate(0,0) scale(1,0);
    }
    .wrap > .nav.expand .burger span:nth-child(3) {
        transform: translate(0,0) rotate(45deg);
        -webkit-transform: translate(0,0) rotate(-45deg);
    }
}
.wrap .mainPage {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100% - 65px);
    min-height: 50vw;
    max-height: 56vw;
    overflow: hidden;
}
.wrap .mainPage .bg {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.wrap .mainPage .contentBox {
    position: absolute;
    display: block;
    width: 70%;
    height: 100%;
    left: 15%;
    top: 0;
    color:rgba(86,86,86,1);
}
.wrap .mainPage .contentBox .titleBox {
    position: absolute;
    display: block;
    width: 100%;
    transition: transform 2s ease 0s,
        opacity 2s ease 0s;
    -webkit-transition: -webkit-transform 2s ease 0s,
        opacity 2s ease 0s;
    opacity: 0;
}
.wrap .mainPage .contentBox .titleBox h1 {
    position: relative;
    display: block;
    width: 100%;
    font-size: calc(30px + (100vw - 1100px) * 0.02);
    line-height: calc(30px + (100vw - 1100px) * 0.02);
    letter-spacing: calc(2px + (100vw - 1100px) * 0.003);
    font-weight: normal;
    text-align: left;
    color:#000;
    margin: 0 0 1vw 0;
}
.wrap .mainPage .contentBox .titleBox h2 {
    position: relative;
    display: block;
    width: 100%;
    font-size: calc(15px + (100vw - 1100px) * 0.01);
    line-height: calc(24px + (100vw - 1100px) * 0.005);
    font-weight: normal;
    text-align: left;
    color:rgba(215,0,15,1);
    font-weight: bold;
}
@media screen and (max-width: 1100px) {
    .wrap .mainPage {
        height: auto;
        min-height:inherit;
        max-height: none;
    }
    .wrap .mainPage .contentBox {
        position: relative;
        width: 90%;
        height: auto;
        left: 5%;
        top: 0;
        margin: 0;
        padding: 10vw 0 10vw 0;
    }
    .wrap .mainPage .contentBox .titleBox {
        position: relative;
        display: block;
        padding: 0 0 7vw 0;
    }
    .wrap .mainPage .contentBox .titleBox h1 {
        font-size: calc(25px + (100vw - 300px) * 0.03);
        line-height: calc(30px + (100vw - 300px) * 0.03);
        letter-spacing: calc(1px + (100vw - 300px) * 0.003);
        margin: 0 0 1vw 0;
    }
    .wrap .mainPage .contentBox .titleBox h2 {
        font-size: calc(14px + (100vw - 300px) * 0.015);
        line-height: calc(26px + (100vw - 300px) * 0.005);
    }
}

.wrap .mainPage.kv .bg {
}
.wrap .mainPage.kv .bg ul {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.wrap .mainPage.kv .bg ul li {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.wrap .mainPage.kv .bg ul li:nth-child(1) {
    background: url(../images/kv_bg1.jpg) no-repeat center center;
    background-size: cover;
    opacity: 0;
    transition: opacity 3s ease 0s;
    -webkit-transition: opacity 3s ease 0s;
    
}
.wrap .mainPage.kv .bg ul li:nth-child(2) {
    background: url(../images/kv_bg2.jpg) no-repeat center center;
    background-size: cover;
    opacity: 0;
    transition: opacity 2s ease 4s;
    -webkit-transition: opacity 2s ease 4s;
}
.wrap .mainPage.kv .bg ul li:nth-child(3) {
    background: url(../images/kv_bg3.png) no-repeat center center;
    background-size: cover;
    transform: translate(30%,0);
    -webkit-transform: translate(30%,0);
    opacity: 0;
    transition: transform 2s ease 2s,
        opacity 1s ease 2s;
    -webkit-transition: -webkit-transform 2s ease 2s,
        opacity 1s ease 2s;
}
.wrap .mainPage.kv .bg ul li:nth-child(4) {
    background: url(../images/kv_bg4.png) no-repeat center center;
    background-size: cover;
    opacity: 0;
    transition: opacity 2s ease 4s;
    -webkit-transition: opacity 2s ease 4s;
}
.wrap .mainPage.kv.current .bg {
}
.wrap .mainPage.kv.current .bg ul li:nth-child(1) {
    opacity: 0.5;
}
.wrap .mainPage.kv.current .bg ul li:nth-child(2) {
    opacity: 1;
}
.wrap .mainPage.kv.current .bg ul li:nth-child(3) {
    opacity: 1;
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
}
.wrap .mainPage.kv.current .bg ul li:nth-child(4) {
    opacity: 1;
}
.wrap .mainPage.kv .contentBox .titleBox {
    width: 45%;
    top:15vw;
    transform: translate(0,-30%);
    -webkit-transform: translate(0,-30%);
    transition: transform 1s ease 3s,
        opacity 1s ease 3s;
    -webkit-transition: -webkit-transform 1s ease 3s,
        opacity 1s ease 3s;
}
.wrap .mainPage.kv.current .contentBox .titleBox {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.kv .contentBox .titleBox h1 {
    font-size: calc(51px + (100vw - 1100px) * 0.02);
    line-height: calc(51px + (100vw - 1100px) * 0.02);
    letter-spacing: calc(5px + (100vw - 1100px) * 0.02);
    text-indent: calc(5px + (100vw - 1100px) * 0.02);
    color:#fff;
    text-align: center;
    margin: 0 0 1.1vw 0;
}
.wrap .mainPage.kv .contentBox .titleBox h2 {
    font-size: calc(20px + (100vw - 1100px) * 0.012);
    line-height: calc(20px + (100vw - 1100px) * 0.012);
    letter-spacing: calc(5px + (100vw - 1100px) * 0.003);
    text-indent: calc(5px + (100vw - 1100px) * 0.003);
    color:#fff;
    font-weight: normal;
    text-align: center;
}
.wrap .mainPage.kv .contentBox .titleBox .eventBtn {
    position: relative;
    display: block;
    width: 50%;
    left: 25%;
    background: rgba(215,0,15,1);
    padding: 1.5vw 0 1.5vw 0;
    font-size: calc(20px + (100vw - 1100px) * 0.012);
    line-height: calc(20px + (100vw - 1100px) * 0.012);
    letter-spacing: calc(5px + (100vw - 1100px) * 0.002);
    color:#fff;
    font-weight: normal;
    text-align: center;
    margin: 3vw 0 0 0;
    cursor: pointer;
    opacity: 0;
    transition: background 0.3s ease 0s,
        opacity 1s ease 4s;
    -webkit-transition: background 0.3s ease 0s,
        opacity 1s ease 4s;
}
.wrap .mainPage.kv .contentBox .titleBox .eventBtn:hover {
    background: rgba(255,0,0,1); 
}
.wrap .mainPage.kv.current .contentBox .titleBox .eventBtn {
    opacity: 1;
}
@media screen and (max-width: 1100px) {
    .wrap .mainPage.kv {
        background: rgba(30,40,50,1);
    }
    .wrap .mainPage.kv .bg {
        position: relative;
        height: 80vw;
    }
    .wrap .mainPage.kv .bg ul li:nth-child(1) {
        background: url(../images/kv_bg1.jpg) no-repeat 70%;
        background-size: cover;
    }
    .wrap .mainPage.kv .bg ul li:nth-child(2) {
        background: url(../images/kv_bg2.jpg) no-repeat 70%;
        background-size: cover;
    }
    .wrap .mainPage.kv .bg ul li:nth-child(3) {
        background: url(../images/kv_bg3.png) no-repeat 70%;
        background-size: cover;
    }
    .wrap .mainPage.kv .bg ul li:nth-child(4) {
        background: url(../images/kv_bg4.png) no-repeat 70%;
        background-size: cover;
    }
    .wrap .mainPage.kv .contentBox {
        padding: 5vw 0 5vw 0;
    }
    .wrap .mainPage.kv .contentBox .titleBox {
        width: 90%;
        top:0;
        left: 5%;
        padding: 0;
    }
    .wrap .mainPage.kv .contentBox .titleBox h1 {
        font-size: calc(35px + (100vw - 300px) * 0.02);
        line-height: calc(35px + (100vw - 300px) * 0.02);
        letter-spacing: calc(5px + (100vw - 300px) * 0.02);
        text-indent: calc(5px + (100vw - 300px) * 0.02);
        margin: 0 0 3vw 0;
    }
    .wrap .mainPage.kv .contentBox .titleBox h2 {
        font-size: calc(12px + (100vw - 300px) * 0.012);
        line-height: calc(12px + (100vw - 300px) * 0.012);
        letter-spacing: calc(5px + (100vw - 300px) * 0.003);
        text-indent: calc(5px + (100vw - 300px) * 0.003);
    }
    .wrap .mainPage.kv .contentBox .titleBox .eventBtn {
        padding: 3vw 0 3vw 0;
        font-size: calc(14px + (100vw - 300px) * 0.012);
        line-height: calc(14px + (100vw - 300px) * 0.012);
        letter-spacing: calc(5px + (100vw - 300px) * 0.002);
        margin: 5vw 0 0 0;
    }
}

.wrap .mainPage.page1 .bg {
    background: url(../images/page1_bg.jpg) no-repeat center center;
    background-size: cover;
}
.wrap .mainPage.page1 .contentBox .titleBox {
    top:4.5vw;
    transform: translate(-30%,0);
    -webkit-transform: translate(-30%,0);
}
.wrap .mainPage.page1.current .contentBox .titleBox {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page1 .contentBox .titleBox .videoBox {
    position: relative;
    display: block;
    width: 28vw;
    height: 15.8vw;
    background: #000;
    margin: 1vw 0 0 0;
}
.wrap .mainPage.page1 .contentBox .textBox {
    position: absolute;
    display: block;
    width: 50%;
    left: 50%;
    top:8vw;
    text-align: justify;
    font-size: calc(13px + (100vw - 1100px) * 0.01);
    line-height: calc(20px + (100vw - 1100px) * 0.02);
    transition: opacity 2s ease 2s;
    -webkit-transition: opacity 2s ease 2s;
    opacity: 0;
}
.wrap .mainPage.page1.current .contentBox .textBox {
    opacity: 1;
}
@media screen and (max-width: 1100px) {
    .wrap .mainPage.page1 .bg {
    background: url(../images/page1_bg_m.jpg) no-repeat center bottom;
    background-size: cover;
}
    .wrap .mainPage.page1 .contentBox .titleBox {
        position: relative;
        display: block;
        top:auto;
    }
    .wrap .mainPage.page1 .contentBox .titleBox .videoBox {
        width: 100%;
        height: 50vw;
    }
    .wrap .mainPage.page1 .contentBox .textBox {
        position: relative;
        width: 100%;
        left: 0;
        top:auto;
        font-size: calc(10px + (100vw - 300px) * 0.03);
        line-height: calc(18px + (100vw - 300px) * 0.05);
        padding: 0 0 30vw 0;
    }
}


.wrap .mainPage.page2 .bg {
    background: url(../images/page2_bg.jpg) no-repeat center center;
    background-size: cover;
}
.wrap .mainPage.page2 .contentBox .titleBox {
    top:10vw;
    transform: translate(-30%,0);
    -webkit-transform: translate(-30%,0);
}
.wrap .mainPage.page2 .contentBox .titleBox h1 {
    color:#fff;
}
.wrap .mainPage.page2.current .contentBox .titleBox {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page2 .contentBox .textBox {
    position: absolute;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    top:22vw;
}
.wrap .mainPage.page2 .contentBox .textBox li {
    position: relative;
    display: inline-block;
    transform: translate(0,-30%);
    -webkit-transform: translate(0,-30%);
    opacity: 0;
}
.wrap .mainPage.page2.current .contentBox .textBox li {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(1) {
    transition: transform 1s ease 0s,
        opacity 1s ease 0s;
    -webkit-transition: -webkit-transform 1s ease 0s,
        opacity 1s ease 0s;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(2) {
    transition: transform 1s ease 0.5s,
        opacity 1s ease 0.5s;
    -webkit-transition: -webkit-transform 1s ease 0.5s,
        opacity 1s ease 0.5s;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(3) {
    transition: transform 1s ease 1s,
        opacity 1s ease 1s;
    -webkit-transition: -webkit-transform 1s ease 1s,
        opacity 1s ease 1s;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(4) {
    transition: transform 1s ease 1.5s,
        opacity 1s ease 1.5s;
    -webkit-transition: -webkit-transform 1s ease 1.5s,
        opacity 1s ease 1.5s;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(5) {
    transition: transform 1s ease 2s,
        opacity 1s ease 2s;
    -webkit-transition: -webkit-transform 1s ease 2s,
        opacity 1s ease 2s;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(6) {
    transition: transform 1s ease 2.5s,
        opacity 1s ease 2.5s;
    -webkit-transition: -webkit-transform 1s ease 2.5s,
        opacity 1s ease 2.5s;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(7) {
    transition: transform 1s ease 3s,
        opacity 1s ease 3s;
    -webkit-transition: -webkit-transform 1s ease 3s,
        opacity 1s ease 3s;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(8) {
    transition: transform 1s ease 3.5s,
        opacity 1s ease 3.5s;
    -webkit-transition: -webkit-transform 1s ease 3.5s,
        opacity 1s ease 3.5s;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(9) {
    transition: transform 1s ease 4s,
        opacity 1s ease 4s;
    -webkit-transition: -webkit-transform 1s ease 4s,
        opacity 1s ease 4s;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) {
    width: calc(88% / 5);
    font-size: calc(12px + (100vw - 1100px) * 0.01);
    line-height: calc(20px + (100vw - 1100px) * 0.02);
    vertical-align: top;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) dl {
    position: relative;
    display: block;
    width: 100%;
    color:#fff;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) dl dt {
    position: relative;
    display: block;
    width: 100%;
    height: 12vw;
    border: 1px solid rgba(255,255,255,0.3);
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) dl dt span {
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    padding: 1vw;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) dl dd {
    position: relative;
    display: block;
    width: 100%;
    height: 4vw;
    line-height: 4vw;
    text-align: center;
    background: rgba(215,0,15,1);
    margin: 3vw 0 0 0;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) dl dd::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(215,0,15,1);
    top:calc(-3vw - 3px);
    left: calc(50% - 4px);
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) dl dd::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 3vw;
    background: rgba(215,0,15,1);
    top:-3vw;
    left:calc(50% - 1px);
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(even) {
    width: calc(12% / 4 - 1%);
    margin: 0 0.5% 0 0.5%;
}
.wrap .mainPage.page2 .contentBox .textBox li:nth-child(even) img {
    margin: 3.5vw 0 0 0;
}
@media screen and (max-width: 1100px) {
    .wrap .mainPage.page2 .contentBox .titleBox {
        top:auto;
    }
    .wrap .mainPage.page2 .contentBox .textBox {
        position: relative;
        display: block;
        top:auto;
        padding: 0 0 10vw 0;
    }
    .wrap .mainPage.page2 .contentBox .textBox li {
        display: block;
    }
    .wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) {
        width: 100%;
        font-size: 0;
        line-height: 0;
    }
    .wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) dl dt {
        display: block;
        width: 50%;
        height: auto;
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.02);
        vertical-align: top;
    }
    .wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) dl dt span {
        position: relative;
        top: 0;
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
        padding: 2vw;
    }
    .wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) dl dd {
        position: absolute;
        display: block;
        width: 40%;
        height: auto;
        margin: 0;
        left: 60%;
        top:50%;
        -webkit-transform: translate(0,-50%);
        transform: translate(0,-50%);
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(12px + (100vw - 300px) * 0.01);
        padding: 4vw;
    }
    .wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) dl dd::before {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(215,0,15,1);
        top:calc(50% - 4px);
        left: calc(-25% - 4px);
    }
    .wrap .mainPage.page2 .contentBox .textBox li:nth-child(odd) dl dd::after {
        content: "";
        position: absolute;
        width: 25%;
        height: 2px;
        background: rgba(215,0,15,1);
        top:calc(50% - 1px);
        left: -25%;
    }
    .wrap .mainPage.page2 .contentBox .textBox li:nth-child(even) {
        width: 6%;
        left: 20%;
        margin: 1vw 0 1vw 0;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    .wrap .mainPage.page2 .contentBox .textBox li:nth-child(even) img {
        margin: 0;
    }
}

.wrap .mainPage.page3 .bg {
    background: url(../images/page3_bg.jpg) no-repeat center center;
    background-size: cover;
}
.wrap .mainPage.page3 .contentBox .titleBox {
    top:10vw;
    transform: translate(-30%,0);
    -webkit-transform: translate(-30%,0);
}
.wrap .mainPage.page3.current .contentBox .titleBox {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page3 .contentBox .textBox {
    position: absolute;
    display: block;
    width: 75%;
    font-size: 0;
    line-height: 0;
    top:20vw;
}
.wrap .mainPage.page3 .contentBox .textBox li {
    position: relative;
    display: inline-block;
    transform: translate(0,-30%);
    -webkit-transform: translate(0,-30%);
    opacity: 0;
}
.wrap .mainPage.page3.current .contentBox .textBox li {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(1) {
    transition: transform 1s ease 0s,
        opacity 1s ease 0s;
    -webkit-transition: -webkit-transform 1s ease 0s,
        opacity 1s ease 0s;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(2) {
    transition: transform 1s ease 0.5s,
        opacity 1s ease 0.5s;
    -webkit-transition: -webkit-transform 1s ease 0.5s,
        opacity 1s ease 0.5s;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(3) {
    transition: transform 1s ease 1s,
        opacity 1s ease 1s;
    -webkit-transition: -webkit-transform 1s ease 1s,
        opacity 1s ease 1s;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(4) {
    transition: transform 1s ease 1.5s,
        opacity 1s ease 1.5s;
    -webkit-transition: -webkit-transform 1s ease 1.5s,
        opacity 1s ease 1.5s;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(5) {
    transition: transform 1s ease 2s,
        opacity 1s ease 2s;
    -webkit-transition: -webkit-transform 1s ease 2s,
        opacity 1s ease 2s;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) {
    width: calc(88% / 3);
    font-size: calc(12px + (100vw - 1100px) * 0.01);
    line-height: calc(20px + (100vw - 1100px) * 0.02);
    vertical-align: top;
    cursor: pointer;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(even) {
    width: calc(12% / 2 - 1%);
    margin: 0 0.5% 0 0.5%;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(even) img {
    margin: 4vw 0 0 0;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) dl {
    position: relative;
    display: block;
    width: 100%;
    color:#fff;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) dl dt {
    position: relative;
    display: block;
    width: 80%;
    left: 10%;
    height: 10vw;
    border-radius: 3vw;
    background: rgba(215,0,15,1);
    overflow: hidden;
    transition: 
        height 0.3s ease 0s, 
        width 0.3s ease 0s,
        left 0.3s ease 0s;
    -webkit-transition: 
        height 0.3s ease 0s, 
        width 0.3s ease 0s,
        left 0.3s ease 0s;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) dl dt:hover {
    width: 100%;
    height: 22vw;
    left: 0;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) dl dt img {
    position: absolute;
    display: block;
    width: 60%;
    left: 20%;
    top:1.5vw;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) dl dt span {
    position: absolute;
    display: block;
    width: 80%;
    left: 10%;
    text-align: justify;
    top: 12vw;
}
.wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) dl dd {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    margin: 1vw 0 0 0;
    color:rgba(215,0,15,1);
}
@media screen and (max-width: 1100px) {
    .wrap .mainPage.page3 .bg {
        background: url(../images/page3_bg.jpg) no-repeat 75% bottom;
        background-size: cover;
    }
    .wrap .mainPage.page3 .contentBox .titleBox {
        top:auto;
    }
    .wrap .mainPage.page3 .contentBox .textBox {
        position: relative;
        display: block;
        width: 100%;
        top:auto;
        height: auto;
        padding: 0 0 10vw 0;
    }
    .wrap .mainPage.page3 .contentBox .textBox li {
        display: block;
    }
    .wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) {
        width: 100%;
        font-size: 0;
        line-height: 0;
    }
    .wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) dl dt {
        display: block;
        width: 100%;
        height: auto;
        left: 0;
        vertical-align: top;
        margin: 0;
        font-size: 0;
        line-height: 0;
    }
    .wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) dl dt:hover {
        width: 100%;
        height: auto;
        left: 0;
    }
    .wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) dl dt img {
        position: absolute;
        display: block;
        width: 20%;
        left: 5%;
        top:50%;
        margin: 0;
        transform: translate(0,-50%);
        -webkit-transform: translate(0,-50%);
        
    }
    .wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) dl dt span {
        position: relative;
        display: block;
        width: 65%;
        left: 30%;
        top: auto;
        text-align: justify;
        font-size: calc(12px + (100vw - 300px) * 0.02);
        line-height: calc(20px + (100vw - 300px) * 0.03);
        margin: 12vw 0 6vw 0;
        
    }
    .wrap .mainPage.page3 .contentBox .textBox li:nth-child(odd) dl dd {
        position: absolute;
        display: block;
        width: 65%;
        height: 10vw;
        margin: 0;
        left: 30%;
        top:2vw;
        font-size: calc(16px + (100vw - 300px) * 0.03);
        line-height: 10vw;
        text-align: left;
        font-weight: bold;
        color:#fff;
    }
    .wrap .mainPage.page3 .contentBox .textBox li:nth-child(even) {
        width: 6%;
        left: 47%;
        margin: 1vw 0 1vw 0;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    .wrap .mainPage.page3 .contentBox .textBox li:nth-child(even) img {
        margin: 0;
    }
}


.wrap .mainPage.page4 .bg {
    background: rgb(20,50,74);
    background: radial-gradient(circle at 50% 100%, rgba(20,50,74,1) 0%, rgba(23,26,32,1) 100%);
}
.wrap .mainPage.page4 .contentBox .titleBox {
    top:20vw;
    transform: translate(-30%,0);
    -webkit-transform: translate(-30%,0);
}
.wrap .mainPage.page4 .contentBox .titleBox h1 {
    color:#fff;
}
.wrap .mainPage.page4.current .contentBox .titleBox {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page4 .bgBox {
    position: absolute;
    display: block;
    width: 100%;
    height: 52vw;
    bottom: 0;
}
.wrap .mainPage.page4 .bgBox .bgImg1 {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
    transform: translate(0,0) scale(1.3);
    -webkit-transform: translate(0,0) scale(1.3);
    opacity: 0;
     transition: transform 1s ease 0s,
        opacity 1s ease 0s;
    -webkit-transition: -webkit-transform 1s ease 0s,
        opacity 1s ease 0s;
}
.wrap .mainPage.page4.current .bgBox .bgImg1 {
    transform: translate(0,0) scale(1);
    -webkit-transform: translate(0,0) scale(1);
    opacity: 1;
}
.wrap .mainPage.page4 .bgBox .bgImg1 img {
    position: relative;
    display: block;
    width: 100%;
}
.wrap .mainPage.page4 .bgBox .bgImg2 {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
    transform: translate(0,0) scale(1.3);
    -webkit-transform: translate(0,0) scale(1.3);
    opacity: 0;
     transition: 
         transform 1.3s ease 0.3s,
         opacity 1.3s ease 0.3s;
    -webkit-transition: 
        -webkit-transform 1.3s ease 0.3s,
        opacity 1.3s ease 0.3s;
}
.wrap .mainPage.page4.current .bgBox .bgImg2 {
    transform: translate(0,0) scale(1);
    -webkit-transform: translate(0,0) scale(1);
    opacity: 1;
}
.wrap .mainPage.page4 .bgBox .bgImg2 img {
    position: relative;
    display: block;
    width: 100%;
}
.wrap .mainPage.page4 .bgBox ul {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
}
.wrap .mainPage.page4 .bgBox ul li {
    position: absolute;
    display: block;
    width: 10vw;
    text-align: center;
    font-size: calc(12px + (100vw - 1100px) * 0.01);
    line-height: calc(12px + (100vw - 1100px) * 0.01);
    color: #fff;
    transform: translate(0,0) scale(1.3);
    -webkit-transform: translate(0,0) scale(1.3);
    opacity: 0;
}
.wrap .mainPage.page4 .bgBox ul li:nth-child(1) {
    right:17.5%;
    bottom:31.5vw;
    transition: 
        transform 1.3s ease 0.4s,
        opacity 1.3s ease 0.4s;
    -webkit-transition: 
        -webkit-transform 1.3s ease 0.4s,
        opacity 1.3s ease 0.4s;
}
.wrap .mainPage.page4 .bgBox ul li:nth-child(2) {
    right:30.5%;
    bottom:24.5vw;
    transition: 
        transform 1.3s ease 0.5s,
        opacity 1.3s ease 0.5s;
    -webkit-transition: 
        -webkit-transform 1.3s ease 0.5s,
        opacity 1.3s ease 0.5s;
}
.wrap .mainPage.page4 .bgBox ul li:nth-child(3) {
    right:46.5%;
    bottom:23vw;
    transition: 
        transform 1.3s ease 0.6s,
        opacity 1.3s ease 0.6s;
    -webkit-transition: 
        -webkit-transform 1.3s ease 0.6s,
        opacity 1.3s ease 0.6s;
}
.wrap .mainPage.page4 .bgBox ul li:nth-child(4) {
    right:9.5%;
    bottom:20vw;
    transition: 
        transform 1.3s ease 0.7s,
        opacity 1.3s ease 0.7s;
    -webkit-transition: 
        -webkit-transform 1.3s ease 0.7s,
        opacity 1.3s ease 0.7s;
}
.wrap .mainPage.page4 .bgBox ul li:nth-child(5) {
    right:34.5%;
    bottom:15.5vw;
    transition: 
        transform 1.3s ease 0.8s,
        opacity 1.3s ease 0.8s;
    -webkit-transition: 
        -webkit-transform 1.3s ease 0.8s,
        opacity 1.3s ease 0.8s;
}
.wrap .mainPage.page4 .bgBox ul li:nth-child(6) {
    right:51%;
    bottom:15vw;
    transition: 
        transform 1.3s ease 0.9s,
        opacity 1.3s ease 0.9s;
    -webkit-transition: 
        -webkit-transform 1.3s ease 0.9s,
        opacity 1.3s ease 0.9s;
}
.wrap .mainPage.page4 .bgBox ul li:nth-child(7) {
    right:13.5%;
    bottom:11.5vw;
    transition: 
        transform 1.3s ease 1s,
        opacity 1.3s ease 1s;
    -webkit-transition: 
        -webkit-transform 1.3s ease 1s,
        opacity 1.3s ease 1s;
}
.wrap .mainPage.page4 .bgBox ul li:nth-child(8) {
    right:26.5%;
    bottom:5.5vw;
    transition: 
        transform 1.3s ease 1.1s,
        opacity 1.3s ease 1.1s;
    -webkit-transition: 
        -webkit-transform 1.3s ease 1.1s,
        opacity 1.3s ease 1.1s;
}
.wrap .mainPage.page4 .bgBox ul li:nth-child(9) {
    right:44%;
    bottom:5.1vw;
    transition: 
        transform 1.3s ease 1.2s,
        opacity 1.3s ease 1.2s;
    -webkit-transition: 
        -webkit-transform 1.3s ease 1.2s,
        opacity 1.3s ease 1.2s;
}
.wrap .mainPage.page4 .bgBox ul li:nth-child(10) {
    right:58.5%;
    bottom:10.5vw;
    transition: 
        transform 1.3s ease 1.3s,
        opacity 1.3s ease 1.3s;
    -webkit-transition: 
        -webkit-transform 1.3s ease 1.3s,
        opacity 1.3s ease 1.3s;
}
.wrap .mainPage.page4.current .bgBox ul li:nth-child(1),
.wrap .mainPage.page4.current .bgBox ul li:nth-child(2),
.wrap .mainPage.page4.current .bgBox ul li:nth-child(3),
.wrap .mainPage.page4.current .bgBox ul li:nth-child(4),
.wrap .mainPage.page4.current .bgBox ul li:nth-child(5),
.wrap .mainPage.page4.current .bgBox ul li:nth-child(6),
.wrap .mainPage.page4.current .bgBox ul li:nth-child(7),
.wrap .mainPage.page4.current .bgBox ul li:nth-child(8),
.wrap .mainPage.page4.current .bgBox ul li:nth-child(9),
.wrap .mainPage.page4.current .bgBox ul li:nth-child(10) {
     transform: translate(0,0) scale(1);
    -webkit-transform: translate(0,0) scale(1);
    opacity: 1;
}
@media screen and (max-width: 1100px) {
    .wrap .mainPage.page4 {
        height: 100%;
        min-height: 90vw;
        max-height: 120vw;
    }
    .wrap .mainPage.page4 .contentBox .titleBox {
        top:auto;
        padding: 15vw 0 0 0;
    }
    .wrap .mainPage.page4 .bgBox {
        width: 200%;
        height: 60vw;
        left: -60%;
    }
    .wrap .mainPage.page4 .bgBox ul li {
        width: 30vw;
        text-align: center;
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(12px + (100vw - 300px) * 0.01);
        color: #fff;
        transform: translate(0,0) scale(1.3);
        -webkit-transform: translate(0,0) scale(1.3);
        opacity: 0;
    }
    .wrap .mainPage.page4 .bgBox ul li:nth-child(1) {
        right:18%;
        bottom:63vw;
    }
    .wrap .mainPage.page4 .bgBox ul li:nth-child(2) {
        right:27%;
        bottom:48vw;
    }
    .wrap .mainPage.page4 .bgBox ul li:nth-child(3) {
        right:43%;
        bottom:45vw;
    }
    .wrap .mainPage.page4 .bgBox ul li:nth-child(4) {
        right:18%;
        bottom:35.5vw;
    }
    .wrap .mainPage.page4 .bgBox ul li:nth-child(5) {
        right:32%;
        bottom:30.5vw;
    }
    .wrap .mainPage.page4 .bgBox ul li:nth-child(6) {
        right:48.5%;
        bottom:29vw;
    }
    .wrap .mainPage.page4 .bgBox ul li:nth-child(7) {
        right:20%;
        bottom:20.5vw;
    }
    .wrap .mainPage.page4 .bgBox ul li:nth-child(8) {
        right:23.5%;
        bottom:9vw;
    }
    .wrap .mainPage.page4 .bgBox ul li:nth-child(9) {
        right:42%;
        bottom:11.1vw;
    }
    .wrap .mainPage.page4 .bgBox ul li:nth-child(10) {
        right:55.5%;
        bottom:19.5vw;
    }
}


.wrap .mainPage.page5 .bg {
    background: url(../images/page5_bg.jpg) no-repeat center center;
    background-size: cover;
}
.wrap .mainPage.page5 .contentBox .titleBox {
    top:10vw;
    transform: translate(-30%,0);
    -webkit-transform: translate(-30%,0);
}
.wrap .mainPage.page5.current .contentBox .titleBox {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page5 .contentBox .textBox {
    position: absolute;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    top:17vw;
}
.wrap .mainPage.page5 .contentBox .textBox li {
    position: relative;
    display: inline-block;
    transform: translate(0,-20%);
    -webkit-transform: translate(0,-20%);
    width: calc(100% / 3 - 6%);
    margin: 0 3% 0 3%;
    vertical-align: top;
    opacity: 0;
}
.wrap .mainPage.page5.current .contentBox .textBox li {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page5 .contentBox .textBox li:nth-child(1) {
    transition: 
        transform 1s ease 0.3s,
        opacity 1s ease 0.3s;
    -webkit-transition: 
        -webkit-transform 1s ease 0.3s,
        opacity 1s ease 0.3s;
}
.wrap .mainPage.page5 .contentBox .textBox li:nth-child(2) {
    transition: 
        transform 1s ease 0.8s,
        opacity 1s ease 0.8s;
    -webkit-transition: 
        -webkit-transform 1s ease 0.8s,
        opacity 1s ease 0.8s;
}
.wrap .mainPage.page5 .contentBox .textBox li:nth-child(3) {
    transition: 
        transform 1s ease 1.3s,
        opacity 1s ease 1.3s;
    -webkit-transition: 
        -webkit-transform 1s ease 1.3s,
        opacity 1s ease 1.3s;
}
.wrap .mainPage.page5 .contentBox .textBox li img {
    position: relative;
    display: block;
    width: 100%;
}
.wrap .mainPage.page5 .contentBox .textBox li dl {
    position: relative;
    display: block;
    width: 100%;
    color:#fff;
}
.wrap .mainPage.page5 .contentBox .textBox li dl dt {
    position: relative;
    display: block;
    width: 80%;
    left: 10%;
}
.wrap .mainPage.page5 .contentBox .textBox li dl dt img {
    position: relative;
    display: block;
    width: 60%;
    left: 20%;
}
.wrap .mainPage.page5 .contentBox .textBox li dl dt span {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    font-size: calc(14px + (100vw - 1100px) * 0.01);
    line-height: calc(14px + (100vw - 1100px) * 0.01);
    color:rgba(215,0,15,1);
}
.wrap .mainPage.page5 .contentBox .textBox li dl dd {
    position: relative;
    display: block;
    width: 100%;
    text-align: justify;
    margin: 1vw 0 0 0;
    color:rgba(86,86,86,1);
    font-size: calc(12px + (100vw - 1100px) * 0.005);
    line-height: calc(20px + (100vw - 1100px) * 0.01);
}
@media screen and (max-width: 1100px) {
    .wrap .mainPage.page5 .bg {
        background: url(../images/page5_bg.jpg) no-repeat 12% bottom;
        background-size: cover;
    }
    .wrap .mainPage.page5 .contentBox .titleBox {
        top:auto;
    }
    .wrap .mainPage.page5 .contentBox .textBox {
        position: relative;
        display: block;
        width: 100%;
        top:auto;
        height: auto;
        padding: 0 0 10vw 0;
    }
    .wrap .mainPage.page5 .contentBox .textBox li {
        display: block;
        width: 100%;
        margin: 0;
    }
    .wrap .mainPage.page5 .contentBox .textBox li dl dt {
        display: block;
        width: 100%;
        height: auto;
        left: 0;
        margin: 0;
    }
    .wrap .mainPage.page5 .contentBox .textBox li dl dt img {
        width: 30%;
        left: 35%;
    }
    .wrap .mainPage.page5 .contentBox .textBox li dl dt span {
        font-size: calc(15px + (100vw - 300px) * 0.02);
        line-height: calc(20px + (100vw - 300px) * 0.02);
    }
    .wrap .mainPage.page5 .contentBox .textBox li dl dd {
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.02);
    }
}

.wrap .mainPage.page6 .bg {
    background: rgb(20,50,74);
    background: radial-gradient(circle at 50% 100%, rgba(96,96,96,1) 0%, rgba(30,38,44,1) 100%);
}
.wrap .mainPage.page6 .bgBox {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.wrap .mainPage.page6 .bgBox .bgImg1 {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background:url(../images/page6_bg2.png) no-repeat center bottom; 
    background-size: 100% auto;
    transform: translate(0,20%);
    -webkit-transform: translate(0,20%);
    opacity: 0;
    transition: 
        transform 1s ease 0.3s,
        opacity 1s ease 0.3s;
    -webkit-transition: 
        -webkit-transform 1s ease 0.3s,
        opacity 1s ease 0.3s;
}
.wrap .mainPage.page6.current .bgBox .bgImg1 {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page6 .bgBox .bgImg2 {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background:url(../images/page6_bg3.png) no-repeat center bottom; 
    background-size: 100% auto;
    transform: translate(0,20%);
    -webkit-transform: translate(0,20%);
    opacity: 0;
    transition: 
        transform 1s ease 0.6s,
        opacity 1s ease 0.6s;
    -webkit-transition: 
        -webkit-transform 1s ease 0.6s,
        opacity 1s ease 0.6s;
}
.wrap .mainPage.page6.current .bgBox .bgImg2 {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page6 .bgBox .bgImg2 li:nth-child(1) {
    height: 3vw;
}
.wrap .mainPage.page6 .contentBox .titleBox {
    position: relative;
    top:10vw;
    width:50%;
    transform: translate(-30%,0);
    -webkit-transform: translate(-30%,0);
}
.wrap .mainPage.page6 .contentBox .titleBox h1 {
    color:#fff;
}
.wrap .mainPage.page6.current .contentBox .titleBox {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page6 .contentBox .titleBox .videoBtn {
    position: absolute;
    display: block;
    right: 0;
    top:0;
    background: rgba(215,0,15,1);
    padding: 1vw;
    font-size: calc(15px + (100vw - 1100px) * 0.012);
    line-height: calc(15px + (100vw - 1100px) * 0.012);
    letter-spacing: calc(3px + (100vw - 1100px) * 0.002);
    color:#fff;
    font-weight: normal;
    text-align: center;
    margin: 0;
    -webkit-transition: background 0.3s ease 0s;
    transition: background 0.3s ease 0s;
    cursor: pointer;
}
.wrap .mainPage.page6 .contentBox .titleBox .videoBtn::after {
    content: "";
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0 0 0 5px;
    border-style: solid;
    border-width: 7px 0 7px 14px;
    border-color: transparent transparent transparent #fff;
    vertical-align: middle;
}
.wrap .mainPage.page6 .contentBox .titleBox .videoBtn:hover {
    background: rgba(255,0,0,1); 
}

.wrap .mainPage.page6 .contentBox .textBox {
    position: absolute;
    display: block;
    width: 50%;
    font-size: 0;
    line-height: 0;
    top:20vw;
}
.wrap .mainPage.page6 .contentBox .textBox li {
    position: relative;
    display: block;
    transform: translate(-20%,0);
    -webkit-transform: translate(-20%,0);
    width: 100%;
    opacity: 0;
}
.wrap .mainPage.page6.current .contentBox .textBox li {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page6 .contentBox .textBox li:nth-child(1) {
    transition: 
        transform 2s ease 0.8s,
        opacity 2s ease 0.8s;
    -webkit-transition: 
        -webkit-transform 2s ease 0.8s,
        opacity 2s ease 0.8s;
}
.wrap .mainPage.page6 .contentBox .textBox li:nth-child(2) {
    transition: 
        transform 2s ease 1.3s,
        opacity 2s ease 1.3s;
    -webkit-transition: 
        -webkit-transform 2s ease 1.3s,
        opacity 2s ease 1.3s;
}
.wrap .mainPage.page6 .contentBox .textBox li dl {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 2vw 0;
}
.wrap .mainPage.page6 .contentBox .textBox li dl dt {
    position: relative;
    display: inline-block;
    width: 25%;
    vertical-align: middle;
}
.wrap .mainPage.page6 .contentBox .textBox li dl dd {
    position: relative;
    display: inline-block;
    width: 70%;
    margin: 0 0 0 5%;
    font-size: calc(12px + (100vw - 1100px) * 0.005);
    line-height: calc(20px + (100vw - 1100px) * 0.01);
    vertical-align: middle;
    color:#fff;
    text-align: justify;
}
.wrap .mainPage.page6 .contentBox .textBox li dl dd span {
    position: relative;
    display: block;
    font-size: calc(15px + (100vw - 1100px) * 0.01);
    line-height: calc(20px + (100vw - 1100px) * 0.01);
    padding: 0 0 1vw 0;
    font-weight: bold;
}
.wrap .mainPage.page6 .contentBox .padBox {
    position: absolute;
    width: 60%;
    left: 55%;
    top:9vw;
    transform: translate(100%,0);
    -webkit-transform: translate(100%,0);
    opacity: 0;
    transition: 
        transform 2s ease 1.6s,
        opacity 2s ease 1.6s;
    -webkit-transition: 
        -webkit-transform 2s ease 1.6s,
        opacity 2s ease 1.6s;
}
.wrap .mainPage.page6.current .contentBox .padBox {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page6 .contentBox .padBox img {
    position: relative;
    display: block;
    width: 100%;
}
.wrap .mainPage.page6 .contentBox .padBox span {
    position: relative;
    display: block;
    font-size: calc(12px + (100vw - 1100px) * 0.005);
    line-height: calc(12px + (100vw - 1100px) * 0.005);
    color:#fff;
    margin: 1vw 0 0 0;
    text-align: center;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox {
    position: relative;
    display: block;
    width: 100%;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBg {
    position: relative;
    display: block;
    width: 100%;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padSymbol1 {
    position: absolute;
    display: block;
    width: 30%;
    left: 35%;
    top:51.5%;
    opacity: 1;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padSymbol1 {
    -webkit-animation:-webkit-padSymbol1 20s linear 0s 1 normal both;
    animation:padSymbol1 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padSymbol1 {
    0% {opacity: 1;}
    30% {opacity: 1;}
    33% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes padSymbol1 {
    0% {opacity: 1;}
    30% {opacity: 1;}
    33% {opacity: 0;}
    100% {opacity: 0;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padSymbol2 {
    position: absolute;
    display: block;
    width: 83.5%;
    left: 8%;
    top:59%;
    opacity: 1;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padSymbol2 {
    -webkit-animation:-webkit-padSymbol2 20s linear 0s 1 normal both;
    animation:padSymbol2 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padSymbol2 {
    0% {opacity: 1;}
    30% {opacity: 1;}
    33% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes padSymbol2 {
    0% {opacity: 1;}
    30% {opacity: 1;}
    33% {opacity: 0;}
    100% {opacity: 0;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padSymbol3 {
    position: absolute;
    display: block;
    width: 83.5%;
    left: 8%;
    top:59%;
    opacity: 0;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padSymbol3 {
    -webkit-animation:-webkit-padSymbol3 20s linear 0s 1 normal both;
    animation:padSymbol3 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padSymbol3 {
    0% {opacity: 0;}
    33% {opacity: 0;}
    36% {opacity: 1;}
    60% {opacity: 1;}
    63% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes padSymbol3 {
    0% {opacity: 0;}
    33% {opacity: 0;}
    36% {opacity: 1;}
    60% {opacity: 1;}
    63% {opacity: 0;}
    100% {opacity: 0;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padSymbol4 {
    position: absolute;
    display: block;
    width: 83.5%;
    left: 8%;
    top:59%;
    opacity: 0;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padSymbol4 {
    -webkit-animation:-webkit-padSymbol4 20s linear 0s 1 normal both;
    animation:padSymbol4 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padSymbol4 {
    0% {opacity: 0;}
    63% {opacity: 0;}
    66% {opacity: 1;}
    100% {opacity: 1;}
}
@keyframes padSymbol4 {
    0% {opacity: 0;}
    63% {opacity: 0;}
    66% {opacity: 1;}
    100% {opacity: 1;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padSymbol5 {
    position: absolute;
    display: block;
    width: 33%;
    left: 33.5%;
    top:52%;
    opacity: 0;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padSymbol5 {
    -webkit-animation:-webkit-padSymbol5 20s linear 0s 1 normal both;
    animation:padSymbol5 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padSymbol5 {
    0% {opacity: 0;}
    63% {opacity: 0;}
    66% {opacity: 1;}
    100% {opacity: 1;}
}
@keyframes padSymbol5 {
    0% {opacity: 0;}
    63% {opacity: 0;}
    66% {opacity: 1;}
    100% {opacity: 1;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList {
    position: absolute;
    display: block;
    width: 83.5%;
    height: 35.5%;
    left: 8%;
    top:59%;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padBarList {
    -webkit-animation:-webkit-padBarList 20s linear 0s 1 normal both;
    animation:padBarList 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padBarList {
    0% {opacity: 1;}
    30% {opacity: 1;}
    33% {opacity: 0;}
    63% {opacity: 0;}
    66% {opacity: 1;}
    100% {opacity: 1;}
}
@keyframes padBarList {
    0% {opacity: 1;}
    30% {opacity: 1;}
    33% {opacity: 0;}
    63% {opacity: 0;}
    66% {opacity: 1;}
    100% {opacity: 1;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li {
    position: absolute;
    display: block;
    width: 32.5%;
    height: 4px;
    background: #c4c4c4;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li:nth-child(1) {
    left: 9.5%;
    top:20%;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li:nth-child(2) {
    left: 9.5%;
    top:48%;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li:nth-child(3) {
    left: 9.5%;
    top:78%;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li:nth-child(4) {
    left: 59%;
    top:20%;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li:nth-child(5) {
    left: 59%;
    top:48%;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li:nth-child(6) {
    left: 59%;
    top:78%;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li span {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    margin: 0;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li:nth-child(1) span {
    background: #1d2f4f;
    width: 25%;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padBarList li:nth-child(1) span {
    -webkit-animation:-webkit-padBarList1 20s linear 0s 1 normal both;
    animation:padBarList1 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padBarList1 {
    0% {width: 25%;}
    66% {width: 25%;}
    70% {width: 20%;}
    100% {width: 20%;}
}
@keyframes padBarList1 {
    0% {width: 25%;}
    66% {width: 25%;}
    75% {width: 20%;}
    100% {width: 20%;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li:nth-child(2) span {
    background: #354c6d;
    width: 10%;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padBarList li:nth-child(2) span {
    -webkit-animation:-webkit-padBarList2 20s linear 0s 1 normal both;
    animation:padBarList2 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padBarList2 {
    0% {width: 10%;}
    66% {width: 10%;}
    70% {width: 5%;}
    100% {width: 5%;}
}
@keyframes padBarList2 {
    0% {width: 10%;}
    66% {width: 10%;}
    70% {width: 5%;}
    100% {width: 5%;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li:nth-child(3) span {
    background: #4d6889;
    width: 5%;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padBarList li:nth-child(3) span {
    -webkit-animation:-webkit-padBarList3 20s linear 0s 1 normal both;
    animation:padBarList3 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padBarList3 {
    0% {width: 5%;}
    66% {width: 5%;}
    70% {width: 15%;}
    100% {width: 15%;}
}
@keyframes padBarList3 {
    0% {width: 5%;}
    66% {width: 5%;}
    70% {width: 15%;}
    100% {width: 15%;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li:nth-child(4) span {
    background: #c40000;
    width: 35%;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padBarList li:nth-child(4) span {
    -webkit-animation:-webkit-padBarList4 20s linear 0s 1 normal both;
    animation:padBarList4 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padBarList4 {
    0% {width: 35%;}
    66% {width: 35%;}
    70% {width: 25%;}
    100% {width: 25%;}
}
@keyframes padBarList4 {
    0% {width: 35%;}
    66% {width: 35%;}
    70% {width: 25%;}
    100% {width: 25%;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li:nth-child(5) span {
    background: #ff0000;
    width: 10%;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padBarList li:nth-child(5) span {
    -webkit-animation:-webkit-padBarList5 20s linear 0s 1 normal both;
    animation:padBarList5 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padBarList5 {
    0% {width: 10%;}
    66% {width: 10%;}
    70% {width: 15%;}
    100% {width: 15%;}
}
@keyframes padBarList5 {
    0% {width: 10%;}
    66% {width: 10%;}
    70% {width: 15%;}
    100% {width: 15%;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li:nth-child(6) span {
    background: #ff5c5c;
    width: 15%;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padBarList li:nth-child(6) span {
    -webkit-animation:-webkit-padBarList6 20s linear 0s 1 normal both;
    animation:padBarList6 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padBarList6 {
    0% {width: 15%;}
    66% {width: 15%;}
    70% {width: 20%;}
    100% {width: 20%;}
}
@keyframes padBarList6 {
    0% {width: 15%;}
    66% {width: 15%;}
    70% {width: 20%;}
    100% {width: 20%;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padLoading {
    position: absolute;
    display: block;
    width: 30%;
    height: 8%;
    top:75%;
    left: 35%;
    opacity: 0;
}
.wrap .mainPage.page6.current .contentBox .padBox .padAnimateBox .padLoading {
    -webkit-animation:-webkit-padLoading 20s linear 0s 1 normal both;
    animation:padLoading 20s linear 0s 1 normal both;
}
@-webkit-keyframes webkit-padLoading {
    0% {opacity: 0;}
    33% {opacity: 0;}
    36% {opacity: 1;}
    60% {opacity: 1;}
    63% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes padLoading {
    0% {opacity: 0;}
    33% {opacity: 0;}
    36% {opacity: 1;}
    60% {opacity: 1;}
    63% {opacity: 0;}
    100% {opacity: 0;}
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padLoading ul {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    font-size: 0;
    line-height: 0;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padLoading ul li {
    position: relative;
    display: inline-block;
    width: calc(100% / 5 - 2px);
    height: 100%;
    margin: 0 1px 0 1px;
    background: rgba(255,255,255,1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padLoading ul li:nth-child(1) {
    -webkit-animation:webkit-loading_animate 0.5s linear 0s infinite alternate;
    animation:loading_animate 0.5s linear 0s infinite alternate;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padLoading ul li:nth-child(2) {
    -webkit-animation:webkit-loading_animate 0.5s linear -0.3s infinite alternate;
    animation:loading_animate 0.5s linear -0.3s infinite alternate;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padLoading ul li:nth-child(3) {
    -webkit-animation:webkit-loading_animate 0.5s linear -0.6s infinite alternate;
    animation:loading_animate 0.5s linear -0.6s infinite alternate;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padLoading ul li:nth-child(4) {
    -webkit-animation:webkit-loading_animate 0.5s linear -0.9s infinite alternate;
    animation:loading_animate 0.5s linear -0.9s infinite alternate;
}
.wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padLoading ul li:nth-child(5) {
    -webkit-animation:webkit-loading_animate 0.5s linear -1.2s infinite alternate;
    animation:loading_animate 0.5s linear -1.2s infinite alternate;
}

@media screen and (max-width: 1100px) {
    .wrap .mainPage.page6 .contentBox .titleBox {
        width: 100%;
        top:auto;
    }
    .wrap .mainPage.page6 .contentBox .titleBox .videoBtn {
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.02);
        position: relative;
        top:auto;
        margin: 3vw 0 0 0;
        padding: 3vw;
        width: 100%;
    }
    .wrap .mainPage.page6 .contentBox .textBox {
        position: relative;
        display: block;
        width: 100%;
        top:auto;
        height: auto;
        padding: 0;
    }
    .wrap .mainPage.page6 .contentBox .textBox li dl {
        margin: 0 0 8vw 0;
    }
    .wrap .mainPage.page6 .contentBox .textBox li dl dd {
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.02);
    }
    .wrap .mainPage.page6 .contentBox .textBox li dl dd span {
        font-size: calc(15px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.02);
    }
    .wrap .mainPage.page6 .contentBox .padBox {
        position: relative;
        width: 100%;
        left: 0%;
        top: auto;
    }
    .wrap .mainPage.page6 .contentBox .padBox span {
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.02);
    }
    .wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li {
        height: 3px;
    }
}
@media screen and (max-width: 600px) {
    .wrap .mainPage.page6 .contentBox .padBox .padAnimateBox .padBarList li {
        height: 2px;
    }
}


.wrap .mainPage.page7 .bg {
    background: url(../images/page7_bg.jpg) no-repeat center center;
    background-size: cover;
}
.wrap .mainPage.page7 .contentBox .titleBox {
    bottom:22vw;
    transform: translate(-30%,0);
    -webkit-transform: translate(-30%,0);
}
.wrap .mainPage.page7.current .contentBox .titleBox {
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    opacity: 1;
}
.wrap .mainPage.page7 .contentBox .formBox {
    position: absolute;
    display: block;
    bottom:22vw;
    left: 35%;
    opacity: 0;
    transform: translate(20%,0);
    -webkit-transform: translate(20%,0);
    transition: 
        opacity 1s ease 0.6s,
        transform 1s ease 0.6s;
    -webkit-transition:
        opacity 1s ease 0.6s,
        -webkit-transform 1s ease 0.6s;
}
.wrap .mainPage.page7.current .contentBox .formBox {
    opacity: 1;
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
}
.wrap .mainPage.page7 .contentBox .formBox li {
    position: relative;
    display: block;
    font-size: calc(15px + (100vw - 1100px) * 0.02);
    line-height: calc(20px + (100vw - 1100px) * 0.02);
    margin: 1.2vw 0 0 0;
}
.wrap .mainPage.page7 .contentBox .formBox li span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.wrap .mainPage.page7 .contentBox .formBox li span input {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid rgba(204,204,204,1);
    font-size: calc(15px + (100vw - 1100px) * 0.01);
    line-height: calc(20px + (100vw - 1100px) * 0.01);
    height: calc(20px + (100vw - 1100px) * 0.01 + 1vw);
    margin: 0 1vw 0 1vw;
    padding: 0 0.5vw 0 0.5vw;
    width: 5vw;
    color:rgba(53,76,109,1);
}
select::-ms-expand {
     display: none;
}
.wrap .mainPage.page7 .contentBox .formBox li span select {
    background: transparent;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    font-size: calc(15px + (100vw - 1100px) * 0.01);
    line-height: calc(20px + (100vw - 1100px) * 0.01);
    height: calc(20px + (100vw - 1100px) * 0.01 + 1vw);
    color:rgba(53,76,109,1);
    padding: 0 2vw 0 0.5vw;
}
.wrap .mainPage.page7 .contentBox .formBox li span .selectBox {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid rgba(204,204,204,1);
    margin: 0 1vw 0 1vw;
}
.wrap .mainPage.page7 .contentBox .formBox li span .selectBox::after {
    content: "";
    position: absolute;
    display: block;
    width: 0.8vw;
    height: 0.8vw;
    right: 1vw;
    top:calc(50% - 0.4vw);
    background: url(../images/page7_icon1.svg) no-repeat center center;
    background-size: contain;
    pointer-events: none;
}
.wrap .mainPage.page7 .contentBox .formBox li span.type2 .selectBox {
    display: inline-block;
    margin: 0.5vw 0 0.5vw 0;
}
.wrap .mainPage.page7 .contentBox .bar {
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(215,0,15,1);
    bottom: 19vw;
}
.wrap .mainPage.page7 .contentBox .sendBtn {
    position: absolute;
    display: block;
    width: 25%;
    left: 37.5%;
    bottom:12vw;
    background: rgba(215,0,15,1);
    padding: 1.5vw 0 1.5vw 0;
    font-size: calc(20px + (100vw - 1100px) * 0.012);
    line-height: calc(20px + (100vw - 1100px) * 0.012);
    letter-spacing: calc(5px + (100vw - 1100px) * 0.002);
    text-indent: calc(5px + (100vw - 1100px) * 0.002);
    color:#fff;
    font-weight: normal;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transform: translate(0,-20%);
    -webkit-transform: translate(0,-20%);
    transition: 
        background 0.3s ease 0s,
        opacity 1s ease 1s,
        transform 1s ease 1s;
    -webkit-transition: background 0.3s ease 0s,
        opacity 1s ease 1s,
        -webkit-transform 1s ease 1s;
}
.wrap .mainPage.page7 .contentBox .sendBtn:hover {
    background: rgba(255,0,0,1); 
}
.wrap .mainPage.page7.current .contentBox .sendBtn {
    opacity: 1;
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
}
@media screen and (max-width: 1100px) {
    .wrap .mainPage.page7 .bg {
        background: url(../images/page7_bg.jpg) no-repeat 70% center;
        background-size: cover;
    }
    .wrap .mainPage.page7 .contentBox .titleBox {
        top:auto;
        bottom: auto;
    }
    .wrap .mainPage.page7 .contentBox .formBox {
        position: relative;
        display: block;
        bottom:auto;
        left: 0;
    }
    .wrap .mainPage.page7 .contentBox .formBox li {
        font-size: calc(14px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.02);
        margin: 0 0 4vw 0;
    }
    .wrap .mainPage.page7 .contentBox .formBox li span input {
        font-size: calc(14px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.02);
        height: calc(20px + (100vw - 300px) * 0.02 + 1vw);
        margin: 0 1vw 0 1vw;
        padding: 0 0.5vw 0 0.5vw;
        width: 12vw;
    }
    .wrap .mainPage.page7 .contentBox .formBox li span select {
        font-size: calc(14px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.02);
        height: calc(20px + (100vw - 300px) * 0.02 + 1vw);
        padding: 0 4vw 0 1vw;
    }
    .wrap .mainPage.page7 .contentBox .formBox li span.type2 br {
        display: none;
    }
    .wrap .mainPage.page7 .contentBox .formBox li span.type2 .selectBox {
        margin: 0;
    }
    .wrap .mainPage.page7 .contentBox .formBox li span .selectBox::after {
        width: 1.5vw;
        height: 1.5vw;
        right: 1vw;
        top:calc(50% - 0.7vw);
    }
    .wrap .mainPage.page7 .contentBox .bar {
        position: relative;
        bottom: auto;
    }
    .wrap .mainPage.page7 .contentBox .sendBtn {
        position: relative;
        width: 50%;
        left: 25%;
        bottom:auto;
        padding: 3vw 0 3vw 0;
        font-size: calc(14px + (100vw - 300px) * 0.012);
        line-height: calc(14px + (100vw - 300px) * 0.012);
        letter-spacing: calc(5px + (100vw - 300px) * 0.002);
        text-indent: calc(5px + (100vw - 300px) * 0.002);
        margin: 7vw 0 0 0;
    }
}
.wrap .mainPage.page8 {
    height: auto;
    min-height:inherit;
    max-height: none;
}
.wrap .mainPage.page8 .QABtnBox {
    position: relative;
    display: block;
    width: 100%;
    height: 20vw;
    background: url(../images/page8_bg.jpg) no-repeat center top;
    background-size: cover;
}
.wrap .mainPage.page8 .QABtnBox h1 {
    position: absolute;
    display: block;
    width: 100%;
    top:6vw;
    text-align: center;
    font-size: calc(30px + (100vw - 1100px) * 0.02);
    line-height: calc(30px + (100vw - 1100px) * 0.02);
    color: #fff;
}
.wrap .mainPage.page8 .QABtnBox h2 {
    position: absolute;
    display: block;
    width: 100%;
    top:10vw;
    text-align: center;
    font-size: calc(13px + (100vw - 1100px) * 0.01);
    line-height: calc(13px + (100vw - 1100px) * 0.005);
    color: #fff;
}
.wrap .mainPage.page8 .QABtnBox .QABtn {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
    text-align: center;
    font-size: 0;
    line-height: 0;
}
.wrap .mainPage.page8 .QABtnBox .QABtn li {
    position: relative;
    display: inline-block;
    font-size: calc(15px + (100vw - 1100px) * 0.015);
    line-height: calc(15px + (100vw - 1100px) * 0.015);
    width: 20vw;
    margin: 0 1px 0 0;
    vertical-align: bottom;
    padding: 1.3vw 0 1.3vw 0;
    background: rgba(215,0,15,1);
    color:#fff;
    cursor: pointer;
    transition: 
        background 0.3s ease 0s;
    -webkit-transition: 
        background 0.3s ease 0s;
}
.wrap .mainPage.page8 .QABtnBox .QABtn li span {
    position: relative;
    display: inline-block;
    margin: 0 0.5vw 0 0;
}
.wrap .mainPage.page8 .QABtnBox .QABtn li.current {
    background: rgba(255,255,255,1);
    color:rgba(200,120,120,1);
    padding: 1.8vw 0 1.8vw 0;
}
.wrap .mainPage.page8 .QABtnBox .QABtn li.current::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 0.5vw;
    top: 0;
    left: 0;
    background: rgba(215,0,15,1);
}
.wrap .mainPage.page8 .QABtnBox .QABtn li:hover {
    background: rgba(255,0,0,1); 
}
.wrap .mainPage.page8 .QABtnBox .QABtn li.current:hover {
    background: rgba(255,255,255,1); 
}
.wrap .mainPage.page8 .QAListBox {
    position: relative;
    display: block;
    width: 100%;
    background: #fff;
}
.wrap .mainPage.page8 .QAListBox li {
    position: relative;
    display: none;
    width: 70%;
    left: 15%;
}
.wrap .mainPage.page8 .QAListBox li.current {
    display: block;
}
.wrap .mainPage.page8 .QAListBox li dl {
    position: relative;
    display: block;
    width: 100%;
    padding: 3vw 0 8vw 0;
}
.wrap .mainPage.page8 .QAListBox li dl dt {
    position: relative;
    display: block;
    width: 100%;
    font-size: calc(21px + (100vw - 1100px) * 0.015);
    line-height: calc(21px + (100vw - 1100px) * 0.015);
    cursor: pointer;
    padding: 1.5vw 1vw 1.5vw 1vw;
    border-top:1px solid rgba(200,120,120,0.5);
    transition: 
        background 0.3s ease 0s;
    -webkit-transition: 
        background 0.3s ease 0s;
}
.wrap .mainPage.page8 .QAListBox li dl dt:nth-child(1) {
    border-top: 0;
}
.wrap .mainPage.page8 .QAListBox li dl dt::before {
    content: "";
    position: absolute;
    display: block;
    width: 16px;
    height: 4px;
    right: 1vw;
    top:calc(50% - 2px);
    background:rgba(200,120,120,1); 
}
.wrap .mainPage.page8 .QAListBox li dl dt::after {
    content: "";
    position: absolute;
    display: block;
    width: 4px;
    height: 16px;
    right:calc(6px + 1vw);
    top:calc(50% - 8px);
    background:rgba(200,120,120,1); 
}
.wrap .mainPage.page8 .QAListBox li dl dt:hover {
    background:rgba(245,245,245,1); 
}
.wrap .mainPage.page8 .QAListBox li dl dd {
    position: relative;
    display: none;
    width: 100%;
    font-size: calc(12px + (100vw - 1100px) * 0.01);
    line-height: calc(20px + (100vw - 1100px) * 0.01);
    padding: 0 1vw 2vw 1vw;
}
.wrap .mainPage.page8 .QAListBox li dl dd a {
    color:dodgerblue;
}
.wrap .mainPage.page8 .QAListBox li dl dt.current + dd {
    display: block;
}
.wrap .mainPage.page8 .QAListBox li dl dt.current::after {
    display: none;
}
@media screen and (max-width: 1100px) {
    .wrap .mainPage.page8 .QABtnBox {
        width: 100%;
        height: 45vw;
        background: url(../images/page8_bg.jpg) no-repeat center top;
        background-size: cover;
    }
    .wrap .mainPage.page8 .QABtnBox h1 {
        top:6vw;
        font-size: calc(25px + (100vw - 300px) * 0.03);
        line-height: calc(30px + (100vw - 300px) * 0.03);
    }
    .wrap .mainPage.page8 .QABtnBox h2 {
        width: 90%;
        left: 5%;
        top:17vw;
        font-size: calc(12px + (100vw - 300px) * 0.015);
        line-height: calc(18px + (100vw - 300px) * 0.005);
    }
    .wrap .mainPage.page8 .QABtnBox .QABtn li {
        font-size: calc(12px + (100vw - 300px) * 0.015);
        line-height: calc(12px + (100vw - 300px) * 0.015);
        width: 22vw;
        padding: 3vw 0 3vw 0;
    }
    .wrap .mainPage.page8 .QABtnBox .QABtn li span {
        display: none;
    }
    .wrap .mainPage.page8 .QABtnBox .QABtn li.current {
        padding: 4vw 0 4vw 0;
    }
    .wrap .mainPage.page8 .QAListBox li dl dt {
        font-size: calc(15px + (100vw - 300px) * 0.02);
        line-height: calc(15px + (100vw - 300px) * 0.02);
        padding: 5vw 1vw 5vw 1vw;
    }
    .wrap .mainPage.page8 .QAListBox li {
        width: 90%;
        left: 5%;
    }
    .wrap .mainPage.page8 .QAListBox li dl dd {
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(18px + (100vw - 300px) * 0.01);
        padding: 0 1vw 5vw 1vw;
    }
}

.wrap .mainPage.page9 {
    max-height: none;
    min-height: inherit;
    height: auto;
}
.wrap .mainPage.page9 .bg {
    background: #eee;
}
.wrap .mainPage.page9 .contentBox {
    position: relative;
}
.wrap .mainPage.page9 .contentBox .formBox2 {
    position: relative;
    display: block;
    margin: 8vw 0 8vw 0;
    background: #fff;
    border-radius:15px;
    overflow: hidden;
    box-shadow: 0px 30px 30px rgba(0,0,0,0.2);
}
.wrap .mainPage.page9 .contentBox .formBox2 .title {
    position: relative;
    display: block;
    width: 100%;
    font-size: calc(30px + (100vw - 1100px) * 0.02);
    line-height: calc(30px + (100vw - 1100px) * 0.02);
    padding: 1vw;
    text-align: center;
    background: #dd0000;
    color:#fff;
    font-weight: lighter;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList {
    position: relative;
    display: block;
    width: 80%;
    left: 10%;
    padding: 5vw 0 2vw 0;
    font-size: 0;
    line-height: 0;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li {
    position: relative;
    display: inline-block;
    width: 50%;
    vertical-align: top;
    margin: 0 0 2vw 0;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(3) {
    display: block;
    width: 100%;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(4) {
    display: block;
    width: 100%;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(5) {
    display: block;
    width: 100%;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(6) {
    display: block;
    width: 100%;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(7) {
    display: block;
    width: 100%;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li dl {
    position: relative;
    display: block;
    width: 100%;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dt {
    position: relative;
    display: inline-block;
    font-size: calc(15px + (100vw - 1100px) * 0.01);
    line-height: calc(20px + (100vw - 1100px) * 0.01 + 1vw);
    vertical-align: top;
    width: 10vw;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(7) dl {
    padding: 0 0 0 10vw;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(7) dl dt {
    width: 2vw;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(7) dl dd {
    width: calc(100% - 10vw);
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dd {
    position: relative;
    display: inline-block;
    font-size: calc(15px + (100vw - 1100px) * 0.01);
    line-height: calc(20px + (100vw - 1100px) * 0.01 + 1vw);
    vertical-align: top;
    width: calc(90% - 10vw);
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dd input[type="text"] {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid rgba(204,204,204,1);
    font-size: calc(15px + (100vw - 1100px) * 0.01);
    line-height: calc(20px + (100vw - 1100px) * 0.01);
    height: calc(20px + (100vw - 1100px) * 0.01 + 1vw);
    margin: 0;
    padding: 0 0.5vw 0 0.5vw;
    width: 100%;
    color:rgba(53,76,109,1);
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dd input[type=radio] {
    position: absolute;
    visibility: hidden;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dd input[type=radio] + label {
    position: relative;
    display: inline-block;
    width: calc(18px + (100vw - 1100px) * 0.01);
    height: calc(18px + (100vw - 1100px) * 0.01);
    border: 1px solid rgba(204,204,204,1);
    background: #eee;
    border-radius: 50%;
    vertical-align:sub;
    cursor: pointer;
    margin: 0 0.5vw 0 0;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dd input[type=radio]:checked + label::after {
    content: "";
    position: absolute;
    display: block;
    width: 50%;
    height: 50%;
    left: 25%;
    top:25%;
    background: #555;
    border-radius: 50%;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li dl input[type=checkbox] {
    position: absolute;
    visibility: hidden;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li dl input[type=checkbox] + label {
    position: relative;
    display: inline-block;
    width: calc(18px + (100vw - 1100px) * 0.01);
    height: calc(18px + (100vw - 1100px) * 0.01);
    border: 1px solid rgba(204,204,204,1);
    background: #eee;
    border-radius: 20%;
    vertical-align:sub;
    cursor: pointer;
    margin: 0 0.5vw 0 0;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li dl input[type=checkbox]:checked + label::after {
    content: "";
    position: absolute;
    display: block;
    width: 60%;
    height: 40%;
    left: 25%;
    top:25%;
    border-left: 3px solid #555;
    border-bottom: 3px solid #555;
    -webkit-transform;
    transform:translate(-20%,-25%)rotate(-45deg);
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li .checkText a {
    color:deepskyblue;
    cursor: auto;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li .checkText span {
    display: none;
    font-size: calc(13px + (100vw - 1100px) * 0.01);
    line-height: calc(18px + (100vw - 1100px) * 0.01 + 1vw);
    padding: 1vw;
    background: #ffddcc;
    margin: 1vw 0 0 0;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li .checkText span.expand {
    display: block;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dd .tip {
    position: relative;
    display: block;
    font-size: 12px;
    color:#ff0000;
}
.wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dd .radioOption {
    position: relative;
    display: inline-block;
    padding: 0 2vw 0 0;
}
.wrap .mainPage.page9 .contentBox .formBox2 .sendBtn {
    position: relative;
    display: inline-block;
    width: auto;
    left: 50%;
    background: rgba(215,0,15,1);
    padding: 2vw 3vw 2vw 3vw;
    font-size: calc(20px + (100vw - 1100px) * 0.012);
    line-height: calc(20px + (100vw - 1100px) * 0.012);
    letter-spacing: calc(5px + (100vw - 1100px) * 0.002);
    color:#fff;
    font-weight: normal;
    text-align: center;
    margin: 0 0 5vw 0;
    cursor: pointer;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    -webkit-transition: background 0.3s ease 0s;
    transition: background 0.3s ease 0s;
}
.wrap .mainPage.page9 .contentBox .formBox2 .sendBtn:hover {
    background: rgba(255,0,0,1); 
}

@media screen and (max-width: 1100px) {
    .wrap .mainPage.page9 .contentBox .formBox2 .title {
        font-size: calc(20px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.01);
        padding: 2vw;
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li {
        display: block;
        width: 100%;
        padding: 2vw 0 5vw 0;
        border-bottom: 1px solid #eee;
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dt {
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.01);
        width: 15vw;
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dd {
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.01);
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(7) dl {
        padding: 0 0 0 15vw;
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(7) dl dt {
        width: auto;
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(7) dl dd {
        padding: 0 0 0 1vw;
        width: calc(100% - 10vw);
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dd input[type="text"] {
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.01);
        height: calc(20px + (100vw - 300px) * 0.01 + 1vw);
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dd input[type=radio] + label {
        width: calc(18px + (100vw - 300px) * 0.01);
        height: calc(18px + (100vw - 300px) * 0.01);
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li dl input[type=checkbox] + label {
        width: calc(18px + (100vw - 300px) * 0.01);
        height: calc(18px + (100vw - 300px) * 0.01);
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(6) dl dd .radioOption {
        margin: 0 0 2vw 0;
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .sendBtn {
        font-size: calc(17px + (100vw - 300px) * 0.012);
        line-height: calc(17px + (100vw - 300px) * 0.012);
        padding: 4vw 6vw 4vw 6vw;
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li .checkText span {
        font-size: calc(13px + (100vw - 300px) * 0.01);
        line-height: calc(18px + (100vw - 300px) * 0.01 + 1vw);
        padding: 2vw;
    }
    
}
@media screen and (max-width: 600px) {
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dt {
        display: block;
        width: 100%;
        margin: 0 0 1vw 0;
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li dl dd {
        display: block;
        width: 100%;
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(7) dl {
        padding: 0;
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(7) dl dt {
        display: inline-block;
        width: auto;
    }
    .wrap .mainPage.page9 .contentBox .formBox2 .formList li:nth-child(7) dl dd {
        display: inline-block;
        width: calc(100% - 10vw);
        padding: 0 0 0 1vw;
    }
}



.wrap .footerBox {
    position: relative;
    display: block;
    width: 100%;
    background: #eee;
}
.wrap .footerBox .noteBox {
    position: relative;
    display: block;
    font-size: 0;
    line-height: 0;
    text-align: left;
    padding: 0 10px 0 10px;
    margin: 0 0 10px 0;
}
.wrap .footerBox .noteBox span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    line-height: 13px;
    color:rgba(215,0,15,1);
    margin: 0 5px 0 5px;
}
.wrap .footerBox .noteBox a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
    font-size: 13px;
    line-height: 13px;
    background: rgba(215,0,15,1);
    color:#fff;
    border-radius: 5px;   
}
.wrap .footerBox .noteBox a:hover {
    background: rgba(255,0,0,1); 
}
.wrap .footerBox .webBox {
    position: absolute;
    top: 5px;
    right: 15px;
    display: block;
    font-size: 0;
    line-height: 0;
}
.wrap .footerBox .webBox li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    line-height: 13px;
    margin: 0 8px 0 8px;
    padding: 0 0 0 12px;
}
.wrap .footerBox .webBox li a {
    color:rgba(215,0,15,1);
}
.wrap .footerBox .webBox li a:hover {
    color: rgba(255,0,0,1); 
}
.wrap .footerBox .webBox li::before {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: 0;
    top:1px;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent rgba(215,0,15,1);
}
.wrap .footerBox .infoBox {
    position: relative;
    display: block;
    width: 100%;
    background: rgba(50,50,50,1);
    font-size: 0;
    line-height: 0;
    padding: 20px 15px 20px 15px;
}
.wrap .footerBox .infoBox ul {
    position: relative;
    display: block;
}
.wrap .footerBox .infoBox li {
    position: relative;
    display: inline-block;
    font-size: 12px;
    line-height: 24px;
    padding: 0 5px 0 5px;
    color:#fff;
}
.wrap .footerBox .infoBox li:last-child {
    display: block;
}
.wrap .footerBox .infoBox .copyright {
    position: absolute;
    display: block;
    font-size: 12px;
    line-height: 16px;
    color:#fff;
    right: 15px;
    top:20px;
}
@media screen and (max-width: 1200px) {
    .wrap .footerBox .infoBox ul {
        text-align: center;
        margin: 0;
    }
    .wrap .footerBox .infoBox .copyright {
        position: relative;
        width: 100%;
        text-align: center;
        top: auto;
        right: auto;
    }
}
@media screen and (max-width: 1000px) {
    .wrap .footerBox .webBox {
        position: relative;
        width: 100%;
        text-align: center;
        top: auto;
        right: auto;
        margin: 0 0 20px 0;
    }
    .wrap .footerBox .noteBox {
        text-align: center;
        padding: 0 10px 0 10px;
        margin: 0 0 10px 0;
    }
    .wrap .footerBox .noteBox span {
        line-height: 24px;
    }
}
.lightBox {
    position: fixed; 
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%; 
    height: 100%; 
    z-index: 99999;
    top: 0; 
    left: 0;
}
.lightBox.expand {
    display: block;
}
.lightBox .textBox {
    position: absolute; 
    background: #eee; 
    width: 80%; 
    height: 80%; 
    top: 10%; 
    left: 10%; 
    font-size: 15px; 
    line-height: 24px;
    padding: 50px;
    color: #888;
    overflow-y: scroll;
}
.lightBox .textBox span.color1 {
    color:#d7000f;
}
.lightBox .textBox span.color2 {
    color:#333;
}
.lightBox .textBox a {
    color:rgba(215,0,15,1);
    text-decoration: underline;
}
.lightBox .closeBtn {
    position: absolute;
    left: calc(90% + 10px);
    top:calc(10% - 40px);
    height: 30px;
    width: 30px;
    cursor: pointer;
}
.lightBox .closeBtn::before {
    content: "";
    position: absolute;
    height: 20%;
    width: 100%;
    background: #fff;
    left: 0;
    top: 12px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
.lightBox .closeBtn::after {
    content: "";
    position: absolute;
    height: 20%; 
    width: 100%;
    background: #fff;
    left: 0;
    top: 12px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
@media screen and (max-width: 1100px) {
    .lightBox .textBox {
        width: 100%;
        left: 0;
        top:60px;
        height: calc(100% - 120px);
        padding: 5vw;
    }
    .lightBox .closeBtn {
        top:15px;
        left: auto;
        right: 15px;
    }
}


.wrap .mainPage.report {
    height: auto;
    min-height:inherit;
    max-height: none;
    background: #f5f5f5;
}
.wrap .mainPage.report + .footerBox {
    background: #f5f5f5;
}
.wrap .mainPage.report .reportTitleBox {
    position: relative;
    display: block;
    width: 100%;
    height: 20vw;
    background: url(../images/page9_bg.jpg) no-repeat center top;
    background-size: cover;
}
.wrap .mainPage.report .reportTitleBox h1 {
    position: absolute;
    display: block;
    width: 100%;
    top:6vw;
    text-align: center;
    font-size: calc(40px + (100vw - 1100px) * 0.02);
    line-height: calc(40px + (100vw - 1100px) * 0.02);
    letter-spacing: calc(5px + (100vw - 1100px) * 0.01);
    color: #fff;
}
.wrap .mainPage.report .reportTitleBox h2 {
    position: absolute;
    display: block;
    width: 100%;
    top:11vw;
    text-align: center;
    font-size: calc(15px + (100vw - 1100px) * 0.01);
    line-height: calc(15px + (100vw - 1100px) * 0.005);
    color: #fff;
}
.wrap .mainPage.report .contentBox {
    position: relative;
}
.wrap .mainPage.report .contentBox .textBox {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    text-align: center;
    padding: 3vw 0 0 0;
}
.wrap .mainPage.report .contentBox .textBox li {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 1.5vw 0;
}
.wrap .mainPage.report .contentBox .textBox span {
    position: relative;
    display: inline-block;
    font-size: calc(15px + (100vw - 1100px) * 0.01);
    line-height: calc(15px + (100vw - 1100px) * 0.01);
    vertical-align: middle;
    color:#000;
}
.wrap .mainPage.report .contentBox .textBox span.style2 {
    font-size: calc(30px + (100vw - 1100px) * 0.01);
    line-height: calc(30px + (100vw - 1100px) * 0.01);
    color:#007130;
    padding: 0 1vw 0 1vw;
}
.wrap .mainPage.report .contentBox .listBox {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    padding: 0 0 2vw 0;
    text-align: center;
}
.wrap .mainPage.report .contentBox .listBox > li {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    vertical-align: top;
    margin: 5vw 0 2vw 0;
    padding: 2vw 1vw 2vw 1vw;
    background: #fff;
    border-radius:0.5vw;
    box-shadow: 0.5vw 0.5vw 2vw rgba(0,0,0,0.1);
}
.wrap .mainPage.report .contentBox .listBox > li > dl {
    position: relative;
    display: block;
    width: 100%;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt {
    position: relative;
    display: inline-block;
    width: 30%;
    height: 20vw;
    transform: translate(0,-20%);
    -webkit-transform: translate(0,-20%);
    opacity: 0;
    vertical-align: middle;
    
    transition: 
        opacity 2s ease 0s,
        transform 2s ease 0s;
    -webkit-transition:
        opacity 2s ease 0s,
        -webkit-transform 2s ease 0s;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.current {
    opacity: 1;
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 {
    background: url(../images/report_p1.svg) no-repeat center center;
    background-size: contain;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 {
    background: url(../images/report_p2.svg) no-repeat center center;
    background-size: contain;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 {
    background: url(../images/report_p3.svg) no-repeat center center;
    background-size: contain;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 {
    background: url(../images/report_p4.svg) no-repeat center center;
    background-size: contain;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 {
    background: url(../images/report_p5.svg) no-repeat center center;
    background-size: contain;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd {
    position: relative;
    display: inline-block;
    width: 70%;
    vertical-align: middle;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul > li {
    position: relative;
    display: inline-block;
    width: 40%;
    margin: 1vw 5% 1vw 5%;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul > li .name {
    position: relative;
    display: block;
    font-size: calc(15px + (100vw - 1100px) * 0.01);
    line-height: calc(15px + (100vw - 1100px) * 0.01);
    color:#666;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul > li .number {
    position:absolute;
    display: block;
    right: 0;
    top:0;
    font-size: calc(15px + (100vw - 1100px) * 0.01);
    line-height: calc(15px + (100vw - 1100px) * 0.01);
    color:#666;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul > li .bar {
    position: relative;
    display: block;
    width: 100%;
    height: 8px;
    background: #c4c4c4;
    border-radius: 4px;
    margin: 5px 0 0 0;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul > li .bar::before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0;
    left: 0;
    top:0;
    transition: width 4s ease 0s;
    -webkit-transition: width 4s ease 0s;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul.style1 > li:nth-child(1) .bar::before {
    background: #1d2f4f;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul.style1 > li:nth-child(2) .bar::before {
    background: #354c6d;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul.style1 > li:nth-child(3) .bar::before {
    background: #405d7f;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul.style2 > li:nth-child(1) .bar::before {
    background: #c40000;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul.style2 > li:nth-child(2) .bar::before {
    background: #ff0000;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul.style2 > li:nth-child(3) .bar::before {
    background: #ff4343;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul.style2 > li:nth-child(4) .bar::before {
    background: #ff5c5c;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul.style2 > li:nth-child(5) .bar::before {
    background: #ff8383;
}


.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style1 > li:nth-child(1) .name::before {
    content: "絕對報酬債";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style1 > li:nth-child(1) .number::before {
    content: "25%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd.current > ul.style1 > li:nth-child(1) .bar::before {
    width: 25%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style1 > li:nth-child(2) .name::before {
    content: "投資等級債";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style1 > li:nth-child(2) .number::before {
    content: "25%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd.current > ul.style1 > li:nth-child(2) .bar::before {
    width: 25%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style1 > li:nth-child(3) .name::before {
    content: "新興市場債劵";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style1 > li:nth-child(3) .number::before {
    content: "25%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd.current > ul.style1 > li:nth-child(3) .bar::before {
    width: 25%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style2 > li:nth-child(1) .name::before {
    content: "成熟市場股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style2 > li:nth-child(1) .number::before {
    content: "15%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd.current > ul.style2 > li:nth-child(1) .bar::before {
    width: 15%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style2 > li:nth-child(2) .name::before {
    content: "台灣股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style2 > li:nth-child(2) .number::before {
    content: "5%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd.current > ul.style2 > li:nth-child(2) .bar::before {
    width: 5%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style2 > li:nth-child(3) .name::before {
    content: "中國股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style2 > li:nth-child(3) .number::before {
    content: "5%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd.current > ul.style2 > li:nth-child(3) .bar::before {
    width: 5%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style2 > li:nth-child(4) {
    display: none;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p1 + dd > ul.style2 > li:nth-child(5) {
    display: none;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style1 > li:nth-child(1) .name::before {
    content: "絕對報酬債";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style1 > li:nth-child(1) .number::before {
    content: "25%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd.current > ul.style1 > li:nth-child(1) .bar::before {
    width: 25%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style1 > li:nth-child(2) .name::before {
    content: "投資等級債";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style1 > li:nth-child(2) .number::before {
    content: "20%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd.current > ul.style1 > li:nth-child(2) .bar::before {
    width: 20%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style1 > li:nth-child(3) .name::before {
    content: "高收益債";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style1 > li:nth-child(3) .number::before {
    content: "5%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd.current > ul.style1 > li:nth-child(3) .bar::before {
    width: 5%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style2 > li:nth-child(1) .name::before {
    content: "成熟市場股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style2 > li:nth-child(1) .number::before {
    content: "25%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd.current > ul.style2 > li:nth-child(1) .bar::before {
    width: 25%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style2 > li:nth-child(2) .name::before {
    content: "台灣股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style2 > li:nth-child(2) .number::before {
    content: "10%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd.current > ul.style2 > li:nth-child(2) .bar::before {
    width: 10%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style2 > li:nth-child(3) .name::before {
    content: "中國股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style2 > li:nth-child(3) .number::before {
    content: "15%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd.current > ul.style2 > li:nth-child(3) .bar::before {
    width: 15%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style2 > li:nth-child(4) {
    display: none;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p2 + dd > ul.style2 > li:nth-child(5) {
    display: none;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style1 > li:nth-child(1) .name::before {
    content: "絕對報酬債";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style1 > li:nth-child(1) .number::before {
    content: "25%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd.current > ul.style1 > li:nth-child(1) .bar::before {
    width: 25%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style1 > li:nth-child(2) .name::before {
    content: "高收益債";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style1 > li:nth-child(2) .number::before {
    content: "15%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd.current > ul.style1 > li:nth-child(2) .bar::before {
    width: 15%;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style1 > li:nth-child(3) {
    display: none;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style2 > li:nth-child(1) .name::before {
    content: "成熟市場股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style2 > li:nth-child(1) .number::before {
    content: "25%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd.current > ul.style2 > li:nth-child(1) .bar::before {
    width: 25%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style2 > li:nth-child(2) .name::before {
    content: "台灣股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style2 > li:nth-child(2) .number::before {
    content: "15%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd.current > ul.style2 > li:nth-child(2) .bar::before {
    width: 15%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style2 > li:nth-child(3) .name::before {
    content: "中國股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style2 > li:nth-child(3) .number::before {
    content: "20%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd.current > ul.style2 > li:nth-child(3) .bar::before {
    width: 20%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style2 > li:nth-child(4) {
    display: none;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p3 + dd > ul.style2 > li:nth-child(5) {
    display: none;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style1 > li:nth-child(1) .name::before {
    content: "絕對報酬債";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style1 > li:nth-child(1) .number::before {
    content: "15%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd.current > ul.style1 > li:nth-child(1) .bar::before {
    width: 15%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style1 > li:nth-child(2) .name::before {
    content: "高收益債";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style1 > li:nth-child(2) .number::before {
    content: "5%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd.current > ul.style1 > li:nth-child(2) .bar::before {
    width: 5%;
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style1 > li:nth-child(3) {
    display: none;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style2 > li:nth-child(1) .name::before {
    content: "成熟市場股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style2 > li:nth-child(1) .number::before {
    content: "25%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd.current > ul.style2 > li:nth-child(1) .bar::before {
    width: 25%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style2 > li:nth-child(2) .name::before {
    content: "台灣股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style2 > li:nth-child(2) .number::before {
    content: "20%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd.current > ul.style2 > li:nth-child(2) .bar::before {
    width: 20%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style2 > li:nth-child(3) .name::before {
    content: "中國股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style2 > li:nth-child(3) .number::before {
    content: "25%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd.current > ul.style2 > li:nth-child(3) .bar::before {
    width: 25%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style2 > li:nth-child(4) .name::before {
    content: "印度/東協股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style2 > li:nth-child(4) .number::before {
    content: "5%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd.current > ul.style2 > li:nth-child(4) .bar::before {
    width: 5%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style2 > li:nth-child(5) .name::before {
    content: "REITs";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd > ul.style2 > li:nth-child(5) .number::before {
    content: "5%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p4 + dd.current > ul.style2 > li:nth-child(5) .bar::before {
    width: 5%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style1 > li:nth-child(1) .name::before {
    content: "高收益債";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style1 > li:nth-child(1) .number::before {
    content: "5%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd.current > ul.style1 > li:nth-child(1) .bar::before {
    width: 5%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style1 > li:nth-child(2) {
    display: none;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style1 > li:nth-child(3) {
    display: none;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style2 > li:nth-child(1) .name::before {
    content: "成熟市場股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style2 > li:nth-child(1) .number::before {
    content: "25%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd.current > ul.style2 > li:nth-child(1) .bar::before {
    width: 25%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style2 > li:nth-child(2) .name::before {
    content: "台灣股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style2 > li:nth-child(2) .number::before {
    content: "25%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd.current > ul.style2 > li:nth-child(2) .bar::before {
    width: 25%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style2 > li:nth-child(3) .name::before {
    content: "中國股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style2 > li:nth-child(3) .number::before {
    content: "25%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd.current > ul.style2 > li:nth-child(3) .bar::before {
    width: 25%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style2 > li:nth-child(4) .name::before {
    content: "印度/東協股";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style2 > li:nth-child(4) .number::before {
    content: "15%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd.current > ul.style2 > li:nth-child(4) .bar::before {
    width: 15%;
}

.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style2 > li:nth-child(5) .name::before {
    content: "REITs";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd > ul.style2 > li:nth-child(5) .number::before {
    content: "5%";
}
.wrap .mainPage.report .contentBox .listBox > li > dl > dt.p5 + dd.current > ul.style2 > li:nth-child(5) .bar::before {
    width: 5%;
}

.wrap .mainPage.report .contentBox .actBox {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0;
    line-height: 0;
    padding: 3vw 0 6vw 0;
    border-top:1px solid #c40000;
}
.wrap .mainPage.report.contentBox .actBox span {
    position: relative;
    display: block;
    width: 100%;
    font-size: calc(18px + (100vw - 1100px) * 0.01);
    line-height: calc(18px + (100vw - 1100px) * 0.01);
    color:rgba(215,0,15,1);
}
.wrap .mainPage.report .contentBox .actBox ul {
    position: relative;
    display: block;
    width: 100%;
    padding: 3vw 0 0 0;
}
.wrap .mainPage.report .contentBox .actBox ul li {
    position: relative;
    display: inline-block;
    width: 16vw;
    font-size: calc(15px + (100vw - 1100px) * 0.01);
    line-height: calc(15px + (100vw - 1100px) * 0.01);
    padding: 1.5vw 0 1.5vw 0;
    margin: 0 1vw 0 1vw;
    color:#fff;
    transition: background 0.5s ease 0s;
    -webkit-transition: background 0.5s ease 0s;
    cursor: pointer;
}
.wrap .mainPage.report .contentBox .actBox ul li:nth-child(1) {
    background: #1d2f4f;
}
.wrap .mainPage.report .contentBox .actBox ul li:nth-child(1):hover {
    background: #1e457c;
}
.wrap .mainPage.report .contentBox .actBox ul li:nth-child(2) {
    background: #d7000f;
}
.wrap .mainPage.report .contentBox .actBox ul li:nth-child(2):hover {
    background: #ff0b23;
}
@media screen and (max-width: 1100px) {
    .wrap .mainPage.report .contentBox {
        padding: 0;
    }
    .wrap .mainPage.report .reportTitleBox {
        width: 100%;
        height: 45vw;
        background: url(../images/page9_bg.jpg) no-repeat center top;
        background-size: cover;
    }
    .wrap .mainPage.report .reportTitleBox h1 {
        top:auto;
        bottom: 55%;
        font-size: calc(25px + (100vw - 300px) * 0.03);
        line-height: calc(30px + (100vw - 300px) * 0.03);
        letter-spacing: calc(2px + (100vw - 300px) * 0.03);
    }
    .wrap .mainPage.report .reportTitleBox h2 {
        width: 90%;
        left: 5%;
        top:50%;
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(18px + (100vw - 300px) * 0.005);
    }
    .wrap .mainPage.report .contentBox .textBox li {
        margin: 0 0 3vw 0;
    }
    .wrap .mainPage.report .contentBox .textBox span {
        font-size: calc(12px + (100vw - 300px) * 0.01);
        line-height: calc(12px + (100vw - 300px) * 0.01);
    }
    .wrap .mainPage.report .contentBox .textBox span.style2 {
        font-size: calc(20px + (100vw - 300px) * 0.01);
        line-height: calc(20px + (100vw - 300px) * 0.01);
    }
    .wrap .mainPage.report .contentBox .listBox > li {
        position: relative;
        display: block;
        width: 100%;
        left: 0%;
        margin: 5vw 0 2vw 0;
        padding: 3vw 5vw 3vw 5vw;
        border-radius:2vw;
        box-shadow: 0.5vw 0.5vw 2vw rgba(0,0,0,0.1);
    }
    .wrap .mainPage.report .contentBox .listBox > li > dl > dt {
        display: block;
        width: 100%;
        height: 60vw;
    }
    .wrap .mainPage.report .contentBox .listBox > li > dl > dd {
        display: block;
        width: 100%;
    }
    .wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul > li {
        display: block;
        width: 100%;
        margin: 0 0 5vw 0;
    }
    .wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul > li .name {
        font-size: calc(15px + (100vw - 300px) * 0.01);
        line-height: calc(15px + (100vw - 300px) * 0.01);
    }
    .wrap .mainPage.report .contentBox .listBox > li > dl > dd > ul > li .number {
        font-size: calc(15px + (100vw - 300px) * 0.01);
        line-height: calc(15px + (100vw - 300px) * 0.01);
    }
    .wrap .mainPage.report .contentBox .actBox {

        padding: 5vw 0 15vw 0;
        border-top:1px solid #c40000;
    }
    .wrap .mainPage.report .contentBox .actBox span {
        font-size: calc(15px + (100vw - 300px) * 0.01);
        line-height: calc(28px + (100vw - 300px) * 0.01);
    }
    .wrap .mainPage.report .contentBox .actBox ul {
        padding: 5vw 0 0 0;
    }
    .wrap .mainPage.report .contentBox .actBox ul li {
        width: 35vw;
        font-size: calc(15px + (100vw - 300px) * 0.01);
        line-height: calc(15px + (100vw - 300px) * 0.01);
        padding: 3vw 0 3vw 0;
        margin: 0 1vw 0 1vw;
    }
}

/*Cyrus*/

.wrap .mainPage.page7 .contentBox .formBox li span select{
    font-family: "微軟正黑體", "Microsoft JhengHei", "Arial", "Helvetica", "sans-serif";
}