/* Sub Visual */
.sub-visual {
  position: relative;
  width: 100%;
  height:480px;
  background: url('../img/sub/sv.png') no-repeat center / cover;
}

.sub-visual-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.sub-visual .sub-title {
  margin-bottom:80px;
  text-align: center;
  /* overflow: hidden; */
}

.sub-visual .sub-title h1 {
  font-size:3.9rem;
  font-weight:600;
  color:#122B5F;
}

.sub-visual .sub-lnb {
  position: relative;
  max-width:800px;
  width: 95%;
  margin:0 auto;
  background-color: #77A6D8;
  border-radius:10px;
  z-index:20;
}

.sub-visual .sub-lnb dl {
  display: flex;
  width: 100%;
}

.sub-visual .sub-lnb dd {
  position: relative;
}

.sub-visual .sub-lnb dd.home {
  width: 80px;
  height:64px;
}

.sub-visual .sub-lnb dd.home a {
  display: block;
  width: 100%;
  height:100%;
  background: url('../img/sub/ico.png') no-repeat center;
}

.sub-visual .sub-lnb dd.depth {
  width: calc(50% - 40px);
  padding:0px 30px;
  transition: all 0.1s ease;
}

.sub-visual .sub-lnb dd.depth::before {
  content: "";
  display: block;
  position: absolute;
  top:50%;
  left:-1px;
  transform: translateY(-50%);
  width:1px;
  height: calc(100% - 36px);
  background-color: #fff;
  opacity: 1;
  z-index:-2;
  transition: all 0.1s ease;
}

.sub-visual .sub-lnb dd.depth span {
  display:flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  font-size:1.9rem;
  font-weight:500;
  color:#fff;
  cursor: pointer;
}

.sub-visual .sub-lnb dd.depth span::after {
  content: "";
  display: block;
  position: absolute;
  top:50%;
  right:0px;
  transform: translateY(-50%);
  width:24px;
  height:14px;
  background: url('../img/sub/arr.png') no-repeat center;
}

.sub-visual .sub-lnb .depth_list {
  display: none;
  position: absolute;
  top:100%;
  left:0;
  width: 100%;
  max-height: 0px;
  transition: max-height 0.4s ease-in-out;
}

.sub-visual .sub-lnb .depth_list::after {
  content: "";
  display: block;
  position: absolute;
  top:-64px;
  right:0;
  width: 100%;
  height:calc(100% + 64px);
  background-color: #3E82C4;
  z-index:-1;
}

.sub-visual .sub-lnb .depth_list li {
  padding:10px 30px;
  opacity:0;
  transition: all 0s 0s;
}

.sub-visual .sub-lnb .depth_list li:first-child {
  padding-top:20px;
}

.sub-visual .sub-lnb .depth_list li:last-child {
  padding-bottom:20px;
}

.sub-visual .sub-lnb .depth_list a {
  font-size:1.9rem;
  font-weight:500;
  color:#fff;
}

.sub-visual .sub-lnb dd.depth.active::before {
  opacity: 0;
}

.sub-visual .sub-lnb dd.depth.active .depth_list li {
  opacity: 1;
  transition: all .6s ease;
}

.sub-visual .sub-lnb dd.depth02.active .depth_list::after {
  border-top-right-radius: 10px;
}

@media screen and (max-width:1200px) {
  .sub-visual .sub-title h1 {
    font-size:3.4rem;
  }

  .sub-visual .sub-lnb dd.depth span {
    font-size: 1.7rem;
  }

  .sub-visual .sub-lnb .depth_list a {
    font-size: 1.7rem;
  }
}
@media screen and (max-width:1024px) {
  .sub-visual {
    height:380px;
  }

  .sub-visual .sub-title {
    margin-bottom:60px;
  }

  .sub-visual .sub-lnb dd.home {
    width:70px;
    height:50px;
  }

  .sub-visual .sub-lnb dd.home a {
    background-size: auto 26px;
  }

  .sub-visual .sub-lnb dd.depth {
    width: calc(50% - 35px);
    padding:0px 20px;
  }

  .sub-visual .sub-lnb dd.depth span::after {
    width:16px;
    height:10px;
    background-size:auto 10px;
  }

  .sub-visual .sub-lnb .depth_list::after {
    top:-50px;
    height:calc(100% + 50px);
  }

  .sub-visual .sub-lnb .depth_list li {
    padding:8px 20px;
  }
}
@media screen and (max-width:768px) {
  .sub-visual {
    height:320px;
  }

  .sub-visual .sub-title {
    margin-bottom:40px;
  }

  .sub-visual .sub-title h1 {
    font-size:3rem;
  }

  .sub-visual .sub-lnb dd.home {
    width:50px;
    height:44px;
  }

  .sub-visual .sub-lnb dd.home a {
    background-size:auto 20px;
  }

  .sub-visual .sub-lnb dd.depth {
    width: calc(50% - 25px);
  }

  .sub-visual .sub-lnb dd.depth::before {
    height: calc(100% - 28px);
  }

  .sub-visual .sub-lnb dd.depth span {
    font-size:1.6rem;
  }

  .sub-visual .sub-lnb dd.depth span::after {
    width:14px;
    height:8px;
    background-size:auto 8px;
  }

  .sub-visual .sub-lnb .depth_list::after {
    top:-44px;
    height:calc(100% + 44px);
  }

  .sub-visual .sub-lnb .depth_list a {
    font-size: 1.6rem;
  }
}
@media screen and (max-width:576px) {
  .sub-visual {
    height:200px;
  }

  .sub-visual .sub-title {
    margin:0px;
  }

  .sub-visual .sub-title h1 {
    font-size:2.8rem;
  }

  .sub-visual .sub-lnb {
    display: none;
  }
}


/* Introduce */
.introduce .sec01 {
  position: relative;
  padding:240px 0px;
  background: url('../img/sub/about/introduce_bak.png') no-repeat center / cover;
}

.introduce .sec01 .pin {
  position: absolute;
  top:120px;
  left:0px;
  font-size:7.9rem;
  font-weight:700;
  color:#EAF1F8;
  white-space: nowrap;
}

.introduce .sec01 .pin br {
  display: none;
}

/* .introduce .sec01::after {
  content: "";
  display: block;
  position: absolute;
  right:180px;
  bottom:130px;
  width:240px;
  height:240px;
  background: url('../img/sub/about/introduce_ele.png') no-repeat center;
  animation: circle-ani 8s 0s linear infinite;;
} */

.introduce .sec01 .txt {
  position: relative;
  text-align: center;
  z-index:5;
}

.introduce .sec01 .t02 {
  line-height:1.75;
}

.introduce .sec02 {
  padding:120px 0px 0px;
}

.introduce .sec02 .hd-txt {
  line-height:1.6;
}

.introduce .sec02 .img {
  position: relative;
  top:0;
  left:0;
  width: 100%;
  height:0;
  padding-top:calc(840/1920*100%);
  overflow: hidden;
}

.introduce .sec02 .img::before {
  content: "";
  display: block;
  position: absolute;
  top:0;
  right:0;
  width: 100%;
  height:100%;
  background-color: #fff;
  z-index:10;
  transition: all 1.2s ease-in-out .1s;
}

.introduce .sec02 .img img {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  transform: scale(1.05);
  transition: all 2s ease-in-out .1s;
}

.introduce .sec02 .img.aos-animate::before {
  width: 0;
}

.introduce .sec02 .img.aos-animate img {
  transform: scale(1);
}


.introduce .sec03 {
  padding:120px 0px 170px;
}

.introduce .sec03 .item {
  padding-bottom:80px;
  border-bottom: 1px solid #D9D9D9;
}

.introduce .sec03 .item:not(:last-child) {
  margin-bottom:80px;
}

.introduce .sec03 .item-box {
  position: relative;
  padding-left: 42.1875%;
}

.introduce .sec03 .lt {
  position: absolute;
  top:0;
  left:0;
}

.introduce .sec03 .rt {
  position: relative;
}

.introduce .sec03 .rt::before {
  content: "";
  display: block;
  position: absolute;
  top:0px;
  left:-10.8108%;
  width: 2px;
  height:100%;
  background-color: #3E82C4;
}

.introduce .sec03 dl:not(:last-child) {
  padding-bottom:40px;
}

.introduce .sec03 dt {
  margin-bottom:16px;
}

.introduce .sec03 dd span {
  display: flex;
  gap:4px;
  line-height:1.6;
}

@media screen and (max-width:1536px) {
  .introduce .sec01 {
    padding:200px 0px;
  }

  .introduce .sec01 .pin {
    font-size:6rem;
  }

  .introduce .sec01::after {
    right:60px;
    bottom:100px;
    width:200px;
    height:200px;
    background-size:auto 200px;
  }
}
@media screen and (max-width:1200px) {
  .introduce .sec01 {
    padding:160px 0px;
    background-color: #f6f8f9;
    background-size: auto 400px;
    background-position: right bottom;
  }
  
  .introduce .sec01 .pin {
    font-size:4rem;
  }

  .introduce .sec01::after {
    width:160px;
    height:160px;
    background-size:auto 160px;
  }
}
@media screen and (max-width:1024px) {
  .introduce .sec01 {
    padding:120px 0px;
  }

  .introduce .sec01 .pin {
    top:60px;
    font-size: 3.6rem;
  }

  .introduce .sec01::after {
    right:40px;
    bottom:60px;
  }

  .introduce .sec02 {
    padding:100px 0px 0px;
  }

  .introduce .sec03 {
    padding:100px 0px 120px;
  }

  .introduce .sec03 .item {
    padding-bottom:60px;
  }

  .introduce .sec03 .item:not(:last-child) {
    margin-bottom:60px;
  }

  .introduce .sec03 .item-box {
    padding-left: 33%;
  }

  .introduce .sec03 .rt::before {
    left:-7%;
  }

  .introduce .sec03 dl:not(:last-child) {
    padding-bottom:30px;
  }

  .introduce .sec03 dt {
    margin-bottom:10px;
  }
}
@media screen and (max-width:768px) {
  .introduce .sec01 {
    padding:100px 0px;
  }

  .introduce .sec01 .pin {
    font-size:2.4rem;
  }

  .introduce .sec01 .t02 {
    line-height:1.4;
  }

  .introduce .sec02 {
    padding:80px 0px 0px;
  }

  .introduce .sec03 {
    padding:80px 0px 100px;
  }

  .introduce .sec03 .item {
    padding-bottom:40px;
  }

  .introduce .sec03 .item:not(:last-child) {
    margin-bottom:40px;
  }

  .introduce .sec03 .item-box {
    padding:0px;
  }

  .introduce .sec03 .lt {
    position: relative;
    top:unset;
    left: unset;
    margin-bottom:20px;
  }

  .introduce .sec03 .rt {
    padding-left:20px;
  }

  .introduce .sec03 .rt::before {
    left:0px;
  }

  .introduce .sec03 dl:not(:last-child) {
    padding-bottom:20px;
  }
}
@media screen and (max-width:576px) {
  .introduce .sec01 {
    padding:80px 0px;
  }

  .introduce .sec01 .pin {
    display: none;
  }

  .introduce .sec01::after {
    display: none;
  }

  .introduce .sec02 {
    padding:60px 0px 0px;
  }

  .introduce .sec03 {
    padding:60px 0px 80px;
  }

  .introduce .sec03 .item {
    padding-bottom:30px;
  }

  .introduce .sec03 .item:not(:last-child) {
    margin-bottom:30px;
  }

  .introduce .sec03 .lt {
    margin-bottom: 16px;
  }

  .introduce .sec03 .rt {
    padding-left:12px;
  }

  .introduce .sec03 dl:not(:last-child) {
    padding-bottom: 12px;
  }

  .introduce .sec03 dt {
    margin-bottom: 6px;
  }

  .introduce .sec03 dd span {
    gap:3px;
  }
}


/* Location */
.location .sec {
  padding:120px 0px 170px;
}

.location .item {
  border-radius:10px;
  overflow: hidden;
}

.location .img {
  position: relative;
  width: 100%;
  height:0;
  padding-top:calc(600/1280*100%);
  overflow: hidden;
}

.location .img iframe {
  display: block;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height:100%;
}

.location .txt {
  position: relative;
  padding:40px;
  background-color: #F5F9FD;
}

.location .txt::after {
  content: "";
  display: block;
  position: absolute;
  top:0;
  right: 0;
  width:228px;
  height:153px;
  background: url('../img/sub/about/location_mask.png') no-repeat center;
}

.location .txt .t02 {
  line-height:1.4;
}

.location .info ul {
  display: flex;
  gap:40px;
}

.location .info li {
  flex:1 1;
}

.location .info .card {
  padding:40px;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.location .info .icon {
  display: block;
  width:70px;
  height:70px;
  background-repeat: no-repeat;
  background-position: center;
}

.location .info .icon01 {
  background-image: url('../img/sub/about/location_ico01.png');
}

.location .info .icon02 {
  background-image: url('../img/sub/about/location_ico02.png');
}

.location .info .icon03 {
  background-image: url('../img/sub/about/location_ico03.png');
}

@media screen and (max-width:1200px) {

}
@media screen and (max-width:1024px) {
  .location .sec {
    padding:100px 0px 120px;
  }

  .location .txt {
    padding:30px;
  }

  .location .txt::after {
    width: 188px;
    height:123px;
    background-size: auto 123px;
  }

  .location .info ul {
    gap:12px;
  }

  .location .info .card {
    padding:30px;
  }

  .location .info .icon {
    width:50px;
    height:50px;
    background-size: auto 50px;
  }
}
@media screen and (max-width:768px) {
  .location .sec {
    padding:80px 0px 100px;
  }

  .location .info ul {
    flex-wrap: wrap;
  }

  .location .info li {
    flex:1 1 100%;
    max-width: 100%;
  }

  .location .info .card {
    display: flex;
    align-items: center;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    gap:20px;
  }

  .location .info .icon {
    width:36px;
    height:36px;
    background-size: auto 36px;
  }
}
@media screen and (max-width:576px) {
  .location .sec {
    padding:60px 0px 80px;
  }

  .location .img {
    padding-top: 72.25%;
  }

  .location .txt {
    padding:20px 12px;
  }

  .location .txt::after {
    width: 148px;
    height:109px;
    background-size: auto 109px;
  }

  .location .info ul {
    gap:6px;
  }

  .location .info .card {
    padding:20px 16px;
    gap:16px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  .location .info .icon {
    width:26px;
    height:26px;
    background-size: auto 26px;
  }
}


/* Product */
.product .sec {
  padding:120px 0px 170px;
}
@media screen and (max-width:1200px) {

}
@media screen and (max-width:1024px) {
  .product .sec {
    padding:100px 0px 120px;
  }
}
@media screen and (max-width:768px) {
  .product .sec {
    padding:80px 0px 100px;
  }
}
@media screen and (max-width:576px) {
  .product .sec {
    padding:60px 0px 80px;
  }
}


/* Customer */
.customer .sec {
  padding:120px 0px 170px;
}
@media screen and (max-width:1200px) {

}
@media screen and (max-width:1024px) {
  .customer .sec {
    padding:100px 0px 120px;
  }
}
@media screen and (max-width:768px) {
  .customer .sec {
    padding:80px 0px 100px;
  }
}
@media screen and (max-width:576px) {
  .customer .sec {
    padding:60px 0px 80px;
  }
}


/* Media */
.media .sec {
  padding:120px 0px 170px;
}
@media screen and (max-width:1200px) {

}
@media screen and (max-width:1024px) {
  .media .sec {
    padding:100px 0px 120px;
  }
}
@media screen and (max-width:768px) {
  .media .sec {
    padding:80px 0px 100px;
  }
}
@media screen and (max-width:576px) {
  .media .sec {
    padding:60px 0px 80px;
  }
}


/* Notice */
.notice .sec {
  padding:120px 0px 170px;
}
@media screen and (max-width:1200px) {

}
@media screen and (max-width:1024px) {
  .notice .sec {
    padding:100px 0px 120px;
  }
}
@media screen and (max-width:768px) {
  .notice .sec {
    padding:80px 0px 100px;
  }
}
@media screen and (max-width:576px) {
  .notice .sec {
    padding:60px 0px 80px;
  }
}


/* Contact */
.contact .sec {
  padding:120px 0px 170px;
}
@media screen and (max-width:1200px) {

}
@media screen and (max-width:1024px) {
  .contact .sec {
    padding:100px 0px 120px;
  }
}
@media screen and (max-width:768px) {
  .contact .sec {
    padding:80px 0px 100px;
  }
}
@media screen and (max-width:576px) {
  .contact .sec {
    padding:60px 0px 80px;
  }
}


/* Careers */
.careers .sec01 {
  padding:120px 0px 80px;
}

.careers .sec01 .list {
  display: flex;
  gap:3.125%;
}

.careers .sec01 .list li {
  flex:1 1;
}

.careers .sec01 .list .card {
  height: 100%;
  padding:40px;
  border-radius:10px;
  overflow: hidden;
  background: url('../img/sub/careers/careers_bak.png') no-repeat center / cover;
}

.careers .sec02 {
  position: relative;
  padding:80px 0px;
}

.careers .sec02::after {
  content: "";
  display: block;
  position: absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width: 100vw;
  height:100%;
  background-color: rgba(149,191,229,.1);
  z-index: -1;
}

.careers .sec02 .list {
  display: flex;
  gap:5%;
}

.careers .sec02 .list li {
  flex:1 1;
}

.careers .sec02 .list .img {
  font-size:0px;
}

.careers .sec03 {
  padding:80px 0px 170px;
}

@media screen and (max-width:1200px) {

}
@media screen and (max-width:1024px) {
  .careers .sec01 {
    padding:100px 0px 60px;
  }

  .careers .sec01 .list {
    gap:12px;
  }

  .careers .sec01 .list .card {
    padding:28px;
    background-color:#EBF2F7 ;
    background-image: none;
  }

  .careers .sec01 .list img {
    width:60px;
  }

  .careers .sec02 {
    padding:60px 0px;
  }

  .careers .sec02 .list {
    gap:20px;
  }

  .careers .sec02 .list img {
    width: 120px;
  }

  .careers .sec03 {
    padding:60px 0px 120px;
  }
}
@media screen and (max-width:768px) {
  .careers .sec01 {
    padding:80px 0px 40px;
  }

  .careers .sec01 .list {
    flex-wrap: wrap;
    gap:8px;
  }

  .careers .sec01 .list li {
    flex:1 1 100%;
    max-width:100%;
  }

  .careers .sec02 {
    padding:40px 0px;
  }

  .careers .sec02 .list {
    flex-wrap: wrap;
    justify-content: center;
  }

  .careers .sec02 .list li {
    flex:1 1 calc(33.33% - 20px);
    max-width:calc(33.33% - 20px);
  }

  .careers .sec03 {
    padding:40px 0px 100px;
  }
}
@media screen and (max-width:576px) {
  .careers .sec01 {
    padding:60px 0px 40px;
  }

  .careers .sec01 .list .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding:20px;
  }

  .careers .sec01 .list img {
    width:40px;
  }

  .careers .sec02 .list {
    gap:20px 12px;
  }

  .careers .sec02 .list li {
    flex:1 1 calc(33.33% - 12px);
    max-width:calc(33.33% - 12px);
  }

  .careers .sec02 .list img {
    width: 80px;
  }

  .careers .sec03 {
    padding:40px 0px 80px;
  }
}



/* Privacy */
.privacy {
  display: flex;
  align-items: center;
  height: calc(var(--vh, 1vh)*100);
	height: 100svh;
}

.privacy .sec {
  width: 100%;
  height:100%;
  padding:16px 0px;
}

.privacy .container {
  height: 100%;
}

.privacy .textarea {
  width: 100%;
  height:100%;
  border:1px solid #aaa;
  border-radius:10px;
  padding:20px;
  overflow-y: auto;
}

/* Animation */
@keyframes circle-ani {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}