/******************* 메인 비주얼 ********************** */ #mainVisual{overflow:hidden; width:100%; height:100%; position:relative; z-index:100; background: linear-gradient(-67.5deg, #000, #4E3E26, #000, #87501A); background: -webkit-linear-gradient(-67.5deg, #000, #4E3E26, #000, #87501A); background-size: 400% 400%; animation: gradientBG 5s ease infinite; overflow:hidden; } @keyframes gradient02 {0%{} 50% {background: linear-gradient(-120deg,#2A0161,#900962);} 100%{}} @-moz-keyframes gradient02 {0%{} 50% {background: linear-gradient(-120deg,#2A0161,#900962);} 100%{}} @-webkit-keyframes gradient02 {0%{} 50% {background: linear-gradient(-120deg,#2A0161,#900962);} 100%{}} @-o-keyframes gradient02 {0%{} 50% {background: linear-gradient(-120deg,#2A0161,#900962);} 100%{}} @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .slick-track,.slick-list { -webkit-perspective: 2000; -webkit-backface-visibility: hidden;} #mainVisual .main-visual-list-con, #mainVisual .main-visual-con, #mainVisual .slick-list, #mainVisual .slick-track, .main-visual-item{ height:100%; overflow:hidden;} .main-visual-con{z-index:1;} /* 메인 비주얼 :: 이미지 */ .main-visual-item{position:relative;} .main-visual-item .main-visual-img-bg{ width:100%; height:100%; background-size:cover !important; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);-webkit-transition:transform 2000ms ease-in-out ;-moz-transition:transform 2000ms ease-in-out ;-o-transition:transform 2000ms ease-in-out ;-ms-transition:transform 2000ms ease-in-out ;transition:transform 2000ms ease-in-out ; } /* 메인 비주얼 :: 텍스트 공통 */ .main-visual-item .main-visual-txt-con{position:absolute; z-index:12; right:50%; } .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con .main-visual-txt2{ opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(50px); -o-transform: translateX(50px); -moz-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s;} .main-visual-item .main-visual-txt-con.left .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt2,{ opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); -moz-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s;} .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{ display:block; text-shadow:3px 3px 3px 1px rgba(0,0,0,0.2); margin-bottom:30px; padding-top:25px; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;} .main-visual-item .main-visual-txt-con .main-visual-txt1 span { font-size:17px; line-height:160%; display:block; letter-spacing:-0.3px; font-family: 'GmarketSansMedium'; color:#fff;} .main-visual-item .main-visual-txt-con.left .main-visual-txt1:before{right:auto; left:0;} .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{line-height:90%; text-align:right; font-size:75px;font-family: 'GmarketSansLight'; letter-spacing:-0.07em; text-shadow:3px 3px 3px 1px rgba(0,0,0,0.2); color:#fff; display:block; -webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-o-transition-delay:0.1s;-ms-transition-delay:0.1s;transition-delay:0.1s;} .main-visual-item .main-visual-txt-con .main-visual-txt2 b{color:#fff; font-size:75px; font-family: 'GmarketSansBold'; letter-spacing:-0.04em; display:block; margin-right:50px; } .main-visual-item .main-visual-txt-con .main-visual-txt2 span{display:block;letter-spacing:-0.03em; font-size:29px; font-family: 'Libre Baskerville', serif; color:#C9A764; } .main-visual-item .main-visual-txt-con img{display:inline-block;} /* 메인 비주얼 :: 이미지 공통*/ .main-visual-item .main-visual-img-con{position:absolute; z-index:11; width:94%; right:50%; } .main-visual-item .main-visual-img-con .main-visual-img {right:0px; top:0; position:absolute; overflow:hidden; width:100%; height:auto; display:inline-block; opacity:0; filter:Alpha(opacity=0);} .main-visual-item .main-visual-img-con .main-visual-img img {width:100%; } .main-visual-item .main-visual-img-con.right .img1 { opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); -moz-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;} .main-visual-item .main-visual-img-con.right .img2 { opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(50px); -o-transform: translateX(50px); -moz-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;} .main-visual-item .main-visual-img-con.right .img3 { opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); -moz-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s; -webkit-transition-delay:0.7s;-moz-transition-delay:0.7s;-o-transition-delay:0.7s;-ms-transition-delay:0.7s;transition-delay:0.7s;} .main-visual-item .main-visual-img-con.right .img4 { opacity:0;filter:Alpha(opacity=0); -ms-transform: translateY(50px); -o-transform: translateY(50px); -moz-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s; -webkit-transition-delay:1s;-moz-transition-delay:1s;-o-transition-delay:1s;-ms-transition-delay:1s;transition-delay:1s;} .main-visual-item .main-visual-img-con.right .img1, .main-visual-item .main-visual-img-con.right .img2, .main-visual-item .main-visual-img-con.right .img3, .main-visual-item .main-visual-img-con.right .img4 {box-shadow:5px 5px 10px 5px rgba(0,0,0,0.2);} /* 첫번째 텍스트 위치*/ .main-visual-item .main-visual-txt-con{top:52%; z-index:12; margin:0 -3% 0 0; } /* 첫번째이미지 사이즈 및 위치*/ .main-visual-item .main-visual-img-con{ top:20%; margin:0 -600px 0 0; max-width:900px; } .main-visual-item .main-visual-img-con .img1 {width:50%; position:absolute; left:0; top:0; box-shadow:10px 10px 20px 5px rgba(0,0,0,0.3);} .main-visual-item .main-visual-img-con .img2 {width:42%; position:absolute; left:52%; top:0; } .main-visual-item .main-visual-img-con .img3 {width:21%; position:absolute; right:34%; top:0; margin-top:34.5%; } .main-visual-item .main-visual-img-con .img4 {width:32%; position:absolute; right:0; top:0; margin-top:34.5%;} /* 두번째 텍스트 위치*/ .main-visual-item .second_txt {position:absolute; top:32%; z-index:12; margin:0 -3% 0 0; } /* 두번째이미지 사이즈 및 위치*/ .main-visual-item .second_img {top:17%; margin:0 -500px 0 0; max-width:500px; } .main-visual-item .second_img .img1 {width:100%;} /* 세번째 텍스트 위치*/ .main-visual-item .third_txt {position:absolute; top:55%; margin:0 -500px 0 0; max-width:1000px; width:100%;} .main-visual-item .third_txt .main-visual-txt2 b{ display:inline; margin-right:0px; } .main-visual-item .third_txt .main-visual-txt2, .main-visual-item .third_txt.left .main-visual-txt2{text-align:center;} .main-visual-item .third_txt .main-visual-txt1{ text-align:center;} /* 세번째이미지 사이즈 및 위치*/ .main-visual-item .third_img {top:22%; margin:0 -550px 0 0; max-width:1100px; } .main-visual-item .third_img .img1 {width:32.33%;} .main-visual-item .third_img .img2 {width:32.33%; left:33.88%; margin-top:4%;} .main-visual-item .third_img .img3 {width:32.33%; right:0; margin-top:0;} /* 메인 비주얼 :: active효과 */ .main-visual-item.active-item .main-visual-pc-img{ -ms-transform: scale(1.0,1.0) rotate(0.01deg); -o-transform: scale(1.0,1.0) rotate(0.01deg); -moz-transform: scale(1.0,1.0) rotate(0.01deg); -webkit-transform: scale(1.0,1.0) rotate(0.01deg); transform: scale(1.0,1.0) rotate(0.01deg);} .main-visual-item.active-item .main-visual-txt1, .main-visual-item.active-item .main-visual-txt2, .main-visual-item.active-item .main-visual-img{opacity:1.0;filter:Alpha(opacity=100); -ms-transform: translateX(0px); -o-transform: translateX(0px); -moz-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px);} .main-visual-item.active-item .main-visual-txt-con.left .main-visual-txt1, .main-visual-item.active-item .main-visual-txt-con.left .main-visual-txt2, .main-visual-item.active-item .main-visual-img-con.right .img1, .main-visual-item.active-item .main-visual-img-con.right .img2, .main-visual-item.active-item .main-visual-img-con.right .img3{opacity:1.0;filter:Alpha(opacity=100); -ms-transform: translateX(0px); -o-transform: translateX(0px); -moz-transform: translateX(0px);-webkit-transform: translateX(0px); transform: translateX(0px);} .main-visual-item.active-item .main-visual-img-con.right .img4{opacity:1.0;filter:Alpha(opacity=100); -ms-transform: translateY(0px); -o-transform: translateY(0px); -moz-transform: translateY(0px);-webkit-transform: translateY(0px); transform: translateY(0px);} @media all and ( max-width:1400px ){ /* 메인 비주얼 :: 텍스트 공통 */ .main-visual-item .main-visual-txt-con .main-visual-txt1 span { font-size:17px;} .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2, .main-visual-item .main-visual-txt-con .main-visual-txt2 b{ font-size:65px; } .main-visual-item .main-visual-txt-con .main-visual-txt2 span{font-size:25px; } .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{ padding-top:13px; } /* 메인 비주얼 :: 이미지 공통*/ .main-visual-item .main-visual-img-con{position:absolute; z-index:11; width:90%; right:50%; } /* 첫번째이미지 사이즈 및 위치*/ .main-visual-item .first_img{margin:0 -500px 0 0; max-width:800px; } /* 세번째이미지 사이즈 및 위치*/ .main-visual-item .third_img {top:20%; margin:0 -450px 0 0; max-width:900px; } } @media all and ( max-width:1000px ){ /* 메인 비주얼 :: 텍스트 공통 */ .main-visual-item .main-visual-txt-con{ right:0%; width:96%; } .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{ padding-top:5px;} .main-visual-item .main-visual-txt-con .main-visual-txt1 span { font-size:15px; } .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2, .main-visual-item .main-visual-txt-con .main-visual-txt2 b{ font-size:55px; text-align:left;} .main-visual-item .main-visual-txt-con .main-visual-txt2 span{font-size:21px; } .main-visual-item .main-visual-img-con{ width:94%; right:3%; } .main-visual-item .first_txt, .main-visual-item .first_img, .main-visual-item .second_txt, .main-visual-item .second_img, .main-visual-item .third_txt, .main-visual-item .third_img { margin:0; } } @media all and ( max-width:780px ){ .main-visual-item .main-visual-img-bg{height:670px; } .main-visual-item .main-visual-txt-con .main-visual-txt1 span {font-size:12px;} .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2, .main-visual-item .main-visual-txt-con .main-visual-txt2 b{ font-size:30px;} .main-visual-item .main-visual-txt-con .main-visual-txt2 span{font-size:16px; } .main-visual-item .main-visual-txt-con{top:50%;} .main-visual-item .main-visual-img-con{ top:17%;} .main-visual-item .second_txt {top:13%; } .main-visual-item .second_img { width:60%; top:27.5%;} .main-visual-item .third_txt {top:55%;} .main-visual-item .third_txt .main-visual-txt2 b{ display:block; } .main-visual-item .third_img {top:13%; } .main-visual-item .third_img .img1 {width:62%;} .main-visual-item .third_img .img2 {width:38%; right:39%; left:auto; margin-top:48%; } .main-visual-item .third_img .img3 {width:38%; right:0%; margin-top:48%; } } /* 메인 비주얼 :: 버튼 */ #mainVisual .slick-dots{position:absolute; right:50%; margin:0 -75px 0 0; bottom:70px;} #mainVisual .slick-dots li{display:inline-block;} #mainVisual .slick-dots li button{ cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:50px; height:50px; background:url('../../img/m_btn.png') no-repeat 0 0; } #mainVisual .slick-dots li.slick-active button{background:url('../../img/m_btn_on.png') no-repeat 0 0; } @media all and ( max-width:1000px ){ #mainVisual .slick-dots{position:absolute; right:50%; margin:0 -45px 0 0; bottom:130px; z-index:10000000;} #mainVisual .slick-dots li button{ width:30px; height:30px; background-size:30px; } #mainVisual .slick-dots li.slick-active button{background-size:30px; } } @media all and ( max-width:500px ){ #mainVisual .slick-dots{bottom:110px;} } /* 모션 별*/ #mainVisual span.star {position:absolute; width:50px; top:30%; z-index:1; opacity:0.5; display:block; right:50%; margin-right:350px; animation:star 5s ease infinite; -moz-animation:star 5s ease infinite; -webkit-animation:star 5s ease infinite; -o-animation:star 5s ease infinite;} #mainVisual span.star img {width:100%; animation:rotate 1s linear infinite; -moz-animation:rotate 1s linear infinite; -webkit-animation:rotate 1s linear infinite; -o-animation:rotate 1s linear infinite;} @keyframes star {0%{top:30% margin-right:350px; opacity:0.5;} 25%{top:38%; margin-right:200px; opacity:0.6; width:30px; }50%{top:34%; width:40px; margin-right:100px; opacity:1;}100%{top:40%; margin-right:-300px; opacity:0;width:30px; }} @-moz-keyframes star {0%{top:30% margin-right:350px; opacity:0.5;} 35%{top:36%; margin-right:200px; opacity:0.6; width:30px; }70%{top:32%; width:40px; margin-right:100px; opacity:1;}100%{top:40%; margin-right:-300px; opacity:0;width:30px; }} @-webkit-keyframes star {0%{top:30% margin-right:350px; opacity:0.5;} 35%{top:36%; margin-right:200px; opacity:0.6; width:30px; }70%{top:32%; width:40px; margin-right:100px; opacity:1;}100%{top:40%; margin-right:-300px; opacity:0;width:30px; }} @-o-keyframes star {0%{top:30% margin-right:350px; opacity:0.5;} 35%{top:36%; margin-right:200px; opacity:0.6; width:30px; }70%{top:32%; width:40px; margin-right:100px; opacity:1;}100%{top:40%; margin-right:-300px; opacity:0;width:30px; }} /* 모션 별 - 작은별*/ #mainVisual span.star_s {position:absolute; width:20px; top:25%; display:block; right:50%; margin-right:-200px; animation:star_s 4s ease-out infinite; -moz-animation:star_s 4s ease-out infinite; -webkit-animation:star_s 4s ease-out infinite; -o-animation:star_s 4s ease-out infinite;} #mainVisual span.star_s img {width:100%; animation:rotate 1s linear infinite; -moz-animation:rotate 1s linear infinite; -webkit-animation:rotate 1s linear infinite; -o-animation:rotate 1s linear infinite;} @keyframes star_s {0%{opacity:0.1; top:25%;} 15%{opacity:1;} 30%{opacity:0.3;} 45%{opacity:1;} 100%{top:50%; margin-right:-400px;; opacity:0; }} @-moz-keyframes star_s {0%{opacity:0.1; top:25%;} 15%{opacity:1;} 30%{opacity:0.3;} 45%{opacity:1;} 100%{top:50%; margin-right:-400px;; opacity:0; }} @-webkit-keyframes star_s {0%{opacity:0.1; top:25%;} 15%{opacity:1;} 30%{opacity:0.3;} 45%{opacity:1;} 100%{top:50%; margin-right:-400px;; opacity:0; }} @-o-keyframes star_s {0%{opacity:0.1; top:25%;} 15%{opacity:1;} 30%{opacity:0.3;} 45%{opacity:1;} 100%{top:50%; margin-right:-400px;; opacity:0; }} .slick-track,.slick-list { -webkit-perspective: 2000; -webkit-backface-visibility: hidden;} #mainVisual .main-visual-list-con, #mainVisual .main-visual-con, #mainVisual .slick-list, #mainVisual .slick-track, .main-visual-item{ height:100%; overflow:hidden;} .main-visual-con{z-index:1;} @media all and ( max-width:1000px ){ #mainVisual span.star, #mainVisual span.star_s {display:none;} } /* 메인비쥬얼 플러그인Slider */ .slick-slider{ position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none;-khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;} .slick-list{ position: relative; display: block; overflow: hidden; margin: 0; padding: 0;} .slick-list:focus{ outline: none !important;} .slick-list.dragging{ cursor: pointer; cursor: hand;} .slick-slider .slick-track, .slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .slick-track{ position: relative; top: 0; left: 0; display: block;} .slick-track:before, .slick-track:after{display: table; content: '';} .slick-track:after{ clear: both;} .slick-loading .slick-track{ visibility: hidden;} .slick-slide{ display: none; float: left; height: 100%; min-height: 1px;} [dir='rtl'] .slick-slide{ float: right;} .slick-slide img{display: block;} .slick-slide.slick-loading img{ display: none;} .slick-slide.dragging img{ pointer-events: none;} .slick-initialized .slick-slide{display: block;} .slick-loading .slick-slide{ visibility: hidden;} .slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent;} .slick-arrow.slick-hidden {display: none;} .slick-slider *:focus{outline:none !important;} /* 아래로 버튼*/ #mainVisual .down {position:absolute; left:50px; bottom:0; z-index:100000; width:50px; display:block; overflow:hidden;} #mainVisual .down span {position:absolute; left:0px; top:0; width:1px; display:block; z-index:1001; animation:down 2s ease infinite; -moz-animation:down 2s ease infinite; -webkit-animation:down 2s ease infinite; -o-animation:down 2s ease infinite;} @keyframes down {0%{opacity:0;} 20%{opacity:1;} 100%{top:150px; opacity:0;}} @-moz-keyframes down {0%{opacity:0;} 20%{opacity:1;} 100%{top:150px; opacity:0;}} @-webkit-keyframes down {0%{opacity:0;} 20%{opacity:1;} 100%{top:150px; opacity:0;}} @-o-keyframes down {0%{opacity:0;} 20%{opacity:1;} 100%{top:150px; opacity:0;}} @media screen and (max-width:1000px) { #mainVisual .down {left:10px; width:35px;} #mainVisual .down img {width:100%;} } @media screen and (max-width:780px) { #mainVisual .down {bottom:90px;} } /* 숫자카운트 */ #mainVisual .m_count {position:absolute; z-index:10000000; left:120px; bottom:40px; } .m_count ul li {float:left;} .m_count ul li dl {text-align:left;} .m_count ul li dl dt {color:#fff; padding-bottom:5px; font-family: 'GmarketSansMedium'; } .m_count ul li dl dd b.counter {color:#fff; font-family: 'Libre Baskerville', serif; font-size:60px; font-weight:700; letter-spacing:-0.01em; text-shadow:3px 3px 3px 1px rgba(0,0,0,0.2);} @media screen and (max-width:1000px) { #mainVisual .m_count {left:auto; right:20px; bottom:20px; } .m_count ul li dl dd b.counter {font-size:40px;} .m_count ul li dl {text-align:right;} } @media screen and (max-width:780px) { #mainVisual .m_count {right:10px; bottom:100px; } .m_count ul li dl dd b.counter {font-size:30px;} } /* ****************** 퀵메뉴 / 카운터 부분********************** */ .m_quick {width:100px; background-color:rgba(144,13,13,0.6); text-align:center; position:absolute; right:30px; z-index:1000000; box-shadow:5px 5px 10px 5px rgba(0,0,0,0.2); /*border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; -o-border-radius:50px;*/} @media all and (min-width:1000px ){ .m_quick {top:200px; } } .m_quick section {width:80%; padding:40px 10px;} .m_quick section h3 {color:#fff; text-align:center; padding-bottom:10px; font-family: 'GmarketSansBold'; line-height:100%; font-size:17px; border-bottom:1px solid rgba(255,255,255,0.2); } .m_quick section h3 span {display:block; font-family: 'GmarketSansLight'; } .m_quick .quick { width:100%;} .m_quick .quick ul li {border-bottom:1px solid rgba(255,255,255,0.2); display:block; position:relative; font-family: 'GmarketSansMedium'; width:80px; margin-top:15px; padding-bottom:15px;} .m_quick .quick ul li a {display:block; color:#000; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;} .m_quick .quick ul li a span {position:absolute;} .m_quick .quick ul li a b {padding-top:55px; font-size:12px; color:#fff; display:block; text-align:center;} .m_quick .quick ul li a:hover b{color:#F1E57F;} .m_quick section p a {color:#fff; display:block; font-family:'GmarketSansBold'; line-height:100%; font-size:11px; padding-top:20px;} /* **********퀵메뉴 배경이미지********** */ .m_quick .q01 {background:url('../../img/call.png');} .m_quick .q02 {background:url('../../img/q02.png');} .m_quick .q03 {background:url('../../img/on.png');} .m_quick .q04 {background:url('../../img/car.png');} .m_quick .quick ul li{background-position: center top; background-size:40px; background-repeat:no-repeat;} .q06:hover b{color: #F1E57F; cursor:pointer;} .q05:hover b{color: #F1E57F; cursor:pointer;} /* **********퀵메뉴 움직이는 아이콘 위치설정********** */ .m_quick .quick ul li.q01 a span {position:absolute; left:30px; top:16px; width:30px; height:30px;} .m_quick .quick ul li.q02 a span {position:absolute; left:34px; top:20px;} .m_quick .quick ul li.q03 a span {position:absolute; left:37px; top:10px;} .m_quick .quick ul li.q04 a span {position:absolute; left:9px; top:5px;} /***********퀵메뉴 움직이는 아이콘 모션********** */ .m_quick .quick ul li a span {animation:motion4 1.5s linear infinite; -moz-animation:motion4 1.5s linear infinite; -webkit-animation:motion4 1.5s linear infinite; -o-animation:motion4 1.5s linear infinite;} @keyframes motion4 {0%{} 50%{padding-top:5px;} 100%{}} @-moz-keyframes motion4 {0%{} 50%{padding-top:5px;} 100%{}} @-webkit-keyframes motion4 {0%{} 50%{padding-top:5px;} 100%{}} @-o-keyframes motion4 {0%{} 50%{padding-top:5px;} 100%{}} .m_quick .quick ul li.q02 a span, .m_quick .quick ul li.q04 a span {animation:motion5 1.2s linear infinite; -moz-animation:motion5 1.2s linear infinite; -webkit-animation:motion5 1.2s linear infinite; -o-animation:motion5 1.2s linear infinite;} @keyframes motion5 {0%{} 50%{padding-left:5px;} 100%{}} @-moz-keyframes motion5 {0%{} 50%{padding-lef:5px;} 100%{}} @-webkit-keyframes motion5 {0%{} 50%{padding-top:5px;} 100%{}} @-o-keyframes motion5 {0%{} 50%{padding-lef:5px;} 100%{}} .m_quick .quick ul li.q01 a span {animation:rotate 4s linear infinite; -moz-animation:rotate 4s linear infinite; -webkit-animation:rotate 4s linear infinite; -o-animation:rotate 4s linear infinite;} .m_quick .quick ul li a:hover span {animation:stop;} @media all and ( max-width:1000px ){ .m_quick {width:420px; right:50%; margin:0 -210px 0 0;height:90px; bottom:20px;} .m_quick section {width:96%; padding:15px 2%;} .m_quick section h3 {float:left; width:13.5%; padding:14px 2% 14px 3%; font-size:15px; border-right:1px solid rgba(255,255,255,0.2); border-bottom:none; } .m_quick .quick { float:left; width:81%;} .m_quick .quick ul li {border-right:1px solid rgba(255,255,255,0.2); border-bottom:none; display:inline-block; float:left; margin:0; padding:0px;} .m_quick .quick ul li:last-child {border-right:none;} .m_quick .quick ul li a b {padding-top:42px; font-size:11px;} .q05, .q06{font-size:11px;} .m_quick section p {display:none;} /* **********퀵메뉴 배경이미지********** */ .m_quick .quick ul li{background-size:30px;} /* **********퀵메뉴 움직이는 아이콘 위치설정********** */ .m_quick .quick ul li.q01 a span {left:30px; top:11px; width:25px; height:25px;} .m_quick .quick ul li.q02 a span {left:34px; top:15px;} .m_quick .quick ul li.q03 a span {left:37px; top:5px;} .m_quick .quick ul li.q04 a span {left:9px; top:0px;} .m_quick .quick ul li.q01 a span img {width:25px;} .m_quick .quick ul li.q02 a span img {width:80%;} .m_quick .quick ul li.q03 a span img {width:80%;} .m_quick .quick ul li.q04 a span img {width:80%;} } @media all and ( max-width:500px ){ .m_quick {width:100%; right:0; margin:0;bottom:0px; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px; -o-border-radius:0px;} .m_quick section h3 {display:none; } .m_quick .quick { width:100%;} .m_quick .quick ul li { width:20%; box-sizing: border-box;} .q05, .q06{padding-top: 13px !important;} } /* 포트폴리오 ::이미지 롤링 배너 */ .work {width:100%; position: relative; paddding:30px 0; background: linear-gradient(-67.5deg, #201404, #52300B, #201404, #684215); background-size: 400% 400%; animation: gradientBG 5s ease infinite; overflow:hidden; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .work .work_wrap { z-index:1; background:url('../../img/check_bg.png') repeat 0 0; } .work .work_wrap:after {content:"";display:block;clear:both;} .work .work_wrap .work_img{ width:98%; height:470px; overflow:hidden; padding:70px 0 0 2%; } .work .work_wrap .work_img h2 {font-size:60px;font-family: 'Montserrat', 'GmarketSansBold'; line-height:100%; color:#fff; z-index:2; display:inline-block; } .work .work_wrap .work_img h2 span {font-size:12px; padding-left:5px; letter-spacing:0.4em;} .work .work_wrap .work_img h2 span a { color:#B2915B; } .work .work_wrap .work_img h2 span a:hover{opacity:1; } .work .work_wrap .work_img .item {float:left; display:inline-block;} .item dl {text-align:left; width:400px; margin-top:40px; margin-right:40px; position: relative; overflow:hidden; box-shadow:5px 5px 10px 5px rgba(0,0,0,0.2);} .item dl dt {width:100%; font-size:0; line-height:0; } .item dl dt img {width:100%; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; } .item dl dd{position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('../../img/bt_bg.png') repeat-y 0 0; overflow:hidden;} .item dl dd .tit h3 {font-size:27px; color:#F5EA7F; padding:40px 0 10px 30px; font-family: 'GmarketSansBold'; letter-spacing:-0.04em;} .item dl dd .tit h3 span{font-size:17px; color:#fff; display:block; padding-bottom:5px; font-family:'GmarketSansMedium';} .item dl dd p {font-size:15px; padding:0 0 0 30px; color:#fff;letter-spacing:-0.03em; } .item dl dd p span {display:block;} .carousel-control { position:absolute; top:0; z-index:1000; margin-top:-40px; } a.carousel-control {opacity:0.3;} a:hover.carousel-control {opacity:1;} .right {right:80px;} .left {right:200px;} @media screen and (min-width:1000px) { .item dl {height:280px;} .item a:hover dl dt img {opacity:0.7; margin-top:-40px;} } @media screen and (max-width:1000px) { .work .work_wrap .work_img{ height:310px; padding:60px 0 0 5%; width:95%; } .work .work_wrap .work_img h2 {font-size:31px;} .work .work_wrap .work_img h2 span {font-size:9px;} .item dl { width:250px; margin-top:30px; margin-right:20px; } .item dl dd .tit h3 {font-size:21px; padding:30px 0 10px 20px;} .item dl dd .tit h3 span{font-size:13px;} .item dl dd p {font-size:12px; padding:0 0 0 20px; } .carousel-control {margin-top:-40px;} .carousel-control img {width:50px;} .right {right:10px;} .left {right:70px;} } /* 타이틀 옆 모션 원 */ .mm_img1 { position:absolute; z-index:1; opacity:1; left:20px; top:40px; opacity:0.2; display:block; width:50px; height:50px; background:#F1E57F; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; animation:motion1 1s linear infinite; -moz-animation:motion1 1s linear infinite; -webkit-animation:motion1 1s linear infinite; -o-animation:motion1 1s linear infinite;} @keyframes motion1 {0%{width:50px; height:50px;} 50%{width:40px; height:40px; left:25px; top:45px; opacity:0.3; }100%{width:50px; height:50px;}} @-moz-keyframes motion1 {0%{width:50px; height:50px;} 50%{width:40px; height:40px; left:25px; top:45px; opacity:0.3; }100%{width:50px; height:50px;}} @-webkit-keyframes motion1 {0%{width:50px; height:50px;} 50%{width:40px; height:40px; left:25px; top:45px; opacity:0.3; }100%{width:50px; height:50px;}} @-o-keyframes motion1 {0%{width:50px; height:50px;} 50%{width:40px; height:40px; left:25px; top:45px; opacity:0.3; }100%{width:50px; height:50px;}} /******** 프렌차이즈 4단 배너 *********/ .busi {overflow:hidden; position: relative; width:100%; text-align:left; background:url(../../img/bg_brown.gif) repeat 0 0; overflow:hidden; } /* 움직이는 b*/ .busi section{background: url('../../img/l.png') no-repeat; background-size:800px; background-position:0 0; width:100%; animation:motion7 4s linear infinite; -moz-animation:motion7 4s linear infinite; -webkit-animation:motion7 4s linear infinite; -o-animation:motion7 4s linear infinite;} @keyframes motion7 {0%{} 50%{background-position:0 40px;}100%{}} @-moz-keyframes motion7 {0%{} 50%{background-position:0 40px;}100%{}} @-webkit-keyframes motion7 {0%{} 50%{background-position:0 40px;}100%{}} @-o-keyframes motion7 {0%{} 50%{background-position:0 40px;}100%{}} .busi .box01{margin:0 auto; max-width:1600px; width:95%; padding:120px 0 100px 0; text-align:center; } .busi .box01:after {content:"";display:block;clear:both;} /* 좌측 문구 */ .busi .box01 .tit {float:left; width:27%; text-align:left; } .busi .box01 .tit h2 {border-top:2px solid #fff; font-family: 'Libre Baskerville', serif; font-size:75px; font-weight:500; padding-top:30px; color:#fff; text-shadow:3px 3px 3px 1px rgba(0,0,0,0.2); line-height:80px; } .busi .box01 .tit p {font-size:25px; padding-top:30px; color:#fff; display:block;letter-spacing:-0.03em; font-family: 'GmarketSansMedium'; } .busi .box01 .tit p span{font-size:17px; padding-top:30px; line-height:180%; letter-spacing:-0.03em; color:#fff; opacity:0.7; display:block; font-family: 'GmarketSansLight'; text-align: justify;} .busi .box01 .btn a {margin-top:40px; border:1px solid #fff; background:#900D0D; box-shadow:5px 5px 10px 5px rgba(0,0,0,0.2); } .busi .box01 .btn a:hover,.btn a.current {background:#000 url(../../img/arrow_1.png) no-repeat 15px 15px; } .busi .box01 ul.btn_list li {box-shadow:none;;} /* 우측 배너*/ .busi .box01 .banner {float:right; width:69%;} .busi .box01 ul{ width:100%%; } .busi .box01 ul:after {content:"";display:block;clear:both;} .busi .box01 ul li { float:left; width:47%;position: relative; margin:0 1.5% 30px 1.5%; box-shadow:5px 5px 10px 5px rgba(0,0,0,0.2); display:inline-block; text-align:left;} .busi .box01 ul li a{ -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; } .busi .box01 ul li a .img {width:100%; line-height:0;} .busi .box01 ul li a .img img {width:100%;} .busi .box01 ul li a .txt {position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('../../img/bt_bg.png') repeat-y 0 0; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; } .busi .box01 ul li a .txt h3 {padding:50px 0 20px 30px; font-size:28px; font-family: 'GmarketSansBold'; color: #fff; letter-spacing:-0.03em; } .busi .box01 ul li a .txt p {padding:0 0 10px 30px; line-height:140%; font-size:15px; color: #fff; letter-spacing:-0.03em;} .busi .box01 ul li a .txt span {position:absolute; bottom:30px; left:30px; color: #fff; font-weight:400; opacity:0.7; background:url('../../img/arrow_1.png') no-repeat 50px 5px; padding:0 100px 5px 0; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; } .busi .box01 ul li a:hover .txt {background-color:rgba(0,0,0,0.7); } .busi .box01 ul li a:hover .txt h3 {color:#F1E57F;} .busi .box01 ul li a:hover .txt span {background-position:70px 5px;} @media screen and (max-width:1500px) { .busi .box01 .tit h2 {font-size:60px; } .busi .box01 .tit p {font-size:25px;} .busi .box01 .tit p span{font-size:17px; } } @media screen and (max-width:1200px) { .busi section{ background-size:300px;} .busi .box01{ padding:60px 0; } .busi .box01 .tit { width:96%; padding:0 2%; display:block; margin-bottom:30px;} .busi .box01 .tit h2 {font-size:39px;} .busi .box01 .tit p {font-size:18px; padding-top:20px; } .busi .box01 .tit p span{font-size:13px; padding-top:20px;} .busi .box01 .banner {display:block; width:100%;} .busi .box01 ul li a .txt h3 {padding:40px 0 10px 20px; font-size:21px; } .busi .box01 ul li a .txt p {padding:0 10px 10px 20px; font-size:12px;} .busi .box01 ul li a .txt span {bottom:15px; left:20px;} } @media screen and (max-width:700px) { .busi .box01 ul li { width:94%; margin:10px 3%;} .busi .box01 .btn a {margin-top:20px; border:2px solid #fff; padding:7px 30px 5px 30px;} } /* 배너::고객센터 */ .m_board {width:100%; position:relative; text-align:center;} .m_board section { width:100%; margin:0 auto; } .m_board section > div {width:38%; float:left; text-align:left; padding:120px 6%; } .m_board .board_01 { background:url('../../img/news.jpg') no-repeat center top; } .m_board .board_02 {background:url('../../img/m_board_bg2.jpg') no-repeat center top; } .b_tit {border-bottom:1px solid rgba(255,255,255,0.3); position: relative; padding-bottom:10px; margin-bottom:15px;} .b_tit h3 {font-size:13px; color:#fff; font-weight:400;} .b_tit h3 span{ font-size:55px; font-family: 'Montserrat', 'GmarketSansBold'; padding-right:5px; font-weight:900; } .b_tit .more a{position:absolute; right:0px; top:30px;} .b_tit .more img {width:30px;} .b_tit .more a:hover {-ms-transform: rotate(60deg); // explorer -webkit-transform: rotate(60deg); // chrome, safari, opera transform: rotate(60deg); } .board_list .board_output {background:none;} .board_list .board_output tr td {text-align:right; font-size:15px; letter-spacing:0.05em; color:#fff; } .board_list .board_output .bd_out1 {text-align:left; padding:5px 0; color:#fff;} .board_list .board_output .bd_out1 a {font-family:'Noto Sans KR'; font-size:15px; letter-spacing:0.02em; color:#fff;} @media screen and (max-width:1360px) { .b_tit h3 span{ font-size:30px; } .board_list .board_output tr td, .board_list .board_output .bd_out1 a {font-size:13px; letter-spacing:0;} } @media screen and (max-width:1200px) { .board_list .board_output tr td, .board_list .board_output .bd_out1 a {font-size:12px; letter-spacing:-0.05em; } } @media screen and (max-width:960px) { .m_board section > div {width:90%; padding:40px 5%; display:block; } .b_tit .more a{top:10px;} .b_tit h3 {font-size:15px;} .board_list .board_output tr td, .board_list .board_output .bd_out1 a {font-size:13px; letter-spacing:0; } } @media screen and (max-width:600px) { .b_tit h3 span{ font-size:25px; } .board_list .board_output tr td, .board_list .board_output .bd_out1 a {font-size:10px; letter-spacing:-0.05em; } .b_tit h3 span{ font-size:31px;} } @media screen and (max-width:380px) { .board_list .board_output .bd_out1 a {font-size:8px;} } /* 배너:: 폼메일 Contact us */ .m_formmail {background:#2C2803 url('../../img/m_board_bg.jpg') no-repeat center 0; width:100%; padding:130px 0; position:relative; } .m_formmail .mark {background:url('../../img/m_board_mark.png') no-repeat center 0; position:absolute; top:35px; right:50%; margin:0 -10px 0 0; display:block; width:200px; height:200px; z-index:10000; animation:motion8 1s linear infinite; -moz-animation:motion8 1s linear infinite; -webkit-animation:motion8 1s linear infinite; -o-animation:motion8 1s linear infinite;} @keyframes motion8 {0%{} 50%{background-position:0 10px;}100%{}} @-moz-keyframes motion8 {0%{} 50%{background-position:0 10px;}100%{}} @-webkit-keyframes motion8 {0%{} 50%{background-position:0 10px;}100%{}} @-o-keyframes motion8 {0%{} 50%{background-position:0 10px;}100%{}} .m_formmail .form {width:580px; padding:90px 60px 30px 60px; margin-left:46%; background:#fff; max-height:500px; overflow-y:scroll; z-index:100;} .m_formmail .form h3 {font-size:39px; font-family:"GmarketSansMedium"; padding-bottom:20px;} .m_formmail .form h3 span {font-size:15px; display:block; color:#B09255; font-family:"GmarketSansMedium"; padding-bottom:7px; } .m_formmail .Btn { text-align:center;} .m_formmail .Btn input[type=submit] { width:190px; height:43px; border:2px #900D0D solid; padding:0 20px; line-height:30px; box-sizing:border-box; cursor:pointer; font-family: 'GmarketSansMedium'; background: url(../../img/btn_check.png) 140px center no-repeat; font-size:15px; border-radius:5px; text-align:left; color:#900D0D; } .m_formmail .Btn input:hover { background:#900D0D url(../../img/btn_check.png) 140px center no-repeat; border:0px; color:#fff; border:2px #900D0D solid;} /* 배너:: 방문안내/연락처 */ .m_formmail .info {position:absolute; max-width:500px; left:5%; bottom:11%; z-index:10;} .m_formmail .info dl {width:100%; margin-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.3); padding-bottom:10px;} .m_formmail .info dl:after {content:"";display:block;clear:both;} .m_formmail .info dl dt { width:30%; float:left; } .m_formmail .info dl dt span {background-color:rgba(144,13,13,0.7); color:#fff; padding:7px 0 3px 0; width:100%; font-size:15px; font-family: 'GmarketSansMedium'; display:inline-block; text-align:center; } .m_formmail .info dl dd {font-size:15px; letter-spacing:0; padding-top:4px; color:#fff;display:block; font-family: 'GmarketSansMedium'; width:65%; float:right; } .m_formmail .info img {padding:40px 0;} @media screen and (max-width:1300px) { .m_formmail .form {width:40%; padding:50px 4% 30px 4%; } } @media screen and (max-width:1000px) { .m_formmail { padding:50px 0; background-position:0 0; } .m_formmail .mark {background-size:100px; top:20px; right:5%; opacity:0.2; margin:0; width:100px; height:100px;} .m_formmail .form { margin-left:5%; width:82%; padding:30px 4% 30px 4%; z-index:11;} .m_formmail .form h3 {font-size:29px;} .m_formmail .form h3 span {font-size:12px; } .m_formmail .Btn input[type=submit] {height:36px; font-size:12px;} /* 배너:: 방문안내/연락처 */ .m_formmail .info {width:90%; position:relative; display:block; margin-bottom:20px; } .m_formmail .info dl dt { width:30%; } .m_formmail .info dl dt span {font-size:11px;} .m_formmail .info dl dd {font-size:11px; width:65%; } .m_formmail .info img {width:250px; padding:10px 0;} }