.clipping-mask { position: relative; width: 100%; height: 100%; overflow: hidden; transform: scale(1.05); display: flex; justify-content: center; align-items: center; } svg.clip-shape{transform: scale(1);display: block;position: absolute} .masked-image { width: 100%; height: 100%; object-fit: cover; clip-path: url(#customClip); } .clip-shape{position: absolute;width: 100%;height: 100%;top: 0;left: 0} .clip-shape clipPath{transform-origin: center center; transform: translate(0%, 0%) scale(0.0, 0.0);} .clip-shape path{transform: matrix(1, 0, 0, 1, 715, 285);transform-origin: center center} /*translate(-121%, -264%) scale(16)*/ /*font-family: "Outfit", sans-serif;*/ .location{position: fixed;z-index: 99;top: 50%;transform: translateY(-50%);left: 50px;} .location ul{width: 26px;background: rgba(255,255,255,0.1);border-radius: 13px;padding: 30px 0} .location ul li{margin-bottom: 30px;position: relative} .location ul li strong{position: absolute;white-space: nowrap;font-size: 16px;color: #FFFFFF;font-weight: 300;font-family: 'Outfit', 'Pretendard', sans-serif;left: 36px;top: 50%;transform: translateY(-50%);opacity: 0;transition: 0.7s} .location ul li.on strong{opacity: 1} .location ul li i{display: block;opacity: 0.2;background: #fff;display: block;width: 6px;height: 6px;border-radius: 50%;margin: 0 auto} .location ul li.on i{opacity: 1} .location ul li:last-child{margin-bottom: 0} .main_visual{position: relative;height: 100vh;} .main_visual .vis_wrap{position: absolute;top: 0;left: 0;width: 100%;height: 100vh;overflow: hidden} .main_visual .base_bg{position: relative} .main_visual .base_bg img{display: block;height: 100vh} .main_visual .base_bg:after{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: rgba(0,86,96,0.25);backdrop-filter: blur(50px)} .main_visual .bubble_center{position: absolute;top: 50%;left: 50%;opacity: 0} .main_visual .bubble_center .b_w{position: relative;} .main_visual .bubble_center .b_w .b1{ will-change: transform, mix-blend-mode; } .main_visual .bubble_center .b_w .b2{position: absolute;top: 0;left: 0; } .main_visual .bubble_center .b_w img{transform: translate(10%,-90%);width: 420px} .main_visual .bubble{position: absolute;top: 50%;left: 50%;} .main_visual .bubble .b_w{position: relative;} .main_visual .bubble .b_w .b11{will-change: transform, mix-blend-mode; } .main_visual .bubble .b_w .b12{position: absolute;top: 0;left: 0; } .main_visual .bubble01 .b_w img{width: 134px} .main_visual .bubble02 .b_w img{width: 244px} .main_visual .bubble03 .b_w img{width: 92px} .main_visual .bubble01{margin-left: -833px;margin-top: -265px} .main_visual .bubble02{margin-left: -451px;margin-top: 60px} .main_visual .bubble03{margin-left: 655px;margin-top: 140px} .main_visual .ver_line{position: absolute;height: 50%;left: 50%;z-index: 5} .main_visual .ver_line i{display: block;height: 100%;width: 1px;background: rgba(255,255,255,0.5);position: relative} .main_visual .ver_line i:before{content: '';display: block;height: 1px;position: absolute;width: 120px;left: 50%;margin-left: -60px;background: rgba(255,255,255,0.5);} .main_visual .ver_line01{top: 0} .main_visual .ver_line02{bottom: 0} .main_visual .ver_line01 i:before{bottom: 0} .main_visual .ver_line02 i:before{top: 0} .main_visual .hor_line{position: absolute;width: 0%;top: 50%;z-index: 5} .main_visual .hor_line i{display: block;width: 100%;height: 1px;background: rgba(255,255,255,0.5);position: relative} .main_visual .hor_line i:before{content: '';display: block;width: 1px;position: absolute;height: 120px;top: 50%;margin-top: -60px;background: rgba(255,255,255,0.5);} .main_visual .hor_line01{left: 0} .main_visual .hor_line02{right: 0} .main_visual .hor_line01 i:before{right: 0;left: auto} .main_visual .hor_line02 i:before{left: 0} .main_visual .family{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1;opacity: 0} .main_visual .slogan{position: absolute;z-index: 11;top: 50%} .main_visual .slogan01{left: 60px; margin-top: -245px;} .main_visual .slogan01{transform: translateX(90px)} .main_visual .slogan02{transform: translateX(-90px)} .main_visual .slogan02{right: 60px;margin-top: 115px;text-align: right} .main_visual .slogan .s02{transform: translateX(120px)} .main_visual .slogan .s04{transform: translateX(-150px)} .main_visual .slogan .s05{transform: translateX(-200px)} .main_visual .slogan p{font-family: "Outfit", sans-serif;color: #fff;font-size: 70px;line-height: 0.95} .main_visual .vis_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 1920px;height: 970px;opacity: 0} .main_visual .img_w01{position: absolute;z-index: 10;top: 50%;left: 50%;transform: translate(-50%,-50%) scale(0.0);margin-top: -11px;margin-left: 0px;opacity: 0} .main_visual .img_w01 > div{opacity: 0} .main_visual .img_w01 > div svg{display: block} .main_visual .bg{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)} .main_visual .land_wrap{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 50;opacity: 0;background: #fff} .main_visual .land_wrap .land_in{position: relative;width: 100%;height: 100%;transform: scale(0.85) translateY(10%)} /*.main_visual .land_wrap .land_in{transform: scale(0.85);position: relative;width: 100%;height: 100%}*/ .main_visual .land_wrap .land_title{position: relative;width: 320px;height: 320px;display: flex;align-items: center;justify-content: center;background: #4CD0DE;border-radius: 50%;z-index: 20} .main_visual .land_wrap .land_title .land_image{position: absolute} .main_visual .land_wrap .land_con01 .land_title .land_image{top: -24px;right: -4px} .main_visual .land_wrap .land_con02 .land_title .land_image{top: -20px;right: -4px} .main_visual .land_wrap .land_con03 .land_title .land_image{right: -4px;bottom: -4px} .main_visual .land_wrap .land_title .land_image img{width: 90px} .main_visual .land_wrap .land_con01 .land_title .land_image img{width: 110px} .main_visual .land_wrap .land_title .w{border: 1px solid rgba(255,255,255,0.5);background: rgba(255,255,255,0.1);padding: 10px 30px;border-radius: 50px;} .main_visual .land_wrap .land_title .w strong{display: block;color: #FFFFFF;font-size: 28px;text-align: center} .main_visual .land_wrap .land_con03 .land_title{width: 240px;height: 240px;background: #3CB5C1} .main_visual .land_wrap .land_con02 .land_title{width: 200px;height: 200px;background: #4CDECA} .main_visual .land_wrap .land_list .tit_in{width: 150px;height: 150px;position: relative;align-items: center;justify-content: center;display: flex;z-index: 3} .main_visual .land_wrap .land_list .tit_in:before{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;border: 4px solid #4CDECA;box-sizing: border-box;border-radius: 50%} .main_visual .land_wrap .land_con01 .land_list .tit_in:before{border-color: #4CD0DE} .main_visual .land_wrap .land_con02 .land_list .tit_in:before{border-color: #3CB5C1} .main_visual .land_wrap .land_con03 .land_list .tit_in:before{border-color: #4CDECA} .main_visual .land_wrap .land_list .tit_in strong{display: block;font-size: 22px;color: #444444;position: relative;z-index: 3;font-weight: 600;text-align: center} .main_visual .land_wrap .land_list .tit_in i{position: absolute;width:300px;height: 1px;position: absolute;background: #4CD0DE;z-index: -1} .main_visual .land_wrap .land_list .list_title{width: 120px;height: 120px;display: flex;position: relative;align-items: center;justify-content: center} .main_visual .land_wrap .land_list .list_title:before{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #E6F2F2;border-radius: 50%;z-index: 1} .main_visual .land_wrap .land_list .list_title strong{position: relative;z-index: 2;font-size: 18px;color: #6F8282;font-weight: 500;text-align: center} .main_visual .land_wrap .land_con{position: absolute;top: 50%;left: 50%} .main_visual .land_wrap .land_con01{margin-top: -257px;margin-left: -278px;z-index: 3} .main_visual .land_wrap .land_con02{margin-top: -160px;margin-left: 26px;} .main_visual .land_wrap .land_con03{margin-top: -19px;margin-left: -87px;z-index: 2} .main_visual .land_wrap .land_list > div{position: absolute;top: 0;left: 0} .main_visual .land_wrap .land_list .l_list .list{position: absolute;top: 0;left: 0} /*.main_visual .land_wrap{opacity: 1}*/ .main_visual .land_wrap .land_title_in{position: absolute;bottom: 60px;left: 60px;z-index: 11} .main_visual .land_wrap .land_title_in strong{font-size: 30px;color: #000;font-family: "Outfit", sans-serif;;font-weight: 500} .main_visual .land_wrap .bg_bubble{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) scale(0.9)} .main_visual .land_wrap .land_con01{transform: translate(-10%,-10%)} .main_visual .land_wrap .land_con02{transform: translate(10%,-10%)} .main_visual .land_wrap .land_con03{transform: translate(0%,10%)} .main_visual .land_wrap .land_con01 .tit{position: relative;z-index: 10} .main_visual .land_wrap .land_con01 .land_list01 .tit{transform: translate(-15%,-15%);position: relative;z-index: 10} .main_visual .land_wrap .land_con01 .land_list02 .tit{transform: translate(-15%,15%);position: relative;z-index: 10} .main_visual .land_wrap .land_con03 .land_list01 .tit{transform: translate(-10%,10%);position: relative;z-index: 10} .main_visual .land_wrap .land_con03 .land_list02 .tit{transform: translate(10%,10%);position: relative;z-index: 10} .main_visual .land_wrap .land_con02 .land_list01 .tit{transform: translate(10%,-10%);position: relative;z-index: 10} .main_visual .land_wrap .land_con02 .land_list02 .tit{transform: translate(10%,-5%);position: relative;z-index: 10} .main_visual .land_wrap .land_con02 .land_list03 .tit{transform: translate(10%,10%);position: relative;z-index: 10} .main_visual .land_wrap .land_con01 .land_list01 .list01{transform: translate(-15%,-15%);} .main_visual .land_wrap .land_con01 .land_list01 .list02{transform: translate(-15%,-6%);} .main_visual .land_wrap .land_con01 .land_list01 .list03{transform: translate(-15%,10%);} .main_visual .land_wrap .land_con01 .land_list02 .list01{transform: translate(-15%,-6%);} .main_visual .land_wrap .land_con01 .land_list02 .list02{transform: translate(-15%,15%);} .main_visual .land_wrap .land_con01 .land_list02 .list03{transform: translate(-15%,15%);} .main_visual .land_wrap .land_con03 .land_list01 .list01{transform: translate(-15%,15%);} .main_visual .land_wrap .land_con03 .land_list01 .list02{transform: translate(15%,15%);} .main_visual .land_wrap .land_con01 .land_list01{margin-top: -3px;margin-left: -230px;} .main_visual .land_wrap .land_con01 .land_list02{margin-left: -216px;margin-top: 203px;;} .main_visual .land_wrap .land_con01 .land_list04{margin-top: -155px;margin-left: -50px;} .main_visual .land_wrap .land_con01 .land_list03{margin-top: 368px;margin-left: -59px;} .main_visual .land_wrap .land_con02 .land_list01{margin-top: -144px;margin-left: 294px;} .main_visual .land_wrap .land_con02 .land_list02{margin-top: 38px;margin-left: 354px;} .main_visual .land_wrap .land_con02 .land_list03{margin-top: 221px;margin-left: 316px;} .main_visual .land_wrap .land_con03 .land_list01{margin-top: 190px;margin-left: -40px;z-index: 20} .main_visual .land_wrap .land_con03 .land_list02{margin-top: 200px;margin-left: 268px;} .main_visual .land_wrap .land_con01 .land_list04 .list01{margin-left: 4px;margin-top: -143px;} .main_visual .land_wrap .land_con01 .land_list04 .list02{margin-left: -117px;margin-top: -51px;} .main_visual .land_wrap .land_con01 .land_list01 .list01{margin-left: -66px;margin-top: -143px;} .main_visual .land_wrap .land_con01 .land_list01 .list02{margin-left: -177px;margin-top: -51px;} .main_visual .land_wrap .land_con01 .land_list01 .list03{margin-left: -215px;margin-top: 89px;} .main_visual .land_wrap .land_con01 .land_list02 .list01{margin-left: -183px;margin-top: 28px;} .main_visual .land_wrap .land_con01 .land_list02 .list02{margin-left: -145px;margin-top: 173px;;} .main_visual .land_wrap .land_con01 .land_list02 .list03{margin-left: -51px;margin-top: 281px;} .main_visual .land_wrap .land_con03 .land_list01 .list01{margin-left: -100px;margin-top: 135px;} .main_visual .land_wrap .land_con03 .land_list01 .list02{margin-left: 130px;margin-top: 138px;} .main_visual .land_wrap .land_con01 .land_list03 .list03 {margin-left: -34px;margin-top: 174px;} .main_visual .land_wrap .bg_line{position: absolute;top: 115px;} .main_visual .land_wrap .bg_line01{left: 60px} .main_visual .land_wrap .bg_line02{right: 60px} .main_visual .land_wrap .land_list .tit_in:before{transition: 0.7s} .main_visual .land_wrap .land_list .tit_in:hover:before{transform: scale(1.05)} .main_visual .land_wrap .land_list .tit_in strong{transition: 0.7s} .main_visual .land_wrap .land_list .tit_in:hover strong{transform: scale(1.05)} .main_visual .land_wrap .land_list .list_title:before{transition: 0.7s} .main_visual .land_wrap .land_list .list_title:hover:before{transform: scale(1.05)} .main_visual .land_wrap .land_list .list_title strong{transition: 0.7s} .main_visual .land_wrap .land_list .list_title:hover strong{transform: scale(1.05)} .main_visual .land_wrap .land_list .tit_in{transition: 0.7s} .main_visual .land_wrap .land_list .on .tit_in{transform: scale(1.05)} .main_visual .land_wrap .land_title{transition: 0.7s} .main_visual .land_wrap .land_title:hover{transform: scale(1.05)} .main_visual .land_wrap .land_title.on{transform: scale(1.05)} .main_visual .land_wrap .land_con01 .land_list .land_list01 .tit_in i{left: 90%;transform-origin: left top;transform: rotate(28deg);top: 67%} .main_visual .land_wrap .land_con01 .land_list .land_list04 .tit_in i{left: 51%;transform-origin: left top;transform: rotate(67deg);top: 67%;} .main_visual .land_wrap .land_con01 .land_list .land_list03 .tit_in i{left: 40%;transform-origin: left top;transform: rotate(-52deg);top: 57%} .main_visual .land_wrap .land_con01 .land_list .land_list02 .tit_in i{left: 86%;transform-origin: left top;transform: rotate(-22deg);top: 47%;} .main_visual .land_wrap .land_con02 .land_list .land_list01 .tit_in i{right: 86%;transform-origin: right top;transform: rotate(-31deg);top: 72%;} .main_visual .land_wrap .land_con02 .land_list .land_list02 .tit_in i{right: 86%;transform-origin: right top;transform: rotate(1deg);top: 48%;;} .main_visual .land_wrap .land_con02 .land_list .land_list03 .tit_in i{right: 86%;transform-origin: right top;transform: rotate(34deg);top: 29%;} .main_visual .land_wrap .land_con03 .land_list .land_list02 .tit_in i{right: 86%;transform-origin: right top;transform: rotate(38deg);top: 25%;} .main_visual .land_wrap .land_list .l_list .list i{left: 40%;transform-origin: left top;transform: rotate(-101deg);top: 17%;position: absolute} .main_visual .land_wrap .land_list .land_list02 .l_list .list i{position: absolute;width:200px;height: 1px;position: absolute;background: #4CD0DE} .main_visual .land_wrap .land_list .land_list01 .l_list .list i{position: absolute;width:160px;height: 1px;position: absolute;background: #4CD0DE} .main_visual .land_wrap .land_list .land_list04 .l_list .list i{position: absolute;width:160px;height: 1px;position: absolute;background: #4CD0DE} .main_visual .land_wrap .land_list .land_list03 .l_list .list i{position: absolute;width:160px;height: 1px;position: absolute;background: #4CD0DE} .main_visual .land_wrap .land_list .l_list .list i{left: 100%;transform-origin: left top;transform: rotate(9deg);top: 57%} .main_visual .land_wrap .land_con01 .land_list01 .l_list .list01 i{left: 78%;transform-origin: left top;transform: rotate(64deg);top: 91%;} .main_visual .land_wrap .land_con01 .land_list01 .l_list .list02 i{left: 96%;transform-origin: left top;transform: rotate(20deg);top: 67%;} .main_visual .land_wrap .land_con01 .land_list01 .l_list .list03 i{left: 89%;transform-origin: left top;transform: rotate(-15deg);top: 43%;} .main_visual .land_wrap .land_con01 .land_list02 .l_list .list01 i{left: 91%;transform-origin: left top;transform: rotate(-4deg);top: 47%;} .main_visual .land_wrap .land_con01 .land_list02 .l_list .list02 i{left: 83%;transform-origin: left top;transform: rotate(-45deg);top: 15%;} .main_visual .land_wrap .land_con01 .land_list02 .l_list .list03 i{transform-origin: right top;transform: rotate(103deg);top: 49%;left: -113%;} .main_visual .land_wrap .land_con03 .land_list01 .l_list .list01 i{left: 44%;transform-origin: left top;transform: rotate(-42deg);top: 35%;} .main_visual .land_wrap .land_con03 .land_list01 .l_list .list02 i{left: 19%;transform-origin: left top;transform: rotate(-133deg);top: 18%;} .main_visual .land_wrap .land_con01 .land_list03 .l_list .list03 i{left: 58%;transform-origin: left top;transform: rotate(-73deg);top: 18%;} .main_visual .land_wrap .land_con01 .land_list04 .l_list .list01 i{left: 78%;transform-origin: left top;transform: rotate(84deg);top: 91%;} .main_visual .land_wrap .land_con01 .land_list04 .l_list .list02 i{left: 96%;transform-origin: left top;transform: rotate(20deg);top: 67%;} .main_visual .land_wrap .bubble2{position: absolute;left: 50%;top: 50%; margin-left: -490px; margin-top: -390px;transform: scale(1.05)} .main_visual .scroll{position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);z-index:300;opacity: 0} .main_visual .scroll strong{display: block;font-size: 16px;color: #FFFFFF;font-weight: 300;font-family: 'Outfit', 'Pretendard', sans-serif;margin-bottom: 5px;} .main_visual .scroll i{display: block;text-align: center} /* .main_visual .scroll{opacity: 0;transition: 2s} .main_visual.on .scroll{opacity: 1;transition-delay: 2s} */ .main_visual .slogan p div div{opacity: 0;transition: 2.5s;transition-delay: 0s} .main_visual.on .slogan p div div{opacity: 1;} .main_visual.on .slogan .s01 p div div:nth-child(2){transition-delay: 0.2s} .main_visual.on .slogan .s01 p div div:nth-child(6){transition-delay: 0.2s} .main_visual.on .slogan .s02 p div div:nth-child(1){transition-delay: 0.2s} .main_visual.on .slogan .s02 p div div:nth-child(5){transition-delay: 0.2s} .main_visual.on .slogan .s02 p div div:nth-child(9){transition-delay: 0.2s} .main_visual.on .slogan .s02 p div div:nth-child(13){transition-delay: 0.2s} .main_visual.on .slogan .s03 p div div:nth-child(2){transition-delay: 0.2s} .main_visual.on .slogan .s03 p div div:nth-child(1){transition-delay: 0.4s} .main_visual.on .slogan .s03 p div div:nth-child(4){transition-delay: 0.2s} .main_visual.on .slogan .s04 p div div:nth-child(2){transition-delay: 0.2s} .main_visual.on .slogan .s04 p div div:nth-child(1){transition-delay: 0.4s} .main_visual.on .slogan .s04 p div div:nth-child(4){transition-delay: 0.2s} .main_visual.on .slogan .s04 p div div:nth-child(5){transition-delay: 0.6s} .main_visual.on .slogan .s04 p div div:nth-child(6){transition-delay: 0.2s} .main_visual.on .slogan .s04 p div div:nth-child(8){transition-delay: 0.4s} .main_visual.on .slogan .s04 p div div:nth-child(9){transition-delay: 0.6s} .main_visual.on .slogan .s04 p div div:nth-child(11){transition-delay: 0.5s} .main_visual.on .slogan .s05 p div div:nth-child(1){transition-delay: 0.5s} .main_visual.on .slogan .s05 p div div:nth-child(3){transition-delay: 0.3s} .main_visual.on .slogan .s05 p div div:nth-child(5){transition-delay: 0.2s} .main_visual.on .slogan .s05 p div div:nth-child(6){transition-delay: 0.6s} .main_visual.on .slogan .s05 p div div:nth-child(7){transition-delay: 0.1s} .main_visual.on .slogan .s05 p div div:nth-child(9){transition-delay: 0.3s} .main_visual.on .slogan .s05 p div div:nth-child(10){transition-delay: 0.1s} .main_visual.on .slogan .s05 p div div:nth-child(11){transition-delay: 0.7s} .main_visual.on .slogan .s05 p div div:nth-child(13){transition-delay: 0.4s} .main_visual.on .slogan .s02 p{transition-delay: 1s;} .main_visual.on .slogan .s03 p{transition-delay: 0s;} .main_visual.on .slogan .s04 p{transition-delay: 1s;} .main_visual.on .slogan .s05 p{transition-delay: 2s;} .main_visual .bubble_center{transition: 2.5s} .main_visual.on .bubble_center{transition: 2s;opacity: 1} .main_visual .bubble{transition: 2.5s;opacity: 0} .main_visual.on .bubble{transition: 2s;opacity: 1} .main_visual.on .bubble02{transition-delay: 0.7s} .main_visual.on .bubble03{transition-delay: 1.4s} .eng{ font-family: 'Outfit', 'Pretendard', sans-serif; } /* Product */ #main .con01{ border-radius: 60px; background-color: #F4F9F9; padding-top: 80px; height: 100vh; position: relative;z-index: 200} #main .con01 .product{ display: flex; height: calc(100% - 80px); width: 100%; border-top: 1px solid #e9e9e9; } #main .con01 .product > div{ width: 50%; height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; } #main .con01 .product > div:nth-child(1){border-right: 1px solid #e9e9e9} #main .con01 .product > div:nth-child(2){border-left: 1px solid #e9e9e9;margin-left: -1px} #main .con01 .product > div:before{ content:""; display: block; width: 1400px; height: 1400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.3); border-radius: 50%; background-color: #4CD0DE; opacity: 0; transition: transform .5s, opacity .5s; } #main .con01 .product > div a{ display: block; display: flex; flex-flow: column; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; z-index: 1; gap: 55px; transition: gap .5s; } #main .con01 .product > div .pt_img{ position: relative; } #main .con01 .product > div .pt_img .circle{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; } #main .con01 .product > div .pt_img .circle img{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: opacity .5s; } #main .con01 .product > div .pt_img .circle .cir02{ opacity: 0; } #main .con01 .product > div .pt_img .circle:after{ width: 80%; height: 80%; content:""; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background-color: #E8F2F2; transition: background-color .5s; } #main .con01 .product > div .pt_img .more{ width: 180px; height: 180px; border-radius: 50%; display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 10px; position: absolute; right: -20px; bottom: 50px; z-index: 5; background: rgba(255,255,255,0.5); backdrop-filter: blur(20px); opacity: 0; transition: opacity .5s; } #main .con01 .product > div a:hover .pt_img .circle .cir02{ opacity: 1; } #main .con01 .product > div a:hover .pt_img .circle .cir01{ opacity: 0; } #main .con01 .product > div a:hover{ gap: 35px; } #main .con01 .product > div a:hover .txt strong{ color: #fff; gap: 60px;} #main .con01 .product > div a:hover .txt p{ color: #fff; } #main .con01 .product > div a:hover .txt strong svg path{ stroke: #fff; } #main .con01 .product > div a:hover .pt_img .more{ opacity: 1; } #main .con01 .product > div .pt_img img{display: block; max-width: 100%; position: relative; z-index: 2; filter: drop-shadow(0 0 60px rgba(0,111,123,0.25))} #main .con01 .product > div .txt{ text-align: center; } #main .con01 .product > div .txt strong{ font-size: #333333; display: flex; align-items: center; gap: 40px; font-size: 70px; font-weight: 400; margin-bottom: 14px; transition: color .5s, gap .5s; } #main .con01 .product > div .txt p{ font-size: 18px; font-weight: 500; color: #747474; transition: color .5s; } #main .con01 .product > div:hover:before{ transform: translate(-50%,-50%) scale(1); opacity: 1; } #main .con01 .product > div a:hover .pt_img .circle:after{ background-color: #42C4D2 } #main .con01 .product > div a:hover .pt_img .circle svg{ fill: linear-gradient(90deg, rgba(66,196,210,1) 0%, rgba(66,196,210,0) 50%, rgba(66,196,210,1) 100%); } #main .con01 .product > div a .txt strong svg path{ transition: stroke .5s; } /* con02 */ #main .con02 .m_tit{ width: calc(100% - 400px); border-top: 1px solid #E9E9E9} #main .con02{ width: 100%; height: 100vh; display: flex; } #main .con02 > div{ width: 50%; padding-top: 180px;} #main .con02 > div:nth-child(1){border-right: 1px solid #E9E9E9} #main .con02 > div.video .wrap{border-bottom: 1px solid #E9E9E9; } #main .con02 > div.video .wrap img{width: 100%} #main .con02 > div.video .wrap{border-top: 1px solid #E9E9E9;padding: 40px 60px } #main .con02 > div .top{display: flex;align-items: center;gap: 10px} #main .con02 > div.news .wrap{border-top: 1px solid #E9E9E9;} #main .con02 > div.video .wrap{border-bottom: 1px solid #E9E9E9; display: flex;align-items: center;height: 565px} #main .con02 > div.news .wrap > div{border-bottom: 1px solid #E9E9E9} #main .con02 > div.news .wrap > div > a{height: 140px;display: block;padding-left: 140px;position: relative} #main .con02 > div.news .wrap > div > a .arrow{height: 140px;width: 140px;position: absolute;left: 0;display: flex;align-items: center;justify-content: center;border-right: 1px solid #E9E9E9;transition: 0.7s} #main .con02 > div.news .wrap > div > a .arrow svg{display: block;transition: 0.7s} #main .con02 > div.news .wrap > div > a:hover .arrow svg{transform: rotate(180deg);transform-origin: center} #main .con02 > div.news .wrap > div > a:hover .arrow path{stroke: #fff} #main .con02 > div.news .wrap > div > a:hover .arrow{border-radius: 0 70px 70px 0;background: #4DC5D1;border-color: #4DC5D1;transform: translateX(-20px)} #main .con02 > div.news .wrap > div > a .txt{padding:0 50px;height: 100%;display: flex;align-items: center;transition: 0.7s} #main .con02 > div.news .wrap > div > a:hover .txt{background: #4DC5D1;border-radius: 70px 0 0 70px;} #main .con02 > div.news .wrap > div > a .txt ul{display: flex} #main .con02 > div.news .wrap > div > a .txt ul li{font-size: 16px;color: #BBBBBB;transition: 0.7s} #main .con02 > div.news .wrap > div > a:hover .txt ul li{color: #fff} #main .con02 > div.news .wrap > div > a:hover .txt ul li.notice{color: #fff} #main .con02 > div.news .wrap > div > a .txt ul li.notice{;color: #4DC5D1;display: flex;align-items: center} #main .con02 > div.news .wrap > div > a .txt ul li.notice:after{content: '';display: block;background: #DDDDDD;width: 1px;height: 6px;background: #ddd;display: flex;margin: 0 12px} #main .con02 > div.news .wrap > div > a .txt strong{display: block;font-size: 20px;color: #333333;font-weight: 500; margin-top: 10px;transition: 0.7s;overflow: hidden; text-overflow: ellipsis;flex: 1; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; word-break: break-all; } #main .con02 > div.news .wrap > div > a:hover .txt strong{color: #fff} #main .m_tit {height: 80px;display: flex;align-items: center;padding-left: 60px;width: calc(100% - 400px);border-right: 1px solid #E9E9E9} #main .m_tit strong{ font-size: 20px; color:#333333; font-weight: 400; } .more_b a{display: flex} .more_b a strong{display: flex;width: 150px;height: 60px;border: 1px solid #DDDDDD;align-items: center;justify-content: center;border-radius: 30px 0 0 30px;font-size: 16px;color: #333333;transition: 0.7s;font-weight: 500} .more_b a:hover strong{background: #4DC5D1;border-radius: 60px;border-color: #4DC5D1;color: #fff} .more_b a:hover span{background: #4DC5D1;border-radius: 60px;border-color: #4DC5D1;transform: translateX(10px)} .more_b a span{display: flex;width: 60px;height: 60px;border: 1px solid #DDDDDD;align-items: center;justify-content: center;border-radius: 0 30px 30px 0 ;margin-left: -1px;transition: 0.7s} .more_b a:hover path{stroke: #fff} #main .con01 .product > div:nth-child(1){transform: translateX(-70px);opacity: 0;transition: 1.2s} #main .con01 .product > div:nth-child(2){transform: translateX(70px);opacity: 0;transition: 1.2s} #main .con01 .product.on > div{transform: translateX(0);opacity: 1;transition: 1.2s} #main .con02 > div:nth-child(1){transform: translateX(-70px);opacity: 0;transition: 1.2s} #main .con02 > div:nth-child(2){transform: translateX(70px);opacity: 0;transition: 1.2s} #main .con02.on > div{transform: translateX(0);opacity: 1;transition: 1.2s} /*자동*/ /* .main_visual .ver_line{transition: 1s} .main_visual.on .ver_line{height: 0;transition-delay: 1.5s} .main_visual .hor_line{transition: 1s} .main_visual.on .hor_line{width: 50%;transition-delay: 1.5s} .main_visual .bubble01 > div{transition: 1s} .main_visual.on .bubble01 > div{transform: translate(-200%, -50%);transition-delay: 1.5s} .main_visual .bubble02 > div{transition: 1s} .main_visual.on .bubble02 > div{transform: translate(-100%, 180%);transition-delay: 1.5s} .main_visual .bubble03 > div{transition: 1s} .main_visual.on .bubble03 > div{transform: translate(350%, 120%);transition-delay: 1.5s} .bubble_center .b_w img{transition: 1s} .main_visual.on .bubble_center .b_w img{transform: translate(-50%, -50%);transition-delay: 1.5s;animation: 2s bub;animation-delay: 2.5s;animation-fill-mode: forwards} .clip-shape clipPath{transition: 1.5s; transition-delay: 2.5s;} .main_visual.on .clip-shape clipPath{transform: scale(17) translate(32.1%, 5%)} .main_visual.on .img_w01{transform: scale(17) translateX(32.1%)} */ @keyframes bub{ 0%{transform: translate(-50%, -50%) scale(1);} 100%{transform: translate(-50%, -50%) scale(5.5);} } @media (max-width: 1850px) { #main .con02{height: auto} } @media (max-width: 1650px) { .main_visual .land_wrap .land_in{transform: scale(0.8);position: absolute;width: 100%;height: 100%} #main .con01 .product{height: auto} #main .con01 .product > div a{padding: 60px 0} #main .con01{height: auto} #sitemap{padding: 40px 20px} #sitemap .in > div > .title{padding-left: 20px;} #sitemap .in > div > .title{width: 190px;} #sitemap .in > div > ul {width: calc(100% - 190px);gap: 0 30px;} #sitemap .in > div > ul > li{width: auto} #sitemap .in > div > ul > li > ul > li > a{font-size: 16px;line-height: 35px;} #sitemap .in > div > ul > li > ul > li > ul li a{font-size: 15px;} #sitemap .in > div > ul > li > a{font-size: 20px;} #sitemap .in > div > .title{font-size: 26px} } @media (max-width: 1250px) { #sitemap .in > div:nth-child(1){height: auto} /* .main_visual{display: none}*/ #pri_pop > div > div{max-width: 90vw;padding: 60px 20px;} .main_visual .slogan01{transform: translateX(20px)} .main_visual .slogan02{transform: translateX(-20px)} .main_visual .slogan p{font-size: 55px;} .main_visual .slogan01{left: 20px} .main_visual .slogan02{right: 20px} .main_visual .bubble_center .b_w img{width: 300px} .main_visual .land_wrap .land_in{transform: scale(0.7);} .main_visual .land_wrap .bg_bubble img{height: 900px} .main_visual .land_wrap .land_title_in{bottom: 20px;left: 20px;} #header{height: 80px} #header #gnb{display: none} #main .con01 .product > div .txt strong{font-size: 55px} #main .con01 .product > div .txt p{font-size: 16px} #main .con01 .product > div a:hover .txt strong{ color: #fff; gap: 0 10px;} #main .con01 .product > div .pt_img img{max-width: 80%;display: block;margin: 0 auto} #main .con02 > div.news .wrap > div > a .txt ul li{font-size: 15px} #main .con02 > div.news .wrap > div > a .txt strong{font-size: 16px;} #main .con02 > div.news .wrap > div > a{height: 100px} #main .con02 > div.news .wrap > div > a .txt{padding: 0 20px} #main .con02 > div.news .wrap > div > a .arrow{width:100px;height: 100px} #main .con02 > div.news .wrap > div > a{padding-left: 100px;} #sitemap .in > div:nth-child(3){height: auto} #sitemap .in > div:nth-child(4){height: auto} #main .con02 > div.video .wrap{height: 400px} #main .con02 .m_tit {width: calc(100% - 240px);} #main .con02 > div{padding-top: 80px;} #main .con02{height: auto;padding-bottom: 40px;} #main .m_tit{height: } #main .con02 > div.video .wrap{padding: 20px;} #sitemap .in > div{width: 100%;border-right: none} #sitemap .in > div >*{height: auto;padding: 20px 0;} #sitemap .in > div{align-items: flex-start} #sitemap .in > div{height: auto} #sitemap .in > div:nth-child(5){ border-bottom: 1px solid rgba(255, 255, 255, 0.2);} #sitemap{overflow-y: scroll} #sitemap .in > div > ul{padding: 20px 0;gap: 0 80px} #sitemap{padding: 20px;} #sitemap .in > div > ul > li > ul > li > a{line-height: 28px} #sitemap .in > div:nth-child(2){height: auto} } @media (max-width: 980px) { .main_visual .land_wrap .land_in{transform: scale(0.6)} .main_visual .slogan p{font-size: 36px} .main_visual .ver_line i:before{width: 60px;margin-left: -30px} .main_visual .ver_line i:after{height: 60px;margin-top: -30px} #footer{padding: 60px 20px} #footer .ft01 .left ul li p{font-size: 14px;} #footer .ft01 .left ul li span{font-size: 12px;} #footer .ft01 .left ul{gap: 0 30px} #footer .ft01 .right ul li a{font-size: 13px;} #footer .ft01 .right ul li{margin-bottom: 10px;} #footer .ft01 .left ul:nth-child(1){margin-bottom: 20px} #footer .ft02 address{font-size: 12px} #footer .ft02{margin-top: 20px} #main .con01 .product > div .txt strong{font-size: 42px;} #main .con01 .product > div .txt p{font-size: 14px;} #main .m_tit{height: 50px;padding-left: 20px;} #main .m_tit strong{font-size: 16px;} .more_b a strong{height: 40px;font-size: 13px;width: 100px;} .more_b a span{width: 40px;height: 40px;} #main .con02 .m_tit { width: calc(100% - 160px); } .location ul li{margin-bottom: 20px;} .location ul li i{width: 4px;height: 4px;} .location{left: 20px;} .location ul{width: 20px;padding: 20px 0;} .location ul li strong{font-size: 11px;left: 30px;} #header .h_menu .lang:after{margin: 0 20px;height: 15px;} #header .h_menu .lang{align-items: center} #header .all_menu_btn button{transform: scale(0.8)} #quick{right: 20px;bottom: 20px} #quick ul{padding: 5px} #quick ul svg{width: 25px;height: auto} } @media (max-width: 720px) { .main_visual .land_wrap .land_in{transform: scale(0.45)} #main .con02{display: block} #main .con02 > div{width: 100%} #main .con02 > div.video .wrap{height: auto} #main .con02 > div.news .wrap > div > a .txt ul li{font-size: 12px;} #main .con02 > div.news .wrap > div > a .txt strong{font-size: 13.5px;margin-top: 7px} #main .con02 > div.news .wrap > div > a{height: 70px;} #main .con02 > div.news .wrap > div > a .arrow{width: 70px;height: 70px;} #main .con02 > div.news .wrap > div > a .arrow svg{width: 5px;height: auto} #main .con02 > div.news .wrap > div > a{padding-left: 70px;} #main .con02 > div{padding-top: 30px} .main_visual .land_wrap .land_list .l_list{display: none} #header .h_menu .lang ul li a{line-height: 30px;font-size: 14px;} #pri_pop > div .sc p{font-size: 12px;line-height: 1.7} #pri_pop > div .sc strong{font-size: 16px;padding-bottom: 15px;} } @media (max-width: 660px) { .main_visual .slogan .s02{transform: translateX(40px)} .main_visual .slogan .s04 {transform: translateX(-40px);} .main_visual .slogan .s05 {transform: translateX(-80px);} .main_visual .land_wrap .land_in{transform: scale(1)} .main_visual .land_wrap .land_con{position: static;margin: 0 !important} .main_visual .land_wrap .land_title, .main_visual .land_wrap .land_con03 .land_title, .main_visual .land_wrap .land_con02 .land_title{width: 100%;height: auto;border-radius: 60px} .main_visual .land_wrap .land_list .tit_in{display: block;width: 100%;height: auto} .main_visual .land_wrap .land_list > div, .main_visual .land_wrap .land_list .l_list .list{position: static;margin: 0 !important} .main_visual .land_wrap .land_con01{transform: none} .main_visual .land_wrap .land_con02{transform: none} .main_visual .land_wrap .land_con03{transform: none} .main_visual .land_wrap .land_con01 .tit{transform: none !important} .main_visual .land_wrap .land_con03 .tit{transform: none !important} .main_visual .land_wrap .land_list .l_list .list{transform: none !important} .main_visual .land_wrap .land_list .mot{transform: none !important} .main_visual .land_wrap .land_list .tit_in{text-align: center} .main_visual .land_wrap .land_list .tit_in:before{border-radius: 5px} .main_visual .land_wrap .land_list .list_title{width: 100%;height: auto} .main_visual .land_wrap .land_list .list_title:before{border-radius: 10px;} .main_visual .land_wrap .land_title{border-radius: 60px} .main_visual .land_wrap .land_title .w{background: none;border: none;height: 60px;padding: 0;display: flex;align-items: center;;} .main_visual .land_wrap .land_title .w strong{font-size: 20px;} .main_visual .land_wrap .land_in{padding: 0 20px} .main_visual .land_wrap .land_in .land_list{padding-left: 70px;} .main_visual .land_wrap .land_list .l_list {display: flex;flex-wrap: wrap} .main_visual .land_wrap .land_list .l_list div div{width: 100%} .main_visual .land_wrap .land_list .list_title{height: 40px;justify-content: flex-start;padding: 0 30px} .main_visual .land_wrap .land_list .list_title strong{font-size: 16px;color: #6F8282;} .main_visual .land_wrap .land_list .list_title:before{border-radius: 40px} .main_visual .land_wrap .land_list .tit_in{margin-bottom: 10px} .main_visual .land_wrap .land_list .tit_in:before{border-radius: 40px} .main_visual .land_wrap .land_list .tit_in strong{line-height: 50px;text-align: left;padding-left: 30px} .main_visual .land_wrap .land_list .l_list .list i{display: none} .main_visual .land_wrap .land_list .tit_in i{width: 20px;right: 100% !important;left: auto !important; top: 50% !important;transform: none !important} .main_visual .land_wrap .land_con03 .land_title .land_image{left: 0;top: 50%;margin-top: -40px;} .main_visual .land_wrap .land_con03 .land_title .land_image img{width: 80px;} .main_visual .land_wrap .land_con02 .land_title .land_image{left: 0;top: 50%;margin-top: -40px;} .main_visual .land_wrap .land_con02 .land_title .land_image img{width: 80px;} .main_visual .land_wrap .land_con01 .land_title .land_image{left: 0;top: 50%;margin-top: -40px;} .main_visual .land_wrap .land_con01 .land_title .land_image img{width: 80px;} .main_visual .land_wrap .land_list .tit_in strong{font-size: 16px;} .main_visual .land_wrap{padding-top: 60px} .main_visual .land_wrap .land_title_in{position: relative;z-index: 2;left: 0;top: 0;bottom: 0;margin-bottom: 40px;} .main_visual .land_wrap .land_title_in strong{font-size: 22px} .main_visual .land_wrap .land_title{margin-bottom: 20px;} .main_visual .land_wrap .land_con{margin-bottom: 12px !important;} .main_visual .land_wrap .land_title .w{height: 40px;} .main_visual .land_wrap .land_title .w strong{font-size: 16px;} .main_visual .land_wrap .land_con01 .land_title .land_image img{width: 50px} .main_visual .land_wrap .land_con02 .land_title .land_image img{width: 50px} .main_visual .land_wrap .land_con03 .land_title .land_image img{width: 50px} .main_visual .land_wrap .land_con01 .land_title .land_image{margin-top: -25px} .main_visual .land_wrap .land_con02 .land_title .land_image{margin-top: -25px} .main_visual .land_wrap .land_con03 .land_title .land_image{margin-top: -25px} .main_visual .land_wrap .land_list .tit_in strong{line-height: 35px;} .main_visual .land_wrap .land_list .tit_in:before{ border: 2px solid #4CDECA;} .main_visual .land_wrap .land_list .list_title strong{font-size: 14px;} .main_visual .land_wrap .land_list .list_title{height: 30px;padding: 0 15px;} .main_visual .land_wrap .land_title{margin-bottom: 10px;} .main_visual .land_wrap .land_list .list_title{margin-bottom: 5px;margin-right: 5px} .main_visual .land_wrap .land_list .l_list > div{width: 49%;margin-right: 2% !important} .main_visual .land_wrap .land_list .l_list div:nth-child(2n){margin-right: 0 !important} .main_visual .land_wrap .land_con .land_list .tit_in i{display: none} .main_visual .land_wrap .land_in .land_list{padding-left: 40px;} .main_visual .land_wrap .land_list .tit_in strong{font-size: 14px;} .main_visual .land_wrap .land_title_in{margin-bottom: 20px;padding-left: 20px;} .main_visual .land_wrap .bg_bubble img{height: 740px} .main_visual .slogan02{margin-top: 0;top: auto;bottom: 40px;} #header #logo{left: 20px;} #header .h_menu{right: 20px;} .main_visual .hor_line i:before{height: 60px;margin-top: -30px} #footer .ft01{display: block} #footer .ft01 .right ul{display: flex;gap: 0 20px;margin-top: 20px;} .main_visual .bubble_center .b_w img{width: 260px;} #main .con01 .product > div .txt strong{font-size: 32px;} #main .con01 .product{display: block} #main .con01 .product > div{width: 100%} #main .con01 .product > div a{padding: 35px 0} #main .con01{padding-top: 40px;border-radius: 20px} .main_visual .bubble01 .b_w img{width: 64px} #header #logo svg{width: 120px;} #header .h_menu .lang button i svg{width: 30px;height: auto} #header .h_menu .lang button span{font-size: 14px;} #header .h_menu .lang button{gap: 0 7px} #header{height: 60px;} #sitemap button{right: 20px;top: 20px} #sitemap button svg{width: 35px;height: auto} .main_visual .land_wrap .bg_line{display: none} .main_visual .land_wrap .land_list .tit_in strong br{display: none} .main_visual .land_wrap .land_title .w strong br{display: none} .main_visual .land_wrap .land_list .l_list{display: none} .location{display: none} .main_visual .land_wrap .land_list .tit_in{margin-bottom: 5PX;} .main_visual .scroll{display: none} #sitemap .in > div > ul > li > ul > li > a{line-height: 26px;} #sitemap .in > div > ul{border-top: 1px solid rgba(255, 255, 255, 0.2);} #sitemap .in > div > ul > li > ul > li > a{font-size: 12px;} #sitemap .in > div > ul > li > a{margin-bottom: 5px;} } @media (max-width: 560px) { #footer .ft01 .left ul{display: block} #footer .ft01 .left ul li{margin-bottom: 10px} #footer .ft01 .left ul:nth-child(1){margin-bottom: 0} #footer .ft02{margin-top: 10px} #footer{padding: 50px 20px;} .main_visual .family img{height: 100vh;wid} .main_visual .bubble_center .b_w img{width: 180px} .main_visual .bubble01{margin: 0;top: 100px;left: 40px;} .main_visual .bubble02{margin: 0;top: auto;bottom: 30%;left: -50px} .main_visual .bubble02 .b_w img{width: 114px;} .main_visual .slogan p{font-size: 30px;line-height: 1.2} .main_visual .slogan02{bottom: 70px;} #sitemap .in > div{display: block} #sitemap .in > div > .title{width: auto;height: auto;padding: 5px;font-size: 16px;} #sitemap .in > div > ul{width: 100%;padding: 15px} #sitemap .in > div > ul > li > a{font-size: 16px;} #sitemap .in > div > ul > li > ul > li > ul{display: none} #sitemap .in > div > ul > li > ul > li > ul li a{font-size: 13px;} #sitemap .in > div >*{padding: 10px 0} #sitemap .in > div > .title{padding: 0;margin-bottom: 0px;font-size: 18px;} #sitemap .in > div{padding: 15px 0} .main_visual .land_wrap .bubble2{display: none} #sitemap .in > div > ul{padding: 7px;} #sitemap .in > div > ul{flex-direction: column;gap: 10px} #sitemap .in > div > ul > li > a{margin-bottom: 0} #sitemap .in > div > ul{display: none} #sitemap .in > div > ul.on{display: flex;flex-direction: column;gap: 7px } #sitemap .in{display: block;} #sitemap .in > div{padding: 0} #sitemap .in > div > .title{padding: 15px 0} } @media (max-width: 400px) { .main_visual .land_wrap .land_list .l_list{display: none} }