@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap'); @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); @import url('font/font.css'); @import url('common.css'); @import url('animation.css'); /* popup.211010 */ .conPopup {width:100%;max-width:1920px;margin:0 auto;position:absolute;top:40px;left:0;right:0;z-index:98;} .popup_wrap {position:absolute;top:200px;background:#000;display:inline-block;} .popup_wrap > img {border-top:1px solid #eee;border-left:1px solid #eee;border-right:1px solid #eee;} .popup_btn {padding:10px 0; background:#373737;} .popup_btn .check_box {margin:0 10px !important;} .popup_btn span.text {color:#fff !important;} .popup_btn > a {color:#fff;margin:0 10px;float:right; font-size:14px; padding:4px;} #area {position: relative; /* absolute는 부모가 relative일 때 부모를 따라간다. */ width: 100%; padding-bottom: 56.25%; /* 16:9 비율 */} #video {position: absolute; width: 100%; /* 부모에 맞게 꽉 채운다. */ height: 100%;} /* popup 우선순위 : 왼쪽부터 노출 우선순위 내림차순, 우선순위 최대값 15, 최대 등록 3개 */ .popup_wrap.popup00 {right:10px;z-index:19; } .popup_wrap.popup01 {left:10px;z-index:17; top:50px;} .popup_wrap.popup02 {left:466px;z-index:16; top:50px;} .popup_wrap.popup03 {left:921px; z-index:15; top:50px; } .popup_wrap.popup04 {left:1377px; z-index:14; top:50px;} .popup_wrap.popup05 {right:10px; z-index:13;} .conPopup .popup_wrap .closeLayer_pop { position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; text-indent: -9999px; background: transparent; border: 0; transform: rotate(45deg); cursor: pointer; z-index: 3; } @media screen and (max-width: 1100px) { .conPopup {width:100%;} .popup_wrap {top:15vh;max-width:448px;} .popup_wrap > img {width:100%;} .popup_wrap > a img {width:100%;} .popup_wrap.popup00, .popup_wrap.popup01, .popup_wrap.popup02, .popup_wrap.popup03, .popup_wrap.popup04, .popup_wrap.popup05 {left:50%;transform:translateX(-50%); width:90%;top:50px; } } @media screen and (max-width: 768px) { } /*** [Pc] --/start/-- ***/ #conPC {opacity:1;visibility:visible;position:relative;top:0;left:0;width:100%;transition:all .6s cubic-bezier(0.785, 0.135, 0.15, 0.86);-webkit-transition:all .6s cubic-bezier(0.785, 0.135, 0.15, 0.86);} #conPC .pc_fixedbar {position:fixed;z-index:100;width:100%;height:auto;transition:all 1s;-webkit-transition:all 1s;} #conPC .pc_fixedbar.top {top:0;} #conPC .pc_fixedbar.bottom {bottom:0;} #conPC .pc_fixedbar.left {left:0;} #conPC .pc_fixedbar.right {right:0;} #conPC .pc_fixedbar.top.hidden {top:-300px;} #conPC .pc_fixedbar.bottom.hidden {bottom:-300px;} #conPC h2 {font-family:'Pretendard'; font-size:2.5vw;} #conPC h3 {font-family:'Pretendard'; font-size:2vw;} #conPC p {font-family:'Pretendard'; font-size:1vw;} #conPC .pc_fixedbar > div .formlist {font-size:0;} #conPC .pc_fixedbar > div .formlist > li {display:inline-block;vertical-align:top;font-size:12px;} #conPC .pc_fixedbar > div .formlist > li:nth-child(1) {width:calc(100% - 200px);padding-right:10px;} #conPC .pc_fixedbar > div .formlist > li:nth-child(1) > ul {display:block;width:auto;} #conPC .pc_fixedbar > div .formlist > li:nth-child(1) > ul > li {margin-bottom:5px;} #conPC .pc_fixedbar > div .formlist > li:nth-child(1) > ul > li:last-child {margin-bottom:0;} #conPC .pc_fixedbar > div .formlist > li:nth-child(2) {width:200px;} #conPC .pc_fixedbar > div .input {font-size:0;} #conPC .pc_fixedbar > div .input > span {font-size:12px;display:inline-block;vertical-align:middle;color:#000;} #conPC .pc_fixedbar > div .input > span:nth-child(1) {width:60px;font-size:16px;font-weight: 500;} #conPC .pc_fixedbar > div .input > span:nth-child(2) {width:calc(100% - 60px);} /* section07 portfolio * --------------------------------------- */ .portfolio {max-width:1100px;width:100%;margin:0 auto;text-align:left; } .portfolio > ul {font-size:0;padding:40px 0;} .portfolio > ul > li {font-size:12px;vertical-align:top;width:20%;display:none;} .portfolio > ul > li.active {display:inline-block;} .portfolio > ul > li > a {display:block;width:auto;margin:5px;position:relative;overflow:hidden;} .portfolio > ul > li > a > img {max-width:100%;} .portfolio > ul > li > a:hover > img {transform:scale(1.1);transition:all 1s;} .portfolio > ul > li > a .border:after,.portfolio > ul > li > a .border:before {content:'';display:block;width:100%;height:0;position:absolute;transition:all .2s;z-index:1;background:rgba(0,0,0,.8);} .portfolio > ul > li > a .border:after {top:0;} .portfolio > ul > li > a .border:before {bottom:0;} .portfolio > ul > li > a .border i {display:block;position:absolute;background:#df332d;transition:all .25s;z-index:2;} .portfolio > ul > li > a .border i:nth-child(1) {top:0;width:100%;height:0;} .portfolio > ul > li > a .border i:nth-child(2) {top:0;right:0;width:2px;height:0;} .portfolio > ul > li > a .border i:nth-child(3) {bottom:0;width:100%;height:0;} .portfolio > ul > li > a .border i:nth-child(4) {bottom:0;left:0;width:2px;height:0;} .portfolio > ul > li > a:hover .border:after,.portfolio > ul > li > a:hover .border:before {height:50%;} .portfolio > ul > li > a:hover .border i:nth-child(1) {height:2px;} .portfolio > ul > li > a:hover .border i:nth-child(2) {height:100%;transition-delay:.2s;} .portfolio > ul > li > a:hover .border i:nth-child(3) {height:2px;} .portfolio > ul > li > a:hover .border i:nth-child(4) {height:100%;transition-delay:.2s;} .portfolio > ul > li > a .text-box {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:100%;overflow:hidden;z-index:3;} .portfolio > ul > li > a .text-box .sub {transform:translateY(500%);opacity:0;transition:transform .35s, opacity .6s ease-out;font-size:0.8vw; color:#fff;font-weight:900;font-family:'NotoKR';} .portfolio > ul > li > a .text-box .des {transform:translateY(-500%);opacity:0;transition:transform .35s, opacity .6s ease-out;color:#ccc;font-family:'NanumSquare';font-size:17px;} .portfolio > ul > li > a:hover .text-box .sub {transform:translateY(0);opacity:1;} .portfolio > ul > li > a:hover .text-box .des {transform:translateY(0);opacity:1;} .portfolio .reallanding-more-btn {margin:0 auto 50px;width:300px;height:80px;background:url('../img/pc/pf_btn.png') center no-repeat;text-align:center;transition:all .35s;} .portfolio .reallanding-more-btn a {text-indent:-9999px;display:block;padding:10% 0;} /*#conPC .pc_fixedtop .agreebox [class*="customcheck"]:checked ~ .icon::after {border-left:2px solid #008d91;border-bottom:2px solid #008d91;}*/ #conPC .privacy_con_box_fix {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:999;display:none;} #conPC .privacy_con_box_fix .inner {position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;background:#fff;padding:40px; border-radius:10px;} #conPC .privacy_con_box_fix .inner h3 {font-weight:bold;padding-bottom:20px} #conPC .privacy_con_box_fix .inner p {width:558px;height:200px;overflow-y:scroll;border:1px solid #eee;padding:20px;line-height:1.5em; font-size:14px;} #conPC .privacy_con_box_fix .inner a {position:absolute;top:0;right:10px;font-size:35px;display:inline-block;} #conPC .privacy_con_box_fix .inner a:before {content:' \00D7';color:#000;} /* 사이드 고정 메뉴 */ #conPC .fixed_top {position:fixed;bottom:100px;right:2%;z-index:9999;} #conPC .fixed_side {position:fixed;bottom:200px;right:2%;z-index:9999;} #conPC .fixed_blog {position:fixed;bottom:40px;right:6%;z-index:9999;} #conPC .footer .content{max-width: 1920px;background-color:#141414;text-align:center;padding:60px 0;margin:0 auto;} #conPC .footer .content p{line-height: 1.5; color:#a3a3a3;font-size:1.1rem;} #conPC .footer .content p a{color:#5893ff;} #conPC .footer .content p:last-child{padding-top: 20px;} /* PC - 폼 영역 */ .Real #conPC .db_list {} #conPC .dbform {width:878px;position:absolute;top:65%;left:50%;transform:translate(-50%, -50%);} #conPC .dbform form > ul > li {padding:5px 0;} #conPC .dbform form > ul > li div > span {display:inline-block;vertical-align:middle;font-size:25px;padding:5px;font-weight:bold;color:#000;} #conPC .dbform form > ul > li div > span em {font-weight:normal;font-size:18px;} #conPC .dbform form > ul > li div > span:first-child {width:120px;margin-left:60px;text-indent:-9999px;} #conPC .dbform form > ul > li div > span:last-child {width:calc(100% - 300px);text-align:left;overflow:hidden;margin-left:30px;} #conPC .dbform form > ul > li div > span.vat {vertical-align:top;margin-top:10px;} #conPC .dbform form > ul > li div textarea[type=text] {height:130px;} #conPC .dbform .db_list > li .checkitem {font-size:0;} #conPC .dbform .db_list > li .checkitem > label {display:inline-block;vertical-align:middle;font-size:12px;margin-right:15px;} #conPC .dbform .db_list > li .checkitem > label {display:inline-block;vertical-align:middle;font-size:12px;margin-right:15px;} #conPC .dbform label {cursor:pointer;} #conPC .dbform .agreebox {margin-left:225px;} #conPC .dbform .agreebox [class*="customcheck"] ~ .text {font-size:16px;color:#333;} #conPC .dbform .agreebox .show-policy {color:#fff;font-weight:bold;margin-left:3px;font-size:16px;} #conPC .dbform .submitbox {width:100%;height:77px;text-align:center; overflow:hidden;} #conPC .dbform .submitbox button {width:523px;height:77px;background:transparent;cursor:pointer;} #conPC .dbform input[type="checkbox"] {display:none;} #conPC .dbform input::placeholder { color: #757575;} #conPC .dbform textarea::placeholder { color: #757575;} #conPC .dbform input::-webkit-input-placeholder{color: #757575;} #conPC .dbform input:-ms-input-placeholder{ color: #757575;} #conPC .dbform div label {cursor:pointer;} #conPC .privacy_con_box {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:999;display:none;} #conPC .privacy_con_box .inner {position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;background:#fff;padding:40px;} #conPC .privacy_con_box .inner h3 {font-weight:bold;padding-bottom:20px} #conPC .privacy_con_box .inner p {width:558px;height:200px;overflow-y:scroll;border:1px solid #eee;padding:20px;line-height:1.5em; font-size:14px;} #conPC .privacy_con_box .inner a {position:absolute;top:0;right:10px;font-size:35px;display:inline-block;} #conPC .privacy_con_box .inner a:before {content:' \00D7';color:#000;} .conPopup .popup_wrap .closeLayer_pop {position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; text-indent: -9999px; background: transparent; border: 0; transform: rotate(45deg); cursor: pointer; z-index: 3;} .conPopup .popup_wrap .closeLayer_pop:after {position: absolute; left: 50%; top: 50%; width: 100%; height: 2px; background: #fff; transform: translate(-50%, -50%); content: ""; } .conPopup .popup_wrap .closeLayer_pop:before {position: absolute; left: 50%; top: 50%; width: 2px; height: 100%; background: #fff; transform: translate(-50%, -50%); content: "";} #conPC .pc_fixedtop .dbform_fix {width:70%;margin-left:30%;} #conPC .pc_fixedtop .dbform_fix .db_list {width:90%; margin-left:10%} #conPC .pc_fixedtop .dbform_fix .db_list li {width:90%;float:left;margin-top:2.5%;} /* #conPC .pc_fixedtop .dbform_fix .db_list li:first-child {margin-left:0%; } #conPC .pc_fixedtop .dbform_fix .db_list li:nth-child(2) {margin-left:1%;} #conPC .pc_fixedtop .dbform_fix .db_list li:last-child {margin-left:1%; }*/ #conPC .pc_fixedtop .dbform_fix .db_list li .input-control {padding:6px; height:44px; border-radius:16px;} #conPC .pc_fixedtop .dbform_fix .db_list li .conPCTop {width: 50%; float: left;} #conPC .pc_fixedtop label {cursor:pointer;} #conPC .pc_fixedtop .agreebox {position:absolute;top:-40px;right:30px} #conPC .pc_fixedtop .agreebox .text {color:#595959;} #conPC .pc_fixedtop .agreebox .show-policy {color:#fff;font-weight:bold;margin-left:3px;font-size:14px;vertical-align:middle} #conPC .pc_fixedtop .submitbox {float:left;} #conPC .pc_fixedtop .submitbox button {cursor:pointer;} #conPC .pc_fixedtop input[type="checkbox"] {display:none;} #conPC .pc_fixedtop .agreebox .icon {background:#fff; border-radius:10px;} #conPC img {width:100%; image-rendering: -webkit-optimize-contrast;} #conPC .pc_fixedtop {position:fixed; top:15%;left: 90%; z-index: 100; height:490px; background:none;} #conPC .pc_fixedtop .content {width:280px; height:490px; margin: 0 auto; background: url(/ys/contents/img/pc/footer_bg.png) 0 0 no-repeat; background-size:100% auto; transform:translate(-50%, 0); } #conPC .pc_fixedtop .dbform_fix {position:absolute; top:160px;; left:0%; width:100%; max-width:280px; margin-left:0;} #conPC .pc_fixedtop .dbform_fix .db_list li .input-control { border-color:#959595;} #conPC .pc_fixedtop .dbform_fix .db_list li input {/*font-size:1.12vw;*/ color:#9f9f9f;} #conPC .pc_fixedtop .landing_form:after {content:''; display:block; clear:both;} #conPC .pc_fixedtop .landing_form .submitbox {position:absolute; left:9.5%; top:250px; } #conPC .pc_fixedtop .landing_form .submitbox button {vertical-align:top; background:transparent;} #conPC .pc_fixedtop .agreebox {top: 206px; position: absolute; left: 19%;} #conPC .pc_fixedtop .agreebox .text {margin-left:4px; font-size:0.8vw; color:#fff; line-height:1;} #conPC .pc_fixedtop .dbform_fix .db_list select {background: url(/contents/images/pc/arow.png) no-repeat 95% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color:#fff;} #conPC .pc_fixedtop .fixnone {display:none;} #conPC .visual .content {width: 100%; max-width: 1920px; } #conPC .visual .content .mainBanner .btn_next {position:absolute;top:50%;right:8%;cursor:pointer;transform:translateY(-50%);z-index:5} #conPC .visual .content .mainBanner .btn_prev {position:absolute;top:50%;left:8%;cursor:pointer;transform:translateY(-50%);z-index:5} #conPC .success_story {position:relative;} #conPC .success_story .layericon01 {position:absolute; width:37.35%; top:33%; left:31%;} #conPC .success_story .layericon02 {position:absolute; width:37.35%; top:70%; left:31%;} /*#conPC .storeBanner {width:66%; left:17.5%;} #conPC .storeBanner img {width:100%; image-rendering: -webkit-optimize-contrast;}*/ #conPC .success_story .btn {position:absolute; top: 53%; left:50%; z-index:20; width:100%;} #conPC .success_story .swiper-button-next {left:31%; width:84px; height:84px; background:url(/contents/images/pc/btn_main_next.png) center no-repeat;} #conPC .success_story .swiper-button-prev {left:-36%; width:84px; height:84px; background:url(/contents/images/pc/btn_main_prev.png) center no-repeat;} #conPC .success_thumb .swiper-wrapper{justify-content: center; padding:2%; width:96%;} #conPC .success_thumb2 .swiper-wrapper{justify-content: center; padding:2%; width:96%;} #conPC .success_thumb .swiper-slide.swiper-slide-visible.swiper-slide-thumb-active {color: #ffffff; background-image: linear-gradient(to right, #00b079, #028db9);} #conPC .success_thumb2 .swiper-slide.swiper-slide-visible.swiper-slide-thumb-active {color: #ffffff; background-image: linear-gradient(to right, #00b079, #028db9);} #conPC .success_thumb_btn {cursor: pointer; width: 92px; text-align:center; padding: 5px 15px 5px 15px; font-size: 14px; border: 1px solid #00CC66; border-radius:27px; font-family: "NotoSansKR", "sans-serif"; font-weight: 400;} #conPC .pc_fixedtop_height_img {position:relative;} #conPC .pc_fixedtop_height_img .layericon01 {position:absolute; top:0; left:0; width:100%;} #conPC .sec01_img {position:relative;} #conPC .sec01_img .layericon01 {position:absolute; top:70%; left:18%; width:64%;} #conPC .sec01_img .layericon01 p{font-family: 'Pretendard'; color: #fff; font-size: 7vw; font-weight: 900; font-style: italic; line-height: 6vw; opacity:0.7;} #conPC .sec01_img .layericon01 .red { color: #c8231e; font-weight: 900; } #conPC .sec01_img .layericon02 {position:absolute; top:0%; left:0%; width:100%} #conPC .sec01_img .layericon02 p{font-family: 'Pretendard'; color: #fff; font-size: 7vw; font-weight: 900; font-style: italic; line-height: 6vw; } #conPC .sec01_img .layericon03 {position:absolute; top:64%; left:49.5%; transform: translate(-50%, -50%); width:21.25%;} #conPC .sec01_img .layericon04 {position:absolute; top:66%; left:39%; transform: translate(-50%, -50%); width:21.15%;} #conPC .sec01_img .layericon05 {position:absolute; top:88%; left:49%; transform: translate(-50%, -50%); width:1.73%;} #conPC .sec01_img .layericon-video {position: absolute; top: 0%; width: 100%; left: 0%; } #conPC .sec01_img .layericon-video .video_bg {overflow: hidden; position: relative; width: 100%; padding-bottom: 56.25%; /* filter: brightness(40%); */} #conPC .sec01_img .layericon-video .video_bg iframe { position: absolute; top: -60px; bottom: -60px; left: 0; width: 100%; height: calc(100% + 120px); border: none;} /* #conPC .sec01_img .layericon00 {position:absolute; top:4.5%; left:21.5%; transform: translate(-50%, -50%); width:56.3%} #conPC .sec01_img .layericon01 {position:absolute; top:20%; left:14%; /*transform: translate(-50%, -50%);/ width:72.9%} #conPC .sec01_img .video_box1 {position:absolute; top:5%; left:1%; transform: translate(-50%, -50%); width:63.9% ; padding-bottom:56.25%; padding-top:30px; margin-top:5%; overflow: hidden;margin: 0px auto; z-index:15;} #conPC .video_box1 iframe, #conPC .video_box1 object, #conPC .video_box1 embed {position:absolute; top:29%; left:24.5%; width:52.5%; height:32.5%;} #conPC .sec01_img .layericon02 {position:absolute; top:46%; left:14%; /*transform: translate(-50%, -50%);/ width:72.9%} #conPC .sec01_img .video_box2 {position:absolute; top:31%; left:34.5%; transform: translate(-50%, -50%); width:63.9% ; padding-bottom:56.25%; padding-top:30px; margin-top:5%; overflow: hidden;margin: 0px auto; z-index:11;} #conPC .video_box2 iframe, #conPC .video_box2 object, #conPC .video_box2 embed {position:absolute; top:29%; left:24.5%; width:52.5%; height:32.5%;} #conPC .sec01_img .layericon03 {position:absolute; top:72%; left:14%; /*transform: translate(-50%, -50%);/ width:72.9%} #conPC .sec01_img .video_box3 {position:absolute; top:57%; left:1%; transform: translate(-50%, -50%); width:63.9% ; padding-bottom:56.25%; padding-top:30px; margin-top:5%; overflow: hidden;margin: 0px auto; z-index:10;} #conPC .video_box3 iframe, #conPC .video_box3 object, #conPC .video_box3 embed {position:absolute; top:29%; left:24.5%; width:52.5%; height:32.5%;} */ #conPC .sec02_img {position:relative;} #conPC .sec02_img .layericon01 {position:absolute; top:38%; width:100%; text-align:center;} #conPC .sec02_img .layericon01 p{font-family: 'Pretendard'; color: #fff; font-size: 2.5vw; } #conPC .sec02_img .layericon02 {position:absolute; top:45%; width:100%; text-align:center;} #conPC .sec02_img .layericon02 p{font-family: 'Pretendard'; color: #fff; font-size: 2.5vw; font-weight:700;} #conPC .sec02_img .layericon02 p b{font-family: 'Pretendard'; color: #fff; font-size: 2.5vw; font-weight:700;} #conPC .sec02_img .layericon03 {position:absolute; top:48%; width:100%; text-align:center;} #conPC .sec02_img .layericon03 p{font-family: 'Pretendard'; color: #c8231e; font-size: 1.4vw; font-weight:700; font-style:italic; } #conPC .sec02_img .layericon04 {position:absolute; top:55%; width:100%; text-align:center;} #conPC .sec02_img .layericon04 p{font-family: 'Pretendard'; color: #fff; font-size: 2vw; font-weight: 900; font-style: italic;} #conPC .sec02_img .layericon04 b{color: #fff; } #conPC .sec02_img .video_box1 {position:absolute; top:79%; left:49.3%; transform: translate(-50%, -50%); width:94% ; padding-bottom:82.25%; padding-top:30px; margin-top:5%; overflow: hidden;margin: 0px auto; z-index:15;} #conPC .video_box1 iframe, #conPC .video_box1 object, #conPC .video_box1 embed {position:absolute; top:29%; left:24.5%; width:52.5%; height:32.5%;} #conPC .sec03_img {position:relative;} #conPC .sec03_img p {font-family:'Pretendard'; font-size: 1.25vw; color:#000;} #conPC .sec03_img b {color:#c8231e; font-weight:900;} #conPC .sec03_img img.opac {-webkit-transform: scale(1); transform: scale(1); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;} #conPC .sec03_img img.opac:hover {-webkit-transform: scale(1.1); transform: scale(1.1);} #conPC .sec03_img .layericon01 {position:absolute; top:0%; left:0%; width:50%;} #conPC .sec03_img .layericon01 .btn_next {position: absolute; top: 53%; right: 2%; cursor: pointer; transform: translateY(-50%); z-index: 99999;} #conPC .sec03_img .layericon01 .btn_prev {position: absolute; top: 53%; left: 2%; cursor: pointer; transform: translateY(-50%); z-index: 99999;} #conPC .sec03_img .layericon01-2 {position:absolute; bottom:0%; left:0%; width:22.65%;} #conPC .sec03_img .layericon01-3 {position:absolute; bottom:0%; left:20%; width:22.2%;} #conPC .sec03_img .layericon02 {position:absolute; top:0%; right:0%; width:50%;} #conPC .sec03_img .layericon03 {position:absolute; top:33%; left:54%; width:100%;} #conPC .sec03_img .layericon04 {position:absolute; top:37%; left:54%; width:100%;} #conPC .sec03_img .layericon05 {position:absolute; top:41%; left:54%; width:100%;} #conPC .sec03_img .layericon06 {position:absolute; top:45%; left:54%; width:100%;} #conPC .sec03_img .layericon07 {position:absolute; top:55%; left:54%; width:100%;} #conPC .sec03_img .layericon08 {position:absolute; top:59%; left:54%; width:100%;} #conPC .sec03_img .layericon09 {position:absolute; top:62%; left:54%; width:100%;} #conPC .sec04_img {position:relative;} #conPC .sec04_img .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conPC .sec04_img .layericon01 img { filter: brightness(60%); animation: flicker 2s linear alternate infinite; } #conPC .sec04_img .layericon02 {position:absolute; top:28%; left:0%; width:100%; text-align:center;} #conPC .sec04_img .layericon02 p{font-family: 'Pretendard'; color: #fff; font-size: 2.5vw; font-weight: 900; font-style: italic;} #conPC .sec04_img .layericon02 .black {color:#000; font-weight: 900;} #conPC .sec04_img .layericon03 {position:absolute; top:47%; left:0%; width:100%; text-align:center;} #conPC .sec04_img .layericon03 p{font-family: 'Pretendard'; color: #fff; font-size: 1.4vw; } #conPC .sec04_img .layericon04 {position:absolute; top:51%; left:0%; width:100%; text-align:center;} #conPC .sec04_img .layericon04 p{font-family: 'Pretendard'; color: #fff; font-size: 1.4vw; font-weight: 900; } #conPC .sec04_img .layericon05 {position:absolute; top:61%; left:42.5%; width:14.6%;} #conPC .sec04_img .video_box2 {position:absolute; top:79%; left:49.3%; transform: translate(-50%, -50%); width:94% ; padding-bottom:82.25%; padding-top:30px; margin-top:5%; overflow: hidden;margin: 0px auto; z-index:15;} #conPC .video_box2 iframe, #conPC .video_box2 object, #conPC .video_box2 embed {position:absolute; top:29%; left:24.5%; width:52.5%; height:32.5%;} #conPC .sec05_img {position:relative;} #conPC .sec05_img .layericon01 {position:absolute; bottom:0%; left:0%; width:37.05%;} #conPC .sec05_img .layericon02 {position:absolute; top:21%; left:40%; width:100%;} #conPC .sec05_img .layericon02 p{font-family: 'Pretendard'; color: #000; font-size: 2.5vw; font-weight: 900; font-style: italic; line-height:1em;} #conPC .sec05_img .layericon02 b{ color: #c8231e;} #conPC .sec05_img .layericon03 {position:absolute; top:37%; left:40%; width:41.45%;} #conPC .sec05_img .layericon03 p{font-family: 'Pretendard'; color: #000; font-size: 0.9vw; line-height:1.6vw; letter-spacing:-0.01vw; } #conPC .sec05_img .layericon03 b{color: #c8231e; font-weight:bold; } #conPC .sec05_img .layericon04 {position:absolute; top:62%; left:38%; width:11.75%;} #conPC .sec05_img .layericon04-1 {position:absolute; top:64.4%; left:40%; width:19.35%;} #conPC .sec05_img .layericon04-1 p {font-size: 4.5vw; font-weight:900; color:#c8231e; font-family: 'Pretendard'; } #conPC .sec05_img .layericon05 {position:absolute; top:62%; left:53%; width:11.75%;} #conPC .sec05_img .layericon05-1 {position:absolute; top:64.4%; left:55%; width:19.35%;} #conPC .sec05_img .layericon05-1 p {font-size: 4.5vw; font-weight: 900; color:#c8231e; font-family: 'Pretendard'; } #conPC .sec05_img .layericon06 {position:absolute; top:62%; left:69%; width:11.75%;} #conPC .sec05_img .layericon06-1 {position:absolute; top:64.4%; left:69%; width:19.35%;} #conPC .sec05_img .layericon06-1 p {font-size: 4.5vw; font-weight: 900; color:#c8231e; font-family: 'Pretendard'; } #conPC .sec05_img .layericon07{position:absolute; top:80.8%; left:37.05%; width:63%;} #conPC .sec05_img .layericon07 .btn_next {position: absolute; top: 53%; right: 2%; cursor: pointer; transform: translateY(-50%); z-index: 99999;} #conPC .sec05_img .layericon07 .btn_prev {position: absolute; top: 53%; left: 2%; cursor: pointer; transform: translateY(-50%); z-index: 99999;} #conPC .sec05_img .layericon-light {position:absolute; top:1.3%; left:0%; width:100%;} #conPC .sec05_img .layericon-light img { filter: brightness(60%); animation: flicker 1s linear alternate infinite; } #conPC .sec_06 { border-bottom: 1px solid #ddd; background: #1a1a1a; padding: 20px 60px; box-sizing: border-box; cursor: pointer; transition: background 0.3s; text-align:center;} #conPC .sec_06:hover{ background: #222; } #conPC .sec_06 h2 { margin: 0; font-size: 3vw; color: #fff; font-weight: 900; font-family: 'Pretendard'; } /* 이미지 스타일 */ #conPC .sec_06 .content img { margin-top: 2%; width: 66.65%; } /* .sec_06 및 .subaccordion 기본 스타일 */ #conPC .sec_06 .content, #conPC .sec_06 .subaccordion { height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.4s ease; width: 100%; } /* 열렸을 때 content 보이기 */ #conPC .sec_06.open .content { opacity: 1; height: auto; padding-top: 20px; /* 원하는 패딩값 */ padding-bottom: 20px; /* 원하는 패딩값 */ } /* 아이콘은 기본 숨김, 열렸을 때만 보이게 */ #conPC .sec_06 .layericon { display: none; cursor: pointer; } #conPC .sec_06.open .layericon { display: block; } /* 서브 아코디언 열릴 때만 보이기 */ #conPC .sec_06 .subaccordion.open { opacity: 1; height: auto; padding-top: 10px; /* 서브 아코디언 열릴 때의 padding 값 */ padding-bottom: 10px; margin-top: 10px; display: block; } /* 서브 아코디언 이미지 크기 */ #conPC .sec_06 .content .subcontent img { width: 100%; } #conPC .sec_06 .subaccordion.active .subcontent { max-height: none; /* max-height을 자동으로 조정 */ } .section.sec_06 { overflow-anchor: none; } #conPC .sec_06 .content .layericon00 {position:absolute; top:90%; left:36.5%; width:26.7%;} #conPC .sec_06 .content .layericon01 {position:absolute; top:12%; left:15%; width:18.7%;} #conPC .sec_06 .content .layericon01 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conPC .sec_06 .content .layericon02 {position:absolute; top:12%; left:15%; width:18.7%;} #conPC .sec_06 .content .layericon02 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conPC .sec_06 .content .layericon03 {position:absolute; top:12%; left:15%; width:18.7%;} #conPC .sec_06 .content .layericon03 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conPC .sec_06 .content .layericon04 {position:absolute; top:12%; left:15%; width:18.7%;} #conPC .sec_06 .content .layericon04 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conPC .sec_06 .content .layericon05 {position:absolute; top:12%; left:15%; width:18.7%;} #conPC .sec_06 .content .layericon05 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conPC .sec_06 .content .layericon06 {position:absolute; top:12%; left:15%; width:18.7%;} #conPC .sec_06 .content .layericon06 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conPC .sec06_img {position:relative; } #conPC .sec06_img .layericon01 {position:absolute; top:25%; left:16%; width:36.5%;} #conPC .sec06_img .layericon02 {position:absolute; top:-12%; left:56%; width:20%;} #conPC .sec06_img .layericon03 {position:absolute; bottom:0%; left:73%; width:15.8%;} #conPC .sec_07 { background-color:#f1f1f1;} #conPC .sec07_img {position:relative; background-color:#f1f1f1;} #conPC .sec07_img .layericon01 {position:absolute; top:100px; left:0%; width:100%; text-align:center;} #conPC .sec07_img .layericon01 p{font-family: 'Pretendard'; color: #c8231e; font-size: 2.5vw; font-weight: 900; font-style: italic; line-height:1em;} #conPC .sec08_img {position:relative;} #conPC .sec08_img .layericon01 {position:absolute; border:1px solid #ddd; width:100%; height:405px;} #conPC .sec08-1_img {position:relative;} #conPC .sec08-1_img .layericon01 {position:absolute; top:23%; width:100%; text-align:center;} #conPC .sec08-1_img .layericon01 p{font-family: 'Pretendard'; color: #ffe9e9; font-size: 1vw; } /* family */ #conPC .sec09_img {position:relative;} #conPC .sec09_img .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conPC .sec09_img .layericon02 {position:absolute; top:35%; left:0%; text-align:center; width:100%} #conPC .sec09_img .layericon02 p{font-family: 'Pretendard'; color: #fff; font-size: 2vw; font-weight: 900; font-style: italic; line-height: 2.5vw; } #conPC .sec09_img .layericon02 .red { color: #c8231e; font-weight: 900; } #conPC .image-hover-box { position: relative; width: 100%; /* 원하는 크기로 조정 */ height:100%; overflow: hidden; } #conPC .image-hover-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s ease-in-out;} #conPC .image-hover-box .img-hover { opacity: 0; z-index: 1; } #conPC .image-hover-box:hover .img-hover { opacity: 1; } #conPC .image-hover-box:hover .img-default { opacity: 0; } #conPC .sec09-1_img {position:relative;} #conPC .sec09-1_img .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conPC .sec09-2_img {position:relative;} #conPC .sec09-2_img .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conPC .sec09-3_img {position:relative;} #conPC .sec09-3_img .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conPC .sec09-4_img {position:relative;} #conPC .sec09-4_img .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conPC .sec09-5_img {position:relative;} #conPC .sec09-5_img .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conPC .sec09-6_img {position:relative;} #conPC .sec09-6_img .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conPC .sec09-7_img {position:relative;} #conPC .sec09-7_img .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conPC .sec10_img {position:relative;} #conPC .sec10_img .layericon-video {position: absolute; top: 0%; width: 100%; left: 0%; } #conPC .sec10_img .layericon-video .video_bg {overflow: hidden; position: relative; width: 100%; padding-bottom: 56.25%; /* filter: brightness(40%); */} #conPC .sec10_img .layericon-video .video_bg iframe { position: absolute; top: -60px; bottom: -60px; left: 0; width: 100%; height: calc(100% + 120px); border: none;} #conPC .sec10-1_img .layericon01 {position:absolute; top:22%; left:18%; width:11.45%;} #conPC .sec10-1_img .layericon01 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conPC .sec10-1_img .layericon02 {position:absolute; top:22%; left:44.5%; width:11.45%;} #conPC .sec10-1_img .layericon02 img {animation: updown 1.4s ease-in-out infinite alternate both;animation: updown 1.4s ease-in-out infinite alternate both;} #conPC .sec10-1_img .layericon03 {position:absolute; top:22%; right:18%; width:11.45%;} #conPC .sec10-1_img .layericon03 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conPC .sec10-2_img {position:relative;} #conPC .sec10-2_img img.opac {opacity:1; cursor:pointer;} #conPC .sec10-2_img img.opac:hover {transition: 1s ease-out; filter: brightness(0.5);} #conPC .sec10-2_img img.opac:not(:hover) {transition: 1s ease-out; } #conPC .sec10-2_img .layericon01 {position:absolute; top:8%; left:23%; width:12%;} #conPC .sec10-2_img .layericon02 {position:absolute; top:8%; left:37%; width:12%;} #conPC .sec10-2_img .layericon03 {position:absolute; top:8%; left:51%; width:12%;} #conPC .sec10-2_img .layericon04 {position:absolute; top:8%; left:65%; width:12%;} #conPC .sec10-2_img .layericon05 {position:absolute; top:36%; left:23%; width:12%;} #conPC .sec10-2_img .layericon06 {position:absolute; top:36%; left:37%; width:12%;} #conPC .sec10-2_img .layericon07 {position:absolute; top:36%; left:51%; width:12%;} #conPC .sec10-2_img .layericon08 {position:absolute; top:36%; left:65%; width:12%;} #conPC .sec10-2_img .layericon09 {position:absolute; top:64%; left:23%; width:12%;} #conPC .sec10-2_img .layericon10 {position:absolute; top:64%; left:37%; width:12%;} #conPC .sec10-2_img .layericon11 {position:absolute; top:64%; left:51%; width:12%;} #conPC .sec10-2_img .layericon12 {position:absolute; top:64%; left:65%; width:12%;} #conPC .sec10-3_img {position:relative;} #conPC .sec10-3_img .layericon01 {position:absolute; top:26%; left:24%; width:30.6%;} #conPC .sec10-3_img .layericon02 {position:absolute; top:26%; left:56%; width:20%;} #conPC .sec10-3_img .layericon03 {position:absolute; top:62%; left:24%; width:30.6%;} #conPC .sec10-3_img .layericon04 {position:absolute; top:62%; left:40%; width:14.7%;} #conPC .sec10-3_img .layericon05 {position:absolute; top:75%; left:56%; width:20%;} #conPC .sec10-4_img {position:relative;} #conPC .sec10-4_img .layericon01 {position:absolute; top:26%; left:24%; width:30.6%;} #conPC .sec11_img {position:relative;} #conPC .sec11_img .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conPC .sec11_img .layericon02 {position:absolute; top:35%; left:0%; text-align:center; width:100%} #conPC .sec11_img .layericon02 p{font-family: 'Pretendard'; color: #fff; font-size: 2vw; font-weight: 900; font-style: italic; line-height: 2.5vw; } #conPC .sec11_img .layericon02 .red { color: #c8231e; font-weight: 900; } #conPC .sec11-1_img {position:relative;} #conPC .sec11-1_img img.opac {opacity:1;} #conPC .sec11-1_img img.opac:hover {transition: 1s ease-out; filter: brightness(0.5);} #conPC .sec11-1_img img.opac:not(:hover) {transition: 1s ease-out; } #conPC .sec11-1_img .layericon01 {position:absolute; top:8%; left:29%; width:41.65%; } #conPC .sec11-1_img .layericon01 .btn_next {position: absolute; top: 53%; right: 2%; cursor: pointer; transform: translateY(-50%); z-index: 99999;} #conPC .sec11-1_img .layericon01 .btn_prev {position: absolute; top: 53%; left: 2%; cursor: pointer; transform: translateY(-50%); z-index: 99999;} #conPC .sec11-1_img .layericon02 {position:absolute; top:58%; left:29%; width:20.3%; } #conPC .sec11-1_img .layericon03 {position:absolute; top:58%; left:50.3%; width:20.3%;} #conPC .sec12_img {position:relative;} #conPC .sec12_img .layericon01 {position:absolute; top:26%; left:29%; width:46.05%;} #conPC .sec13_img {position:relative;} #conPC .sec13_img img.opac {-webkit-transform: scale(1); transform: scale(1); -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;} #conPC .sec13_img img.opac:hover {-webkit-transform: scale(1.1); transform: scale(1.1);} #conPC .sec13_img .layericon01 {position:absolute; top:34%; left:0%; width:20%; overflow:hidden;} #conPC .sec13_img .layericon02 {position:absolute; top:34%; left:20%; width:20%; overflow:hidden;} #conPC .sec13_img .layericon03 {position:absolute; top:34%; left:40%; width:20%; overflow:hidden;} #conPC .sec13_img .layericon04 {position:absolute; top:34%; left:60%; width:20%; overflow:hidden;} #conPC .sec13_img .layericon05 {position:absolute; top:34%; right:0%; width:20%; overflow:hidden;} #conPC .sec13_img .layericon06 {position:absolute; top:80%; left:35%; width:31.05%;} #conPC .sec14_img {position:relative;} #conPC .sec14_img img.opac {opacity:1;} #conPC .sec14_img img.opac:hover {transition: 1s ease-out; filter: brightness(1.3);} #conPC .sec14_img img.opac:not(:hover) {transition: 1s ease-out; } #conPC .sec14_img .layericon01 {position:absolute; top:5%; left:51%; width:30.1%;} #conPC .sec14_img .layericon02 {position:absolute; top:29%; left:17%; width:30.1%;} #conPC .sec14_img .layericon03 {position:absolute; top:53%; left:51%; width:30.1%;} #conPC .sec14_img .layericon04 {position:absolute; bottom:0; left:6%; width:43.35%;} #conPC .sec15_img {position:relative;} #conPC .sec15_img .layericon01 {position:absolute; top:34%; left:0%; width:100%;} #conPC .sec15_img .layericon01 b {font-family:'Pretendard'; font-size:1vw; color:#fff;} #conPC .sec15_img .layericon02 {position:absolute; top:30%; left:41%; width:17.7%;} #conPC .sec15_img .layericon03 {position:absolute; top:30%; left:41.3%; width:17.45%;} #conPC .secfooter_img {position:relative; background-color:#3c3c3c;} #conPC .secfooter_img .layericon01 {position:absolute; top:20%; left:25%; width:100%;} #conPC .secfooter_img .layericon01 p {font-family:'Pretendard'; font-size:1vw; color:#e8e8e8; line-height:1vw;} #conPC .secfooter_img .layericon01 p img {width:1%; vertical-align:sub;} #conPC .secfooter_img .layericon01 b {font-weight:700; color:#f3f3f3;} #conPC .secfooter_img .layericon02 {position:absolute; top:20%; left:54%; width:100%;} #conPC .secfooter_img .layericon02 p {font-family:'Pretendard'; font-size:1vw; color:#e8e8e8; line-height:1vw;} #conPC .secfooter_img .layericon02 p img {width:1%; vertical-align:sub;} #conPC .secfooter_img .layericon02 b {font-weight:700; color:#f3f3f3;} #conPC .secfooter_img .layericon03 {position:absolute; top:20%; left:67%; width:100%;} #conPC .secfooter_img .layericon03 p {font-family:'Pretendard'; font-size:1vw; color:#e8e8e8; line-height:1vw;} #conPC .secfooter_img .layericon03 p img {width:1%; vertical-align:sub;} #conPC .secfooter_img .layericon03 b {font-weight:700; color:#f3f3f3;} #conPC .sec20_img {position:relative;} #conPC .sec20_img .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conPC .sec20_img .layericon01 .btn_next {position: absolute; top: 50%; right: 15%; cursor: pointer; transform: translateY(-50%); z-index: 99999;} #conPC .sec20_img .layericon01 .btn_prev {position: absolute; top: 50%; left: 15%; cursor: pointer; transform: translateY(-50%); z-index: 99999;} #conPC .sec20_img .layericon01 .benefit .swiper-pagination { margin-bottom:2%;} #conPC .sec20_img .layericon01 .benefit .swiper-pagination-bullet {background-color: #f7b500; opacity: 1; width: 12px; height: 12px;} #conPC .sec20_img .layericon01 .benefit .swiper-pagination-bullet-active {background-color:#fff; opacity:1;} #conPC .seccomplete_img {position:relative;} #conPC .seccomplete_img .layericon01 {position:absolute; top:75%; left:37%; width:25.55%;} #conPC .swiper-button-prev:after, #conPC .swiper-button-next:after {display:none;} #conPC .sec_enquire_img .layericon01 {position:absolute; top:13%; width:100%; text-align:center; color:#c8231e; font-weight:900; font-style:italic;} #conPC .sec_enquire_img .layericon02 {position:absolute; top:19%; width:100%; text-align:center; color:#3c3c3c; font-weight:900; font-style:italic;} #conPC .sec_enquire_img .layericon02 b {color:#c8231e;} #conPC .sec_enquire_img .layericon03 {position:absolute; top:28%; width:100%; text-align:center; color:#3c3c3c;} #conPC .sec_enquire .dbform {position:absolute; top:36%; left:29%; transform:none; width:46%;} #conPC .sec_enquire .dbform form > ul > li div {font-size:0;} #conPC .sec_enquire .dbform form > ul > li div > span {font-size:1.72vw;} #conPC .sec_enquire .dbform form > ul > li div > span:first-child {width:1%; margin-left:0; text-indent: -9999px; } #conPC .sec_enquire .dbform form > ul > li div > span:last-child {overflow:hidden; width:90%; margin-left:0;} #conPC .sec_enquire .dbform form > ul > li div > .ghpeople_inner {} #conPC .sec_enquire .dbform form > ul > li div > .ghpeople_inner span.ghpeople {} #conPC .sec_enquire [class*="customcheck"] ~ .icon {border:1px solid #dfdfdf; background-color:#e7ebe4; border-radius:10px;} #conPC .sec_enquire .input-control { border:1px solid #dfdfdf; background-color:#fff; font-size:1vw; font-weight:400; color:#6f6f6f; } #conPC .sec_enquire .input-control:checked {padding-right: 10px;} #conPC .sec_enquire .dbform .agreebox {margin:0; padding-left:26%; } #conPC .sec_enquire .dbform .agreebox [class*="customcheck"] ~ .text {margin-left:1%; font-size:0.8vw;} #conPC .sec_enquire .dbform .agreebox .btn2 {font-size: 15px; background-color: rgb(0,0,0,1); color: #fff; line-height:30px; padding:0 10px; border-radius: 20px; cursor:pointer; margin-left:2%; vertical-align:middle;} #conPC .sec_enquire .dbform form > ul > li {margin-bottom:1%; padding:0;} #conPC .sec_enquire .dbform form > ul > li div > span {padding:0;} #conPC .sec_enquire .dbform .agreebox .show-policy {font-size:0.8vw;} #conPC .sec_enquire .dbform .submitbox {overflow:hidden; width:100%; height:auto; float:left;text-align:left; padding-left:30%; margin-top:1%;} #conPC .sec_enquire .dbform .submitbox button {width:31.65%; height:auto; vertical-align:bottom;} #conPC .sec_enquire .dbform .submitbox a img {width:58%; height:auto;} #conPC .sec_enquire .dbform select {background: url(/contents/images/pc/arow.png) no-repeat 95% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color:#fff;} #conPC .privacy_con_box .inner {border-radius:10px;} #conPC .privacy_con_box .inner p {width:auto;} #conPC .qna {position:absolute; top:73%; left:50%; transform:translate(-50%, -50%);} #conPC .qna ul{width:1000px; list-style:none; border-top:1px solid #dbc4a8;} #conPC .qna ul li{border-top:1px solid #dbc4a8 ;margin-bottom:10px;} #conPC .qna ul li:first-child{border:0 none;} #conPC .qna ul li a{height:60px; line-height:60px; display:block; text-decoration:none; color:#000;} #conPC .qna ul li p{color:#f00;} @media only screen and (min-width : 1920px) { #conPC h2 {font-family:'Pretendard'; font-size:3em;} #conPC h3 {font-family:'Pretendard'; font-size:2em;} #conPC p {font-family:'Pretendard'; font-size:18px;} #conPC .secfooter_img .layericon01 p{font-size:16px;} #conPC .secfooter_img .layericon02 p{font-size:16px;} #conPC .secfooter_img .layericon03 p{ font-size:16px;} #conPC .sec02_img .layericon01 p{font-size: 3rem;} #conPC .sec02_img .layericon02 p{font-size: 3rem;} #conPC .sec02_img .layericon02 p b{font-size: 3rem; } #conPC .sec02_img .layericon03 p{font-size: 26px;} #conPC .sec03_img p {font-size: 24px;} #conPC .sec04_img .layericon03 p {font-size: 26px;} #conPC .sec04_img .layericon04 p {font-size: 26px;} #conPC .sec05_img .layericon02 p{font-size: 4rem;} #conPC .sec05_img .layericon03 p{font-size: 20px; } #conPC .sec05_img .layericon04-1 p {font-size: 5rem; } #conPC .sec05_img .layericon05-1 p {font-size: 5rem; } #conPC .sec05_img .layericon06-1 p {font-size: 5rem; } #conPC .sec08-1_img .layericon01 p{font-size: 16px; } #conPC .pc_fixedtop {height:490px;} #conPC .pc_fixedtop .agreebox {top:206px; position:absolute; left:19%;} #conPC .pc_fixedtop .dbform_fix {top:160px;} #conPC .pc_fixedtop .agreebox .text {font-size:14px;} #conPC .pc_fixedtop .dbform_fix .db_list li input {font-size:18px;} #conPC .pc_fixedtop .dbform_fix .db_list li .input-control {padding:6px; height:44px; border-radius:16px;} #conPC .pc_fixedtop .dbform_fix .db_list select {background: url(/contents/images/pc/arow.png) no-repeat 95% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color:#fff;} #conPC .sec01_img .layericon01 p{font-size: 8.45em; line-height:120px;} #conPC .zoomSlide .swiper-button-next {width:87px; height:87px;} #conPC .zoomSlide .swiper-button-prev {width:87px; height:87px;} #conPC .video {left:228px;} #conPC .review_img .layericon01 {top:0px; left:0; width:100%;} #conPC .review_img .layericon02 {top:0px; right:0; width:100%;} #conPC .sec_enquire .dbform form > ul > li {margin-bottom:1.5%;} #conPC .sec_enquire .dbform form > ul > li div > span {font-size:20px;} #conPC .sec_enquire .dbform .agreebox .show-policy {font-size:14px;} #conPC .sec_enquire .dbform .agreebox [class*="customcheck"] ~ .text {font-size:14px;} #conPC .sec_enquire .input-control {font-size:16px;} } @media screen and (max-width: 1600px) { #conPC .sec_enquire .dbform {top:36.5%; } #conPC .dbform form > ul > li div textarea[type=text] {height:80px;} } @media screen and (max-width: 1200px) { #conPC .sec_enquire .dbform {top:30%; } #conPC .sec_enquire_img .layericon01 { top:10%; width:100%; } #conPC .sec_enquire_img .layericon02 { top:16%; width:100%; } #conPC .sec_enquire_img .layericon03 { top:23%; width:100%; } #conPC .dbform form > ul > li div textarea[type=text] {height:80px;} } @media screen and (min-width: 2000px) { #conPC .sec05_img .layericon01-1 {top:36.7%;} #conPC .sec05_img .layericon01-1 p {font-size:2.3vw; font-weight:bold;} #conPC .sec05_img .layericon02-1 {top:36.7%;} #conPC .sec05_img .layericon02-1 p {font-size:2.3vw; font-weight:bold;} } @keyframes rotate_image{ 100% { transform: rotate(360deg); } } /*** [Pc] --/end/-- ***/ /*** [Mobile] --/start/-- ***/ #conMobile {opacity:0;visibility:hidden;position:fixed;top:0;left:100%;width:100%;transition:all .6s cubic-bezier(0.785, 0.135, 0.15, 0.86);-webkit-transition:all .6s cubic-bezier(0.785, 0.135, 0.15, 0.86);} #conMobile img {width:100%;} #conMobile .mo_lodingwrap {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;background:rgba(0,0,0,.5);} #conMobile .mo_fixedbar {position:fixed;left:0;z-index:10;width:100%;transition:all .6s cubic-bezier(0.785, 0.135, 0.15, 0.86);-webkit-transition:all .6s cubic-bezier(0.785, 0.135, 0.15, 0.86);overflow:hidden;background:url('../images/') center bottom / cover no-repeat;} #conMobile .mo_fixedbar.top {top:0;} #conMobile .mo_fixedbar.bottom {bottom:0;} #conMobile .mo_fixedbar.hidden {} #conMobile .mo_fixedbar .layerlink01 {display:block;width:0;height:100%;top:0;left:0%;} #conMobile .mo_fixedbar .layerlink02 {display:block;width:0;height:100%;top:0;right:0%;} #conMobile .fixed_btn {position:fixed;bottom:20vw;right:5%;z-index:9999; width:15%; display:block;} #conMobile .fixed_top {position:fixed;bottom:7vw;right:4.5%;z-index:9999; width:16%; display:block;} #conMobile .fixed_kakao {position:fixed;bottom:126px;right:4%;z-index:9999; width:70px;} #conMobile .fixed_blog {position:fixed;bottom:56px;right:4%;z-index:9999; width:70px;} html.open { overflow: hidden; } .mbtn, .mclose { width: 50px; height: 50px; position: fixed; top: 20px; right: 20px; background-size: 50%; background-repeat: no-repeat; background-position: center; cursor: pointer; z-index: 10001; } .mbtn { background-image: url("https://realhome.cafe24.com/xover/contents/img/mobile/menu.png"); display: block; } .mclose { background-image: url("../img/mobile/close.png"); display: none; } html.open .mbtn { display: none; } html.open .mclose { display: block; } #menu { position: fixed; top: 0; right: -250px; width: 250px; height: 100%; background: #fff; z-index: 10000; padding-top: 60px; transition: right 0.3s ease; box-shadow: -3px 0 6px rgba(0,0,0,0.2); background: rgba(0, 0, 0, 0.8); } #menu.open { right: 0; } .page_cover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 9999; display: none; } .page_cover.open { display: block; } #menu .nav { padding: 0; margin: 0; list-style: none; } #menu .nav li { text-align: left; } #menu .nav li a { display: block; padding: 15px 20px; color: #fff; text-decoration: none; font-size: 1.3rem; font-weight: 900; } @media screen and (max-width: 1100px) { .mbtn { display: block; } header .ancher-btn { display: none; /* 모바일에서 기존 상단 메뉴 숨기기 */ } } /* Mobile섹션 */ #conMobile .section01 {} #conMobile .section01 .layericon01 {position:absolute; top:78%; left:5%; width:100%; } #conMobile .section01 .layericon01 p{font-family: 'Pretendard'; color: #fff; font-size: 4vw; font-weight: 900; font-style: italic; line-height: 4vw; opacity:0.7; } #conMobile .section01 .layericon01 .red { color: #c8231e; font-weight: 900; } #conMobile .section01 .layericon02 {position:absolute; top:0%; left:0%; width:100%} #conMobile .section01 .layericon02 p{font-family: 'Pretendard'; color: #fff; font-size: 7vw; font-weight: 900; font-style: italic; line-height: 6vw; } #conMobile .section01 .layericon-video {position: absolute; top: 0%; width: 100%; left: 0%; } #conMobile .section01 .layericon-video .video_bg {overflow: hidden; position: relative; width: 100%; padding-bottom: 56.25%; /* filter: brightness(40%); */} #conMobile .section01 .layericon-video .video_bg iframe { position: absolute; top: -60px; bottom: -60px; left: 0; width: 100%; height: calc(100% + 120px); border: none;} #conMobile .section02 {} #conMobile .section02 {position:relative;} #conMobile .section02 .layericon01 {position:absolute; top:24%; width:100%; text-align:center;} #conMobile .section02 .layericon01 p{font-family: 'Pretendard'; color: #fff; font-size: 6vw; } #conMobile .section02 .layericon02 {position:absolute; top:32%; width:100%; text-align:center;} #conMobile .section02 .layericon02 p{font-family: 'Pretendard'; color: #fff; font-size: 6vw; font-weight:700;} #conMobile .section02 .layericon02 p b{font-family: 'Pretendard'; color: #fff; font-size: 6vw; font-weight:700;} #conMobile .section02 .layericon03 {position:absolute; top:48%; width:100%; text-align:center;} #conMobile .section02 .layericon03 p{font-family: 'Pretendard'; color: #c8231e; font-size: 6vw; font-weight:700; font-style:italic; } #conMobile .section02 .layericon04 {position:absolute; top:55%; width:100%; text-align:center;} #conMobile .section02 .layericon04 p{font-family: 'Pretendard'; color: #fff; font-size: 7vw; font-weight: 900; font-style: italic; line-height:7vw;} #conMobile .section02 .layericon04 b{color: #fff; } #conMobile .section03 {} #conMobile .section03 p {font-family: Pretendard; color: #fff; font-size: 4vw; } #conMobile .section03 b {color:#c8231e; font-weight:900;} #conMobile .section03 .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conMobile .section03 .layericon02 {position:absolute; top:0%; right:0%; width:50%;} #conMobile .section03 .layericon03 {position:absolute; top:27%; left:12%; width:100%;} #conMobile .section03 .layericon04 {position:absolute; top:32%; left:12%; width:100%;} #conMobile .section03 .layericon05 {position:absolute; top:37%; left:12%; width:100%;} #conMobile .section03 .layericon06 {position:absolute; top:42%; left:12%; width:100%;} #conMobile .section03 .layericon07 {position:absolute; top:55%; left:12%; width:100%;} #conMobile .section03 .layericon08 {position:absolute; top:61%; left:12%; width:100%;} #conMobile .section03 .layericon09 {position:absolute; top:66%; left:12%; width:100%;} #conMobile .section04 {} #conMobile .section04 .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conMobile .section04 .layericon01 img { filter: brightness(60%); animation: flicker 2s linear alternate infinite; } #conMobile .section04 .layericon02 {position:absolute; top:28%; left:0%; width:100%; text-align:center;} #conMobile .section04 .layericon02 p{font-family: 'Pretendard'; color: #fff; font-size: 9vw; font-weight: 900; font-style: italic;} #conMobile .section04 .layericon02 .black {color:#000; font-weight: 900;} #conMobile .section04 .layericon03 {position:absolute; top:51%; left:0%; width:100%; text-align:center;} #conMobile .section04 .layericon03 p{font-family: 'Pretendard'; color: #fff; font-size: 3.5vw; } #conMobile .section04 .layericon04 {position:absolute; top:56%; left:0%; width:100%; text-align:center;} #conMobile .section04 .layericon04 p{font-family: 'Pretendard'; color: #fff; font-size: 3.5vw; font-weight: 900; } #conMobile .section04 .layericon05 {position:absolute; top:65%; left:0%; width:100%;} #conMobile .section05 {} #conMobile .section05 .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conMobile .section05 .layericon02 {position:absolute; top:29%; left:8%; width:100%;} #conMobile .section05 .layericon02 p{font-family: 'Pretendard'; color: #fff; font-size: 7vw; font-weight: 900; font-style: italic; line-height:1em;} #conMobile .section05 .layericon02 b{color: #c8231e;} #conMobile .section05 .layericon03 {position:absolute; top:39%; left:8%; width:100%;} #conMobile .section05 .layericon03 p{font-family: 'Pretendard'; color: #fff; font-size: 3.5vw; line-height:5vw; letter-spacing:-0.01vw; } #conMobile .section05 .layericon03 b{color: #c8231e; font-weight:bold; } #conMobile .section05 .layericon04 {position:absolute; top:72%; left:0%; width:100%;} #conMobile .section05 .layericon04-1 {position:absolute; top:76.4%; left:8%; width:100%;} #conMobile .section05 .layericon04-1 p {font-size: 9vw; font-weight:900; color:#c8231e; font-family: 'Pretendard'; } #conMobile .section05 .layericon05 {position:absolute; top:72%; left:0%; width:100%;} #conMobile .section05 .layericon05-1 {position:absolute; top:76.4%; left:37%; width:100%;} #conMobile .section05 .layericon05-1 p {font-size: 9vw; font-weight: 900; color:#c8231e; font-family: 'Pretendard'; } #conMobile .section05 .layericon06 {position:absolute; top:72%; left:0%; width:100%;} #conMobile .section05 .layericon06-1 {position:absolute; top:76.4%; left:69%; width:100%;} #conMobile .section05 .layericon06-1 p {font-size: 9vw; font-weight: 900; color:#c8231e; font-family: 'Pretendard'; } #conMobile .section05 .layericon07{position:absolute; top:87.4%; left:-10%; width:120%;} #conMobile .section05 .layericon07 .btn_next {position: absolute; top: 53%; right: 12%; cursor: pointer; transform: translateY(-50%); z-index: 99999;} #conMobile .section05 .layericon07 .btn_prev {position: absolute; top: 53%; left: 12%; cursor: pointer; transform: translateY(-50%); z-index: 99999;} #conMobile .section06 {} #conMobile .section06 { border-bottom: 1px solid #ddd; background: #1a1a1a; padding: 2% 2%; box-sizing: border-box; cursor: pointer; transition: background 0.3s; text-align:center;} #conMobile .section06:hover{ background: #222; } #conMobile .section06 h2 { margin: 0; font-size: 7vw; color: #fff; font-weight: 900; font-family: 'Pretendard'; } /* 이미지 스타일 */ #conMobile .section06 .content img { margin-top: 2%; width: 100%; } /* .sec_06 및 .subaccordion 기본 스타일 */ #conMobile .section06 .content, #conMobile .section06 .subaccordion { height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; opacity: 0; transition: height 0.5s ease, padding 0.5s ease, opacity 0.4s ease; width: 100%; } /* 열렸을 때 content 보이기 */ #conMobile .section06.open .content { opacity: 1; height: auto; padding-top: 2%; /* 원하는 패딩값 */ padding-bottom: 2%; /* 원하는 패딩값 */ } /* 아이콘은 기본 숨김, 열렸을 때만 보이게 */ #conMobile .section06 .layericon { /*display: none;*/ cursor: pointer; } #conMobile .section06 .open .layericon { display: block; } /* 서브 아코디언 열릴 때만 보이기 */ #conMobile .section06 .subaccordion.open { opacity: 1; height: auto; padding-top: 10px; /* 서브 아코디언 열릴 때의 padding 값 */ padding-bottom: 10px; margin-top: 10px; display: block; } /* 서브 아코디언 이미지 크기 */ #conMobile .section06 .content .subcontent img { width: 100%; } #conMobile .section06 { overflow-anchor: none; } #conMobile .section06 .content .layericon00 {position:absolute; top:92%; left:20%; width:60%;} #conMobile .section06 .content .layericon01 {position:absolute; top:3%; left:0%; width:40%;} #conMobile .section06 .content .layericon01 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conMobile .section06 .content .layericon02 {position:absolute; top:3%; left:0%; width:40%;} #conMobile .section06 .content .layericon02 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conMobile .section06 .content .layericon03 {position:absolute; top:3%; left:0%; width:40%;} #conMobile .section06 .content .layericon03 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conMobile .section06 .content .layericon04 {position:absolute; top:3%; left:0%; width:40%;} #conMobile .section06 .content .layericon04 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conMobile .section06 .content .layericon05 {position:absolute; top:3%; left:0%; width:40%;} #conMobile .section06 .content .layericon05 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conMobile .section06 .content .layericon06 {position:absolute; top:3%; left:0%; width:40%;} #conMobile .section06 .layericon06 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conMobile .section07 {background-color:#f1f1f1;} #conMobile .section07 .layericon01 {width:100%;top:11vw; text-align:center;} #conMobile .section07 .layericon01 p{font-family: 'Pretendard'; color: #c8231e; font-size: 9vw; font-weight: 900; font-style: italic; line-height:1em;} /** subPortfolio * --------------------------------------- */ #conMobile section.subPortfolio {position: relative;margin-top:2vw;} #conMobile section.subPortfolio h2 {width:70%;margin:0 auto;padding-bottom:10%;} #conMobile section.subPortfolio h2 > img {width:100%;} #conMobile section.subPortfolio .port_txt { text-align:center; font-size: 3vw; color: #002530; padding-bottom:5%;} /** portfolio_mobile * --------------------------------------- */ #conMobile .portfolio_mobile {width:100%;margin:0 auto;text-align:left;} #conMobile .portfolio_mobile ul {font-size:0;} #conMobile .portfolio_mobile ul li {font-size:12px;display:inline-block;vertical-align:top;width:50%;} #conMobile .portfolio_mobile ul li > a {display:block;width:auto;margin:5px;position:relative;overflow:hidden;} #conMobile .portfolio_mobile ul li > a:before {content:'';display:block;position:absolute;top:0;bottom:0;width:100%;transition:all .35s;} #conMobile .portfolio_mobile ul li > a > img {max-width:100%;} #conMobile .portfolio_mobile ul li > a .text-box {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:100%;z-index:3;padding:20px 0;line-height:2;} #conMobile .portfolio_mobile ul li.active > a:before {background:rgba(0,0,0,.0);} #conMobile .portfolio_mobile ul li > a .text-box .sub {font-size:0;color:#fff;font-weight:900; font-family:'NotoKR';padding:5px;transition:all .35s;transform:translateY(0);opacity:1;} #conMobile .portfolio_mobile ul li > a .text-box .des {font-size:3vw;color:#edc900; font-family:'NanumSquare';padding:5px;transition:all .35s;transform:translateY(0);opacity:1;} #conMobile .portfolio_mobile ul li.active > a .text-box .sub {transform:translateY(-100%);opacity:0;} #conMobile .portfolio_mobile ul li.active > a .text-box .des {transform:translateY(100%);opacity:0;} #conMobile .portfolio_mobile .reallanding-more-btn {margin:30px auto 0;width:300px;height:30px;background:url('../img/pc/pf_btn.png') center no-repeat;text-align:center;transition:all .35s; /*display:none;*/ margin-bottom:5%;text-indent: -9999px;} #conMbbile .portfolio_mobile .reallanding-more-btn a {text-indent:-9999px;display:block;padding:10% 0;} #conMobile .video1 {position:absolute; top:66%; left:4%; width:92%; max-width:1024px; background-color:#000; z-index:10;} #conMobile .video1 .video-container {position:relative; padding-bottom:46.25%; padding-top:30px; height:0; overflow:hidden;} #conMobile .video1 iframe {position:absolute; top:0; left:0; width:100%; height:100%;} #conMobile .video_wrap {position:absolute; top:23%; left:5%; width:90%; border:0;} #conMobile .video_wrap li {position:relative; float:left; width:49%; margin:0 0.5% 9.7%;} #conMobile .video_wrap:after {content:''; display:block; clear:both;} #conMobile .video_wrap .video.size_2 {position:relative; top:0; bottom:auto; left:0; width:100%; max-width:438px;} #conMobile .video_wrap .video.size_2 .video-container {padding-top:0;} #conMobile .section08 {} #conMobile .section08 .layericon01 {position:absolute; border:1px solid #ddd; width:100%; height:405px;} #conMobile .section08 .map {overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } #conMobile .section08 .map iframe{left:0; top:0; height:100%; width:100%; position:absolute; } #conMobile .section08-1 { background-color:#cf273f;} #conMobile .section08-1 .layericon01 {position:absolute; top:20%; width:100%; text-align:center;} #conMobile .section08-1 .layericon01 p{font-family: 'Pretendard'; color: #ffe9e9; font-size: 4vw; } #conMobile .section09 {} #conMobile .section09 .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conMobile .section09 .layericon02 {position:absolute; top:45%; left:0%; text-align:center; width:100%} #conMobile .section09 .layericon02 p{font-family: 'Pretendard'; color: #fff; font-size: 9vw; font-weight: 900; font-style: italic; line-height: 9vw; } #conMobile .section09 .layericon02 .red { color: #c8231e; font-weight: 900; font-size: 7vw; } #conMobile .section09-1 {} #conMobile .section09-1 .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conMobile .section09-2 {} #conMobile .section09-2 .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conMobile .section09-3 {} #conMobile .section09-3 .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conMobile .section09-4 {} #conMobile .section09-4 .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conMobile .section09-5 {} #conMobile .section09-5 .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conMobile .section09-6 {} #conMobile .section09-6 .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conMobile .section09-7 {} #conMobile .section09-7 .layericon01 {position:absolute; top:0%; left:0%; width:100%;} #conMobile .section10 {} #conMobile .section10 .layericon-video {position: absolute; top: 0%; width: 100%; left: 0%; } #conMobile .section10 .layericon-video .video_bg {overflow: hidden; position: relative; width: 100%; padding-bottom: 56.25%; /* filter: brightness(40%); */} #conMobile .section10 .layericon-video .video_bg iframe { position: absolute; top: -60px; bottom: -60px; left: 0; width: 100%; height: calc(100% + 120px); border: none;} #conMobile .section10-1 {} #conMobile .section10-1 .layericon01 {position:absolute; top:13%; left:11%; width:36.25%;} #conMobile .section10-1 .layericon01 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conMobile .section10-1 .layericon02 {position:absolute; top:13%; right:11%; width:36.25%;} #conMobile .section10-1 .layericon02 img {animation: updown 1.4s ease-in-out infinite alternate both;animation: updown 1.4s ease-in-out infinite alternate both;} #conMobile .section10-1 .layericon03 {position:absolute; top:54%; left:32%; width:36.25%;} #conMobile .section10-1 .layericon03 img {animation: updown 1.2s ease-in-out infinite alternate both;animation: updown 1.2s ease-in-out infinite alternate both;} #conMobile .section10-2 {} #conMobile .section10-2 .layericon01 {position:absolute; top:4%; left:0%; width:100%;} #conMobile .section10-2 .layericon02 {position:absolute; top:27%; left:0%; width:100%;} #conMobile .section10-2 .layericon03 {position:absolute; top:50%; left:0%; width:100%;} #conMobile .section10-2 .layericon04 {position:absolute; top:73%; left:0%; width:100%;} #conMobile .section10-3 {} #conMobile .section10-3 .layericon01 {position:absolute; top:17%; left:0%; width:100%;} #conMobile .section10-3 .layericon02 {position:absolute; top:44%; left:0%; width:100%;} #conMobile .section10-3 .layericon03 {position:absolute; top:71%; left:0%; width:100%;} #conMobile .section10-4 {} #conMobile .section11 {} #conMobile .section11 .layericon01 {width:100%; bottom:0%; } #conMobile .section11 .layericon02 {position:absolute; top:45%; left:0%; text-align:center; width:100%} #conMobile .section11 .layericon02 p{font-family: 'Pretendard'; color: #fff; font-size: 9vw; font-weight: 900; font-style: italic; line-height: 9vw; } #conMobile .section11 .layericon02 .red { color: #c8231e; font-weight: 900; font-size: 7vw; } #conMobile .section11-1 {} #conMobile .section11-1 .layericon01 {width:94%; top :6%; left:3%; } #conMobile .section11-1 .layericon01 .btn_next {position: absolute; top: 53%; right: 2%; cursor: pointer; transform: translateY(-50%); z-index: 99999; width:5%;} #conMobile .section11-1 .layericon01 .btn_prev {position: absolute; top: 53%; left: 2%; cursor: pointer; transform: translateY(-50%); z-index: 99999; width:5%;} #conMobile .section11-1 .layericon02 {width:50%; top :58%; left:0%; } #conMobile .section11-1 .layericon03 {width:50%; top :58%; right:0%;} #conMobile .section12{} #conMobile .section12 .layericon01 {width:100%;top:38%; } #conMobile .section13 {} #conMobile .section13 .layericon01 {width:33.3%;top:29%;left:17%;} #conMobile .section13 .layericon02 {width:33.3%;top:29%;right:17%;} #conMobile .section13 .layericon03 {width:33.3%;top:54%;left:0%;} #conMobile .section13 .layericon04 {width:33.3%;top:54%;left:33.3%;} #conMobile .section13 .layericon05 {width:33.3%;top:54%;right:0%;} #conMobile .section13 .layericon06 {width:100%;top:83%;left:0%;} #conMobile .section14 {} #conMobile .section14 .layericon01 {width:100%; top:15%; left:0%;} #conMobile .section14 .layericon02 {width:100%; top:40%; left:0%;} #conMobile .section14 .layericon03 {width:100%; top:65%; left:0%;} #conMobile .section14 .layericon04 {width:100%; bottom:0%; left:0%;} #conMobile .section15 {} #conMobile .section15 .layericon01 {width:100%; top:33%; left:0%;} #conMobile .section15 .layericon02 {width:44%; top:30%; left:28%;} #conMobile .section15 .layericon03 {width:43%; top:30%; left:28.5%;} #conMobile .section16 {position:fixed;bottom:0; z-index:99;width:100%;height:auto;} #conMobile .section16 > a {width:60%;height:100%;display:inline-block;text-indent:-9999px;overflow:hidden;position:absolute;top:0;} #conMobile .section16 > a.layericon01 {left:0;} #conMobile .section16 > a.layericon02 {left:60%;} #conMobile .section17 {} #conMobile .section_complete {} #conMobile .section_complete .layericon01 {width:100%;top:78%;left:0%;} #conMobile .section_footer { background-color:#3c3c3c;} #conMobile .section_footer .layericon01 {position:absolute; top:14%; left:10%; width:100%;} #conMobile .section_footer .layericon01 p {font-family:'Pretendard'; font-size:3vw; color:#e8e8e8; line-height:4.5vw;} #conMobile .section_footer .layericon01 p img {width:3%; vertical-align:sub;} #conMobile .section_footer .layericon01 b {font-weight:700; color:#f3f3f3;} #conMobile .section_footer .layericon02 {position:absolute; top:57%; left:9%; width:100%;} #conMobile .section_footer .layericon02 p {font-family:'Pretendard'; font-size:3vw; color:#e8e8e8; line-height:4.5vw;} #conMobile .section_footer .layericon02 p img {width:3%; vertical-align:sub;} #conMobile .section_footer .layericon02 b {font-weight:700; color:#f3f3f3;} #conMobile .section_footer .layericon03 {position:absolute; top:57%; left:60%; width:100%;} #conMobile .section_footer .layericon03 p {font-family:'Pretendard'; font-size:3vw; color:#e8e8e8; line-height:4.5vw;} #conMobile .section_footer .layericon03 p img {width:3%; vertical-align:sub;} #conMobile .section_footer .layericon03 b {font-weight:700; color:#f3f3f3;} #conMobile .sec_enquire{background-color:#f8f8f8;} #conMobile .sec_enquire .layericon01 {position:absolute; top:5%; width:100%; text-align:center; color:#c8231e; font-weight:900; font-style:italic; font-family:'Pretendard'; font-size:7vw;} #conMobile .sec_enquire .layericon02 {position:absolute; top:11%; width:100%; text-align:center; color:#3c3c3c; font-weight:900; font-style:italic; font-family:'Pretendard'; font-size:7vw;} #conMobile .sec_enquire .layericon02 b {color:#c8231e;} #conMobile .sec_enquire .layericon03 {position:absolute; top:20%; width:100%; text-align:center; color:#3c3c3c; font-family:'Pretendard'; font-size:4vw;} /* mobile 폼 영역 */ #conMobile .mo_dbform {position:absolute;top:38%;left:50%;transform:translateX(-50%);width:90%;} #conMobile .mo_dbform .db_list {} #conMobile .mo_dbform .db_list li {width:100%;_margin-bottom:5px;padding:2.3% 0;} #conMobile .mo_dbform .db_list li:last-child {background:none;padding:2% 0;border:0;} #conMobile .mo_dbform .db_list li div > span {display:inline-block;vertical-align:middle;_font-size:1.4em;color:#000;} #conMobile .mo_dbform .db_list li div > span em {_color:#e41b23;} #conMobile .mo_dbform .db_list li div > span:first-child {width:1%;text-indent:-9999px;} #conMobile .mo_dbform .db_list li div > span:last-child {width:94%;text-align:left;} #conMobile .mo_dbform .db_list li div > span:last-child > span:last-child {width: 100%;margin-top: 6px;display: inline-block;border-radius: 0; -webkit-border-radius:0;} #conMobile .mo_dbform .db_list li .input-control {width:95%;background:#fff;padding:15px 10px;font-size:1em;border-radius:0; -webkit-border-radius:0;} #conMobile .mo_dbform .db_list li div select {background: url(/contents/images/mobile/arow.png) no-repeat 95% 50%; -webkit-appearance: none; -moz-appearance: none; appearance: none;} #conMobile .mo_dbform .db_list li div textarea {height:100px;} #conMobile .mo_dbform label {cursor:pointer;} #conMobile .mo_dbform .agreebox {text-align:center; } #conMobile .mo_dbform .agreebox .text {font-size:13px;} #conMobile .mo_dbform .agreebox .show-policy {color:#000;font-weight:bold;margin-left:3px;font-size:13px;vertical-align:middle} #conMobile .mo_dbform .submitbox {margin:6% auto 0;} #conMobile .mo_dbform .submitbox .mo_dbform_btn {width:100%;background:transparent;display:block;} #conMobile .mo_dbform input[type="checkbox"] {display:none;} #conMobile .mo_dbform div label {cursor:pointer;} #conMobile .privacy_con_box_m {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:999;display:none;} #conMobile .privacy_con_box_m .inner {position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;background:#fff;padding:40px;} #conMobile .privacy_con_box_m .inner h3 {font-weight:bold;padding-bottom:20px} #conMobile .privacy_con_box_m .inner p {width:90%;height:200px;overflow-y:scroll;border:1px solid #eee;padding:20px 5%;line-height:1.5em;} #conMobile .privacy_con_box_m .inner a {position:absolute;top:2%;right:2%;font-size:35px;display:inline-block;} #conMobile .privacy_con_box_m .inner a:before {content:' \00D7';color:#000;} #conMobile .mo_dbform input, #conMobile .mo_dbform textarea { -webkit-appearance: none; -webkit-border-radius: 0; } @media screen and (max-width: 768px) { #conMobile .mo_dbform .db_list li .input-control {padding:5px 10px;} } @media screen and (max-width: 414px) { #conMobile .mo_dbform .db_list li {padding:1.3% 0;} #conMobile .mo_dbform .db_list li .input-control {padding:3px 10px;font-size:15px;} #conMobile .section01 .mobileBanner .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {bottom:20px;} #conMobile .section01 .mobileBanner .swiper-pagination-bullet {width:10px;height:10px;margin:0 5px;} #conMobile .mo_fixedtop_height {height:8vh;} } @media screen and (max-width: 320px) { #conMobile .mo_dbform .db_list li {padding:0.9% 0;} #conMobile .mo_dbform .db_list li .input-control {font-size:12px;} } /*** [Mobile] --/end/-- ***/ @media screen and (max-width: 1100px) { #conPC {opacity:0;visibility:hidden;position:fixed;top:0;left:-100%;width:100%;} #conMobile {opacity:1;visibility:visible;position:relative;top:0;left:0;width:100%;} } /* s: mobile */ #conMobile img {width:100%; image-rendering: -webkit-optimize-contrast;} #conMobile .mo_fixedtop {position:fixed; top:auto; bottom:0; overflow:visible; width: 100%; z-index: 100;} #conMobile .mo_fixedtop .layerlink01 {position:absolute; top:15%; left:3%; width:10%; height:60%;} #conMobile .mo_fixedtop .layerlink01 a {width:100%; height:100%; display:block;} #conMobile .mo_fixedtop .layerlink02 {position:absolute; top:15%; right:3%; width:23%; height:60%;} #conMobile .mo_fixedtop .layerlink02 a {width:100%; height:100%; display:block;} #conMobile .mo_fixedtop .btn_home_mo {position:absolute; top:-18vw; right:4.84vw; width:13.87vw; height:13.87vw;} #conMobile .visual .layericon01 {width:100%; top:50%; left:50%; transform:translate(-50%, -50%);} #conMobile .visual .mobileBanner .swiper-pagination-fraction, #conMobile .mo_dbform {top:50.7vw;} #conMobile .mo_dbform .submitbox {width:52.8vw; } #conMobile .mo_dbform .db_list li {padding:1vw 0; padding-left:3%;} #conMobile .mo_dbform .db_list li .input-control {padding:2.7vw; background-color:#fff; font-size: 4vw; color:#000; } #conMobile .mo_dbform .db_list li:last-child {padding:3% 0 0;} #conMobile .mo_dbform [class*="customcheck"] ~ .icon {width:4.3vw; height:4.3vw; max-width:29px; max-height:29px; border:1px solid #063c42; background-color:#e7ebe4; border-radius:9px;} #conMobile .mo_dbform .agreebox .text {font-size:3.5vw; color:#333;} #conMobile .mo_dbform .agreebox .show-policy {font-size:3.5vw; color:#333;} @media screen and (max-width: 1300px) { #conPC .store2.store2_reposition { top: 25vw; } } @media screen and (max-width: 1100px) { #conMobile .zoomSlideM .zoom_btn {bottom:10vw;} #conMobile .portfolio_mobile .reallanding-more-btn{display: block !important;} } @media screen and (max-width: 700px) { #conMobile .zoomSlideM .zoom_btn {bottom:7vw;} } @media screen and (max-width: 420px) { #conMobile .store2M { top: 49%; } } @media screen and (max-width: 414px) { #conMobile .mo_fixedtop_height {height:auto;} #conMobile .visual .mobileBanner .swiper-pagination-fraction, #conMobile .swiper-pagination-custom, #conMobile .swiper-container-horizontal > .swiper-pagination-bullets {bottom: 50px;} } @keyframes flicker { 0% { filter: brightness(50%); } 100% { filter: brightness(100%); } } @keyframes elegantFadeUp { 0% { opacity: 0; transform: translateY(30px); filter: blur(4px); } 50% { opacity: 0.5; filter: blur(2px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } .elegant-fade-up { animation: elegantFadeUp 1.2s ease-out forwards; } @media screen and (max-width:978px){ #conMobile .portfolio_mobile .reallanding-more-btn{display: block !important;} #conMobile .portfolio_mobile .reallanding-more-btn .mobile{display: block;} .list_content > ul > li > a .text-box .sub {font-size:1.2em;} .list_content > ul > li {width:33.3%;} }