/* ---- 메인비쥬얼---- */ .flickity-enabled { position: relative;} .flickity-enabled:focus { outline: none; } .flickity-viewport {overflow: hidden; position: relative; height: 100%;} .flickity-slider {position: absolute; width: 100%; height: 100%;} .flickity-enabled.is-draggable {-webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;user-select: none;} .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab;} .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing;cursor: grabbing;} .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width:66px; height:100px; cursor: pointer;} .flickity-prev-next-button{display: none;} .flickity-viewport{width: 100%;} /* 버튼 */ .flickity-page-dots .dot{opacity: 1; position:absolute;z-index:999; } .flickity-page-dots .dot.is-selected{ background:url(../../img/dotA.png) no-repeat 0 0; width:30px; height:30px; animation-name:rotate; animation-duration:2s; animation-iteration-count:infinite;} .flickity-page-dots {position:absolute; left:50%;list-style: none;text-align: center;z-index: inherit;margin-left:-695px; top:42%;width:459px;height:50px;background:url(../../img/rect_bg.png) no-repeat 0 0; } .slides .previous,.slides .next{position:absolute; top:50%; margin-top:-32px; width:47px; opacity:0.6; height:64px; display:block; text-indent:-9999px; cursor:pointer; z-index:10; background-repeat: no-repeat; background-color:transparent; border:none; } .slides .previous {background-image:url('../../img/prev2.png'); left:100px; } .slides .next {background-image:url('../../img/next2.png'); right:100px;} /* 버튼 롤링 */ .flickity-page-dots .dot.is-selected {overflow:hidden; position:absolute; z-index:2; top:0; left:0; animation:rotate 5s linear infinite; -moz-animation:rotate 5s linear infinite; -webkit-animation:rotate 5s linear infinite; -o-animation:rotate 5s linear infinite;} @keyframes rotate {0%{} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg );}} @-moz-keyframes rotate {0%{} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg );}} @-webkit-keyframes rotate {0%{} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg );}} @-o-keyframes rotate {0%{} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg );}} @keyframes rotate {0%{} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg );}} @-moz-keyframes rotate {0%{} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg );}} @-webkit-keyframes rotate {0%{} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg );}} @-o-keyframes rotate {0%{} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg );}} /*메인이미지 포인트 위치*/ .flickity-page-dots .dot:nth-child(1){top:9px;left:4px;} .flickity-page-dots .dot:nth-child(2){top:9px;left:44px;} .flickity-page-dots .dot:nth-child(3){top:9px;left:84px;} .flickity-page-dots .dot:nth-child(4){top:9px;left:124px;} .flickity-page-dots .dot:nth-child(5){top:9px;left:164px;} .flickity-page-dots .dot:nth-child(6){top:9px;left:204px;} .flickity-page-dots .dot:nth-child(7){top:9px;left:244px;} .flickity-page-dots .dot:nth-child(8){top:9px;left:284px;} .slides {margin:0; padding:0; zoom:1;height: 100%;background-size: 100% 100%;} .slides > li {height:100%;position: relative; z-index:2; } .slides .cont{width: 100% !important; background-size: cover; display:block; height:100%; background-position:50%; z-index: inherit;} /* 텍스트 부분 */ .slides .box h2 {font-size:60px; color:#93515d; text-align:left; font-family: 'GmarketSansRegular'; } .slides .box h2 span {font-size:60px; color:#332e3e; text-align:left; font-family: 'GmarketSansBold'; } .slides .box .textBox{line-height:160%;font-weight:300; padding:0 5px 30px; margin-top:-15px; color:#fff; font-family: 'GmarketSansMedium'; font-size:26px; overflow: hidden;} .slides .box { width:100%; height:300px; position:absolute; left:5%; position:absolute; margin-left:5%; top:25%; margin-top:-20px; text-align:left; padding:0; color:#fff; z-index:999; } /* 아래로 버튼 */ .slider .downBtn{ text-align:center; width:60px; position:absolute;z-index: 2; bottom:200px; right:50%; margin:0 -30px 0 0; } /* 우측 퀵 버튼 */ .slider .r_quick {position:absolute; z-index:3; right:0px; top:50%; margin-top:-160px; c text-align:right; width:60px; } .slider .r_quick ul li a{ -moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s; display:block; text-align:right; width:50px; float:right; text-align-right;} .slider .r_quick ul li:first-child a{background:#fff; } .slider .r_quick ul li a{ background:#E10025; } .slider .r_quick ul li a:hover {padding-right:10px; } @media screen and (max-width:1000px) { /* 텍스트 부분 */ .slides .box h2 , .slides .box h2 span {font-size:50px; } .slides .box .textBox{ font-size:17px;;} .slides .downBtn img {width:40px; } /* 아래로 버튼 */ .slider .downBtn img {width:40px;} .slides .previous,.slides .next{ margin-top:-17px; width:25px; height:34px; } .slides .previous {background-size:25px; left:10px; } .slides .next {background-size:25px; right:60px;} } @media screen and (min-width:200px) and (max-width:669px) { /* 텍스트 부분 */ .slides .box { width:90%; left:5%; margin-left:0; } .slides .box { top:35%;} .slides .cont .box h2 { font-size:30px; line-height:50px;} .slides .cont .box .textBox{padding:5px 15px;font-size:13px; line-height:18px;} /* 버튼 */ .flickity-page-dots {top:70%;} .flickity-page-dots .dot.is-selected{ background-size:33px; width:33px; height:50px; } .flickity-page-dots { margin-left:-73px; margin-top:-150px;width:147px;height:50px; background-size:147px; } .flickity-page-dots .dot.is-selected{ background-size:20px; width:20px; height:20px;} .slides .previous,.slides .next{ bottom:100px; } /*메인이미지 포인트 위치*/ .flickity-page-dots .dot:nth-child(1){top:15px;left:5px;} .flickity-page-dots .dot:nth-child(2){top:15px;left:45px;} .flickity-page-dots .dot:nth-child(3){top:15px;left:85px;} .flickity-page-dots .dot:nth-child(4){top:15px;left:125px;} .flickity-page-dots .dot:nth-child(5){top:15px;left:165px;} .flickity-page-dots .dot:nth-child(6){top:15px;left:205px;} .flickity-page-dots .dot:nth-child(7){top:15px;left:245px;} .flickity-page-dots .dot:nth-child(8){top:15px;left:285px;} /* 텍스트 부분 */ .slider .box h2 , .slider .box h2 span {font-size:30px; } .slider .box .textBox{ font-size:15px;} /* 우측 퀵 버튼 */ .slider .r_quick { margin-top:-100px; width:40px;} .slider .r_quick img {width:30px;} .slider .r_quick ul li a{ width:30px;} .slides .next { right:40px;} } /* 메인동영상*/ #mmovie .mtxtBox { position:absolute;z-index: 2; position:absolute; display:flex; align-items:center; height:100%; width:100%; } #mmovie .mtxt { width:1200px; margin:0 auto; font-size: 20px; position:relative; } #mmovie .bg-size{ background-attachment: fixed !important; background-size: cover !important; padding:0; margin:0;} #mmovie_con {position:relative; overflow:hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100vh; position: relative; z-index:1; } #mmovie_con video {border:0; padding:0; margin:0; position: absolute; opacity:1; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background-size: cover;} /* 탭메뉴 주석처리 기존*/ /*.sec3-tab{text-align:left;} .sec3-tab a{position:relative; display:inline-block; justify-content:center; letter-spacing:-0.03em; align-items:center; width:auto; padding:0 90px; margin:5px; height:50px; line-height:50px; border-radius:60px; border:1px solid #cbcbcb; font-size:17px; color:#de7736; transition:all .4s; font-family: 'S-CoreDream-5Medium'; } .sec3-tab a.active{background-color:#495975; border:1px solid #cbcbcb; color:#fff; z-index:2;} .sec3-content{display:none; padding-top:50px; } .sec3-content.active{display:block;} .sec3-content .content{flex:1; } */ /* 탭메뉴 스크롤시 상단 고정 위해 새롭게 작업 된 소스*/ .sec3-tab { text-align:center; background: white; z-index: 999; } /* 탭 버튼 스타일 */ .sec3-tab a { position: relative; display: inline-block; justify-content: center; align-items: center; width: auto; padding: 0 90px; margin: 5px; height: 50px; line-height: 50px; border-radius: 60px; background-color: #fff; border: 1px solid #cbcbcb; font-size: 17px; color: #de7736; transition: all 0.4s; font-family: 'S-CoreDream-5Medium';} .sec4 a{ padding:0 32px; } /* 활성 탭 */ .sec3-tab a.active { background-color: #495975; border: 1px solid #cbcbcb; color:#fff; z-index: 2;} .sec3-tab.fixed {position: fixed; top: 80px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding:7px 0; left: 50%; transform: translateX(-50%); width: 100%; background:#fff; z-index: 999;} @media screen and (max-width:1339px){ .sec3-tab a{ height:45px; line-height:45px; font-size:16px; padding: 0 50px; } .sec4 a{ padding:0 25px; } } @media screen and (max-width:1024px){ .sec3-tab a{ padding:0 30px; margin:3px; height:40px; line-height:40px; font-size:15px; } .sec4 a{ padding:0 20px; } .sec3-content{ padding-top:20px;} } @media screen and (max-width:800px){ .sec3-tab.fixed {top:40px;} .sec3-tab a{padding:0 20px; margin:4px 2px; height:30px; line-height:30px; font-size:13px; } .sec4 a{ padding:0 10px; } } /******************* 배너:: 제품소개 롤링*********************/ #mcount { position:absolute; bottom:30px; height:140px; text-align:center; left:0; width:1200px; } #mcount .gb_tit {width:220px; height:140px; background:url(../../img/mlo_tit.png) no-repeat right bottom; float:left; z-index:10; } #mcount .gb_tit h2 {font-size:19px; color:#fff; padding-top:35px; font-family: 'Metropolis-ExtraBold'; text-align:left; padding-left:20px; line-height:100%; } #mcount .gb_tit h2 span{font-size:25px; color:#fff; font-family: 'GmarketSansLight'; line-height:100%;} #mcount .gb_arlim {position:relative; width:100%; background:url(../../img/b_bg.png) repeat; } .popup_li {position:inherit; margin-left:220px; margin-right:40px; padding:0 5px; height:140px; } .popup_li dl:after {content:"";display:block;clear:both;} .popup_li dl { font-size:0;position:relative; margin:10px 5px; height:120px; background:#000;} .popup_li dl dt {width:100%; background-size: cover; height:100%; background-position:50%; opacity:0.6; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s ease-out 0.0s; } .popup_li dl dd {width:100%; position:absolute; z-index:10; top:0; height:100%; text-align:center; } .popup_li dl dd .tit { display:block;padding-top:30px;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s ease-out 0.0s; } .popup_li dl dd .tit h2 {font-size:14px; color:#fff; font-family: 'GmarketSansMedium'; text-align:center; } .popup_li dl dd .tit h2 span {font-size:13px; color:#fff; font-family: 'GmarketSansBold'; padding-bottom:4px; margin-bottom:15px; text-align:center; display:block; background:url(../../img/h_line_2.gif) no-repeat center bottom;} .popup_li dl dd p {display:none; font-size:13px; font-weight:300; line-height:130%; color:#fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s ease-out 0.0s;} #mcount .prev,#mcount .next,#mcount .pause,#mcount .play {right:0px; position:absolute; width:30px; height:30px; display:block; text-indent:-9999px; cursor:pointer; z-index:10; background-repeat:no-repeat; background-size:20px; background-position:50%; background-color:#000; border:none; } #mcount .prev {background-image:url('../../img/prev.png'); top:10px; margin-right:-40px;} #mcount .next {background-image:url('../../img/next.png'); top:40px; margin-right:-40px;} #mcount .pause {background-image:url('../../img/pause.png'); top:70px; } #mcount .play {background-image:url('../../img/play.png'); top:70px; display:none;} .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;} .slick-list.dragging{ cursor: pointer;} .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; margin-left: auto; margin-right: auto;} .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-arrow,.slick-dots li button { cursor:pointer;} .slick-dots {display:none !important;} @media screen and (max-width:1200px) { #mcount { width:100%; } } @media screen and (min-width:1000px) { .popup_li a:hover dl dt { opacity:0.3; } .popup_li a:hover dl dd .tit {padding-top:50px; } .popup_li a:hover dl dd .tit h2 { color:#f66947; padding-bottom:5px; margin-bottom:10px; background:url(../../img/h_line_2.gif) no-repeat center bottom;} .popup_li a:hover dl dd .tit h2 span {display:none;} .popup_li a:hover dl dd p {display:block; } } @media screen and (max-width:1000px) { #mcount .gb_tit {width:150px; background-size:200px; } #mcount .gb_tit h2 {font-size:13px; padding-left:10px;} #mcount .gb_tit h2 span{font-size:15px;} #mcount .gb_tit .subText {font-size:11px;} .popup_li {position:inherit; margin-left:150px; } } @media screen and (max-width:600px) { #mcount .gb_tit {width:130px; background-size:180px; height:110px; } .popup_li { margin-left:130px; height:110px; margin-right:30px; } #mcount { height:110px; } .popup_li dl {height:90px;} .popup_li dl dd .tit {padding-top:10px;} .popup_li dl dd .tit h2 {font-size:13px;} #mcount .prev, #mcount .next { margin-right:-30px;} } /* 배너:: 웹팩토리는? */ .about {width:100%; position:relative; background:#4666B0 url(../../img/about_img.jpg) no-repeat 0 bottom; height:600px; overflow:hidden;} .about dl {width:100%; position:relative; } .about dl:after {content:"";display:block;clear:both;} .about dl dt {width:100%; height:600px; position:relative; } .about dl dt p {color:#fff; font-size:120px; font-family: 'Metropolis-ExtraBold'; position:absolute; z-index:13; left:30px; bottom:-75px; opacity:0.5; } .about dl dt p span {color:#fff; font-size:120px; font-family: 'GmarketSansLight';} .about dl dd {width:40%; position:absolute;display:block; height:470px; z-index:3; right:0; top:0; background:url(../../img/bg_w2.png) repeat ; padding:100px 5% 30px 5%; } .about dl dd h3 {background:url(../../img/about_mark.png) no-repeat 0 0; color:#000; line-height:100%; background-size:100px; font-size:47px; font-family: 'GmarketSansBold'; font-weight:600; margin-bottom:40px; padding-left:110px; } .about dl dd h3 span {font-size:37px; font-weight:200; display:block;color:#000; line-height:110%; font-family: 'GmarketSansLight'; } .about dl dd p { padding-top:10px; font-size:17px; color:#000; display:block; } .about dl dd p span {opacity:0.7; font-size:17px; color:#000; } .about dl dd .btn {margin-top:30px;} @media screen and (max-width:1200px) { .about dl dd {width:44%;height:500px; padding:70px 3% 30px 3%;} .about dl dd h3 {background-size:90px; font-size:43px; margin-bottom:30px; padding-left:90px; } .about dl dd h3 span {font-size:34px;} .about dl dd p, .about dl dd p span {font-size:15px; } .about dl dt p {font-size:100px; bottom:-60px;} .about dl dt p span { font-size:100px; } } @media screen and (max-width:1000px) { .about {width:100%; position:relative; background-size:1000px;} .about dl dd {width:70%;height:auto; z-index:3; margin-top:50px; padding:30px 7% 20px 7%; } .about dl dd h3 {background-size:40px; font-size:27px; margin-bottom:5px; padding-left:50px; } .about dl dd h3 span {font-size:21px;} .about dl dd p, .about dl dd p span {font-size:12px; } .about dl dd .btn {margin-top:20px;} .about dl dd .btn a{ font-size:11px;} .about dl dt p {font-size:30px; bottom:-15px; left:0px;} .about dl dt p span { font-size:30px; } } /* 배너:: 하단 숫자카운트 */ .m_count {width:100%; position:relative; } .m_count ul {width:100%; margin:0 auto; } .m_count ul:after {content:"";display:block;clear:both;} .m_count ul li {float:left; width:25%; } .m_count ul li.dark {background:#26282F;} .m_count ul li dl { text-align:left; border-right:1px solid #E2E0E0; padding:140px 0 60px 0; text-align:center;} .m_count ul li.dark {background:#26282F;} .m_count ul li.dark dl { border-right:1px solid #5F5F5F; } .m_count ul li:last-child dl { border:none; } .m_count ul li dl.count_1 {background:url(../../img/mcount_1.png) no-repeat center 60px; } .m_count ul li dl.count_2 {background:url(../../img/mcount_2.png) no-repeat center 60px; } .m_count ul li dl.count_3 {background:url(../../img/mcount_3.png) no-repeat center 60px; } .m_count ul li dl.count_4 {background:url(../../img/mcount_4.png) no-repeat center 60px; } .m_count ul li dl dt {color:#000; font-family: 'Metropolis-ExtraBold'; font-size:17px; } .m_count ul li dl dd b.counter {color:#000; font-size:50px; letter-spacing:-1em; font-family: 'Metropolis-ExtraBold'; sans-serif; letter-spacing:0.05em;} .m_count ul li.dark dt {color:#fff;} .m_count ul li.dark dd b.counter {color:#fff;;} @media screen and (max-width:1000px) { .m_count ul li { width:50%; } .m_count ul li dl { padding:65px 0 30px;} .m_count ul li dl.count_1, .m_count ul li dl.count_2, .m_count ul li dl.count_3, .m_count ul li dl.count_4 {background-position: center 20px; background-size:35px; } .m_count ul li dl dt {font-size:14px; } .m_count ul li dl dd b.counter {font-size:27px; line-height:100%;} } /* 배너:: 게시판 */ .m_board {background:#fff url('../../img/m_board_bg.jpg') no-repeat center 0; width:100%; position:relative; text-align:center;} .m_board section { margin:0 auto; } .m_board section > div {width:42%; float:left; text-align:left; padding:50px 4%; } .m_board section > div:after {content:"";display:block;clear:both;} .b_tit {border-bottom:1px solid #fff; padding-bottom:10px; margin-bottom:15px;} .b_tit h3 {font-size:19px;} .b_tit h3,.b_tit p {color:#fff;} .b_tit .more a{position:absolute; right:0; top:0;} .b_tit .more a:hover {-ms-transform: rotate(60deg); // explorer -webkit-transform: rotate(60deg); // chrome, safari, opera transform: rotate(60deg); } .b_tit .more a img {width:30px;} .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;} .board_list .board_output .bd_out1 a {color:#fff; } .board_list .board_output .bd_out1 a {font-family:"NotoSansKR"; font-size:15px; letter-spacing:0.02em;} @media screen and (max-width:1360px) { .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:1000px) { .m_board {background:none;} .m_board section {width:100%; } .m_board section > div {width:90%; padding:25px 5%; display:block;} .m_board section > div.board_01 {background:url('../../img/m_board_bg.jpg') no-repeat left 0;} .m_board section > div.board_02 {background:url('../../img/m_board_bg.jpg') no-repeat right 0;} .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) { .board_list .board_output tr td, .board_list .board_output .bd_out1 a {font-size:10px; letter-spacing:-0.05em; } .m_board .m_count { margin-top:30px; padding:10px 0; } .b_tit .more a img {width:20px;} } @media screen and (max-width:380px) { .board_list .board_output .bd_out1 a {font-size:8px;} } /* 배너:: 배너 네개 */ .container01 .box01{background:#F3F2F6 url(../../img/m_banner_bg.jpg) no-repeat center bottom; text-align:center; overflow:hidden;} .container01 .top_tit h2{color:#fff; font-size:33px; font-family: 'Metropolis-ExtraBold'; line-height:120%; position:absolute; z-index:3; left:0px; top:100px; width:100%;} .container01 .top_tit h2 span {color:#FFF; font-size:15px; line-height:120%; display:block;} .top_tit .subText {color:#fff; font-size:16px; opacity:0.7; } .container01 .box01 ul{display: inline-block; width:100%; margin:0 auto; z-index:11; } .container01 .box01 ul li { float:left; width:25%; display:inline-blcok; margin:0; padding:200px 0;background:url(../../img/w_line.png) repeat-y right 0; } .container01 .box01 ul li div.img { width:100%;} .container01 .box01 ul li .mb_01 {background:url(../../img/mquick_1.jpg) no-repeat center 0; } .container01 .box01 ul li .mb_02 {background:url(../../img/mquick_2.jpg) no-repeat center 0; } .container01 .box01 ul li .mb_03 {background:url(../../img/mquick_3.jpg) no-repeat center 0; } .container01 .box01 ul li .mb_04 {background:url(../../img/mquick_4.jpg) no-repeat center 0; } .container01 .box01 ul li .mb_01, .container01 .box01 ul li .mb_02, .container01 .box01 ul li .mb_03, .container01 .box01 ul li .mb_04 {background-size:cover; height:250px; width:100%; display:inline-blcok; opacity:0; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s; } .container01 .box01 ul li a div p{ position:absolute; z-index:100; top:77%; width:90%; padding:0 5%; text-align:center; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s;} .container01 .box01 ul li a div p span{ font-size:15px; line-height:130%; color:#fff;} .container01 .box01 ul li a div h3 {position:absolute; z-index:100; top:38%; width:100%; text-align:center; font-size:25px; font-family: 'GmarketSansBold'; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s; color:#fff; font-weight:600; } .container01 .box01 ul li a div h3 span {background:url(../../img/h_line_b.gif) no-repeat center 0; font-size:15px; font-family: 'GmarketSansMedium'; color: #E2E0E0; padding-top:10px; margin-top:7px; letter-spacing:-0.03em; font-weight:400; display:block;} @media screen and (min-width:1000px) { .container01 .box01 ul li a:hover div {background-color:#000; } .container01 .box01 ul li a:hover .mb_01, .container01 .box01 ul li a:hover .mb_02, .container01 .box01 ul li a:hover .mb_03, .container01 .box01 ul li a:hover .mb_04 {opacity:0.9;} .container01 .box01 ul li a:hover div h3 span {color:#E10025;} .container01 .box01 ul li a:hover div h3 {top:35%; } .container01 .box01 ul li a:hover div p{top:72%;} } @media screen and (max-width:1000px) { .container01 .box01 ul li { float:left; width:50%; padding:20px 0; background: url(../../img/w_line.png) repeat-y right 0,url(../../img/w_line.png) repeat-x 0 0 ; } .container01 .top_tit h2{font-size:20px; top:30px;} .container01 .top_tit h2 span { font-size:11px;} .container01 .box01 ul li a div p{ top:65%;} .container01 .box01 ul li a div p span{ font-size:11px; } .container01 .box01 ul li a div h3 {font-size:19px;; top:35%; } .container01 .box01 ul li a div h3 span { font-size:12px;} } /* ---- 반짝별--- */ .star {position:absolute; left:0; top:0px; z-index:10; background:url(../../img/bg_star.png) 0 0 repeat; width:100%; height:100%; animation:bg_star 30s linear infinite; -moz-animation: bg_star 30s linear infinite; -webkit-animation:bg_star 30s linear infinite; -o-animation: bg_star 30s linear infinite;} @keyframes bg_star {0% { background-position: 0 0, 0 0;}100% { background-position:-2000px 0, 0 0;}} @-moz-keyframes bg_star {0% { background-position: 0 0, 0 0;}100% { background-position:-2000px 0, 0 0;}} @-webkit-keyframes bg_star {0% { background-position: 0 0, 0 0;}100% { background-position:-2000px 0, 0 0;}} @-o-keyframes bg_star {0% { background-position: 0 0, 0 0;}100% { background-position:-2000px 0, 0 0;}} #visual .star2 {position:absolute; left:0; top:100px; z-index:10; background:url(../../img/bg_star.png) 0 0 repeat; width:100%; height:100%; animation:bg_star2 15s linear infinite; -moz-animation: bg_star2 15s linear infinite; -webkit-animation:bg_star2 15s linear infinite; -o-animation: bg_star2 15s linear infinite;} @keyframes bg_star2 {0% { background-position: 0 0, 0 0;}100% { background-position:-2000px 0, 0 0;}} @-moz-keyframes bg_star2 {0% { background-position: 0 0, 0 0;}100% { background-position:-2000px 0, 0 0;}} @-webkit-keyframes bg_star 2 {0% { background-position: 0 0, 0 0;}100% { background-position:-2000px 0, 0 0;}} @-o-keyframes bg_star2 {0% { background-position: 0 0, 0 0;}100% { background-position:-2000px 0, 0 0;}} /* 배너:: 온라인문의*/ .project_btn { width:100%; text-align:center; background:#E10025;} .project_btn a { padding:40px 0 20px 0; display:block; transition:all 200ms linear; -webkit-transition:all 200ms linear; cursor:pointer; -moz-transition:all 200ms linear; -ms-transition:all 200ms linear; -o-transition:all 200ms linear; } .project_btn a h3 {background:url(../../img/icon_online.png) no-repeat center top; padding-top:60px; font-family:'Archivo Narrow',sans-serif; font-size:17px; color:#fff; font-weight:600;} .project_btn a p { padding-top:10px; opacity:0.8; filter:alpha(opacity=80);} .project_btn a p span{ font-size:13px; color:#fff;} .project_btn a:after { content:''; display:inline-block; width:26px; height:13px; margin-left:15px; } .project_btn a:hover { background:#161615; color:#2C2C2A;} .project_btn a:hover h3 ,.project_btn a:hover p { color:#E10025;} @media screen and (min-width:200px) and (max-width:669px) { .project_btn a h3, .project_btn a:hover h3 {background-size:30px; } .project_btn a p span{ display:block;} }