.skip,.sound_only,legend{position:absolute}a,abbr,address,article,aside,audio,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,header,hgroup,hr,html,i,iframe,img,ins,kbd,li,main,mark,nav,ol,output,p,pre,q,ruby,s,samp,section,small,span,strong,sub,summary,sup,tbody,td,tfoot,th,thead,time,tr,u,ul,var,video,input,button,select,textarea{padding:0;margin:0;border:0;font:inherit;vertical-align:baseline}body{line-height:1;font-family:'Open Sans','NotoKR',sans-serif;font-size:18px;font-weight:300;color:#282828;letter-spacing:-.04em}a{text-decoration:none;color:inherit}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,hr{display:none}legend{height:0;font-size:0;line-height:0;overflow:hidden;text-indent:-20000px}address,cite,em{font-style:normal}button,label{cursor:pointer}button{border:0;background:0 0;display:inline-block}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}.skip,.sound_only{visibility:hidden;top:0;left:0} *{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px; } html, body {height:100%;letter-spacing:0px;font-family:'Play','Pretendard','NanumBarunGothic',sans-serif, Dotum, Gulim, Arial, Verdana, Helvetica, AppleGothic, Sans-serif;color: #222222; font-size:16px; } img{border:none;} a{text-decoration:none;color:black;} ul,ol,li{list-style:none;} html { scroll-behavior: smooth;} button {all: unset; display: inline-block; cursor: pointer;} * {margin: 0;padding: 0;box-sizing: border-box;letter-spacing: -0.5px; word-break: keep-all;white-space: normal;} body, html {height: 100%;overflow-x: hidden;} /* header */ #header {width:100%;height:auto;position:absolute;top:0;left:0;z-index: 99;transition:all 0.3s ease;} .h_box {width: 100%;margin:0 auto;position:relative;height: 80px;z-index: 99;} .h_box h1 {padding:20px 0;} .h_box h1 a {transition:all 0.3s ease; display:block;} .gnb {border: 1px solid;display: inline-block;} .gnb li a {color:#fff; display: -webkit-box; display:-moz-box; display: -ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size:14px;} .gnb li i {display:block; width:24px; height:24px; background-position:center; background-repeat:no-repeat; background-size:100%; margin-right:8px;} .ico-menu {display:block; width:24px; height:24px; position:relative; font-size:0;} .ico-menu:before {content:'';display:block;width: 26px;height:2px;background: #ffffff;position:absolute;top:2px;left:0;box-shadow: 0 5px #ffffff, 0 10px #ffffff;} .snb {position:absolute;top:18px;right: 40px;display: -webkit-box;display:-moz-box;display: -ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: none;} .snb li a {display:block; width:auto; height:auto; color:#fff; line-height:100%; font-size:13px;} .snb li .ico-menu:before {content: "";background:#fff;box-shadow: 0 7px #fff, 0 14px #fff;} .snb li .menu-open {width:48px;height:48px;box-sizing:border-box;padding:15px 14px;} .snb li .menu-open:hover {} .snb li .menu-open:hover .ico-menu:before {background: #ffffff;box-shadow: 0 7px #ffffff, 0 14px #ffffff;} .h_box > div{width:1300px;margin:0 auto;display: flex;justify-content: space-between;height: 80px;align-items: center;} .solid{background: #1b1b1b !important;!important} .solid .header{width: 1300px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;} .h_box {width: 100%;margin: 0 auto;position: relative;height: 80px;background-color: #1b1b1b;} .h_box h1 {padding: 20px 0;margin: 0;} .h_box h1 a {display: block;text-align: center;} .h_box h1 img {max-height: 40px;} .gnb {border: 1px solid;display: inline-block;} .gnb li a {color: #fff;display: flex;align-items: center;font-size: 14px;} .snb {position: absolute;top: 18px;right: 40px;display: flex;align-items: center;display: none;} .back-button {display: none;position: absolute;left: 20px;top: 50%;transform: translateY(-50%);background: none;border: none;font-size: 16px;color: #fff;cursor: pointer;z-index: 9;} .back-button:before {content: '';margin-right: 5px;background: url('/images/bullet8.png')no-repeat 0rem center;width: 50px;height: 50px;display: block;padding: 0 10px;} @media (max-width: 1024px) { .h_box {display: flex;justify-content: center;align-items: center;} .h_box > div {flex-direction: column;} .h_box h1 {position: absolute;left: 50%;transform: translateX(-50%);} .transparent .h_box{display:block; padding:0;} .transparent .h_box h1{position: relative;left: auto;transform: translate(0);} .back-button {display: block;} #nav {display: none;} .left_link{top:0;} } .fadeUp {opacity: 0;transform: translateY(50px); transition: opacity 0.8s, transform 0.8s;} .fadeUp.visible {opacity: 1;transform: translateY(0);} .swiper-slide {position: relative;width: 100%;height: 100vh; background-size: 100vh; background-position: center;background-repeat: no-repeat;animation: zoom-in 10s ease-in-out infinite; background-size: cover;} @keyframes zoom-in { 0% { background-size: 100%; } 50% { background-size: 105%; } 100% { background-size: 100%; } } .visual-text {z-index: 1;color: white;} .txt_center {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} .pic img { opacity: 0; transform: translateY(50px);animation: slideUp 0.5s ease forwards;} @keyframes slideUp { to { opacity: 1; transform: translateY(0); } } #btnWrap {width: 500px;margin: 100px auto;} #popupBtn {width: 150px;height: 50px;padding: 10px 5px;} #modalWrap {position: fixed; z-index: 1; padding-top: 100px; left: 0;top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); /* Black w/ opacity */display: none;z-index:999999;} #modalBody {width: 500px;height: 300px;padding: 30px 30px;margin: 0 auto;border: 1px solid #777;background-color: #fff;z-index:999999;} #closeBtn {float:right;font-weight: bold;color: #777;font-size:25px;cursor: pointer; z-index:9999999;} .visual-text {width: 1300px;margin: 0 auto;color: #fff;/* height: 100vh; */position: absolute;top: 50%;left: 50%;transform: translate(-50%);} .visual-text h3 {font-size: 4rem;font-weight: 600;margin-bottom: 10px;line-height: 1.3em;text-shadow: 2px 2px 5px #eeeeee17;} .visual-text p {font-size: 1.8rem;margin: 0;animation-delay: 0.2s;margin-top: 40px;margin-bottom: 40px;font-weight: 100;} .txt_right_top{text-align: right;top: 23%;right: 0;bottom: auto;position: absolute;} .txt_right_top{} .txt_center{top: 50%;left: 50%;position: absolute;text-align: center;transform: translate(-50%, -50%);} .txt_left_btm{} /* slider */ .swiper {width: 110%;height: 110%;margin-top: -50px;} .swiper-slide {text-align: center;background: #fff;display: flex;justify-content: center;align-items: center;} .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;} @keyframes background-grow { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } .cf:after {content: "";display: table;clear: both;} *, *:before, *:after {box-sizing: border-box;} .container {position: relative;height: 100%;} .slick-dots {display: none !important;position: absolute;top: 0;left: 0;width: 100%;padding: 0 3px;} .slick-dots li {cursor: pointer;float: left;width: 33.3%;background: #000;padding: 0;border-right: 1px solid #fff;} .slick-dots li:last-child {border: none;} .slick-dots li, .slick-dots li button {outline: none;} .slick-dots li button {background: #99B386;border: none;width: 0px;height: 10px;padding: 0;cursor: pointer;display: block;} .hero-slider .img--holder {background-position: bottom center;transform: scale(1.1) rotate(0.1deg);transition: transform 8s linear;} .hero-slider .slide-init .img--holder {transform: scale(1.1) rotate(0.1deg) !important;transition: transform 0s linear;} .slick-active .img--holder {transform: scale(1) rotate(0.1deg);} .slick-slide .img--holder {background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;} .slick-slide.office-photo .img--holder {background-position: bottom center;} .hero-slider .slick-arrow {position: absolute;top: 50%;width: 60px;height: 60px;background: rgb(255 255 255 / 9%);border: 0 none;margin-top: -22.5px;text-align: center;font: 35px/45px FontAwesome;color: #FFF;z-index: 1;transition: background 0.1s;border-radius: 50%;} .hero-slider .slick-arrow:focus {outline: 0;} .hero-slider .slick-arrow:hover {display: block;background: #ffffff42;/* z-index: 99; */} .hero-slider .NextArrow {right: 0px;} .hero-slider .PrevArrow {left: 0px;} .hero-slider .NextArrow:before {content: '\f105';} .hero-slider .PrevArrow:before {content: '\f104';} .hero-slider .text--holder {position: absolute;display: inline-block;width: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 99;padding: 0;font-family: garamond, georgia;color: #fff;text-align: center;font-family:'Pretendard';width: 1300px;margin: 0 auto;} .hero-slider .text--holder h3 {font-size: 4rem;font-weight: 600;margin-bottom: 1rem;line-height: 1.32em;text-shadow: 10px 14px 20px #857d495c;letter-spacing: -1px;} .hero-slider .text--holder p{font-size: 2.2rem;margin: 0;animation-delay: 0.2s;margin-top: 2rem;margin-bottom: 2rem;font-weight: 600;} .hero-slider .text--holder p > img{height: 28px;} .hero-slider .text--holder p em{display: inline-block;float: left;margin-right: 18px;} .hero-slider .text--holder .left_bottom{position: absolute;left: 0;text-align: left;} .hero-slider .text--holder .center{/* margin-top: -100px; */} .hero-slider .text--holder .right_top{position: absolute;text-align: right;top: 0;right: 0;margin-top: -10px;} .slick-initialized .slick-slide{overflow:hidden;} .slick-dotted.slick-slider{margin-bottom:0 !important;} .form-group div.options select:focus { border-color: #000; outline: none; background-color: #fff;} .form-group div.options select:disabled{background: #dbdbdb;} textarea::placeholder, input::placeholder{color:#aaa;} .art_area{width: 100%;background: url('/images/art_img1.png')no-repeat;height: 330px;background-size: cover;background-position: center;position: sticky;} .art_area .art_box{color: #fff;width: 1300px;margin: 0 auto;box-sizing: border-box;padding: 5% 0;text-align: center;} .art_area .art_box p{background: url('/images/art_logo.png')no-repeat center top;height: 57px;background-size: 16%;} .art_area .art_box span{display: block;margin-top: 27px;line-height: 1.6em;color: #cbcbcb;} .hero-slider .text--holder .right_top p{float:right;} .hero-slider .text--holder .center p{float: none;display: inline-block;zoom:1;.display:inline;} .art_area{width: 100%;background: url('/images/art_img1.png')no-repeat;height: 330px;background-size: cover;background-position: center;position: sticky;} .art_area .art_box{color: #fff;width: 1300px;margin: 0 auto;box-sizing: border-box;padding: 5% 0;text-align: center;} .art_area .art_box p{background: url('/images/art_logo.png')no-repeat center top;height: 57px;background-size: 16%;} .art_area .art_box span{display: block;margin-top: 27px;line-height: 1.6em;color: #cbcbcb;} .hero-slider .text--holder .right_top p{float:right;} .hero-slider .text--holder .center p{float: none;display: inline-block;zoom:1;.display:inline;} .gallery{ margin-top: 2rem;} .g_icon{/* border-top: 1px solid #333; */margin-top: 1rem;/* border-bottom: 1px solid #333; */} .g_icon ul{display: flex;justify-content: flex-start;padding: 2rem 0;} .g_icon li{width: 20%;text-align: center;box-sizing: border-box;padding: 5rem 0 1rem 0;border-right: 1px solid #ebebeb;/* border-bottom: 1px solid #333; */} .g_icon li:last-child{border-right:none;} .g_icon li:nth-child(1){background: url('/images/g_icon1.png')no-repeat center 16px;} .g_icon li:nth-child(2){background: url('/images/g_icon2.png')no-repeat center 16px;} .g_icon li:nth-child(3){background: url('/images/g_icon3.png')no-repeat center 16px;} .g_icon li:nth-child(4){background: url('/images/g_icon4.png')no-repeat center 16px;} .g_icon li:nth-child(5){background: url('/images/g_icon5.png')no-repeat center 16px;} .g_icon li:nth-child(6){background: url('/images/g_icon6.png')no-repeat center 16px;} .g_txt{margin-top: 3rem;} .g_txt p{font-weight: bold;font-size: 1.2rem;} .g_txt div{margin-top: 10px;line-height: 1.5rem;color: #666;} .btn_area{margin: 5rem auto;text-align: center;} .btn_area .g_btn{padding: 1.8rem 2rem 1.8rem 4rem;background: #333 url('/images/btn_icon.png')no-repeat 1.5rem center;color: #fff;text-align: center;font-size: 1.2em;border-radius: 50px;/* font-family: 'YES24'; */letter-spacing: 0;display: inline-block;} .g_info{border-top: 1px solid #333;margin-top: 1rem;} .g_info table{width: 100%;margin-bottom: 3rem;} .g_info tr{border-bottom:1px solid #7b7b7b3d;} .g_info th{font-weight: 600;vertical-align: middle;} .g_info td{padding: 1.1rem 2rem;color: #666;line-height: 1.8rem;} .g_info td p{} .g_info .g_info_list{} .g_info .g_info_list li{} .g_info_list{margin: 30px 0;line-height: 2em; list-style-type: none; padding-left: 0;} .g_info_list li{font-size: 0.93em;display: block;padding-left: 1em;word-wrap: break-word; margin-bottom: 8px;line-height: 1.5em;} .g_info_list li::before {content: '-';display: inline-block;width: 1em;margin-left: -1em;padding-right: 0.5em;} footer {background-color: #1b1c1e;color: white;text-align: center;padding: 30px 20px;font-size: 1rem; color:#fff; height:200px;} footer .footer_area{width:1300px;margin:0 auto;text-align: left;font-size: 0.9rem;color: #a5a5a5;} footer .footer_area div{display: flex;justify-content: space-between;align-items: center;color: #6d6d6d;} footer .footer_area div a{color: #fff; } footer .footer_area div.footer_box1{} footer .footer_area div.footer_box2{margin-top: 24px;font-size: 0.9em;} footer .footer_area .footer_btn a{padding: 0 20px;font-size: 0.8rem;/* border: 1px solid red; */box-sizing: border-box;padding: 20px 40px;} footer .footer_area .footer_btn a:first-child{padding-left:0;} footer .footer_area .footer_btn a:last-child{padding-right:0;} footer .footer_area div.footer_box2 a{} footer .footer_area div span{margin: 0 10px;color: #d3d3d3;} footer .footer_area div span:first-child{margin-left:0;} footer .footer_area div .mail{color: #b5b5b5;background: url('/images/mail_icon.png') no-repeat 0px 0px;padding-left: 20px;letter-spacing: 0;cursor: pointer;} footer .footer_area p{margin-top: 10px;font-size: 0.8rem;font-family: 'Play';} .pd_b3{padding-bottom:3rem !important;} .open_wrap{width: 100%;margin: 0 auto;padding-top: 3rem ;margin-top: 86px;} .open_wrap .wh_wrap{background: #fff;} .open_wrap .grey_wrap{background: #f5f6f8;padding-top: 50px;padding-bottom: 50px;} .open_wrap .w_box{width:1300px;margin:0 auto;/* padding-bottom: 30px; */z-index: 1;position: relative;} .open_wrap .w_box h3{font-size: 2.8em;font-weight: 600;text-align: center;margin-bottom: 23px;text-transform: uppercase;} .open_wrap .w_box h3 + span{display: block;margin: 10px 0 42px 0;font-size: 16px;text-align: center;} .open_wrap .w_box h3 + span > em{color:#ff0000;} .open_wrap .w_box h5{font-size: 1.8em;font-weight: 600;text-align: center;margin-bottom: 40px;line-height: 1.6em;text-transform: uppercase;} .open_wrap .w_box .s_visual{height: 220px;overflow: hidden;} .open_wrap .w_box .s_visual img{width:100%;height:100%;object-fit: cover; object-position: center;} .open_wrap .w_box .s_visual_txt{position:relative; z-index:1;} .open_wrap .w_box .s_visual_txt p{background: linear-gradient(to right, #ed1c24, #ea5c02);color: #fff;font-size: 18px;width: 270px;height: 60px;line-height: 60px;text-align: center;margin-top: -30px;margin-left: 30px;font-family: 'YES24';} .open_wrap .w_box .s_visual_txt span{display: block;margin: 30px 0 40px 30px;font-size: 15px;} .open_wrap .w_box .s_visual_txt span em{color: #EC1D22;} .open_wrap .w_box .service_area{display: flex;justify-content: space-between;} .open_wrap .w_box .service_txt{color: #000;font-size: 26px;font-weight: 600;display: inline-block;text-transform: uppercase;min-width: 140px;max-width: 400px;border-right: 1px solid #ddd;margin-right: 30px;line-height: 33px;} .open_wrap .w_box .service{display: flex;flex-wrap: wrap;gap: 10px;margin-top: -8px;} .open_wrap .w_box .service li{width: calc(25% - 10px);padding: 13px;border-radius: 8px;color: #000;font-size: 15px;background-size: 28px !important;!imp;!i;!;font-weight: 500;font-family: 'NanumBarunGothic';box-sizing: border-box;} .open_wrap .w_box .service li.sv01{background: url('/images/sub_icon01.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv02{background: url('/images/sub_icon02.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv03{background: url('/images/sub_icon03.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv04{background: url('/images/sub_icon04.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv05{background: url('/images/sub_icon05.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv06{background: url('/images/sub_icon06.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv07{background: url('/images/sub_icon07.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv08{background: url('/images/sub_icon08.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv09{background: url('/images/sub_icon09.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv10{background: url('/images/sub_icon10.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv11{background: url('/images/sub_icon11.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv12{background: url('/images/sub_icon12.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv13{background: url('/images/sub_icon13.png')no-repeat 0px 17px;padding-left: 53px;background-size: 34px !important;!imp;!im;!i;!;} .open_wrap .w_box .service li.sv14{background: url('/images/sub_icon14.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv15{background: url('/images/sub_icon15.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv16{background: url('/images/sub_icon16.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv17{background: url('/images/sub_icon17.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv18{background: url('/images/sub_icon18.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv19{background: url('/images/sub_icon19.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv20{background: url('/images/sub_icon20.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .service li.sv21{background: url('/images/sub_icon21.png')no-repeat 0px 10px;padding-left: 53px;} .open_wrap .w_box .plan_area{margin-top: 50px;position: relative;} .open_wrap .w_box .plan_area h4{color: #000;font-size: 26px;font-weight: 600;display: inline-block;} .open_wrap .w_box .plan_area h4 + span{color: #8B8B8B;font-size: 15px;margin-left: 20px;} .open_wrap .w_box .plan_box{margin-top: 35px;display: flex;justify-content: space-between;gap: 8px; flex-wrap: wrap;} .open_wrap .w_box .plan_box li { width: calc(25% - 8px);background: #fff;border-radius: 10px;box-sizing: border-box;padding: 30px;box-shadow: 3px 3px 2px rgb(213 213 213 / 10%);border: 1px solid #333;position: relative;overflow: hidden;z-index: 1; cursor:pointer;} .open_wrap .w_box .plan_box li::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #ff75750f;transform: scaleX(0);transform-origin: left;transition: transform 0.3s ease-in-out;z-index: -1;} .open_wrap .w_box .plan_box li:hover::before {transform: scaleX(1);} .open_wrap .w_box .plan_box li h5{font-size: 23px;color: #000;font-weight: 600;text-align: left;} .open_wrap .w_box .plan_box li .info{margin-top: 20px;font-size: 14px;color: #797979;margin-top: 10px;} .open_wrap .w_box .plan_box li .info span{} .open_wrap .w_box .plan_box li .hidden{visibility:hidden;} .open_wrap .w_box .red{color: #FF0000;} .open_wrap .w_box .plan_box li .price{margin-top: 35px;} .open_wrap .w_box .plan_box li .price > div{font-size: 33px;font-weight: 600;margin-top: 8px;} .open_wrap .w_box .plan_box li .price > span{margin-top: 24px;font-size: 15px;color: #797979;display: block;line-height: 18px;} .open_wrap .w_box .plan_box li .price > span > em{font-size:12px;} .open_wrap .w_box .plan_box li a {margin: 0 auto;margin-top: 30px;display: block;border-radius: 25px;background: #8b8b8b; text-align: center;color: #fff;font-size: 17px;padding: 15px 0;width: 100%;position: relative;overflow: hidden; transition: background 0.3s ease-in-out; } .open_wrap .w_box .plan_box li a::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #111;transform: scaleX(0);transform-origin: left;transition: transform 0.3s ease-in-out 0.3s; z-index: -1; } .open_wrap .w_box .plan_box li:hover a {background: #111; } .open_wrap .w_box .plan_box li:hover a::before {transform: scaleX(1);} .open_wrap .w_box .plan_box li.best{position: relative;} .open_wrap .w_box .plan_box li.best h5{} .open_wrap .w_box .plan_box li.best .price{} .open_wrap .w_box .plan_box li.best .price > div{} .open_wrap .w_box .plan_box li.best .price > span{} .open_wrap .w_box .plan_box li.best a{background: #FF0000;} .open_wrap .w_box .plan_box li.best .best_icon{background: #FF0000;color: #fff;display: inline-block;border-radius: 50px;width: 40px;height: 40px;line-height: 40px;font-size: 13px;text-align: center;font-weight: 600;position: absolute;top: 23px;right: 20px;} .open_wrap .qna_area{margin-top: 20px;} .open_wrap .qna_area h5{color:#000;font-weight:600;} .open_wrap .qna_area .accordion{ margin-top: 25px;} .green .w_box .s_visual_txt p{background:linear-gradient(to right, #11564d, #52aa9f)} .green .w_box .s_visual_txt span em{ color:#03806F;} .green .w_box h3{line-height: 45px;font-family: 'NanumBarunGothic';} .green .w_box .gallery_view{height:400px;display: flex;justify-content: space-between;gap: 15px;} .green .w_box .gallery_view ul{width: calc(100% - 860px );display: flex;flex-direction: column;justify-content: space-between;height: 100%;padding: 0;margin: 0;} .green .w_box .gallery_view li{display: flex;align-items: center;height: 100%;box-sizing: border-box;padding: 0 20px;border-bottom: 1px solid #e5e5e5;!;} .green .w_box .gallery_view li.on{background: #fff url('/images/g_bullet1.png')no-repeat 93% center;border-bottom: none;box-shadow: 3px 3px 2px rgb(213 213 213 / 10%);font-weight: 600;} .green .w_box .gallery_view div{} .green .w_box .gallery_view div > img{} .green .drawing{padding-top: 50px;padding-bottom: 50px;} .green .drawing h4{} .green .drawing h4 + span{} .green .drawing .drawing_wrap{width: 100%;background: #ECF2F1;margin-top: 40px;padding-bottom: 5px;display: block;} .green .drawing .drawing_wrap p{background: #10554C;color: #fff;padding: 20px 0;text-align: center;font-size: 18px; } .green .drawing .drawing_box{display: flex;justify-content: space-between;margin: 30px;} .green .drawing .drawing_box .drawing_img{} .green .drawing .drawing_box .drawing_img img{width: 100%;} .green .drawing .drawing_box ul{width: 75%;display: flex;flex-direction: column;justify-content: space-between;height: 100%;padding: 0;margin: 0;margin-left: 5%;} .green .drawing .drawing_box li{align-items: center;padding: 13px 0;line-height: 23px;text-indent: -43px;padding-left: 46px;} .green .drawing .drawing_box li em{background: #FFE715;width: 30px;height: 30px;line-height: 30px;border-radius: 25px;margin-right: 9px;font-weight: 600;display: inline-block;text-indent: 10px;} .green .drawing h4{color: #000;font-size: 1.8em;font-weight: 600;display: inline-block;} .green .drawing h4 + span{color: #8B8B8B;font-size: 15px;margin-left: 20px;} .drawing_img {position: relative;} .drawing7 .hover-area {position: absolute;opacity: 0;transition: opacity 0.3s ease;z-index: 1;cursor: pointer;} .drawing7 .hover-area[data-target="1"] {top: 2%;left: 1%;width: 22%;height: 7%;} .drawing7 .hover-area[data-target="2"] {top: 84%;left: 13%;width: 24%;height: 12%;} .drawing7 .hover-area[data-target="3"] {top: 52%;left: 13%;width: 24%;height: 30%;} .drawing7 .hover-area[data-target="4"] {top: 27%;left: 7%;width: 14%;height: 21%;} .drawing7 .hover-area[data-target="5"] {top: 37%;left: 56%;width: 31%;height: 42%;} .drawing1 .hover-area {position: absolute;opacity: 0;transition: opacity 0.3s ease;z-index: 1;cursor: pointer;} .drawing1 .hover-area[data-target="1"] {top: 2%;left: 1%;width: 19%;height: 7%;} .drawing1 .hover-area[data-target="2"] {top: 40%;left: 6%;width: 21%;height: 37%;} .drawing1 .hover-area[data-target="3"] {top: 40%;left: 30%;width: 30%;height: 37%;} .drawing1 .hover-area[data-target="4"] {top: 52%;left: 68%;width: 28%;height: 31%;} .drawing1 .hover-area[data-target="5"] {top: 33%;left: 73%;width: 23%;height: 13%;} .drawing1 .hover-area[data-target="6"] {top: 10%;left: 6%;width: 27%;height: 22%;} .drawing1 .hover-area[data-target="7"] {top: 9%;left: 46%;width: 27%;height: 10%;} .drawing2 .hover-area {position: absolute;opacity: 0;transition: opacity 0.3s ease;z-index: 1;cursor: pointer;} .drawing2 .hover-area[data-target="1"] {top: 2%;left: 1%;width: 19%;height: 7%;} .drawing2 .hover-area[data-target="2"] {top: 46%;left: 7%;width: 58%;height: 34%;} .drawing2 .hover-area[data-target="3"] {top: 11%;left: 7%;width: 58%;height: 29%;} .drawing2 .hover-area[data-target="4"] {top: 85%;left: 31%;width: 22%;height: 9%;} .drawing2 .hover-area[data-target="5"] {top: 84%;left: 82%;width: 14%;height: 13%;} .drawing2 .hover-area[data-target="6"] {top: 10%; left: 91%;width: 5%;height: 308px;left: 91%;} .drawing_img .hover-area:hover {opacity: 1;} .drawing_box ul li {cursor: pointer; text-align:left;} .drawing_box ul li.underline {text-decoration:underline; font-weight:600;} .accordion {width: 100%;} .accordion-item {position: relative;width: 100%;padding: 5px 36px;border: 1px solid #e5e5e5;border-radius: 10px;margin-bottom: 8px;background: #fff;color: #000;font-weight: 500;line-height: 1.5em;cursor: pointer;transition: background-color 0.3s ease;} .accordion-header {width: 100%;padding: 20px 0px 15px 0;text-align: left;display: flex;justify-content: space-between;align-items: center;font-size: 1.1em; color:#111 !important;} .accordion-icon {width: 17px;height: 18px;background: url('/images/plus.png') no-repeat center;transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;} .accordion-header[aria-expanded="true"] .accordion-icon {background: url('/images/minus.png') no-repeat center !important;transform: rotate(180deg);} .accordion-body {max-height: 0;overflow: hidden;transition: max-height 0.5s ease-in-out;} .accordion-body p {margin: 15px 0;padding: 0 30px 0 26px;color: #666;line-height: 1.8em;font-size: 15px;background: url('/images/check_on.png') no-repeat 0px 8px;font-weight: normal;} .accordion-body .point {color: #2d2d2d;line-height: 1.5em;font-size: 0.96em;padding: 20px 0;} .accordion-body .point em {color: #e10a0a;display: block;margin-bottom: 5px;} .left_link {transition: top 0.3s ease;background: #fff;z-index: 9;} .left_link.fixed {position: fixed;top: 86px;width: 1300px;margin: 0 auto;padding: 0;} #scroll_parent {position: relative;} .accordion button{color:#111;} .left_link li.on > button {color:#fff;} .fadeUp {opacity: 0;transform: translateY(50px); transition: opacity 0.8s, transform 0.8s;} .fadeUp.visible {opacity: 1;transform: translateY(0);} @keyframes zoom-in { 0% { background-size: 100%; } 50% { background-size: 105%; } 100% { background-size: 100%; } } @keyframes slideUp { to { opacity: 1; transform: translateY(0); } } #btnWrap {width: 500px;margin: 100px auto;} #popupBtn {width: 150px;height: 50px;padding: 10px 5px;} #modalWrap {position: fixed; z-index: 1; padding-top: 100px; left: 0;top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); /* Black w/ opacity */display: none;z-index:999999;} #modalBody {width: 500px;height: 300px;padding: 30px 30px;margin: 0 auto;border: 1px solid #777;background-color: #fff;z-index:999999;} #closeBtn {float:right;font-weight: bold;color: #777;font-size:25px;cursor: pointer; z-index:9999999;} .mt20{margin-top:20px !important;} .mt30{margin-top:30px !important;} .mt50{margin-top:50px !important;} .mt80{margin-top:80px !important;} .mt100{margin-top:100px !important;} .overview_vl{height: 350px;margin-top: -74px;background: url('/images/v_over1.png')no-repeat;text-align: center;color: #fff;line-height: 30px;box-sizing: border-box;padding-top: 158px;background-size: cover;} .overview_vl h2{font-size: 40px;font-family: 'yes24';} .overview_vl h2 + p{margin-top: 20px;} .open_wrap .overview{padding: 2.3rem 0;text-align: center;box-sizing: border-box;} .open_wrap .overview .w_box{} .open_wrap .overview .w_box em{color: #FF0000;text-decoration: underline;font-weight: 600;font-size: 18px;text-underline-offset: 3px;text-decoration-thickness: 3px;} .open_wrap .overview .w_box h3{margin-top: 23px;font-size: 2em;margin-bottom: 0;} .open_wrap .overview .w_box span{display: block;color: #797979;font-size: 16px;margin-top: 15px;} .open_wrap .overview .w_box ul.ov1{display: flex;justify-content: space-between;margin-top: 30px;gap: 10px;} .open_wrap .overview .w_box ul.ov1 li{} .open_wrap .overview .w_box ul.ov1 li span{font-size: 16px;line-height: 22px;color: #111;margin-top: 18px;} .open_wrap .overview_bottom{height: 250px;background: url('/images/v_over2.png')no-repeat;background-size: cover;} .open_wrap .overview_bottom {height: 250px;background: url('/images/v_over2.png') no-repeat;background-size: cover;background-attachment: fixed;background-position: center top; /* ë°°ê²½ 이미지를 위쪽에 ê³ ì • */} .open_wrap .overview_bottom > div{width: 1000px;margin: 0 auto;display: flex;align-items: center;padding: 4% 0px;/* line-height: 33px; */font-size: 22px;gap: 20%;justify-content: flex-start;box-sizing: border-box;} .open_wrap .overview_bottom p{color: #fff;font-family: '';line-height: 33px;} .open_wrap .overview_bottom a{background: #ffffffa6 url(/images/pen.png) no-repeat 20% center;border-radius: 10px;padding: 14px 29px 14px 74px;font-size: 15px;font-weight: 500;/* color: #fff; */background-size: 23px;} .open_wrap ul.rolling{width: 1300px;margin: 0 auto;margin-top: 50px;margin-bottom: 50px;display: flex;justify-content: space-between;gap: 15px;overflow: hidden;} .open_wrap .overview .type{display: flex;justify-content: space-between;gap: 30px;margin-top: 50px;} .open_wrap .overview .type li{ cursor:pointer;border: 1px solid #ddd;border-radius: 20px;padding: 30px;text-align: left;width: 33%;background: #fff;} .open_wrap .overview .type li > em {color: #8b8b8b;font-size: 16px;text-decoration: none;font-weight: 500;} .open_wrap .overview .type li > p{margin-top: 4px;font-size: 23px;font-weight: 600;text-transform: uppercase;color: #111;} .open_wrap .overview .type li > span{font-size: 14px;margin-bottom: 20px;line-height: 21px;} .open_wrap .overview .type li > ol{border-top: 1px solid #ddd;padding-top: 15px;} .open_wrap .overview .type li > ol li{border: none;padding: initial;line-height: 35px;background: url('/images/check.png')no-repeat 3px 11px;padding-left: 30px;color: #000;font-size: 16px;text-transform: uppercase;width: 100%;} .open_wrap .overview .type li.on{ border: 2px solid #ff0000;} .open_wrap .overview .type li.on > em{position: relative;font-weight: 400;display: inline-block;background: linear-gradient(to top, #ff000029 50%, transparent 50%);text-decoration: none;padding: 0 20px 3px 0;color: #ff0000;} .open_wrap .overview .type li.on > p{color:#ff0000;} .open_wrap .overview .type li.on > ol li{background: url('/images/check_on.png')no-repeat 3px 11px;} .open_wrap .green .type li.on{border: 2px solid #088D7C;} .open_wrap .green .type li.on > em{position: relative;font-weight: 400;display: inline-block;background: linear-gradient(to top, #088d7c29 50%, transparent 50%);text-decoration: none;padding: 0 20px 3px 0;color: #1b7561;} .open_wrap .green .type li.on > p{color: #1b7561;} .open_wrap .green .type li.on > ol li{background: url('/images/check_green_on.png')no-repeat 3px 11px;} .open_wrap .overview .type_gallery{border-top: 1px solid #ddd;margin-top: 50px;padding-top: 50px;display: flex;justify-content: space-between;gap: 20px;} .open_wrap .overview .type_gallery li{} .open_wrap .overview .type_gallery li img{} .open_wrap .map{display: flex;justify-content: space-between;gap: 50px;} .open_wrap .map > div{width: calc(100% - 800px);} .open_wrap .map dl{} .open_wrap .map dt{color: #111;!;font-weight: 500;font-size: 20px;margin-bottom: 20px;} .open_wrap .map dd{color: #666;line-height: 25px;} .open_wrap .map > div > a{background: #3CBC00;color: #fff;padding: 20px 30px;border-radius: 11px;margin-top: 30px;display: inline-block;} .open_wrap .map .map-container{width: 800px;height: 300px;overflow: hidden;border: 1px solid #ddd;} .open_wrap .map_txt{margin-top: 50px;border-top: 1px solid #ddd;margin-bottom: 100px;} .open_wrap .map_txt li{padding: 30px 10px;border-bottom: 1px solid #ddd;display: flex;justify-content: flex-start;} .open_wrap .map_txt li div{width: 100%;color: #111;line-height: 33px;} .open_wrap .map_txt li div.tit{width:250px;padding-left: 50px;} .open_wrap .map_txt li div.add1{ background: url('/images/add1.png')no-repeat;} .open_wrap .map_txt li div.add2{ background: url('/images/add2.png')no-repeat;} .open_wrap .map_txt li div.add3{ background: url('/images/add3.png')no-repeat;} .open_wrap .map_txt li div em{color: #fff;padding: 3px 7px;margin: 0 2px;font-weight: 500;} .open_wrap .map_txt li div .bus1{background: #00cb0a;} .open_wrap .map_txt li div .bus2{background: #005bcb;} .embed-container {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;max-width: 100%;} .embed-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;} .open_wrap .guide .tx_left{text-align: left;} .open_wrap .guide .tx_left + span{text-align: left;font-size: 15px;} .open_wrap .guide .guidelines{text-align: left;} .open_wrap .guide .guidelines > div{padding: 15px 0px;} .open_wrap .guide .guidelines > div p{line-height: 1.5em;text-indent: -27px;padding-left: 33px;display: block;} .open_wrap .guide .guidelines > div p em{background: #ff0000;color: #fff;border-radius: 3px;margin-right: 5px;display: inline-block;width: 20px;height: 20px;text-align: center;line-height: 20px;font-weight: normal;text-decoration: none;text-underline-offset: auto;text-indent: 0px;} .open_wrap .guide .guidelines > div .guide_img{margin-top: 20px;display: flex;justify-content: flex-start;gap: 40px;margin-bottom: 20px;} .open_wrap .guide .guidelines > div .guide_img li{display: flex;flex-direction: column;align-items: center;} .open_wrap .guide .guidelines > div .guide_img li img{} .open_wrap .guide .guidelines > div .guide_img li span{margin-top: 13px;font-size: 15px;color: #666;} .open_wrap .guide .guidelines > div p::before {} .hidden{visibility: hidden;} .open_wrap .w_box .plan_box li .price p{font-size: 16px;color: #ff0000;} .open_wrap .w_box .plan_box li .price p > em {color: #111;font-weight: normal;position: relative;margin-right: 5px;} .open_wrap .w_box .plan_box li .price p > em::after {content: '';position: absolute;top: 10px;left: 0;width: 100%;height: 1px;background-color: #ff0000; } .open_wrap .overview .graphic{display: flex;justify-content: space-evenly;gap: 38px;flex-wrap: wrap;} .open_wrap .overview .graphic li{width: 160px;height: 160px;border-radius: 50%;background: #fff;box-sizing: border-box;padding-top: 108px;font-weight: 400;position: relative;} .open_wrap .overview .graphic li span{} .open_wrap .overview .graphic .gr_icon1{background: #fff url('/images/gr_icon1.png')no-repeat center 40px; background-size:28%;} .open_wrap .overview .graphic .gr_icon2{background: #fff url('/images/gr_icon2.png')no-repeat center 38px;background-size:28%;} .open_wrap .overview .graphic .gr_icon3{background: #fff url('/images/gr_icon3.png')no-repeat center 39px;background-size: 28%;} .open_wrap .overview .graphic .gr_icon4{background: #fff url('/images/gr_icon4.png')no-repeat center 34px;background-size: 26%;} .open_wrap .overview .graphic .gr_icon5{background: #fff url('/images/gr_icon5.png')no-repeat center 40px;background-size:28%;} .open_wrap .overview .graphic .gr_icon6{background: #fff url('/images/gr_icon6.png')no-repeat center 32px;background-size: 26%;} .open_wrap .overview .graphic2{display: flex;justify-content: flex-start;gap: 38px;} .open_wrap .overview .graphic2 li{width: 33%;height: 160px;border-radius: 20px;background: #fff;box-sizing: border-box;padding-top: 96px;font-weight: 400;position: relative;} .open_wrap .overview .graphic2 li span{margin-top: 7px;font-size: 14px;} .open_wrap .overview .graphic2 .gr_icon7{background: #fff url('/images/gr_icon7.png')no-repeat center 30px;} .open_wrap .overview .graphic2 .gr_icon8{background: #fff url('/images/gr_icon8.png')no-repeat center 30px;} .open_wrap .overview .graphic2 .gr_icon9{background: #fff url('/images/gr_icon9.png')no-repeat center 30px;} .open_wrap .overview .graphic li:not(:last-child)::after {content: '';position: absolute;right: -25px;top: 50%;transform: translateY(-50%);width: 10px;height: 12px;background: url('/images/ov_bullet1.png') no-repeat center / contain;} .open_wrap .overview .graphic2 li:not(:last-child)::after {content: '';position: absolute;right: -25px;top: 50%;transform: translateY(-50%);width: 10px;height: 12px;background: url('/images/ov_bullet1.png') no-repeat center / contain;} .open_wrap .guide .guidelines > div ol{margin-top: 20px;padding-left: 31px;line-height: 25px;color: #ff0000;font-size: 15px;} .open_wrap .guide .guidelines > div li{} .w_box input, .content {display: none;} #one:checked ~ .one, #two:checked ~ .two, #three:checked ~ .three {display: block;} .w_box label {cursor: pointer;height: 25px;padding: 5px 10px;display: inline-block;text-align: center;color: #fff;font: normal 1em/150% Sans-Serif;transition: background .25s linear;} .w_box label:hover, input:checked + label {} .border-top{display:block; margin-top:60px !important; } .border-top .slider-container{padding:0 !important;} input.check-toggle-round-flat:checked ~ span.off{color: #fff;} .check-toggle {position: absolute;margin-left: -9999px;visibility: hidden;} .check-toggle + label {display: block;position: relative;cursor: pointer;outline: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} input.check-toggle-round-flat + label {padding: 2px;width: 220px;height: 48px;background-color: #ffffff;border-radius: 10px;} input.check-toggle-round-flat + label:before, input.check-toggle-round-flat + label:after {display: block;position: absolute;content: "";} input.check-toggle-round-flat + label:before {top: 2px;left: 2px;bottom: 2px;right: 2px;} input.check-toggle-round-flat + label:after {top: 4px;left: 4px;bottom: 4px;width: 110px;background-color: #ff0000;-webkit-border-radius: 52px;-moz-border-radius: 52px;-ms-border-radius: 52px;-o-border-radius: 52px;border-radius: 10px;-webkit-transition: margin 0.2s;-moz-transition: margin 0.2s;-o-transition: margin 0.2s;transition: margin 0.2s;} input.check-toggle-round-flat:checked + label {} input.check-toggle-round-flat:checked + label:after {background: #e31b1b;!important} .relative{position:relative;} .switch2 {border: 1px solid #ddd;/* position: absolute; */display: flex;justify-content: flex-start;width: 318px;/* top:22px; */margin-top: 40px;} article.content {margin-top: -18px;} input.check-toggle-round-flat:checked~.off {color: #000;} input.check-toggle-round-flat:checked~.on {color: #fff;} .switch2>span.on {left: 0;padding-left: 2px;color: #fff;} .switch2>span.off {right: 0;padding-right: 4px;color: #000;} .check-toggle {position: absolute;margin-left: -9999px;visibility: hidden;} .check-toggle+label {display: block;position: relative;cursor: pointer;outline: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;transition: background-color 0.3s ease;height: 100%;line-height: 35px;background-color: #ffffff;color: #111;} input.check-toggle-round-flat+label {padding: 2px;width: 97px;height: 34px;background-color: #d4d7d4;border-radius: 60px;} input#english-toggle+label {/* border-radius: 10px 0 0 10px; */} input#spanish-toggle+label {} input#english-toggle:checked+label {background-color: #232323; color: #fff;} input#spanish-toggle:checked+label {background-color: #232323; color: #fff;} input.check-toggle-round-flat+label:before,input.check-toggle-round-flat+label:after {display: block;position: absolute;content: "";} input.check-toggle-round-flat+label:before {top: 2px;left: 2px;bottom: 2px;right: 2px;background-color: d4d7d4;border-radius: 60px;} input.check-toggle-round-flat+label:after {top: 4px;left: 4px;bottom: 4px;width: 46px;background-color: 46a31d;border-radius: 52px;transition: margin 0.2s;} input.check-toggle-round-flat:checked+label:after {margin-left: 44px;background: #ff0000;} .switch2 > div{width: 50%;height: 54px;} .open_wrap .w_box .plan_box + .plan_last{margin-top: 34px;width: 100%;/* text-align: center; */} .open_wrap .w_box .plan_box + .plan_last span{font-weight: 500;font-size: 15px;color: #111;position: relative;display: inline-block;line-height: 1.8;} .open_wrap .w_box .plan_box + .plan_last span::after{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 40%; background-color: #ff000017; } .green .w_box .service{margin-top:35px;} .con {max-width:1300px;margin:0 auto;} .row::after {content:"";display:block;clear:both;} .cell {float:left;box-sizing:border-box;} .cell-right {float:right;} .line-height-0 {line-height:0;} .line-height-0 > * {line-height:normal;} .visible-on {display:block;} .visible-off {display:none;} .img-box {overflow:hidden;} .img-box > img {width:100%;display:block;} .relative {position:relative;} .block {display:block;} .mb_mus3{margin-bottom:-3rem !important;} .header {position:fixed;top:0;left:0;width:100%;height:86px;background-color: #111;z-index:100;} .header > .header-inner {max-width: 1300px;margin:0 auto;position:relative;display: flex;justify-content: space-between;align-items: center;} .header > .header-inner > .logo {width: 175px;} .header > .header-inner > .top-menu-bar > ul {display:inline-block;text-transform: uppercase;} .header > .header-inner > .top-menu-bar > ul:nth-child(2) {margin-right:105px;} .header > .header-inner > .top-menu-bar > ul > li > a {display:block;margin: 0 50px;font-size: 18px;position:relative;line-height:86px;color: #fff;} .header > .header-inner > .top-menu-bar > ul > li > a > * {line-height:normal;} .header > .header-inner > .top-menu-bar > ul > li:last-child > a {margin-right:10px;} .header > .header-inner > .top-menu-bar > ul > li > a::after {content:"";display:block;background-color:#000;position:absolute;bottom:0;left:50%;width:0%;height:3px;transform:translatex(-50%);transition:width .3s ease-in-out;} .header > .header-inner > .top-menu-bar > ul > li > a.active::after {width:100%;} .header > .header-inner > .top-menu-bar > .sub-menu-bg {position:fixed;top:86px;left:0;width:100%;height:0;background-color:#ffffffeb;border-top:1px solid #ccc;z-index:-5;transition:height .3s; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);} .header > .header-inner > .top-menu-bar ul > li {position:relative;} .header > .header-inner > .top-menu-bar > ul > li > ul {position:absolute;top:100%;left:0;min-width:1000px;padding-top:20px;visibility:hidden;} .header > .header-inner > .top-menu-bar > ul > li.active > ul {visibility:visible; line-height:30px;} .header > .header-inner > .top-menu-bar > ul > li > ul > li {margin-left:50px;} .header > .header-inner > .top-menu-bar > ul > li > ul > li > a {font-weight:bold;} .header > .header-inner > .top-menu-bar > ul ul > li > a {display:inline-block;font-size:15px;padding:7px 0;position:relative;visibility:hidden;transform:translatex(-10px);opacity:0;} .header > .header-inner > .top-menu-bar > ul > li.active ul > li > a {visibility:visible;opacity:1;transform:translatex(0);} .header > .header-inner > .top-menu-bar > ul > li.active ul > li > a.delay-1 {transition:visibility .5s, opacity .5s, transform .5s;} .header > .header-inner > .top-menu-bar > ul > li.active ul > li > a.delay-2 {transition:visibility .5s .1s, opacity .5s .1s, transform .5s .1s;} .header > .header-inner > .top-menu-bar > ul > li.active ul > li > a.delay-3 {transition:visibility .5s .2s, opacity .5s .2s, transform .5s .2s;} .header > .header-inner > .top-menu-bar > ul > li.active ul > li > a.delay-4 {transition:visibility .5s .3s, opacity .5s .3s, transform .5s .3s;} .header > .header-inner > .top-menu-bar > ul ul > li > a::after {content:"";display:block;background-color: #e10000;position:absolute;bottom:0;left:50%;width:0%;height:1px;transform:translatex(-50%);transition:width .3s ease-in-out;} .header > .header-inner > .top-menu-bar > ul ul > li > a:hover::after {width:100%;} .header > .header-inner > .top-menu-bar > ul ul ul > li {margin-right:80px;} .header > .header-inner > .top-menu-bar > ul > li > .sub-menu-height {width:100%;height:300px;position:fixed;top:86px;left:0;z-index:-3;display:none;} .header > .header-inner > .top-menu-bar > ul > li.active > .sub-menu-height {display:block;} .header > .header-inner > .top-menu-bar > ul > li > .sub-menu-height-1 {height:164px;} .header > .header-inner > .top-menu-bar > ul > li > .sub-menu-height-2 {height:238px;} .header > .header-inner > .top-menu-bar > ul > li.active ul > li > a:hover{color:#ff0000;} .transparent{background-color: transparent !important;} .transparent > .header-inner > .top-menu-bar > .sub-menu-bg{border-top: none !important;!i;!;background-color: #ffffff99;!important;} .overview_rolling:root {--card-transition: 0.3s ease;--slider-transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);--card-tilt-max: 25deg;} .overview_rolling {margin: 0 auto;padding: 0;box-sizing: border-box;width: 1300px;} .overview_rolling .slider-container {position: relative;width: 100%;padding: 60px 0;} .overview_rolling .slider-wrapper {overflow: hidden;margin: 0 3%;padding: 30px 0;} .overview_rolling .slider {transition: transform var(--slider-transition);flex-wrap: nowrap;width: 100%;display: none;} .overview_rolling .slider.active {transition: transform var(--slider-transition);flex-wrap: nowrap;width: 100%;display: block;} .overview_rolling .slide-group {display: flex;flex-wrap: nowrap;gap: 1rem;padding: 0 1rem;box-sizing: border-box;} .overview_rolling .card {position: relative;background: rgba(255, 255, 255, 1);border-radius: 8px;padding: 20px;backdrop-filter: blur(10px);box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);transform: perspective(1000px) rotateX(0deg) rotateY(0deg);transition: all var(--card-transition);transform-style: preserve-3d;will-change: transform;opacity: 1;box-sizing: border-box;flex: 0 0 auto;width: calc(20% - 1rem); /* 기본적으로 í•œ 줄에 5개의 ì¹´ë“œ 표시 */ cursor:pointer;} .overview_rolling .card:hover {background: linear-gradient(to top, #3CBC00 0%, #fff 40%, #fff 90%);} .overview_rolling .red .card:hover {background: linear-gradient(to top, #3CBC00 0%, #fff 40%, #fff 90%) !important;} .overview_rolling .slide-group:hover .card:not(:hover) {opacity: 0.7;} .overview_rolling .card img {;width:100%;height: 200px;object-fit: cover;border-radius: 8px;margin-bottom: 15px;} .overview_rolling .card h3 {color: #666;font-size: 17px;margin-bottom: 10px;font-weight: 600;text-transform: uppercase;line-height: 22px;} .overview_rolling .card p {color: #040404;line-height: 1.4;text-align: center;} .overview_rolling .card:hover h3,.overview_rolling .card:hover p {color: #fff;} .overview_rolling .nav-btn {position: absolute;top: calc(50% - 25px);transform: translateY(-50%);background: rgba(255, 255, 255, 0);border: none;width: 30px;height: 30px;border-radius: 5px;cursor: pointer;display: grid;place-items: center;color: #8b8b8b;font-size: 1.2rem;transition: all 0.3s ease;} .overview_rolling .nav-btn:hover {transform: translateY(-50%) scale(1.5);} .overview_rolling .prev-btn {left: 0;} .overview_rolling .next-btn {right: 0;} #bokeh-background {position: absolute;top: 0;width: 100%;height: 100%;overflow: hidden;} .bokeh {position: absolute;border-radius: 50%;opacity: 0.25;filter: blur(10px);box-shadow: 0 0 30px 15px rgba(255, 69, 0, 0.15);animation: float 15s infinite;} .bokeh::before,.bokeh::after {content: "";position: absolute;border-radius: 50%;width: 200%;height: 200%;top: -50%;left: -50%;background: inherit;filter: blur(30px);z-index: -1;} .bokeh::before {transform: rotate(45deg);} @keyframes float { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-100px) scale(1.5); } 100% { transform: translateY(0) scale(1); } } @media (max-width:1024px){ .header {display:none;} } @media (min-width:1024px){ .m-header {display:none;} } .m-header {position:fixed;top:0;left:0;width:100%;height: 60px;background-color: #111;text-align:center;z-index:500;} .m-header > .logo {width: 148px;display:inline-block;height: 60px;} .m-header .img-box > img{margin-top:13px;} .m-header > .m-menu-btn {position:absolute;top:50%;left:12px;transform:translatey(-50%);width:46px;height:46px;cursor:pointer;} .m-header > .m-menu-btn > div {width:50%;height:1px;background-color: #ffffff;position:absolute;top:16px;left:50%;transform:translatex(-50%);transition:top .2s, transform .2s, opacity .2s;} .m-header > .m-menu-btn > div:nth-child(2){top:23px;} .m-header > .m-menu-btn > div:nth-child(3){top:30px;} .m-header > .m-menu-btn.active div:nth-child(1) {top:50%;transform:translatex(-50%) translatey(-50%) rotate(45deg);} .m-header > .m-menu-btn.active div:nth-child(3) {top:50%;transform:translatex(-50%) translatey(-50%) rotate(-45deg);} .m-header > .m-menu-btn.active div:nth-child(2) {opacity:0;} .m-header > .mobile-mask {position:fixed;top: 60px;left:0;width:100%;height:0;background-color:#fff;z-index:-5;transition:height .3s;} .m-header > .m-menu-list {max-height: 0;overflow: hidden;transition: max-height 0.3s ease-out;} .m-header > .m-menu-list > ul > li {border-bottom:1px solid #ccc;visibility:hidden;transform:translatey(-20px);opacity:0;position:relative; text-transform: uppercase;} .m-header > .m-menu-list.active {max-height: 100vh; overflow-y: auto; display: block; } .m-header > .m-menu-list.active > ul > li {visibility:visible;transform:translatey(0);opacity:1;} .m-header > .m-menu-list.active > ul > li.delay-1 {transition:visibility .5s, opacity .5s, transform .5s;} .m-header > .m-menu-list.active > ul > li.delay-2 {transition:visibility .5s .1s, opacity .5s .1s, transform .5s .1s;} .m-header > .m-menu-list.active > ul > li.delay-3 {transition:visibility .5s .2s, opacity .5s .2s, transform .5s .2s;} .m-header > .m-menu-list.active > ul > li.delay-4 {transition:visibility .5s .3s, opacity .5s .3s, transform .5s .3s;} .m-header > .m-menu-list.active > ul > li.delay-5 {transition:visibility .5s .4s, opacity .5s .4s, transform .5s .4s;} .m-header > .m-menu-list > ul > li > a {display:block;padding:30px 24px;text-align:left;font-size:17px;} .m-header > .m-menu-list > ul > li > a > span {transition:transform .3s;} .m-header > .m-menu-list > ul > li.active > a > span {transform:rotate(180deg);} .m-header > .m-menu-list > ul > li > ul {padding: 10px 40px;background-color: #f1f1f1;display:none;line-height: 24px;} .m-header > .m-menu-list > ul > li > ul > li > a {display:block;text-align:left;padding:10px 0;font-size:15px;} .m-header > .m-menu-list > ul > li > ul ul {padding-top:10px;margin-top:10px;border-top:1px solid #ccc;} .m-header > .m-menu-list > ul > li > ul ul > li > a {display:block;text-align:left;font-size:15px;font-weight:300;padding:10px 0;} .swiper-container {overflow: hidden;margin-left: auto;margin-right: auto;} .swiper-container-wrapper {display: flex;flex-flow: column nowrap;height: 400px;width: 100%; flex-flow:row;} .swiper-button-next, .swiper-button-prev {color: #ffffff;} .swiper-slide {text-align: center;background-size: cover;background-position: center;background-color: f5f6f8;display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;height: 400px;border: 1px solid #ddd;} .swiper-slide img {max-width: 100%;height: auto;} .gallery-top {position: relative;width: 100%;height: 400px;margin-left: 4%;} .gallery-thumbs {min-width: 380px;} .gallery-thumbs .swiper-wrapper {flex-direction: column;width: 100%;} .gallery-thumbs .swiper-slide {width: 100%;flex-flow: row nowrap;height: 100%;opacity: 0.75;cursor: pointer;background: #fdfdfd;position: relative;line-height: 70px;font-weight: 400;letter-spacing: -1px;font-size: 1.1em;} .gallery-thumbs .swiper-slide-thumb-active {opacity: 1;background: #fff;border:1px solid #03806F; } .gallery-thumbs .swiper-slide span {opacity: 0;transition: opacity 0.5s ease-in-out;position: absolute;transform: translate(0, -50%);right: 5%;top: 50%;} .gallery-thumbs .swiper-slide.swiper-slide-thumb-active span { opacity: 1;} .swiper-button-next, .swiper-button-prev{color:#fff !important;} .swiper-slide img {width: 100%; height: 100%;object-fit: cover; } .quick { position: fixed; top: 206px; right: 5%; z-index: 9; display: flex; flex-direction: column; align-items: flex-end; } .quick.scrolled { transform: translateY(-60%); } .quick li { margin-bottom: 2px; position: relative; width: 130px; height: 60px; border: none; background-color: #ffffff; transition: all 300ms; cursor: pointer; padding: 10px 16px; color: #111; overflow: hidden; border: 1px solid #161616; z-index: 1; border-radius: 50px; line-height: 39px; display: flex; justify-content: flex-end; align-items: center; } .right-container { margin-bottom: 5px; position: relative; display: flex; flex-direction: column; align-items: flex-end; } #icon-chat { font-size: 30px; } .right-container .right-container-button { position: relative; overflow: hidden; display: inline-block; border-radius: 50px; transition: all 300ms; text-align: right; } .right-container .right-container-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #000; transition: left 0.4s ease-in-out; z-index: 0; } .right-container .right-container-button.mu_hover::before { left: 0; } .right-container .right-container-button span { position: relative; z-index: 1; transition: color 0.4s; } .right-container .right-container-button.mu_hover span { color: white; } .right-container .right-container-button span img { width: 20px; position: absolute; right: 1%; top: 50%; transform: translateY(-50%); } .right-container .right-container-button.mu_hover { transition: all 400ms cubic-bezier(.62, .1, .5, 1); } .right-container .right-container-button .long-text { transition: opacity 700ms ease, transform 300ms ease; opacity: 1; color: #020202; /* white-space: nowrap; */ font-size: 0.95em; width: auto; margin: 0; box-sizing: border-box; padding-left: 0; } .right-container .right-container-button.mu_hover .long-text { opacity: 1; width: auto; } .right-container .naver .right-container-button.mu_hover { background: #48a637; border: 1px solid #48a637; } .right-container .quick_btn .right-container-button .long-text {} .right-container .quick_btn .right-container-button.mu_hover .long-text { color: #fff; } .right-container .quick_btn .right-container-button.mu_hover { background: #48a637; border: 1px solid #48a637; } .quick li:nth-child(1) { top: 52px; right: 0; } .quick li:nth-child(2) { top: 54px; right: 0; } .quick li:nth-child(3) { top: 57px; right: 0; } .right-container .right-container-button a { display: flex; justify-content: space-between; } .right-container .right-container-button.mu_hover { z-index: 10; } .right-container .right-container-button { position: relative; overflow: hidden; display: inline-block; border-radius: 50px; transition: all 300ms; box-shadow:4px 2px 10px #ffffff2b; } .right-container .right-container-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #000; transition: left 0.4s ease-in-out; z-index: 0; } .right-container .right-container-button.mu_hover::before { left: 0; } .right-container .right-container-button span { position: relative; z-index: 1; transition: color 0.4s; } .right-container .right-container-button.mu_hover span { color: white; } .right-container .quick1 .short-text { background: url('/images/quick01.png') no-repeat center center; width: 20px; background-size: contain; } .right-container .quick2 .short-text { background: url('/images/quick02.png') no-repeat center center; width: 20px; background-size: contain; } .right-container .quick3 .short-text { background: url('/images/quick03.png') no-repeat center center; width: 20px; background-size: contain; } .right-container .quick1.mu_hover .short-text { background: url('/images/quick01_ov.png') no-repeat center center; width: 20px; background-size: contain; } .right-container .quick2.mu_hover .short-text { background: url('/images/quick02_ov.png') no-repeat center center; width: 20px; background-size: contain; } .right-container .quick3.mu_hover .short-text { background: url('/images/quick03_ov.png') no-repeat center center; width: 20px; background-size: contain; } .open_wrap .grey_wrap {background: #ebeced;padding-top: 30px;padding-bottom: 50px;position: relative;overflow: hidden;} .open_wrap .grey_wrap .moving-text {position: absolute;white-space: nowrap;color: #f3f4f5bd;font-size: 109px;font-weight: bold;right: -100%; /* 시작 위치 */animation: moveText 100s linear infinite;bottom: 0;} #quick {position: absolute;right: 0;top: 100px;height: 100px;background: #cfa;z-index: 2;} .overview_rolling2 {width: 100%;overflow: hidden;position: relative;} .overview_rolling2 .slider-container {position: relative;width: 100%;} .overview_rolling2 .slider {width: 100%;overflow: hidden;} .overview_rolling2 .slide-group {display: flex;width: max-content;position: relative;left: 0;transition: transform 0.5s ease-in-out;} .overview_rolling2 .card {flex: 0 0 auto;width: 200px;margin-right: 10px;} .overview_rolling h5{color: #000;font-size: 1.8em;font-weight: 600;display: block;text-align: center;text-transform: uppercase;margin-bottom: 26px;} @keyframes moveText { 0% { right: -100%; } 100% { right: 100%; } } @keyframes moveTextReverse { 0% { left: -100%; } 100% { left: 100%; } } @media (max-width:1500px){ .quick{top:auto; bottom:8%; right:1%; } .quick li{width:60px;} .right-container .right-container-button{border-radius:5px;} .short-text {display: block;text-align: center;} .long-text {display: none; } .right-container .right-container-button a{height:100%;} .right-container .right-container-button .long-text{} .right-container .right-container-button span.long-text{} .right-container .right-container-button span.short-text{left:3px;} } @media (max-width:1300px){ .header > .header-inner{width:100%; padding:0 3%;} .open_wrap .w_box{width:100%;padding:0 3%;height: auto;} .open_wrap .w_box .plan_box li .price > div{font-size:1.7em;} .open_wrap .w_box .plan_box li .price > span > em::after {content: "";display: block;} .open_wrap .w_box .plan_area h4 + span{display:block;margin-left: 0;margin-top: 16px; line-height:22px;} .open_wrap .w_box h3 + span{line-height:26px;} .conditional .swiper-container{width:100%;} .hero-slider .text--holder{width:100%;box-sizing:border-box;padding:0 20%;left: 56%;} .hero-slider .text--holder .right_top{right:10%;} footer{padding:30px 3%;} footer .footer_area{width:100%;} footer .footer_area div{line-height: 20px;} footer .footer_area div .mail{padding-left: 0; } footer .footer_area div.footer_box2{display:block;} footer .footer_area div.footer_box2 > div{display:block;} .gallery-thumbs{min-width:250px;} .swiper-container-wrapper{} .gallery-top{width:auto; height:auto;} .open_wrap .overview .w_box ul.ov1 li img{width:100%;} .overview_rolling{width:100%;} .open_wrap .overview .type li > span > br{ display:none;} .map {flex-direction: column;} .map-container {order: -1; } .map div:not(.map-container) {display: flex;flex-direction: column;} .map div:not(.map-container) a {order: 1; width: 36%;margin: 0 auto;margin-bottom: 50px; text-align:center;} .map div:not(.map-container) dl {order: 2;} .open_wrap .map .map-container {width: 100%;} .open_wrap .map > div {width: 100%;} .open_wrap .overview .graphic li{width:120px; height:120px;padding-top:80px;} .open_wrap .overview .graphic .gr_icon1{background: #fff url('/images/gr_icon1.png')no-repeat center 30px; background-size:30%;} .open_wrap .overview .graphic .gr_icon2{background: #fff url('/images/gr_icon2.png')no-repeat center 30px; background-size:30%;} .open_wrap .overview .graphic .gr_icon3{background: #fff url('/images/gr_icon3.png')no-repeat center 30px; background-size:30%;} .open_wrap .overview .graphic .gr_icon4{background: #fff url('/images/gr_icon4.png')no-repeat center 27px;background-size: 27%;} .open_wrap .overview .graphic .gr_icon5{background: #fff url('/images/gr_icon5.png')no-repeat center 30px; background-size:30%;} .open_wrap .overview .graphic .gr_icon6{background: #fff url('/images/gr_icon6.png')no-repeat center 24px;background-size: 28%;} .map {display: flex;gap: 20px;align-items: flex-start;} .map-container {flex: 1;} .map div:not(.map-container) {flex: 1;display: flex;flex-direction: column;} .map div:not(.map-container) a {order: 1; } .map div:not(.map-container) dl {order: 2; } .drawing7 .hover-area[data-target="1"] {top: 2%;left: 1%;width: 24%;height: 7%;} .drawing7 .hover-area[data-target="2"] {top: 85%;left: 13%;width: 23%;height: 12%;} .drawing7 .hover-area[data-target="3"] {top: 53%;left: 13%;width: 22%;height: 30%;} .drawing7 .hover-area[data-target="4"] {top: 27%;left: 7%;width: 13%;height: 21%;} .drawing7 .hover-area[data-target="5"] {top: 36%;left: 56%;width: 32%;height: 43%;} .drawing1 .hover-area[data-target="1"] {top: 0%;left: 1%;width: 19%;height: 7%;} .drawing1 .hover-area[data-target="2"] {top: 32%;left: 6%;width: 21%;height: 37%;} .drawing1 .hover-area[data-target="3"] {top: 32%;left: 30%;width: 30%;height: 37%;} .drawing1 .hover-area[data-target="4"] {top: 38%;left: 68%;width: 28%;height: 31%;} .drawing1 .hover-area[data-target="5"] {top: 21%;left: 73%;width: 23%;height: 13%;} .drawing1 .hover-area[data-target="6"] {top: 7%;left: 6%;width: 27%;height: 22%;} .drawing1 .hover-area[data-target="7"] {top: 6%;left: 46%;width: 27%;height: 10%;} .drawing2 .hover-area[data-target="1"] {top: 2%; left: 1%;width: 19%;height: 7%;} .drawing2 .hover-area[data-target="2"] {top: 38%;left: 7%;width: 58%;height: 25%;} .drawing2 .hover-area[data-target="3"] {top: 9%;left: 7%;width: 58%;height: 21%;} .drawing2 .hover-area[data-target="4"] {top: 69%;left: 28%;width: 26%;height: 10%;} .drawing2 .hover-area[data-target="5"] {top: 67%;left: 82%;width: 14%;height: 11%;} .drawing2 .hover-area[data-target="6"] {top: 8%;left: 91%;width: 5%;height: 254px;left: 91%;} } @media (max-width:1200px) { .visual-text{width: 70%;} .hero-slider .text--holder p{font-size:1.8rem;} .hero-slider .text--holder p img{height:20px;} .hero-slider .text--holder .left_bottom p{float: none;display: inline-block;zoom:1;.display:inline;} .hero-slider .text--holder .right_top p{float: none;display: inline-block;zoom:1;.display:inline;} .visual-text h3{font-size:3rem;word-wrap: break-word;word-break: auto-phrase;} .hero-slider .text--holderp{width:100%; margin:0 5%;} .hero-slider .text--holder p{font-size: 1.2rem;} .hero-slider .text--holder h3{font-size: 3.3rem;} .hero-slider .text--holder h3 br{display:block;} .hero-slider .text--holder{padding:0 5%;} .hero-slider .text--holder{left: 50%;margin-top: -10%;} .hero-slider .text--holder .center{margin-top:0;} .hero-slider .text--holder .right_top{position:relative; text-align:center;} .hero-slider .text--holder h3{} .hero-slider .text--holder h3 br{} .hero-slider .text--holder p{} .hero-slider .text--holder .left_bottom{position:relative; text-align:center; } .hero-slider .text--holder .right_top{margin-top:auto; right:auto;} .space_btn .space > div > em{display:none;} .tit{/* font-size: 2.5em; */} .right_btn > a{} .art_area{height:250px;} .art_area .art_box{width: 100%;box-sizing: border-box;padding: 5%;} .form-group div.options label span{font-size:0.88em;} .hero-slider .text--holder p{font-size:1.8rem;} .hero-slider .text--holder p img{height:20px;} .hero-slider .text--holder .left_bottom p{float: none;display: inline-block;zoom:1;.display:inline;} .hero-slider .text--holder .right_top p{float: none;display: inline-block;zoom:1;.display:inline;} } @media (max-width:1024px) { .open_wrap .w_box .plan_box li .price p > em::after {content: "";display: block;} .open_wrap .w_box .plan_box li .price > div{font-size:1.2em;} .open_wrap .w_box .plan_box li .price p > em {display:block; line-height:23px;} .open_wrap .w_box .plan_box li .price p > em::after{width:50%; line-height:23px; top:11px;} .open_wrap .w_box .service li {flex: 1 1 calc(33.33% - 10px);} .gallery-thumbs{min-width:200px;} .open_wrap .overview_bottom > div{display: flex;width:100%;box-sizing: border-box;padding: 0 3%;font-size: 1.2em;line-height: normal;justify-content: center;align-items: center;height: 80%;gap: 10%;} .overview_rolling .slide-group{grid-template-columns:repeat(3, 1fr);} .overview_rolling .card { width: calc(33.33% - 1rem); } .open_wrap .overview .type{} .open_wrap .overview .type li{} .open_wrap .overview .type li > em {} .open_wrap .overview .type li > p{ font-size: 1.2em;} .open_wrap .overview .type li > span{ font-size: 0.8em;} .open_wrap .overview .type li > ol{} .open_wrap .overview .type li > ol li{ font-size: 0.9em; letter-spacing: -1px;} .open_wrap .overview .type li.on{} .open_wrap .overview .type li.on > em{} .open_wrap .overview .type li.on > p{} .open_wrap .overview .type li.on > ol li{} .open_wrap .green .type li.on{} .open_wrap .green .type li.on > em{} .open_wrap .green .type li.on > p{} .open_wrap .green .type li.on > ol li{} .open_wrap .overview .type_gallery{} .open_wrap .overview .type_gallery li{} .open_wrap .overview .type_gallery li img{} .open_wrap .map_txt li div > p{margin-bottom:20px;} .open_wrap .guide .tx_left{font-size:1.5em;} .open_wrap .guide .guidelines > div .guide_img{display: flex;justify-content: space-between;gap: inherit;} .open_wrap .guide .guidelines > div .guide_img li{margin: 0 1%;} .open_wrap .guide .guidelines > div .guide_img li img{width:100%;} .open_wrap .overview .graphic li{width: 90px;height: 90px;padding-top: 56px;font-size: 0.9em;} .open_wrap .overview .graphic .gr_icon1{background: #fff url('/images/gr_icon1.png')no-repeat center 20px;background-size:30%;} .open_wrap .overview .graphic .gr_icon2{background: #fff url('/images/gr_icon2.png')no-repeat center 20px;background-size:30%;} .open_wrap .overview .graphic .gr_icon3{background: #fff url('/images/gr_icon3.png')no-repeat center 20px;background-size:30%;} .open_wrap .overview .graphic .gr_icon4{background: #fff url('/images/gr_icon4.png')no-repeat center 20px;background-size: 30%;} .open_wrap .overview .graphic .gr_icon5{background: #fff url('/images/gr_icon5.png')no-repeat center 20px;background-size:30%;} .open_wrap .overview .graphic .gr_icon6{background: #fff url('/images/gr_icon6.png')no-repeat center 14px;background-size: 30%;} .open_wrap .overview .graphic{gap:25px;} .open_wrap .overview .graphic li:not(:last-child)::after {content: '';position: absolute;right: -30%;top: 50%;transform: translateY(-50%);width: 6px;height: 7px;background: url('/images/ov_bullet1.png') no-repeat center / contain;} .gallery-thumbs .swiper-slide{font-size:0.98em;} .drawing7 .hover-area[data-target="1"] {top: 1%;left: 1%;width: 23%;height: 7%;} .drawing7 .hover-area[data-target="2"] {top: 67%;left: 13%;width: 23%;height: 12%;} .drawing7 .hover-area[data-target="3"] {top: 41%;left: 13%;width: 23%;height: 24%;} .drawing7 .hover-area[data-target="4"] {top: 20%;left: 7%;width: 14%;height: 17%;} .drawing7 .hover-area[data-target="5"] {top: 27%;left: 55%;width: 32%;height: 39%;} .drawing1 .hover-area[data-target="1"] {top: 0%;left: 1%;width: 19%;height: 6%;} .drawing1 .hover-area[data-target="2"] {top: 30%;left: 6%;width: 21%;height: 25%;} .drawing1 .hover-area[data-target="3"] {top: 30%;left: 30%;width: 30%;height: 25%;} .drawing1 .hover-area[data-target="4"] {top: 35%;left: 68%;width: 28%;height: 19%;} .drawing1 .hover-area[data-target="5"] {top: 21%;left: 73%;width: 23%;height: 13%;} .drawing1 .hover-area[data-target="6"] {top: 6%;left: 6%;width: 27%;height: 16%;} .drawing1 .hover-area[data-target="7"] {top: 6%;left: 46%;width: 27%;height: 10%;} .drawing2 .hover-area[data-target="1"] {top: 0%;left: 1%;width: 19%;height: 7%;} .drawing2 .hover-area[data-target="2"] {top: 30%;left: 7%;width: 58%;height: 20%;} .drawing2 .hover-area[data-target="3"] {top: 8%;left: 7%;width: 58%;height: 19%;} .drawing2 .hover-area[data-target="4"] {top: 55%;left: 28%;width: 27%;height: 10%;} .drawing2 .hover-area[data-target="5"] {top: 55%;left: 82%;width: 14%;height: 9%;} .drawing2 .hover-area[data-target="6"] {top: 5%;left: 91%;width: 5%;height: 213px;left: 91%;} } @media (max-width:900px){ .drawing7 .hover-area[data-target="1"] {top: 0%;left: 1%;width: 23%;height: 7%;} .drawing7 .hover-area[data-target="2"] {top: 55%;left: 13%;width: 22%;height: 12%;} .drawing7 .hover-area[data-target="3"] {top: 31%;left: 13%;width: 23%;height: 23%;} .drawing7 .hover-area[data-target="4"] {top: 16%;left: 7%;width: 15%;height: 13%;} .drawing7 .hover-area[data-target="5"] {top: 24%;left: 56%;width: 32%;height: 30%;} .drawing1 .hover-area[data-target="1"] {top: 0%;left: 1%;width: 19%;height: 6%;} .drawing1 .hover-area[data-target="2"] {top: 23%;left: 6%;width: 21%;height: 25%;} .drawing1 .hover-area[data-target="3"] {top: 23%;left: 30%;width: 30%;height: 25%;} .drawing1 .hover-area[data-target="4"] {top: 28%;left: 68%;width: 28%;height: 19%;} .drawing1 .hover-area[data-target="5"] {top: 17%;left: 73%;width: 23%;height: 7%;} .drawing1 .hover-area[data-target="6"] {top: 6%;left: 6%;width: 27%;height: 16%;} .drawing1 .hover-area[data-target="7"] {top: 5%;left: 46%;width: 27%;height: 10%;} .drawing2 .hover-area[data-target="1"] {top: 0%;left: 1%;width: 19%;height: 6%;} .drawing2 .hover-area[data-target="2"] {top: 24%;left: 7%;width: 58%;height: 16%;} .drawing2 .hover-area[data-target="3"] {top: 7%;left: 7%;width: 58%;height: 14%;} .drawing2 .hover-area[data-target="4"] {top: 43%;left: 25%;width: 33%;height: 9%;} .drawing2 .hover-area[data-target="5"] {top: 43%;left: 73%;width: 23%;height: 9%;} .drawing2 .hover-area[data-target="6"] {top: 7%;left: 91%;width: 5%;height: 204px;left: 91%;} } @media (max-width:830px){ .drawing7 .hover-area[data-target="1"] {top: 0%;left: 1%;width: 25%;height: 7%;} .drawing7 .hover-area[data-target="2"] {top: 49%;left: 13%;width: 22%;height: 8%;} .drawing7 .hover-area[data-target="3"] {top: 30%;left: 13%;width: 22%;height: 18%;} .drawing7 .hover-area[data-target="4"] {top: 16%;left: 7%;width: 14%;height: 12%;} .drawing7 .hover-area[data-target="5"] {top: 21%;left: 55%;width: 32%;height: 25%;} .drawing1 .hover-area[data-target="1"] {top: 0%;left: 1%;width: 19%;height: 4%;} .drawing1 .hover-area[data-target="2"] {top: 16%;left: 6%;width: 21%;height: 19%;} .drawing1 .hover-area[data-target="3"] {top: 16%;left: 30%;width: 30%;height: 19%;} .drawing1 .hover-area[data-target="4"] {top: 21%;left: 68%;width: 28%;height: 14%;} .drawing1 .hover-area[data-target="5"] {top: 13%;left: 73%;width: 23%;height: 7%;} .drawing1 .hover-area[data-target="6"] {top: 4%;left: 6%;width: 27%;height: 11%;} .drawing1 .hover-area[data-target="7"] {top: 4%;left: 46%;width: 24%;height: 5%;} .drawing2 .hover-area[data-target="1"] {top: 0%;left: 1%;width: 19%;height: 5%;} .drawing2 .hover-area[data-target="2"] {top: 19%;left: 7%;width: 58%;height: 15%;} .drawing2 .hover-area[data-target="3"] {top: 5%;left: 7%;width: 58%;height: 13%;} .drawing2 .hover-area[data-target="4"] {top: 38%;left: 28%;width: 27%;height: 8%;} .drawing2 .hover-area[data-target="5"] {top: 38%;left: 80%;width: 16%;height: 8%;} .drawing2 .hover-area[data-target="6"] {top: 5%;left: 91%;width: 5%;height: 193px;left: 91%;} .open_wrap .overview_bottom{} } @media (max-width:768px){ .open_wrap .w_box .plan_box li { width: calc(50% - 8px);} .open_wrap .w_box .service li { flex: 1 1 calc(50% - 10px);} .open_wrap .w_box .plan_box li .price > div{font-size:1.6em;} .open_wrap .w_box .service_area{display:block;} .open_wrap .w_box .service_txt{width: 100%;max-width:100%;margin-bottom: 30px;border-right: none;margin-right: 0;border-bottom: 1px solid #ddd;padding-bottom: 20px;} .open_wrap .w_box .service{} footer{min-height: 220px;} footer .footer_area div a{} footer .footer_area div{/* display: block; */} footer .footer_area div.footer_box1{} footer .footer_area div.footer_box2{} footer .footer_area div.footer_box1 .footer_btn{} footer .footer_area .footer_btn a{padding:20px;} .visual-container{font-size:15px;} .visual-text h1{font-size: 2.1em;word-break: keep-all;} .txt_left_btm{} .txt_right_top{text-align: center;bottom: 30%;left: 50%;} .hero-slider .text--holder .left_bottom{margin-top:5%; } .hero-slider .text--holder .right_top{margin-top:5%;} .hero-slider .text--holder .center{margin-top:5%;} .hero-slider .text--holder p{font-size: 1.3rem;} .hero-slider .slick-arrow{width:40px; height:40px; font:32px/36px FontAwesome;} div.ir .ir_txt{margin-top: 5rem;margin-bottom: 1rem;padding-top: 2rem;} .hero-slider .text--holder h3{font-size: 2.5rem;line-height:1.3em;white-space: pre-wrap;word-break: auto-phrase;} .form-footer button{margin-top:30px;} .form-footer li{margin: 0.5rem 0;line-height: 1.5em;font-size: 0.93em;display: block;padding-left: 1em;word-wrap: break-word; /* 단어가 길어지면 자동 줄바꿈 */margin-bottom: 0.5rem;line-height: 1.5em;} .form-footer li::before {content: '·';display: inline-block;width: 1em;margin-left: -1em;padding-right: 0.5em;} .contact-inputs{width:100%;} .form-group div.options label span{font-size:0.92em; letter-spacing:-1px;} .icon_area{height: 460px;} .hero-slider .text--holder h3 br{display:none;} .hero-slider .text--holder{padding: 0 10%;box-sizing: border-box;} .hero-slider .slick-arrow, .hero-slider .slick-arrow{top:60%;} .gallery-thumbs .swiper-wrapper {display: none; } .gallery-top{margin-left:0;} .swiper-container-wrapper {width: 100%;height: auto;} .swiper-container {width: 100%; display: block;} .swiper-slide { width: 100%; height: auto; } .swiper-button-next, .swiper-button-prev { display: none; } .open_wrap .w_box h5{font-size: 1.2em;white-space: pre-wrap;word-break: auto-phrase;} .green .drawing .drawing_box{display:block;} .green .drawing .drawing_box .drawing_img{width:100%;} .green .drawing .drawing_box .drawing_img img{width:100%;} .green .drawing .drawing_box ul{width:100%;} .green .drawing h4 + span{display:block; margin-left:0;margin-top:20px;} .open_wrap .overview .w_box ul.ov1 {display: flex;flex-direction: column;gap: 24px;} .open_wrap .overview .w_box ul.ov1 li {width: 100%;display: flex;align-items: center;justify-content: space-around;gap: 20px;} .open_wrap .overview .w_box ul.ov1 li:nth-child(even) {flex-direction: row-reverse;} .open_wrap .overview .w_box ul.ov1 li span{margin-top: 0;text-align: left;line-height: 32px;font-size: 18px;} .open_wrap .overview .w_box ul.ov1 li:nth-child(even) span{text-align:right;} .open_wrap .overview .w_box ul.ov1 li > div{width: 60%;} .open_wrap .overview .w_box ul.ov1 li > span{width: 40%;font-size: 1.1em;line-height: 1.5em;} .open_wrap .overview .w_box ul.ov1 li > span br{display:none;} .overview_vl h2{font-size:1.8em;} .open_wrap .overview_bottom p br{display:none;} .open_wrap .overview_bottom p{font-size:0.9em;line-height: normal;} .overview_rolling .slider-wrapper{margin:0 5%} .gallery-thumbs {display: none;} .gallery-top {width: 100%; height: 300px; margin-left: 0; } .overview_rolling .slide-group {grid-template-columns: repeat(2, 1fr); transition: transform 0.5s ease;} .overview_rolling .card {width: calc(50% - 1rem); } .open_wrap .overview .type{display: flex;flex-direction: column;} .open_wrap .overview .type li{width: 100%;} .open_wrap .overview .type li > em {} .open_wrap .overview .type li > p{font-size: 1.5em;} .open_wrap .overview .type li > span{} .open_wrap .overview .type li > ol{} .open_wrap .overview .type li > ol li{font-size: 1em;} .open_wrap .overview .type li.on{} .open_wrap .overview .type li.on > em{} .open_wrap .overview .type li.on > p{} .open_wrap .overview .type li.on > ol li{} .open_wrap .green .type li.on{} .open_wrap .green .type li.on > em{} .open_wrap .green .type li.on > p{} .open_wrap .green .type li.on > ol li{} .open_wrap .overview .type_gallery{} .open_wrap .overview .type_gallery li{} .open_wrap .overview .type_gallery li img{} .open_wrap .map_txt li{ flex-direction: column;} .open_wrap .map_txt li div:nth-child(2){box-sizing: border-box;padding: 0 10px;} .map div:not(.map-container) a{width:80%; text-align:center;} .open_wrap .overview .w_box h3{line-height:1.5em;} .open_wrap .overview .graphic2{flex-direction:column;} .open_wrap .overview .graphic2 li{width:100%;padding-top: 0;text-align: left;padding: 60px 0 0 47%;box-sizing: border-box;} .open_wrap .overview .graphic2 li:not(:last-child)::after{top: 174px;left: 50%;transform: rotate(90deg);} .open_wrap .overview .graphic{gap: 20px;} .green .drawing .drawing_box li{padding-left:2%; box-sizing:border-box;} .open_wrap .overview .graphic2 .gr_icon7{background: #fff url('/images/gr_icon7.png')no-repeat 27% center;} .open_wrap .overview .graphic2 .gr_icon8{background: #fff url('/images/gr_icon8.png')no-repeat 27% center;} .open_wrap .overview .graphic2 .gr_icon9{background: #fff url('/images/gr_icon9.png')no-repeat 27% center;} .open_wrap .overview .graphic li{width: 90%;height: 90px;padding-top: 62px;border-radius: 50px;} .open_wrap .overview .graphic .gr_icon1{background: #FFF url('/images/gr_icon1.png')no-repeat center 17px;background-size: 32px;} .open_wrap .overview .graphic .gr_icon2{background: #fff url('/images/gr_icon2.png')no-repeat center 17px;background-size: 32px;} .open_wrap .overview .graphic .gr_icon3{background: #fff url('/images/gr_icon3.png')no-repeat center 17px;background-size: 32px;} .open_wrap .overview .graphic .gr_icon4{background: #fff url('/images/gr_icon4.png')no-repeat center 15px;background-size: 32px;} .open_wrap .overview .graphic .gr_icon5{background: #fff url('/images/gr_icon5.png')no-repeat center 17px;background-size: 32px;} .open_wrap .overview .graphic .gr_icon6{background: #fff url('/images/gr_icon6.png')no-repeat center 13px;background-size: 32px;} .open_wrap .overview .graphic {display: grid;grid-template-columns: repeat(3, 1fr); gap: 20px;} .open_wrap .overview .graphic li:not(:last-child)::after {content: '';position: absolute;right: -10%;top: 50%;transform: translateY(-50%);width: 6px;height: 7px;background: url('/images/ov_bullet1.png') no-repeat center / contain;} .drawing7 .hover-area {position: absolute;opacity: 0;transition: opacity 0.3s ease;z-index: 1;cursor: pointer;} .drawing7 .hover-area[data-target="1"] {top: 2%;left: 1%;width: 23%;height: 7%;} .drawing7 .hover-area[data-target="2"] {top: 85%;left: 13%;width: 22%;height: 12%;} .drawing7 .hover-area[data-target="3"] {top: 53%;left: 13%;width: 22%;height: 30%;} .drawing7 .hover-area[data-target="4"] {top: 27%;left: 7%;width: 13%;height: 20%;} .drawing7 .hover-area[data-target="5"] {top: 37%;left: 56%;width: 31%;height: 42%;} .drawing1 .hover-area {position: absolute;opacity: 0;transition: opacity 0.3s ease;z-index: 1;cursor: pointer;} .drawing1 .hover-area[data-target="1"] {top: 2%;left: 1%;width: 19%;height: 7%;} .drawing1 .hover-area[data-target="2"] {top: 40%;left: 6%;width: 21%;height: 37%;} .drawing1 .hover-area[data-target="3"] {top: 40%;left: 30%;width: 30%;height: 37%;} .drawing1 .hover-area[data-target="4"] {top: 52%;left: 68%;width: 28%;height: 31%;} .drawing1 .hover-area[data-target="5"] {top: 33%;left: 73%;width: 23%;height: 13%;} .drawing1 .hover-area[data-target="6"] {top: 10%;left: 6%;width: 27%;height: 22%;} .drawing1 .hover-area[data-target="7"] {top: 9%;left: 46%;width: 27%;height: 10%;} .drawing2 .hover-area {position: absolute;opacity: 0;transition: opacity 0.3s ease;z-index: 1;cursor: pointer;} .drawing2 .hover-area[data-target="1"] {top: 2%; left: 1%;width: 19%;height: 7%;} .drawing2 .hover-area[data-target="2"] {top: 46%;left: 7%;width: 58%;height: 34%;} .drawing2 .hover-area[data-target="3"] {top: 11%;left: 7%;width: 58%;height: 29%;} .drawing2 .hover-area[data-target="4"] {top: 85%;left: 29%;width: 26%;height: 9%;} .drawing2 .hover-area[data-target="5"] {top: 82%;left: 82%;width: 14%;height: 11%;} .drawing2 .hover-area[data-target="6"] {top: 10%;width: 5%;height: 69%;right: 16%;} footer .footer_area div a{color: #fff; width:30%; display:block;} footer .footer_area div a img{width:100%;} } @media (max-width:580px){ div.ir .ir_txt > div{display: block;} div.ir .ir_txt > div span{display: block;width: 10rem;margin: 0 auto;margin-bottom: 1.5rem;} div.ir .ir_txt > div div{} } @media (max-width:480px){ .open_wrap .w_box .plan_box li {width: 100%;padding: 15px; line-height:32px;} .open_wrap .w_box .service li{padding-left:10% !important;} .open_wrap .w_box .plan_box li h5{margin-bottom: 10px;} .open_wrap .w_box .plan_box li .price{margin-top: 15px;} .open_wrap .w_box .plan_box li a{margin-top: 15px;} .open_wrap .w_box .plan_box li.best .price > span{margin-top:10px;} .open_wrap .w_box .plan_box li .price > div{font-size:1.8em;} .accordion-item{padding:5px 15px;} .accordion-icon{margin-left:20px;} footer .footer_area div.footer_box1{display:block;} footer .footer_area div.footer_box1 .footer_btn{display:block;padding: 20px 0 10px 0;border-bottom: 1px solid #dddddd24;} .open_wrap .overview .w_box ul.ov1 li2025-03-17 > span{font-size: 1em;line-height: 1.4em;margin-top: 0;} .overview_vl h2{font-size:1.5em;} .overview_vl h2 + p{font-size: 1em;padding: 0 3%;box-sizing: border-box;} .open_wrap .overview .w_box h3{font-size:1.3em;} .open_wrap .overview .w_box span{font-size:1em;} .open_wrap .overview .w_box ul.ov1 li > span{font-size:1em; line-height:1.2em;} .overview_rolling .slide-group {grid-template-columns: 1fr;} .overview_rolling .card {width: calc(100% - 1rem); } .open_wrap .guide .guidelines > div .guide_img{ display: flex; flex-direction: column;} .open_wrap .guide .guidelines > div .guide_img li{margin-bottom:20px;} .open_wrap .overview .graphic2 li{} .open_wrap .w_box .plan_box{gap:15px;} .open_wrap .w_box h3{font-size:2em} .open_wrap{margin-top:50px;} .open_wrap .w_box .s_visual_txt p{margin-left:0;} .visual-container{font-size:13px;} .hero-slider .text--holder p{font-size:1.3rem;} .hero-slider .text--holder p img{height:15px;} footer .footer_area div a{c width:100px; } } @media (max-width:360px){ .open_wrap .w_box .service{display: flex;flex-direction: column;gap: 2px;} .open_wrap .w_box .service li{ width:100%; padding-left:18% !important;} .open_wrap .overview .graphic li{width: 90%;height: 90px;padding-top: 57px;border-radius: 50px;} .open_wrap .overview .graphic .gr_icon1{background: #FFF url('/images/gr_icon1.png')no-repeat center 17px;background-size: 30px;} .open_wrap .overview .graphic .gr_icon2{background: #fff url('/images/gr_icon2.png')no-repeat center 17px;background-size: 30px;} .open_wrap .overview .graphic .gr_icon3{background: #fff url('/images/gr_icon3.png')no-repeat center 17px;background-size: 30px;} .open_wrap .overview .graphic .gr_icon4{background: #fff url('/images/gr_icon4.png')no-repeat center 15px;background-size: 30px;} .open_wrap .overview .graphic .gr_icon5{background: #fff url('/images/gr_icon5.png')no-repeat center 17px;background-size: 30px;} .open_wrap .overview .graphic .gr_icon6{background: #fff url('/images/gr_icon6.png')no-repeat center 13px;background-size: 30px;} .open_wrap .overview .graphic {display: grid;grid-template-columns: repeat(3, 1fr); gap: 20px;} .open_wrap .overview .graphic li:not(:last-child)::after {content: '';position: absolute;right: -17%;top: 50%;transform: translateY(-50%);width: 6px;height: 7px;background: url('/images/ov_bullet1.png') no-repeat center / contain;} } .popup_openlab {position: absolute;top: 100px;left: 50%;background: #fff;z-index: 999;transform: translate(-50%);} .cls_bx {padding: 2px 10px;font-size: 13px;color: #000;vertical-align: middle;} .cls_bx span {float: right} .cls_bx span a {color: #000}