@charset "UTF-8";

#wrap.main {min-height: 100vh;}

#header .logo_black {display:none;}
#header .btn_search.black {background-image:url(/frontLayer/images/icons/ico_search02_black.svg);}
#header .btn_menu::before { background: url(/frontLayer/images/icons/ico_menu.svg) no-repeat center / 80% 80% !important;}
#header .btn_menu::after { color: #fff !important;}
#header .btn_menu.black::before { background: url(/frontLayer/images/icons/ico_menu_black.svg) no-repeat center / 80% 80% !important;}
#header .btn_menu.black::after { color: #000 !important;}
#header .gnb_area.black .depth_link {color:#000;}
#header .gnb_area.black .depth_link::after {background:#000;}

/*container*/
#mainContainer {overflow: hidden;}
#mainLocation {position:fixed;z-index:99;right: 0;top:0;height:100vh;mix-blend-mode:difference;}
#mainLocation ul {position:absolute;top: 50%;right: 68rem;width: 230px;height:calc(100vh - 360rem);border-right: 1px solid #fff;transform:translateY(-50%);text-align:right;}
#mainLocation ul:before {content: '';display:block;position:absolute;right:0;top:0;width:18rem;height: 1px;background: #fff;}
#mainLocation ul:after {content: '';display:block;position:absolute;right:0;bottom:0;width:18rem;height: 1px;background: #fff;}
#mainLocation ul li {position:absolute;left: 0;width: 100%;padding-right: 35rem;transition:all .8s;}
#mainLocation ul li a {display:block;position:relative;font-size:10px;color:#fff;line-height:1.4;letter-spacing:-0.5rem;transition:all .8s;}
#mainLocation ul li a:before {content: '';display:block;position:absolute;right:-35rem;top: 50%;width:18rem;height: 1px;background: #fff;transform:translateY(-50%);}
#mainLocation ul li a:after {content: '';display:none;position:absolute;right:-43rem;top: 50%;width: 15rem;height: 15rem;border-radius:50%;background: #fff;transform:translateY(-50%);}
#mainLocation ul li.active a {font-size: 18px;}
#mainLocation ul li.active a:before {display:none;}
#mainLocation ul li.active a:after {display: block;}
#mainLocation ul li.active {top:50%;transform:translateY(-50%);}
#mainLocation ul.type1 li:nth-child(2) {top:75%;}
#mainLocation ul.type1 li:nth-child(3) {top:calc(100% - 14px);}
#mainLocation ul.type1 li:nth-child(3) a:before {display:none;}
#mainLocation ul.type2 li:nth-child(1) {top:calc(0% - 7px);}
#mainLocation ul.type2 li:nth-child(1) a:before,
#mainLocation ul.type2 li:nth-child(3) a:before {display:none;}
#mainLocation ul.type2 li:nth-child(3) {top:calc(100% - 14px);}
#mainLocation ul.type3 li:nth-child(1) {top:calc(0% - 7px);}
#mainLocation ul.type3 li:nth-child(1) a:before {display:none;}
#mainLocation ul.type3 li:nth-child(2) {top:25%;}

.panel_container {position: relative;background:#F9F9F9;}
.panel {min-width: 100vw;position: relative;}
.panel_contents {background:#F9F9F9;}

.panel_text_ani {position:relative;width: 100%;height:100vh;z-index:2;}
.panel_text_ani .panel_text_inner {overflow:hidden;height:100%;position:static;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.panel_text_ani .text_ani {position:fixed;left: 50%;top:50%;width: 100%;height: 100vh;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);margin:210rem 0 0 90rem;}
.panel_text_ani .text_ani li {position: relative;left:0;width: 100%;-webkit-transform:scale(1);-webkit-transform-origin:center;transform:scale(1);transform-origin:center;}
.panel_text_ani .text_ani li[add=off] {-webkit-transform-origin:center;transform-origin:center;}
.panel_text_ani .text_ani li[add=on] {-webkit-transform-origin: left top;transform-origin: left top;}
.panel_text_ani .text_ani li svg {display:block;width: 400%;height: 335px;}
.panel_text_ani .text_ani li svg path {fill:#000;transition: all .3s;}
.panel_text_ani .text_ani li svg.active path {fill: #fff;}
.panel_text_ani .panel_text_inner.fixed {position:fixed;left: 0;top: 0;width: 100%;-webkit-transform: translate(0,0);transform: translate(0,0);}
#technology .panel_text_ani .text_ani li svg path {fill:#fff;}
#technology .panel_text_ani .text_ani li svg.active path {fill:#fff;}

.panel .panel_img_ani {position:relative;width: 100%;height:400vh;z-index:1;}
.panel .panel_img_ani .panel_img_ani_inner {overflow:hidden;height:100%;}
.panel .panel_img_ani .img_section {overflow: hidden;position:fixed;left: 0;top: 0;width: 100%;height: 100%;background-position:center center;background-size:cover;width: 100vw;height: 100vh;transform:translateX(100%);transition:transform 1s;}
.panel .panel_img_ani .img_section:nth-child(1) {z-index:1;}
.panel .panel_img_ani .img_section:nth-child(2) {z-index:2;}
.panel .panel_img_ani .img_section:nth-child(3) {z-index:3;}
.panel .panel_img_ani .img_section:nth-child(1).active {transform:translateX(0);}
.panel .panel_img_ani .img_section:nth-child(2).active {transform:translateX(33.33%);}
.panel .panel_img_ani .img_section:nth-child(3).active {transform:translateX(66.66%);}
.panel .panel_img_ani .img_section img.pc_bg {display:block;}
.panel .panel_img_ani .img_section img.mo_bg {display:none;}
#life .panel .panel_img_ani .img_section:nth-child(1) img.active {transform:translateX(-27%);}
#life .panel .panel_img_ani .img_section:nth-child(2) img.active {transform:translateX(-5%);}
#life .panel .panel_img_ani .img_section:nth-child(3) img {transform:translateX(-37%);}
#technology .panel .panel_img_ani .img_section:nth-child(3) img {transform:translateX(-65%);}
#expansion .panel .panel_img_ani .img_section:nth-child(2) img.active {transform:translateX(-22%);}
#expansion .panel .panel_img_ani .img_section:nth-child(3) img {transform:translateX(-47%);}

.panel .panel_img_ani .img_section img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;object-fit:cover;object-position:center center;transition: all 1s;}
.panel .panel_img_ani .img_section .text_content {position: relative;z-index: 1;display:flex;align-items:flex-start;justify-content:flex-end;flex-direction:column;height: 100vh;width: 33.3333%;padding:150rem 0 0 90rem;}
.panel .panel_img_ani .img_section .text_content .inner {height:285rem;}
.panel .panel_img_ani .img_section .text_content p {font-size: 30rem;color: #fff;opacity:0;transform:translateY(20rem);transition:all 1s;transition-delay: .5s;}
.panel .panel_img_ani .img_section .text_content span {display: block;margin-top: 8rem;font-size: 20rem;font-weight: 100;color: #fff;line-height:1.2;opacity:0;transform:translateY(20rem);transition:all 1s;transition-delay: 1s;word-break: keep-all;}
.panel .panel_img_ani .img_section.active .text_content p {transform:translateY(0);opacity:1;}
.panel .panel_img_ani .img_section.active .text_content span {transform:translateY(0);opacity:1;}
.panel .panel_img_ani .img_ani_item {position:relative;}
.panel .panel_img_ani .img_ani_item img {display:inline-block;box-shadow: 3px 3px 20px 10px rgba(0,0,0,0.2);}
.panel .panel_img_ani .img_ani_item p {position:absolute;bottom:15rem;width:100%;font-size:130rem;color:#fff;text-align:center;text-shadow:0 0 30rem rgba(0,0,0,0.1);}
.panel .panel_img_ani .img_ani_item.align_left,
.panel .panel_img_ani .img_ani_item.align_right {margin-bottom:130rem}
.panel .panel_img_ani .img_ani_item.align_left {text-align:left;}
.panel .panel_img_ani .img_ani_item.align_right {text-align:right;}
.panel .panel_img_ani .img_ani_item.align_left p {text-align:center;}
.panel .panel_img_ani .img_ani_item.align_right p {text-align:center;padding-right:300rem;}
.panel .panel_img_ani .img_ani_item.align_left.img_ani_item4_2 p {bottom: -100rem;padding-left: 295rem;text-align:left;}
.panel .panel_img_ani .img_ani_item.align_right.img_ani_item4_3 p {right: -70rem;bottom: 550rem;padding-right:0;text-align:right;}
.panel_video {overflow:hidden;height: 300vh;background:#000;}
.panel_video .video_content {position:absolute;left: 0;top: 0;width: 100%;height: 100vh;}
.panel_video .video_content .video {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;}
.panel_video .video_content .video.fixed {position:fixed;}
.panel_video .video_content .video.port {width:100%;max-width:100vw;height:auto;}
.panel_video .video_content .video.land {width:auto;height:100%;}
.panel_video .video_content .text_wrap {display: flex;overflow: hidden;position:absolute;left: 0;top: 0;z-index:2;width: 100vw;height: 100vh;justify-content:center;align-items:center;flex-direction:column;text-align:center;}
.panel_video .video_content .text_wrap.fixed {position:fixed;}
.panel_video .video_content .text_wrap p {font-size:52rem;font-weight: 700;line-height:1.15;color: #fff;text-shadow:0 4rem 4rem rgba(0,0,0,0.25);opacity:0;transform:translateY(80rem);transition:opacity 1s, transform 2s;word-break:keep-all;}
.panel_video .video_content .text_wrap span {display:block;margin-top: 40rem;font-size:30rem;font-weight: 500;line-height:1.15;color:#fff;word-break:keep-all;}
.panel_video .video_content .text_wrap.active p {opacity:1;transform:translateY(0);transition-delay:2s;}
.panel_swiper {display: flex;flex-direction:column;justify-content:center;padding:120rem 126rem 130rem;background: #F9F9F9;}
.panel_swiper .swiper-button-next {right:-40rem;top:50%;width:27rem;height:52rem;margin-top:-12rem;background-size: 27rem 52rem;background-repeat: no-repeat;background-image:url(/frontLayer/images/icons/arw_slider_next_lg.svg);}
.panel_swiper .swiper-button-next:after {display: none;}
.panel_swiper h2 {margin-bottom: 34rem;font-size: 34rem;font-weight: 700;}
.panel_swiper > div {position:relative;}
.panel_swiper > div .inner {overflow:hidden;width: calc(100% - 20rem);padding:5rem 0 5rem 10rem;}
.panel_swiper .products_swiper .swiper-slide {padding: 7rem;}
.panel_swiper .products_swiper .swiper-slide .product {position: relative;width: 296rem;height: 400rem;padding: 40rem 0 0 40rem;margin: 0 auto;background:#fff;border-radius:30rem;box-shadow:0 0 10px 5px rgba(0,0,0,0.05);}
.panel_swiper .products_swiper .swiper-slide .product .name {font-size:26rem;font-weight: 500;}
.panel_swiper .products_swiper .swiper-slide .product img {position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;}
.panel_swiper .download_swiper {margin-top: 80rem;}
.panel_swiper .download_swiper .swiper-slide .download {width: 380rem;height: 200rem;position: relative;overflow: hidden;margin: 0 auto;border-radius:30rem;}
.panel_swiper .download_swiper .swiper-slide .download .bg {position: absolute;left: 0;top: 0;transform: scale(1.3); width: 100%; height: 100%; background-image: url('/frontLayer/images/bg/visual_support.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; transition: transform 1.8s; transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);}
.panel_swiper .download_swiper .swiper-slide .download .bg:after {content: '';display:block;position:absolute;left: 0;top: 0;width: 100%;height: 100%;background:rgba(0,0,0,0.6);}
.panel_swiper .download_swiper .swiper-slide .download span {display:inline-block;position:absolute;left:50%;top: 50%;padding-right: 25rem;font-size: 26rem;font-weight: 500;color: #fff;transform: translate(-50%,-50%);}
.panel_swiper .download_swiper .swiper-slide .download span:after {content: '';display: block;position:absolute;right:0;top:50%;width: 11rem;height: 18rem;margin-top: -11rem;background:url(/frontLayer/images/icons/arw_right_sm.svg) no-repeat center/100% 100%;transition:all .3s;}
.panel_swiper .download_swiper .swiper-slide .download:hover .bg {transform: scale(1.01);}
.panel_swiper .download_swiper .swiper-slide .download:hover span:after {transform:translateX(10rem);}

#mainPanel2 {z-index:2;background:#000;overflow: hidden;}
#mainPanel2.active {background:#F9F9F9;}
#mainPanel4 {z-index:4;background:#fff;overflow: hidden;}
#mainPanel4.active {background:#000;}
#mainPanel6 {z-index:6;background:#000;overflow: hidden;}
#mainPanel6.active {background:#F9F9F9;}
#life {z-index:10;}
#technology {z-index:11;}
#expansion {z-index:12;}
#footerContent {z-index:13;background:#F9F9F9;}

.ico_scroll {position:fixed;left: 50%;bottom: 33rem;z-index: 99;transform:translateX(-50%);animation: bounce .8s infinite linear;mix-blend-mode: difference;}
.ico_scroll svg {width: 46rem;}
.btn_tooltip_kakao {position:fixed;right: 50rem;bottom: 50rem;z-index:100;width: 80rem;border-radius: 50%;box-shadow: 0rem 2rem 5rem rgba(0, 0, 0, 0.3);}
.btn_tooltip_kakao svg {width: 100%;}
.btn_tooltip_kakao img {width: 100%}

.btn_tooltip_smartstore {position:fixed;right: 140rem;bottom: 50rem;z-index:100;width: 80rem;border-radius: 50%;box-shadow: 0rem 2rem 5rem rgba(0, 0, 0, 0.3);}

@media all and (max-width: 1024px){
	/*container*/
	#mainLocation {display:none;}
	
	.panel_text_ani .text_ani {left: 0;top: 0;transform: translate(0);height: 20vh;margin:100rem 0 0 65rem;}
	.panel_text_ani .text_ani li {-webkit-transform-origin: left top;transform-origin: left top;-webkit-transform:scale(0.3);transform:scale(0.3);}
	.panel_text_ani .text_ani li svg {height: 700rem;width:calc(600% - 65rem);}
	#technology .panel_text_ani .text_ani li svg path {fill:#fff;}

	.panel .panel_img_ani {height: 600vh;}
	.panel .panel_img_ani .img_section {transform:translateX(0);transform:translateY(100%);}
	.panel .panel_img_ani .img_section:nth-child(1).active {transform:translateX(0);transform:translateY(0);}
	.panel .panel_img_ani .img_section:nth-child(2).active {transform:translateX(0);transform:translateY(0);}
	.panel .panel_img_ani .img_section:nth-child(3).active {transform:translateX(0);transform:translateY(0);}
	.panel .panel_img_ani .img_section img.pc_bg {display:none;}
	.panel .panel_img_ani .img_section img.mo_bg {display:block;}
	#life .panel .panel_img_ani .img_section:nth-child(1) img.active {transform:translateX(0);}
	#life .panel .panel_img_ani .img_section:nth-child(2) img.active {transform:translateX(0);}
	#life .panel .panel_img_ani .img_section:nth-child(3) img {transform:translateX(0);}
	#technology .panel .panel_img_ani .img_section:nth-child(3) img {transform:translateX(0);}
	#expansion .panel .panel_img_ani .img_section:nth-child(2) img.active {transform:translateX(0);}
	#expansion .panel .panel_img_ani .img_section:nth-child(3) img {transform:translateX(0);}

	.panel .panel_img_ani .img_section .text_content {width: 100%;padding: 0 45rem 65rem 65rem}
	.panel .panel_img_ani .img_section .text_content .inner {height: auto;}
	.panel .panel_img_ani .img_section .text_content p {font-size:45rem;}
	.panel .panel_img_ani .img_section .text_content span {font-size:34rem;line-height:1.32;}
	.panel_swiper {padding:140rem 40rem 150rem;}
	.panel_swiper .swiper-button-next {right:-20rem;margin-top:12rem;}
	.panel_swiper h2 {margin-bottom: 60rem;font-size:36rem;text-align:center;}
	.panel_swiper > div .inner {width: 100%;}
	.panel_swiper .products_swiper .swiper-slide {padding:15rem;}
	.panel_swiper .products_swiper .swiper-slide .product {width: 260rem;height: 350rem;padding:30rem 0 0 30rem;}
	.panel_swiper .products_swiper .swiper-slide .product .name {font-size:28rem;}
	.panel_swiper .download_swiper {margin-top: 155rem;}
	.panel_swiper .download_swiper .swiper-slide .download {width: 260rem;height: 200rem;}

	.ico_scroll {display: none;}

	#mainPanel2 {background:#F9F9F9;}
	#mainPanel4 {background:#000;}
	#mainPanel6 {background:#F9F9F9;}
}
@media all and (max-width: 575px){
	.panel_text_ani .text_ani li {-webkit-transform:scale(0.15);transform:scale(0.15);}
	.panel .panel_img_ani .img_section .text_content span br {display:none;}
}

@keyframes bounce { 
	0% {transform:translate(-50%,0);} 
	50% {transform:translate(-50%,-20rem);}
	100% {transform:translate(-50%,0);} 
}

.btn_tooltip_contactus {
    position: fixed;
    right: 240rem;
    bottom: 50rem;
    z-index: 100;
    width: 80rem;
    border-radius: 50%;
    /*box-shadow: 0rem 2rem 5rem rgba(0, 0, 0, 0.3);*/
}

.btn_tooltip_contactus_en {
    position: fixed;
    right: 50rem;
    bottom: 50rem;
    z-index: 100;
    width: 80rem;
    border-radius: 50%;
    /*box-shadow: 0rem 2rem 5rem rgba(0, 0, 0, 0.3);*/
}