/* *************** booking custom *************** */ #bookArea .bookIns .fb_rsvn button {background: #2c4d2b!important;} .wings_select .minus {background: url(/ycp_common/images/homepage/common/minus.png) center center no-repeat;} .wings_select .plus {background: url(/ycp_common/images/homepage/common/plus.png) center center no-repeat;} /* *************** FULLPAGE CUSTOM *************** */ #fp-nav.right {right: 0;} #about_fullpage + div + #fp-nav {display: none;} /* *************** COMMON *************** */ .m_block {display: none;} .wrap1920 {width: 100%; margin: 0 auto;} .wrap1800 {width: 100%; padding: 0 3%; margin: 0 auto; overflow: hidden;} .wrap1700 {width: 100%; padding: 0 8%; margin: 0 auto;} .wrap1600 {width: 100%; padding: 0 5%; margin: 0 auto;} .wrap1500 {width: 100%; padding: 0 6%; margin: 0 auto;} .wrap1400 {width: 100%; padding: 0 7%; margin: 0 auto;} .wrap1200 {width: 100%; padding: 0 18.5%; margin: 0 auto;} .wrap_main {width: 100%; padding: 0 0 0 60px;} .wrapper {position: relative;} .btn_wrap{margin-top: 60px;} .btn_wrap a {padding: 25px 90px; font-size: 19rem; font-weight: 500; margin-right: 20px;} .btn_wrap a:last-child {margin-right: 0;} .btn_wrap a.btn1 {background: #355534; color: #fff;} .btn_wrap a.btn2 {border: 1px solid #355534; color: #355534;} /* *************** LOGO *************** */ .logo {width: 318px; height: 40px; position: absolute; top: 37px; left: 40px; z-index: 99;} #header .logo {background: url(/ycp_common/images/homepage/common/logo04.png) no-repeat; transition: all 0.4s ease-in-out;background-size: 250px 32px;} .quick_menu .logo {background: url(/ycp_common/images/homepage/common/logo.png) no-repeat;} /* *************** GNB *************** */ #header {position: fixed; top: 0; right: 0; left: 0; width: 100%; z-index: 9999;height: 110px;} #header.gnb_bg {min-height: 500px;} #header #gnbMenu {position:relative; height: 100%;} #header #gnbMenu > ul {text-align:center; margin:0 auto; padding-left: 105px;} #header #gnbMenu > ul > li {display:inline-block; position:relative; vertical-align:top;transition: all 0.4s ease-in-out; color: #fff;margin:0 18px;} #header #gnbMenu > ul > li:first-child{margin-left: 0;} #header #gnbMenu > ul > li:last-child{margin-right: 0;} /* #header #gnbMenu > ul > li + li {margin-left: 170px;} */ #header #gnbMenu > ul > li > a {display:block; font-size: 20rem; font-weight: 500; line-height: 110px; height: 110px;white-space: nowrap;} #header #gnbMenu > ul > li > a:after {content: ''; position: absolute; top: 110px; width: 0; left: 50%; height: 3px; background: #111111; transition: all 0.4s ease-in-out;} #header #gnbMenu > ul > li:hover a:after {width: 100%; left: 0;} #header #gnbMenu ul.subMenu {opacity:0; display: none; width:100%; vertical-align:top; text-align:center; padding-top: 25px;} #header #gnbMenu ul.subMenu li {margin:20px 0; width:100%; text-align:center; white-space:nowrap;} #header #gnbMenu ul.subMenu li a {color:#666; font-size:16rem; display:block;} #header #gnbMenu ul.subMenu li a:hover {color: #111111; font-weight: 600; text-decoration: underline;} #header.on #gnbMenu:before {width: 100%; position: absolute; background: #e9e9e9; height: 1px; top: 110px; content: '';} #header.on #gnbMenu ul.subMenu {opacity:1;} #header.on #gnbMenu > ul > li {margin: 0 20px; transition: all 0.4s ease-in-out;} #header.on #gnbMenu ul li {color: #000;} #header.on #gnbMenu .logo {background: url(/ycp_common/images/homepage/common/logo04.png) no-repeat; transition: all 0.4s ease-in-out;background-size: 250px 32px;} #header.on .rMenu .language a {color: #000; transition: all 0.4s ease-in-out;} #header.on .rMenu .language a {content:url(/ycp_common/images/homepage/common/lang_arrow.png); transition: all 0.4s ease-in-out;} #header.on .rMenu .lang_wrap.over .language a:after {content: url(/ycp_common/images/homepage/common/lang_arrow_up.png); transition: all 0.4s ease-in-out;} #header.on .rMenu .side_menu .open_menu {background: url(/ycp_common/images/homepage/common/menu_open.png) no-repeat; transition: all 0.4s ease-in-out;} #header.black-header #gnbMenu {background: rgba(0, 0, 0, 0.3);} #header.black-header.on #gnbMenu {background: none;} #MgnbMenu {display: none;} .gnb_bg {background: #fff; transition: all .3s ease-out;} .rMenu {position: absolute; top: 45px; right: 40px;} .rMenu .side_menu {display: inline-block; vertical-align: top;} .rMenu .side_menu .open_menu {width: 26px; height: 22px; text-indent: -9999px; cursor: pointer; background: url(/ycp_common/images/homepage/common/wh_menu_open.png) no-repeat; background-size: cover;} .rMenu .side_menu .close_menu {width: 25px; height: 24px; text-indent: -9999px; cursor: pointer; background: url(/ycp_common/images/homepage/common/menu_close.png) no-repeat; background-size: cover;} .rMenu .lang_wrap {display: inline-block; margin-right: 30px;} .rMenu .language {width: 100%; text-align: center; font-size: 14rem; font-weight:bold; padding: 0 10px;} .rMenu .language a {display:block; color: #fff; transition: all 0.4s ease-in-out;} .rMenu .language a:after {content:url(/ycp_common/images/homepage/common/wh_lang_arrow.png); display: inline-block; margin-left:16px; transition: all 0.4s ease-in-out;} .rMenu .lang_list {margin-top: 15px; display:none;} .rMenu .lang_list li {text-align: center; color: #fff; padding: 15px 0;} .rMenu .lang_wrap.over .language a:after{content: url(/ycp_common/images/homepage/common/lang_arrow_up.png);} .rMenu .lang_wrap.over .lang_list {border: 1px solid #e5e5e5; background: #fff;} .rMenu .lang_wrap.over .lang_list li:hover {background: #ebebeb;} .rMenu .lang_wrap.over .lang_list li:hover a {color: #222;} .rMenu .lang_wrap.over .lang_list li a {color: #666; font-weight: 500; font-size: 14rem;} .m_lang_wrap {display: none;} .quick_menu {position:fixed; width:0; height:100%; right:0; top:0; background: #111111; z-index:99999; opacity: 0; visibility: hidden; transition: all .5s ease-out;} .quick_menu.open {width: 100%; opacity: 1; visibility: visible;} .quick_menu.open .rMenu .lang_wrap a {color: #fff;} .quick_menu figure {display:flex;align-items: center;height:100vh;} .quick_menu .menu_list {display:flex;color: #fff;justify-content: center;width: 100%;} .quick_menu .menu_list dl:after {content:''; clear:both; display:block;} .quick_menu .menu_list dl {width: 25%; float: left;} .quick_menu .menu_list dl dt {font-weight:500; font-size:25rem; margin-bottom: 50px;word-break: keep-all} .quick_menu .menu_list dl dd {font-size:20rem; color: #a8aba9;} .quick_menu .menu_list dl dd a {display: block; margin-bottom: 40px;} .quick_menu .menu_list dl dd a:hover {text-decoration: underline; color: #fff;} .quick_menu.open .rMenu .language a:after{content:url(/ycp_common/images/homepage/common/wh_lang_arrow.png); display:inline-block; margin-left:16px;} .quick_menu.open .rMenu .lang_wrap.over .language a:after{content: url(/ycp_common/images/homepage/common/wh_lang_arrow_up.png);} .scroll {position: fixed; bottom: 50px; left: calc(50% - 14.5px); z-index: 9999; cursor: pointer;} .area .scroll {position: absolute;} .scroll .icon {height: 55px; background: url(/ycp_common/images/homepage/common/scroll_icon.png) top center no-repeat;} .scroll p {color: #fff; font-size: 13rem; text-align: center;} .paging_info {color: #fff; letter-spacing: 3px; font-size: 15rem;} /* *************** MAIN CONTENT *************** */ .index_section {color: #fff; position: absolute; left: 50%; top: 30%; z-index: 99;transform: translateX(-50%);text-align: center;width: 100%} .index_section h2 {font-size: 50rem; font-weight: 600; margin: 15px 0; opacity: 0; transform: translateY(-40px); } .index_section p {font-size: 25rem; opacity: 0; transform: translateY(40px); line-height: 1.6em;} #fullpage .index_section p:nth-child(3) {font-size: 25rem;} /* 메인 슬라이더 텍스트 애니메이션 */ .index_visual.active .index_section h2 {opacity: 1; transform: translate(0); transition: 1.5s 0.5s;word-break: keep-all;} .index_visual.active .index_section p:nth-child(1) {opacity: 1;transform: translate(0); transition: 0.8s 0.3s;} .index_visual.active .index_section p:nth-child(3) {opacity: 1;transform: translate(0); transition: 2s 0.8s;} .index_visual.active .index_section p > span {text-decoration: underline;text-underline-position: under;} /* 메인 슬라이더 배너 애니메이션 */ .main_slide_wrap .main_slide .slick-slide.slick-current.slick-active{animation: zoom-visual 7s;} .index_visual .main_slide_wrap .main_slide .main_visual01{background: url(/ycp_common/images/homepage/index/index_visual01.jpg?v=2) center center no-repeat; background-size: cover; height: 100vh;} .index_visual .index_key {position: absolute;bottom: 35px;left: 50%;text-align: center;transform: translateX(-50%)} .index_visual .index_key p {font-size: 13px;color: #fff;font-weight: 500;} .index_visual a {display: inline-block;margin-bottom: 7px;} .index_visual .main_slide_wrap .main_slide .about_visual01 {background: url(/ycp_common/images/homepage/index/about_visual01.jpg) center center no-repeat; background-size: cover; height: 100vh;} /* 메인 슬라이더 버튼 */ .main_slide .slick-dots {max-width: 300px;position: absolute; left: 100px; bottom: 19%;display: none;} .main_slide .slick-dots li {display: inline-block; width: 60px; height: 2px; background: #ecebe7; opacity: 0.5;} .main_slide .slick-dots li.slick-active, .main_slide .slick-dots li:hover {background: #ecebe7; opacity: 1;} .main_slide .slick-dots li button {font-size: 0;} .ins {height: 100vh;overflow: hidden;} .ins > div {position: relative; height: 100%; padding: 160px 0;} .ins .pd0{padding: 0;} .pd-80.ins > div {padding: 180px 0 0 0;} .outside span {position: relative; width: 25px; height: 18px; text-indent: -99999px; cursor: pointer;} .outside span:hover, .outside span:focus {filter: brightness(0); -webkit-filter: brightness(0);} .outside span:hover:after {filter: brightness(1); -webkit-filter: brightness(1);} .main_scroll_box {width: 51px; height: 66px; position: fixed; right: 10px; top: 80px; bottom: 0; margin: auto; text-align: center; z-index: 99999; opacity: 1; cursor: pointer;} .main_scroll_box.none {display: none;} .main_scroll_box.sub_scroll {bottom: 30px; top: unset; right: calc(50% - 50px); position: absolute;} .main_scroll_box h6 {font-size: 13rem; font-weight: 500; color: #fff; margin-bottom: 10px;} .main_scroll {width: 13px; height: 40px; margin: 0 auto; position: relative; overflow: hidden; } .main_scroll span {position: absolute; left: 0; right: 0; margin: auto; top: -100%; width: 1px; height: 100%; background-color: #fff; } .main_scroll:after {position: absolute; content:''; width: 8px; height: 8px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg); left: 0; bottom: 2px; right: 0; margin: auto; } .scroll_circle {content:''; position: absolute; left: 0; right: 0; bottom: -12px; margin: auto; width: 35px; height: 35px; z-index: -1; } .scroll_circle span {content:''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: #fff; width: 100%; height: 100%; border-radius: 100%; opacity: 0.2; } .main_scroll_box.bl-scroll .main_scroll span {background-color: #333; } .main_scroll_box.bl-scroll .main_scroll:after {border-right: 1px solid #333; border-bottom: 1px solid #333;} .main_scroll_box.bl-scroll h6 {color: #333;} .main_scroll_box.bl-scroll .scroll_circle span {background-color: #333;} /* *************** MAIN ROOM *************** */ .room_view {display: flex; align-content: center; justify-content: center; align-items: center; height: 100%; background: url(/ycp_common/images/homepage/index/room_bg02.jpg) center center no-repeat; background-size: cover;} .room_view .wrap1600 {position: relative;} .room_slide .room_list {overflow: hidden; height: 650px;} .room_slide img {float: left; width: 63%; height: 100%;} .room_slide .room_detail {padding: 5%; float: left; width: 37%; background: #fff; height: 100%; position: relative;} .room_slide .room_detail .anmt1 {opacity: 0; transform: translateY(50%);} .room_slide .room_detail strong {display: inline-block; font-size: 17rem; color: #b1b0b0; margin-bottom: 50px; font-weight: 600;} .room_slide .room_detail h2 {color: #222; font-size: 40rem; font-weight: 700; margin-bottom: 40px;} .room_slide .room_detail p {color: #666; font-size: 18rem; font-weight: 400; line-height: 1.6em;} .room_slide .room_detail .view_more {opacity: 0; transform: translateY(50%); color: #222; font-size: 16rem; font-weight: 400; margin-top: 60px;} .room_slide .room_detail .view_more:before {content: ''; display: inline-block; height: 1px; width: 35px; margin-right: 10px; background: #1f3427; vertical-align: middle;} .room_view .outside {position: absolute; bottom: 80px; z-index: 51; right: 27%;} .room_view .outside #prev1:after {position: absolute; right: -20px;content: ''; display: inline-block; width: 1px; height: 17px; background: #e5e5e5; vertical-align: top;} .room_view .outside #prev1 {background: url(/ycp_common/images/homepage/common/rm_prev_btn.png) no-repeat; background-size: cover; margin-right: 20px;} .room_view .outside #next1 {background: url(/ycp_common/images/homepage/common/rm_next_btn.png) no-repeat; background-size: cover; margin-left: 20px;} .acc_slide_wrap {opacity: 0; transform: translateY(50%);} .acc_slide_wrap.active {opacity: 1; transform: translate(0); transition: 1s 0.5s; } .acc_slide_wrap.active .room_detail .anmt1 {opacity: 1; transform: translate(0); transition: 1.2s 0.8s;} .acc_slide_wrap.active .room_detail .view_more {opacity: 1; transform: translate(0); transition: 1.5s 1.1s;} /* *************** MAIN FAC *************** */ .fac_bg {width: 1018px; height: 600px; position: absolute; background: url(/ycp_common/images/homepage/index/fac_bg.jpg) left center no-repeat; top: 110px; opacity: 0; transform: translateX(-50%);} .fac_bg.active {opacity: 1; transform: translate(0); transition: 1.5s; } .fac_slide {position: relative;height: 75vh;} .fac_slide div {position: relative; max-height: 75vh;} .fac_slide div a {width: 100%;} .fac_slide div a > img {width: 100%;height: 75vh;object-fit: cover;} .fac_slide .fac_detail {position: absolute; bottom: 80px; width: 100%; text-align: center;} .fac_slide .fac_detail strong {font-weight: 500; font-size: 30rem; color: #fff; display: inline-block; margin-bottom: 20px;} .fac_slide .fac_detail p {color: #fff; font-size: 18rem; line-height: 1.6em;} .fac_view .outside {position: absolute;top: 50%;z-index: 51;width: 100%;left: 0;display: flex;justify-content: space-between;padding: 0 70px 0 50px;} /* .fac_view .outside #prev2:after {position: absolute; right: -20px;content: ''; display: inline-block; width: 2px; height: 17px; background: #c3c3c3; vertical-align: top;} */ .fac_view .outside #prev2 {background: url(/ycp_common/images/homepage/common/index_prev_slider.png) no-repeat; background-size: cover; margin-right: 20px;} .fac_view .outside #next2 {background: url(/ycp_common/images/homepage/common/index_next_slider.png) no-repeat; background-size: cover; margin-left: 20px;} .fac_view .outside span {width: 29px;height: 54px;} .fac_slide div .hover_wrap {opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgb(0 0 0 / 80%); transition: 0.5s;display: flex;justify-content: center;align-items: center;} /* .fac_slide div .hover_wrap .view_btn {border: 1px solid #ffffff4d; border-radius: 50%; color: #fff; font-size: 25rem; text-align: center; width: 150px; height: 150px; line-height: 150px; position: absolute; top: 34%; left: calc(50% - 75px);} */ .fac_slide div .hover_wrap .view_btn {text-align: center;} .fac_slide div:nth-child(1) .hover_wrap .view_btn img {width: 110px;} .fac_slide div:nth-child(2) .hover_wrap .view_btn img {width: 130px;} .fac_slide div:nth-child(3) .hover_wrap .view_btn img {width: 95px;} .fac_slide div:nth-child(4) .hover_wrap .view_btn img {width: 170px;} .fac_slide div:nth-child(5) .hover_wrap .view_btn img {width: 105px;} .fac_slide div:nth-child(6) .hover_wrap .view_btn img {width: 160px;} .fac_slide div:nth-child(7) .hover_wrap .view_btn img {width: 160px;} .fac_slide div a:hover .hover_wrap {opacity: 1; transition: 0.5s;} .fac_slide_wrap {position: relative;} .fac_slide_wrap .view_more {color: #222; font-size: 16rem; font-weight: 400; position: absolute; right: 0; top: -35px;} .fac_slide_wrap .view_more:before {content: ''; display: inline-block; height: 1px; width: 35px; margin-right: 10px; background: #1f3427; vertical-align: middle;} @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(80px); } 50% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .fac_slide_wrap h2 {opacity: 0; transform: translateY(80px);position: relative;} .fac_slide_wrap p {opacity: 0; transform: translateY(70px);position: relative;font-size: 19rem;} .fac_slide {opacity: 0; transform: translateY(80px);position: relative;} .fac_slide_wrap.active h2 {font-size: 40rem;font-weight: bold;margin-bottom: 10px;opacity: 1; animation: fadeInUp 1.3s ease-out forwards;} .fac_slide_wrap.active h2 > span {color: #999999;font-size: 13rem;font-weight: 400;margin-left: 10px;} .fac_slide_wrap.active p {color: #333333;font-size: 19rem;font-weight: 400;margin-bottom: 35px;opacity: 1; transform: translateY(0); transition: 1.1s 1.1s;} .fac_slide_wrap.active .fac_slide {opacity: 1; transform: translateY(0); transition: 1.5s 1.5s;} .fac_slide .slick-dots {max-width: 300px; text-align: center; margin: 40px auto 0;} .fac_slide .slick-dots li {display: inline-block; width: 40px; height: 3px; background: #dcdcdc;} .fac_slide .slick-dots li.slick-active, .fac_slide .slick-dots li:hover {background: #090909;} .fac_slide .slick-dots li button {font-size: 0;} /* *************** MAIN PROMOTION *************** */ .ins > .list_view {/* display: flex; flex-wrap: wrap; align-content: space-around; justify-content: center; */} .promotion_wrap {position: relative;} .promotion_wrap h1 {padding: 0 60px; margin-bottom: 50px; } .promotion_wrap h1 p {font-size: 50rem; font-weight: 600; display: inline-block; opacity: 0; transform: translateY(30%);} .promotion_wrap h1 span {color: #333; font-size: 19rem; font-weight: 500; padding-left: 30px; opacity: 0; transform: translateY(30%);} .promotion_slide {opacity: 0; transform: translateX(30%);} .promotion_slide div {margin: 0 10px;text-align: center;} .promotion_slide div .img_wrap {margin-bottom: 40px; overflow: hidden; padding: 0;} .promotion_slide div .img_wrap img {width:430px;height: 315px;object-fit: cover;transition:all 0.5s ease-in-out 0.1s; -moz-transition:all 0.5s ease-in-out 0.1s; -webkit-transition:all 0.5s ease-in-out 0.1s;} .promotion_slide div .img_wrap img:hover{transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1);} .promotion_slide div h3 { color: #222; font-size: 23rem; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; width: 100%; padding: 0 10px; text-align: left; height: 54px } .promotion_slide div p {font-size: 19rem; color: #666; margin: 15px 0 30px; overflow: hidden; /* max-width: 430px;max-height: 46px; */white-space: normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical;text-align: left;padding-left: 10px;} .promotion_slide div p.date {font-size: 16rem; color: #a1a1a1;} .promotion_wrap .outside {position: absolute; top: 5%; z-index: 51; right: 80px;} .promotion_wrap .outside #prev3:after {position: absolute; right: -20px;content: ''; display: inline-block; width: 1px; height: 17px; background: #e5e5e5; vertical-align: top;} .promotion_wrap .outside #prev3 {background: url(/ycp_common/images/homepage/common/rm_prev_btn.png) no-repeat; background-size: cover; margin-right: 20px;} .promotion_wrap .outside #next3 {background: url(/ycp_common/images/homepage/common/rm_next_btn.png) no-repeat; background-size: cover; margin-left: 20px;} .promotion_wrap.active h1 p {opacity: 1; transform: translate(0%); transition: 1s 0.5s;} .promotion_wrap.active h1 span {opacity: 1; transform: translate(0%); transition: 1s 0.8s;} .promotion_wrap.active .promotion_slide {opacity: 1; transform: translate(0); transition: 1.2s 0.8s; } /* *************** MAIN *************** */ /* 서브페이지 */ .intro .txt_wrap h2 {font-size: 45rem; font-weight: 600; color: #101010; line-height: 1.4em;} .intro .txt_wrap p {font-size: 20rem; color: #666; line-height: 1.5em; font-weight: 400;} .intro .txt_wrap span {font-size: 23rem; font-weight: 700; color: #a1a1a1;} /* 메인 페이지 */ #fullpage .intro .txt_wrap h2 {font-size: 45rem;color: #101010; line-height: 1.4em;font-weight: 600;} #fullpage .intro .txt_wrap p {font-size: 20rem; color: #666; line-height: 1.5em; font-weight: 400;} #fullpage .intro .txt_wrap span {font-size: 23rem; font-weight: 700; color: #a1a1a1;} .intro1 {background: url(/ycp_common/images/homepage/company/bg_01.jpg) center center no-repeat;background-size: cover;animation: zoom-visual 2s;} .intro4 {background: url(/ycp_common/images/homepage/index/main_bg.jpg) center center no-repeat;background-size: cover;text-align: center;} #fullpage .intro.index04 .txt_wrap h2 {font-size: 35rem;margin-bottom: 0 !important;font-weight: 600;} #fullpage .intro.index04 .txt_wrap p {font-size: 16rem;color: #999999;} .intro1 .txt_wrap {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;} .intro1 .txt_wrap span {font-size: 25rem; position: relative; margin-bottom: 80px; color: #fff;/* opacity: 0; transform: translateY(60px); */} .intro1 .txt_wrap span:after {content: ''; display: inline-block; position: absolute; bottom: -70px; left: 50%; height: 40px; width: 1px; background: rgb(255 255 255 / 50%);} .intro1 .txt_wrap h2 {color: #fff; font-size: 70rem; font-weight: 500;/* opacity: 0; transform: translateY(60px); */} .intro1 .txt_wrap p {color: #fff; font-size: 21rem; /* opacity: 0; transform: translateY(60px); */} /* .intro1.active .txt_wrap span {opacity: 1; transform: translate(0); transition: 3s 0.5s;} .intro1.active .txt_wrap h2 {opacity: 1; transform: translate(0); transition: 1.3s 0.7s; } .intro1.active .txt_wrap p {opacity: 1; transform: translate(0); transition: 1.5s 1.1s; } */ .intro2 .intro_bg2 {width: 1047px; height: 100%; opacity: 0; position: absolute; right: -15%; top: 0; background: url(/ycp_common/images/homepage/company/index01.jpg) right center no-repeat; background-size: cover;} .intro2 .txt_wrap {float: left; height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: left; padding: 0 100px;} .intro2 .txt_wrap span {font-size: 30rem; font-weight: 700; color: #222; margin-bottom: 50px; opacity: 0; transform: translateY(50px);} .intro2 .txt_wrap h2 {margin-bottom: 30px; opacity: 0; transform: translateY(70px);} .intro2 .txt_wrap p {margin-bottom: 30px; opacity: 0; transform: translateY(80px);} .intro2.active .intro_bg2 {opacity: 1; right: 0; transition: 1s 0.5s;} .intro2.active .txt_wrap span {opacity: 1; transform: translate(0); transition: 0.7s 0.3s;} .intro2.active .txt_wrap h2 {opacity: 1; transform: translate(0); transition: 1s 0.8s; } .intro2.active .txt_wrap p {opacity: 1; transform: translate(0); transition: 1.1s 1.1s; } .index02 .intro_bg2, .index03 .intro_bg2, .index04 .intro_bg2, .index05 .intro_bg2, .index07 .intro_bg2, .index08 .intro_bg2 {width: 1047px; height: 100%; opacity: 0; position: absolute; right: -15%; top: 0; background: url(/ycp_common/images/homepage/company/bg_02.jpg) center center no-repeat;background-size: contain !important;} .index02 .txt_wrap, .index03 .txt_wrap, .index04 .txt_wrap, .index05 .txt_wrap, .index06 .txt_wrap, .index07 .txt_wrap, .index08 .txt_wrap {height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: left; padding: 0 50px 0 100px;width: calc(100% - 1050px);} .index02 .txt_wrap span, .index03 .txt_wrap span, .index04 .txt_wrap span, .index05 .txt_wrap span, .index06 .txt_wrap span, .index07 .txt_wrap span, .index08 .txt_wrap span {margin-bottom: 50px; opacity: 0; transform: translateY(50px);} .index02 .txt_wrap h2, .index03 .txt_wrap h2, .index04 .txt_wrap h2, .index05 .txt_wrap h2, .index06 .txt_wrap h2, .index07 .txt_wrap h2, .index08 .txt_wrap h2 {margin-bottom: 30px; opacity: 0; transform: translateY(70px);} .index02 .txt_wrap p, .index03 .txt_wrap p, .index04 .txt_wrap p, .index05 .txt_wrap p, .index06 .txt_wrap p, .index07 .txt_wrap p, .index08 .txt_wrap p {margin-bottom: 30px; opacity: 0; transform: translateY(80px);} .index02 .intro_bg2 {background: #f64b1f url(/ycp_common/images/homepage/index/index01.jpg) center center no-repeat;} .index03 .intro_bg2 {background: #ededed url(/ycp_common/images/homepage/index/index02.jpg) center center no-repeat;} .index04 .intro_bg2 {background: #ededed url(/ycp_common/images/homepage/index/index03.jpg?v=2) center center no-repeat;} .index05 .intro_bg2 {background: #ededed url(/ycp_common/images/homepage/index/index04.jpg) right center no-repeat;} .index08 .intro_bg2 {background: #f64b1f url(/ycp_common/images/homepage/index/index05.jpg) center center no-repeat;} .index06 .intro_bg2 {width: 1047px; height: 100%; opacity: 0; position: absolute; right: -15%; top: 0; background: url(/ycp_common/images/homepage/index/main01.jpg) right center no-repeat; background-size: cover;} .index07 .intro_bg2 {width: 1047px; height: 100%; opacity: 0; position: absolute; right: -15%; top: 0; background: url(/ycp_common/images/homepage/index/index09.jpg) right center no-repeat; background-size: cover !important;} .index02.active .intro_bg2, .index03.active .intro_bg2, .index04.active .intro_bg2, .index05.active .intro_bg2, .index06.active .intro_bg2, .index07.active .intro_bg2, .index08.active .intro_bg2 {opacity: 1; right: 0; transition: 1s 0.5s;} .index02.active .txt_wrap span, .index03.active .txt_wrap span, .index04.active .txt_wrap span, .index05.active .txt_wrap span, .index06.active .txt_wrap span, .index07.active .txt_wrap span, .index08.active .txt_wrap span {opacity: 1; transform: translate(0); transition: 0.7s 0.3s;word-break: keep-all;} .index02.active .txt_wrap h2, .index04.active .txt_wrap h2, .index05.active .txt_wrap h2, .index06.active .txt_wrap h2, .index07.active .txt_wrap h2, .index08.active .txt_wrap h2 {opacity: 1; transform: translate(0); transition: 1s 0.8s;word-break: keep-all;} .index02.active .txt_wrap p, .index03.active .txt_wrap p, .index04.active .txt_wrap p, .index05.active .txt_wrap p, .index06.active .txt_wrap p, .index07.active .txt_wrap p, .index08.active .txt_wrap p {opacity: 1; transform: translate(0); transition: 1.1s 1.1s;word-break: keep-all;} #fullpage .index04.active .txt_wrap h2 > span {display: block;font-size: 60rem;margin-top:10px;margin-bottom: 63px;color: #F54B1E;} #fullpage .index04.active .txt_wrap h2:nth-child(3) > span {margin-bottom: 54px;} #fullpage .index04.active .txt_wrap > span {margin-bottom: 100px;} .index03.active .txt_wrap h2 {opacity: 1; transform: translate(0); transition: 1.1s 1.1s;word-break: keep-all;} .index03.active .txt_wrap p {opacity: 1; transform: translate(0); transition: 1s 0.8s; } .intro3 .intro_bg3 {width: 100%; height: 490px; opacity: 0; position: absolute; bottom: -20%; left: 0; background: url(/ycp_common/images/homepage/index/main02.jpg) center bottom no-repeat; background-size: cover;} .intro3 .txt_wrap {margin-top: 50px;overflow: hidden;text-align: left;position: relative;z-index: 10;display: flex;} .intro3 .txt_wrap h2 {float: left; width: 52%; padding: 0 100px; opacity: 0; transform: translateX(20%);} .intro3 .txt_wrap p {opacity: 0; transform: translateX(80px);} .intro3.active .intro_bg3 {opacity: 1; bottom: 0; transition: 1s 0.5s;} .intro3.active .txt_wrap h2 {opacity: 1; transform: translate(0); transition: 1s 0.5s;word-break: keep-all;} .intro3.active .txt_wrap p {opacity: 1; transform: translate(0); transition: 1s 0.8s; } .intro4 .txt_wrap {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;text-align: center;} .intro4 .txt_wrap h2 {color: #fff !important; margin-bottom: 40px !important; opacity: 0;} .intro4 .txt_wrap p {color: #fff !important; font-size: 21rem !important; opacity: 0; transform: translateY(80px); font-weight: 300;} .intro4 .txt_wrap.left p {text-align: left;} .intro4.active .txt_wrap h2 {opacity: 1; animation: fadeInUp 1.8s ease-out forwards;word-break: keep-all;} .intro4.active .txt_wrap p {opacity: 1; transform: translate(0); transition: 1.5s 1.5s;font-size: 21rem;word-break: keep-all;} /* *************** ABOUT *************** */ #about_fullpage .fp-table, .fp-tableCell {height: auto !important;} .ins.about_bg {background: #f7f7f7;} .about_header {text-align: center;padding-bottom: 100px;} .about_header p {font-size: 25rem;font-weight: 500;color: #222222;margin-bottom: 10px;} .about_header h4 {font-size: 45rem;font-weight: 700;color: #222222;margin-bottom: 20px;} .about_header span {font-size: 19rem;font-weight: 400;color: #666666;line-height: 1.5em;} .about09 .about_header {padding-bottom: 76px;} .about_cont > div {display: flex;justify-content: flex-start;gap: 180px;padding: 70px 0;border-top: 1px solid #e2e2e2;width: 1600px;margin: 0 auto;} .about_cont > div > p {font-size: 30rem;font-weight: 600;white-space: nowrap;width: 19%;} .about_cont > div > ul {display: flex;gap: 70px;width: 72%;} .about_cont > div > ul > li {width: 47%;} .about_cont > div > ul > li a {display: inline-block;position: relative;} .about_cont > div > ul > li span {margin-top: 16px;font-size: 19rem;color: #333333;font-weight: 600;display: block;} .about_con .ins,.about_con .ins > div {height: auto;min-height: 100vh;} .about_detail {text-align: center;} .detail_title {margin-bottom: 70px;} .detail_title img {display: block;margin: 0 auto;padding-top: 25px;} .detail_title img.logo01 {width: 400px;} .detail_title img.logo02 {width: 370px;} .detail_title img.logo03 {width: 420px;} .detail_title img.logo04 {width: 330px;} .detail_title img.logo05 {width: 350px;} .detail_title img.logo06 {width: 350px;} .detail_title img.logo07 {width: 330px;} .detail_title span {font-size: 16px;color: #fff;display: inline-block;background: #393e43;padding: 10px 18px;} .detail_cont .detail_bg01 {width: 100%;height: 450px;background: url(/ycp_common/images/homepage/visual/about_bg01.jpg) center center no-repeat;} .detail_cont .detail_bg02 {width: 100%;height: 450px;background: url(/ycp_common/images/homepage/visual/about_bg02.jpg) center center no-repeat;} .detail_cont .detail_bg03 {width: 100%;height: 450px;background: url(/ycp_common/images/homepage/visual/about_bg03.jpg) center center no-repeat;} .detail_cont .detail_bg04 {width: 100%;height: 450px;background: url(/ycp_common/images/homepage/visual/about_bg04.jpg) center center no-repeat;} .detail_cont .detail_bg05 {width: 100%;height: 450px;background: url(/ycp_common/images/homepage/visual/about_bg05.jpg) center center no-repeat;} .detail_cont .detail_bg06 {width: 100%;height: 450px;background: url(/ycp_common/images/homepage/visual/about_bg06.jpg) center center no-repeat;} .detail_cont .detail_bg07 {width: 100%;height: 450px;background: url(/ycp_common/images/homepage/visual/about_bg07.jpg) center center no-repeat;} .detail_cont h4 {margin-top: 100px;font-size: 35rem;color: #222222;font-weight: 400;margin-bottom: 30px;padding: 0 20px;} .detail_cont h4 > span {font-weight: 700;} .detail_cont p {color: #333333;font-size: 19rem;line-height: 1.68;padding: 0 20px;word-break: keep-all;} .detail_box {width: 1600px;margin: 0 auto;padding: 100px 0;} .detail_box ul {display: flex;gap: 30px;} .detail_box li {background-color: #f7f7f7;width: 25%;display: flex;flex-direction: column;height: 373px;justify-content: center;gap: 40px;align-items: center;padding: 0 10px;} .detail_box li span {font-size: 19px;font-weight: 500;color: #333333;} .detail_box li img {height: 100px;width: 110px;object-fit: contain;} .detail_slide01, .detail_slide02, .detail_slide03, .detail_slide04, .detail_slide05, .detail_slide06, .detail_slide07 {position: relative;} .detail_slide01 ul li img, .detail_slide02 ul li img, .detail_slide03 ul li img, .detail_slide04 ul li img, .detail_slide05 ul li img, .detail_slide06 ul li img, .detail_slide07 ul li img {display: inline-block;} .detail_slide01 .outside, .detail_slide02 .outside, .detail_slide03 .outside, .detail_slide04 .outside, .detail_slide05 .outside, .detail_slide06 .outside, .detail_slide07 .outside {position: absolute;bottom: 40px;z-index: 51;left: 50%;margin-left: -45px;} .detail_slide01 .outside span, .detail_slide02 .outside span, .detail_slide03 .outside span, .detail_slide04 .outside span, .detail_slide05 .outside span, .detail_slide06 .outside span, .detail_slide07 .outside span {width: 40px;height: 17px} .detail_slide01 .outside #prev01, .detail_slide02 .outside #prev02, .detail_slide03 .outside #prev03, .detail_slide04 .outside #prev04, .detail_slide05 .outside #prev05, .detail_slide06 .outside #prev06, .detail_slide07 .outside #prev07 {background: url(/ycp_common/images/homepage/common/sub_prev_btn.png) no-repeat; background-size: cover; margin-right: 20px;} .detail_slide01 .outside #next01, .detail_slide02 .outside #next02, .detail_slide03 .outside #next03, .detail_slide04 .outside #next04, .detail_slide05 .outside #next05, .detail_slide06 .outside #next06, .detail_slide07 .outside #next07 {background: url(/ycp_common/images/homepage/common/sub_next_btn.png) no-repeat; background-size: cover; margin-left: 20px;} .table_cont {width: 1600px;margin: 0 auto;} .table_cont table.tableList{width:100%; table-layout:fixed; border-top:2px solid #252525; border-bottom:1px solid #b5b5b5} .table_cont table.tableList th, .table_cont table.tableList td{font-size:18px; text-align:center; padding:35px 50px; border-left:1px solid #e2e2e2; line-height: 1.7em;} .table_cont table.tableList td{font-weight:400; border-top:1px solid #e2e2e2; word-break: keep-all;color: #666666;} .table_cont table.tableList td.l {text-align: left; padding-left: 20px;} .table_cont table.tableList td .gd {/* color: #2574a9; */ font-size: 14px;} .table_cont table.tableList td .mgt {margin-top: 15px;} .table_cont table.tableList td .listWrap {overflow: hidden;} .table_cont table.tableList td .listWrap .tit {float: left; width: 120px; font-weight: 500; color: #333;} .table_cont table.tableList td .listWrap > ul {float: left; width: calc(100% - 120px);} .table_cont table.tableList td table {width: 100%;} .table_cont table.tableList td table tbody th, table.tableList td table tbody td {border-bottom: 1px solid #e2e2e2;} .table_cont table.tableList th{color:#333; font-weight:400;border-left: none;} .table_cont table.tableList tbody th{border-top:1px solid #e2e2e2; word-break: keep-all;font-weight: 500;color: #222222;} .table_cont table.tableList thead th{padding:19px 0; border-bottom:1px solid #e2e2e2;} .table_cont ul {margin-top: 38px;} .table_cont ul li {color: #666666;font-size: 17px;line-height: 1.94;} .intro.index02.about .txt_wrap h2 {font-size: 35rem;} .about_cont div .hover_wrap {opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgb(0 0 0 / 50%); transition: 0.5s;display: flex;justify-content: center;align-items: center;} .about_cont div .hover_wrap .view_btn {text-align: center;} .about_cont div .hover_wrap .view_btn > img {max-height: 100px;} .about_cont div a:hover .hover_wrap {opacity: 1; transition: 0.5s;} #about_fullpage .index02 .intro_bg2 {background: url(/ycp_common/images/homepage/index/index06.jpg) center center no-repeat;background-size: cover !important;} #about_fullpage .index03.about2 .intro_bg2 {background: url(/ycp_common/images/homepage/index/index08.jpg) center center no-repeat;background-size: cover !important;} #about_fullpage .index05 .intro_bg2 {background: url(/ycp_common/images/homepage/company/intro01.jpg) center center no-repeat;background-size: cover !important;} #about_fullpage .index03 .intro_bg2 {background: #ededed url(/ycp_common/images/homepage/company/intro02.jpg) center center no-repeat;} /* *************** 창업 사례 *************** */ #example_fullpage .index_visual .main_slide_wrap .main_slide .about_visual01 {background: url(/ycp_common/images/homepage/index/example_visual01.jpg?v=2) center center no-repeat} #example_fullpage .index03 .intro_bg2 {background: url(/ycp_common/images/homepage/company/example05.jpg) center center no-repeat;background-size: cover !important;} .intro3.example01 .intro_bg3 {background: url(/ycp_common/images/homepage/company/example01.jpg) center bottom no-repeat;} .intro3.example02 .intro_bg3 {background: url(/ycp_common/images/homepage/company/example02.jpg) center bottom no-repeat;} .intro3.example03 .intro_bg3 {background: url(/ycp_common/images/homepage/company/example03.jpg) center bottom no-repeat;} .intro3.example04 .intro_bg3 {background: url(/ycp_common/images/homepage/company/example04.jpg) center bottom no-repeat;} /* #example_fullpage .intro3 {z-index: 1;} #example_fullpage .intro3 .intro_bg3::after { content:''; position: absolute; background-color: #17286e; width: 100%; height: 117px; bottom: 0; left: 0; z-index: -1; } #example_fullpage .intro3.example01 .intro_bg3::after {height: 114.5px;} */ /* *************** 솔루션 *************** */ #solution_fullpage .index_visual .main_slide_wrap .main_slide .about_visual01 {background: url(/ycp_common/images/homepage/index/solution_visual01.jpg) center center no-repeat} #solution_fullpage .index05.solution01 .intro_bg2 {background: url(/ycp_common/images/homepage/company/solution01.jpg) center center no-repeat;} #solution_fullpage .index05.solution02 .intro_bg2 {background: url(/ycp_common/images/homepage/company/solution02.jpg) center center no-repeat;} #solution_fullpage .index05.solution03 .intro_bg2 {background: url(/ycp_common/images/homepage/company/solution03.jpg) center center no-repeat;} #solution_fullpage .index05.solution04 .intro_bg2 {background: url(/ycp_common/images/homepage/company/solution09.jpg) center center no-repeat;} #solution_fullpage .index05.solution05 .intro_bg2 {background: url(/ycp_common/images/homepage/company/solution10.jpg) center center no-repeat;} #solution_fullpage .index05.solution06 .intro_bg2 {background: url(/ycp_common/images/homepage/company/solution06.jpg) center center no-repeat;} #solution_fullpage .intro_bg2 {background-size: cover !important;} #solution_fullpage .intro3 .intro_bg3 {background: url(/ycp_common/images/homepage/company/solution08.jpg) center bottom no-repeat} #solution_fullpage .intro.solution .txt_wrap {position: relative;} #solution_fullpage .intro.solution .txt_wrap .num_box {position: relative;min-height: 130px;} #solution_fullpage .intro.solution .txt_wrap span.tit {line-height: 105px;font-family: 'Outfit';font-weight: 500;color: #e0e0e0;font-size: 120rem;position: absolute;top: 0;left: 0;margin-bottom: 0;} #solution_fullpage .intro.solution .txt_wrap span.des {font-size: 50rem;color: #101010;position: absolute;bottom: 0;left: 9px;margin-bottom: 0;} #solution_fullpage .intro.solution .txt_wrap h2 {margin-top: 65px;font-size: 27rem;font-weight: bold;margin-bottom: 15px;} #solution_fullpage .intro.solution .txt_wrap p {margin-bottom: 0;} #solution_fullpage .intro.solution .txt_wrap a {font-weight: 400;color: #fff;margin-top: 70px;padding: 17px 80px 17px 30px;font-size: 16px;width: 215px;background: #F54B1E url(/ycp_common/images/homepage/common/sub_next_btn02.png) right 38px center no-repeat;opacity: 0; transform: translateY(50%);} #solution_fullpage .intro.solution.active .txt_wrap a {opacity: 1;transform: translate(0);transition: 1.5s 1.5s;} /* *************** 예약 서비스 *************** */ #introduce_fullpage .index_visual .main_slide_wrap .main_slide .about_visual01 {background: url(/ycp_common/images/homepage/index/service_visual01.jpg) center center no-repeat} #introduce_fullpage .index05.active .txt_wrap p {font-size: 23rem;} #introduce_fullpage .intro3.introduce02 .intro_bg3 {background: url(/ycp_common/images/homepage/company/service05.jpg) center bottom no-repeat;background-size: cover !important;} #introduce_fullpage .intro3.introduce03 .intro_bg3 {background: url(/ycp_common/images/homepage/company/service06.jpg) center bottom no-repeat;background-size: cover !important;} #introduce_fullpage .intro3.introduce04 .intro_bg3 {background: url(/ycp_common/images/homepage/company/service07.jpg) center bottom no-repeat;background-size: cover !important;} #introduce_fullpage .intro3.introduce05 .intro_bg3 {background: url(/ycp_common/images/homepage/company/service08.jpg) center bottom no-repeat;background-size: cover !important;} #introduce_fullpage .index03 .intro_bg2 {background: url(/ycp_common/images/homepage/index/index10.jpg) right center no-repeat; background-size: cover !important;} #introduce_fullpage .index03.intro .txt_wrap h2 {font-size: 39rem;} /* *************** 디자인 컨설팅 *************** */ #design_fullpage .index_visual .main_slide_wrap .main_slide .about_visual01 {background: url(/ycp_common/images/homepage/index/design_visual02.jpg) center center no-repeat;background-size: cover;height: 100vh;} #design_fullpage .index05 .intro_bg2 {background: url(/ycp_common/images/homepage/index/index12.jpg) right center no-repeat;background-size: cover !important;} #design_fullpage .intro4 {background: url(/ycp_common/images/homepage/company/design_bg02.jpg) center center no-repeat;background-size: cover;} #design_fullpage .intro3.example02 .intro_bg3 {background: url(/ycp_common/images/homepage/company/design04.jpg) center bottom no-repeat;background-size: cover;} #design_fullpage .ins .footer_view {background: url(/ycp_common/images/homepage/index/footer_bg07.jpg) top center no-repeat;background-size: cover;} .intro4 .txt_wrap.type2 {flex-direction: row;justify-content: space-around;align-items: flex-start;padding-top: 130px;} .intro4 .txt_wrap.type2 p strong {font-size: 25px;font-weight: 500;display: block;margin-bottom: 10px;} .intro4 .txt_wrap.type2 p span {color: #fff;padding-left: 68px;font-weight: 300;display: block;} .intro4 .txt_wrap.type2 p strong b {font-family: 'Outfit';font-size: 35px;font-weight: 400;vertical-align: middle;margin-right: 20px;} .intro4 .txt_wrap.type2 p span + strong {margin-top: 50px;} .intro3.design .txt_wrap {flex-direction: column;margin-top: 0;} .intro3.design .intro_bg3 {height: 400px;} .intro3.design .txt_wrap h2 {width: 100%;text-align: center;font-family: 'Outfit';font-weight: bold;} .intro3.design .desing_wrap {display: flex;justify-content: center;gap: 100px;margin-top: 70px;position: relative;min-width: 1000px;} .intro3.design .desing_wrap::after { content: ""; position: absolute; top: 21px; border-top: 1px solid #f64b1f; height: 1px; left: 50%; transform: translateX(-50%); width: 1200px; z-index: 1; opacity: 0; } .intro3.design.active .desing_wrap::after {opacity: 1;transition: 1s 0.8s;} .intro3.design .desing_wrap li {text-align: center;position: relative;z-index: 2;} .intro3.design .desing_wrap li > span {font-size: 18px;color: #fff;background-color: #f64b1f;border-radius: 21px;padding: 9px 20px;font-weight: 400;opacity: 0;} .intro3.design.active .desing_wrap li > span {opacity: 1;transform: translate(0);transition: 1s 0.8s;} .intro3.design .desing_wrap li > span > span {font-weight: 500;color: #fff;font-size: 18px;} .intro3.design .desing_wrap li p.tit {margin-top: 26px;font-size: 25px;color: #222222;font-weight: 600;} .intro3.design .desing_wrap li p.con {margin-top: 23px;font-size: 19px;color: #333333;font-weight: 500;} .intro3.design .intro_bg3 {background: url(/ycp_common/images/homepage/company/design03.jpg) center bottom no-repeat;} /* *************** LOCATION *************** */ .loc {background: url(/ycp_common/images/homepage/company/loc_bg.jpg) center center no-repeat; height: 100%;} .loc2 {padding: 0; margin-bottom: 130px;} .loc2 .loc_text {background: #182c17; padding: 120px 0 290px; text-align: center;} .loc2 .loc_text ul {display: inline-block;} .loc2 .loc_text ul li {display: inline-block; font-size: 20rem; color: #fff; text-align: left; padding: 0 80px; border-right: 1px solid #ffffff26; vertical-align: middle;} .loc2 .loc_text ul li strong {color: #a8aba9; margin-bottom: 20px;} .loc2 .loc_detail iframe {width: 100%; height: 720px; margin-top: -160px;} .loc2 .detali_list {margin-top: 100px;} .loc2 .detali_list h3 {width: 20%; font-size: 30rem; color: #333; display: inline-block; vertical-align: top;} .loc2 .detali_list ul {width: 79%; display: inline-block; border-top: 1px solid #252525;} .loc2 .detali_list ul li {padding-top: 35px; border-bottom: 1px solid #e2e2e2;} .loc2 .detali_list ul li p {padding: 60px 0; line-height: 1.5em;} .loc2 .detali_list2 {margin-top: 100px;} .loc2 .detali_list2 h3 {width: 20%; font-size: 30rem; color: #333; display: inline-block; vertical-align: top;} .loc2 .detali_list2 ul {width: 79%; display: inline-block; border-top: 1px solid #252525;} .loc2 .detali_list2 ul li {padding: 60px 0; border-bottom: 1px solid #e2e2e2;} .loc2 .detali_list2 ul li h5 {color: #222; font-size: 22rem; margin-bottom: 15px; font-weight: 600;} .loc2 .detali_list2 ul li p {line-height: 1.5em; font-size: 16rem; font-weight: 400;} .loc2 .detali_list .loc_toggle .list {background: url(/ycp_common/images/homepage/common/down_arrow.png) right 20px top 45px no-repeat; cursor: pointer;} .loc2 .detali_list .loc_toggle .list.on {background: url(/ycp_common/images/homepage/common/up_arrow.png) right 20px top 45px no-repeat;} .loc2 .detali_list .loc_toggle .list h5 {font-size: 23rem; font-weight: 500; margin-bottom: 35px;} .loc2 .detali_list .loc_toggle .toggle-box {display: none; padding: 0 30px; color: #666; font-weight: 400; font-size: 18rem; background: #f9f9f9; margin-top: 35px;} .loc2 .detali_list .loc_toggle .list.on .toggle-box {border-top: 1px solid #e2e2e2;} /* *************** SUB *************** */ #container {position: relative;} #container #header {position: absolute;} .sub_visual {height: 100%; background-size: cover; animation: zoom-visual 2s;} .sub_visual .txt_wrap {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;} .sub_visual .txt_wrap span {font-size: 25rem; position: relative; margin-bottom: 80px; color: #fff;} .sub_visual .txt_wrap span:after {content: ''; display: inline-block; position: absolute; bottom: -70px; left: 50%; height: 40px; width: 1px; background: rgb(255 255 255 / 50%);} .sub_visual .txt_wrap h2 {color: #fff; font-size: 70rem; font-weight: 500; line-height: 1.5em;} .sub_visual .txt_wrap p {color: #fff; font-size: 21rem;} @keyframes zoom-visual { 0% { transform: scale(1.3); } 100% { transform: scale(1); } } .bg_board {overflow: hidden;} /* SUB VISUAL */ .section .area {height: 100vh; position: relative;} .vis_room {background: url(/ycp_common/images/homepage/visual/visual_room.jpg) center center no-repeat; background-size: cover;} .vis_din {background: url(/ycp_common/images/homepage/visual/visual_din.jpg) center center no-repeat; background-size: cover;} .vis_board {height: 420px; background: url(/ycp_common/images/homepage/visual/visual_board02.jpg) center center no-repeat; background-size: cover; animation: zoom-visual 2s;} .vis_board .txt_wrap {text-align: center; height: 113%; display: flex; align-items: center; justify-content: center;} .vis_board .txt_wrap h2 {color: #fff; font-size: 55px; font-weight: 500;opacity: 0;} .sub_title {text-align: center; padding: 120px 0;} .sub_title p {color: #444; font-size: 19rem; line-height: 1.6em; font-weight: 400;} .sub_wrap {position: relative;} .sub_wrap .outside {position: absolute; bottom: 30px; left: 50%; transform: translate(-50%, -50%);} .sub_wrap .outside span {width: 30px; height: 13px; text-indent: inherit; text-align: center;} .sub_wrap .outside span.paging_info {width: 40px;} .sub_wrap .outside span:hover, .sub_wrap .outside span:focus {filter: none;} .sub_wrap .outside #prev4 {background: url(/ycp_common/images/homepage/common/sub_prev_btn.png) no-repeat; margin-right: 10px; background-size: contain;} .sub_wrap .outside #next4 {background: url(/ycp_common/images/homepage/common/sub_next_btn.png) no-repeat; background-size: contain;} .sub_wrap .slick-dots {display: none!important;} .sub_slide {margin-bottom: 100px;} .icon_wrap {overflow: hidden; margin-bottom: 60px;} .icon_wrap ul {overflow: hidden;} .icon_wrap ul li {float: left; width: 25%; text-align: center;} .icon_wrap ul li h4 {font-size: 17rem; color: #222; font-weight: 600; margin: 27px auto 13px;} .icon_wrap ul li p {font-size: 17rem; color: #666; font-weight: 400;} .sub_detail {margin-bottom: 150px;} .sub_detail div {border-bottom: 1px solid #e2e2e2; padding: 55px 0;} .sub_detail div ul {display: inline-block; width: 79%; overflow: hidden;} .sub_detail div ul li {color: #666; font-weight: 400;} /* .sub_detail div ul li:last-child {margin-bottom: 0;} */ .sub_detail div ul li em {display: inline-block; width: 97%; vertical-align: top; font-size: 16rem; margin-bottom: 3px;} .sub_detail div h3 {color: #222; font-size: 30rem; font-weight: 600; display: inline-block; width: 20%; vertical-align: top;} .sub_detail .room_list {border-top: 1px solid #e2e2e2;} .sub_detail .room_list ul li {float: left; width: 33%; vertical-align: top;} .sub_detail .room_list ul li h4 {color: #222; font-size: 18rem; margin-bottom: 15px;} .sub_detail .room_list ul li span {line-height: 1.7em; font-size: 16rem;} .sub_detail .fac_list {border-top: 1px solid #252525;} .sub_detail .fac_list ul li {width: 24.5%;} .sub_detail .use ul li {margin-bottom: 5px;} .sub_detail .use ul li:before {content: ''; display: inline-block; width: 3px; height: 3px; background: #666; border-radius: 50%; vertical-align: middle; margin-right: 7px;} /* OTHER ROOM */ .otherRoom {background: #f7f7f7; padding: 80px 0 80px 60px; position: relative;} .otherRoom h2 {font-size: 43rem; color: #222; font-weight: 600; margin-bottom: 60px;} .otherRoom_slide .slick-slide {margin-right: 40px;} .otherRoom_slide div {position: relative;} .otherRoom_slide .img_wrap {overflow: hidden; display: block;} .otherRoom_slide .img_wrap img {transition:all 0.5s ease-in-out 0.1s; -moz-transition:all 0.5s ease-in-out 0.1s; -webkit-transition:all 0.5s ease-in-out 0.1s;} .otherRoom_slide div:hover > .img_wrap img {transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1);} .otherRoom_slide a {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background: rgb(55 86 54 / 85%); color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center;} .otherRoom_slide a:hover {opacity: 1;} .otherRoom_slide a p {font-size: 35rem; font-weight: 500; text-transform: uppercase; margin-bottom: 35px;} .otherRoom_slide a em {font-size: 18rem; font-weight: 400;} .otherRoom_slide a em:before {background: #fff; height: 1px; width: 35px; content: ''; display: inline-block; vertical-align: middle; margin-right: 10px;} .otherRoom .outside {position: absolute; top: 95px; z-index: 51; right: 60px;} .otherRoom .outside #prev5:after {position: absolute; right: -20px;content: ''; display: inline-block; width: 1px; height: 17px; background: #d1d1d1; vertical-align: top;} .otherRoom .outside #prev5 {background: url(/ycp_common/images/homepage/common/rm_prev_btn.png) no-repeat; margin-right: 20px; background-size: cover;} .otherRoom .outside #next5 {background: url(/ycp_common/images/homepage/common/rm_next_btn.png) no-repeat; margin-left: 20px; background-size: cover;} /* *************** FOOTER *************** */ .ins .footer_view {position: relative; padding: 170px 0; height: 100%; background: url(/ycp_common/images/homepage/index/footer_bg.jpg) top center no-repeat; background-size: cover;} .footer_info {position: absolute; bottom: 0; width: 100%; background: #1E1928; padding: 70px 0 110px; color: #a8aba9; font-size: 16rem;} .footer_info .company_info {width: 50%;} .footer_info .company_info .rules {overflow: hidden; margin-bottom: 20px;margin-top: 9px;} .footer_info .company_info .rules li {color: #fff; font-size: 18rem; display: inline-block; padding-right: 20px; margin-right: 20px; border-right: 1px solid #46534c;} .footer_info .company_info .rules li:last-child {border: none;} .footer_info .company_info .rules li b {font-weight: 600;} .footer_info .company_info .info_content {margin-bottom: 30px; color: #acacac;} .footer_info .company_info .info_content li + li {margin-top: 10px;} .footer_info .company_info .info_content li span {position: relative;} .footer_info .company_info .info_content li span + span {padding-left: 23px;} .footer_info .company_info .info_content li span + span::after{ content: ""; position: absolute; background: #515151; width: 1px; height: 12px; top: 50%; left: 11px; margin-top: -6px; } .footer_info .company_info .copyright {font-weight: 400; color: #888;} .footer_info .contact_wrap {width: 30%;text-align: right;} .footer_info .contact_wrap > div {display: inline-block; vertical-align: top; margin-right: 150px;} .footer_info .contact_wrap > div.follow {margin-right: 0;} .footer_info .contact_wrap h3 {font-weight: 600; margin-bottom: 22px;} .footer_info .contact_wrap p {color: #fff; font-size: 35rem; font-weight: 100;} .footer_info .contact_wrap .sns li {display: inline-block;margin-right: 14px;} .footer_info .contact_wrap .sns li a {background: #353535; border-radius: 50%; width: 39px; height: 39px; text-align: center; line-height: 38px;} #sub_fullpage .footer_info {padding: 70px 0; min-height: 370px; margin-top: 140px;} .ins .relative, .relative {position: static; height: auto; padding: 0;} .relative .footer_info {position: relative;} .booking {position: relative; opacity: 0; transform: translateY(50%);} .booking.active {opacity: 1; transform: translate(0); transition: 1s 0.5s; } #container .booking {opacity: 1; transform: translate(0); } .footer_wrap p {font-size: 24rem;color: #333333;font-weight: 400;word-break: keep-all;} .footer_wrap h3 {font-size: 40rem;margin-top: 12px;word-break: keep-all;} .footer_wrap a { padding: 19px 121px; border: none; margin-top: 35px; color: #fff; height: 100%; font-size: 17px; font-weight: 500; line-height: 1; background: #F54B1E; } .policy {margin-top: 15px; color: #bcc1cc;} .policy li {display: inline-block; padding: 3px 8px;} .policy li select {background: #2d2d2d; background: url(/ycp_common/images/homepage/common/arrow_down.png) right 10px center no-repeat; width: 241px; color: #a8aba9; border: 1px solid #a8aba9; padding: 14px 10px; font-size: 14px;background-size: 13px 9px;} .policy li select option {color: #333;} .footer_info .wrap1800 {display: flex;justify-content: space-between;gap: 20px;} .footer_logo img {width: 250px;min-width: 250px;} #about_fullpage .ins .footer_view {position: relative; padding: 170px 0; height: 100%; background: url(/ycp_common/images/homepage/index/footer_bg02.jpg) top center no-repeat; background-size: cover;} #example_fullpage .ins .footer_view {position: relative; padding: 170px 0; height: 100%; background: url(/ycp_common/images/homepage/index/footer_bg03.jpg) top center no-repeat; background-size: cover;} #solution_fullpage .ins .footer_view {position: relative; padding: 170px 0; height: 100%; background: url(/ycp_common/images/homepage/index/footer_bg04.jpg) top center no-repeat; background-size: cover;} #introduce_fullpage .ins .footer_view {position: relative; padding: 170px 0; height: 100%; background: url(/ycp_common/images/homepage/index/footer_bg03.jpg) top center no-repeat; background-size: cover;} #introduce_fullpage .ins.footer-bg .footer_view {position: relative; padding: 145px 0; height: 100%;background: none;} #introduce_fullpage .ins.footer-bg {background: url(/ycp_common/images/homepage/index/footer_bg06.jpg) top center no-repeat; background-size: cover;} /* OKEY */ #okey1_fullpage .main_slide_wrap .main_slide .okey_visual01 {background: url(/ycp_common/images/homepage/index/okey_visual08.jpg) center center no-repeat;background-size: cover;height: 100vh;} #okey2_fullpage .main_slide_wrap .main_slide .okey_visual01 {background: url(/ycp_common/images/homepage/index/okey_visual02.jpg) center center no-repeat;background-size: cover;height: 100vh;} #okey3_fullpage .main_slide_wrap .main_slide .okey_visual01 {background: url(/ycp_common/images/homepage/index/okey_visual03.jpg) center center no-repeat;background-size: cover;height: 100vh;} #okey4_fullpage .main_slide_wrap .main_slide .okey_visual01 {background: url(/ycp_common/images/homepage/index/okey_visual04.jpg) center center no-repeat;background-size: cover;height: 100vh;} #okey5_fullpage .main_slide_wrap .main_slide .okey_visual01 {background: url(/ycp_common/images/homepage/index/okey_visual05.jpg) center center no-repeat;background-size: cover;height: 100vh;} #okey6_fullpage .main_slide_wrap .main_slide .okey_visual01 {background: url(/ycp_common/images/homepage/index/okey_visual06.jpg) center center no-repeat;background-size: cover;height: 100vh;} #okey7_fullpage .main_slide_wrap .main_slide .okey_visual01 {background: url(/ycp_common/images/homepage/index/okey_visual07.jpg) center center no-repeat;background-size: cover;height: 100vh;} .img_con_wrap .ins, .img_con_wrap .ins > div, .img_con_wrap.fp-table {height: auto !important;} .img_con_wrap .ins > div {padding: 90px 0;} .list_view.type2 {padding: 200px 0;} .list_view.type2 .img_wrap {position: relative;} .list_view.type2 .promotion_slide div {margin: 0;margin-right: 10px;} .list_view.type2 .promotion_wrap.active .promotion_slide {padding-left: 50px;} .list_view.type2 .hover_wrap { opacity: 0; width: 100%; height: 100%; position: absolute; background: rgb(0 0 0 / 80%); top: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; } .list_view.type2 .hover_wrap {color: #fff;font-size: 25rem;} .list_view.type2 a:hover .hover_wrap {opacity: 1; transition: 0.5s;} #okey1_fullpage .index03 .intro_bg2 {background: url(/ycp_common/images/homepage/okey/intro01.jpg) right center no-repeat;} .fc-o {color: #f64b1f;} /* OKEY - 무인관제 */ #okey2_fullpage .index05 .intro_bg2 {background: url(/ycp_common/images/homepage/index/main01.jpg) right center no-repeat;background-size: cover !important;} .img_con {text-align: center;} .img_con h2 {font-size: 45rem;color: #101010;line-height: 1.4em;font-weight: 600;opacity: 0;transform: translateY(80px);} .img_con.active h2 {opacity: 1;transform: translate(0);transition: 1s 0.8s;margin-bottom: 30px;} .img_con p {font-size: 20rem;color: #666;line-height: 1.5em;font-weight: 400;opacity: 0;transform: translateY(70px);} .img_con.active p {opacity: 1;transform: translate(0);transition: 1.1s 1.1s;margin-bottom: 50px;} .img_con img {opacity: 0;transform: translateY(80px);max-width: 1600px;} .img_con.active img {opacity: 1;transform: translate(0);transition: 1.3s 1.3s;} #okey2_fullpage .intro3 .intro_bg3 {background: url(/ycp_common/images/homepage/okey/system07.jpg) center bottom no-repeat;} #okey2_fullpage .ins .footer_view {position: relative;padding: 170px 0;height: 100%;background: url(/ycp_common/images/homepage/okey/system_footer.jpg) top center no-repeat;background-size: cover;} /* 기존 템플릿 변형 .intro3.type2 .txt_wrap {display: block;margin-top: 0;} .intro3.type2.active .txt_wrap h2 {width: 100%;float: none;text-align: center;} .intro3.type2.active .txt_wrap p {padding: 0 100px;text-align: center;margin-top: 30px;} .intro3.type2 .intro_bg3 {height: 550px;} .intro3.type2.active .intro_bg3 {bottom: 50px;background-size: contain !important;} */ /* OKEY - 린넨서비스 */ #okey3_fullpage .index05 .intro_bg2 {background: url(/ycp_common/images/homepage/okey/laundry01.jpg) right center no-repeat;background-size: cover !important;} #okey3_fullpage .ins .footer_view {position: relative;padding: 170px 0;height: 100%;background: url(/ycp_common/images/homepage/okey/laundry_footer.jpg) top center no-repeat;background-size: cover;} /* OKEY - MRO */ #okey4_fullpage .mro01 .intro_bg2 {background: url(/ycp_common/images/homepage/okey/mro01.jpg) right center no-repeat;background-size: cover !important;} #okey4_fullpage .type02 .ins .footer_view {position: relative;padding: 170px 0;height: 100%;background: url(/ycp_common/images/homepage/okey/mro_footer02.jpg) top center no-repeat;background-size: cover;} #okey4_fullpage .intro.solution .txt_wrap {position: relative;} #okey4_fullpage .intro.solution .txt_wrap .num_box {position: relative;} #okey4_fullpage .intro.solution .txt_wrap span.tit {color: #a1a1a1;font-size: 23rem;margin-bottom: 50px;display: block;} #okey4_fullpage .intro.solution .txt_wrap span.des {font-size: 20rem;color: #666;margin-bottom: 0;font-weight: 400;line-height: 1.5em;display: block;} #okey4_fullpage .intro.solution .txt_wrap h2 {margin-top: 30px;font-size: 45rem;font-weight: 600;margin-bottom: 30px;color: #101010;line-height: 1.4em;} #okey4_fullpage .intro.solution .txt_wrap p {margin-bottom: 0;} #okey4_fullpage .intro.solution .txt_wrap a {font-weight: 400;color: #fff;margin-top: 70px;padding: 17px 80px 17px 30px;font-size: 16px;width: 230px;background: #F54B1E url(/ycp_common/images/homepage/common/sub_next_btn02.png) right 38px center no-repeat;opacity: 0; transform: translateY(50%);} #okey4_fullpage .intro.solution.active .txt_wrap a {opacity: 1;transform: translate(0);transition: 1.5s 1.5s;} #okey4_fullpage .solution01 .intro_bg2 {background: url(/ycp_common/images/homepage/okey/mro06.jpg) right center no-repeat;} #okey4_fullpage .type01 .ins.footer-bg {background: url(/ycp_common/images/homepage/okey/mro_footer03.png) top center no-repeat;background-size: cover;} #okey4_fullpage .type01 .ins.footer-bg .footer_view {background: none;} /* OKEY - 푸드서비스 */ #okey5_fullpage .index05 .intro_bg2 {background: url(/ycp_common/images/homepage/okey/food01.jpg) right center no-repeat;background-size: cover !important;} #okey5_fullpage .ins .footer_view {position: relative;padding: 170px 0;height: 100%;background: url(/ycp_common/images/homepage/okey/food_footer.jpg) top center no-repeat;background-size: cover;} /* OKEY - 에어컨케어 */ #okey6_fullpage .index05.care01 .intro_bg2 {background: url(/ycp_common/images/homepage/okey/care03.jpg) right center no-repeat;} #okey6_fullpage .index05.care02 .intro_bg2 {background: url(/ycp_common/images/homepage/okey/care04.jpg) right center no-repeat;} #okey6_fullpage .ins .footer_view {position: relative;padding: 170px 0;height: 100%;background: url(/ycp_common/images/homepage/okey/care_footer.jpg) top center no-repeat;background-size: cover;} /* OKEY - 컨설팅 */ #okey7_fullpage .index05 .intro_bg2 {background: url(/ycp_common/images/homepage/okey/counsulting01.jpg) right center no-repeat;background-size: cover !important;} #okey7_fullpage .ins .footer_view {position: relative;padding: 170px 0;height: 100%;background: url(/ycp_common/images/homepage/okey/counsulting_footer.jpg) top center no-repeat;background-size: cover;} /* css 추가 수정 */ /* .ins > .list_view {display: flex;align-items: center;} */ /* 버튼 클래스 추가 */ .btn { font-weight: 400; color: #fff; margin-top: 30px; padding: 17px 80px 17px 30px; font-size: 16px; width: 230px; background: #F54B1E url(/ycp_common/images/homepage/common/sub_next_btn02.png) right 38px center no-repeat; } /* 팝업 슬라이드 추가 */ .bxslider4 .slick-prev { left: 19px; top: 48%; background: url(/ycp_common/images/homepage/common/index_prev.png) no-repeat; width: 50px; height: 50px; background-position: left center; } .bxslider4 .slick-next { right: 19px; top: 48%; background: url(/ycp_common/images/homepage/common/index_next.png) no-repeat; width: 50px; height: 50px; background-position: right center; } .bxslider4 .slick-arrow { position: absolute; margin-top: -16px; outline: 0; text-indent: -9999px; z-index: 99; display: inline-block; } .bxslider4 .slick-dots { position: absolute; bottom: 2%; width: 100%; z-index: 51; text-align: center; } .bxslider4 .slick-dots li { display: inline-block; } .bxslider4 .slick-dots button { text-indent: -9999px; display: block; width: 10px; height: 10px; margin: 0 4px; outline: 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 2px solid #231916; background: #231916; } .bxslider4 .slick-dots .slick-active button {background: #fff;border: 2px solid #fff;}