@charset "utf-8"; 
@font-face { 
 font-family: 'KOTRA_BOLD-Bold'; 
 src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff') format('woff'); 
 font-weight: normal; 
 font-style: normal; 
 } 

/*메인공통*/
.material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48 } 
.s-tit { display: inline-block; margin-right: 2em; color: var(--point-color); font-size: 1.6rem; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 22px; letter-spacing: -0.32px; } 
.b-tit { font-family: 'DM Serif Text', serif; font-size: 11.5rem; line-height: 153px; letter-spacing: -2.3px; font-style: italic; } 

@media screen and (max-width:1600px) { 
 .b-tit { font-size: 9rem; line-height: 114px; } 
 } 
 @media screen and (max-width:1200px) { 
 .b-tit { font-size: 7rem; line-height: 1; } 
 .s-tit { margin-right: 1em; } 
 } 
 @media (max-width:1024px) { 
 /*900*/
 .b-tit { font-size: 9rem; } 
 } 
 @media (max-width:768px) { 
 .b-tit { font-size: 7rem; } 
 .s-tit { font-size: 2rem; } 
 } 
 @media (max-width:500px) { 
 .b-tit { font-size: 6rem; } 
 .s-tit { font-size: 1.8rem; } 
 } 



/*더보기버튼*/
.more_btn { position: relative; width: 170px; height: 43px; padding: 0 19px; background-color: #fff; border: 1px solid #000000; border-radius: 22px; font-family: 'Montserrat', sans-serif; font-size: 1.5rem; line-height: 31px; letter-spacing: 0.3px; transition: .3s; overflow: hidden; } 
.more_btn::after { position: absolute; width: 100%; height: 200%; border-radius: 100%; left: 0%; top: 0; background: #fff; content: ''; transform: translateX(-100%); transition: .5s; opacity: 0; z-index: -1; } 
.more_btn .btn_arrow { margin-left: auto; transition: .3s; } 
.more_btn:hover .btn_arrow { transform: translateX(5px); filter: invert(1); z-index: 2; } 
.more_btn:hover::after { background: #000; transform: translateX(0) scale(2); opacity: 1; z-index: 1; } 
.more_btn:hover span { color:#fff; z-index: 2; } 

@media screen and (max-width:1200px) { 
 .more_btn { width: 152px; height: 35px; padding: 0 1em; font-size: 1.4rem; line-height: 1; } 
 } 
 @media screen and (max-width:1200px) { 
 .more_btn { width: 122px; } 
 .more_btn .btn_arrow { width: 15px; } 
 } 
 @media screen and (max-width:480px) { 
 .more_btn { width: 142px; } 
 } 

 @media screen and (any-pointer:coarse) { 
 .more_btn:hover .btn_arrow { transform: inherit; filter: none; z-index: 2; } 
 .more_btn:hover::after { display: none; } 
 .more_btn:hover span { color:#000; z-index: 2; } 
 
 } 

 .more_btn { position: relative; width: 170px; height: 43px; padding: 0 19px; background-color: #fff; border: 1px solid #000000; border-radius: 22px; font-family: 'Montserrat', sans-serif; font-size: 1.5rem; line-height: 31px; letter-spacing: 0.3px; transition: .3s; overflow: hidden; } 
.more_btn::after { position: absolute; width: 100%; height: 200%; border-radius: 100%; left: 0%; top: 0; background: #fff; content: ''; transform: translateX(-100%); transition: .5s; opacity: 0; z-index: -1; } 
.more_btn .btn_arrow { margin-left: auto; transition: .3s; } 



/**************************메인***********************************/

/*영상*/
#main .sec01 { position: relative; height: 100vh; } 
#main .sec01 .loding-cov { position: fixed; width: 100%; height: 100vh; background:#e8e8e8; animation:loding-cov 1s .7s both; z-index: 9999; } 
#main .sec01 #introWrap { position: absolute; width: 100vw; height: 100vh; padding-bottom: 0; background: #000; overflow: hidden; z-index: 1; } 
#main .sec01 #introWrap::before { content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; } 
#main .sec01 #introWrap #player { width: calc(100% + 200px); height: calc(100% + 200px); margin-top: -100px; margin-left: -100px; opacity: .8; } 
#main .sec01 .boxes { --size: 32px; --duration: 800ms; height: calc(var(--size) * 2); width: calc(var(--size) * 3); position: relative; top: 50%; left: 50%; transform-style: preserve-3d; transform-origin: 50% 50%; margin-top: -70px; transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px); } 
#main .sec01 .boxes .box { width: var(--size); height: var(--size); top: 0; left: 0; position: absolute; transform-style: preserve-3d; } 
#main .sec01 .boxes .box:nth-child(1) { transform: translate(100%, 0); -webkit-animation: box1 var(--duration) linear 5; animation: box1 var(--duration) linear 5; } 
#main .sec01 .boxes .box:nth-child(2) { transform: translate(0, 100%); -webkit-animation: box2 var(--duration) linear 5; animation: box2 var(--duration) linear 5; } 
#main .sec01 .boxes .box:nth-child(3) { transform: translate(100%, 100%); -webkit-animation: box3 var(--duration) linear 5; animation: box3 var(--duration) linear 5; } 
#main .sec01 .boxes .box:nth-child(4) { transform: translate(200%, 0); -webkit-animation: box4 var(--duration) linear 5; animation: box4 var(--duration) linear 5; } 
#main .sec01 .boxes .box > div { --background: #5C8DF6; --top: auto; --right: auto; --bottom: auto; --left: auto; --translateZ: calc(var(--size) / 2); --rotateY: 0deg; --rotateX: 0deg; position: absolute; width: 100%; height: 100%; background: var(--background); top: var(--top); right: var(--right); bottom: var(--bottom); left: var(--left); transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ)); } 
#main .sec01 .boxes .box > div:nth-child(1) { --top: 0; --left: 0; } 
#main .sec01 .boxes .box > div:nth-child(2) { --background: #145af2; --right: 0; --rotateY: 90deg; } 
#main .sec01 .boxes .box > div:nth-child(3) { --background: #447cf5; --rotateX: -90deg; } 
#main .sec01 .boxes .box > div:nth-child(4) { --background: #DBE3F4; --top: 0; --left: 0; --translateZ: calc(var(--size) * 3 * -1); } 
#main .sec01 img { height: 100%; } 
#main .sec01 .slide-tit { position: absolute; top:50%; left:var(--inner-padding); z-index: 2; font-size: 3.7rem; font-weight: bold; line-height: 1.3; letter-spacing: -1.06px; transform: translateY(-8em); } 
#main .sec01 .slide-tit .ani_01 { color: #0055C5; font-family: 'KOTRA_BOLD-Bold'; font-size: 13.2rem; } 
#main .sec01 .slide-tit .ani_02 { margin-top: -0.3em; } 
#main .sec01 .slide-tit .ani-tp { margin-top: 5rem; } 
#main .sec01 .swiper { overflow: hidden; } 
#main .sec01 .swiper-slide { height: 100vh; } 
#main .sec01 .swiper-slide video.m_video { display: none; } 
#main .sec01 .swiper-slide video,
#main .sec01 .swiper-slide img { object-fit: cover; width: 100%; height: 100%; } 
#main .sec01 .swiper-slide.video-wr { background: #000; } 
#main .sec01 .swiper-slide.video-wr video { opacity: 0.6; } 
#main .sec01 .swiper-slide.video-wr .slide-tit .ani_01 { color: var(--point-s-color); } 
#main .sec01 .swiper-slide.video-wr .slide-tit .ani_02 { color: #fff; } 
#main .sec01 .swiper-slide-active img,
#main .sec01 .swiper-slide-active.swiper-slide-duplicate { animation: slide-img 5s both; } 
#main .sec01 .swiper-slide-active .slide-tit .ani_01,
#main .sec01 .swiper-slide-active.swiper-slide-duplicate .slide-tit .ani_01 { animation: slide-in-top 1s 1s both; } 
#main .sec01 .swiper-slide-active .slide-tit .ani_02,
#main .sec01 .swiper-slide-active.swiper-slide-duplicate .slide-tit .ani_02 { animation: slide-in-top 1s 1.2s both; } 


/*특허 뱃지*/
.pat { position: absolute; z-index: 2; } 
.pat.pat-img { left: var(--inner-padding); bottom: 86px; } 
.pat.pat-bag { right: var(--main-padding); top: 116px; width: 223px; } 



@media screen and (max-width:1300px) { 
 #main .sec01 .slide-tit { left: var(--main-padding); } 
 } 
 
@media screen and (max-width:1200px) { 
 /*1024*/
 #main .sec01 .slide-tit { transform: translateY(-7em); } 
 #main .sec01 .slide-tit p.ani_01 { font-size: 11rem; } 
 } 
 @media screen and (max-width:1024px) { 
 /*768*/
 #main .sec01 .slide-tit { top: auto; bottom: 7rem; transform: none; } 
 #main .sec01 .ani-tp { width: 76%; margin-top: 3rem; } 

 #main .sec01 .img_pc { display: none; } 
 #main .sec01 .img_m { display: block; } 
 } 
 @media screen and (max-width:768px) { 
 #main .sec01 .s-tit { font-size: 1.8rem; } 
 #main .sec01 .b-tit { font-size: 6rem; } 
 #main .sec01 .boxes { transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translate(-50%,-50%); } 
 #main .sec01 .slide-tit p.ani_01 { font-size: 7rem; } 
 #main .sec01 .slide-tit { line-height: 1.4; font-size: 3rem; } 
 
 #main .sec01 .loding-cov { display: none; } 

 .pat.pat-bag { top: 86px; width: 163px; } 

 } 

@media screen and (max-width:500px) { 
 #main .sec01 .slide-tit { bottom: 2rem; font-size: 2.5rem; padding-left: clac(var(--inner-padding) / 0.5); padding-right: var(--inner-padding); } 
 #main .sec01 .ani-tp { width: 58%;    } 
#main .sec01 .slide-tit .ani-tp {margin-top: 1rem; }

 .pat.pat-bag { width: 122px; } 
 } 
 
 
/*svg 애니메이션*/
#route { position: absolute; top: 0; right: 0; margin-top: 117px; z-index: 0; } 
#route.route-m { display: none; } 

@media screen and (max-width:1600px) { 
 #route { right: -166px; height: 2100px !important; } 
 } 
 @media screen and (max-width:1200px) { 
 #route { right: -455px; height: 1714px !important; } 
 } 
 @media screen and (max-width:768px) { 
 #route { right: -240%; height: 1500px !important; } 
 /* #route.route-pc { display: none; } 
 #route.route-m { display: block; right: -716px; height: 1514px !important; } */
 } 

 @media screen and (any-pointer:coarse) { 
 #main .sec01 .swiper-slide video.pc_video { display: none; } 
 #main .sec01 .swiper-slide video.m_video { display: block; } 
 } 

/*Introdution*/
#main .sec02 { position: relative; background: url(../img/main_bg.jpg); } 
#main .sec02 .inner { position: relative; padding-top: 162px; padding-bottom: 162px; z-index: 1; } 
#main .sec02 .tit-wr { position: sticky; top: 162px; margin-right: var(--inner-padding); text-align: right; float: right; } 
#main .sec02 .item-img { position: relative; width: 476px; height: 504px; border-radius: var(--border-radius); box-shadow: 17px 22px 19px #00000017; overflow: hidden; } 
#main .sec02 .item-img::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; z-index: -1; } 
#main .sec02 .item-img01::before { background: url(../img/sec02_img01.jpg)no-repeat center / cover; } 
#main .sec02 .item-img02::before { background: url(../img/sec02_img02.jpg)no-repeat center / cover; } 
#main .sec02 .item-img03::before { background: url(../img/sec02_img03.jpg)no-repeat center / cover; } 
#main .sec02 .item-img04::before { background: url(../img/sec02_img04.jpg)no-repeat center / cover; } 
#main .sec02 .item-img01.on { background: url(../img/sec02_img01.webp)no-repeat center / cover; } 
#main .sec02 .item-img02.on { background: url(../img/sec02_img02.webp)no-repeat center / cover; } 
#main .sec02 .item-img03.on { background: url(../img/sec02_img03.webp)no-repeat center / cover; } 
#main .sec02 .item-img04.on { background: url(../img/sec02_img04.webp)no-repeat center / cover; } 
#main .sec02 .box-wr { width: 1012px; margin-top: 253px; } 
#main .sec02 .box-wr .box:nth-child(2) { flex-direction: row-reverse; margin-top: 135px; margin-bottom: 135px; margin-left: auto; text-align: right; } 
#main .sec02 .box-wr .box:nth-child(3) { margin-left: var(--inner-padding); } 
#main .sec02 .box-wr .box:nth-child(4) { flex-direction: row-reverse; margin-top: 135px; margin-bottom: 36px; margin-left: auto; } 
#main .sec02 .txt-wr { margin:0 60px; } 
#main .sec02 .num { display: block; font-size: 1.6rem; font-family: 'DM Serif Text', serif; font-style: italic; letter-spacing: -0.64px; } 
#main .sec02 .tit { margin-bottom: 24px; font-size: 3rem; line-height: 36px; letter-spacing: -1px; } 
#main .sec02 .txt { color: #535353; font-size: 2rem; line-height: 28px; letter-spacing: -0.03em; } 

@media screen and (max-width:1600px) { 
 #main .sec02 .box-wr { width: 800px; } 
 #main .sec02 .item-img { width: 363px; height: 363px; } 
 #main .sec02 .txt-wr { width: calc(100% - 365px); margin: 0 32px; } 
 #main .sec02 .tit-wr { margin-right: calc(var(--inner-padding) * 0.5); } 
 } 
 
@media screen and (max-width:1300px) { 
 #main .sec02 .inner { padding-top: 5em; padding-bottom: 3em; } 
 #main .sec02 .tit-wr { margin-right: 0; } 
 #main .sec02 .box-wr .box:nth-child(2),
 #main .sec02 .box-wr .box:nth-child(4) { justify-content: flex-end; } 
 #main .sec02 .box-wr .box:nth-child(3) { margin-left: auto; } 
 } 

 @media screen and (max-width:1200px) { 
/*1024*/
#main .sec02 .tit-wr { position: initial; } 
#main .sec02 .box-wr { margin-top: 168px; } 
#main .sec02 .tit { font-size: 2.3rem; } 
#main .sec02 .txt { line-height: 1.5; } 
 } 
 @media (max-width:1024px) { 
 /*900*/
 #main .sec02 .box-wr .box:nth-child(2),
 #main .sec02 .box-wr .box:nth-child(4) { margin-top: 4em; margin-bottom: 4em; } 
 } 
 @media (max-width:900px) { 
 /*768*/
 #main .sec02 .box-wr { width: 100%; } 
 } 
 @media screen and (max-width:768px) { 
 #main .sec02 .tit-wr { text-align: left; float: none; } 
 #main .sec02 .box-wr { width: 100%; margin-top: 3em; } 
 #main .sec02 .box-wr .box { flex-direction: column; width: 70%; } 
 #main .sec02 .item-img { width: 100%; height: auto; padding-top: 88%; } 
 #main .sec02 .txt-wr { width: 100%; margin: 1em 0; } 
 #main .sec02 .txt { font-size: 1.8rem; } 
 #main .sec02 .tit { margin-bottom: 0.5em; } 
 #main .sec02 .box-wr .box:nth-child(2),
 #main .sec02 .box-wr .box:nth-child(4) { flex-direction: column; align-items: flex-end; } 
 #main .sec02 .box-wr .box:nth-child(4) { margin-bottom: 0; text-align: right; } 
 #main .sec02 .box-wr .box:nth-child(3) { align-items: flex-start; margin-left: inherit; } 

 } 



/*product*/
#main .sec03 { background-color: #fff; } 
#main .sec03 .inner { padding:5em calc(var(--inner-padding) + var(--main-padding)) 0em; } 
#main .sec03 .tit-wr { margin-bottom: 22px; } 
#main .sec03 .more_btn { margin-left: auto; margin-top: 3em; font-family: 'Montserrat'; font-weight: 500; } 
#main .sec03 .more_btn.m_more_btn { display: none; } 

@media screen and (max-width:1200px) { 
 #main .sec03 .inner { padding-top: 3em; } 
 #main .sec03 .b-tit { align-self: flex-end; } 
 
 } 
 
 @media screen and (max-width:768px) { 
 #main .sec03 .inner { padding: 5em var(--main-padding) 0em; text-align: center; } 
 #main .sec03 .tit-wr { flex-wrap: wrap; } 
 #main .sec03 .more_btn.pc_more_btn { display: none; } 
 #main .sec03 .more_btn.m_more_btn { display: inline-flex; margin-top: 0; } 
 #main .sec03 .sct_wrap { margin: 0; } 
 }