@charset "utf-8";

/* 공통 */
.doc-cnt:not(:last-child) {margin-bottom:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);}
.doc-cnt p {color:#454545;}
.doc-cnt p:not(:last-child) {margin-bottom:1em;}
.doc-bg {padding-top:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); padding-bottom:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); background:#f8f8f8;}

.doc-tit {margin-bottom:.7em; color:#242424; font-size:var(--font-size-34); line-height:1.24em; letter-spacing:-.02em;}

.table-style table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #808080; border-bottom:1px solid #868686; line-height:1.5em;}
.table-style table th {padding:clamp(8px, calc( 17 / var(--inner) * 100vw ), 17px); border:1px solid #ddd; border-top:0; background:#f8f8f8; font-weight:500; color:#242424;}
.table-style table td {padding:clamp(8px, calc( 17 / var(--inner) * 100vw ), 17px); border:1px solid #ddd; color:#454545; text-align:center;}
.table-style tr th:first-child,
.table-style tr td:first-child {border-left:0;}
.table-style tr th:last-child,
.table-style tr td:last-child {border-right:0;}

/* Company */
.company-1 {display:flex; align-items:center; gap:clamp( 30px, calc( 70 / var(--inner) * 100vw ), 70px);}
.company-1 .cnt {width:410px;}
.company-1 .img {flex:1 1 auto; min-width:0; width:1%;}
.company-1 .img img {border-radius:clamp( 24px, calc( 100 / var(--inner) * 100vw ), 100px) 0 clamp( 24px, calc( 100 / var(--inner) * 100vw ), 100px) 0;}
.company-1.reverse .cnt {width:400px;}
.company-1.reverse .img img {border-radius:0 clamp( 24px, calc( 100 / var(--inner) * 100vw ), 100px) 0 clamp( 24px, calc( 100 / var(--inner) * 100vw ), 100px);}

.company-2 {padding-top:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); padding-bottom:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); background:url('../images/sub/company-2.jpg') 50% 50%/cover no-repeat; text-align:center;}
.company-2 p {font-size:var(--font-size-18);}

/* Innovation */
.innovation-1 {margin-top:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px);}
.innovation-1 .txt {margin:clamp(24px, calc( 50 / var(--inner) * 100vw ), 55px) 0; font-size:var(--font-size-20); font-weight:500; line-height:1.65em;}
.innovation-1 .txt p {color:#242424;}
.innovation-1 .imgs {display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px);}

.innovation-2 {display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); margin-top:clamp(24px, calc( 50 / var(--inner) * 100vw ), 55px); text-align:center;}
.innovation-2 .item {position:relative; overflow:hidden; padding:40px 24px; border-radius:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size:clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight:500; line-height:1.56em;}
.innovation-2 .item .num {position:absolute; top:-.15em; right:-.1em; font-size:clamp(70px, calc( 150 / var(--inner) * 100vw ), 150px); font-weight:800; line-height:1em; color:rgba(255,255,255,.1);}
.innovation-2 .item .ico {position:relative; display:flex; justify-content:center; align-items:center; width:clamp(100px, calc( 120 / var(--inner) * 100vw ), 120px); height:clamp(100px, calc( 120 / var(--inner) * 100vw ), 120px); margin:0 auto 1rem; background:#fff; border-radius:100%; box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.1);}
.innovation-2 .item .ico img {width:54%; max-width:64px;}
.innovation-2 .item p {position:relative; color:#fff;}
.innovation-2 .item.st-1 {background:#1a56a7;}
.innovation-2 .item.st-2 {background:#ecc663;}
.innovation-2 .item.st-3 {background:#01ae6e;}

.innovation-3 {display:grid; gap:clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.innovation-3 .item {display:flex; gap:clamp(20px, calc( 75 / var(--inner) * 100vw ), 75px);}
.innovation-3 .item:nth-child(even) {flex-direction:row-reverse;}
.innovation-3 .img {width:48.5%; max-width:580px;}
.innovation-3 .img img {width:100%; border-radius:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px) 0 clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px) 0;}
.innovation-3 .cnt {display:flex; flex-direction:column; justify-content:center; flex:1 1 auto; min-width:0; width:1%;}
.innovation-3 .cnt h2 {margin-bottom:.8em;}
.innovation-3 .cnt p {line-height:1.65em;}
.innovation-3 .cnt p:not(:last-child) {margin-bottom:1em;}

/* Products */
.product-1 .slider {position:relative; padding:0 155px; margin-bottom:clamp(20px, calc( 45 / var(--inner) * 100vw ), 45px);;}
.product-1 .slide-btn {position:absolute; top:50%; -webkit-transform:translateY(-50%); transform:translateY(-50%); display:inline-flex; align-items:center; gap:10px; color:#505050; font-size:var(--font-size-17); font-weight:500; line-height:1.5em; cursor:pointer;}
.product-1 .slide-btn .arrow {display:inline-flex; align-items:center; position:relative; height:40px;}
.product-1 .slide-btn .arrow:before {content:''; position:absolute; top:0; width:40px; height:40px; border:1px solid #ddd; border-radius:100%; transition:.2s;}
.product-1 .slide-btn .arrow svg {position:relative;}
.product-1 .slide-btn:hover .arrow:before {background:var(--color-secondary); border-color:var(--color-secondary); box-shadow:0px 3px 2.91px 0.09px rgba(0, 0, 0, 0.1);}
.product-1 .slide-btn:hover .arrow path {fill:#fbf4e0;}
.product-1 .slide-btn.prev {left:0;}
.product-1 .slide-btn.prev .arrow {padding-left:15px;}
.product-1 .slide-btn.prev .arrow:before {left:0;}
.product-1 .slide-btn.next {right:0;}
.product-1 .slide-btn.next .arrow {padding-right:15px;}
.product-1 .slide-btn.next .arrow:before {right:0;}
.product-1 .slide-btn.next .txt {margin-top:.2em;}
.product-1 .cnt {text-align:center;}
.product-1 .cnt .tit {margin-bottom:.8em; color:#242424; font-size:var(--font-size-24); line-height:1.33em; letter-spacing:-.02em;}
.product-1 .cnt .tit strong {font-weight:600;}
.product-1 .cnt .txt {line-height:1.63em;}

.product-2 h2 {display:flex; align-items:center; gap:40px; margin-bottom:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); color:#242424; font-size:var(--font-size-34); font-weight:600; line-height:1.33em; letter-spacing:-.02em;}
.product-2 h2 em {display:inline-block; font-style:normal; color:var(--color-third);}
.product-2 h2:after {content:''; flex:1 1 auto; min-width:0; width:1%; height:1px; background:#dfdfdf;}
.product-2 .items {display:grid; gap:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);}
.product-2 .item {display:flex; position:relative; min-height:380px;}
.product-2 .item .img {width:50%; order:2;}
.product-2 .item .img img {display:block; width:100%; height:100%; object-fit:cover;}
.product-2 .item .cnt {display:flex; flex-direction:column; justify-content:center; width:50%; padding:clamp(16px, calc( 70 / var(--inner) * 100vw ), 70px);}
.product-2 .item .cnt h3 {margin-bottom:1em; color:#fff; font-size:var(--font-size-24); font-weight:600; line-height:1.33em; letter-spacing:-.02em;}
.product-2 .item .cnt p {color:#fff; font-weight:300; line-height:1.63em;}
.product-2 .item .cnt span {display:inline-block;}
.product-2 .item.st-1 {background:var(--color-primary);}
.product-2 .item.st-1 .cnt {padding-right:clamp(16px, calc( 100 / var(--inner) * 100vw ), 100px);}
.product-2 .item.st-2 {background:var(--color-secondary);}
.product-2 .item.st-2 .img {position:absolute; top:0; left:0; width:100%; height:100%;}
.product-2 .item.st-2 .cnt {position:relative; margin-left:50%; padding-left:clamp(16px, calc( 100 / var(--inner) * 100vw ), 100px); padding-right:clamp(16px, calc( 120 / var(--inner) * 100vw ), 120px);}
.product-2 .item.st-3 {background:var(--color-third);}
.product-2 .item.st-3 .cnt {padding-right:clamp(16px, calc( 100 / var(--inner) * 100vw ), 100px);}

.product-3 {margin-top:clamp(30px, calc( 75 / var(--inner) * 100vw ), 75px);}
.product-3 h3 {position:relative; padding-left:22px; margin-bottom:1em; color:#242424; font-size:var(--font-size-24); font-weight:600; line-height:1.33em; letter-spacing:-.02em;}
.product-3 h3:before {content:''; position:absolute; top:.25em; bottom:.25em; left:0; width:clamp(4px, calc( 8 / var(--inner) * 100vw ), 8px); background:var(--color-secondary);}
.product-3 p {line-height:1.63em;}
.product-3 .indent {padding-left:22px;}
.product-3 .gray {color:#808080;}

.film-box {padding:clamp(5px, calc( 30 / var(--inner) * 100vw ), 30px); border:1px solid #ddd; text-align:center;}

.film-test {padding:clamp(10px, calc( 50 / var(--inner) * 100vw ), 50px); background:#fafafa; text-align:center;}

/* Applications */
.applications .top-txt {position:relative; padding-left:28px; margin-bottom:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px); color:#242424; font-size:var(--font-size-30); line-height:1.33em; letter-spacing:-.02em;}
.applications .top-txt:before {content:''; position:absolute; top:.15em; bottom:.15em; left:0; width:clamp(4px, calc( 8 / var(--inner) * 100vw ), 8px); background:var(--color-secondary);}
.applications .items {display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px);}
.applications .item {position:relative; text-align:center;}
.applications .item:after {content:''; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd; pointer-events:none;}
.applications .item p {position:absolute; bottom:36px; right:40px; color:#454545; font-size:var(--font-size-24); font-weight:700; line-height:1.3em; text-align:right;}
.applications .item p:after {content:''; position:absolute; top:-2px; right:-10px; width:6px; height:6px; background:var(--color-third); border-radius:100%;}

/* UK Training Center */
.center-hero {margin-bottom:30px; text-align:center;}
.center-hero .img {margin-bottom:clamp(25px, calc( 45 / var(--inner) * 100vw ), 45px);}
.center-hero .txt {margin-bottom:15px;}
.center-hero .txt h2 {margin-bottom:10px; color:#333; font-size:var(--font-size-24); font-weight:600; line-height:1.33em; letter-spacing:-.02em;}
.center-hero .txt p {color:#454545; line-height:1.63em;}
.center-hero .btn {display:inline-flex; justify-content:center; align-items:center; gap:15px; width:130px; height:50px; padding:10px; background:var(--color-primary); color:#fff; font-weight:700; line-height:1.5em;}
.center-hero .btn:after {content:''; width:8px; height:14px; background:url('/images/sub/arrow-right.png') 50% 50%/contain no-repeat;}
.center-hero .btn:hover {background:#0e3974;}

.center-room {margin-bottom:clamp(60px, calc( 100 / var(--inner) * 100vw ), 100px);}
.center-room h2 {margin-bottom:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); display:flex; align-items:center; gap:10px; color:#242424; font-size:var(--font-size-34); font-weight:600; line-height:1.24em; letter-spacing:-.02em;}
.center-room h2:after {content:''; flex:1 1 auto; min-width:0; width:1%; height:1px; background:#ddd; margin-top:.2em;}
.center-room .cont-wrap {display:flex; gap:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);}
.center-room .cont-wrap .img {width:50%;}
.center-room .cont-wrap .cnt {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column; justify-content:center; color:#454545; line-height:1.63em; letter-spacing:0;}
.center-room .cont-wrap .cnt h3 {margin-bottom:15px; color:#333; font-size:var(--font-size-24); font-weight:600; line-height:1.33em; letter-spacing:-.02em;}
.center-room .cont-wrap .cnt ul {margin-bottom:1.5em; display:flex; flex-direction:column; gap:1.2em;}
.center-room .cont-wrap .cnt ul li {position:relative; padding-left:.7em;}
.center-room .cont-wrap .cnt ul li:before {content:'-'; position:absolute; top:0; left:0;}
.center-room .cont-wrap .cnt ul li strong {font-weight: 600; display:inline-block;}

.center-service  {color:#454545; line-height:1.63em;}
.center-service .head {margin-bottom:clamp(20px, calc(35 / var(--inner) * 100vw ), 35px);}
.center-service .head h2 {margin-bottom:10px; color:#242424; font-size:var(--font-size-34); font-weight:600; line-height:1.24em; letter-spacing:-.02em;}
.center-service .cont:not(:last-child) {margin-bottom:clamp(60px, calc(90 / var(--inner) * 100vw ), 90px);}
.center-service .cont h3 {margin-bottom:20px; color:#333; font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight:600; line-height:1.24em; letter-spacing:-.02em;}
.center-service .serv {margin-top:clamp(30px, calc(40 / var(--inner) * 100vw ), 40px); display:flex; justify-content:space-between; gap:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.center-service .serv .item {width:100%; max-width:320px;}
.center-service .serv .item h4 {display:flex; align-items:center; gap:10px; margin-bottom:12px; color:#333; font-size:var(--font-size-20); font-weight:600; line-height:1.3em; letter-spacing:-.02em;}
.center-service .serv .item h4 img {min-width:34px;}
.center-service .serv .item ul li {position:relative; padding-left:24px;}
.center-service .serv .item ul li:before {content:''; position:absolute; top:.3em; left:0; width:14px; height:14px; background:url('/images/sub/check.png') 50% 50%/contain no-repeat;}

.center-service .curr {position:relative; border:1px solid #ecc663; border-radius:0 0 clamp(20px, calc(40 / var(--inner) * 100vw ), 40px) clamp(20px, calc(40 / var(--inner) * 100vw ), 40px); overflow:hidden;}
.center-service .curr:not(:last-child) {margin-bottom:clamp(15px, calc(30 / var(--inner) * 100vw ), 30px);}
.center-service .curr .num {position:absolute; bottom:-.2em; left:-.1em; color:#fefcf7; font-size:9rem; font-weight:800; line-height:1em; z-index:-1;}
.center-service .curr .tit {padding:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) clamp(15px, calc(50 / var(--inner) * 100vw ), 50px);  background:#ecc663;}
.center-service .curr .tit h4 {display:flex; flex-wrap:wrap; gap:0 10px; color:#fff; font-size:var(--font-size-24); font-weight:600; line-height:1.33em; letter-spacing:-.02em;}
.center-service .curr .tit .time {width:clamp(120px, calc(180 / var(--inner) * 100vw ), 180px);}
.center-service .curr .cnt {padding:clamp(15px, calc(50 / var(--inner) * 100vw ), 40px) clamp(15px, calc(50 / var(--inner) * 100vw ), 50px); margin-left:clamp(130px, calc(190 / var(--inner) * 100vw ), 190px); color:#454545; line-height:1.63em; font-size:clamp(16px, calc(20 / var(--inner) * 100vw ), 20px);}
.center-service .curr .cnt ul li {padding-left:.6em; text-indent:-.6em;}

.center-service .curr.st2 {border-color:#01ae6e;}
.center-service .curr.st2 .tit {background:#01ae6e;}
.center-service .curr.st2 .num {color:#f2fbf8;}
.center-service .curr.st3 {border-color:#1a56a7;}
.center-service .curr.st3 .tit {background:#1a56a7;}
.center-service .curr.st3 .num {color:#f3f6fb;}

.center-service  .tech-serv {margin-left:clamp(24px, calc(32 / var(--inner) * 100vw ), 32px); color:#454545; font-size:clamp(16px, calc(20 / var(--inner) * 100vw ), 20px); line-height:1.55em;}
.center-service  .tech-serv p {margin-bottom:1.2em;}
.center-service  .tech-serv strong {color:#333;}
.center-service  .tech-serv dl {display:flex; gap:4px; margin-top:5px;}
.center-service  .tech-serv dt {color:#333; font-weight:700;}
.center-service  .tech-serv dd {flex:1;}
.center-service  .tech-serv .head {margin-bottom:clamp(20px, calc(35 / var(--inner) * 100vw ), 35px);}
.center-service  .tech-serv .head h2 {margin-bottom:10px; color:#242424; font-size:var(--font-size-34); font-weight:600; line-height:1.24em; letter-spacing:-.02em;}
.center-service  .tech-serv .head h2:after {content:''; flex:1 1 auto; min-width:0; width:1%; height:1px; background:#ddd; margin-top:.2em;}
.center-service  .tech-serv .cont {display:flex; gap:clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);}
.center-service  .tech-serv .cont .img {width:50%;}
.center-service  .tech-serv .cont .cnt {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column; justify-content:center; color:#454545; line-height:1.63em; letter-spacing:0;}