@charset "utf-8";
html { overflow-y: scroll;}
body {overflow-x: hidden;}
.blue {color: #034694;}
.green {font-weight: bold; font-size: 16px; line-height: 180%; text-align: center; color: #6CC9C5;}
.only-pc {display: none;}
.max-768 {display: none;}
.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%); width: 100%; font-size: 16px; color: #fff; font-weight: 100; text-align: center;  }
@media screen and (max-width : 450px) {
    .main-img h2 {font-size: 35px; line-height: 200px;}
    .main-img p {font-size: 14px; text-align: center;}
}
.product .main-img {position: relative; background-image: url('/images/main/main_bg5.jpg'); background-size: cover;}
.tech .main-img {position: relative; background-image: url('/images/main/main_bg2.jpg'); background-size: cover;}
.company .main-img {position: relative; background-image: url('/images/main/main_bg2.jpg'); background-size: cover;}
.tab-wrap {width: 100%; overflow-x: scroll;}
ul.tab { max-width: 1200px; height: 60px; margin: 0 auto; text-align: center;}
ul.tab li {display: inline-block; margin: 0 10px; height: 60px;}
ul.tab li a {font-size: 16px; display: block; width: 100%; line-height: 60px; color: #666;}
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: 850px; padding: 20px; box-sizing:border-box; margin: 0 auto;}
main .border {padding: 20px; width: calc(100% - 40px); border: 2px solid #d6d6d6; } 
.product main .border {margin-top: 50px;} 

@media screen and (max-width : 768px) {
    .max-768 {display: block;}  
    .min-768 {display: none;}
    ul.tab li a {position: relative; line-height: 25px; padding: 5px; top: 50%; transform: translateY(-50%);}    
}
main section + section {margin-top: 80px; padding-top: 80px; border-top: 1px solid #ddd; }
main section:last-child {padding-bottom: 80px;}
main h3 {font-size: 20px; text-align: center; margin-bottom: 50px; font-weight: 400;}
main h3 + p {margin-top: -30px; color:#888; font-size: 18px;}
.en main h3 {height: 40px;}

.applied_area main h3 + p {margin-top: 0; 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_line main section + section .img {padding: 5%; box-sizing: border-box;}
.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;}
.product_line .youtube-container {position: relative; height: 0; padding-bottom: 56.25%;}
.product_line .youtube-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.product main {text-align: center;}
.product main h4 + p {margin-top: 20px; color: #888; font-size: 16px;}
.product main .area {margin-top: 50px;}
.product main .area > ul {overflow: hidden; text-align: center;}
.product main .area > ul > li {float: left; width: 100%; vertical-align: top;}
.product main .area > ul > li + li {margin-top: 20px;}
.product main .area > ul > li h4 {position: absolute; left: 30%; margin-left: 33px; font-size: 20px; font-weight: 400; color: #888;}
.product main .area > ul > li .img {float: left; margin-right: 15px; width: 30%;}
.product main .area > ul > li .img img {display: block; width: 100%;}
.product main .area ul .info {padding: 10px; margin-top: 30px; text-align: left;}
.product main .area ul .info li {position: relative; display: block; color: #666; word-break: keep-all; font-weight: 100; font-size: 15px; letter-spacing: -.3px;}
.product main .area ul .info li + li {margin-top: 20px;}
.product main .area ul .info li + li::before {content:'';  position: absolute; top: -10px; left: 34%; 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 {overflow: hidden;}
.product_line main .mount > ul > li {float: left; width: 33.3333%; 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 {display: block; width: 80%; margin: 0 auto;}
.product_line main .handheld .img img {display: block; width: 100%;}
@media screen and (max-width: 450px){
    .product_line main section:first-child {margin-top: 0}
    main section + section {margin-top: 30px; padding-top: 30px;}
    main section:last-child {padding-bottom: 0;}
    .product main .area > ul > li {position: relative; overflow: hidden; text-align: center}
    .product main .area > ul > li .img {float: none; max-height: 370px; width: 100%; overflow: hidden}
    .product main .area > ul > li h4:not(.max-450) {display: none}
    .product main .area > ul > li h4.max-450 {position: relative;display: block; left: 0; margin: 1em 0 0 0; text-align: center}
    .product main .area ul .info {margin-top: 0;}
    .product main .area ul .info li {text-align: center}
    .product main .area ul .info li + li::before {left: 50%}
    #footer {clear: both}
    h4.max-450 {display: block; margin-top: 0.5em; text-align: left}
}
.company.vision main section.mission ul {overflow: hidden; width: 100%;}
.company.vision main section.mission ul li {float: left; padding: 10px; box-sizing: border-box; width: 33.3333%;}
.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: 16px;}

.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: 50%; line-height: 170px; color: #fff; font-size: 18px;}  
.company.vision main section.value ul li::after {content:''; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); width:160px; height: 160px; 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; width: 23%; font-size: 16px;}
.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: 16px;} 
@media screen and (max-width: 450px){
    .company.vision main section.mission ul li {width: 100%;}
    .company.vision main h3 {margin-bottom: 0;}
    .en.company.vision main section.value ul li {position: relative; height: 200px; width: 100%;}
    .company.vision main section.value ul li::after {width: 160px; height: 160px;}
    .en.company.vision main section.value ul li span {font-size: 16px;}

}
.company.history table { margin: 0 auto;}
.company.history table tbody {width: 100%;}
.company.history table tbody tr td {font-size: 16px; line-height: 1.8; padding: 10px; 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:last-child 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(50% - 30px); margin: 15px;}
.company.patent main ul li h4 {max-height: 60px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-top: 10px; font-size: 16px; font-weight: normal; letter-spacing: -.5px;}
.company.patent main ul li .img {widows: 100%; border: 1px solid #d6d6d6;}
.company.patent main ul li .img img {display: block; width: 100%;}

.tech .content-wrap {max-width: 1440px; margin: 0 auto; overflow: hidden;}
.tech aside {width: 100%; padding: 10px; box-sizing: border-box; border-bottom: 1px solid #d6d6d6;}
.tech aside ul {overflow: hidden;}
.tech aside ul li {float: left; width: 33.3333%; text-align: center; padding: 0 10px; box-sizing: border-box;}
.tech aside ul li a {font-size: 16px; line-height: 2; letter-spacing: -.3px;}
.tech aside ul li.active a {color: #034694;}
.tech main {float: left; width: 100%;}
.tech main p {color: #888; font-size: 16px; font-weight: 100; letter-spacing: 0;}
.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: 30px auto; width: 20px;}
.tech.mob.background main .border > img:nth-of-type(2) {display: block; margin: -30px auto; width: 80%;}
.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: 10px; box-sizing: border-box;}
.tech.mob.background main ul li img {display: block; width: 100%;}
.tech.mob.background .img.light {width: 60%; margin: 50px auto;}
.tech.mob.background .img.light img {width: 100%;}
.tech.mob.background .img.arrow {margin: 30px auto; width: 30px;}
.tech.mob.background .img.arrow img {display: block; width: 100%;}

@media screen and (max-width: 450px){
    .tech.mob.background .img.light {width: 100%;}
    .tech.mob.background main ul li {width: 100%;}
    .tech aside ul li {padding: 0px 5px;}
    .tech aside ul li a {line-height: 1; font-size: 14px;}

}
.tech p strong {position: relative; display: block; margin-bottom: 10px; 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;}
.tech.mob.background p.blue {color: #034694;}

.tech.mob.char .img {position: relative; margin-top: 40px; 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 0px; box-sizing: border-box;}
.tech.mob.char .img.arrow {margin: 0 auto; width: 30%;}
.tech.mob.char .img.arrow img {display: block; margin: 40px auto; width: 20px;}

.tech.mob.char .img.wrap .img.arrow img {position: absolute; bottom: -10px; left: 50%; transform: translate(-50%, 0); width: 20px;  padding: 15px 0px; box-sizing: border-box;}

.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 {max-width:40%;}
.tech.mob.char .img ul li.ai img {max-width: 50%;}
.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: 50px;}
.tech.wearable .img h4 {font-size: 20px; text-align: center;}
.tech.wearable.system .img {margin-bottom: 30px; padding:0 0;}
.tech.wearable.background .img {padding: 0 0;}
.tech.wearable.background .img.arrow {margin: 30px auto; width: 30px; padding: 0;}
.tech.wearable.background .img img {display: block; margin: 0 auto; width: 100%;}
.tech.wearable.background .img h4 {margin-bottom: 20px;}
.tech.wearable.char .img {margin: 0 auto; padding: 0; width: 100%;}
.tech.wearable.char .img + .img {margin-top: 80px;}
.tech.wearable.char .img img {display: block; margin: 0 auto; width: 100%;}
.tech.wearable.char .img img.arrow {width: 25px;}
.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.char section:first-child .img {margin-bottom: 50px;}
.tech.wearable.char section span {display: block; text-align: center;}
.tech.wearable.char section + section p strong {margin-bottom: 40px;}
.tech.wearable.background main p {text-align: center; margin: 20px 0;}
.tech.wearable.background main p.blue {color: #034694;}