@charset "utf-8";

#sub_layout {background: #07143a;}
.sub-visual {position: relative; height:560px; background-repeat: no-repeat; background-position: center center; background-size: cover; margin: 110px 0 150px;}
.sub-visual01 {background-image: url('../img/sub/sub_visual01.jpg');}
.sub-visual02 {background-image: url('../img/sub/sub_visual02.jpg');}
.sub-visual03 {background-image: url('../img/sub/sub_visual03.jpg');}
.sub-visual04 {background-image: url('../img/sub/sub_visual04.jpg');}
.sub-visual05 {background-image: url('../img/sub/sub_visual05.jpg');}
.sub-visual .container {display: flex; justify-content: center; align-items: center;}
.sub-visual h2 {font-size: 76px; font-weight: 700; line-height: 1.2em; color: #fff; text-align: center; margin-bottom: 80px;}
.sub-visual02 h2,
.sub-visual04 h2 {margin-bottom: 0;}
.lnb {position: absolute; bottom: 0; left: 0; width: 100%; background: #07143a; border-bottom: 1px solid rgba(255,255,255,0.2);}
.sub-visual02 .lnb {display: none;}
.lnb ul {display: flex; width: 100%; height: 80px;}
.lnb ul li {position: relative; flex: 1;}
.lnb ul li:after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; width: 1px; height: 16px; background: rgba(255,255,255,0.2);}
.lnb ul li:last-child:after {display: none;}
.lnb ul li a {position: relative; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.5); text-align: center; padding: 0 5px; transition: all 0.5s;}
.lnb ul li a:hover {color: #3abbda;}
.lnb ul li.active a {color: #3abbda;}
.lnb ul li.active a:after {position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); content: ''; width: 100%; height: 3px; background: #3abbda;}

.page-title {margin-bottom: 125px;}
.page-title h3 {position: relative; font-size: 70px; font-weight: 700; line-height: 1.2em; color: #f2f2f2; text-align: center; padding-top: 32px;}
.page-title h3:before {position: absolute; top: 0; left: 50%; transform: translateX(-50%); content: ''; width: 46px; height: 8px; background: #f2f2f2;}
.page-title h3:after {position: absolute; top: 0; left: 50%; margin-left: -23px; content: ''; width: 10px; height: 8px; background: #3abbda;}

.sub-cont {padding-bottom: 170px;}
.sub-cont.pb-0 {padding-bottom: 0;}
.real-cont {padding:100px 0 170px;}

.depth03 {margin-bottom: 37px;}
.depth03 ul {display: flex; gap: 12px;}
.depth03 ul li {flex: 1;}
.depth03 ul li a {display: inline-block; width: 100%; font-size: 20px; font-weight: 600; line-height: 1.5em; color: rgba(242,242,242,0.6); text-align: center; background: rgba(255,255,255,0.1); padding: 20px 10px; border-radius: 35px; transition: all 0.5s;}
.depth03 ul li a:hover {color: #3abbda;}
.depth03 ul li.active a {background: #3abbda; font-weight: 700; color: #fff;}

/* s101 INTRODUCTION */
.introduction .img-box {border-radius: 100px 100px 0 0; overflow: hidden; text-align: center;}
.introduction .img-box img {border-radius: 100px 100px 0 0; overflow: hidden;}

/* s102 HISTORY */
.history-wrap {position: relative; display: flex; align-items: flex-start; padding-bottom: 170px;}
.history-wrap:before {position: absolute; bottom: 0; left: 720px; content: ''; width: 1px; height: calc(100% - 20px); background: #3abbda;}
.history-wrap .title {position: sticky; top: 150px; max-width: 720px; width: 100%; padding-right: 110px; text-align: right;}
.history-wrap .title p {font-family: "Poppins", sans-serif; font-size: 40px; font-weight: 600; line-height: 1.2em; color: #3abbda; margin-bottom: 4px;}
.history-wrap .title h4 {font-family: "Poppins", sans-serif; font-size: 100px; font-weight: 700; line-height: 1.2em; color: rgba(242,242,242,0.1); margin-bottom: 36px;}
.history-wrap .title img {border-radius: 20px; border: 6px solid rgba(255,255,255,0.1);}
.history-wrap .description {width: 1%; flex: 1 1 auto;}
.history-wrap .description .year-wrap {position: relative; padding-left: 130px;}
.history-wrap .description .year-wrap:not(:last-child) {margin-bottom: 88px;}
.history-wrap .description .year-wrap:before {z-index: 10; position: absolute; top: 15px; left: -8px; content: ''; width: 18px; height: 18px; background: #3abbda; border: 4px solid #11355a; border-radius: 50%;}
.history-wrap .description .year-wrap:after {position: absolute; top: 23px; left: 0; content: ''; width: 100px; height: 1px; border: 1px dashed rgba(255,255,255,0.3);}
.history-wrap .description .year h4 {font-family: "Poppins", sans-serif; font-size: 46px; font-weight: 600; line-height: 1em; color: #3abbda; margin-bottom: 34px;}
.history-wrap .description .month-wrap {display: flex;}
.history-wrap .description .month-wrap .month {max-width: 42px; width: 100%; font-size: 18px; font-weight: 600; line-height: 1.77em; color: #f2f2f2;}
.history-wrap .description .month-wrap ul {width: 1%; flex: 1 1 auto;}
.history-wrap .description .month-wrap ul li {font-size: 18px; line-height: 1.77em; color: rgba(242,242,242,0.6);}

/* s103 LOCATIONS */
.location .map-box {height: 460px; margin-bottom: 40px; border-radius: 20px; overflow: hidden;}
.location .map-box iframe {width:100%; height:100%;}
.location .info-box {display: flex; justify-content: space-between; gap: 20px;}
.location .info {flex: 1 1 auto; margin-top: 5px;}
.location .info dl {display: flex; padding-left: 10px;}
.location .info dt {max-width: 100px; width: 100%; font-size: 22px; line-height: 1.63em; font-weight: 600; color: #f2f2f2;}
.location .info dd {width: 1%; flex: 1 1 auto; font-size: 22px; line-height: 1.63em; color: rgba(242,242,242,0.6);}
.location .info a {display: inline-block;}
.location .btn {display: flex; gap: 8px; }
.location .btn a {display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 10px;}
.location .btn-map {background: #3abbda;}
.location .btn-print {background: #06b193;}
.location .btn img {transition: all 0.5s;}
.location .btn a:hover img {transform: rotate(-20deg);}

/* s2 RESEARCH */
.text-wrap-box {padding: 130px 0 100px;}
article:nth-child(1) .text-wrap-box {padding-top: 0}
.text-wrap-box .wrap {display: flex; gap: 30px;}
.text-wrap-box .title {max-width: 446px; width: 100%;}
.text-wrap-box .title h4 {font-family: "Poppins", sans-serif; font-size: 44px; font-weight: 600; line-height: 1.27em; color: #f2f2f2; margin-bottom: 14px;}
.text-wrap-box .title p {font-family: "Poppins", sans-serif; font-size: 18px; font-weight: 600; line-height: 1.55em; color: #3abbda;}
.text-wrap-box .details {width: 1%; flex: 1 1 auto;}
.text-wrap-box .details p {font-size: 20px; line-height: 1.5em; color: rgba(242,242,242,0.6);}
.text-wrap-box .details p:not(:last-child) {margin-bottom: 30px;}
.text-wrap-box .details b {font-weight: 700;}

.research .img-box {background: #f8f8f8;}

.slide-box {background: #f8f8f8;}
#sub .slide-box .container {max-width: 1690px; padding: 0 125px;}
.slide-box .slick-arrow {position: absolute; top: 50%; margin-top: -40px; display: block; width: 80px; height: 80px; border-radius: 50%; background-color: #fff; background-repeat: no-repeat; background-position: center center; font-size: 0; border: 0; z-index: 5;}
.slide-box .slick-prev {left: -110px; background-image: url('../img/sub/btn-slide-prev.png'); box-shadow: 0px 5px 10px 0px rgba(100, 98, 98, 0.1);}
.slide-box .slick-next {right: -110px; background-image: url('../img/sub/btn-slide-next.png'); box-shadow: 0px 0px 10px 0px rgba(100, 98, 98, 0.1);}

/* s3 PRODUCT */
.product-tabs ul {display: flex; flex-wrap: wrap;}
.product-tabs ul li {position: relative; flex: 1; border-bottom: 1px solid rgba(255,255,255,0.1);}
.product-tabs ul li:after {position: absolute; top: 50%; right: -3px; margin-top: -3px; content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(242,242,242,0.3);}
.product-tabs ul li:last-child:after {display: none;}
.product-tabs ul li a {position: relative; height: 100%; align-content: center; font-size: 18px; font-weight: 700; line-height: 1.5em; color: rgba(242,242,242,0.6); text-align: center; padding: 26px 10px; transition: all 0.5s;}
.product-tabs ul li a:hover {color: #3abbda;}
.product-tabs ul li.active a {color: #3abbda;}
.product-tabs ul li.active a:after {position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); content: ''; width: 100%; height: 2px; background: #3abbda;}
.product article {padding-top: 138px;}
.product .text-box {margin-bottom: 94px;}
.product .text-box .title h4 {font-family: "Poppins", sans-serif; font-size: 44px; font-weight: 600; line-height: 0.9em; color: #f2f2f2; margin-bottom: 14px;}
.product .text-box .title p {font-family: "Poppins", sans-serif; font-size: 44px; font-weight: 600; line-height: 0.9em; color: #3abbda;}
.product .text-box .title p small {font-size: 28px;}
.product .img-box {background: #f2f2f2;}

.product-contact {height: 510px; background: url('../img/sub/product-contact-bg.jpg') no-repeat center center/cover;}
.product-contact .wrap {display: flex; justify-content: space-between; align-items: center; height: 100%;}
.product-contact .circle-box {position: relative; max-width: 241px; width: 100%; height: 241px; }
.product-contact .circle-box a {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.product-contact .circle-box a:hover {animation: circleHover 0.7s both;}
.product-contact .circle-box a:before {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background: url('../img/sub/product-contact-btn-more.png') no-repeat center center; animation: spin 8s linear infinite;}
.product-contact .circle-box img {position: relative; z-index: 5;}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes circleHover {
	0% {transform:scale(1); }
	50% {transform:scale(1.15); }
	100% {transform:scale(1);}
}

.product .slide-box {background: #f2f2f2;}
.product .table-box {padding: 125px 0 133px;}
.product .table-wrap:not(:last-child) {margin-bottom: 75px;}
.product .table-box .table-title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;}
.product .table-box .table-title h5 {font-size: 30px; font-weight: 700; line-height: 1.5em; color: #3abbda;}
.product .table-box .table-title a {position: relative; display: inline-block; font-size: 20px; font-weight: 600; line-height: 56px; color: #fff; padding: 0 62px 0 30px; border: 2px solid rgba(255,255,255,0.2); border-radius: 30px;}
.product .table-box .table-title a:after {position: absolute; top: 50%; right: 26px; transform: translateY(-50%); content: '+'; font-family: "Poppins", sans-serif; transition: all 0.5s;}
.product .table-box .table-title a:hover:after {transform: translateY(-50%) rotate(270deg);}
.product .table-responsive {overflow-x: auto; -webkit-overflow-scrolling: touch;}
.product .table-responsive table {min-width: 650px;}
.product .table-responsive::-webkit-scrollbar {width: 6px; height: 6px;}
.product .table-responsive::-webkit-scrollbar-thumb {background: #3abbda; border-radius: 6px; cursor: pointer;}
.product .table-responsive::-webkit-scrollbar-track {background: #112851; border-radius: 6px;}

.product .table-box table {width: 100%; border-top: 2px solid #3abbda;}
.product .table-box tr {border-bottom: 1px solid rgba(255,255,255,0.1);}
.product .table-box th {font-size: 18px; font-weight: 700; line-height: 1.5em; color: #3abbda; padding: 16px 10px; background: #0e1b45;}
.product .table-box th:not(:last-child),
.product .table-box td:not(:last-child) {border-right: 1px solid rgba(255,255,255,0.1);}
.product .table-box td {font-size: 18px; line-height: 1.5em; color: rgba(255,255,255,0.6); text-align: center; padding: 16px 10px;}
.product .table-desc {margin-top: 23px;}
.product .table-desc li {position: relative; font-size: 18px; line-height: 1.55em; color: #3abbda; padding-left: 16px;}
.product .table-desc li:before {position: absolute; top: 10px; left: 0; content: ''; width: 4px; height: 4px; background: #3abbda; border-radius: 50%;}

/* s4 TECHNOLOGY */
.tech .title h4 {font-size: 44px; font-weight: 600; line-height: 1.2em; color: #f2f2f2; margin-bottom: 22px;}
.article-list ul {border-top: 1px solid rgba(242,242,242,0.2);}
.article-list ul li {border-bottom: 1px solid rgba(242,242,242,0.2); padding: 60px 60px; transition: all 0.5s;}
.article-list ul li:hover {background: #0d1b45;}
.article-list ul li.none {color: #f2f2f2; text-align: center;}
.article-list ul li .wrap {display: flex; justify-content: space-between; align-items: center; gap: 240px;}
.article-list ul li .title {width: 1%; flex: 1 1 auto;}
.article-list ul li .title h4 {font-size: 26px; font-weight: 500; line-height: 1.53em; color: rgba(242,242,242,0.6); height:calc(1.53em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition: all 0.5s;}
.article-list ul li:hover .title h4 {color: #f2f2f2;}
.article-list ul li .btn {max-width: 180px; width: 100%;}
.article-list ul li .btn-view-more {border: 2px solid #07143a; color: rgba(242,242,242,0.6);}
.article-list ul li .btn-view-more:after {opacity: 0.6;}
.article-list ul li:hover .btn-view-more {border: 2px solid #fff; color: #fff; background: transparent;}
.article-list ul li:hover .btn-view-more:after {opacity: 1; transform: rotate(270deg);}