/* default */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&family=Song+Myung&display=swap');

:root {
    /* point color */
    --point-color-1: #DFBF8A;
    --point-color-2: #C1A069;
    --point-color-3: #645031;
    --point-color-4: #8F8067;
    --point-color-5: #9C7433;
    /* fonts */
    --body-font: 'Noto Sans KR';
    --entype1: 'Song Myung';
    --entype2: 'Montserrat';
}
/* removed empty rule */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
body,th,td,input,select,textarea,button {line-height:1.7;font-family:var(--body-font), Arial, Helvetica, serif , sans-serif;color:#272727}
body {font-size:10px}
body,body * {box-sizing:border-box;}
/* Prevent any horizontal scroll on the page */
html, body { max-width: 100%; overflow-x: hidden; font-size: clamp(10px, 0.925vmin, 14.81px);}
/* 반응형쿼리 부문 */
@media only screen and (min-device-width: 300px) {
    html {
        font-size: 9px;
    } /* 62.5% */
}

a {text-decoration: none; }

body {
	font-size:1.8rem;
	color: #fff;
	background: #181818;
	line-height:1.7;
	overflow-x: hidden; /* prevent horizontal scrollbar */
	overflow-y: auto;
	height:100%;
	-moz-osx-font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-ms-overflow-style: none;
    word-break: keep-all;
}
html.not-scroll,
body.not-scroll {overflow: hidden;}

@media (min-width: 701px) {
    html, body {scroll-snap-type: y mandatory;}
    [data-scroll-section] {scroll-snap-align: start; scroll-snap-stop: always;}
}

/* input type number 요소의 스핀버튼 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* gnb start */
.header {transition: max-width .3s ease, width .3s ease; position: fixed; top: 0; left: 0; z-index: 101; width: 100%; max-width: 8rem; height: 100vh; background: linear-gradient(#0f0f0f 0 8rem, #181818 8rem 100%); box-shadow: 6px 0 15px rgba(0, 0, 0, 0.3); overflow-y: auto;}
.header .hd_inner {width: 100%; max-width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; overflow: hidden;}
.header .hd_inner .hd_area1 {width: 100%; display: flex; flex-direction: column; align-items: center;}
.header .hd_inner .hd_area1 .hd_logo {width: 4rem; height: 8rem; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; transition: width .3s ease, height .3s ease; cursor: pointer;}
.header .hd_inner .hd_area1 .hd_logo img {display: block; width: 30px; height: 30px; object-fit: contain; transition: opacity .1s ease;}
.header .hd_inner .hd_area1 .hd_logo::before {content: ''; position: absolute; inset: 0; background: url('/assets/front/images/logo.svg') no-repeat 3px center; opacity: 1; max-width: 28.5rem; margin: 0 auto; transition: opacity .3s ease; pointer-events: none;}
.header .hd_inner .hd_area1 .hd_logo::after {content: ''; position: absolute; inset: 0; background: url('/assets/front/images/logo.svg') no-repeat 0 center; opacity: 0; max-width: 29.5rem; margin: 0 auto; transition: opacity .3s ease; pointer-events: none;}
.header .hd_inner .hd_area1 .hd_mbt {width: 8rem; height: 8rem; display: flex; justify-content: center; align-items: center;}
.header .hd_inner .hd_area1 .hd_mbt .sidebar-btn {width: 24px; height: 24px; padding: 0; border: none; background: transparent; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; cursor: pointer;}
.header .hd_inner .hd_area1 .hd_mbt .sidebar-btn span {display: block; height: 2px; background: #fff; border-radius: 2px;}
.header .hd_inner .hd_area1 .hd_mbt .sidebar-btn span:nth-child(1) {width: 24px;}
.header .hd_inner .hd_area1 .hd_mbt .sidebar-btn span:nth-child(2) {width: 18px;}
.header .hd_inner .hd_area1 .hd_mbt .sidebar-btn span:nth-child(3) {width: 24px;}
.header .hd_inner .hd_area1 nav {display: none; opacity: 0; visibility: hidden; transition: opacity .25s ease; transform: translateY(16px);}
.header .hd_inner .hd_area1 nav ul li {opacity: 0; transform: translateY(16px);}
.header .hd_inner .hd_area2 {display: flex; flex-direction: column; align-items: center;}
.header .hd_inner .hd_area2 .gnb_bt {display: flex; align-items: center; justify-content: center; width: 100%; height: 8rem; transition: width .3s ease, height .3s ease;}
.header .hd_inner .hd_area2 .gnb_bt .hd_btimg {width: 8rem; height: 8rem; display: flex; justify-content: center; align-items: center; transition: color .25s ease; filter: brightness(0) invert(1);}
.header .hd_inner .hd_area2>a span {max-width: 0; height: 8rem; overflow: hidden; color: #fff; display: flex; align-items: center; opacity: 0; transform: translateX(-8px); transition: max-width .3s ease, opacity .25s ease, transform .3s ease; white-space: nowrap; min-width: 0;}
.header .hd_inner .hd_area2 .gnb_bt:hover span {color: var(--point-color-1);}
.is-subpage .header .hd_area2 .gnb_bt[data-scroll="prev"],
.is-subpage .header .hd_area2 .gnb_bt[data-scroll="next"] {display: none !important;}

.header:hover {max-width: 312px; box-shadow: 6px 0 15px rgba(0, 0, 0, 0.3);}
.header:hover .hd_inner .hd_area1 .hd_logo {width: 100%; height: 8rem;}
.header:hover .hd_inner .hd_area1 .hd_logo img {opacity: 0;}
.header:hover .hd_inner .hd_area1 .hd_logo::before {opacity: 0;}
.header:hover .hd_inner .hd_area1 .hd_logo::after {opacity: 1;}
.header:hover .hd_inner .hd_area1 .hd_mbt {display: none;}
.header:hover .hd_inner .hd_area1 nav {width: 100%; display: flex; opacity: 1; visibility: visible; justify-content: flex-start; flex-direction: column; padding: 2.8rem; transform: translateY(0);}
.header:hover .hd_inner .hd_area1 nav ul {display: flex; flex-direction: column; gap: 2.4rem;}
.header:hover .hd_inner .hd_area1 nav ul li {animation: nav-slide-up .35s ease forwards;}
.header:hover .hd_inner .hd_area1 nav ul li:nth-child(2) {animation-delay: .05s;}
.header:hover .hd_inner .hd_area1 nav ul li:nth-child(3) {animation-delay: .1s;}
.header:hover .hd_inner .hd_area1 nav ul li:nth-child(4) {animation-delay: .15s;}
.header:hover .hd_inner .hd_area1 nav ul li:nth-child(5) {animation-delay: .2s;}
.header:hover .hd_inner .hd_area1 nav ul li:nth-child(6) {animation-delay: .25s;}
.header:hover .hd_inner .hd_area1 nav ul li:nth-child(7) {animation-delay: .3s;}
.header:hover .hd_inner .hd_area1 nav ul li:nth-child(8) {animation-delay: .35s;}
.header:hover .hd_inner .hd_area1 nav ul li a {font-size: 1.8rem; color: #fff; transition: color .25s ease;}
.header:hover .hd_inner .hd_area1 nav ul li a:hover {color: var(--point-color-1);}
.header .hd_inner .hd_area1 nav ul li a {position: relative; display: inline-block;}
.header .hd_inner .hd_area1 nav ul li a::after {content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: var(--point-color-1); transform: scaleX(0); transform-origin: left center; transition: transform .3s ease;}
.header .hd_inner .hd_area1 nav ul li a:hover::after {transform: scaleX(1);}
.header:hover .hd_inner .hd_area2 {width: 100%;}
.header:hover .hd_inner .hd_area2>a span {max-width: 30rem; opacity: 1; transform: translateX(0);}
.header:hover .hd_inner .hd_area2 .gnb_bt {width: 100%; display: flex; justify-content: flex-start; align-items: center;}
.header:hover .hd_inner .hd_area2 .gnb_bt .hd_btimg {width: 10rem; filter: none;}
.gnbmob {display: none;}

@keyframes nav-slide-up {
    0% {opacity: 0; transform: translateY(16px);}
    100% {opacity: 1; transform: translateY(0);}
}

@media (max-width: 800px) {
    .gnbpc {display: none;}
    .gnbmob {display: block;}
    .headerm {width: 100%; height: 8rem; position: fixed; top: 0; left: 0; z-index: 101; background: #181818;}
    .headerm .hdm_inner {position: relative; display: flex; justify-content: space-between; align-items: center;}
    .headerm .hdm_inner .hdm_mbt {width: 8rem; height: 8rem; display: flex; justify-content: center; align-items: center;}
    .headerm .hdm_inner .hdm_mbt .sidebar-btn {position: relative; width: 24px; height: 24px; padding: 0; border: none; background: transparent; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; cursor: pointer;}
    .headerm .hdm_inner .hdm_mbt .sidebar-btn span {display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .28s ease, opacity .28s ease, width .28s ease;}
    .headerm .hdm_inner .hdm_mbt .sidebar-btn span:nth-child(1) {width: 24px;}
    .headerm .hdm_inner .hdm_mbt .sidebar-btn span:nth-child(2) {width: 18px;}
    .headerm .hdm_inner .hdm_mbt .sidebar-btn span:nth-child(3) {width: 24px;}
    .headerm .hdm_inner .hdm_mbt .sidebar-btn.is-open span:nth-child(1) {transform: translateY(8px) rotate(45deg);}
    .headerm .hdm_inner .hdm_mbt .sidebar-btn.is-open span:nth-child(2) {opacity: 0; width: 0;}
    .headerm .hdm_inner .hdm_mbt .sidebar-btn.is-open span:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}
    .headerm .hdm_inner .hdm_logo {width: 16.1rem; display: flex; justify-content: center; align-items: center; cursor: pointer;}
    .headerm .hdm_inner .hdm_logo img {width: 100%;}
    .headerm .hdm_inner .hdm_mbt2 {width: 8rem; height: 8rem;}
    .headerm .hdm_inner .hdm_mbt2 a {width: 8rem; height: 8rem; display: flex; justify-content: center; align-items: center;}
    .headerm .hdm_inner .hdm_mbt2 a img {width: 2.8rem;}
    .headerm .hdm_inner .hdm_sidebar {position: absolute; left: 0; top: 8rem; z-index: 110; overflow-y: auto; width: 100%; max-width: 28.5rem; height: calc(100vh - 8rem); display: flex; flex-direction: column; justify-content: space-between; background: rgba(0, 0, 0, 0.9); transform: translateX(-105%); opacity: 0; pointer-events: none; transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease;}
    .headerm.is-open .hdm_inner .hdm_sidebar {transform: translateX(0); opacity: 1; pointer-events: auto; box-shadow: 4px 0 18px rgba(0,0,0,0.35);}
    .headerm .hdm_inner .hdm_sidebar nav {width: 100%; display: flex; opacity: 1; visibility: visible; justify-content: flex-start; flex-direction: column; padding: 2.8rem;}
    .headerm .hdm_inner .hdm_sidebar nav ul {display: flex; flex-direction: column; gap: 2.4rem;}    
    .headerm .hdm_inner .hdm_sidebar nav ul li a {font-size: 2rem; color: #fff;}
    .headerm .hdm_inner .hdm_sidebar .hdm_btns {width: 100%; display: flex; justify-content: center; align-items: flex-start; flex-direction: column;}
    .headerm .hdm_inner .hdm_sidebar .hdm_btns .gnb_bt {width: 100%; display: flex; justify-content: flex-start; align-items: center;}
    .headerm .hdm_inner .hdm_sidebar .hdm_btns .gnb_bt .hd_btimg {width: 14rem; height: 8rem; display: flex; justify-content: center; align-items: center;}
    .headerm .hdm_inner .hdm_sidebar .hdm_btns .gnb_bt span {width: 100%; height: 8rem; color: #fff; display: flex; align-items: center;}
}
/* gnb End */


/* main view */
.ar_mview {width: 100%; height: 100vh; position: relative; overflow: hidden;}
.ar_mview .ar_mview_video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.ar_mview .ar_mview_video--mo {display: none;}
.ar_mview .ar_mtxt {position: absolute; top: 50%; left: 40%; transform: translate(-60%, -50%); color: #fff; z-index: 2; max-width: 50rem; width: 100%; padding: 0 6rem;}
.ar_mview .ar_mtxt img {width: 100%; margin-bottom: 2rem; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));}
.ar_mview .ar_mtxt p {font-size: 3rem; font-weight: 500; line-height: 150%; word-break: keep-all; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);}
.ar_mview .ar_mtxt [data-animate] {opacity: 0; transform: translateX(32px);}
.ar_mview .ar_mtxt [data-animate].in-view {animation: mtxt-slide-in 0.9s ease-out forwards; animation-delay: var(--delay, 0s);}
.ar_mview .ar_mscr {position: absolute; bottom: 2rem; left: 50%; transform: translate(-50%, 0); color: #fff; z-index: 2; max-width: 8.4rem; text-align: center;}
.ar_mview .ar_mscr span {font-size: 1.2rem; display: block; margin-bottom: 1rem;}
.ar_mview .ar_mscr .ar_mscr_line {width: 1.7rem; margin: 0 auto;}
.ar_mview .ar_mscr .ar_mscr_line img {width: 100%; animation: scroll-line-fade 1.8s ease-in-out infinite;}

@keyframes mtxt-slide-in {
    0% {opacity: 0; transform: translateX(32px);}
    100% {opacity: 1; transform: translateX(0);}
}

@keyframes scroll-line-fade {
    0% {opacity: 0; transform: translateY(-12px);}
    35% {opacity: 1; transform: translateY(0);}
    70% {opacity: 0; transform: translateY(12px);}
    100% {opacity: 0; transform: translateY(12px);}
}

@media (max-width: 800px) {
    .ar_mview .ar_mview_video--pc {display: none;}
    .ar_mview .ar_mview_video--mo {display: block;}
}

@media (max-width: 700px) {
    .ar_mview .ar_mtxt {left: 50%; transform: translate(-50%, -50%);}
}

/* common css */
.mtitle1 {width: 100%; color: var(--point-color-2);}
.mtitle1 p {font-size: 5rem; font-weight: 300; line-height: 120%; margin-bottom: 1.5rem;}
.mtitle1 span {font-size: 1.8rem; font-weight: 300; line-height: 140%; color: var(--point-color-4);}
.mtitle1 [data-title-animate] {opacity: 0; transform: translateX(32px); transition: transform .8s ease, opacity .8s ease; transition-delay: var(--title-delay, 0s);}
.mtitle1.in-view [data-title-animate] {opacity: 1; transform: translateX(0);}
.ar_mbt_area {display: flex; justify-content: center; align-items: center; gap: 4rem;}
.ar_mbt_area a {position: relative; overflow: hidden; width: 22rem; height: 5rem; font-size: 2rem; font-weight: 500; display: flex; justify-content: center; align-items: center; gap: 1.4rem; color: #fff; background-color: var(--point-color-3); transition: color .35s ease;}
.ar_mbt_area a::before {content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left center; transform: scaleX(0); transition: transform .4s ease;}
.ar_mbt_area a:hover {color: var(--point-color-3);}
.ar_mbt_area a:hover::before {transform: scaleX(1);}
.ar_mbt_area a > * {position: relative; z-index: 1;}
.ar_mbt_area img {width: 1.2rem; transform: rotate(90deg); transition: filter .35s ease;}
.ar_mbt_area a:hover img {filter: brightness(0) saturate(100%) invert(30%) sepia(15%) saturate(1200%) hue-rotate(350deg) brightness(95%) contrast(90%);}

@media (max-width: 700px) {
   .mtitle1 p {font-size: 4rem;}
}

/* step01 */
.ar_step01wp {width: 100%; height: 100vh; background: #181818; padding-left: 8rem; display: flex; justify-content: center; align-items: center;}
.ar_step01wp .ar_s01in {width: 100%; max-width: 1680px; display: flex; flex-direction: column; gap: 12rem; margin: 0 4rem;}
.ar_step01wp .ar_s01in .ar_s01con {width: 100%; display: flex; justify-content: space-between; gap: 4rem; color: var(--point-color-2);}
.ar_step01wp .ar_s01in .ar_s01con .ar_s01c_a {display: grid; grid-template-columns: repeat(2, 1fr); gap: 12rem;}
.ar_step01wp .ar_s01in .ar_s01con>div {}
.ar_step01wp .ar_s01in .ar_s01con>div p {font-size: 3rem; font-weight: 300;}
.ar_step01wp .ar_s01in .ar_s01con>div span {display: flex; align-items: flex-end; gap: 1rem;}
.ar_step01wp .ar_s01in .ar_s01con>div span b {font-size: 6rem; font-weight: 300; line-height: 110%; color: #fff;}
.ar_step01wp .ar_s01in .ar_s01con>div span i {font-size: 3rem; font-weight: 300; line-height: 140%; color: #fff;}
.ar_step01wp .ar_s01in .ar_s01con .ar_s01c_line {width: 1px; background-color: #493c27; align-self: stretch; height: auto;}
.ar_step01wp .ar_s01in .ar_s01con .ar_s01c_b {display: grid; grid-template-columns: repeat(1, 1fr); gap: 12rem;}

@media (max-width: 1460px) {
    .ar_step01wp {height: auto; padding: 12rem 4rem 12rem 8rem;}
    .ar_step01wp .ar_s01in .ar_s01con .ar_s01c_a {grid-template-columns: repeat(1, 1fr);}
}
@media (max-width: 820px) {
    .ar_step01wp {padding: 12rem 4rem 12rem 12rem;}
    .ar_step01wp .ar_s01in {gap: 6rem;}
    .ar_step01wp .ar_s01in .ar_s01con {flex-direction: column;}
    .ar_step01wp .ar_s01in .ar_s01con .ar_s01c_a {gap: 4rem;}
    .ar_step01wp .ar_s01in .ar_s01con .ar_s01c_line {width: 100%; height: 1px;}
    .ar_step01wp .ar_s01in .ar_s01con .ar_s01c_b {gap: 4rem;}
    .ar_step01wp .ar_s01in .ar_s01con>div span b {font-size: 4rem;}
    .ar_step01wp .ar_s01in .ar_s01con>div span i {font-size: 2rem;}
}
@media (max-width: 700px) {
    .ar_step01wp {padding: 12rem 4rem 12rem 4rem;}
    .ar_step01wp .ar_s01in {margin: 0;}
}

/* step02 */
.ar_step02wp {width: 100%; height: 100vh; background: #181818; padding-left: 8rem; display: flex; justify-content: center; align-items: center;}
.ar_step02wp .ar_s02in {width: 100%; max-width: 1680px; display: flex; flex-direction: column; gap: 12rem; margin: 0 4rem;}
.ar_step02wp .ar_s02in .ar_s02con {display: flex; justify-content: space-between; align-items: center; gap: 3rem;}
.ar_step02wp .ar_s02in .ar_s02con .ar_s02ctap {width: 100%; max-width: 272px; display: flex; flex-direction: column; align-items: center; gap: 2rem;}
.ar_step02wp .ar_s02in .ar_s02con .ar_s02ctap .ar_s02_bx {display: flex; flex-direction: column; align-items: center; gap: 2rem;}
.ar_step02wp .ar_s02in .ar_s02con .ar_s02ctap .ar_s02_bx img {width: 50%; max-width: 50%; height: auto; object-fit: contain;}
.ar_step02wp .ar_s02in .ar_s02con .ar_s02ctap .ar_s02_bx b {font-size: 2.2rem; font-weight: 300; line-height: 140%;}
.ar_step02wp .ar_s02in .ar_s02con .ar_s02ctap>div {width: 100%; max-width: 272px; aspect-ratio: 1 / 1; height: auto; border: 8px solid var(--point-color-2); background: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 4rem; font-weight: 500; color: var(--point-color-2);}
.ar_step02wp .ar_s02in .ar_s02con .ar_s02ctap p {font-size: 3rem; font-weight: 400; line-height: 140%; color: var(--point-color-2); word-break: keep-all;}
.ar_step02wp .ar_s02in .ar_s02con .sr_s02line {width: 100%; max-width: 240px; min-width: 50px; flex: 1 1 240px; height: 1px; background: var(--point-color-2); margin-bottom: 6rem;}
.ar_s03con_bt {width: 100%; display: flex; justify-content: space-between; gap: 2rem;}
.ar_s03con_bt a {display: flex; justify-content: center; align-items: center; border: 1px solid var(--point-color-2); background-color: #181818; color: var(--point-color-2); font-size: 2.2rem; font-weight: 300; line-height: 100%; padding: 1.4rem 6rem; cursor: pointer; text-align: center;}
.ar_s03con_bt a:hover {background-color: var(--point-color-2); color: #181818;}

@media (max-width: 1803px) {
    .ar_s03con_bt a {padding: 1.4rem 2rem;}
}
@media (max-width: 1080px) {
    .ar_step03wp .ar_s03in .ar_s03con {flex-direction: column; align-items: flex-start!important; gap: 3rem;}
    .m_lte {transform: rotate(90deg); margin: 0 2rem;}
}
@media (max-width: 1000px) {
    .ar_step02wp {height: auto; padding: 12rem 4rem 12rem 12rem;}
    .ar_step02wp .ar_s02in {margin: 0;}
    .ar_step02wp .ar_s02in .ar_s02con {flex-direction: column;}
    .ar_step02wp .ar_s02in .ar_s02con .ar_s02ctap {max-width: 100%;}
    .ar_step02wp .ar_s02in .ar_s02con .ar_s02ctap>div {width: 100%; max-width: 100%; aspect-ratio: auto; height: auto; padding: 4rem 0; border-radius: 14rem;}
    .ar_step02wp .ar_s02in .ar_s02con .ar_s02ctap .ar_s02_bx {max-width: 100%; border: 2px solid var(--point-color-2);}
    .ar_step02wp .ar_s02in .ar_s02con .ar_s02ctap .ar_s02_bx img {width: 100%; max-width: 10rem;}
    .ar_step02wp .ar_s02in .ar_s02con .sr_s02line {display: none;}
    .ar_s03con_bt {overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 1rem;}
    .ar_s03con_bt::-webkit-scrollbar {height: 6px;}
    .ar_s03con_bt::-webkit-scrollbar-thumb {background: rgba(255,255,255,0.2); border-radius: 999px;}
    .ar_s03con_bt a {flex: 0 0 auto; scroll-snap-align: start;}
}

@media (max-width: 700px) {
    .ar_step02wp {height: auto; padding: 12rem 4rem 12rem 4rem;}
}

/* step03 */
.ar_step03wp {width: 100%; height: 100vh; background: #181818; padding-left: 8rem; display: flex; justify-content: center; align-items: center;}
.ar_step03wp .ar_s03in {width: 100%; max-width: 1680px; display: flex; flex-direction: column; gap: 8rem; margin: 0 4rem;}
.ar_step03wp .ar_s03in .ar_s03con {width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 4rem;}
.ar_step03wp .ar_s03in .ar_s03con .ar_s3_bx {display: flex; flex-direction: column; gap: 1rem;}
.ar_step03wp .ar_s03in .ar_s03con .ar_s3_bx.is-prep {opacity: 0; transform: translateY(2rem); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--s3-delay, 0s);}
.ar_step03wp .ar_s03in .ar_s03con .ar_s3_bx.is-prep.is-inview {opacity: 1; transform: translateY(0);}
.ar_step03wp .ar_s03in .ar_s03con .ar_s3_bx b {font-size: 2.4rem; font-weight: 300; line-height: 100%; color: var(--point-color-1);}
.ar_step03wp .ar_s03in .ar_s03con .ar_s3_bx p {font-size: 4rem; font-weight: 300; line-height: 140%; color: var(--point-color-1);}
.ar_step03wp .ar_s03in .ar_s03con .ar_s3_bx span {font-size: 1.8rem; font-weight: 400; line-height: 140%; color: #fff;}

@media (max-width: 700px) {
    .ar_step03wp {height: auto; padding: 12rem 4rem 12rem 4rem;}
    .ar_step03wp .ar_s03in {margin: 0;}
}

/* step04 */
.ar_step04wp {width: 100%; height: 100vh; background: #181818; padding-left: 8rem; display: flex; justify-content: center; align-items: center;}
.ar_step04wp .ar_s04in {width: 100%; max-width: 1680px; display: flex; flex-direction: column; gap: 12rem; margin: 0 4rem;}
.ar_step04wp .ar_s04in .ar_s04con {width: 100%;}

@media (max-width: 700px) {
    .ar_step04wp {height: auto; padding: 12rem 4rem 12rem 4rem;}
    .ar_step04wp .ar_s04in {margin: 0;}
}

/* footer */
.ar_footer {width: 100%; background: #0C0C0C; display: flex; flex-direction: column; gap: 2rem; padding: 12rem 4rem 12rem 12rem; text-align: center;}
.ar_footer .ar_flogo {margin-bottom: 2rem;}
.ar_footer .ar_flogo img {width: 100%; max-width: 26.4rem;}
.ar_footer .ar_ftxt1 {font-size: 1.4rem; color: #fff; line-height: 180%; font-weight: 500;}
.ar_footer .ar_ftxt1 p {display: flex; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 1rem;}
.ar_footer .ar_ftxt1 p a {color: #fff; font-size: 1.6rem; font-weight: 600; line-height: 140%;}
.ar_footer .ar_ftxt1 p a:hover {color: var(--point-color-1);}
.ar_footer .ar_ftxt2 {font-size: 1.4rem; color: #9c9c9c; line-height: 100%;}
.ar_footer {position: relative; z-index: 20;}
.hdm_dim {position: fixed; top: 0; right: 0; bottom: 0; left: min(28.5rem, 100vw); width: calc(100vw - min(28.5rem, 100vw)); background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transform: translateX(100%); transition: opacity .35s ease, visibility .35s ease, transform .35s ease; z-index: 100;}
.headerm.is-open + .hdm_dim {opacity: 1; visibility: visible; transform: translateX(0);}
@media (max-width: 700px) {
    .ar_footer {padding: 12rem 4rem 12rem 4rem;}
}


/* sub css */
.ar_sb_wp {width: 100%; position: relative; min-height: 100vh; overflow: hidden; display: grid; background: #0C0C0C; padding-bottom: 1px;}
.ar_sb_wp .stop_media {position: relative; width: 100%; height: 630px; overflow: hidden; z-index: 1; grid-area: 1 / 1;}
.ar_sb_wp .stop_media .ar_mview_video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;}
.ar_sb_wp .ar_sbcon_in {width: 100%; height: auto; position: relative; grid-area: 1 / 1; margin-top: 46.4rem; z-index: 10; background: #181818; clip-path: polygon(0 165px, 165px 0, 100% 0, 100% 100%, 0 100%); overflow: hidden;}
.ar_sb_wp .ar_sbcon_in .ar_sbcon {margin: 12rem 8rem 12rem 26rem;}
.ar_sb_wp .stop_media .stop_txt {font-size: clamp(3.6rem, 6vw, 11.3rem); font-family: var(--entype2); font-weight: 700; line-height: 100%; color: #181818; position: absolute; bottom: 195px; z-index: 6;}
.ar_sb_wp .stop_media .stop_lgsb {position: absolute; right: 0; bottom: 180px; z-index: 5; width: clamp(18rem, 26vw, 51.2rem); aspect-ratio: 256 / 223;}
.ar_sb_wp .stop_media .stop_lgsb img {width: 100%; height: 100%; object-fit: contain;}
.ar_sb_wp .ar_sbcon_in .ar_sbcon .ar_incon_wp {margin-top:6rem; color: #fff;}

.ar_sb_wp .stop_media .stop_txt.sbtx_a1 {left: 18.5rem;}
.ar_sb_wp .stop_media .stop_txt.sbtx_a2 {left: 18.5rem;}
.ar_sb_wp .stop_media .stop_txt.sbtx_a3 {left: 17.4rem;}
.ar_sb_wp .stop_media .stop_txt.sbtx_a4 {left: 17.2rem;}
.ar_sb_wp .stop_media .stop_txt.sbtx_a5 {left: 18.5rem;}
.ar_sb_wp .stop_media .stop_txt.sbtx_a6 {left: 18.5rem;}
.ar_sb_wp .stop_media .stop_txt.sbtx_a7 {left: 17.2rem;}

@media (max-width: 1400px) {
    .ar_sb_wp .ar_sbcon_in .ar_sbcon {margin: 12rem 8rem 12rem 20rem;}
}
@media (max-width: 1200px) {
    .ar_sb_wp .stop_media .stop_txt {bottom: 200px;}
    .ar_sb_wp .stop_media .stop_lgsb {bottom: 200px;}
}
@media (max-width: 800px) {
    .ar_sb_wp .ar_sbcon_in {clip-path: polygon(0 50px, 50px 0, 100% 0, 100% 100%, 0 100%); margin-top: 27rem;}
    .ar_sb_wp .ar_sbcon_in .ar_sbcon {margin: 6rem 6rem 6rem 6rem;}
    .ar_sb_wp .stop_media {height: 330px;}
    .ar_sb_wp .stop_media .stop_txt {font-size: clamp(3.2rem, 6vw, 6rem); bottom: 80px;}
    .ar_sb_wp .stop_media .stop_lgsb {width: clamp(14rem, 45vw, 23rem); aspect-ratio: 256 / 223; bottom: 66px;}
    .ar_sb_wp .stop_media .stop_txt.sbtx_a1 {left: 5.5rem;}
    .ar_sb_wp .stop_media .stop_txt.sbtx_a2 {left: 5.5rem;}
    .ar_sb_wp .stop_media .stop_txt.sbtx_a3 {left: 5.1rem;}
    .ar_sb_wp .stop_media .stop_txt.sbtx_a4 {left: 5rem;}
    .ar_sb_wp .stop_media .stop_txt.sbtx_a5 {left: 5.5rem;}
    .ar_sb_wp .stop_media .stop_txt.sbtx_a6 {left: 5.5rem;}
    .ar_sb_wp .stop_media .stop_txt.sbtx_a7 {left: 5.1rem;}
    .ar_sb_wp .stop_media .ar_mview_video {margin-top: 72px; height: 68%;}
}
@media (max-width: 550px) {
    .ar_sb_wp .stop_media .stop_lgsb {width: clamp(8rem, 28vw, 16rem); aspect-ratio: 256 / 223; bottom: 78px;}
}
@media (max-width: 400px) {
    .ar_sb_wp .stop_media .stop_lgsb {width: clamp(6rem, 16vw, 14rem); aspect-ratio: 256 / 223;}
    .ar_sb_wp .ar_sbcon_in .ar_sbcon {margin: 6rem 4rem 6rem 4rem;}
}

/* modtal css */
.modal {display: none; position: fixed; z-index: 10001; left: 0;	top: 0; width: 100%; height: 100vh;	overflow: auto; background-color: rgba(0,0,0,0.6);}
.modal-content {position:relative; position: fixed; left:50%; top:50%; transform: translate(-50%, -50%); z-index:10002; background-color: rgba(255,255,255,0.3);}
.md_strock {margin:1.1rem; background-color: #fff;}
.mdclose {position:absolute; right:2rem; top:2rem; background:#fff;}
.mdclose img {width:100%; max-width:27px; filter: invert(0%); transition: all 0.3s;}
.mdclose:hover,
.mdclose:focus {cursor: pointer;}
.mdclose:hover img {filter: invert(100%);}
.mdw1 {width: 100%; max-width:91rem; height:auto;}
.mdw2 {width: 100%; max-width:140rem; height:auto;}

.md_box {padding:4rem 4.5rem; display:flex; flex-direction:column; gap:4rem; max-height: 700px; overflow: auto;}
.md_box .md_title {}
.md_box .md_title p {font-size:3rem; font-weight:500; color:#181818; line-height:140%;}
.md_box .md_title span {font-size:1.8rem; color:#646464;}
.md_form1 {display:flex; gap:1rem;}
.md_fbox {display:flex; gap:1rem; align-items:center;}
.md_btn {display:flex; gap:1rem; align-items:center; position:relative;}
.md_btn .mb_btn_txt {position:absolute; right:0; bottom:-3rem; z-index:1; font-size:1.6rem; color:#910303; width:100%; min-width: 50rem; line-height: 120%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.md_form2 {display:flex; gap:1rem; flex-direction:column;}
.md_form2 .md_fty1 {display:flex; gap:1rem; flex-direction:column;}
.md_form2 .md_fty1 .md_rdo {display:flex; gap:1rem; margin: 1rem; color: #181818;}
.md_form2 .md_fty1 .md_ew1 {display:flex; gap:1rem; flex-direction:column;}
.md_form2 .md_fty1 .md_fty_info {font-size:1.4rem; line-height: 140%;}
.md_tos {display:flex; flex-direction:column; gap:1rem;}
.md_tos .md_tos1 {display:flex; justify-content: space-between; align-items:center; color:#181818;}
.md_tos .md_tos1 b {font-size:1.8rem; font-weight:500;}
.md_tos .md_tos1 span {}
.md_bot {width:100%; max-width:314px; background:#f7f7f7; margin:0 auto; text-align:center;}
.md_bts {display:flex; justify-content: center; align-items:center; gap:1rem;}
.md_finish {text-align:center; display:flex; justify-content: center; align-items:center; flex-direction:column; gap:2rem; padding:10rem 0;}
.md_finish span {font-size:3rem; font-weight:500; color:#181818; line-height:140%;}
.md_finish p {font-size:1.8rem; color:#646464; margin-bottom:10rem;}


#css_tabs input[name=tab] { display: none; }

#css_tabs input:nth-of-type(1):checked~header>label[for=tab1],
#css_tabs input:nth-of-type(2):checked~header>label[for=tab2],
#css_tabs input:nth-of-type(3):checked~header>label[for=tab3],
#css_tabs input:nth-of-type(4):checked~header>label[for=tab4],
#css_tabs input:nth-of-type(5):checked~header>label[for=tab5],
#css_tabs input:nth-of-type(6):checked~header>label[for=tab6] {	background: #181818;	border-color: #A1A1A1;	color: #fff;}

#css_tabs { padding: 0; }
#css_tabs>header { display: flex; justify-content: space-between; text-align: center; gap:0.5rem; margin-bottom:1rem;}
#css_tabs>header>label {
	width: 100%; height: 4.5rem; line-height: 140%; font-size:1.6rem; font-weight: 500; text-decoration: none; color: #181818;
	cursor: pointer; background-color: #fff; border: 1px solid #A1A1A1; display: flex; justify-content: center; align-items:center; caret-color: transparent;
}
#css_tabs>header>label:hover { background-color: #fff; }

@media (max-width: 800px) {
	#css_tabs>header>label { width: 32%; }
}
@media (max-width: 530px) {
    #css_tabs>header {flex-direction: column; flex-wrap: wrap;}
    #css_tabs>header>label { width: 100%; }
    .inp_t1 {width: 100%!important;}
    .inp_t2 {width: 100%!important;}
    .md_fbox {flex-direction: column;}
    .md_box {padding: 2rem 2.5rem;}
}

/* input css */
.inp_email {border:1px solid #C1C1C1; color: #181818; display: flex; align-items: center;}
.inp_t1 {border:0; background:#fff; width:14.5rem; height:4.8rem; font-size:2rem; color:#646464; padding:0 1rem; outline: none;}
.inp_t2 {border:1px solid #C1C1C1; background:#fff; width:15rem; height:5rem; font-size:2rem; color:#646464; padding:0 1rem; outline: none;}
.inp_t3 {border:1px solid #C1C1C1; background:#fff; width:14rem; height:5rem; font-size:2rem; color:#646464; padding:0 1rem; outline: none;}
.inp_t4 {font-family:'Noto Sans KR', sans-serif; border:1px solid #C1C1C1; background:#fff; width:100%; height:5rem; font-size:2rem; color:#646464; padding:0 1rem; outline: none;}
.inp_b1 {width:28.8rem; height:5rem; background:#646464; color:#fff; display:flex; justify-content: center; align-items: center; border:0; font-size:2rem; cursor: pointer;}
.inp_b2 {width:12.8rem; height:5rem; background:#646464; color:#fff; display:flex; justify-content: center; align-items: center; border:0; font-size:2rem; cursor: pointer;}
.inp_tx1 {font-family:'Noto Sans KR', sans-serif; border:1px solid #C1C1C1; background:#fff; width:100%; height:15rem; font-size:1.4rem; color:#646464; padding:1rem; outline: none; resize: none;}
.inp_tx2 {font-family:'Noto Sans KR', sans-serif; border:1px solid #C1C1C1; background:#fff; width:100%; height:10rem; font-size:1.4rem; color:#646464; padding:1rem; outline: none; resize: none;}
.inp_tx3 {font-family:'Noto Sans KR', sans-serif; border:1px solid #C1C1C1; background:#fff; width:100%; height:15rem; font-size:2rem; color:#646464; padding:1rem; outline: none; resize: none;}
.custom-checkbox {display: inline-flex; align-items: center; font-size: 1.8rem; cursor: pointer; caret-color: transparent;}
.custom-checkbox input[type="checkbox"] {display: none;}
.custom-checkbox .checkmark {width: 20px; height: 20px; background-color: #fff; border: 2px solid #ccc; position: relative; margin-right: 1rem; transition: background-color 0.2s ease, border-color 0.2s ease;}
.custom-checkbox input[type="checkbox"]:checked + .checkmark {background-color: #000; border-color: #000;}
.custom-checkbox .checkmark:after {content: ""; position: absolute; display: none; left: 5px; top: 0; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);}
.custom-checkbox input[type="checkbox"]:checked + .checkmark:after {display: block;}
.rdo1 {}
.rdo1 label {cursor: pointer;}

@media (max-width: 500px) {
	.md_form1 .md_fbox {flex-direction:column; align-items: flex-start;}
	.md_tos .md_tos1 {flex-direction:column;}
	.bt_w8 {height:4rem; max-width:100%;}
	.map_bx_sbw .sbw_bx1 .fah_gate1 {top:150%;}
	.map_bx_sbw .sbw_bx3 .fah_gate2 {top:-52%;}
}


.bt_w0 {width:100%; height:3rem;}
.bt_w1 {width:10rem; height:3rem;}
.bt_w2 {width:19rem; min-width:19rem; height:3rem;}
.bt_w3 {width:25rem; height:3rem;}
.bt_w4 {width:32rem; height:5rem;}
.bt_w5 {width:20rem; height:5rem;}
.bt_w6 {width:29rem; height:7rem;}
.bt_w7 {width: 100%; max-width: 30rem; height:3rem;}
.bt_w8 {width:100%; height:5rem; max-width: 21rem;}
.bt_w9 {width:100%; height:5rem;}
.bt_w10 {width:100%; height:5rem; max-width: 21rem;}
.bt_more0 {border:1px solid #181818; background:#181818; color:#fff; display:flex; justify-content: center; align-items: center; caret-color: transparent; cursor: pointer;}
.bt_more0>b {font-size:1.2rem; line-height:140%;}
.bt_more0:hover {background:#fff; color:#181818; transition: all ease 0.3s;}
.bt_more1 {border:1px solid #181818; background:#181818; color:#fff; display:flex; justify-content: space-between; align-items: center; caret-color: transparent; cursor: pointer;}
.bt_more1>b {font-size:1.2rem; margin-left:1.3rem; line-height:140%;}
.bt_more1 img {filter: invert(0%); width:12px; margin-right:1.3rem;}
.bt_more1:hover {background:#fff; color:#181818; transition: all ease 0.3s;}
.bt_more1:hover img {filter: invert(100%);}
.bt_more2 {font-size:2rem; line-height:140%; border:1px solid #181818; background:#181818; color:#fff; display:flex; justify-content: center; align-items: center; caret-color: transparent; cursor: pointer;}
.bt_more2:hover {background:#fff; color:#181818; transition: all ease 0.3s;}
.bt_more3 {font-size:2rem; line-height:140%; border:1px solid #404040; background:#404040; color:#fff; display:flex; justify-content: center; align-items: center; caret-color: transparent; cursor: pointer;}
.bt_more3:hover {background:#fff; color:#404040; transition: all ease 0.3s;}
.bt_more4 {border:1px solid #181818; background:#181818; color:#fff; display:flex; justify-content: center; align-items: center; gap:2rem; caret-color: transparent; cursor: pointer;}
.bt_more4>b {font-size:2rem; line-height:140%;}
.bt_more4 img {filter: invert(0%); width:33px;}
.bt_more4:hover {background:#fff; color:#181818; transition: all ease 0.3s;}
.bt_more4:hover img {filter: invert(100%);}
.bt_more5 {border:2px solid #181818; background:#fff; color:#181818; display:flex; justify-content: space-between; align-items: center; caret-color: transparent; cursor: pointer;}
.bt_more5>b {font-size:1.8rem; margin-left:1.3rem; line-height:140%;}
.bt_more5 img {filter: invert(1000%); width:12px; margin-right:1.3rem;}
.bt_more5.on,
.bt_more5:hover {background:#181818; color:#fff; transition: all ease 0.3s;}
.bt_more5.on,
.bt_more5:hover img {filter: invert(0%);}
.bt_more6 {border:1px solid #A1A1A1; background:#fff; color:#181818; display:flex; justify-content: space-between; align-items: center; caret-color: transparent; cursor: pointer; padding:0 1.2rem;}
.bt_more6 .mp_txt {display:flex; gap:1rem;}
.bt_more6 .mp_txt img {width:2.6rem;}
.bt_more6 .mp_txt b {font-size:1.8rem; line-height:140%;}
.bt_more6>img {filter: invert(30%); width:16px;}
.bt_more6:hover {border:3px solid #000; transition: all ease 0.1s;}
.bt_more6:hover>img {filter: invert(100%);}

/* sub page css */
.sub_con_wp {width: 100%; display: flex; flex-wrap: wrap; gap: 14rem; margin-top: 4rem;}
.sub_con_wp2 {width: 100%; display: flex; flex-direction: column; gap: 4rem; margin-top: 4rem;}
.sb_title01 {display: flex; flex-direction: column; gap: 1rem;}
.sb_title01 b {font-size: 5rem; font-weight: 700; line-height: 140%; color: var(--point-color-2); margin-bottom: 2rem;}
.sb_title01 span {font-size: 3rem; font-weight: 400; line-height: 140%; color: var(--point-color-2);}
.sb_title01 i {font-size: 2.4rem; font-weight: 400; line-height: 140%;}
.sb_title01 p {font-size: 1.6rem; font-weight: 400; line-height: 180%; color: #fff;}
.sb_title01 .dot-lines {font-size: 1.6rem; font-weight: 400; line-height: 180%; color: #fff;}
.clr1 {color: #fff!important;}
.con_gap {width: 100%; height: 8rem;}
.con_gap2 {width: 100%; height: 6rem;}
.con_gap3 {width: 100%; height: 2rem;}
.pcbr {display: block;}

.sb_all_wp {width: 100%; display: flex; flex-direction: column; gap: 8rem;}
.sb_area_wp {width: 100%; display: flex; flex-direction: column;}
.con_2tap_wp {display: flex; flex-direction: column; gap: 3rem;}
.con_3tap_wp {width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6rem; align-items: start;}
.con_2tap {display: flex; gap: 2rem;}
.con_2tap b {font-family: var(--entype2); font-size: 4rem; color: var(--point-color-2); font-weight: 500; line-height: 100%;}
.con_2tap .tx_2tap {display: flex; flex-direction: column; gap: 1rem;}
.con_2tap .tx_2tap i {display: inline-block; align-self: flex-start; width: fit-content; font-size: 2rem; color: #fff; font-weight: 500; line-height: 140%; border-top:1px solid var(--point-color-2); margin-top: 0.8rem; margin-left: 0.4rem; padding-top: 0.4rem;}
.con_2tap .tx_2tap span {font-size: 1.6rem; color: #fff; font-weight: 400; line-height: 150%;}
.dot-lines {display: flex; flex-direction: column; gap: 0.6rem;}
.dot-line {display: block; padding-left: 0.9em; text-indent: -0.9em; line-height: 140%;}
.dot-line2 {display: block; padding-left: 0.9em; text-indent: -1.2em; line-height: 140%;}
.dot-text {display: block; line-height: 140%;}

.sb_bt_area {width: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 9rem;}
.sb_bt_area a {border: 1px solid var(--point-color-2); color: var(--point-color-2); display: flex; justify-content: center; align-items: center; gap: 2rem; padding: 1.5rem 3rem;}
.sb_bt_area a:hover {background-color: var(--point-color-2); color: #181818; transition: all ease 0.3s;}
.sb_bt_area a span {font-size: 1.8rem; font-weight: 400; line-height: 100%;}
.sb_bt_area a b {font-size: 3rem; font-weight: 700; line-height: 100%;}

@media (max-width: 1292px) {
    .sub_con_wp {gap: 6rem;}
    .sb_title01 b {font-size: 4rem;}
}
@media (max-width: 1220px) {
    .sub_con_wp {gap: 3rem;}
    .con_3tap_wp {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 3rem;}
    .sb_bt_area {gap: 3rem;}
    .pcbr {display: none;}
}
@media (max-width: 1000px) {
        .sb_bt_area {flex-direction: column; gap: 2rem;}
        .sb_bt_area a {width: 100%;}
}
@media (max-width: 600px) {
    .sb_title01 b {font-size: 3rem;}
    .sb_title01 span {font-size: 2.2rem;}
    .con_2tap {flex-direction: column; gap: 1rem;}
}
@media (max-width: 392px) {
    .sb_bt_area a {gap: 1rem;}
    .sb_bt_area a b {font-size: 2.4rem;}
    .sb_bt_area a span {font-size: 1.6rem;}    
    .con_2tap .tx_2tap i {width: 100%;}
}

.sb_safety {width: 100%; max-width: 83rem; height: 100vh; max-height: 83rem; position: relative; background: url(/assets/front/images/simbol_bg.svg) no-repeat center center; background-size:80%; margin-top: 7rem; margin-bottom: 24rem;}
.sb_safety .sb_sfbx {position: absolute; width: 100%; height: 100%; max-width: 27.2rem; max-height: 27.2rem; background: rgba(0, 0, 0, 0.5); border-radius: 50%; border: 8px solid var(--point-color-2); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; font-size: 4rem; font-weight: 500; color: var(--point-color-2); text-align: center; padding: 4rem;}
.sb_safety .sb_sfbx img {width: 70%;}
.sb_safety .sb_sfbx b {font-size: 2.2rem;}
.sb_safety .sb_sfbx .bxnum {font-size: 3rem; font-weight: 700; line-height: 100%; color: #fff; font-family: var(--entype2); display: none;}
.sb_bx1 {top: 0; left: 50%; transform: translate(-50%, 0);}
.sb_bx2 {left:0; bottom: 0;}
.sb_bx3 {right: 0; bottom: 0;}
.sb_safety .sb_sftx {display: flex; flex-direction: column; gap: 0.5rem; position: absolute;}
.sb_safety .sb_sftx p { font-size: 3rem; font-weight: 400; line-height: 140%; color: var(--point-color-2); }
.sb_safety .sb_sftx p b {font-size: 3.8rem; font-weight: 700; line-height: 100%; color: #fff; font-family: var(--entype2); display: none;}
.sb_safety .sb_sftx i { font-size: 1.6rem; font-weight: 400; line-height: 140%; color: #fff; white-space: pre-line;}
.sb_tx1 {top: 7%; left: 72%; width: max-content; max-width: none;}
.sb_tx2 {bottom: -20%; left: 12%; width: max-content; max-width: none;}
.sb_tx3 {bottom: 9%; left: 106%; width: max-content; max-width: none;}
.sb_mob_icon1 {width: 100%; max-width: 10rem; height: 10rem; display: none; position: relative;}
.sb_mob_icon1 img {width: 10rem; position: absolute; top: 10px; left: -18px; z-index: 10;}

@media (max-width: 1636px) {
    .sb_safety {margin-bottom: clamp(60rem, 70vw, 90rem); height: auto; max-height: none; aspect-ratio: 1 / 1;}
    .sb_safety .sb_sfbx {max-width: clamp(20rem, 24vw, 27.2rem); max-height: clamp(20rem, 24vw, 27.2rem); border-width: clamp(4px, 0.6vw, 8px); padding: clamp(2.4rem, 2.8vw, 4rem); font-size: clamp(3rem, 3.2vw, 4rem);}
    .sb_safety .sb_sfbx .bxnum {display: block;}
    .sb_safety .sb_sftx {left: 5%; right: 5%;}
    .sb_safety .sb_sftx p {display: flex; gap: 1rem; align-items: center; font-size: clamp(2.2rem, 2.4vw, 3rem);}
    .sb_safety .sb_sftx p b {display: block;}    
    .sb_tx1 {top: auto; bottom: calc(-23% - 2rem); right: auto; left: 5%; width: auto; max-width: 100%;}
    .sb_tx1 i {white-space: pre-line;}
    .sb_tx2 {bottom: calc(-44% - 7rem); left: 5%;}
    .sb_tx3 {bottom: calc(-72% - 6rem); right: auto; left: 5%;}
}
@media (max-width: 1230px) {
    .sb_tx1 {width: auto;}
    .sb_tx2 {width: auto;}
    .sb_tx3 {width: auto;}
}
@media (max-width: 700px) {
    .sb_tx1 {top: auto; bottom: calc(-10% - 10rem); right: auto; left: 0!important;}
    .sb_tx2 {bottom: calc(-30% - 16rem); left: 0!important;}
    .sb_tx3 {bottom: calc(-50% - 26rem); right: auto; left: 0!important;}
}
@media (max-width: 600px) {
    .sb_safety {background: none; display: flex; flex-direction: column; gap: 5rem;}
    .sb_safety .sb_sfbx {display: none;}
    .sb_safety .sb_sftx {position: static; gap: 1rem;}
    .sb_mob_icon1 {display: block;}
}
@media (max-width: 540px) {
    .sb_tx1 {top: auto; bottom: calc(-10% - 18rem); right: auto; left: 0!important;}
    .sb_tx2 {bottom: calc(-30% - 32rem); left: 0!important;}
    .sb_tx3 {bottom: calc(-50% - 46rem); right: auto; left: 0!important;}
}

.sb_ppms_wp {width: 100%; max-width: 1415px; display: flex; flex-direction: column; gap: 3rem; margin-top: 4rem;}
.sb_ppms_wp .sb_ppms_bx {width: 100%; padding: 4rem 6rem; border: 2px solid var(--point-color-2); border-radius: 1.4rem; display: flex; gap: 8rem; box-sizing: border-box; background: rgba(0, 0, 0, 0.3);}
.ppms_bx_tit {width: 100%; max-width: 26rem; display: flex; flex-direction: column; gap: 1rem; justify-content: flex-start;}
.ppms_bx_tit p {font-size: 4rem; font-weight: 300; line-height: 100%; color: var(--point-color-5);}
.ppms_bx_tit .toltwp {font-size: 3rem; font-weight: 300; line-height: 110%; color: var(--point-color-5); display: flex; justify-content: flex-start; align-items: center; gap: 1rem;}
.tooltip1 {width: 25px!important; height: 25px!important; position: relative; display: inline-block;}
.tooltip1 img {width: 100%;}
.tooltip1 .tipbx1 {position: absolute; left: 0; top: 0; z-index: 10; width: max-content; min-width: 20rem; max-width: 40rem; display: flex; flex-direction: column; gap: 1rem; padding:1.5rem 1rem; box-sizing: border-box; background: var(--point-color-2); color: #000; font-size: 1.4rem; font-weight: 400; line-height:140%; border-radius: 1.4rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; pointer-events: none;}
.tooltip1:hover .tipbx1,
.tooltip1:focus-within .tipbx1 {opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; pointer-events: auto;}
.tooltip1 .tipbx1 .tipbx1_txwp {display: flex; justify-content: flex-start; align-items: flex-start;}
.sb_ppms_wp .sb_ppms_bx .ppms_bx_info {width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem;}
.sb_ppms_wp .sb_ppms_bx .ppms_bx_info .ppms_bx_if1 {display: flex; flex-direction: column; gap: 1rem;}
.sb_ppms_wp .sb_ppms_bx .ppms_bx_info .ppms_bx_if1 .if1_txt {font-size: 3rem; font-weight: 300; line-height: 120%; color: var(--point-color-2);}
.sb_ppms_wp .sb_ppms_bx .ppms_bx_info .ppms_bx_if1 .if1_num {font-size: 6rem; font-weight: 300; line-height: 100%; color: #fff; display: flex; gap: 1rem; align-items: baseline;}
.sb_ppms_wp .sb_ppms_bx .ppms_bx_info .ppms_bx_if1 .if1_num b {font-size: 3rem;}
.sb_ppms_wp .grf_bt_area {display: flex; justify-content: flex-start; align-items: center; gap: 2rem; margin-top: 7rem;}
.sb_ppms_wp .grf_bt_area .grf_bt1 { border: 0; outline: none; background-color: #2e2e2e; color: #fff; font-size: 2rem; font-weight: 400; line-height: 100%; padding: 1.4rem 3rem; cursor: pointer; border-radius: 1rem;}
.sb_ppms_wp .grf_bt_area .grf_bt1:hover {background-color: var(--point-color-3); color: #000; transition: all ease 0.3s;}
.sb_ppms_wp .grf_bt_area .grf_bt1.grfon {background-color: var(--point-color-2); color: #000;}
.sb_ppms_wp .sb_ppms_table {width: 100%;}
.sb_ppms_wp .sb_ppms_table .sb_ppms_grf {margin-top: 2rem;}
.sb_ppms_wp .sb_ppms_table .grf_gui {overflow:auto; max-height:600px; border:1px solid rgba(255,255,255,0.08); border-radius:0.8rem;}
.sb_ppms_wp .sb_ppms_table .grf_gui {scrollbar-width: thin; scrollbar-color: var(--point-color-2) #181818;}
.sb_ppms_wp .sb_ppms_table .grf_gui::-webkit-scrollbar {width: 3px; height: 3px;}
.sb_ppms_wp .sb_ppms_table .grf_gui::-webkit-scrollbar-track {background: #181818;}
.sb_ppms_wp .sb_ppms_table .grf_gui::-webkit-scrollbar-thumb {background: var(--point-color-2);}
.sb_ppms_wp .sb_ppms_table .grf_gui table {width:100%; border-collapse:collapse; font-size:13px;}
.sb_ppms_wp .sb_ppms_table .grf_gui table th {font-size: 2rem; color: #fff; padding: 1rem 0;}
.sb_ppms_wp .sb_ppms_table .grf_gui table thead th {position: sticky; top: 0; z-index: 3; background: #0b0f14;}
.sb_ppms_wp .sb_ppms_table .grf_gui table tr {color: #fff;}
.sb_ppms_wp .sb_ppms_table .grf_gui table tr td {padding:1rem; border-bottom:1px solid rgba(255,255,255,0.08); padding: 2rem 3rem; font-size: 2rem; border-bottom:1px solid rgba(255,255,255,0.06);}
.sb_ppms_wp .grf_table {display:flex; justify-content:space-between; align-items:center; margin:10px 0;}
.sb_ppms_wp .grf_table .grf_tb_txt1 {font-weight: 500;}
.sb_ppms_wp .grf_table .grf_tb_txt2 {font-size:1.2rem; color:#9aa3ad;}

@media (max-width: 1350px) {
    .sb_ppms_wp .sb_ppms_bx {flex-direction: column; gap: 4rem;}
}
@media (max-width: 999px) {    
    .ppms_bx_tit p {font-size: 3rem;}
    .ppms_bx_tit .toltwp {font-size: 2.2rem;}
    .sb_ppms_wp .sb_ppms_bx .ppms_bx_info .ppms_bx_if1 .if1_txt {font-size: 2.2rem;}
    .sb_ppms_wp .sb_ppms_bx .ppms_bx_info .ppms_bx_if1 .if1_num b {font-size: 2rem;}
    .sb_ppms_wp .sb_ppms_bx .ppms_bx_info .ppms_bx_if1 .if1_num {font-size: 3rem;}
}
@media (max-width: 520px) {
    .sb_ppms_wp .sb_ppms_bx {padding: 4rem;}    
    .sb_ppms_wp .sb_ppms_bx .ppms_bx_info {grid-template-columns: repeat(1, minmax(0, 1fr));}
}

.bt_use_tab {width: 100%; display: flex; gap: 2rem;}
.bt_use_tab .us_tbbt {border: 1px solid var(--point-color-2); background-color: #181818; color: var(--point-color-2); font-size: 2.2rem; font-weight: 300; line-height: 100%; padding: 1.4rem 3rem; cursor: pointer;}
.bt_use_tab .us_tbbt:hover {background-color: var(--point-color-2); color: #181818; transition: all ease 0.3s;}
.bt_use_tab .us_tbbt.is-active {background-color: var(--point-color-2); color: #181818;}
.sb_area_wp .use_tab01area,
.sb_area_wp .use_tab02area,
.sb_area_wp .use_tab03area,
.sb_area_wp .use_tab04area,
.sb_area_wp .use_tab05area,
.sb_area_wp .use_tab06area {display: none;}
.sb_area_wp .use_tab01area.is-active,
.sb_area_wp .use_tab02area.is-active,
.sb_area_wp .use_tab03area.is-active,
.sb_area_wp .use_tab04area.is-active,
.sb_area_wp .use_tab05area.is-active,
.sb_area_wp .use_tab06area.is-active {display: block;}

.use_tab01area {margin-top: 8rem;}
.sb_tabbx1 {width: 100%; display: flex; align-items: stretch; gap: 1rem; margin-top: 4rem;}
.sb_tabbx1 .sb_tabbx_arr {width: 100%; max-width: 6.7rem; align-self: center;}
.sb_tabbx1 .sb_tabbx_arr img {width: 100%;}
.sb_tabbx1 .sb_tabbx_in1 {border: 8px solid var(--point-color-5); display: flex; flex-direction: column; gap: 1.5rem; justify-content: center; align-items: center; border-radius: 2rem; padding: 4.5rem 6rem; text-align: center;}
.sb_tabbx1 .sb_tabbx_in1 b {font-size: 3rem; font-weight: 500; line-height: 100%; color: #fff;}
.sb_tabbx1 .sb_tabbx_in1 p {font-size: 1.6rem; font-weight: 400; line-height: 140%; color: #fff;}
.sb_tabbx1 .sb_tabbx_in1 span {font-size: 1.6rem; font-weight: 300; line-height: 100%; color: #fff; background: var(--point-color-5); border-radius: 1rem; display: flex; justify-content: center; align-items: center; padding: 1rem 2rem;}
.sb_tabbx2 {width: 100%; max-width: 1400px; display: flex; align-items: center; flex-wrap: wrap; gap: 4rem; margin-top: 6rem;}
.sb_tabbx2 .sb_tab_o {width: 100%; max-width: 27.2rem; height: 100vh; max-height: 27.2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; border: 8px solid var(--point-color-5); border-radius: 14rem}
.sb_tabbx2 .sb_tab_o b {font-family: var(--entype2); font-size: 4rem; font-weight: 500; line-height: 100%; color: var(--point-color-2);}
.sb_tabbx2 .sb_tab_o span {font-size: 2rem; font-weight: 400; line-height: 140%; color: #fff; text-align: center;}
.sb_tabbx2 .sb_tab_o_arr {width: 1.72rem;}
.sb_tabbx2 .sb_tab_o_arr img {width: 100%;}

.use_tab02area {margin-top: 8rem;}
.use_tab02area table {width: 100%; max-width: 1450px; border: 1px solid #5b5b5b; background: #2b2b2b; text-align: center;}
.use_tab02area table thead th {background: #3a3a3a; font-weight: 500; vertical-align: middle;}
.use_tab02area table tbody th {background: #2f2f2f; font-weight: 500;}
.use_tab02area table th,
.use_tab02area table td {border: 1px solid #5b5b5b; padding: 2rem 1.5rem; font-size: 1.8rem; font-weight: 400; line-height: 120%; color: #fff;}
.sb_tb2_bx {--tb2-img-w: 254px; --tb2-img-h: calc(var(--tb2-img-w) * 471 / 254); margin-top: 6rem; display: flex; gap: 5rem; column-gap: 5rem; row-gap: 5rem; align-items: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem;}
.sb_tb2_bx .sb_tb2_inbx {width: var(--tb2-img-w); max-width: var(--tb2-img-w); flex: 0 0 var(--tb2-img-w); display: flex; flex-direction: column; align-items: center; gap: 2rem;}
.sb_tb2_bx .sb_tb2_inbx img {width: 100%; height: auto; display: block; aspect-ratio: 254 / 471;}
.sb_tb2_bx .sb_tb2_inbx p {font-size: 1.8rem; color: #fff; font-weight: 400; line-height: 140%; text-align: center;}
.sb_tb2_bx .sb_tb2_inbx2 {width: 624px; max-width: 624px; flex: 0 0 624px; display: flex; flex-direction: column; align-items: center; gap: 2rem;}
.sb_tb2_bx .sb_tb2_inbx2 img {width: 100%; height: auto; display: block;}
.sb_tb2_bx .sb_tb2_inbx2 p {font-size: 1.8rem; color: #fff; font-weight: 400; line-height: 140%; text-align: center;}
.sb_tb2_bx .sb_tb2_inbx2 .dot-lines {font-size: 1.8rem; color: #fff; font-weight: 400; line-height: 140%; text-align: center;}
.arr_wh {width: 3rem; min-width: 3rem; height: var(--tb2-img-h); display: flex; align-items: center; justify-content: center; flex: 0 0 3rem;}
.arr_wh img {width: 100%; height: auto; display: block;}

.use_tab03area {margin-top: 8rem;}
.sb_tab4_dwbx {width: 100%; display: flex; flex-direction: column; gap: 2rem; margin-top: 5rem;}
.sb_tab4_dwbx .dw_bx1 {display: flex; gap: 2rem;}
.sb_tab4_dwbx .dw_bx1 a {width: 97px;}
.sb_tab4_dwbx .dw_bx1 a img {width: 100%; max-width: 9.7rem;}
.sb_tab4_dwbx .dw_bx1 .dw_txarea {display: flex; flex-direction: column; font-size: 1.6rem; font-weight: 400; line-height: 140%; gap: 1rem;}

.use_tab04area {margin-top: 8rem;}
.use_tab05area {margin-top: 8rem;}
.use_tab06area {margin-top: 8rem;}
.sb_tab6_bx {display: flex; gap: 3rem; margin-top: 5rem;}
.sb_tab6_bx .tb6_bx1 {width: 100%; max-width: 495px;}
.sb_tab6_bx .tb6_bx1 img {width: 100%;}
.sb_tab6_bx .tb6_bx2 {width: 100%; display: flex; flex-direction: column; gap: 3rem;}

@media (max-width: 1200px) {
    .sb_tab6_bx {flex-direction: column;}
}

@media (max-width: 1060px) {
    .sb_tabbx1 {flex-direction: column;}
    .sb_tabbx1 .sb_tabbx_arr img {transform: rotate(90deg);}
    .sb_tab4_dwbx {gap: 3rem;}
    .sb_tab4_dwbx .dw_bx1 {flex-direction: column; gap: 1rem;}
}

@media (max-width: 1070px) {
    .bt_use_tab {overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 1rem;}
    .bt_use_tab::-webkit-scrollbar {height: 6px;}
    .bt_use_tab::-webkit-scrollbar-thumb {background: rgba(255,255,255,0.2); border-radius: 999px;}
    .bt_use_tab .us_tbbt {flex: 0 0 auto; scroll-snap-align: start;}
}
@media (max-width: 793px) {
    .use_tab01area {margin-top: 5rem;}
    .use_tab02area {margin-top: 5rem;}
    .use_tab03area {margin-top: 5rem;}
    .use_tab04area {margin-top: 5rem;}
    .use_tab05area {margin-top: 5rem;}
    .use_tab06area {margin-top: 5rem;}
    .sb_tabbx2 .sb_tab_o {max-width: 20rem; max-height: 20rem;}
}
@media (max-width: 570px) {
    .sb_tabbx2 {justify-content: center; flex-direction: column; gap: 2rem;}
    .sb_tabbx2 .sb_tab_o {max-width: 100%; max-height: 14rem;}
    .sb_tabbx2 .sb_tab_o_arr img {transform: rotate(90deg);}
}
@media (max-width: 470px) {
    .use_tab02area table th, .use_tab02area table td {font-size: 1.6rem; padding: 1.5rem 1rem;}
}

.sb_cpny {display: flex; gap: 4rem; margin-top: 7rem;}
.sb_cpny .sb_cpny_bx {width: 100%; max-width: 45rem; height: 47rem; border: 8px solid var(--point-color-1); border-radius: 2rem; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 1rem; background-size: cover; text-align: center;}
.sb_cpny .sb_cpny_bx p {width: 100%; max-width: 22.5rem; font-size: 4rem; font-family: var(--entype2); font-weight: 700; line-height: 140%; color: var(--point-color-2); border-bottom: 1px solid var(--point-color-1);}
.sb_cpny .sb_cpny_bx b {font-size: 3rem; font-weight: 500; line-height: 140%; color: #fff;}
.sb_cpny .sb_cpny_bx span {font-size: 1.6rem; font-weight: 400; line-height: 140%; color: #fff;}
.cpn_img1 {background: url(/assets/front/images/sb_cpny_img1.jpg) no-repeat center center;}
.cpn_img2 {background: url(/assets/front/images/sb_cpny_img2.jpg) no-repeat center center;}
.cpn_img3 {background: url(/assets/front/images/sb_cpny_img3.jpg) no-repeat center center;}
.sb_cpny_logo {width: 100%; max-width: 737px; margin-top: 7rem;}
.sb_cpny_logo img {width: 100%;}

@media (max-width: 1130px) {
    .sb_cpny {flex-direction: column;}
    .sb_cpny .sb_cpny_bx {max-width: 100%; height: 30rem;}
}

.sb_mda {display: flex; flex-wrap: wrap; gap: 4rem; margin-top: 7rem; width: 100%; max-width: 1415px;}
.sb_mda .sb_mda_bx {flex: 0 0 calc((100% - 8rem) / 3); display: flex; flex-direction: column; gap: 2rem;}
.sb_mda .sb_mda_bx .sb_video {width: 100%; max-width: 560px; aspect-ratio: 16 / 9; margin: 0 auto;}
.sb_mda .sb_mda_bx .sb_video iframe {width: 100%; height: 100%;}
.sb_mda .sb_mda_bx p {width: 100%; text-align: center; font-size: 1.8rem; font-weight: 500; line-height: 140%; color: #fff;}
.m_wts {max-width: 100%; margin-top: 0;}

@media (max-width: 1200px) {
    .sb_mda .sb_mda_bx {flex: 0 0 calc((100% - 8rem) / 2);}
}
@media (max-width: 600px) {
    .sb_mda .sb_mda_bx {flex: 0 0 100%;}
}

.sb_weare_con1 {width: 100%; max-width: 180rem; margin: 0; aspect-ratio: 16 / 9;}
.sb_weare_con1 iframe {width: 100%; height: 100%; border: 0; display: block;}