@import url('_var.css');
#nt_body { padding: 0;}




.process,
.video { padding: 10rem 0; background-color: var(--m-bg-color1);}
.header {margin: 0 0 7rem; text-align: center; }
.header span { font-size: 2.2rem; line-height: 1; color: var(--m-header-en); }
.header p { padding: 2rem 0 0; font-size: 4rem; font-weight: 500; line-height: 1.3; color:var(--m-txt-color1); }

@media(max-width:768px){
  .header p {font-size: 3.6rem;}
}
@media(max-width:768px){
  .header span {font-size: 2rem;}
  .header p {font-size: 3.4rem;}
}

.process .header { position: relative; }
.process .header:after { content:'SEOKYEONG'; position: absolute; left: 50%; top: 47%; transform: translateX(-50%); font-size: 15.7rem; font-weight: 500; color: #eee; line-height: 0.65; }
.process .header p { position: relative; z-index: 10;}
.process .order { display: flex; gap: 2.5rem; justify-content: space-between;}
.process .order li { position: relative; top: 0; flex:1; padding: 6rem 1rem 5rem; text-align: center; color: var(--m-txt-color1); border: 2px solid var(--m-point-color); background-color: #fff; box-shadow: .5rem .5rem 0 rgba(160,160,160,.1); transition: 0.3s;}
.process .order li:hover { top: -1.5rem;  }
.process .order li h3 { padding: 12rem 0 2rem; font-size: 2.4rem; line-height: 1; font-weight: 500; background: no-repeat center top;}
.process .order li p { font-size: 1.6rem; }
.process .order li:nth-of-type(1) h3 { background-image: url('/img/sk/ico_step1.png');}
.process .order li:nth-of-type(2) h3 { background-image: url('/img/sk/ico_step2.png');}
.process .order li:nth-of-type(3) h3 { background-image: url('/img/sk/ico_step3.png');}
.process .order li:nth-of-type(4) h3 { background-image: url('/img/sk/ico_step4.png');}


.process .order li:first-of-type { border-radius: 4.5rem 0 0 0 ;}
.process .order li:last-of-type { border-radius: 0 0 4.5rem 0 ;}

@media(max-width:1200px){
  .process .order { gap:1rem}
  .process .order li h3 { font-size: 2.1rem;}
}
@media(max-width:991px){
  .process .order { gap:2rem 0; flex-wrap:wrap;}
  .process .order li { flex:inherit; width: 48.5%;}
  .process .order li h3 { font-size: 2.4rem;}
}
@media(max-width:768px){
  .process .order { }
  .process .order li {  padding: 5.5rem 1rem; }
  .process .order li h3 { font-size: 2.4rem; background-size: auto 80px;}
}
@media(max-width:576px){
  .process .order li { padding: 5rem 1rem; }
  .process .order li h3 {  background-size: auto 70px;}
  .process .order li p { font-size: 1.7rem;}
}
@media(max-width:480px){
  .process .order { gap:1rem}
  .process .order li { width: 100%; padding: 4rem 1rem;}
  .process .order li:first-of-type { border-radius: 4.5rem 4.5rem 0 0 ;}
  .process .order li:last-of-type { border-radius: 0 0 4.5rem 4.5rem ;}
  .process .order li h3 { padding: 10rem 0 2rem; font-size: 2.2rem; background-size: auto 60px;}
}
.product { flex:1; display: flex; justify-content: space-between; flex-direction: column; position: relative; padding: 7rem 6rem 6.5rem; height: 74rem; background: no-repeat center / cover ; }
.product:before { content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); transition: 0.3s;}
.product:nth-of-type(1) { background-image: url(/img/sk/bg_main_prod1.png);}
.product:nth-of-type(2) { background-image: url(/img/sk/bg_main_prod2.png);}
.product:nth-of-type(3) { background-image: url(/img/sk/bg_main_prod3.png);}
.product .header2 { position: relative; z-index: 2;}
.product .header2 span { font-size: 3.2rem; font-weight: 500; color: var(--m-point-txt-color); line-height: 1; }
.product .header2 h3 { padding: 2.5rem 0 5rem; font-size: 2rem; color: #fff; line-height: 1;}
/* .product .list {  opacity:0; position: relative; z-index: 2; margin-top: 5rem; transition: 0.3s;} */
.product .list {  position: relative; z-index: 2; transition: 0.3s;}
.product .list li { margin-bottom: 3rem; font-size: 1.6rem; font-weight: 300; color: #fff; line-height: 1; }
.product .list li span { position: relative; padding-left: 1.2rem;}
.product .list li a { position: relative; padding-left: 1.2rem;}
.product .list li span:before { content:''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: .4rem; height: 0.4rem; border-radius: 50%; background: var(--m-point-txt-color); }
.product .list li a:before { content:''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: .4rem; height: 0.4rem; border-radius: 50%; background: var(--m-point-txt-color); }
.product .go  { display: flex; align-items: center; position: relative; padding: 0 3rem; width: 22rem; height: 5rem; font-size: 1.8rem;  color: #fff; background: transparent; border:1px solid #fff;  border-radius: 2.5rem; transition: 0.3s;}
.product .go i { display: flex; justify-content: center; align-items: center; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(255,255,255,.3); transition: 0.3s; }

.product:hover:before {  background: rgba(0,0,0,.3);}
.product:hover .list { opacity: 1; margin-top: 0;}
.product:hover .go  { background: var(--m-point-color); border-color:  var(--m-point-color);}
.product:hover .go i { animation:twins infinite 1s both }

@keyframes twins {
  0% { right:1.0rem }
  50% { right:2.2rem }
  100% { right:1.0rem }
}

@media(max-width:1250px){
  .product  { padding: 7rem 3rem 6rem;}
  .product .header2 span { font-size: 2.8rem;}
  .product .go { width: 20rem;}
}
@media(max-width:991px){
  .product  { padding: 7rem 2rem 6rem; height: 70rem;}
  .product .header2 span { font-size: 2.4rem;}
  .product .list { opacity: 1; margin-top: 0; }
  .product .go { padding: 0 2rem; width: 16rem;}
}
@media(max-width:768px){
  .products .flex { flex-direction: column;}
  .product  { padding: 5rem 4rem; height: auto;}
  .product .header2 span { font-size: 2.8rem;}
  .product .header2 h3 {padding: 2rem 0 4rem; }
  .product .list { opacity: 1; margin-top: 0; }
  .product .list li { margin-bottom: 2rem;}
  .product .go { display: none;}
  .product:nth-of-type(2n) { text-align: right;}
}
@media(max-width:576px){
  .product  { padding: 5rem 4rem; height: auto;}
  .product .header2 span { font-size: 3rem;}
  .product .header2 h3 {padding: 2rem 0 4rem; font-size: 2.4rem; }
}

.accessories a { flex:1; position: relative; padding: 1.3rem 0 ;}
.accessories a:before { opacity: 0; content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #dcdcdc; transition: 0.3s;}
.accessories a div {margin: 0 auto; width: 100%; max-width: 17.5rem; }
.accessories a h3 { position: relative; z-index: 2; padding-bottom: 100%;  width: 100%; border-radius: 50%; background: #fff no-repeat center 3rem ;}
.accessories a h3 span { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); width: 100%;  line-height: 1; text-align: center; font-size: 1.8rem; color: var(--m-txt-color1);  transition: 0.3s; }
.accessories a:nth-of-type(1) h3{ background-image: url(/img/sk/ico_accessories1.png);}
.accessories a:nth-of-type(2) h3{ background-image: url(/img/sk/ico_accessories2.png);}
.accessories a:nth-of-type(3) h3{ background-image: url(/img/sk/ico_accessories3.png);}
.accessories a:nth-of-type(4) h3{ background-image: url(/img/sk/ico_accessories4.png);}
.accessories a:nth-of-type(5) h3{ background-image: url(/img/sk/ico_accessories5.png);}
.accessories a:hover:before { opacity: 1;}
.accessories a:hover h3 span { bottom: 3rem;}

@media(max-width:991px){
  .accessories a { padding: 2rem 0;}
  .accessories a h3 { padding: 12rem 0 0; background-size: auto 66px;}
  .accessories a h3 span { display: block; position: static; transform: none;}
}
/* @media(max-width:768px){
  .accessories .flex { }
  .accessories a { padding: 2rem .5rem;}
  .accessories a h3 { background-size: auto 55px; background-position: center 2rem;}
  .accessories a h3 span { font-size: 1.7rem; bottom: 0rem;}
}
*/
@media(max-width:576px){
  .accessories .flex { flex-wrap:wrap }
  .accessories a {flex:auto; padding: 4rem 0; width: 33.33%;}
  .accessories a h3 { padding: 10rem 0 0; background-position: center 0;}
}

.company {padding: 7.3rem 1rem; background: url(/img/sk/bg_company.png) no-repeat center /cover; }
.company .logo { }
.company .txt {display: flex; justify-content: space-between; align-items: center; width: 63rem; border-left: 2px solid #fff;}
.company .txt p {padding-left: 2.5rem; font-size: 2rem; color: #fff; line-height: 1.5; }
.company .txt a { display: block; position: relative; padding: 1.05rem 2rem; width: 21.5rem; font-size: 1.8rem; color: #fff; ; border: 1px solid #fff;}
.company .txt a i { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); }
.company .txt a:hover i {animation: twins2 1s infinite both;}

@keyframes twins2 {
  0% { right:2.0rem }
  50% { right:3.2rem }
  100% { right:2.0rem }
}

@media (max-width:991px){
  .company .flex { gap:2.5rem}
  .company .txt {gap:3rem; width: auto;}
  .company .txt p { font-size: 1.8rem;}
  .company .txt a { padding: 1.05rem 1.5rem; width: 18rem; font-size: 1.7rem;}
  .company .txt a i { right: 1.5rem;}
}
@media (max-width:768px){
  .company { padding: 6rem 1rem; }
  .company .flex { flex-direction: column; align-items: center; gap:0}
  .company .txt { flex-direction: column; gap:0; width: 100%; border: 0; }
  .company .txt p { padding: 3rem 0; text-align: center; }
  .company .txt p br { display: none;}
  .company .txt a i { }
}

.video { background: var(--m-bg-color1) url(/img/sk/text_circle.png) no-repeat right 0 top 13rem }
.video .flex { position: relative; z-index: 2; gap:10rem }
.video .flex .img { width:50%; position: relative; text-align: center;}
.video .flex .img img { max-width:100%;}
.video .flex .img:after { content:''; opacity: 0; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,180,0,.25) url(/img/sk/ico_play.png) no-repeat center; transition: 0.3s; }
.video .flex .img:hover:after { opacity: 1;}
.video .flex .txt { display: flex; flex-direction: column; justify-content: center; gap:4rem; flex:1; }
.video .flex .txt h3 { font-size: 3.5rem; font-weight: 500; color: var(--m-txt-color1);}
.video .flex .txt p { font-size: 1.8rem; font-weight: 500; color: var(--m-txt-color2);}

@media(min-width:769px){
  .video .flex+.flex{ margin-top: 7rem;}
  .video .flex:nth-of-type(even) { flex-direction: row-reverse;}
  .video .flex:nth-of-type(even) .txt {  text-align: right;}
}

@media(max-width:1200px){
  .video .flex { gap:5rem}
  .video .flex .txt p br { display: none;}
}

@media(max-width:991px){
  .video .flex { gap:3rem}
  .video .flex .txt { gap: 2.5rem;}
  .video .flex .txt h3 { font-size: 2.8rem;}
  .video .flex .txt p { font-size: 1.6rem;}
  .video .flex .txt p br { display: none;}
}

@media(max-width:768px){
  .video {background-size: 60%;}
  .video .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap:2.5em 0}
  .video .flex { flex-direction: column; gap:0; width: 48%;}
  .video .flex .img { width: 100%; border: 1px solid #e1e1e1;}
  .video .flex .txt {gap:0;}
  .video .flex .txt h3 {padding: 3rem 0 2rem; text-align: center; font-size: 2.2rem;}
}
@media(max-width:480px){
  .video .flex { width: 100%;}
  .video .flex .txt p { font-size: 1.8rem;}
  .video .flex .txt h3 { text-align: center; font-size: 2.4rem;}
}

.contact { padding: 13rem 0; text-align: center; background: url(/img/sk/bg_contact.png) no-repeat center / cover; ;}
.contact p { padding: 0 0 3rem; font-size: 3.2rem; color: #fff }
.contact a { display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 30rem; height: 5.5rem; color: #fff; font-size: 1.8rem; border-radius: 2.75rem; background: var(--m-point-color);}

.contact a.view_mobile { display: none;}
@media(max-width:768px){  
  .contact a.view_mobile { display: flex; margin-top: 2rem; background: #205494;}
}