@font-face { font-family:'sebangGothic'; src:url('../font/SEBANG_Gothic_Bold.woff') format('woff'); font-weight:800; } @font-face { font-family:'sebangGothic'; src:url('../font/SEBANG_Gothic_Regular.woff') format('woff'); font-weight:400; } *{margin: 0; padding: 0; position: relative; box-sizing: border-box;} li{list-style: none;} a{text-decoration: none;} b{font-weight: normal;} i{font-style: normal;} html{font-size: 14px;} html.on{overflow: hidden;} body{font-family: "SUIT", "Spoqa Han Sans Neo", sans-serif; font-style: normal; letter-spacing: -.05rem;} section:not(#premium){width: 100%; overflow: hidden;} .inner{max-width: 1400px; margin: 0 auto; padding: 150px 0;} .m_br{display: none;} .top_wrap{position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 90px; z-index: 999; color: #ffffff; transition: background .5s, height .5s; border-bottom: 1px solid rgba(226, 226, 226, 0.5);} .top_wrap.on{background: #ffffff; height: 80px; border-bottom: 1px solid #e2e2e2;} .top_wrap.on .call{color: #000000;} .top_wrap.on .logo{background:url(../images/logo.png) center / cover no-repeat; color: #000000;} .top_wrap.on .menu>ul{color: #000000; font-weight: 500;} .top_wrap .call{font-size: 2rem; font-weight: 900; margin-right: 3%; text-wrap: nowrap; direction: rtl; letter-spacing: -.08rem;} .top_wrap .call a{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .top_wrap .call .part{font-size: 1.3rem;} .top_wrap .call .pr5{margin-right: 5px; font-weight: 700;} .top_wrap .logo{width: 200px; height: 40px; margin-left: 3%; background: url(../images/logo_w.png) center / cover no-repeat; transition: background .5s;} .top_wrap .logo.on{background:url(../images/logo.png) center / cover no-repeat;} /* .top_wrap .logo b{font-weight: 800; font-size: 1.7rem; left: 2px;} */ /* .top_wrap.on .logo b{background: -webkit-linear-gradient(45deg, #32ec5d, #3ce5ff); background: linear-gradient(45deg, #32ec5d, #3ce5ff); color: transparent; -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip:text; font-weight: 900;} */ .top_wrap .logo a{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;} @media(min-width:1025px){ .top_wrap{ justify-content: flex-start; } .top_wrap .menu{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .top_wrap .call{ position: absolute; right: 3%; top: 50%; transform: translateY(-50%); margin-right: 0; } } } .top_wrap .logo.on b{background: -webkit-linear-gradient(45deg, #32ec5d, #3ce5ff); background: linear-gradient(45deg, #32ec5d, #3ce5ff); color: transparent; -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip:text; font-weight: 900;} .menu>ul{top: 0; display: flex; justify-content: center; align-items: center; color: #ffffff; font-size: 1.2rem;} .menu>ul li{margin: 0 30px; white-space: nowrap;} .menu>ul li a{position: absolute; width: 100%; height: 100%; top: 0; left: 0;} .menu_m{display: none;} .tit{display: flex; justify-content: center; font-weight: 400; font-style: normal; font-size: 4rem; text-align: center; margin-bottom: 70px; letter-spacing: -.1rem; line-height: 1.4; font-family: "sebangGothic";} .tit span{display: block;} .tits{font-weight: 400; font-style: normal; font-size: 2rem; text-align: center; opacity: .4;} /* .gra{background: -webkit-linear-gradient(45deg, #32ec5d, #3ce5ff); background: linear-gradient(45deg, #32ec5d, #3ce5ff); color: transparent; -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip:text; font-weight: 700;} */ .gra{color: #00669f; font-weight: 700;} .sound{position:absolute; z-index:4; width:50px; height:50px; bottom:135px; left:40px; cursor:pointer; display:none;} .sound.view {display:block;} .sound_off {background:url('../images/sound_off.png');} .sound_on {background:url('../images/sound_on.png');} .sound_off.view {opacity:0.5;} .sound_on.view {opacity:1;} /* .video_wrap{ width: 100%; max-height: 970px; overflow: hidden;} .video_wrap iframe{position: absolute; top: 0; left:0; width: 100%; height: 100%;} #video01{height: 0; padding-top:56.25%;} */ #video_main{background: url(../images/video_bg.jpg) center / cover no-repeat;} #video_main .video_wrap{width: 100%; max-height: 970px; overflow: hidden; font-size: 0;} #video_main .video_wrap video{position: absolute; top: 0; left:0; width: 100%; height: 100%;} #video_main .video_wrap>div{height: 0; padding-top:56.25%;} #main1{height: 100vh; min-height: 600px;} #main1 .main1_slide{width: 100%;} #main1 .main1_slide .swiper-slide{height: 100vh; min-height: 600px; color: #ffffff;} #main1 .main1_slide .main1_slide1{background: #ccd4d4;} #main1 .main1_slide .main1_slide1 .slide1_bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center;} #main1 .main1_slide .main1_slide1 .slide1_tx{width: 61vw; height: 100%; display: flex; justify-content: center; flex-direction: column; font-size: 2.7rem; font-weight: 500; margin: 0 auto; margin-top: 50px; opacity: 0; transition: margin-top 1s, opacity .5s;} #main1 .main1_slide .main1_slide1.swiper-slide-active .slide1_tx{margin-top: 0; opacity: 1;} #main1 .main1_slide .main1_slide1 .slide1_tx>b{font-size: 10.3vw; letter-spacing: -.8rem; font-weight: 800; word-spacing: -1rem; line-height: 1; text-wrap: nowrap;} #main1 .main1_slide .main1_slide1 .slide1_tx p{left: 12px; margin-top: -2%;} #main1 .main1_slide .main1_slide1 .slide1_tx i{padding: 5px 10px; font-size: 1.6rem; text-align: center; left: -15px; background: #00669f; align-self: flex-end; margin-top: 5px;} #main1 .main1_slide .main1_slide1 .slide1_tx i b{font-weight: 800;} #main1 .main1_slide .main1_slide2{background: url(../images/main4.jpg) center / cover no-repeat;} #main1 .main1_slide .swiper-slide::after{content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .28); z-index: 1; pointer-events: none;} #main1 .main1_slide .main1_slide1 .slide1_bg{z-index: 0;} #main1 .main1_slide .main1_slide3{background: url(../images/main5.jpg) center / cover no-repeat;} #main1 .main1_slide .swiper-slide .main_tx{height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; line-height: 0.9; z-index: 2;} #main1 .main1_slide .swiper-slide .main_tx > b{display: flex; flex-direction: column; align-items: center; font-size: 7rem; font-weight: 800; letter-spacing: -.4rem; word-spacing: -.5rem; text-transform: uppercase; color: #5EDAF2; text-shadow: 0 3px 12px rgba(0, 0, 0, .45);} #main1 .main1_slide .swiper-slide .main_tx > b span{ margin-left: -250px; opacity: 0;} #main1 .main1_slide .swiper-slide .main_tx > b::before{position: relative; content: ""; display: block; width: 670px; height: 50px; margin-bottom: 3px; margin-left: 250px; clip-path: polygon(100% 44%, 0 50%, 100% 56%); background: linear-gradient(45deg, rgba(94, 218, 242, .15), #5EDAF2); opacity: 0;} #main1 .main1_slide .swiper-slide .main_tx > b::after{position: relative; content: ""; display: block; width: 670px; height: 50px; margin-top: 3px; left: 5px; margin-left: -250px; clip-path: polygon(0% 44%, 100% 50%, 0 56%); background: linear-gradient(45deg, #5EDAF2, rgba(94, 218, 242, .15)); opacity: 0;} #main1 .main1_slide .main1_slide2 .main_tx > b::before{width: 480px;} #main1 .main1_slide .main1_slide2 .main_tx > b::after{width: 480px; left: 10px;} #main1 .main1_slide .swiper-slide.swiper-slide-active .main_tx > b::before{margin-left: 0; opacity: 1; transition: .5s .2s;} #main1 .main1_slide .swiper-slide.swiper-slide-active .main_tx > b::after{margin-left: 0; opacity: 1; transition: .5s .3s;} #main1 .main1_slide .swiper-slide.swiper-slide-active .main_tx > b span{margin-left: 0; opacity: 1; transition: .5s .7s;} #main1 .main1_slide .swiper-slide .main_tx > p{font-size: 3.3rem; font-weight: 700; line-height: 1.2; margin-top: 20px;} /* 메인 슬라이드 핵심 문구 강조 */ #main1 .main1_slide .swiper-slide .main_tx > p .main_point{ display: inline-block; color: #FFD84D; font-weight: 800; } #main1 .main1_slide .swiper-slide .main_tx > i{font-size: 1.8rem; line-height: 1.2; margin-top: 20px;} #main1 .main1_slide .swiper-slide ul{display: flex; justify-content: center; margin-top: 40px; top: 20px; opacity: 0; transition: opacity .5s 1.2s, top 1s 1.2s;} #main1 .main1_slide .main1_slide3.swiper-slide-active ul{opacity: 1; top: 0;} #main1 .main1_slide .swiper-slide ul li{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 93px; height: 93px; border-radius: 100px; border: 6px solid #ffffff; background: #ffffff; margin: 0 8px; font-size: 1.3rem; font-weight: 900;} #main1 .main1_slide .swiper-slide ul li span{display: block; font-size: 1rem; opacity: .7; font-weight: 400; margin-bottom: -12px; line-height: 1;} #main1 .main1_slide .swiper-slide ul li:nth-of-type(1){border-color: #ff8800; color: #ff8800;} #main1 .main1_slide .swiper-slide ul li:nth-of-type(2){border-color: #856f3f; color: #856f3f;} #main1 .main1_slide .swiper-slide ul li:nth-of-type(3){border-color: #ec0250; color: #ec0250;} #main1 .main1_slide .swiper-slide ul li:nth-of-type(4){border-color: #414141; color: #414141;} #main1 .main1_slide .main1_slide3 .main_tx > b{margin-top: 5%;} #main1 .swiper-pagination-bullet-active:before{animation: main1bullet 5s both; transition:5s; transition-delay:0.4s;} @keyframes main1bullet{ 0%{width: 0;} 100%{width: 100%;} } #main1 .main1_slide .main1_slide3 .slide_logo {margin: 25px 0 20px;} #main1 .main1_slide .main1_slide3 .slide_logo img {width: 360px; height: auto; display: block; margin: 0 auto;} #main1 .swiper-pagination{bottom:100px;} #main1 .swiper-pagination-bullet{width:15%; height:3px; opacity:1; background:#ffffffb4; border-radius: 0; margin: 0 1%;} #main1 .swiper-pagination-bullet:before{content:""; display:block; width:0; height:100%; position:absolute; left:0; top:0; background-color:#00669f;} /* 영업용 명함*/ #drm-ncard {position: relative; overflow: hidden; border-bottom: 1px solid #dcdcdc;} #drm-ncard .t_info { padding:calc(90/640*100vw) calc(40/640*100vw) calc(40/640*100vw); font-weight:400; background:#fff; } #drm-ncard .t_info .logo { position:absolute; top:calc(50/640*100vw);left:calc(40/640*100vw); width:calc(192/640*100vw); height:calc(24/640*100vw);background:url('../images/logo.png') center 0 no-repeat; background-size:cover;font-size:0; z-index: 0;} #drm-ncard .t_info .name { font-size:calc(26/640*100vw); color:#666; text-align:right; margin-bottom:calc(40/640*100vw);margin-right: calc(10/640*100vw); line-height:calc(50/640*100vw);margin-top:calc(24/640*100vw);} #drm-ncard .t_info .name b { display:inline-block; vertical-align:calc(-10/640*100vw); margin-left:calc(24/640*100vw); font-size:calc(50/640*100vw); color:#333; letter-spacing:-0.2vw; font-weight:700; word-break: keep-all;} #drm-ncard .t_info dl { position:relative;font-size:calc(24/640*100vw); letter-spacing:-0.05em; margin-bottom: 10px;} #drm-ncard .t_info dl dt { position:absolute; top:0; left:0; color:#688649; font-weight:500; } #drm-ncard .t_info dl dd { margin-left:calc(90/640*100vw); color:#666; } #drm-ncard .t_info dl.place dt { } #drm-ncard .t_info dl.place dd { font-size:calc(26/640*100vw); color:#5a5a5a; letter-spacing:clac(-1/640*100vw); } #drm-ncard .t_info dl.phone dt { top:3vw; } #drm-ncard .t_info dl.phone dd { font-size:calc(50/640*100vw); color:#333; letter-spacing:0.5vw; font-weight:800; } #drm-ncard .t_info dl.phone dd a{color:#333;font-weight:700;} #environment .inner > div .tit{margin-bottom: 20px; font-size: 4rem;} #environment .inner > div .tits{font-size: 2rem;} #environment .inner > div > p{text-align: center; font-size: 1.4rem;} #environment .inner .environment_img{margin-top: 80px;} #environment .inner .environment_img > img{border-top-left-radius: 80px; border-bottom-right-radius: 80px;} #environment .inner .environment_img > .e_ul1{display: flex; justify-content: space-between; margin: 50px 0 15px 0; border-bottom: 1px dotted #d6d6d6; padding-bottom: 50px;} #environment .inner .environment_img > .e_ul1 li{width: 23.5%; text-align: center;} #environment .inner .environment_img > .e_ul1 li:last-child{margin: 0; padding: 0;} #environment .inner .environment_img > .e_ul1 li b{display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; margin: 10px 0;} #environment .inner .environment_img > .e_ul1 li b::before{position: relative; content: "●"; font-size: .5rem; color: rgb(0, 102, 159); margin-right: 5px;} #environment .inner .environment_img > .e_ul1 li p{font-size: 1.3rem; height: 120px;} #environment .inner .environment_img > .e_ul1 li p span{opacity: .5; font-size: 1rem;} #environment .inner .environment_img > .e_ul1 li p i{opacity: .5; font-size: 1rem; display: block; line-height: 1.15; margin-top: 5px;} #environment .inner .environment_img > .e_ul1 li > img{ display:block; margin: 0 auto;} #environment .inner .environment_img > .e_ul1 li div div img{border-radius: 20px;} #environment2 .inner{padding: 0;} #environment2 .tit > span:nth-of-type(1){font-size: 3.6rem;} #environment2 .environment2_tx .tits{display: block; margin-bottom: 15px;} #environment2 .environment2_tx > b{font-size: 4rem; margin: 0; flex-direction: column; line-height: 1.2;} #environment2 .environment2_tx .gra{font-size: 4rem;} #environment2 .environment2_img{margin: 80px 0 150px 0;} #environment2 .environment2_img .gtx{display: flex; justify-content: space-between; align-items: center; margin-bottom: 5vw;} #environment2 .environment2_img .gtx > div:nth-of-type(1){width: 25%; margin-right: 5%;} #environment2 .environment2_img .gtx > div > p{font-size: 1.7rem; color: #ec0250;} #environment2 .environment2_img .gtx > div > b{font-size: 3.5rem; font-weight: 900; letter-spacing: -.2rem;} #environment2 .environment2_img .gtx > div:nth-of-type(1)::before{position: relative; content: ""; display: block; left: 2px; width: 50px; height: 5px; background: #ec0250; margin-bottom: 15px;} #environment2 .environment2_img .gtx-a{border-bottom: 1px dotted #d6d6d6; padding-bottom: 5vw;} #environment2 .environment2_img .gtx-a b{color: #ec0250;} #environment2 .environment2_img .gtx-e b{color: #414141;} #environment2 .environment2_img .gtx-e > div > p{color: #414141;} #environment2 .environment2_img .gtx-e > div:nth-of-type(1)::before{background: #414141;} #environment2 .environment2_img .gtx > div:nth-of-type(1) > div{margin-top: 50px; text-wrap: nowrap;} #environment2 .environment2_img .gtx > div > div b{font-size: 1.6rem; font-weight: 700; color: #000000;} #environment2 .environment2_img .gtx > div > div p{font-size: 1.3rem; font-weight: 300; color: #000000;} #environment2 .environment2_img .gtx > div:nth-of-type(1) > div img{margin-top: 20px; border-radius: 15px;} #environment2 .environment2_img .gtx-a2-wrap{background: url(../images/gtxa.jpg) center / cover no-repeat; width: 980px; min-width: 980px; height: 500px; display: flex; align-items: center; justify-content: center; border-radius: 30px;} #environment2 .environment2_img .gtx-e2-wrap{background: url(../images/gtxe.jpg) center / cover no-repeat;} #environment2 .environment2_img .gtx-a2.gtx-e2{left: 0;} #environment2 .environment2_img .gtx-a2{left: -3%;} #environment2 .environment2_img .gtx-a2 > div{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #environment2 .environment2_img .gtx-a2 > div > div{position: absolute; display: flex; align-items: center; opacity: 0; transform: scale(.2); transition: opacity .3s .5s, transform .3s .5s;} #environment2 .environment2_img .gtx-a.aos-animate .gtx-a2 > div > div{opacity: 1; transform: scale(1);} #environment2 .environment2_img .gtx-e.aos-animate .gtx-e2 > div > div{opacity: 1; transform: scale(1);} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(1){left: -17%; top: -1%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(2){left: -9.5%; top: 6%; transition-delay: .7s;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(3){left: 8%; top: 10%; flex-direction: column; align-items: flex-start; transition-delay: .9s;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(4){left: 24%; top: 10%; flex-direction: column; align-items: flex-start; transition-delay: 1.1s;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(5){left: 38%; top: 12%; transition-delay: 1.3s;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(6){left: 42%; top: 41%; transition-delay: 1.5s;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(7){left: 75%; top: 51%; flex-direction: column; align-items: flex-start; transition-delay: 1.7s;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(8){right: 1%; top: 66%; flex-direction: row-reverse; transition-delay: 1.9s;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(8) .dots{margin-left: 0; margin-right: 3px;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(9){right: -5%; top: 80%; flex-direction: row-reverse; transition-delay: 2.1s;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(9) .dots{margin-left: 0; margin-right: 3px;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(10){right: -7%; top: 86%; flex-direction: row-reverse; transition-delay: 2.3s;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(10) .dots{margin-left: 0; margin-right: 3px;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(11){right: -10%; top: 95%; flex-direction: row-reverse; transition-delay: 2.5s;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(11) .dot{margin-left: 0; margin-right: 5px;} #environment2 .environment2_img .gtx-a2 > div > div b{font-size: 1.5rem; color: #ec0250; font-weight: 800; word-spacing: -.1rem; text-wrap: nowrap;} #environment2 .environment2_img .gtx-a2 > div > div p{font-size: 1.2rem; color: #000000; font-weight: 600; text-wrap: nowrap;} #environment2 .environment2_img .gtx-a2 > div > div span{display: block; border-radius: 100%; background: #ffffff; margin-left: 5px;} #environment2 .environment2_img .gtx-a2 > div > div .dot{width: 28px; height: 28px; border: 6px solid #ec0250;} #environment2 .environment2_img .gtx-a2 > div > div .dots{width: 19px; height: 19px; border: 4px solid #ec0250; margin-left: 3px;} #environment2 .environment2_img .gtx-e2 > div > div b{color: #6d4728;} #environment2 .environment2_img .gtx-e2 > div > div .dot{border: 6px solid #6d4728;} #environment2 .environment2_img .gtx-e2 > div > div .dots{border: 4px solid #6d4728;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(1){left: -3%; top: 80%; flex-direction: column-reverse;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(2){left: 26%; top: 86%; flex-direction: column-reverse;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(3){left: 47%; top: -9%;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(4){left: 72.5%; top: -12%;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(5){left: 92%; top: -6%; flex-direction: column;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(6){left: 97%; top: 34%; flex-direction: column-reverse;} #meta-class1{background: #f3f3f3;} #meta-class1 .inner > div{margin-bottom: 120px; background: #ffffff; border-top-left-radius: 100px; border-top-right-radius: 100px; overflow: hidden; font-size: 0;} #meta-class1 .inner > div:last-child{margin-bottom: 0;} #meta-class1 .inner > div > span{width: 100%; height: 20px; background: #08d088;} #meta-class1 .inner .meta_tx{display: flex; justify-content: space-between; align-items: flex-end; padding: 120px 160px;} #meta-class1 .inner .meta_tx > span{display: block; width: 150px; height: 1px; background-color: #367beb; align-self: center;} #meta-class1 .inner .meta_tx div b{display: block; font-size: 3.5rem; line-height: 1.15; font-weight: 300; letter-spacing: -.2rem; text-wrap: nowrap;} #meta-class1 .inner .meta_tx div b span{font-weight: 800; word-spacing: -.1rem; color: #367beb; font-size: 4rem; font-family: "sebangGothic";} #meta-class1 .inner > div:nth-of-type(2) .meta_tx b span{color: #08d088;} #meta-class1 .inner > div:nth-of-type(3) .meta_tx b span{color: #00669f;} #meta-class1 .inner > div:nth-of-type(2) .meta_tx > span{background: #08d088;} #meta-class1 .inner > div:nth-of-type(3) .meta_tx > span{background: #00669f;} #meta-class1 .inner .meta_tx p{font-size: 2rem; font-weight: 300; line-height: 1.2; margin-top: 25px;} #meta-class1 .inner .meta_tx i{display: block; font-size: 1.3rem; font-weight: 300; color: #727272; line-height: 1.32;} #meta-class1 .inner .meta_tx img{width: 100%; height: 650px; background: #999; margin-top: 50px;} #meta-class1 .inner > div ul{width: 100%; display: flex; justify-content: space-between;} #meta-class1 .inner > div:nth-of-type(1) ul{margin-top: 20px;} #meta-class1 .inner > div:nth-of-type(2) ul{margin-bottom: 20px;} #meta-class1 .inner > div ul li{width: 24%; background: #cecece;} #meta-class1 .inner .meta_img{display: flex; justify-content: space-between;} #meta-class1 .img_tx{position: absolute; display: block; background: #00000080; padding: 6px 10px; bottom: 10px; left: 10px; font-size: 1.1rem; font-weight: 600; color: #ffffff;} #premium{width: 100%; height: 4600px; background: #00669f;} #premium .inner{max-width: 1400px;} #premium .premium_tx{display: flex; align-items: flex-start; justify-content: center; flex-direction: column; text-align: center; width: 100%; height: 100vh; position: sticky; top: 0; left: 0; font-size: 15vw; color: #67c7ff; opacity: .7; transition: opacity .5s;} #premium .premium_tx > div{width: 100%; display: flex; align-items: center; justify-content: center;} #premium .premium_tx > div img{margin-left: 50px;} #premium .premium_tx p:nth-of-type(1){font-size: 3rem; font-weight: 600; letter-spacing: -.1rem; margin: 50px auto 0 auto; color: #ffffff;} #premium .premium_tx .premium_sub{display: block; width: 100%; margin-top: 12px; font-size: 1.8rem; font-weight: 400; letter-spacing: -.05rem; line-height: 1.4; color: #ffffff; } #premium .premium_tx p:nth-of-type(2){font-size: 2.2rem; top: 4.5vw; margin-left: 11.7vw; letter-spacing: 2rem; font-weight: 300;} #premium .premium_tx b{font-weight: 800; letter-spacing: -2rem; font-family: "Bodoni Moda", serif;} #premium.on .premium_tx{opacity: .1;} #premium .inner > div{display: flex; flex-direction: column; color: #ffffff;} #premium .inner > div > div{width: 700px;} #premium .inner > div > div:not(.premium1){margin-top: -100px;} #premium .inner > div > div:nth-of-type(even){align-self: flex-end;} #premium .inner > div > div > b{position: absolute; top: -8%; left: 10px; font-size: 3.5rem; font-weight: 600; letter-spacing: -.1rem; color: #B9ECFF; mix-blend-mode: color-dodge; font-family: "Bodoni Moda", serif;} #premium .inner > div > div > div b{display: block; font-size: 2.2rem; font-weight: 700; margin: 10px 0 5px 0; letter-spacing: -.12rem; word-spacing: -.05rem;} #premium .inner > div > div > div p{font-size: 1.6rem; font-weight: 300;} #premium .inner > div > div > div .premium_desc{font-size: 1.6rem; font-weight: 300; line-height: 1.5;} #premium .inner > div > div > div .premium_desc li{padding-left: 10px;} #premium .inner > div > div > div .premium_desc li::before{content: "·"; position: absolute; left: 0;} .img_cut{font-size: .9rem; position: absolute; bottom: 10px; right: 10px; color: #ffffff; opacity: .8;} .img_cut2{text-align: right; font-size: .8rem;} #video{background: #555555; background: url(../images/video_bg2.jpg) center / cover no-repeat;} #video .tits{text-align: left; color: #ffffff;} #video .tit{justify-content: flex-start; color: #ffffff; margin-bottom: 30px;} #video .tit .gra{color: #ffffff;} #video .inner > div{display: flex;} #video .inner > div > div:nth-of-type(1){width: 30%;} #video .inner .type_menu li{width: 70%; color: #ffffff; border-bottom: 1px solid #ffffff52; padding: 20px 10px; font-size: 1.4rem; cursor: pointer;} #video .inner .type_menu li.on{font-weight: 800; border-bottom: 2px solid #00669f;} #video .video_inner{width: 70%;} #video iframe{width: 100%; height: calc(184 / 640 * 100vw);} @media(max-width:1400px){ #video iframe{height: calc(225 / 640 * 100vw);} } @media(max-width:1200px){ #video .tit{justify-content: center;} #video .tits{text-align: center;} #video .inner > div{flex-direction: column;} #video .inner > div > div:nth-of-type(1){width: 100%;} #video .video_inner{width: 100%; margin-top: 50px;} #video .inner .type_menu{display: flex;} #video .inner .type_menu li{text-align: center;} #video iframe{height: calc(320 / 640 * 100vw);} } #unit, #community{background: #ececec;} #unit .inner{max-width: 85%; min-width: 1600px;} #unit .inner .tit{font-weight: 200; margin-bottom: 50px; text-transform: uppercase;} #unit .unit_sub_tit{display: table; margin: -25px auto 50px auto; padding: 12px 35px; background: #00669f; color: #ffffff; font-size: 1.8rem; font-weight: 500; line-height: 1.4; border-radius: 50px; letter-spacing: -.05rem;} #unit ul{width: 100%; display: flex; justify-content: flex-start; gap: 20px;} #unit ul li{width: calc((100% - 120px) / 7); font-size: 1.3rem; color: #999999; background: #ffffff; cursor: pointer; border-radius: 50px;} #unit ul li .unit_type{padding: 30px 30px 40px 30px; border-top: 3px solid #e3e8e8;} #unit ul li .unit_type::after{display: flex; align-items: center; justify-content: center; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); content: "+"; width: 35px; height: 35px; border-radius: 100%; font-size: 1.4rem; font-weight: 300; color: #ffffff; background: #252525;} #unit ul li .unit_type b{font-size: 2rem; font-weight: 700; color: #000000;} #unit ul li .unit_type b span{font-size: 1.5rem;} #unit ul li img{width: 100%; border-radius: 50px;} #unit .type{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; display: none; z-index: 99999;} #unit .type > div{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: #000000af;} #unit .type > div > div{width: 75%; min-width: 1200px; height: 90%; background: #ffffff; border-radius: 50px; display: none; overflow: hidden;} #unit .type .unit_cont{height: 100%; display: flex; justify-content: center; margin: 0 auto;} #unit .type .unit_cont > div:nth-of-type(1){width: 25%; margin-right: 8%;} #unit .type .unit_cont > div:nth-of-type(1) img{margin-left: 30px; margin-top: 15px;} #unit .type .unit_cont > div:nth-of-type(2){align-self: center;} #unit .type .unit_cont > div:nth-of-type(2) img{width: 100%;} #unit .type .unit_cont table{width: 100%; border-spacing: 0; margin-bottom: 25px;} #unit .type .unit_cont table td{height: 55px; border-top: 1px solid #dbdbdb; text-align: center; font-size: 1.2rem;} #unit .type .unit_cont table tr:last-child td{border-bottom: 3px solid #00669f;} #unit .type .type_close{position: absolute; top: 5%; right: 4%; cursor: pointer; opacity: .7;} #unit .type .unit_cont .m2{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 230px; background: #00669f; color: #ffffff;} #unit .type .unit_cont .m2 b{font-size: 5.5rem; font-weight: 800; letter-spacing: -.2rem;} #unit .type .unit_cont .m2 b span{font-size: 3.5rem;} #unit .type .unit_cont .m2 p{font-size: 1.6rem;} #unit .type .unit_type1 .m2{background: #0089b8;} #unit .type .unit_type1 table tr:last-child td{border-bottom: 3px solid #0089b8;} #unit .type .unit_type2 .m2{background: #00a7a5;} #unit .type .unit_type2 table tr:last-child td{border-bottom: 3px solid #00a7a5;} #unit .type .unit_type3 .m2{background: #5aa85a;} #unit .type .unit_type3 table tr:last-child td{border-bottom: 3px solid #5aa85a;} #unit .type .unit_type4 .m2{background: #c9a227;} #unit .type .unit_type4 table tr:last-child td{border-bottom: 3px solid #c9a227;} #unit .type .unit_type5 .m2{background: #d7832f;} #unit .type .unit_type5 table tr:last-child td{border-bottom: 3px solid #d7832f;} #unit .type .unit_type6 .m2{background: #b75d3a;} #unit .type .unit_type6 table tr:last-child td{border-bottom: 3px solid #b75d3a;} #unit .vr_view_m{display: none;} #cg{display: flex;background:#ececec;} #cg .cg_bg{width: 900px; height: 1100px; background: url(../images/cg1.jpg) center / cover no-repeat;} #cg .cg_img{min-width: 850px; margin-left: 2%; align-self: center;} #cg .cg_img ul li{display: flex; justify-content: space-around;} #cg .cg_img ul li div{padding: 50px 20px;} #cg .cg_img ul li:nth-of-type(even) div{left: 50px;} #cg .cg_img ul li:nth-of-type(odd) div{left: -80px;} #cg .cg_img ul li img{z-index: 9; width: 300px; height: 200px; object-fit: cover;} #cg .cg_img ul li b{font-size: 1.4rem; font-weight: 800;} #cg .cg_img ul li p{font-size: 1.1rem; margin-top: 5px; color: #999999;} #cg .cg_img ul li:nth-of-type(even) b::after{position: absolute; top: 44%; left: 110%; content: ""; display: block; width: 250px; height: 1px; background: rgb(197, 197, 197);} #cg .cg_img ul li:nth-of-type(odd) b::before{position: absolute; top: 44%; right: 110%; content: ""; display: block; width: 200px; height: 1px; background: rgb(197, 197, 197);} #interior{background: #ececec; padding-bottom: 120px;} #interior .tit{margin-bottom: 50px;} #interior .interior_sub_tit{display: table; margin: -25px auto 50px auto; padding: 12px 35px; background: #00669f; color: #ffffff; font-size: 1.8rem; font-weight: 500; line-height: 1.4; border-radius: 50px; letter-spacing: -.05rem;} #interior .inner{padding: 0;} #interior .interior_bg{width: 100%; display: flex; align-items: flex-end; justify-content: center;} #interior .interior_bg b{color: #ffffff; font-size: 6rem; font-weight: 700; letter-spacing: -.1rem; line-height: .75;} #interior .interior_slide img{width: 100%; object-fit: cover;} #interior .big_wrap{position: fixed; width: 100%; height: 100%; top: 0; z-index: 999999; display: none; align-items: center; justify-content: center;} #interior .big{z-index: 9;} #interior .img_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); display: none; z-index: 1;} #community{display: none;} #community .inner{padding: 0 0 150px 0;} #community .tit{font-size: 3rem; font-weight: 700; justify-content: flex-start;} #community .tits{text-align: left;} #overview .inner > div{display: flex; justify-content: space-between;} #overview .inner > div > div{width: 53%; overflow: hidden;} #overview .inner > div > div img{width: 100%; height: 100%; object-fit: cover;} #overview .inner table{width: 45%; border-spacing: 0; font-size: 1.2rem;} #overview .inner table th{border-bottom: 2px solid #00669f; font-size: 1.3rem;} #overview .inner table td{height: 80px; border-bottom: 1px solid #d8d8d8; padding-left: 20px;} #overview .tit{margin-bottom: 15px;} #overview .overview_sub_tit{margin-bottom: 50px; text-align: center; font-size: 1.4rem; font-weight: 400; line-height: 1.4; color: #000; letter-spacing: -.05rem;} #location{background: #dae1e1;} #location .location_map{width:70%; margin: 0 auto;} #location .location_map .map_1{height:400px; border: 1px rgb(223, 223, 223) solid; overflow: hidden;} #location .location_map .tx{text-align: left;} #location .location_map .tx b{font-size: 1.7rem; letter-spacing:-0.05em; display: block; line-height: 20px; font-weight: 600;} #location .location_map .tx p{font-size: 1.4rem; letter-spacing:-0.05em; margin-top: 5px;} #location .location_map .tx > div:nth-child(2){width:222px;height:2px; border-bottom: #040836 2px solid; display: inline-block; } #location .location_map .tx > div:nth-child(3){width:120px;height:2px; border-bottom: #a3a3a3 1px solid; display: inline-block; left:-2px;} #location .location_map .btn_wrap{display: flex; justify-content: space-between; margin-top: 20px;} #location .root_daum_roughmap_landing{width: 100% !important;} #register{background: #f8f7f6;} #register .input_s{display: flex; justify-content: space-between; flex-wrap: wrap; width: 1000px; margin: 0 auto; margin-top: 30px;} #register .input_s > div{width: 49%; margin-bottom: 10px;} #register .input_s > .agree{width: 100%;} #register .input_s > div > p{font-size: 1.3rem; font-weight: 400; margin-bottom: 10px;} #register .input_s > div > p:after{position: relative; left: 2px; top: -2px; content: "*"; color: var(--pt02); font-size: 1.2rem;} #register .input_s > div > .pn:after{content: "";} #register .input_s input{width: 100%; height: 80px; background: transparent; border: solid 1px #0000001a; border-radius: 5px; font-size: 1.2rem; padding: 20px; font-weight: 300; margin-bottom: 20px;} #register .input_s .agree{height: 250px; border: solid 1px #0000001a; border-radius: 5px; padding: 20px; padding-right: 15px; overflow-y: scroll; color: #5c5c5c; line-height: 1.3;} #register .input_s .contact{width: 100%;} #register .input_s .contact .checkbox label{display: flex; align-items: center; padding-left: 25px; left: 5px; top: 5px; font-size: 1.2rem; line-height: 1.1;} #register .input_s .contact .checkbox input{display: none;} #register .input_s .contact .checkbox input:checked + label:before{border: 2px solid var(--back00);} #register .input_s .contact .checkbox input:checked + label:after{background: var(--back00);} #register .input_s .contact .checkbox input + label:before{content: ""; display: block; width: 15px; height: 15px; position: absolute; left: 0; border: 2px solid #ddd; border-radius: 50%;} #register .input_s .contact .checkbox input + label:after{content: ""; display: block; width: 7px; height: 7px; position: absolute; left: 6px; background: #fff; border-radius: 50%;} #register .contact_btn{width: 350px; height: 60px; line-height: 58px; background: #000000; border-radius: 20px; color: #fff; font-weight: 500; font-size: 1.4rem; text-align: center; cursor:pointer; margin: 30px auto; margin-top: 60px;} #register .contact_btn a{position: absolute; width: 100%; height: 100%; top: 0; left: 0;} #footer .inner{padding: 80px 0;} #footer .inner > div{width: 100%; display: block;} #footer .ft1{padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #d6d6d6; font-size: 1.3rem;} #footer .ft1>div:nth-of-type(2){font-size: 1.2rem; color: #999999; margin-top: 10px;} #footer .ft1>div:nth-of-type(2) b{font-weight: 800; color: #000000;} #footer .ft1 div p span{margin-left: 5px; font-size: 2.3rem; font-weight: 800;} #footer .ft2{color: #666666;} #footer .ft2 a{color: #000000;} #footer .ft2 ul{display: flex; align-items: center; margin-bottom: 20px;} #footer .ft2 ul li{display: flex; align-items: center; margin-right: 20px; font-size: 1.4rem; color: #999999;} #footer .ft2 ul li span{font-size: 1.2rem; margin-left: 5px;} #footer .warning{font-size: .9rem; opacity: .7; text-align: left; margin-top: 20px; line-height: 1.3;} #footer .warning p{margin-top: 10px;} #footer .logo img{display: block; width: 200px; height: auto;} .mobile_notice_popup{display: none;} .mobile_notice_popup.is_hide{display: none !important;} .quick{position: fixed; right: 20px; bottom: 20px; font-size: 1.1rem; font-weight: 600; z-index: 999;} .quick ul{display: flex; flex-direction: column; align-items: center; color: #ffffff;} .quick ul li{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 105px; height: 105px; border-radius: 100%; overflow: hidden; background: #222222; cursor: pointer;} .quick ul li img{width: 40px; margin-top: -8%;} .quick .quick_btn li:last-child{ display: none; } .quick ul li a{position: absolute; width: 100%; height: 100%; left: 0; top: 0;} .quick ul li.vr_view{background: #00669f; line-height: 1.3; margin-bottom: 5px;} .quick .quick_info{display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px;} .quick .quick_info li{width: 140px; height: 72px; min-height: 72px; max-height: 72px; display: flex; flex: none; align-items: center; justify-content: center; padding: 5px 10px; color: #003E5F; background: linear-gradient(180deg, #FFF7B8 0%, #FFD84D 100%); border: 2px solid #FFB800; border-radius: 10px; box-shadow: 0 7px 18px rgba(0, 0, 0, .28); font-size: 1.25rem; font-weight: 700; line-height: 1.18; text-align: center; letter-spacing: -.04rem; cursor: default;} .quick ul:not(.quick_info) li{ background: #000000;} .vr_view01{background: #9f2c7c !important;} .vr_view b{font-size: 1.6rem; font-weight: 800;} .vr_wrap{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000000d8; z-index: 999; display: none; flex-direction: column; align-items: center;} .vr{width: 80%; height: 80%;} .vr iframe{width: 100%; height: 100%;} .vr > div{width: 100%; height: 100%;} .vr_close{cursor: pointer; margin: 20px 0; z-index: 999;} ::-moz-selection{background-color:var(--back02);color:#fff;} ::-webkit-selection{background-color:var(--back02);color:#fff;} ::selection{background-color:var(--back02);color:#fff;} ::-webkit-scrollbar {width: 8px;} ::-webkit-scrollbar-track {background-color:#f3f3f3;} ::-webkit-scrollbar-thumb {background-color: var(--back00);} :root{ --back00:#3b3b3b; --back02:#9e9e9e; --pt02:#08d088; } [data-aos=fade-right]{transform: translate3d(-30px,0,0);} [data-aos=fade-left]{transform: translate3d(30px,0,0);} [data-aos=fade-up]{transform: translate3d(0,50px,0);} @media(max-width:1600px){ html{font-size: 13px;} .inner{max-width: 90%;} .menu>ul li{margin: 0 20px;} #environment .inner .environment_img > img{width: 100%;} #environment .inner .environment_img > .e_ul1 li div div img{width: 100%;} #environment2 .environment2_img .gtx > div:nth-of-type(1) > div img{width: 100%;} #meta-class1 .inner .meta_tx{padding: 120px;} #meta-class1 .inner .meta_tx > span{width: 8vw; margin: 0 10px;} #meta-class1 img{width: 100%;} #premium .inner{max-width: 90%;} #premium .premium_tx > div img{width: 140px;} #premium .premium_tx p:nth-of-type(2){margin-left: 10vw;} #premium .premium_tx b{letter-spacing: -1rem;} #unit .inner{min-width: auto; max-width: 90%;} #unit ul{flex-wrap: wrap; gap: 20px;} #unit ul li{ width: calc((100% - 60px) / 4);} #unit .type > div > div{width: 95%; min-width: auto;} #interior .inner{min-width: auto; max-width: 90%;} #cg .cg_bg{width: 800px;} #cg .cg_img{margin-left: 0; min-width: 800px;} } @media(max-width:1200px){ html{font-size: 12px;} .top_wrap .call{font-size: 1.8rem;} .menu>ul li{margin: 0 15px;} .top_wrap .logo{width: 150px; height: 30px;} #main1 .main1_slide .main1_slide1 .slide1_tx p{left: 3%;} #main1 .main1_slide .main1_slide1 .slide1_tx>b{align-self: center;} #main1 .main1_slide .swiper-slide .main_tx > b::before{width: 570px;} #main1 .main1_slide .swiper-slide .main_tx > b::after{width: 570px;} #main1 .main1_slide .main1_slide2 .main_tx > b::before{width: 400px;} #main1 .main1_slide .main1_slide2 .main_tx > b::after{width: 400px;} #environment .inner .environment_img > .e_ul1 li{text-wrap: nowrap;} #environment .inner .environment_img > .e_ul1 li div div{width: 80%; margin: 0 auto;} #environment .inner .environment_img > .e_ul1 li div div img{width: 100%;} #environment2 .environment2_img .gtx-a2-wrap{width: 100%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(1){left: -15%;} #environment2 .environment2_img .gtx-a2.gtx-e2 > div > div:nth-of-type(1){left: -3%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(2){left: -8%;} #environment2 .environment2_img .gtx-a2.gtx-e2 > div > div:nth-of-type(2){left: 26%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(7){top: 52%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(8){top: 68%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(10){right: -6%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(11){right: -9%;} #meta-class1 .inner .meta_tx{padding: 80px;} #unit .type .unit_cont > div:nth-of-type(2) img{width: 90%;} #unit .type .unit_cont > div:nth-of-type(1) img{width: 250px;} #interior .big_wrap img{width: 100%;} #cg{min-width: auto; flex-direction: column;} #cg .cg_bg{width: 100%; height: 700px;} #cg .cg_img{min-width: auto; max-width: 850px; width: 100%; margin: 50px 0;} .sound{bottom: 20px; left: 20px;} #footer .ft2 ul{flex-direction:row; align-items:center;} } @media(max-width:1024px){ .inner{padding: 100px 0;} .menu{position: absolute; top: 0; left: 0; width: 100%;} .menu>ul{position: absolute; flex-direction: column; top: 0; right: 0; width: 0; height: 100vh; background: #ffffff; color: #000000; font-weight: 500; transition: width .5s; font-size: 1.7rem;} .menu>ul li{width: 60%; border-bottom: 1px solid #0000001a; padding: 3vh 0; opacity: 0; transition: opacity .5s;} .menu>ul li:first-child{margin-top: -5vh;} .menu>ul li:last-child{border: 0;} .menu>ul li::before{display: block; content: ""; position: relative; width: 5px; height: 5px; background: var(--pt02); top: 52%;} .menu>ul li p{margin-left: 12px;} .menu>ul.on{width: 100%;} .menu>ul.on li{opacity: 1;} .menu_m>div{cursor: pointer; z-index: 1;} .menu_m>div.on span{width: 40px; left: 5px; background: #000000;} .menu_m>div.on span:nth-of-type(1){transform: rotate(135deg); top: 7px;} .menu_m>div.on span:nth-of-type(2){display: none;} .menu_m>div.on span:nth-of-type(3){transform: rotate(-135deg);} .menu_m{display: flex; flex-direction: column; justify-content: center; align-items: flex-end; width: 95%; height: 60px; transition: height .5s;} .menu_m>div span{display: block; width: 30px; height: 2px; margin: 6px 0; background: #fff; transition: transform .5s;} .top_wrap{height: 60px;} .top_wrap .call{display: none;} .top_wrap .logo{z-index: 1; margin-left: 5%;} .top_wrap .logo img{width: 150px;} .top_wrap.on{height: 70px;} .top_wrap.on .menu_m{height: 70px;} .top_wrap.on .menu ul{top: 0;} .top_wrap.on .menu_m>div span{background: #000000;} .m_br{display: block;} #main1 .main1_slide .main1_slide1 .slide1_tx p{left: 2%;} #main1 .main1_slide .main1_slide1 .slide1_bg img{width: 90%;} #main1 .main1_slide .main1_slide1 .slide1_tx{width: 70vw; margin-top: -5%;} #main1 .main1_slide .main1_slide1.swiper-slide-active .slide1_tx{margin-top: -10%;} #main1 .main1_slide .main1_slide1 .slide1_tx>b{font-size: 12vw; letter-spacing: -.5rem;} #main1 .main1_slide .main1_slide1 .slide1_tx i{left: 0;} #environment .inner .environment_img > .e_ul1{flex-wrap: wrap;} #environment .inner .environment_img > .e_ul1 li{width: 48%; margin-bottom: 30px;} #environment .inner .environment_img > .e_ul1 li p{height: auto; height: 90px;} #environment2 .environment2_img .gtx-a2-wrap{min-width: auto;} #environment2 .environment2_img .gtx-e2-wrap{height: 350px;} #environment2 .environment2_img .gtx-e2{transform: scale(.78);} #environment2 .environment2_img .gtx-a, #environment2 .environment2_img .gtx-e{flex-direction: column; text-align: center;} #environment2 .environment2_img .gtx-a2, #environment2 .environment2_img .gtx-e2{margin: 0;} #environment2 .environment2_img .gtx > div:nth-of-type(1) > div img{display: none;} #environment2 .environment2_img .gtx > div > div > div{margin: 0 auto 50px auto;} #environment2 .environment2_img .gtx > div:nth-of-type(1){width: 100%;} #environment2 .environment2_img .gtx > div:nth-of-type(1)::before{left: 50%; transform: translateX(-50%);} #meta-class1 .inner .meta_tx{flex-direction: column; align-items: center; text-align: center;} #meta-class1 .inner .meta_tx p{margin-top: 15px;} #meta-class1 .inner .meta_tx > span{width: 60%; margin: 30px 0;} #unit ul{flex-wrap: wrap;} #unit ul li{width: 48%; margin-bottom: 30px;} #unit .type .unit_cont > div:nth-of-type(1) img{margin: 0;} #unit .vr_view_m{display: block;} #unit .vr_view_m{position: absolute; top: -10px; left: -10px; display: flex; background: #9f2c48; width: 75px; height: 75px; flex-direction: column; justify-content: center; color: #ffffff; border-radius: 100%; text-align: center; line-height: 1.1;} #unit .vr_view_m p{font-size: 1.1rem;} #register .input_s{width: 90%;} #location .location_map{width:100%;} #location .location_map .map_1{width:100%;} #location .location_map .tx{margin-bottom: 20px; left: 2px;} #location .location_map .tx > div:nth-child(2){width:190px;} #location .location_map .tx > div:nth-child(3){width:50px;} #location .location_map .btn_wrap{flex-direction: column;} #footer .inner{padding: 60px 0 120px 0;} #footer .ft2 ul{ flex-direction:row; align-items:center; } #footer .ft2 ul li:first-child{ flex-direction:row; align-items:center; flex-wrap:wrap; font-size:11px; line-height:1.6; } #footer .logo img{ width:140px; } .mobile_notice_popup.is_show{position: fixed; left: 0; top: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; padding: 20px 14px 80px; background: rgba(0, 0, 0, .55);} .mobile_notice_inner{ width: 100%; max-width: 420px;} .mobile_notice_img{overflow: hidden; background: #ffffff; font-size: 0;} .mobile_notice_img img{display: block; width: 100%; height: auto;} .mobile_notice_close{position: absolute; right: 0; top: -40px; width: 38px; height: 38px; border: 0; background: #ffffff; cursor: pointer;} .mobile_notice_close span{position: absolute; left: 50%; top: 50%; width: 24px; height: 2px; background: #000000;} .mobile_notice_close span:nth-child(1){transform: translate(-50%, -50%) rotate(45deg);} .mobile_notice_close span:nth-child(2){transform: translate(-50%, -50%) rotate(-45deg);} .mobile_notice_today{display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; background: #222222; color: #ffffff; font-size: 1.25rem; font-weight: 500; cursor: pointer;} .mobile_notice_today input{width: 16px; height: 16px; margin-right: 7px;} .quick{bottom: 0; right: 0; width: 100%; height: auto; font-size: 1.2rem;} .quick ul{flex-direction: row;} .quick ul li{flex-direction: row; width: 50%; height: 60px; border-radius: 0;} /*2개로 바꿀 시에는 width:50%로 수정할 것*/ .quick ul li img{margin-right: 5px; margin-top: 0;} .quick .quick_btn li:last-child{ display: flex; border-left: 1px solid #ffffff3f;} .quick .quick_btn li:last-child img{ width: 34px; margin-left: -6px;} .quick ul li.vr_view{display: none;} .quick .m_br{display: block;} .quick .quick_info{ display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: 4px; width: 100%; margin: 0; padding: 0 0 6px;} .quick .quick_info li{flex: 1; width: auto; height: 54px; min-height: 54px; max-height: 54px; padding: 5px 2px; flex-direction: column; border-radius: 7px; border: 1px solid #FFB800; background: linear-gradient(180deg, #FFF7B8 0%, #FFD84D 100%); box-shadow: 0 4px 9px rgba(0, 0, 0, .25); color: #003E5F; font-size: 12px; font-weight: 800; line-height: 1.15; letter-spacing: -.04em; text-align: center; cursor: default;} .vr_close{margin: 10px 0; text-align: center;} .vr_close img{width: 70%;} } @media(max-width:800px){ *{-webkit-tap-highlight-color:transparent;} html{font-size: 11px;} .tit{font-size: 4rem; margin-bottom: 50px;} #main1{height: auto;} #main1 .swiper-wrapper{flex-direction: column;} #main1 .main1_slide .swiper-slide{height: 100vh; min-height: 600px;} /* #main1 .main1_slide .main1_slide2, #main1 .main1_slide .main1_slide3{height: 600px;} */ #main1 .main1_slide .main1_slide2{ background-position: center center;} #main1 .main1_slide .main1_slide2::before{position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: #421f114d;} #main1 .main1_slide .main1_slide3{background-position: center center;} #main1 .main1_slide .main1_slide1 .slide1_bg img{width: 100%; height: 100%; object-fit: cover;} #main1 .main1_slide .main1_slide1 .slide1_tx{width: 80vw;} #main1 .main1_slide .main1_slide1 .slide1_tx>b{font-size: 13.8vw;} #main1 .main1_slide .main1_slide1 .slide1_tx i{padding: 5px 8px; font-size: 1.45rem; line-height: 1.35; } #main1 .main1_slide .swiper-slide .main_tx > i{font-size: 1.45rem; line-height: 1.35; margin-top: 16px;} #main1 .main1_slide .swiper-slide .main_tx > b{font-size: 4.5rem; letter-spacing:-.05rem; line-height: 1.08; font-weight: 800;} #main1 .main1_slide .swiper-slide .main_tx > p{margin-top: 0;} #main1 .main1_slide .swiper-slide .main_tx{margin-top: 0;} #main1 .main1_slide .swiper-slide .main_tx > b::before{width: 345px;} #main1 .main1_slide .swiper-slide .main_tx > b::after{width: 345px;} #main1 .main1_slide .main1_slide2 .main_tx > b::before{width: 255px;} #main1 .main1_slide .main1_slide2 .main_tx > b::after{width: 255px;} #environment .inner > div .tit{font-size: 4rem;} #environment .inner .environment_img{margin-top: 40px;} #environment .inner .environment_img > img{border-top-left-radius: 40px; border-bottom-right-radius: 40px;} #environment .inner .environment_img > .e_ul1 li{width: 100%; margin-bottom: 50px; transition-delay: 0;} #environment .inner .environment_img > .e_ul1 li > img{width: 48px;} #environment .inner .environment_img > .e_ul1 li p{height: auto; margin-bottom: 20px; font-size: 1.5rem;} #environment .inner .environment_img > .e_ul1 li:last-child{margin: 0;} #environment .inner .environment_img > .e_ul1 li b{font-size: 2rem;} #environment2 .tit > span:nth-of-type(1){font-size: 3.2rem;} #environment2 .environment2_tx .gra{font-size: 3.8rem;} #environment2 .environment2_tx > b{font-size: 3.2rem;} #environment2 .environment2_img{margin: 50px 0 100px 0;} #environment2 .environment2_img .gtx-a{padding-bottom: 10vw;} #environment2 .environment2_img .gtx-a2{left: 1%;} #environment2 .environment2_img .gtx-a2 > img{width: 100%;} #environment2 .environment2_img .gtx{margin-bottom: 10vw;} #environment2 .environment2_img .gtx > div:nth-of-type(2) > div{margin-top: 0px; transform: scale(.7);} #environment2 .environment2_img .gtx-e > div:nth-of-type(2) > div{transform: scale(.85);} #environment2 .environment2_img .gtx > div > div > div{margin: 0 auto 30px auto;} #environment2 .environment2_img .gtx > div > p{font-size: 2rem;} #environment2 .environment2_img .gtx-a2-wrap{height: 350px; background-position-x: 35%;} #environment2 .environment2_img .gtx-e2-wrap{height: 45vw;} #environment2 .environment2_img .gtx-e .gtx-e2 > div > div img, #environment2 .environment2_img .gtx-a .gtx-a2 > div > div img{width: 112px;} #environment2 .environment2_img .gtx-e2 > div > div .dot{width: 23px; height: 23px; border: 5px solid #6d4728;} #environment2 .environment2_img .gtx-e2 > div > div .dots{width: 15px; height: 15px; border: 3px solid #6d4728;} #meta-class1 .inner > div{ border-top-left-radius: 70px; border-top-right-radius: 70px; margin-bottom: 70px;} #meta-class1 .inner > div ul{flex-wrap: wrap; justify-content: space-between;} #meta-class1 .inner > div ul li{width: 49%;} #meta-class1 .inner > div ul li:nth-of-type(-n+2){margin-bottom: 10px;} #meta-class1 .inner > div:nth-of-type(1) ul{margin-top: 10px;} #meta-class1 .inner > div:nth-of-type(2) ul{margin-bottom: 10px;} #meta-class1 .inner > div:nth-of-type(3) .meta_img > div{margin-bottom: 10px;} #meta-class1 .inner > div:nth-of-type(3) .meta_img > div:last-child{margin: 0;} #meta-class1 .inner > div:nth-of-type(3) .meta_img{flex-direction: column;} #meta-class1 .inner > div:nth-of-type(3) .meta_img img{height: 220px; object-fit: cover;} #premium{overflow: hidden; height: auto; padding-bottom: 100px;} #premium .inner{margin-top: 80px; max-width: 100%; padding: 0;} #premium .inner > div > div{width: 85%;} #premium .inner > div > div:not(.premium1){margin-top: 120px;} #premium .inner > div > div img{width: 100%;} #premium .premium_tx{height: 50vh; position: relative;} #premium .premium_tx p:nth-of-type(1){font-size: 2.5rem;} #premium .premium_tx > div img{width: 100px;} #premium .inner > div > div > div b{padding-left: 10px;} #premium .inner > div > div > div p{padding-left: 10px;} #premium .inner > div > div > b{mix-blend-mode: luminosity;} #premium2 .premium2_tx{padding: 100px 0;} #premium .inner > div > div > div .premium_desc{padding-left: 10px;} #main1 .main1_slide .main1_slide3 .slide_logo{margin: 18px 0 12px;} #main1 .main1_slide .main1_slide3 .slide_logo img{width: 230px;} #premium .premium_tx .premium_sub{margin-bottom: 28px;} #unit .inner .tit{letter-spacing: -.1rem;} #unit .unit_sub_tit{margin: -20px auto 35px auto; padding: 10px 22px; font-size: 1.5rem; text-align: center;} #unit .type .unit_cont{flex-direction: column; justify-content: flex-start; overflow-y: scroll;} #unit .type .unit_cont::-webkit-scrollbar {width: 0px;} #unit .type .unit_cont > div:nth-of-type(1){width: auto; margin: 0; display: flex; flex-direction: column; align-items: center;} #unit .type .unit_cont img{width: 80%;} #unit .type > div > div{min-width: 90%;} #unit .type .unit_cont > div:nth-of-type(2) img{width: 70%;} #unit .type .unit_cont table td{height: 35px;} #unit .type .unit_cont .m2{height: 120px;} #unit .type .unit_cont .m2 b{font-size: 4.5rem;} #unit .type .unit_cont .m2 b span{font-size: 2.5rem;} #unit .type .type_close{top: 3%; width: 32px; height: auto;} #unit .type .unit_cont > div:nth-of-type(2){text-align: center;} #interior .big_wrap img{width: 90%;} #interior .interior_sub_tit{ margin: -20px auto 35px auto; padding: 10px 22px; font-size: 1.5rem; text-align: center;} #cg .cg_bg{height: 600px;} #cg .cg_img{width: 90%; margin: 20px 0;} #cg .cg_img ul li{flex-direction: column-reverse;} #cg .cg_img ul li:nth-of-type(even){flex-direction: column;} #cg .cg_img ul li:nth-of-type(odd) b::before, #cg .cg_img ul li:nth-of-type(even) b::after{display: none;} #cg .cg_img ul li:nth-of-type(even) div, #cg .cg_img ul li:nth-of-type(odd) div{left: 0;} #cg .cg_img ul li div{padding: 30px 10px 5px 0;} #cg .cg_img ul li b{font-size: 2rem;} #cg .cg_img ul li p{font-size: 1.3rem;} #cg .cg_img ul li img{width: 100%; height: 250px;} #overview .inner > div{flex-direction: column;} #overview .inner table{width: 100%;} #overview .inner > div > div{width: 100%;} #overview .tit{margin-bottom: 12px;} #overview .overview_sub_tit{margin-bottom: 35px; padding: 0 20px; font-size: 1.5rem; line-height: 1.45;} #register .input_s{width: 100%; flex-direction: column;} #register .input_s > div{width: 100%; margin-bottom: 0;} #register .input_s input{height: 70px; margin-bottom: 10px;} #register .input_s .agree{height: 150px;} #footer .inner > div{display: block;} #footer .warning{text-align: left; margin-top: 20px;} #footer .ft1>div:nth-of-type(2){line-height: 1.5;} } @media(max-width:600px){ #main1 .main1_slide .main1_slide1 .slide1_tx{width: 88%;} #main1 .main1_slide .main1_slide1 .slide1_tx p{font-size: 2rem;} #main1 .main1_slide .main1_slide1 .slide1_tx>b{font-size: 14.5vw; letter-spacing: -.3rem;} #main1 .main1_slide .main1_slide1 .slide1_tx i{font-size: 1.4rem;} #main1 .main1_slide .swiper-slide ul li{width: 75px; height: 75px; margin: 0 3px; border: 4px solid #ffffff;} #main1 .main1_slide .swiper-slide .main_tx > p{font-size: 2.5rem;} #meta-class1 .inner{padding: 70px 0 100px 0;} #meta-class1 .inner .meta_tx{padding: 80px 50px;} #unit ul li{width: 70%; margin: 0 auto 30px auto;} #unit ul li .unit_type{padding: 25px 30px 30px 30px;} #environment2 .environment2_img .gtx-a2, #environment2 .environment2_img .gtx-e2{width: 100%;} #environment2 .environment2_img .gtx-a2-wrap{height: 65vw;} #environment2 .environment2_img .gtx-e2-wrap{height: 45vw;} #environment2 .environment2_img .gtx-a2.gtx-e2 > div > div:nth-of-type(1){left: -5%;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(4){left: 72%; top: -17%;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(5){left: 91%; top: -11%;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(2){top: 83%;} #location .location_map .map_1{height: 220px;} } @media(max-width:530px){ #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(1){left: -17%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(2){left: -9%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(8){right: 0%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(10){right: -7%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(11){right: -10%;} } @media(max-width:460px){ .tit{margin-bottom: 30px;} #main1 .main1_slide .main1_slide1 .slide1_tx{margin-top: -10%;} #main1 .main1_slide .main1_slide1.swiper-slide-active .slide1_tx{margin-top: -22%;} #main1 .main1_slide .main1_slide1 .slide1_bg img{width: 100%;} #main1 .main1_slide .main1_slide1 .slide1_tx p{left: 1%;} #main1 .main1_slide .main1_slide1 .slide1_tx>b{font-size: 14.5vw; letter-spacing: -.2rem; word-spacing: -.5rem;} #main1 .main1_slide .main1_slide1 .slide1_tx i{font-size: 1.3rem;} #main1 .main1_slide .swiper-slide .main_tx > b::before, #main1 .main1_slide .swiper-slide .main_tx > b::after{height: 35px;} #main1 .main1_slide .swiper-slide .main_tx > b::before{margin-bottom: 0;} #main1 .main1_slide .swiper-slide .main_tx > b::after{margin-top: 0;} #main1 .main1_slide .main1_slide3 .slide_logo img{width: 210px;} #main1 .main1_slide .main1_slide3 .slide_logo{margin: 14px 0 8px;} #meta-class1 .inner > div{ border-top-left-radius: 50px; border-top-right-radius: 50px; margin-bottom: 80px;} #meta-class1 .inner > div:last-child{margin: 0;} #meta-class1 .inner .meta_tx{padding: 60px 10px 40px 10px;} #meta-class1 .inner .meta_tx div b span{font-size: 3.6rem;} #meta-class1 .inner .meta_tx div b{font-size: 3.2rem;} #meta-class1 .inner .meta_tx p{font-size: 1.8rem;} #meta-class1 .inner .meta_tx > span{width: 90%;} #meta-class1 .img_tx{font-size: 1rem; bottom: 7px; left: 7px;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(1){left: -18.6vw; top: -3%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(2){left: -10%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(3){top: 9.5%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(4){top: 9.5%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(7){top: 50%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(8){right: -2%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(9){right: -7%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(10){right: -9%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(11){right: -12%;} #environment2 .environment2_img .gtx-a2.gtx-e2 > div > div:nth-of-type(1){left: -7%; top: 76%;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(2){top: 79%;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(3){top: -9%;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(4){left: 73%; top: -24%;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(5){top: -18%;} #environment2 .environment2_img .gtx-e .gtx-e2 > div > div img{width: 90px;} #premium .premium_tx{height: 40vh;} #premium .premium_tx > div img{width: 55px; margin-left: 10px;} #premium .premium_tx b{letter-spacing: 0;} #premium .premium_tx p:nth-of-type(2){margin-left: 5vw; font-size: 1.8rem; letter-spacing: 1rem;} #premium .inner > div > div > div b{font-size: 2rem; line-height: 1.2;} #premium .inner > div > div > b{font-size: 3rem;} #premium .premium_tx .premium_sub{margin-bottom: 24px;} #unit ul li{width: 100%; transition-delay: 0s; font-size: 1.5rem;} #unit ul li .unit_type b{font-size: 2.5rem;} #unit ul li .unit_type b span{font-size: 2rem;} #unit ul li img{width: 70%;} #unit ul li > div:nth-of-type(1){text-align: center;} #unit .type .unit_cont .m2 b{letter-spacing: -.2rem;} #unit .type .unit_cont > div:nth-of-type(1) img{display: block; width: 60%;} #unit .type .unit_cont table{margin-bottom: 0;} #cg .cg_bg{height: 400px;} #overview .inner table{font-size: 1.5rem;} #overview .inner table th{font-size: 1.5rem;} } @media(max-width:390px){ #environment2 .environment2_tx > b{font-size: 2.9rem;} #environment2 .environment2_tx .gra{font-size: 3.6rem;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(1){left: -19vw;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(2){left: -11%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(3){top: 8%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(4){top: 8%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(7){top: 49%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(8){right: -3%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(9){right: -8%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(10){right: -9%;} #environment2 .environment2_img .gtx-a2 > div > div:nth-of-type(11){right: -13%;} #environment2 .environment2_img .gtx-a2.gtx-e2 > div > div:nth-of-type(1){left: -7%;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(3){top: -9%;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(4){top: -24%;} #environment2 .environment2_img .gtx-e2 > div > div:nth-of-type(4){left: 74%;} }