/************** 테블릿 시작**************/ @media screen and (max-width: 1199px) { header.pc_header .wrap {width:90%;} header.pc_header .wrap .gnb {margin-left:200px} #fullpage .wrapper .cont_box {width:90%} #fullpage .wrapper .main_top {margin-bottom:19px; font-size:21px;} #fullpage .wrapper .main_title {font-size:55px;} #fullpage .wrapper .main_bot{ font-size:22px;} #fullpage #contact .wrap {width:90%;} } /************** 테블릿 끝***************/ .root_daum_roughmap .cont {display: none;} /***************** 모바일 시작****************/ @media screen and (max-width: 767px){ .pc_header {display:none;} #fullpage .wrapper .main_top {margin-bottom:12px; font-size:14px;} #fullpage .wrapper .main_title {font-size:39px; line-height:1.1em;} #fullpage .wrapper .main_bot{ font-size:14px; margin-top:7px;} #fullpage .wrapper .main_top:after{margin-top:6px; width: 22px;} .scroll-link {bottom:1em;} #fullpage #nara {background: url('../images/bg_main02_m.jpg') no-repeat center; background-size: cover;} #fullpage #work {background: url('../images/bg_main03_m.jpg') no-repeat center; background-size: cover;} #fullpage #work .main_top, #fullpage #work .main_title, #fullpage #work .main_bot {} #fullpage #work .list_box {height:70%;} #fullpage #work .list_box ul {display:block;} #fullpage #work .list_box ul li {width:100%; height:30%; margin:7px 0;} #fullpage #work .list_box ul li a {display:flex;} #fullpage #work .list_box .img_box {overflow:hidden; width:50%;} #fullpage #work .list_box .txt_box {display:flex; align-items:center; padding:4px; width:50%; height:auto;} #fullpage #work .list_box .list_btn {display:none;} #fullpage #work .list_box dl dt {font-size:15px; color:#222;} #fullpage #work .list_box dl dd {font-size:11px; line-height:1.1em;} #fullpage #work .scroll-link {display:none;} .pop-container div.adapply_01 > div.adapply_box {padding:0;} #fullpage #contact {background: url('../images/bg_main04_m.jpg') no-repeat center; background-size: cover;} #contact .adapply_box li {flex-wrap:wrap;} #contact div.adapply_box .form_list{width:100%; padding: 3px 7px; border-bottom: none; display:flex; align-items:center;} #contact div.adapply_box .form_list label {color:#fff; font-size:18px;} #contact div.adapply_box .form_write{width:100%;padding: 3px 7px; border-bottom: none;} #contact div.adapply_box .form_write input {line-height:32px; font-size:15px;} #contact div.adapply_box .txt_red {color:#e6202b;} #contact div.adapply_box .form_write textarea {width: 100% !important; height: 40px; padding: 10px 0 0 10px; border: 1px solid #ddd;} #contact div.adapply_box .form_write .kcaptcha {width:350px; height:35px;} #contact div.adapply_box .adapply_top {text-align:center; color:#fff;} #contact div.adapply_box .adapply_top h1 {font-size:39px; font-weight:300;} #contact div.adapply_box .adapply_top p {font-size:14px; font-weight:100;} #contact div.adapply_box .category {padding-bottom:7px; margin-top:7px;} #contact div.adapply_box .adapply01_btn input {display:block; width:100%; height:46px; border:none; margin-top:7px; padding:0; background:#941b61; color:#fff;} #fp-nav {display:none;} input { -webkit-appearance: none; -webkit-border-radius: 0; } .body_content #footer .map_text {padding:11px 0;} .body_content #footer .map_text .wrap {width:90%; margin:0 auto;} .body_content #footer .map_text .wrap h2 {font-size:15px; margin-bottom:4px;} .body_content #footer .map_text .wrap p {font-size:12px; font-weight:100;} .body_content #footer footer {padding: 7px 0 27px 0;} .body_content #footer footer > div.footer_wrap > ul > li {margin-bottom:3px; padding-left:0;} .body_content #footer footer > div.footer_wrap > ul > li:last-of-type {font-size:12px; color:#ddd;} } /***************** 모바일 끝****************/ .wrapper .cont_box {display: block; position: relative; margin: 0 auto; width: 1200px; text-align:center; opacity:0;} .wrapper .fadeUp {opacity:1;} .wrapper .main_top{ margin-bottom:16px; font-size:24px; font-weight:100; line-height:1.6em; color:#fff; } .wrapper .main_top:after{ display: block; content: ''; margin: 0 auto; margin-top:10px; width: 47px; height: 1px; background: #fff; } .wrapper .main_title{ font-size:65px; font-weight: 300; line-height:1.5em; color:#fff; } .wrapper .main_bot{ font-size:23px; line-height:1.3em; color:#fff; font-weight: 100; } .wrapper #bg_video {position: absolute; bottom: 0; left: 0; overflow: hidden; width: auto; height: auto; min-width: 2200px; min-height: 100%;} #main .wrapper:after {display: block; content: ''; position:absolute; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5);} #fp-nav ul li a span, .fp-slidesNav ul li a span {background:#fff !important;} #nara {background: url('../images/bg_main02.jpg') no-repeat center; background-size: cover;} #nara:after {background: url('../images/bg_main02_on.jpg') no-repeat center; background-size: cover; content:""; width:100%; height:100%; display: block; position:absolute; top:0; left:0; z-index:9; opacity:0;} #fullpage > div.fadeIn:after {opacity:1;} #nara .cont_box {z-index:99;} #nara .cont_box .more_box {text-align:left; display:block;} /*#nara .main_top {margin-bottom:0; font-size:17px;}*/ #nara .main_top:after{ margin:10px 0 0 0; width: 40px; height: 1px; background: #fff; } /*#nara .main_title {font-size:50px;} #nara .main_bot {font-size:17px;}*/ #nara .more_btn {margin-top:25px; display: inline-block; padding: 10px 27px; border: 1px solid #fff; font-size: 13px; color:#fff; font-weight: 500; transition: background 0.5s linear;} #nara .more_btn:after {content: '';margin-left:23px; background:url('../images/more_on.png') no-repeat center;display: inline-block;width: 35px;height: 10px;} #work {background: url('../images/bg_main03.jpg') no-repeat center; background-size: cover;} #work .list_box ul {display:flex; justify-content:space-between; margin-top:27px;} #work .list_box ul li {width:32%; border-radius:4px; overflow:hidden; position:relative;} #work .list_box .img_box img {width:100%;} #work .list_box .txt_box {background:#fff; height:140px; padding:11px 31px;} #work .list_box dl dt {font-size:19px; color:#222;} #work .list_box dl dd {font-size:13px; color:#666; margin:3px 0 12px 0;} #contact {background: url('../images/bg_main04.jpg') no-repeat top center;} #contact .wrap {width:1200px; margin:0 auto;} #contact input{display: inline-block; vertical-align: middle; padding:0; padding-left: 10px; width: 100%; height: 32px; border: 1px solid #ddd; line-height: 38px;} #contact .adapply_box li {display:flex;} #contact .form_list{width:25%; padding: 12px 30px; border-bottom: 1px solid #e1e1e1; display:flex; align-items:center;} #contact .form_write{width:75%;padding: 12px 30px; border-bottom: 1px solid #e1e1e1;} #contact .txt_red {color:#e6202b;} #contact .form_write textarea {width: 100% !important; height: 180px; padding: 10px 0 0 10px; border: 1px solid #ddd;} #contact .form_write .kcaptcha {width:350px; height:35px;} #contact .adapply_top {text-align:center; color:#fff;} #contact .adapply_top h1 {font-size:40px; font-weight:300;} #contact .adapply_top p {font-size:17px; font-weight:100;} #contact .category {padding-bottom:7px; margin-top:117px;} #contact .adapply01_btn input {display:block; width:320px; height:46px; margin:0 auto; border:none; margin-top:7px; padding:0; background:#941b61; color:#fff;} #footer .wrap_controllers {display:none;} #footer .map_text {background:#333; padding:80px 0; border-bottom:1px solid rgba(255,255,255,0.4);} #footer .map_text .wrap {width:1200px; margin:0 auto;} #footer .map_text h2 {font-size:32px; color:#fff; margin-bottom:30px;} #footer .map_text p {font-size:16px; color:#fff;} .current:hover { transform: translateX(65px); transition:transform 0.7s; } .more-btn { visibility: visible; opacity: 1; } .fadeUp { animation: fadeUp; -moz-animation: fadeUp; /* Firefox */ -webkit-animation: fadeUp; /* Safari and Chrome */ -o-animation: fadeUp; /* Opera */ animation-duration : 1s; animation-timing-function: ease; } @keyframes fadeUp { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0%); } } @-moz-keyframes fadeUp { /* Firefox */ 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0%); } } @-webkit-keyframes fadeUp { /* Safari and Chrome */ 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0%); } } @-o-keyframes fadeUp { /* Opera */ 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0%); } } /****************main_slider**********************/ body {background-color:#fafafa;} div.main_slider{ -moz-box-sizing: border-box; /* Firefox */ -webkit-box-sizing: border-box; /* Safari */ box-sizing: border-box; /* CSS3 Standard */ height: 100%; } .main01 {position:relative;} .main01 .wrapper { width:100%;} .main01 .wrapper .slid_wrap { width:100%;} .main01 .wrapper .slid_wrap li{ width:100%;} .main01 .wrapper .slid_wrap li img{ } .main01 .wrapper .slid_wrap li img {width:100%;transform: translate(-50%, -50%);position: absolute;top: 50%;left: 50%;} .main01 div.text_area {position:absolute;transform: translate(-50%, 50%);left: 50%; top:50% } .main01 div.text_area02 {position:absolute;transform: translate(-50%, 50%);left: 50%; top:75%;width:100%;text-align:center;color:#fff;font-size:20px;font-family: 'NanumBarunGothic';font-weight: 200;line-height:35px;} .main01 div.text_area p img {} img.cover_img { transition: all 0.4s; opacity: 0;} img.cover_img:hover { opacity: 1;} @media all and (max-width:1850px) { .main01 .wrapper .slid_wrap li img {width: auto;height: 100%;transform: translate(-50%, -50%);position: absolute;top: 50%;left: 50%;} } @media all and (max-width:940px) { .main01 div.text_area02 p {padding:0 20px} } /********************main_renew*********************/ div.main_renew{ width: 100%; overflow: hidden; height: 1040px; position: relative; } div.main_renew > div.top{ height: 500px; width: 100%; background-color: #1d202a; padding-top: 100px; box-sizing: border-box; } div.main_renew > div.top > p{ font-size: 150px; font-weight: bold; color: rgba(255,255,255,0.1); text-align: center; line-height: 120px; } div.main_renew > div.float_img{ position: absolute; width: 1020px; overflow:hidden; top: 330px; left: 50%; margin-left: -510px; box-shadow: 30px 30px 0px #ffd200; } div.main_renew > div.float_img > img{ width: 100%; display: block; } div.main_renew > div.float_text{ position: absolute; width: 640px; height: 380px; background-color: #ffffff; top: 430px; right: 47%; box-shadow: 0px 0px 20px rgba(0,0,0,0.3); box-sizing: border-box; padding: 80px 0px 0px 120px; } div.main_renew > div.float_text > h2{ font-size: 50px; font-family: 'Nanum Barun Gothic'; font-weight: bold; color: #000000; text-align: left; position: relative; margin-bottom: 40px; } div.main_renew > div.float_text > h2 > img{ position: absolute; } div.main_renew > div.float_text > h2 > img.com1{ top: -50px; left: -50px; } div.main_renew > div.float_text > h2 > img.com2{ top: 100px; right: 75px; } div.main_renew > div.float_text > p{ font-family: 'Nanum Barun Gothic'; width: 450px; font-size: 20px; font-style: italic; line-height: 25px; color: #1d202a; } /****************main01**********************/ div.main01{ width: 100%; background-color: #201f1e; overflow: hidden; } /****************main02**********************/ div.main02{ width: 100%; overflow: hidden;position:relative;} div.main02 .wrapper{ width: 100%; } /*********첫번째 섹션**********/ div.main02 .wrapper ul.about_area01{ width: 100%; } div.main02 .wrapper ul.about_area01 li {float:left; width:50%; position:relative; overflow:hidden;} div.main02 .wrapper ul.about_area01 li .about_link_wrap {width:100%; height:100%; display:block;} div.main02 .wrapper ul.about_area01 li .about_link_wrap img.ture_img{width:100%;transform: translate(-50%, -50%);left: 50%;top: 50%;position:absolute; transition:all 0.5s;} div.main02 .wrapper ul.about_area01 li:hover .about_link_wrap img.cover_img{ opacity: 1;} div.main02 .wrapper ul.about_area01 li .about_link_wrap img.dum_img{width:100%;} div.main02 .wrapper ul.about_area01 li:hover .about_link_wrap img.ture_img{width:103%;} div.main02 .wrapper ul.about_area01 li .about_link_wrap p {color:#fff; font-size:30px; transform: translate(-50%, 0%); text-align:center;position:absolute;left:50%;width:100%;} div.main02 .wrapper ul.about_area01 li .about_link_wrap .about_title{top:50%; transitioN:all 0.4s;} div.main02 .wrapper ul.about_area01 li:hover .about_link_wrap .about_title{top:40%; } div.main02 .wrapper ul.about_area01 li .about_link_wrap .about_title01{ /*top:40%;*/ } div.main02 .wrapper ul.about_area01 li .about_link_wrap .about_sub01{top:47%; font-size:20px;font-weight: 200; overflow: hidden; opacity:0; transition:all 0.5s;} div.main02 .wrapper ul.about_area01 li:hover .about_link_wrap .about_sub01{top:49%;opacity:1;} div.main02 .wrapper ul.about_area01 li .about_link_wrap .about_plus01{top:56%; font-size:20px;font-weight: 200;transition:all 0.5s; opacity:0;} div.main02 .wrapper ul.about_area01 li:hover .about_link_wrap .about_plus01{top:60%; opacity:1;} /*회원*/ div.main02 .wrapper ul.about_area02{ width:calc( 100% - 200px); margin:0 auto;padding-top:100px;padding-bottom:100px;} div.main02 .wrapper ul.about_area02 > li { float:left; width: calc( 33.3333% - 30px ); margin: 20px 22.5px 15px 22.5px; position:relative; overflow:hidden;} div.main02 .wrapper ul.about_area02 > li:nth-child(3n-2) {margin-left: 0;} div.main02 .wrapper ul.about_area02 > li:nth-child(3n) {margin-right: 0;} div.main02 .wrapper ul.about_area02 > li:nth-child(-n+3) {margin-top: 0;} div.main02 .wrapper ul.about_area02 > li img {width:100%;} div.main02 .wrapper ul.about_area02 > li .member_text {padding-top:20px; } div.main02 .wrapper ul.about_area02 > li .member_text p:nth-child(1) {padding-bottom:15px } div.main02 .wrapper ul.about_area02 > li .member_text p:nth-child(1) strong{font-size:20px;font-weight:400;} div.main02 .wrapper ul.about_area02 > li .member_text ul li { line-height: 20px; font-size: 14px; padding-left: 9px; background-image: url(../images/common/list_deco.png); background-repeat: no-repeat; background-size: 5px; background-position: left 6px;} @media all and (max-width:1850px) { div.main02 .wrapper ul.about_area01 li .about_link_wrap img.ture_img {width: auto;height: 100.5%;transform: translate(-50%, -50%);left: 50%;top: 50%;position: absolute; transition:all 0.5s;} div.main02 .wrapper ul.about_area01 li:hover .about_link_wrap img.ture_img{width:auto;height: 103.5%;} } @media all and (max-width:1170px) { div.main02 .wrapper ul.about_area02 { width: calc( 100% - 80px);} div.main02 .wrapper ul.about_area02 > li { height:400px; } div.main02 .wrapper ul.about_area02 > li { width: calc( 33.3333% - 14px ); margin: 20px 10px 15px 10px; } } @media all and (max-width:995px) { div.main02 .wrapper ul.about_area02 > li { width: calc( 50% - 15px ); } div.main02 .wrapper ul.about_area02 > li:nth-child(3) { margin-top:20px; margin-left:0; } div.main02 .wrapper ul.about_area02 > li:nth-child(2n) { margin: 20px 0px 15px 10px; } div.main02 .wrapper ul.about_area02 > li:nth-child(2n-1) { margin: 20px 10px 15px 0px; } } @media all and (max-width:560px) { div.main02 .wrapper ul.about_area01 li .about_link_wrap .about_title01 { top: 50%;} div.main02 .wrapper ul.about_area01 li .about_link_wrap .about_sub01{display:none;} div.main02 .wrapper ul.about_area01 li .about_link_wrap .about_plus01{display:none;} } @media all and (max-width:530px) { div.main02 .wrapper ul.about_area01 li {width:100%;} div.main02 .wrapper ul.about_area01 li .about_link_wrap img.ture_img { width: 100%; height: auto;} div.main02 .wrapper ul.about_area01 li:hover .about_link_wrap img.ture_img{ width:101%; height: auto;} div.main02 .wrapper ul.about_area02 > li { width:100%; height:auto;} div.main02 .wrapper ul.about_area02 > li:nth-child(3) { margin-top:20px; margin-left:0; } div.main02 .wrapper ul.about_area02 > li:nth-child(2n) { margin: 20px 0px 15px 0px; } div.main02 .wrapper ul.about_area02 > li:nth-child(2n-1) { margin: 20px 0px 15px 0px; } } /*********두번째 섹션**********/ /****************main03**********************/ div.main03 .wrapper ul.ad_area01{ width: 100%; } div.main03 .wrapper ul.ad_area01 li {float:left; width:50%; position:relative; overflow:hidden;} div.main03 .wrapper ul.ad_area01 li .ad_link_wrap {width:100%; height:100%; display:block;} div.main03 .wrapper ul.ad_area01 li .ad_link_wrap img.ture_img{width:100%;transform: translate(-50%, -50%);left: 50%;top: 50%;position:absolute; transition:all 0.5s;} div.main03 .wrapper ul.ad_area01 li .ad_link_wrap img.dum_img{width:100%;} div.main03 .wrapper ul.ad_area01 li:hover .ad_link_wrap img.ture_img{width:103%;} div.main03 .wrapper ul.ad_area01 li:hover .ad_link_wrap img.cover_img{ opacity: 1;} div.main03 .wrapper ul.ad_area01 li .ad_link_wrap p {color:#fff; font-size:30px; transform: translate(-50%, 0%); text-align:center;position:absolute;left:50%;width:100%;word-break: keep-all;} div.main03 .wrapper ul.ad_area01 li .ad_link_wrap .ad_title{top:50%; transition:all 0.4s;} div.main03 .wrapper ul.ad_area01 li:hover .ad_link_wrap .ad_title{top:40%; } div.main03 .wrapper ul.ad_area01 li .ad_link_wrap .ad_title01{/*top:40%;*/word-break: keep-all;} div.main03 .wrapper ul.ad_area01 li .ad_link_wrap .ad_sub01{top:47%; font-size:20px;font-weight: 200;opacity:0; transition:all 0.5s; } div.main03 .wrapper ul.ad_area01 li:hover .ad_link_wrap .ad_sub01{top:49%;opacity:1; } div.main03 .wrapper ul.ad_area01 li .ad_link_wrap .ad_plus01{top:57%; font-size:20px;font-weight: 200; transition:all 0.5s;opacity:0; } div.main03 .wrapper ul.ad_area01 li:hover .ad_link_wrap .ad_plus01{top:60%;opacity:1; } @media all and (max-width:1850px) { div.main03 .wrapper ul.ad_area01 li .ad_link_wrap img.ture_img {width: auto;height: 100.5%;transform: translate(-50%, -50%);left: 50%;top: 50%;position: absolute; transition:all 0.5s;} div.main03 .wrapper ul.ad_area01 li:hover .ad_link_wrap img.ture_img{width:auto;height: 103.5%;} } @media all and (max-width:560px) { div.main03 .wrapper ul.ad_area01 li .ad_link_wrap .ad_title01 {top:50%} div.main03 .wrapper ul.ad_area01 li .ad_link_wrap .ad_sub01{display:none;} div.main03 .wrapper ul.ad_area01 li .ad_link_wrap .ad_plus01 {display:none;} } @media all and (max-width:530px) { div.main03 .wrapper ul.ad_area01 li {width:100%; height:auto;} div.main03 .wrapper ul.ad_area01 li:hover .ad_link_wrap img.ture_img{width:103%;height:auto;} } /*********세변째 섹션**********/ /****************main04**********************/ div.main04{ width: 100%; overflow: hidden; } div.main04 .wrapper ul.design_area01{ width: 100%; } div.main04 .wrapper ul.design_area01 li { width: 100%;position:relative; } div.main04 .wrapper ul.design_area01 li .design_link_wrap {width:100%; height:100%; display:block;} div.main04 .wrapper ul.design_area01 li .design_link_wrap img {width:100%;transform: translate(-50%, -50%);left: 50%;top: 50%;position:absolute;} div.main04 .wrapper ul.design_area01 li .design_link_wrap img.cover_img { opacity: 0;} div.main04 .wrapper ul.design_area01 li:hover .design_link_wrap img.cover_img { opacity: 1;} div.main04 .wrapper ul.design_area01 li .design_link_wrap p {color:#fff; font-size:30px; transform: translate(-50%, 0%); text-align:center;position:absolute;left:50%;width:100%;} div.main04 .wrapper ul.design_area01 li .design_link_wrap .design_title {top:50%; transition:all 0.4s; } div.main04 .wrapper ul.design_area01 li:hover .design_link_wrap .design_title {top:34%; } div.main04 .wrapper ul.design_area01 li .design_link_wrap .design_title01 {/*top:34%;*/} div.main04 .wrapper ul.design_area01 li .design_link_wrap .design_sub01 {top:46%; font-size:20px;font-weight: 200;opacity:0;transition:all 0.4s;} div.main04 .wrapper ul.design_area01 li:hover .design_link_wrap .design_sub01 {top:48%;opacity:1;} div.main04 .wrapper ul.design_area01 li .design_link_wrap .design_plus01 {top:62%; font-size:20px;font-weight: 200;} @media all and (max-width:1850px) { div.main04 .wrapper ul.design_area01{ height: 100%;position:relative; } div.main04 .wrapper ul.design_area01 li { height: 33.3333%; width:auto; } div.main04 .wrapper ul.design_area01 li .design_link_wrap img { width:auto; height: 100.5%;transform: translate(-50%, -50%);left: 50%;top: 50%;position:absolute;} } /*********네번째 섹션**********/ /****************main05**********************/ div.main05 { width: 100%; overflow: hidden; } div.main05 .wrapper ul.video_area01{ width: 100%; } div.main05 .wrapper ul.video_area01 li {float:left; width:50%; position:relative; overflow:hidden;} div.main05 .wrapper ul.video_area01 li .video_link_wrap {width:100%; height:100%; display:block;} div.main05 .wrapper ul.video_area01 li .video_link_wrap img {width:100%;} div.main05 .wrapper ul.video_area01 li .video_link_wrap img.cover_img {width: auto; height: 100.5%; transform: translate(-50%, -50%); left: 50%; top: 50%; position: absolute;} div.main05 .wrapper ul.video_area01 li:hover .video_link_wrap img.cover_img { opacity: 1;} div.main05 .wrapper ul.video_area01 li .video_link_wrap p {color:#fff; font-size:30px; transform: translate(-50%, 0%); text-align:center;position:absolute;left:50%;width:100%;} div.main05 .wrapper ul.video_area01 li .video_link_wrap .video_title{top:50%;transition:all 0.4s; } div.main05 .wrapper ul.video_area01 li:hover .video_link_wrap .video_title{top:43%; } div.main05 .wrapper ul.video_area01 li .video_link_wrap .video_title01{/*top:43%;*/ } div.main05 .wrapper ul.video_area01 li .video_link_wrap .video_sub01{top:46.5%; font-size:20px;font-weight: 200;word-break: keep-all;opacity:0; transition:all 0.5s;} div.main05 .wrapper ul.video_area01 li:hover .video_link_wrap .video_sub01{top:48.5%; opacity:1; } div.main05 .wrapper ul.video_area01 li .video_link_wrap .video_plus01{top:52%; font-size:20px;font-weight: 200; opacity:0; transition:all 0.5s;} div.main05 .wrapper ul.video_area01 li:hover .video_link_wrap .video_plus01{top:55%; opacity:1;} @media all and (max-width:1700px) { div.main05 .wrapper ul.video_area01 li {height:100%;} div.main05 .wrapper ul.video_area01 li .video_link_wrap img {width:auto; height: 100.5%;transform: translate(-50%, -50%);left: 50%;top: 50%;position:absolute;} } @media all and (max-width:560px) { div.main05 .wrapper ul.video_area01 li { width:100%; height:auto;} div.main05 .wrapper ul.video_area01 li .video_link_wrap img {width: 100%; height:auto;} div.main05 .wrapper ul.video_area01 li .video_link_wrap .video_sub01 {top: 55.5%;} div.main05 .wrapper ul.video_area01 li .video_link_wrap .video_plus01 {top: 66%;} } @media all and (max-width:400px) { div.main05 .wrapper ul.video_area01 li .video_link_wrap .video_title01{top: 40%;word-break: keep-all;} div.main05 .wrapper ul.video_area01 li .video_link_wrap .video_plus01 { top: 60%; word-break: keep-all; } } /*********다섯번째 섹션**********/ /****************main06**********************/ div.main06 { width: 100%; overflow: hidden; margin-bottom:50px;} div.main06 .wrapper ul.potofolio_area01{ width: 100%; } div.main06 .wrapper ul.potofolio_area01 li { width: 100%; position:relative; overflow:hidden;} div.main06 .wrapper ul.potofolio_area01 li .potofolio_link_wrap {width:100%; height:100%; display:block;} div.main06 .wrapper ul.potofolio_area01 li .potofolio_link_wrap img {width:100%;} div.main06 .wrapper ul.potofolio_area01 li .potofolio_link_wrap p {color:#fff; font-size:30px; transform: translate(-50%, 0%); text-align:center;position:absolute;left:50%;width:100%;} div.main06 .wrapper ul.potofolio_area01 li .potofolio_link_wrap .potofolio_title{top:50%; } div.main06 .wrapper ul.potofolio_area01 li .potofolio_link_wrap .potofolio_title01{ top: 39%;font-size: 42px;font-weight: 500;} div.main06 .wrapper ul.potofolio_area01 li .potofolio_link_wrap .potofolio_sub01{top: 54%;font-size: 20px;font-weight: 200;} div.main06 .wrapper ul.potofolio_area01 li .potofolio_link_wrap .potofolio_plus01{top: 57%;font-size: 20px;font-weight: 200;} div.main06 .wrapper ul.potofolio_area01 li .potofolio_link_wrap .potofolio_plus01 a{font-size: 20px;font-weight: 200;color:#fff;} /*b구역*/ div.main06 { width: 100%; overflow: hidden; background-color:#fafafa;} div.main06 .main06_b_wrapper {width: calc( 100% - 200px ); margin:0 auto; padding :100px 0;position:relative;} div.main06 .main06_b_wrapper .main06_b_section_01 {position:relative; } div.main06 .main06_b_wrapper .main06_b_section_01.on {visibility: visible; } div.main06 .main06_b_wrapper .main06_b_section_01.off {visibility: hidden; } div.main06 .main06_b_wrapper .main06_b_section_01 .web_ , div.main06 .main06_b_wrapper .main06_b_section_01 .landing_ , div.main06 .main06_b_wrapper .main06_b_section_01 .visuel_ , div.main06 .main06_b_wrapper .main06_b_section_01 .etc_ { position: absolute; top: 0px; visibility: hidden;} div.main06 .main06_b_wrapper .main06_b_section_01 .all_.on , div.main06 .main06_b_wrapper .main06_b_section_01 .web_.on , div.main06 .main06_b_wrapper .main06_b_section_01 .landing_.on , div.main06 .main06_b_wrapper .main06_b_section_01 .visuel_.on , div.main06 .main06_b_wrapper .main06_b_section_01 .etc_.on {visibility: visible;} div.main06 .main06_b_wrapper .main06_b_section_01 .all_.off , div.main06 .main06_b_wrapper .main06_b_section_01 .web_.off , div.main06 .main06_b_wrapper .main06_b_section_01 .landing_.off , div.main06 .main06_b_wrapper .main06_b_section_01 .visuel_.off , div.main06 .main06_b_wrapper .main06_b_section_01 .etc_.off {visibility: hidden;} div.main06 .main06_b_wrapper .main06_b_section_02 { position: absolute; top: 250px; left: 0; visibility: hidden;} div.main06 .main06_b_wrapper .main06_b_section_02.on { visibility: visible; } div.main06 .main06_b_wrapper .main06_b_section_02.off { visibility: hidden; } div.main06 .main06_b_wrapper .main06_b_section_02 .web_ , div.main06 .main06_b_wrapper .main06_b_section_02 .landing_ , div.main06 .main06_b_wrapper .main06_b_section_02 .visuel_ , div.main06 .main06_b_wrapper .main06_b_section_02 .etc_ { position: absolute; top: 0px; visibility: hidden;} div.main06 .main06_b_wrapper .main06_b_section_02 .all_.on , div.main06 .main06_b_wrapper .main06_b_section_02 .web_.on , div.main06 .main06_b_wrapper .main06_b_section_02 .landing_.on , div.main06 .main06_b_wrapper .main06_b_section_02 .visuel_.on , div.main06 .main06_b_wrapper .main06_b_section_02 .etc_.on {visibility: visible;} div.main06 .main06_b_wrapper .main06_b_section_02 .all_.off , div.main06 .main06_b_wrapper .main06_b_section_02 .web_.off , div.main06 .main06_b_wrapper .main06_b_section_02 .landing_.off , div.main06 .main06_b_wrapper .main06_b_section_02 .visuel_.off , div.main06 .main06_b_wrapper .main06_b_section_02 .etc_.off {visibility: hidden;} div.main06 .main06_b_wrapper .main06_b_title{width:100%;} div.main06 .main06_b_wrapper .main06_b_title ul{position:relative;width:100%;} div.main06 .main06_b_wrapper .main06_b_title ul li {width:50%;float:left; text-align:center;height: 40px;line-height: 35px;cursor: pointer;} div.main06 .main06_b_wrapper .main06_b_title ul li.on {border-bottom:5px solid #941b61;} div.main06 .main06_b_wrapper .main06_b_sub_title ul{position:relative; width:500px;margin:50px auto 0 auto;} div.main06 .main06_b_wrapper .main06_b_sub_title ul li {width:20%;float:left; text-align:center;height: 50px; line-height:50px;cursor: pointer;} div.main06 .main06_b_wrapper .main06_b_sub_title ul li.on {border-bottom:5px solid #941b61;} div.main06 .main06_b_wrapper .main06_b_all_con ul {width:100%; } div.main06 .main06_b_wrapper .main06_b_section_01 .main06_b_all_con.all_ ul {margin-top:40px;} div.main06 .main06_b_wrapper .main06_b_section_02 .main06_b_all_con ul {margin-top:40px; } div.main06 .main06_b_wrapper .main06_b_all_con ul li {float:left; width:calc( 33.3333% - 15px ); margin: 7.5px; overflow:hidden; margin-bottom:30px; } div.main06 .main06_b_wrapper .main06_b_all_con ul li .potofolio_b_img_wrap {width:100%;} div.main06 .main06_b_wrapper .main06_b_all_con ul li .potofolio_b_img_wrap img {width:100%;} div.main06 .main06_b_wrapper .main06_b_all_con ul li .potofolio_b_text_wrap {width:100%; text-align:center;} div.main06 .main06_b_wrapper .main06_b_all_con ul li .potofolio_b_text_wrap p.small { color: #969696; padding-top: 15px; font-size: 14px; font-weight: 100;} div.main06 .main06_b_wrapper .main06_b_all_con ul li .potofolio_b_text_wrap p {padding-top:4px;font-size:19px;} @media all and (max-width:1170px) { div.main06 .main06_b_wrapper { width: calc( 100% - 80px ); } div.main06 .wrapper ul.potofolio_area01 li .potofolio_link_wrap .potofolio_sub01 {top: 69%;} div.main06 .wrapper ul.potofolio_area01 li .potofolio_link_wrap .potofolio_plus01 {top: 76%;} } @media all and (max-width:700px) { div.main06 .wrapper ul.potofolio_area01 li .potofolio_link_wrap .potofolio_sub01{display:none;} div.main06 .main06_b_wrapper { width: calc( 100% - 80px ); } } @media all and (max-width:560px) { div.main06 .main06_b_wrapper .main06_b_sub_title ul {width:100%} div.main06 .main06_b_wrapper .main06_b_all_con ul li {width:calc( 50% - 15px ); } div.main06 .wrapper ul.potofolio_area01 li .potofolio_link_wrap .potofolio_plus01{display:none;} } @media all and (max-width:370px) { div.main06 .main06_b_wrapper { width: calc( 100% - 45px );} div.main06 .main06_b_wrapper .main06_b_sub_title ul li { width: 33.3333%;border-bottom: 5px solid #fafafa;} div.main06 .main06_b_wrapper .main06_b_sub_title ul li:nth-child(n+4) { width: calc( 50% - 40px );} div.main06 .main06_b_wrapper .main06_b_sub_title ul li:nth-child(4) { margin-left:40px} div.main06 .main06_b_wrapper .main06_b_sub_title ul li:nth-child(5) { margin-right:40px} div.main06 .main06_b_wrapper .main06_b_section_02 { top: 305px;} } /*********여섯번째 섹션**********/ /****************main07**********************/ div.main07 { width: 100%; overflow: hidden; background-color:#fafafa;} div.main07 .consult_wrap { width:calc( 100% - 200px); margin:100px auto ; height:800px;position:relative;background-color:#fff} div.main07 .consult_wrap .consult_img {position:absolute; top:-40px; left: 7%; box-shadow: 9px 7px 17px 0px rgba(0, 0, 0, 0.24);} div.main07 .consult_wrap .consult_img p {position:absolute;top: 63%;font-size: 15px; width:100%;font-weight: 200;color:#fff;text-align:center;} div.main07 .consult_wrap .consult_app {margin-left: 57%;} .clear:after {content:'';display: block;clear: both;} /*신청폼*/ div.adapply_01 > div.adapply_box{float:left; padding-top: 100px;width:100%;} div.adapply_01 > div.adapply_box > div.adapply_top > h1{width: 100%;font-size: 30px;margin: 0 auto;margin-bottom: 15px;color:#941b61;} div.adapply_01 > div.adapply_box > div.adapply_top > ul.contact{width:500px;border-top:1px solid #000000;padding-top: 30px;margin:0 auto;} div.adapply_01 > div.adapply_box > div.adapply_top > ul.contact li{font-size:18px;font-weight:900;float:left;margin-right: 6px;margin-bottom: 30px;} div.adapply_01 > div.adapply_box > div.adapply_top > ul.contact li img{vertical-align: middle;} div.adapply_01 > div.adapply_box > div.adapply_top > ul.map{width:500px;clear:both;margin: 0 auto;margin-bottom:20px;border-bottom:1px solid #000000;padding-bottom: 30px;} div.adapply_01 > div.adapply_box > div.adapply_top > ul.map p{margin-right: 19px; text-align: center;} div.adapply_01 > div.adapply_box > div.adapply_top > ul.map p{width:33px;height:39px;float:left;} div.adapply_01 > div.adapply_box > div.adapply01_bottom{width:1000px; margin: 50px auto 0 auto;} div.adapply_01 > div.adapply_box > div.adapply01_bottom >ul.category li input[type="text"]{width:500px;height:35px;color:#a3a3a3;box-sizing:border-box; border: 1px solid #ededed; background-color: #fff; padding-left: 20px; } #kcaptcha_image { float:left;} div.adapply_01 > div.adapply_box > div.adapply01_bottom >ul.category li input[type="text"].kcaptcha{width:380px; height:35px;line-height:35px; margin-left:10px; clear:both;} div.adapply_01 > div.adapply_box > div.adapply01_bottom >ul.category li input[type="text"]:focus{ border: 2px solid #ffd200; } div.adapply_01 > div.adapply_box > div.adapply01_bottom >ul.category li {margin-bottom: 10px;} div.adapply_01 > div.adapply_box > div.adapply01_bottom >ul.category li textarea{width:500px;height:150px;margin-bottom: 5px;color:#a3a3a3; border: 1px solid #ededed; background-color: #fff; padding-left: 20px; padding-top: 20px; box-sizing: border-box; } div.adapply_01 > div.adapply_box > div.adapply01_bottom >ul.category li textarea:focus{ border: 2px solid #ffd200; } div.adapply_01 > div.adapply_box > div.adapply01_bottom >ul.category > li > select{ width:500px; height:40px; color:#a3a3a3; box-sizing:border-box; border: 1px solid #ededed; background-color: #fff; padding-left: 20px; -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; background: url('/images/adapply01_bottom_arrow.png') no-repeat 95% 50%; } div.adapply_01 > div.adapply_box > div.adapply01_bottom >ul.category > li > select::-ms-expand{ display: none; } div.adapply_01 > div.adapply_box > div.adapply01_bottom >ul.category > li > select:focus{ border: 2px solid #ffd200; } div.adapply_01 > div.adapply_box > div.adapply01_bottom > p.adapply01_btn{width:auto;margin: 0 auto 50px auto;} div.adapply_01 > div.adapply_box > div.adapply01_bottom > p.adapply01_btn input[type="submit"]{font-size:15px;font-weight:bold;width:80px;height:30px;line-height:30px;background-color:#941b61;color:#fefefe;border:none;} div.adapply_01 > div.webtoon{width: 47%; height: 920px; overflow: hidden; float: left; } @media all and (max-width:1850px) { div.main07 .consult_wrap .consult_img { position: absolute; top:-5.5%; left: 2.5%; width: 550px; box-shadow: 9px 7px 17px 0px rgba(0, 0, 0, 0.24);} .consult_img img { width:100%;} div.main07 .consult_wrap .consult_app { margin-left: 53%;} div.adapply_01 > div.adapply_box {float: left;padding-top: 60px;} } @media all and (max-width:1670px) { div.main07 .consult_wrap .consult_img { left: -0%;} div.main07 .consult_wrap {background-color: #fafafa;} } @media all and (max-width:1600px) { div.main07 .consult_wrap {width: 100%;margin: 0;padding:100px 0 0 0;height: 100%;position: relative;} div.main07 .consult_wrap .consult_img { position: absolute; top: 6%; left: 5%; width: 500px; box-shadow: 9px 7px 17px 0px rgba(0, 0, 0, 0.24);} .consult_img img { width:100%;} div.adapply_01 > div.adapply_box { float: left; padding-top: 20px;} } @media all and (max-width:1445px) { div.main07 .consult_wrap .consult_img { top: 12%; left: 4%; width: 350px } div.main07 .consult_wrap .consult_app { margin-left: 42%;} } @media all and (max-width:1345px) { div.main07 .consult_wrap .consult_img { display:none; } div.main07 .consult_wrap .consult_app { margin-left: calc( 50% - 250px ); } } @media all and (max-width:840px) { div.main07 .consult_wrap .consult_app {margin:0} #kcaptcha_image { width:27%} div.adapply_01 > div.adapply_box > div.adapply01_bottom >ul.category li input[type="text"].kcaptcha{ width: calc( 70% - 3px );} } @media all and (max-width:700px) { div.main07 .consult_wrap .consult_app {margin:0} #kcaptcha_image { width:27%} div.adapply_01 > div.adapply_box > div.adapply01_bottom >ul.category li input[type="text"].kcaptcha{ width: calc( 70% - 3px );} } /********* 일곱번째 섹션**********/ /****************main08**********************/ div.main08 {width:100%; background-color:#fafafa;} div.main08 .map_title {width:100%;text-align:center;color:#941b61;font-size:38px;padding-top:70px;padding-bottom:50px;} div.main08 .map_wrap {width:calc( 100% - 200px);margin:0 auto;} div.main08 .map_wrap .map_text{text-align:center;padding-top:50px;font-size:18px;line-height:25px;color:#091f3c;} @media all and (max-width:995px) { div.main08 .map_wrap {width:calc( 100% - 40px);} } /***********popup css************/ div#popup{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: fixed; z-index: 9998; overflow: hidden; } div#popup > div{ position: fixed; z-index: 9999; top: 50%; left: 50%; margin-top: -185px; margin-left: -265px; width: 530px; height: 370px; border: 5px solid #ffd200; box-sizing: border-box; padding: 45px; background-color: #ffffff; } div#p_wrap{ width: 100%; height: 100%; position:relative; } div#p_wrap > img{ margin-bottom: 30px; } div#p_wrap > a.ad{ display: block; float: left; width: 49%; border-right: 5px solid #ffffff; height: 60px; padding-top: 12px; box-sizing: border-box; border: 2px solid #ffd200; text-align: center; font-size: 15px; color: #000000; font-weight: bold; margin: 10px 0px; background-image: url('../images/right_b_arrow.png'); background-repeat: no-repeat; background-position: 95% 50%; margin-right: 2%; } div#p_wrap > a.ad02{ display: block; float: left; width: 49%; border-right: 5px solid #ffffff; height: 60px; padding-top: 12px; box-sizing: border-box; border: 2px solid #ffd200; text-align: center; font-size: 15px; color: #000000; font-weight: bold; margin: 10px 0px; background-image: url('../images/right_b_arrow.png'); background-repeat: no-repeat; background-position: 95% 50%; } div#p_wrap > a.ad03{ display: block; float: left; width: 100%; height: 60px; line-height: 60px; box-sizing: border-box; border: 2px solid #ffd200; text-align: center; font-size: 15px; color: #000000; font-weight: bold; margin: 10px 0px; background-image: url('../images/right_b_arrow.png'); background-repeat: no-repeat; background-position: 95% 50%; } div#p_wrap > a.close{ position: absolute; top: -25px; right: -25px; } div#p_wrap > a.ad:hover, div#p_wrap > a.ad02:hover, div#p_wrap > a.ad03:hover{ background-color: #ffd200; border: 2px solid #ffd200;} /************************adapply01,02 css*****************************/ /*레이어 팝업창*/ div.qna_layer_popup01{width:100%; height:100%; z-index:99999;} div.qna_layer_popup01 > div.bg {width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);} div.qna_layer_popup01 > div.pop-layer {display:block;} div.pop-layer {width: 100%; height: 100%;overflow:hidden;background-color: rgba( 0,0,0,0.5); z-index: 10; box-sizing: border-box;} div.qna_popup_content > div.btn-r > a.cbtn { position: absolute; display: block; width: 30px; height: 30px; top: 50px; right: 50px;} div.qna_popup_content > div.btn-r > a.cbtn >img{ width: 100%; height: 100%; } div.qna_popup_content > div{ width: 1200px; box-sizing: border-box; margin: 0px auto; } #fp-nav ul li a span, .fp-slidesNav ul li a span {background: #e5e5e5 !important;} .sim-button{ line-height: 50px; height: 50px; text-align: center; margin-right: auto; margin-left: auto; margin-top: 125px; width: 60%; cursor: pointer; } .sim-button { color: rgba(255,255,255,1); -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; position: relative; } .sim-button a{ color: rgba(51,51,51,1); text-decoration: none; display: block; } .sim-button::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; border: 1px solid rgba(255,255,255,0.5); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .sim-button:hover::before{ opacity: 0; -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); } .sim-button::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; background-color: rgba(255,255,255,0.25); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); } .sim-button:hover::after{ opacity: 1 ; -webkit-transform: scale(1,1); transform: scale(1,1); }