@charset "UTF-8";

body {
    background: #fff;
	font-size:12px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif,"微軟正黑體", "Microsoft JhengHei";
}
.introBox {
    position: fixed;
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background: #ccc;
    z-index: 9999;
    pointer-events: none;
    opacity: 1;
}
.introBox.loaded {
    -webkit-animation:intro 1s ease 3s 1 normal both;
    animation:intro 1s ease 3s 1 normal both;
}
@-webkit-keyframes intro {
  0% { opacity: 1;}  
  100% { opacity: 0;}
}
@keyframes intro {
  0% { opacity: 1;}  
  100% {opacity: 0;}
}
.introBox .introLogo {
    position: absolute;
    display: block;
    width: 40%;
    max-width: 400px;
    left: 50%;
    top:50%;
    opacity: 0;
    -webkit-transform: translate(-50%,-150%);
    transform: translate(-50%,-150%);
    -webkit-animation:introLogo 0.6s ease-out 0s 1 normal both;
    animation:introLogo 0.6s ease-out 0s 1 normal both;
}
@-webkit-keyframes introLogo {
  0% { -webkit-transform: translate(-50%,-150%);opacity: 0;}  
  80% { -webkit-transform: translate(-50%,-40%);opacity: 1;}
    100% { -webkit-transform: translate(-50%,-50%);opacity: 1;}
}
@keyframes introLogo {
  0% { transform: translate(-50%,-150%);opacity: 0;}  
  80% { transform: translate(-50%,-40%);opacity: 1;}
    100% { transform: translate(-50%,-50%);opacity: 1;}
}
.introBox .introLogo img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}


.nav {
    position: fixed;
    display: block;
    width: 100%;
    height: 75px;
    z-index: 999;
    background: rgba(0,0,0,0.7);
}
.nav .navBurger {
    position: absolute;
    display: none;
    width: 30px;
    height: 25px;
    cursor: pointer;
    right: 5%;
    top:10px;
}
.nav .navBurger span {
    position: absolute;
    display: block;
    width: 100%;
    height: 3px;
    background: #000;
    right: 0;
}
.nav .navBurger span:nth-child(1) {
    top:0;
}
.nav .navBurger span:nth-child(2) {
    top:45%;
}
.nav .navBurger span:nth-child(3) {
    bottom:0;
}
.nav .navLogo {
    position: absolute;
    display: block;
    width: 150px;
    height: 60px;
    left: 5%;
    top:8px;
    background: url(../images/logo.png) no-repeat center center;
    background-size: contain;
}
.nav .navLogo::after {
    content: "";
    display: block;
    position: absolute;
    width: 90%;
    height: 90%;
    top:5%;
    left: 5%;
    
}
.nav > ul.navList {
    position: absolute;
    display: inline-block;
    left: 50%;
    top:0;
    height: 100%;
    font-size: 0;
    line-height: 0;
    text-align: center;
    -webkit-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    white-space: nowrap;
    
}
.nav > ul.navLanguage {
    position: absolute;
    display: inline-block;
    right: 5%;
    top:0;
    height: 100%;
    text-align: center;
    white-space: nowrap;
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    
}

.nav > ul > li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    cursor: pointer;
    white-space: normal;
}

.nav > ul > li > span {
    position: relative;
    display: block;
    margin: 0 18px 0 18px;
    font-size: 15px;
    line-height: 75px;
    letter-spacing: 0px;
    color:#fff;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}
.nav > ul.navLanguage > li > span {
    position: relative;
    display: block;
    margin: 0 5px 0 5px;
    font-size: 13px;
    line-height: 75px;
    letter-spacing: 0px;
    color:#fff;
    -webkit-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.nav > ul.navLanguage > li:hover::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 22px;
    background: none;
    top:calc(50% - 12px);
    left: 0;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 5px;
}
.nav > ul > li.current::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 22px;
    background: none;
    top:calc(50% - 12px);
    left: 0;
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 5px;
}
.nav > ul.navLanguage > li.current span {
    color:#fff;
}
.nav > ul > li a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
}
.nav > ul > li:hover > span {
    color:#ccc;
}
.nav > ul > li > ul {
    opacity: 0;
    position: absolute;
    display: block;
    top:100%;
    width: 150px;
    left: 50%;
    background: #fafafa;
    pointer-events: none;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    
}
.nav > ul > li:hover > ul {
    opacity: 1;
    pointer-events:auto;
}
.nav > ul > li > ul:hover {
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    opacity: 1;
    pointer-events:auto;
}
.nav > ul > li > ul > li {
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 13px;
    line-height: 13px;
    text-align: center;
    padding: 15px 0 15px 0;
    border-bottom: 1px solid #f2f2f2;
}
.nav > ul > li > ul > li:hover {
    background: #555;
    color:#fff;
}

@media screen and (max-width: 1200px) {
    .nav {
        height: 50px;
        background: #fff;
        border-bottom: 1px solid #ccc;
        overflow: hidden;
    }
    .nav.expand {
        height: 100%;
        background: #222;
        border-bottom: 1px solid #ccc;
        overflow-y: scroll;
    }
    .nav.expand::before {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 50px;
        left: 0;
        top:0;
        background: #fff;
    }
    .nav .navLogo {
        top:5px;
        height: 40px;
        width: 100px;
        background: url(../images/logo2.png) no-repeat center center;
        background-size: contain;
        left: 10px;
    }
    .nav > ul.navList {
        position: relative;
        display: block;
        height: auto;
        width: 100%;
        top:auto;
        margin: 50px 0 0 0;
    }
    .nav > ul.navList > li {
        display: block;
        width: 100%;
        height: auto;
    }
    .nav > ul > li.current::before {
        content: "";
        display: none;
    }
    .nav > ul > li > span {
        position: relative;
        display: block;
        margin: 0;
        padding: 10px;
        font-size: 15px;
        line-height:15px;
        border-bottom: 1px solid #333;
    }
    .nav > ul > li > ul {
        opacity: 0;
        position: relative;
        display: block;
        top:auto;
        width: 100%;
        height: 0;
    }
    .nav > ul > li:hover > ul {
        opacity: 0;
        height: 0;
    }
    .nav > ul > li.current > ul {
        opacity: 1;
        height: auto;
    }
    
    .nav > ul.navLanguage {
        position: relative;
        display: block;
        right: 0;
        top:auto;
        margin: 20px 0 0 0;
        height: auto;
    }
    .nav > ul.navLanguage > li > span {
        font-size: 13px;
        line-height: 13px;
        border-bottom: 0px;
    }
    .nav .navBurger {
        display: block;
    }
}

.wrap {
    position: absolute;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.wrap .mainBanner {
    position: relative;
    display: block;
    width: 100%;
    height: 42vw;
    overflow: hidden;
    background: #000;
}
.wrap .mainBanner .bannerImg {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.wrap .mainBanner.inBanner .bannerImg:nth-child(1) {
    opacity: 1;
    -webkit-animation:none;
    animation:none;
}
.wrap .mainBanner .bannerImg:nth-child(1) {
    opacity: 1;
    -webkit-animation:bannerImgLoop 24s linear 0s infinite normal both;
    animation:bannerImgLoop 24s linear 0s infinite normal both;
}
.wrap .mainBanner .bannerImg:nth-child(2) {
    opacity: 0;
    -webkit-animation:bannerImgLoop 24s linear 8s infinite normal both;
    animation:bannerImgLoop 24s linear 8s infinite normal both;
}
.wrap .mainBanner .bannerImg:nth-child(3) {
    opacity: 0;
    -webkit-animation:bannerImgLoop 24s linear 16s infinite normal both;
    animation:bannerImgLoop 24s linear 16s infinite normal both;
}
@-webkit-keyframes bannerImgLoop {
    0% { opacity: 0;}
    3% { opacity: 1;}  
    33% { opacity: 1;}
    35% { opacity: 0;}
    100% { opacity: 0;}
}
@keyframes bannerImgLoop {
    0% { opacity: 0;}
    3% { opacity: 1;}  
    33% { opacity: 1;}
    35% { opacity: 0;}
    100% { opacity: 0;}
}
.wrap .mainBanner .bannerImg::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    background: rgba(0,0,0,0.2);
}
.wrap .mainBanner .bannerImg img {
    position: absolute;
    display: block;
    width: 100%;
    height: auto;
}
.wrap .mainBanner dl {
    position: absolute;
    display: block;
    width: 45%;
    left: 5%;
    top:50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
.wrap .mainBanner dl dt {
    position: relative;
    display: block;
    font-size: calc(100vw * 0.04);
    line-height: calc(100vw * 0.045);
    color:#fff;
    font-weight: 900;
    text-align: left;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
}
.wrap .mainBanner dl dt span {
    color:#08d;
}
.wrap .mainBanner dl dd {
    font-family: "微軟正黑體", "Microsoft JhengHei";
    position: relative;
    display: block;
    width: 80%;
    font-size: calc(100vw * 0.012);
    line-height: calc(100vw * 0.016);
    margin: 1.2vw 0 0 0;
    color:#fff;
    text-align: left;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
    font-weight: 100;
}
.wrap .mainBanner .videoBox {
    position: absolute;
    display: block;
    width: 37.5vw;
    height: 26vw;
    left: 53%;
    overflow: hidden;
    top:9vw;
}
.wrap .mainBanner .videoBox .videoBg {
    position: absolute;
    display: block;
    width: 100%;
}
.wrap .mainBanner .videoBox .videoBg img {
    position: relative;
    display: block;
    width: 100%;
}
.wrap .mainBanner .videoContainer {
    position: absolute;
    display: block;
    background: #000;
    top: 8.5%;
    left: 3.2%;
    bottom: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    width: 94%;
    height: 85%;
    overflow: hidden;
}
.wrap .mainBanner .videoContainer::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    background: rgba(0,0,0,0.5);
}
.wrap .mainBanner .videoContainer iframe {
    position: absolute;
    display: block;
    background: #000;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -99;
    pointer-events: none;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 1200px) {
    .wrap {
        padding: 50px 0 0 0;
    }
    .wrap .mainBanner {
        height: auto;
        min-height:inherit;
    }
    .wrap .mainBanner.inBanner {
        height: 42vw;
        min-height: 400px;
    }
    .wrap .mainBanner .bannerImg img {
        width: auto;
        height: 100%;
        left: 50%;
        -webkit-transform: translate(-50%,0);
        transform: translate(-50%,0);
    }
    .wrap .mainBanner dl {
        position: relative;
        display: block;
        width: 90%;
        left: 5%;
        top:auto;
        margin:  10vw 0 0 0;
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }
    .wrap .mainBanner dl dt {
        font-size: calc(100vw * 0.07);
        line-height: calc(100vw * 0.08);
        margin: 0 0 2vw 0;
    }
    .wrap .mainBanner dl dd {
        font-size: 13px;
        line-height: 18px;
    }
    .wrap .mainBanner .videoBox {
        position: relative;
        display: block;
        width: 90%;
        height: 60vw;
        left: 5%;
        overflow: hidden;
        top:auto;
        margin: 8vw 0 5vw 0;
    }
}

.indexBox1 {
    position: relative;
    display: block;
    width: 100%;
    background: #e4e4e4;
}
.indexBox1 dl {
    position: relative;
    padding: 30px 0 30px 0;
    width: 90%;
    max-width: 700px;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
.indexBox1 dl dd {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 24px;
    color:#222;
    letter-spacing: 1px;
}
.indexBox1 dl dd span {
    color:#d03b18;
}
.indexBox1 dl dt {
    position: relative;
    display: block;
    font-size: 24px;
    line-height: 36px;
    color:#222;
    letter-spacing: 1px;
    margin: 20px 0 0 0;
}
@media screen and (max-width: 700px) {
    .indexBox1 dl dd {
        font-size: 15px;
        line-height: 20px;
    }
    .indexBox1 dl dt {
        font-size: 20px;
        line-height: 24px;
    }
}

.indexBox2 {
    position: relative;
    display: block;
    width: 100%;
    background: #fafbfb;
}
.indexBox2 > .textBox {
    position: relative;
    display: block;
    width: 90%;
    max-width: 1000px;
    font-size: 17px;
    line-height: 26px;
    letter-spacing: 1px;
    color:#222;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    padding: 50px 0 50px 0;
}
.indexBox2 .techBox {
    position: relative;
    display: block;
    width: 90%;
    max-width: 1000px;
    font-size: 0;
    line-height: 0;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    padding: 0 0 20px 0;
}
.indexBox2 .techBox li {
    position: relative;
    display: inline-block;
    width: calc(100% / 3);
    margin: 0 0 50px 0;
    cursor: pointer;
}
.indexBox2 .techBox li .iconBox {
    position: relative;
    display: block;
    width: 90%;
    max-width: 130px;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
.indexBox2 .techBox li .iconBox .icon1 {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}
.indexBox2 .techBox li .iconBox .icon2 {
    position: absolute;
    display: block;
    width: 100%;
    height: auto;
    top:0;
    opacity: 0;
}
.indexBox2 .techBox li:hover .iconBox .icon1 {
    opacity: 0;
}
.indexBox2 .techBox li:hover .iconBox .icon2 {
    opacity: 1;
}
.indexBox2 .techBox li .techName {
    position: relative;
    display: block;
    text-align: center;
    font-size: 17px;
    line-height: 17px;
}
.indexBox2 .techBox li a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
}
@media screen and (max-width: 700px) {
    .indexBox2 .techBox li .techName {
        font-size: 13px;
        line-height: 13px;
    }
}

.indexBox3 {
    position: relative;
    display: block;
    width: 100%;
    background: #e4e4e4;
}
.indexBox3 > ul {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
}
.indexBox3 > ul > li {
    position: relative;
    display: inline-block;
    width: 50%;
    vertical-align: middle;
}
.indexBox3 > ul > li .imgBox {
    position: relative;
    display: block;
    width: 100%;
    height: 40vw;
    min-height: 400px;
    max-height: 600px;
    background: url(../images/index_img1.jpg) no-repeat center top;
    background-size: cover;
}
.indexBox3 > ul > li .textBox {
    position: relative;
    display: block;
    width: 90%;
    max-width: 700px;
    padding: 60px 0 30px 60px;
}
.indexBox3 > ul > li .textBox h1 {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 18px;
    margin: 0 0 20px 0;
}
.indexBox3 > ul > li .textBox h2 {
    position: relative;
    display: inline-block;
    font-size: 45px;
    line-height: 52px;
    margin: 0 20px 20px 0;
}.indexBox3 > ul > li .textBox h2:nth-child(5) {
    margin: 0 0 20px 0;
}
.indexBox3 > ul > li .textBox h2 span {
    display: block;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
}
.indexBox3 > ul > li .textBox h4 {
    position: relative;
    display: block;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 1px;
    margin: 0 0 20px;
}
.moreBtn {
    position: relative;
    display: inline-block;
    font-size: 15px;
    line-height: 15px;
    padding: 7px 10px 7px 10px;
    background: #000;
    color:#fff;
    border-radius: 10px;
    cursor: pointer;
}
.moreBtn:hover {
    background: #555;
}
.moreBtn a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
@media screen and (max-width: 1200px) {
    .indexBox3 > ul > li {
        display: block;
        width: 100%;
    }
    .indexBox3 > ul > li .textBox {
        left: 50%;
        -webkit-transform: translate(-50%,0);
        transform: translate(-50%,0);
        padding: 40px 0 40px 0;
    }
}

.indexBox4 {
    position: relative;
    display: block;
    width: 100%;
    background: #e4e4e4;
}
.indexBox4 .imgBox {
    position: relative;
    display: block;
    width: 100%;
    height: 40vw;
    min-height: 400px;
    background: url(../images/index_img2.jpg) no-repeat center top;
    background-size: cover;
}
.indexBox4 .textBox {
    position: absolute;
    display: block;
    width: 90%;
    max-width: 1000px;
    padding: 8vw 0 0 0;
    left: 50%;
    top:0;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
.indexBox4 .textBox h1 {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 18px;
    margin: 0 0 20px 0;
    color:#fff;
}
.indexBox4 .textBox h2 {
    position: relative;
    display: block;
    font-size: 45px;
    line-height: 50px;
    margin: 0 0 20px 0;
    color: #fff;
}
@media screen and (max-width: 1200px) {
    .indexBox4 .textBox h2 {
        font-size: 30px;
        line-height: 40px;
    }
}

.titleBox1 {
    position: relative;
    display: block;
    width: 100%;
    padding: 50px 0 50px 0;
}
.titleBox1 > .textBox {
    position: relative;
    display: block;
    width: 90%;
    max-width: 1200px;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    font-size: 0;
    line-height: 0;
}
.titleBox1 > .textBox h1 {
    position: relative;
    display: inline-block;
    font-size: 25px;
    line-height: 25px;
    font-weight: bolder;
    vertical-align: top;
    margin: 0 80px 0 0;
}
.titleBox1 > .textBox h1::after {
    content: "";
    position: absolute;
    display: block;
    height: 25px;
    width: 40px;
    background: url(../images/icon_arrow.svg) no-repeat center center;
    top:0;
    left: calc(100% + 10%);
}
.titleBox1 > .textBox h2 {
    font-size: 15px;
    line-height: 26px;
    margin: 0 0 20px 0;
    vertical-align: top;
}

.titleBox1 > .textBox h3 {
    position: relative;
    display: block;
    font-size: 17px;
    line-height: 24px;
    margin: 15px 0 0 0;
}
.titleBox1 > .textBox h3 a {
    position: relative;
    display: inline-block;
    padding: 10px;
    margin: 0 10px 0 10px;
    background: #00BBFF;
    color: #fff;
    border-radius: 5px;
}
.titleBox1 > .textBox h3 a:hover {
    opacity: 0.8;
}
.titleBox1 > .textBox h2 span {
    position: relative;
    display: block;
    color:#00a8ea;
    font-size: 15px;
    line-height: 17px;
    margin: 0 0 5px 0;
}
.titleBox1 > .textBox .textBox {
    position: relative;
    display: inline-block;
    width: calc(100% - 400px);
}
@media screen and (max-width: 600px) {
    .titleBox1 > .textBox .textBox {
        display: block;
        width: 100%;
        margin: 15px 0 0 0;
    }
}

.imgListBox {
    position: relative;
    display: block;
    width: 100%;
}
.imgListBox ul {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
}
.imgListBox ul li {
    position: relative;
    display: inline-block;
    width: calc(100% / 7);
    height: calc(100vw / 7);
    overflow: hidden;
    cursor: pointer;
    background: #236480;
}
.imgListBox ul li span {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.2;
}
.imgListBox ul li img {
    position: absolute;
    display: block;
    height: 100%;
}
.imgListBox ul li:nth-child(11n-10) {
    background: #236480;
}
.imgListBox ul li:nth-child(11n-8) {
    background: #6dbbae;
}
.imgListBox ul li:nth-child(11n-6) {
    background: #f3c043;
}
.imgListBox ul li:nth-child(11n-4) {
    background: #e96163;
}
.imgListBox ul li:nth-child(11n-2) {
    background: #39b3e4;
}
.imgListBox ul li:nth-child(11n) {
    background: #e59863;
}
.imgListBox ul li:nth-child(11n+2) {
    background: #236480;
}
.imgListBox ul li:nth-child(11n+4) {
    background: #6dbbae;
}
.imgListBox ul li:nth-child(11n+6) {
    background: #f3c043;
}
.imgListBox ul li:nth-child(11n+8) {
    background: #e96163;
}
.imgListBox ul li:nth-child(11n+10) {
    background: #39b3e4;
}
.imgListBox ul li:nth-child(11n+12) {
    background: #e59863;
}
.imgListBox ul li:nth-child(15),
.imgListBox ul li:nth-child(16),
.imgListBox ul li:nth-child(17),
.imgListBox ul li:nth-child(18),
.imgListBox ul li:nth-child(19),
.imgListBox ul li:nth-child(20),
.imgListBox ul li:nth-child(21) {
    display: none;
}

.imgListBox ul.productList li:nth-child(11n-10) span {
    background: url(../images/product_symbols/p1.jpg);
    background-size: cover;
}
.imgListBox ul.productList li:nth-child(11n-8) span {
    background: url(../images/product_symbols/p2.jpg);
    background-size: cover;
}
.imgListBox ul.productList li:nth-child(11n-6) span {
    background: url(../images/product_symbols/p3.jpg);
    background-size: cover;
}
.imgListBox ul.productList li:nth-child(11n-4) span {
    background: url(../images/product_symbols/p4.jpg);
    background-size: cover;
}
.imgListBox ul.productList li:nth-child(11n-2) span {
    background: url(../images/product_symbols/p5.jpg);
    background-size: cover;
}
.imgListBox ul.productList li:nth-child(11n) span {
    background: url(../images/product_symbols/p6.jpg);
    background-size: cover;
}
.imgListBox ul.productList li:nth-child(11n+2) span {
    background: url(../images/product_symbols/p7.jpg);
    background-size: cover;
}
.imgListBox ul.productList li:nth-child(11n+4) span {
    background: url(../images/product_symbols/p8.jpg);
    background-size: cover;
}
.imgListBox ul.productList li:nth-child(11n+6) span {
    background: url(../images/product_symbols/p9.jpg);
    background-size: cover;
}
.imgListBox ul.productList li:nth-child(11n+8) span {
    background: url(../images/product_symbols/p10.jpg);
    background-size: cover;
}


.imgListBox ul.capabilityList1 li:nth-child(11n-10) span {
    background: url(../images/tech_symbols1/p1.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1 li:nth-child(11n-8) span {
    background: url(../images/tech_symbols1/p2.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1 li:nth-child(11n-6) span {
    background: url(../images/tech_symbols1/p3.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1 li:nth-child(11n-4) span {
    background: url(../images/tech_symbols1/p4.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1 li:nth-child(11n-2) span {
    background: url(../images/tech_symbols1/p5.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1 li:nth-child(11n) span {
    background: url(../images/tech_symbols1/p6.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1 li:nth-child(11n+2) span {
    background: url(../images/tech_symbols1/p7.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1 li:nth-child(11n+4) span {
    background: url(../images/tech_symbols1/p8.jpg);
    background-size: cover;
}

.imgListBox ul.capabilityList1.tech9 li:nth-child(11n-10) span {
    background: url(../images/tech_symbols9/p1.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1.tech9 li:nth-child(11n-8) span {
    background: url(../images/tech_symbols9/p2.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1.tech9 li:nth-child(11n-6) span {
    background: url(../images/tech_symbols9/p3.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1.tech9 li:nth-child(11n-4) span {
    background: url(../images/tech_symbols9/p4.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1.tech9 li:nth-child(11n-2) span {
    background: url(../images/tech_symbols9/p5.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1.tech9 li:nth-child(11n) span {
    background: url(../images/tech_symbols9/p6.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1.tech9 li:nth-child(11n+2) span {
    background: url(../images/tech_symbols9/p7.jpg);
    background-size: cover;
}
.imgListBox ul.capabilityList1.tech9 li:nth-child(11n+4) span {
    background: url(../images/tech_symbols9/p8.jpg);
    background-size: cover;
}

.imgListBox ul li:nth-child(even) {
    background: #fff;
}
.imgListBox ul li:nth-child(even)::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background: #d3c6c2;
    opacity: 0.3;
}
.imgListBox ul li:hover::after {
    opacity: 0;
}
.imgListBox ul li:hover span {
    opacity: 0.8;
}
.imgListBox ul li .textBox {
    position: absolute;
    display: inline-block;
    top:50%;
    width: 80%;
    left: 10%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    word-wrap: break-word;
}
.imgListBox ul li .textBox h1 {
    font-size: calc(100vw * 0.015);
    line-height: calc(100vw * 0.022);
    font-weight: bold;
}
.imgListBox ul li .textBox h2 {
    font-size: calc(100vw * 0.01);
    line-height: calc(100vw * 0.015);
    font-weight: bold;
}
@media screen and (max-width: 1200px) {
    .imgListBox ul li {
        width: calc(100% / 5);
        height: calc(100vw / 5);
    }
    .imgListBox ul li .textBox h1 {
        font-size: calc(100vw * 0.020);
        line-height: calc(100vw * 0.030);
        font-weight: bold;
    }
    .imgListBox ul li .textBox h2 {
        font-size: 13px;
        line-height: 18px;
        font-weight: bold;
    }
    .imgListBox ul li:nth-child(15) {
        display: inline-block;
    }
}
@media screen and (max-width: 700px) {
    .imgListBox ul li {
        width: calc(100% / 3);
        height: calc(100vw / 3);
    }
    .imgListBox ul li .textBox h1 {
        font-size: calc(100vw * 0.035);
        line-height: calc(100vw * 0.05);
        font-weight: bold;
    }
     .imgListBox ul li .textBox h2 {
        font-size: 12px;
        line-height: 16px;
        font-weight: bold;
    }
    .imgListBox ul.productList li:nth-child(odd) {
        display: none;
    }
    .imgListBox ul.capabilityList1 li:nth-child(odd) {
        display: inline-block;
    }
    .imgListBox ul li:nth-child(16) {
        display: inline-block;
    }
    .imgListBox ul li:nth-child(18) {
        display: inline-block;
    }
    .imgListBox ul.capabilityList1 li:nth-child(16),
    .imgListBox ul.capabilityList1 li:nth-child(17),
    .imgListBox ul.capabilityList1 li:nth-child(18),
    .imgListBox ul.capabilityList1 li:nth-child(19),
    .imgListBox ul.capabilityList1 li:nth-child(20),
    .imgListBox ul.capabilityList1 li:nth-child(21) {
        display: none;
    }
}

.imgListBox ul.careerList li:nth-child(11n-10) {
    background: #236480;
}
.imgListBox ul.careerList li:nth-child(11n-8) {
    background: #6dbbae;
}
.imgListBox ul.careerList li:nth-child(11n-6) {
    background: #f3c043;
}
.imgListBox ul.careerList li:nth-child(11n-4) {
    background: #e96163;
}
.imgListBox ul.careerList li:nth-child(11n-2) {
    background: #39b3e4;
}
.imgListBox ul.careerList li:nth-child(11n) {
    background: #e59863;
}
.imgListBox ul.careerList li:nth-child(11n+2) {
    background: #236480;
}
.imgListBox ul.careerList li:nth-child(11n+4) {
    background: #6dbbae;
}
.imgListBox ul.careerList li:nth-child(11n+6) {
    background: #f3c043;
}
.imgListBox ul.careerList li:nth-child(11n+8) {
    background: #e96163;
}
.imgListBox ul.careerList li:nth-child(11n+10) {
    background: #39b3e4;
}
.imgListBox ul.careerList li:nth-child(11n+12) {
    background: #e59863;
}
.imgListBox ul.careerList li img {
    opacity: 0.6;
}
.imgListBox ul.careerList li:hover img {
    opacity: 1;
}
.imgListBox ul.careerList li:nth-child(even)::after {
    display: none;
}
.imgListBox ul.careerList li .textBox {
    color: #fff;
}

.container {
    position: relative;
    display: block;
    width: 100%;
}
.container .contentBox {
    position: relative;
    display: block;
    width: 90%;
    max-width: 1200px;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
    padding: 40px 0 40px 0;
}
.container .contentBox .featureBox {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0 30px 0;
}
.container .contentBox .featureBox ul {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    text-align: center;
}
.container .contentBox .featureBox ul li {
    position: relative;
    display: inline-block;
    width: calc(84% / 4);
    margin: 0 2% 0 2%;   
}
@media screen and (max-width: 800px) {
    .container .contentBox .featureBox ul li {
        position: relative;
        display: inline-block;
        width: calc(90% / 2);
        margin: 0 2% 0 2%;   
    }
}
.container .contentBox .featureBox ul li:nth-child(1) {
    -webkit-animation:featureSymbolLoop 2s ease 0s infinite normal both;
    animation:featureSymbolLoop 2s ease 0s infinite normal both;
}
.container .contentBox .featureBox ul li:nth-child(2) {
    -webkit-animation:featureSymbolLoop 2s ease 0.5s infinite normal both;
    animation:featureSymbolLoop 2s ease 0.5s infinite normal both;
}
.container .contentBox .featureBox ul li:nth-child(3) {
    -webkit-animation:featureSymbolLoop 2s ease 1s infinite normal both;
    animation:featureSymbolLoop 2s ease 1s infinite normal both;
}
.container .contentBox .featureBox ul li:nth-child(4) {
    -webkit-animation:featureSymbolLoop 2s ease 1.5s infinite normal both;
    animation:featureSymbolLoop 2s ease 1.5s infinite normal both;
}
@-webkit-keyframes featureSymbolLoop {
    0% { -webkit-transform: scale(1);opacity: 1;}
    15% { -webkit-transform: scale(1.2);opacity: 0.8;}
    25% { -webkit-transform: scale(1);opacity: 1;}
    100% { -webkit-transform: scale(1);opacity: 1;}
}
@keyframes featureSymbolLoop {
    0% { transform: scale(1);opacity: 1;}
    15% { transform: scale(1.2);opacity: 0.8;}
    25% { transform: scale(1);opacity: 1;}
    100% { transform: scale(1);opacity: 1;}
}
.container .contentBox .featureBox2 {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0 30px 0;
}
.container .contentBox .featureBox2 ul {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    text-align: center;
}
.container .contentBox .featureBox2 ul li {
    position: relative;
    display: inline-block;
    width: calc(100% / 4 - 10px);
    height: 200px;
    margin: 5px;
    border-radius: 20px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
.container .contentBox .featureBox2 ul li:hover {
    opacity: 0.8;
}
.container .contentBox .featureBox2 ul li:nth-child(1) {
    background: #236480;
}
.container .contentBox .featureBox2 ul li:nth-child(2) {
    background: #6dbbae;
}
.container .contentBox .featureBox2 ul li:nth-child(3) {
    background: #f3c043;
}
.container .contentBox .featureBox2 ul li:nth-child(4) {
    background: #e96163;
}
.container .contentBox .featureBox2 ul li:nth-child(5) {
    background: #39b3e4;
}
.container .contentBox .featureBox2 ul li:nth-child(6) {
    background: #e59863;
}
.container .contentBox .featureBox2 ul li:nth-child(7) {
    background: #8969c9;
}
.container .contentBox .featureBox2 ul li:nth-child(8) {
    background: #c6c969;
}

.container .contentBox .featureBox2 ul li span {
    position: absolute;
    display: inline-block;
    width: 90%;
    top: 50%;
    left: 5%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
    text-align: center;
    font-size: calc(100vw * 0.023);
    line-height: calc(100vw * 0.03);
    font-weight: bold;
    color:#fff;
    text-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}
@media screen and (max-width: 800px) {
    .container .contentBox .featureBox2 ul li {
        position: relative;
        display: inline-block;
        width: calc(100% / 2 - 10px);
        height: 140px;
        margin: 5px;   
    }
    .container .contentBox .featureBox2 ul li span {
        font-size: calc(100vw * 0.04);
        line-height: calc(100vw * 0.045);
    }
}

.container .contentBox .featureBox3 {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0 30px 0;
}
.container .contentBox .featureBox3 ul {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    text-align: center;
}
.container .contentBox .featureBox3 ul li {
    position: relative;
    display: inline-block;
    width: calc(80% / 5);
    margin: 0 2% 0 2%;
    vertical-align: top;
    border-radius: 20px;
}
.container .contentBox .featureBox3 ul li dl {
    position: relative;
    display: block;
    width: 100%;
}
.container .contentBox .featureBox3 ul li dl img {
    position: relative;
    display: block;
    width: 70%;
    left: 15%;
}
.container .contentBox .featureBox3 ul li:nth-child(1) dl img {
    -webkit-animation:featureSymbolLoop 2.5s ease 0s infinite normal both;
    animation:featureSymbolLoop 2.5s ease 0s infinite normal both;
}
.container .contentBox .featureBox3 ul li:nth-child(2) dl img {
    -webkit-animation:featureSymbolLoop 2.5s ease 0.5s infinite normal both;
    animation:featureSymbolLoop 2.5s ease 0.5s infinite normal both;
}
.container .contentBox .featureBox3 ul li:nth-child(3) dl img {
    -webkit-animation:featureSymbolLoop 2.5s ease 1s infinite normal both;
    animation:featureSymbolLoop 2.5s ease 1s infinite normal both;
}
.container .contentBox .featureBox3 ul li:nth-child(4) dl img {
    -webkit-animation:featureSymbolLoop 2.5s ease 1.5s infinite normal both;
    animation:featureSymbolLoop 2.5s ease 1.5s infinite normal both;
}
.container .contentBox .featureBox3 ul li:nth-child(5) dl img {
    -webkit-animation:featureSymbolLoop 2.5s ease 2s infinite normal both;
    animation:featureSymbolLoop 2.5s ease 2s infinite normal both;
}
.container .contentBox .featureBox3 ul li dl dt {
    position: relative;
    width: 100%;
    display: block;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
.container .contentBox .featureBox3 ul li:nth-child(1) {
    background: #176397;
}
.container .contentBox .featureBox3 ul li:nth-child(2) {
    background: #0baee5;
}
.container .contentBox .featureBox3 ul li:nth-child(3) {
    background: #4dd4d8;
}
.container .contentBox .featureBox3 ul li:nth-child(4) {
    background: #063869;
}
.container .contentBox .featureBox3 ul li:nth-child(5) {
    background: #0b7ae3;
}
.container .contentBox .featureBox3 ul li dl dt span {
    position: relative;
    display: block;
    text-align: center;
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    color:#fff;
    margin: 10px 0 10px 0;
}
.container .contentBox .featureBox3 ul li dl dd {
    position: relative;
    display: block;
    padding: 20px;
    font-size: 15px;
    line-height: 24px;
    text-align: left;
    color: #fff;
    background: rgba(255,255,255,0.2);
}
.container .contentBox .featureBox3 ul li dl dd span {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    margin: 0 0 5px 0;
}

@media screen and (max-width: 1200px) {
    .container .contentBox .featureBox3 ul li {
        width: calc(80% / 3);
        margin: 0 2% 2vw 2%;
    }
}
@media screen and (max-width: 900px) {
    .container .contentBox .featureBox3 ul li {
        width: calc(80% / 2);
        margin: 0 2% 2vw 2%;
    }
}
@media screen and (max-width: 600px) {
    .container .contentBox .featureBox3 ul li {
        width: 100%;
        margin: 0 0 2vw 0;
    }
    .container .contentBox .featureBox3 ul li dl img {
        position: relative;
        display: block;
        width: 20%;
        left: 40%;
    }
}

.container .contentBox .featureBox4 {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0 30px 0;
}
.container .contentBox .featureBox4 ul {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    text-align: center;
}
.container .contentBox .featureBox4 ul li {
    position: relative;
    display: inline-block;
    width: calc(80% / 4);
    margin: 0 2% 0 2%;
    vertical-align: top;
}
.container .contentBox .featureBox4 ul li dl {
    position: relative;
    display: block;
    width: 100%;
}
.container .contentBox .featureBox4 ul li dl dt {
    position: relative;
    width: 100%;
    display: block;
    padding: 10px;
    font-size: calc(100vw * 0.05);
    line-height: calc(100vw * 0.05);
}
.container .contentBox .featureBox4 ul li:nth-child(1) dl dt {
    color:#236480;
}
.container .contentBox .featureBox4 ul li:nth-child(2) dl dt {
    color:#6dbbae;
}
.container .contentBox .featureBox4 ul li:nth-child(3) dl dt {
    color:#f3c043;
}
.container .contentBox .featureBox4 ul li:nth-child(4) dl dt {
    color:#e96163;
}
.container .contentBox .featureBox4 ul li dl dd {
    position: relative;
    display: block;
    padding: 10px;
    font-size: 15px;
    line-height: 24px;
    text-align: left;
    color: #777;
}
@media screen and (max-width: 900px) {
    .container .contentBox .featureBox4 ul li {
        width: calc(80% / 2);
        margin: 0 2% 2vw 2%;
    }
}
@media screen and (max-width: 600px) {
    .container .contentBox .featureBox4 ul li {
        width: 100%;
        margin: 0 0 2vw 0;
    }
}


.container .contentBox .featureBox5 {
    position: relative;
    display: block;
    width: 100%;
    padding: 30px 0 30px 0;
}
.container .contentBox .featureBox5 ul {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    text-align: center;
}
.container .contentBox .featureBox5 ul li {
    position: relative;
    display: inline-block;
    width: calc(100% / 7 - 20px);
    margin: 10px;
    vertical-align: top;
    border-radius: 20px;
}
.container .contentBox .featureBox5 ul li dl {
    position: relative;
    display: block;
    width: 100%;
}
.container .contentBox .featureBox5 ul li dl img {
    position: relative;
    display: block;
    width: 70%;
    left: 15%;
}
.container .contentBox .featureBox5 ul li:nth-child(1) dl img {
    -webkit-animation:featureSymbolLoop 3.5s ease 0s infinite normal both;
    animation:featureSymbolLoop 3.5s ease 0s infinite normal both;
}
.container .contentBox .featureBox5 ul li:nth-child(2) dl img {
    -webkit-animation:featureSymbolLoop 3.5s ease 0.5s infinite normal both;
    animation:featureSymbolLoop 3.5s ease 0.5s infinite normal both;
}
.container .contentBox .featureBox5 ul li:nth-child(3) dl img {
    -webkit-animation:featureSymbolLoop 3.5s ease 1s infinite normal both;
    animation:featureSymbolLoop 3.5s ease 1s infinite normal both;
}
.container .contentBox .featureBox5 ul li:nth-child(4) dl img {
    -webkit-animation:featureSymbolLoop 3.5s ease 1.5s infinite normal both;
    animation:featureSymbolLoop 3.5s ease 1.5s infinite normal both;
}
.container .contentBox .featureBox5 ul li:nth-child(5) dl img {
    -webkit-animation:featureSymbolLoop 3.5s ease 2s infinite normal both;
    animation:featureSymbolLoop 3.5s ease 2s infinite normal both;
}
.container .contentBox .featureBox5 ul li:nth-child(6) dl img {
    -webkit-animation:featureSymbolLoop 3.5s ease 2.5s infinite normal both;
    animation:featureSymbolLoop 3.5s ease 2.5s infinite normal both;
}
.container .contentBox .featureBox5 ul li:nth-child(7) dl img {
    -webkit-animation:featureSymbolLoop 3.5s ease 3s infinite normal both;
    animation:featureSymbolLoop 3.5s ease 3s infinite normal both;
}
.container .contentBox .featureBox5 ul li dl dt {
    position: relative;
    width: 100%;
    display: block;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
.container .contentBox .featureBox5 ul li:nth-child(1) {
    background: #176397;
}
.container .contentBox .featureBox5 ul li:nth-child(2) {
    background: #0baee5;
}
.container .contentBox .featureBox5 ul li:nth-child(3) {
    background: #4dd4d8;
}
.container .contentBox .featureBox5 ul li:nth-child(4) {
    background: #063869;
}
.container .contentBox .featureBox5 ul li:nth-child(5) {
    background: #0b7ae3;
}
.container .contentBox .featureBox5 ul li:nth-child(6) {
    background: #176397;
}
.container .contentBox .featureBox5 ul li:nth-child(7) {
    background: #0baee5;
}
.container .contentBox .featureBox5 ul li dl dd {
    position: relative;
    display: block;
    padding: 20px;
    font-size: 15px;
    line-height: 24px;
    text-align: left;
    color: #fff;
    background: rgba(255,255,255,0.2);
}
.container .contentBox .featureBox5 ul li dl dd span {
    position: relative;
    display: block;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    margin: 0 0 5px 0;
    color:#ffc;
}

@media screen and (max-width: 1200px) {
    .container .contentBox .featureBox5 ul li {
        width: calc(100% / 4 - 20px);
        margin: 10px;
    }
}
@media screen and (max-width: 900px) {
    .container .contentBox .featureBox5 ul li {
        width: calc(100% / 3 - 20px);
        margin: 10px;
    }
}
@media screen and (max-width: 600px) {
    .container .contentBox .featureBox5 ul li {
        width: calc(100% / 2 - 20px);
        margin: 10px;
    }
}


.container .contentBox .featureBox6 {
    position: relative;
    display: block;
    width: 100%;
    padding: 30px 0 30px 0;
}
.container .contentBox .featureBox6 ul {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    text-align: center;
}
.container .contentBox .featureBox6 ul li {
    position: relative;
    display: inline-block;
    width: calc(100% / 5 - 20px);
    margin: 10px;
    vertical-align: top;
    border-radius: 5px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
    padding: 0 0 10px 0;
}
.container .contentBox .featureBox6 ul li h1 {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 18px;
    color: #fff;
    padding: 10px;
}
.container .contentBox .featureBox6 ul li h2 {
    position: relative;
    display: block;
    font-size: 15px;
    line-height: 25px;
    padding: 10px;
    color:#fff;
    background:rgba(255,255,255,0.2);
}
.container .contentBox .featureBox6 ul li h3 {
    position: relative;
    display: block;
    font-size: 15px;
    line-height: 24px;
    padding: 10px;
    color:#fff;
    text-align: left;
}
.container .contentBox .featureBox6 ul li span {
    position: relative;
    display: block;
    font-size: 15px;
    line-height: 15px;
    padding: 10px;
    color:#fff;
}
.container .contentBox .featureBox6 ul li span.mail::before {
    content: "";
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 5px 0 0;
    background: url(../images/mail_icon.svg) no-repeat center center;
    background-size: contain;
    vertical-align: middle;
}
.container .contentBox .featureBox6 ul li span.phone::before {
    content: "";
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 5px 0 0;
    background: url(../images/phone_icon.svg) no-repeat center center;
    background-size: contain;
    vertical-align: middle;
}
.container .contentBox .featureBox6 ul li a {
    color: #fff;
}
.container .contentBox .featureBox6 ul li:nth-child(1) {
    background: #176397;
}
.container .contentBox .featureBox6 ul li:nth-child(2) {
    background: #0baee5;
}
.container .contentBox .featureBox6 ul li:nth-child(3) {
    background: #4dd4d8;
}
.container .contentBox .featureBox6 ul li:nth-child(4) {
    background: #063869;
}
.container .contentBox .featureBox6 ul li:nth-child(5) {
    background: #0b7ae3;
}

@media screen and (max-width: 1200px) {
    .container .contentBox .featureBox6 ul li {
        width: calc(100% / 3 - 20px);
        margin: 10px;
    }
}
@media screen and (max-width: 900px) {
    .container .contentBox .featureBox6 ul li {
        width: calc(100% / 2 - 20px);
        margin: 10px;
    }
}
@media screen and (max-width: 600px) {
    .container .contentBox .featureBox6 ul li {
        width: calc(100% / 1 - 20px);
        margin: 10px;
    }
}

.container .contentBox .featureBox7 {
    position: relative;
    display: block;
    width: 100%;
    padding: 50px 0 30px 0;
}
.container .contentBox .featureBox7 ul {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    text-align: center;
}
.container .contentBox .featureBox7 ul li {
    position: relative;
    display: inline-block;
    width: calc(80% / 5);
    margin: 0 2% 0 2%;
    vertical-align: top;
    border-radius: 20px;
    cursor: pointer;
}
.container .contentBox .featureBox7 ul li img {
    position: relative;
    display: block;
    width: 100%;
}

@media screen and (max-width: 1200px) {
    .container .contentBox .featureBox7 ul li {
        width: calc(80% / 3);
        margin: 0 2% 2vw 2%;
    }
}
@media screen and (max-width: 900px) {
    .container .contentBox .featureBox7 ul li {
        width: calc(80% / 2);
        margin: 0 2% 2vw 2%;
    }
}

.container .contentBox .tabList1 {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    text-align: center;
}

.container .contentBox .tabList1 li {
    position: relative;
    display: inline-block;
    padding: 0 2vw 0 2vw;
    font-size: calc(100vw * 0.07);
    line-height: calc(100vw * 0.07);
    font-weight: bold;
}
.container .contentBox .tabList1 li a {
    color:#888;
}
.container .contentBox .tabList1 li a:hover {
    color:#0baee5;
}
.container .contentBox .tabList1 li.current a {
    color:#176397;
}
.container .contentBox .tabList1 li.current::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 5px;
    left: 0;
    top:100%;
    background: #176397;
}

.container .contentBox .tabList2 {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    text-align: center;
}
.container .contentBox .tabList2 li {
    position: relative;
    display: inline-block;
    padding: 20px;
    font-size: 18px;
    line-height: 18px;
    font-weight: bold;
    color:#777;
    cursor: pointer;
    background: #eee;
    margin:10px;
    border-radius: 10px;
}
.container .contentBox .tabList2 li:hover {
    background: #00BBFF;
    color:#fff;
}
.container .contentBox .tabList2 li.current {
    background: #2d6ba7;
    color:#fff;
}
.container .contentBox > h1 {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 18px;
    padding: 0 0 0 25px;
    font-weight: bolder;
    color: #00a7e9;
}
.container .contentBox > h1::before {
    content: "";
    position: absolute;
    display: block;
    width: 18px;
    height: 18px;
    background: #00a7e9;
    left: 0;
    top: -1px;
    border-radius: 50%;
}
.container .contentBox > h2 {
    position: relative;
    display: block;
    width: 100%;
    font-size: 17px;
    line-height: 28px;
    padding: 20px 0 20px 0;
    font-weight: bold;
    color:#2d6ba7;
}
.container .contentBox > h3 {
    position: relative;
    display: block;
    width: 100%;
    font-size: 17px;
    line-height: 28px;
    padding: 20px 0 20px 0;
}
.container .contentBox > h3 .linkText {
    font-weight: bold;
}
.container .contentBox > h3 .linkText a {
    color:#39b3e4;
}
.container .contentBox .imgContainer {
    position: relative;
    display: block;
    width: 100%;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
.container .contentBox .imgContainer img {
    position: relative;
    display: block;
    width: 100%;
}
.container .contentBox .eventsList {
    position: relative;
    display: block;
    width: 100%;
    max-width: 550px;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);  
    margin: 30px 0 0 0;
}
.container .contentBox .eventsList dl {
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    margin: 0 0 40px 0;
}
.container .contentBox .eventsList dl dt {
    position: relative;
    display: inline-block;
    width: 50px;
    text-align: center;
    font-size: 16px;
    line-height: 16px;
    color:#fff;
    background: #4c5c7d;
    padding: 5px;
    border-radius: 7px;
    vertical-align: top;
    margin: 0 10px 0 0;
}
.container .contentBox .eventsList dl dd {
    position: relative;
    display: inline-block;
    width: calc(100% - 60px);
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 1px;
    color:#000;
    vertical-align: top;
}
.container .contentBox .tableStyle1 {
    display: none;
    border:1px solid #ddd;
    font-size: 17px;
    line-height: 24px;
    margin: 30px 0 0 0;
    width: 100%;
}
.container .contentBox .tableStyle1.expand {
    display:table;
}
.container .contentBox .tableStyle1 tr td {
    padding: 20px;
    border:1px solid #ddd;
}

.container .contentBox .tableStyle1 tr th {
    padding: 20px;
    border:1px solid #ddd;
    background: #4c5c7d;
    color:#fff;
}
.container .contentBox .tableStyle1 a {
    color:#00BBFF;
}
.container .contentBox .tableStyle2 {
    display:none;
    border:1px solid #ddd;
    font-size: 17px;
    line-height: 24px;
    margin: 30px 0 0 0;
    width: 100%;
}
.container .contentBox .tableStyle2.expand {
    display:table;
}
.container .contentBox .tableStyle2 tr td {
    padding: 20px;
    border:1px solid #ddd;
    text-align: center;
}

.container .contentBox .tableStyle2 tr th {
    padding: 20px;
    border:1px solid #ddd;
    text-align: center;
    background: #4c5c7d;
    color:#fff;
}


.container .contentBox .listStyle1 {
    margin: 30px 0 0 0;
    list-style-type: upper-roman; 
    list-style-type: cjk-ideographic;
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 1px;
    padding: 0 0 0 40px;
}
.container .contentBox .listStyle1 > li {
    padding: 0 0 30px 0;
}
.container .contentBox .listStyle1 > li > ul {
    list-style-type:upper-alpha;
    padding: 20px 0 0 20px;
}
.container .contentBox .listStyle1 > li > ul > li > ul {
    list-style-type:lower-alpha;
    padding: 20px 0 30px 20px;
}

.container .contentBox .careerReport {
    position: relative;
    width: 100%;
    text-align: center;
}
.container .contentBox .careerReport dl {
    position: relative;
    display: inline-block;
    background: #00a7e9;
    padding: 30px;
    min-width: 300px;
    color: #fff;
    border-radius: 10px;
    box-shadow: 5px 10px 10px rgba(0,0,0,0.2);
}
.container .contentBox .careerReport dl:hover {
    opacity: 0.8;
}
.container .contentBox .careerReport dl dt {
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    padding: 0 0 20px 0;
}
.container .contentBox .careerReport a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    color:#fff;
}

.container .contentBox #infoSecurity {
    list-style-type: none;
    position: relative;
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
}
.container .contentBox #infoSecurity li {
    position: relative;
    display: inline-block;
    width: calc(100% / 4 - 50px);
    margin: 10px;
    vertical-align: top;
    border-radius: 10px;
    padding: 10px;
}
.container .contentBox #infoSecurity li:nth-child(1) {
    background: #176397;
}
.container .contentBox #infoSecurity li:nth-child(2) {
    background: #0baee5;
}
.container .contentBox #infoSecurity li:nth-child(3) {
    background: #4dd4d8;
}
.container .contentBox #infoSecurity li:nth-child(4) {
    background: #0b7ae3;
}
.container .contentBox #infoSecurity li h1 {
    position: relative;
    display: block;
    text-align: center;
    font-size: 15px;
    line-height: 15px;
    padding: 10px;
    color:#fff;
}
.container .contentBox #infoSecurity li h2 {
    position: relative;
    display: block;
    text-align: center;
    font-size: 18px;
    line-height: 18px;
    padding: 10px;
    color:#fff;
}
@media screen and (max-width: 1250px) {
    .container .contentBox #infoSecurity li {
        width: calc(100% / 2 - 50px);
    }
}
@media screen and (max-width: 700px) {
    .container .contentBox #infoSecurity li {
        width: calc(100% - 50px);
    }
}
.i-download {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    background: url(../images/download_icon.svg) no-repeat center center;
}
.i-check {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    background: url(../images/check_icon.svg) no-repeat center center;
}
#map-canvas {
    position: relative;
    display: block;
    width: 100%;
    height: 580px;
    overflow: hidden;
}
#map-canvas iframe {
    position: relative;
    display: block;
    width: 100%;
    height: 580px;
}

.form {
    position: relative;
    display: block;
    text-align: center;
    font-size: 0;
    line-height: 0;
    width: 100%;
    max-width: 800px;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
.form li {
    position: relative;
    display: block;
    margin: 0 0 25px 0;
}
.form .left {
    position: relative;
    display: inline-block;
    width: 120px;
    font-size: 15px;
    line-height: 15px;
    vertical-align: middle;
    text-align: left;
    padding: 0 20px 0 0;
}
.form .left u {
    text-decoration: none;
    color:brown;
}
.form .right {
    position: relative;
    display: inline-block;
    width: calc(100% - 120px);
    font-size: 15px;
    line-height: 15px;
    vertical-align: middle;
    text-align: left;
}
.form input {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 40px;
    border:1px solid rgba(0,0,0,0.2);
}
.form .right.captcha img {
    position: relative;
    display: block;
    margin: 0 0 10px 0;
}
.form textarea {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
    border: 1px solid rgba(0,0,0,0.2);
}
@media screen and (max-width: 600px) {
    .form .left {
        display: block;
        width: 100%;
        padding: 5px;
    }
    .form .right {
        display: block;
        width: 100%;
    }
}


.footer {
    position: relative;
    display: block;
    width: 100%;
    background: #ddd;
    color:#666;
    padding: 30px 3% 30px 3%;
    font-size: 0;
    line-height: 0;
    text-align: center;
    clear: both;
}
.footer::after {
    content: "";
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    clear: both;
}
.footer > ul {
    position: relative;
    display: block;
    vertical-align: top;
}
.footer > ul:nth-child(1) {
    float: left;
}
.footer > ul:nth-child(2) {
    float: right;
}
.footer > ul li {
    font-size: 13px;
    line-height: 13px;
    letter-spacing: 0px;
    text-align: left;
}
.footer > ul:nth-child(1) li {
    position: relative;
    display: block;
    margin: 0 0 10px 0;
}
.footer > ul:nth-child(2) li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 0;
    line-height: 0;
    margin: 0;
    width: calc((94vw - 350px) / 6);
}
.footer > ul li.logo {
    position: relative;
    display: block;
    width: 200px;
    height: 100px;
}
.footer > ul li.logo img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}
.footer > ul:nth-child(2) li dl {
    position: relative;
    display: block;
}
.footer > ul:nth-child(2) li dl dt {
    position: relative;
    display: block;
    font-size: 16px;
    line-height: 16px;
    margin: 0 0 10px 0;
    color:#005494;
}
.footer > ul:nth-child(2) li dl dd {
    position: relative;
    display: block;
    font-size: 13px;
    line-height: 13px;
    margin: 0 0 8px 0;
    color:#000;
    cursor: pointer;
}
.footer > ul:nth-child(2) li dl dd:hover {
    color:#fff;
}
.footer > ul:nth-child(2) li dl dd a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
}
@media screen and (max-width: 1200px) {
    .footer > ul:nth-child(1) {
        display: inline-block;
        float: none;
    }
    .footer > ul:nth-child(2) {
        display: none;
    }
}


.productLightBox {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    left: 0;
    top:0;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
}
.productLightBox.expand {
    display: block;
}
.productLightBox .imgBox {
    position: absolute;
    display: block;
    left: 50%;
    top:50%;
    width: 600px;
    height: 600px;
    max-width: 90%;
    max-height: 70%; 
}
.productLightBox .imgBox img {
    position: relative;
    display: block;
    height: 100%;
    width: auto;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.productLightBox .closeBtn {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 50px;
    top:50px;
    cursor: pointer;
}
.productLightBox .closeBtn::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 5px;
    top:50%;
    background: #ccc;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);  
}
.productLightBox .closeBtn:hover::before {
    background: #fff;
}
.productLightBox .closeBtn::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 5px;
    top:50%;
    background: #ccc;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);  
}
.productLightBox .closeBtn:hover::after {
    background: #fff;
}
.investorIndexContent {
    position: absolute;
    display: block;
    left: 50%;
    top:50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.investorIndexContent h1 {
    position: relative;
    display: block;
    text-align: center;
    font-size: 40px;
    line-height: 40px;
    margin: 0 0 10px 0;
    color:#fff;
}
.investorIndexContent h2 {
    position: relative;
    display: block;
    text-align: center;
    font-size: 18px;
    line-height: 18px;
    margin: 0 0 10px 0;
    color:#fff;
}
.investorIndexContent span {
    position: relative;
    display: block;
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    padding: 15px;
    color:#fff;
    background: #00BBFF;
}
.investorIndexContent span a {
    color: #fff;
}
@media screen and (max-width: 800px) {
    .investorIndexContent h1 {
        font-size: 25px;
        line-height: 25px;
    }
    .investorIndexContent h2 {
        font-size: 15px;
        line-height: 15px;
    }
}
.certificateBox span {
    position: relative;
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 15px;
    margin: 5px 0 10px 0;
}