@charset "utf-8";
html {overflow-x: hidden !important; overflow-y: scroll;}
.blue {color: #034694;}
.green {font-weight: bold; font-size: 18px; line-height: 180%; text-align: center; color: #6CC9C5;}
.arrow {display: block; margin: 20px auto; width: 20px;}
.max-768, .max-450 {display: none;}
#header {position: relative;}
.main-img {position: relative; width: 100%; height: 280px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.main-img::after {content: ''; position: absolute; bottom: -60px; left: 0; width: 100%; height: 1px; background-color: #ddd;}
.main-img h2 {font-size: 50px; color: #fff; line-height: 280px; text-align: center;}
.main-img p {position: absolute; top: 60%; left: 50%; transform: translate(-50%, 50%); font-size: 18px; color: #fff; font-weight: 100;}

.product .main-img {background-image: url('../images/main/main_bg5.jpg');}
.tech .main-img {background-image: url('../images/main/main_bg2.jpg'); background-size: cover;}
.company .main-img {background-image: url('../images/main/main_bg2.jpg');}

@media screen and (max-width: 1440px) {
    main {max-width: 1024px; margin: 0 auto;}
} 
@media screen and (max-width: 1200px) {
    .only-pc {display: none;}
} 

ul.tab { max-width: 1200px; height: 60px; margin: 0 auto; text-align: center;}
ul.tab li {display: inline-block; margin: 0 20px;}
ul.tab li a {font-size: 17px; display: block; width: 100%; line-height: 60px; color: #666;}
.en ul.tab li a {font-size: 16px; line-height: 60px;}
ul.tab li.active {position: relative;}
ul.tab li.active::after {content: ''; position: absolute; bottom: 0; left: 0; background: #034694; width: 100%; height: 3px;}
main {max-width: 1440px; padding: 40px; box-sizing:border-box; margin: 0 auto;}
main .border {padding: 40px; width: calc(100% - 80px); border: 2px solid #d6d6d6; } 
.product main .border {margin-top: 50px;} 

main section:first-child {margin-top: 50px;}
.tech main section:first-child {margin-top: 0;}
.img img {display: block; margin: 0 auto; width: 100%;}
main section + section {margin-top: 100px; border-top: 1px solid #ddd; padding-top: 100px;}
main section:last-child {padding: 30px;}
main h3 {font-size: 30px; text-align: center; margin-bottom: 35px; font-weight: 100;}
main h3 + p {margin-top: -30px; color:#888; font-size: 18px;}
.en.product main h3 {height: 80px;}
.applied_area main h3 + p {margin-top: -30px; color:#888; font-size: 18px; font-weight: 100;}
main h4 {color: #666; font-size: 30px; font-weight: 100;}
.product_line main section:first-child {margin-top: 30px;}
.product_line main section + section {border: none;}

.product main {text-align: center;}
.product main h4 + p {margin-top: 20px; color: #888; font-size: 16px; font-size: 100;}
.product main .area {background: rgba(240, 240, 240, 0.4);}
.product main .area > ul {overflow: hidden; text-align: center;}
.product main .area > ul > li {float: left; width: calc(25% - 20px); margin: 0 10px; vertical-align: top;}
.product main .area > ul > li h4 {height: 50px; font-size: 20px; color: #888; line-height: 1.2; font-weight: 400;}

.product main .area > ul > li .img {position: relative; width: 100%;}
.product main .area > ul > li .img img {display: block; width: 100%;}
.product main .area ul .info {padding: 10px; margin-top: 30px;}
.product main .area ul .info li {position: relative; display: block; color: #666; word-break: keep-all; font-weight: 100; font-size: 16px; letter-spacing: -.5px;}
.product main .area ul .info li + li {margin-top: 20px;}
.product main .area ul .info li + li::before {content:'';  position: absolute; top: -10px; left: 50%; transform: translate(-50%, 0); width: 20px; height: 2px; background: #d6d6d6;}
.product main .area > ul .info li b {color: #888; font-weight: 400;}
.product main .area > ul .info li span {color: #888;}
.product_line main .mount > ul {padding: 0 40px;}
.product_line main .mount > ul > li {display: inline-block; width: calc(33.3333% - 50px); padding: 30px; box-sizing: border-box; margin: 0 10px; vertical-align: top;}
.applied_area main .mount > ul > li h4 {margin-bottom: 1.5em; font-size: 20px; color: #888; font-weight: 400;} 
.applied_area main .mount > ul > li .img::before {content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0.2;}
.product_line main .mount > ul > li .img {position: relative; width: 100%;}
.product_line main .mount > ul > li .img img {display: block; width: 100%;}
.product_line main .handheld .img img {max-width: 600px;}
.product_line .download {background-image: url('/images/layout/download-btn.png'); background-position: left center; background-size: 15px; background-repeat: no-repeat; padding-left: 20px;}

.company.vision main section.mission ul {overflow: hidden; width: 100%;}
.company.vision main section.mission ul li {float: left; width: calc(33.333% - 70px); margin: 0 35px;}
.company.vision main section.mission ul li .img {position: relative; width:100%; height: 300px; background-image: url('/images/sub/happy-family-silhouette-sunset.jpg'); background-position: center; background-size: cover; border-radius: 10px;}
.company.vision main section.mission ul li .img::before {content:''; position: absolute; top: 0; left: 0; width:100%; height: 100%; background-color: #000; opacity: 0.6; z-index: 1; border-radius: 10px;}
.company.vision main section.mission ul li:nth-child(1) .img {background-image: url('/images/sub/happy-family-silhouette-sunset.jpg');}
.company.vision main section.mission ul li:nth-child(2) .img {background-image: url('/images/sub/colleagues-putting-hands-together-motivating-better-results.jpg');}
.company.vision main section.mission ul li:nth-child(3) .img {background-image: url('/images/sub/close-up-picture-doctor-s-hands-posting-symbol-home-family-member-model.jpg');}
.company.vision main section.mission ul li p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; color: #fff; z-index: 1; font-size: 18px;}


.company.vision main section.value ul {text-align: center; overflow: hidden; padding: 0 10%; margin: 0 auto;}
.company.vision main section.value ul li {position: relative; display: inline-block; width: 20%;  line-height: 200px; color: #fff; font-size: 20px;}  
.company.vision main section.value ul li::after {content:''; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); width:200px; height: 200px; border-radius: 50%; background-color: violet; z-index: -1;}
.company.vision main section.value ul li:nth-child(1)::after {background-color:#CEDA8F;}
.company.vision main section.value ul li:nth-child(2)::after {background-color: #9FCC7C;}
.company.vision main section.value ul li:nth-child(3)::after {background-color:#71B08F;}
.company.vision main section.value ul li:nth-child(4)::after {background-color: #7BBFB5;}
.en.company.vision main section.value ul li {position: relative; height: 200px;}
.en.company.vision main section.value ul li span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; line-height: 20px; color: #fff; font-size: 18px;} 

.company.history table {max-width: 1024px; margin: 0 auto;}
.company.history table tbody {width: 100%;}
.company.history table tbody tr td {font-size: 18px; line-height: 25px; padding: 10px 15px; vertical-align: top;}
.company.history table tbody tr > td:first-child {width: 20%; text-align: right;}
.company.history table tbody tr > td:last-child {width: 80%;}
.en .company.history table tbody tr > td small {display: block; font-weight: 100;}

.company.patent main ul {width: 100%; text-align: center; overflow: hidden;}
.company.patent main ul li {float: left; width: calc(20% - 30px); margin: 15px;}
.company.patent main ul li h4 {margin-top: 10px; font-size: 16px; font-weight: normal; letter-spacing: -.5px;}
.company.patent main ul li .img {width:100%; border: 1px solid #d6d6d6;}
.company.patent main ul li .img img {display: block; width: 100%;}

@media screen and (max-width: 1200px) {
    .company.vision main section.mission ul li {width: calc(33.333% - 30px); margin: 0 15px;}
    .company.vision main section.value ul {padding: 0 0;}
    .company.vision main section.value ul li::after {width: 180px; height: 180px;}
}

.tech .content-wrap {max-width: 1440px; margin: 0 auto; overflow: hidden;}
.tech aside {float: left; width: 230px; padding: 80px 40px; box-sizing: border-box;}
.tech aside ul li a {font-size: 18px; line-height: 2;}
.tech aside ul li.active a {color: #034694;}
.tech main {float: left; width: calc(100% - 230px);}
.tech main p {color: #888; font-size: 18px; font-weight: 100;}
.tech main p + p {margin-top: 30px;}
.tech main p.gray-box {padding: 20px; box-sizing: border-box; background: #efefef; text-align: center; border-radius: 15px;}
.tech.mob.background main .border > img:nth-of-type(1) {display: block; margin: 100px auto 0; width: 30px;}
.tech.mob.background .img.light {width: 60%; margin: 0 auto;}
.en.tech.mob.background main .border > .img:nth-of-type(2) {margin: 0 auto; width: 80%;}
.en.tech.mob.background main .border > .img:nth-of-type(2) img {width: 100%;}
.tech.mob.background main ul {overflow: hidden;}
.tech.mob.background main ul li {float: left; width: 50%; padding: 50px; box-sizing: border-box;}
.tech.mob.background main ul li img {display: block; margin-bottom: 20px; width: 100%;}

.tech p strong {position: relative; display: block; margin-bottom: 15px; font-size: 18px; color: #034694;}
.tech p strong::after {content:''; position: absolute; top:120%; left: 0; width: 15px; height: 1px; background: #034694;}
.tech.mob.background p {text-align: center; line-height: 1.8;}
.tech.mob.background p.blue { color: #034694;}

.tech.mob.char .img {position: relative; margin: 60px 0; width: 100%; text-align: center;}
.tech.mob.char .img p {font-size: 20px; color: #6CC9C5; text-align: center; padding-left: 0; margin-top: 20px;}
.tech.mob.char .img img {width: 30%;  padding: 15px 30px; box-sizing: border-box;}
.tech.mob.char .img.arrow {width: 40px; padding: 0; margin: 0 auto;}
.tech.mob.char .img.arrow img {width: 100%; padding: 0;}
.tech.mob.char .img span {display: block; font-size: 16px;}
.tech.mob.char .img ul {overflow: hidden;}
.tech.mob.char .img ul li {float: left; width: 50%; padding: 15px 10px; box-sizing: border-box;}
.tech.mob.char .img ul li img {width: 100%;}
.tech.mob.char .img ul li.server img {width: 100%; max-width: 180px;}
.tech.mob.char .img ul li.ai img {width: 100%; max-width: 210px;}
.tech.mob.char .img ul li.applied_area img {width: 100%; max-width: 220px;}
.tech.mob.char .img.wrap .img {position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); width: 40px;}
.tech.mob.char .img.wrap .img img {width: 100%;}
.tech.mob.system .img img {width: 100%;  padding: 15px 30px; box-sizing: border-box;}
.tech.wearable .img {width: 100%; padding: 0 50px; box-sizing: border-box;}
.tech.wearable .img img {display: block; width: 100%;}
.tech.wearable .img  + .img {margin-top: 100px;}
.tech.wearable .img h4 {margin-bottom: 2em; font-size: 18px; text-align: center; margin-bottom: 2em; font-weight: 400;}
.tech.wearable.char section.system p strong {text-align: center;} 
.tech.wearable.char section.system .txt-right {position: relative;} 
.tech.wearable.char section.system .txt-right .green {position: absolute; right: 0; top: 50%; transform: translate(0, -50%); text-align: left; width: 45%;} 
.tech.wearable.system .img {margin-bottom: 30px;}
.tech.wearable.background .img {display: block; margin: 0 auto; width: 60%;}
.tech.wearable.background .img.arrow {margin: 90px auto; width: 30px; padding: 0;}
@media screen and (max-width: 1200px) {
    .only-pc {display: none;}
    .tech.wearable.background main p {font-size: 18px;}

}
@media screen and (max-width: 1024px) {
    .tech.wearable.background .img {width: 100%;}
}
.tech.wearable.char section span {display: block; text-align: center;}
.tech.wearable.char .img {margin: 100px auto; width: 70%;}
.tech.wearable.char .img:nth-child(4),
.tech.wearable.char .img:nth-child(6) {width: 100%;}
.tech.wearable.char .img + .img {margin-top: 30px;}

.tech.wearable.char .img img.arrow {width: 30px;}
.tech.wearable.char .img:nth-child(1), 
.tech.wearable.char .img:nth-child(2),
.tech.wearable.char .img:nth-child(3) {width: 100%}
.tech.wearable.char .img:nth-child(1) img {width: 100%;}
.tech.wearable.char .img:nth-child(2) img,
.tech.wearable.char .img:nth-child(3) img {display: block; margin: 0 auto; width: 70%;}
.tech.wearable.char .img span {display: block;text-align: center;}
.tech.wearable.char main .img p {margin: 0 0 20px -30px;}
.tech.wearable.char main .img p strong::after {content:''; width: 0;}
.tech.wearable.background main p {text-align: center; margin: 40px 0; line-height: 1.8;}
.tech.wearable.background main p.blue {color: #034694;} 

@media screen and (max-width: 1200px) {
    .tech.wearable.char .img {width: 100%;}
}