/* ****************** 메인 비주얼 ********************** */ #mainVisual{overflow:hidden; width:100%; max-height:750px; position:relative; margin-top:90px; z-index:100;} .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-pc-img{ 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-m-img{display:none;} /* 메인 비주얼 :: 텍스트 */ .main-visual-item .main-visual-txt-con{position:absolute; top:38%; left:7%; margin-top:-150px; } .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; font-size:20px; font-family: 'GmarketSansMedium'; color:#fff; padding-top:10px; -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.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{ font-family: 'GmarketSansMedium'; font-size:55px; font-weight:300; letter-spacing:-3px; color:#fff; -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{font-family: 'GmarketSansBold'; background:url(../../img/line_bg.gif) repeat-x 0 0; padding-right:3px; display:inline; } .main-visual-item .main-visual-txt-con .main-visual-txt2 span{display:block; color:#fff; font-family: 'GmarketSansMedium'; font-size:14px; letter-spacing:0.2em; padding-bottom:10px; } .main-visual-item .main-visual-txt-con img{display:inline-block;} /* 메인 비주얼 :: 우측도형문구 */ .main-visual-item .main-visual-cir-con{position:absolute; top:60%; left:7%; margin-top:-82px; } .main-visual-item .main-visual-cir-con .main-visual-cir1 {left:0px; top:0;} .main-visual-item .main-visual-cir-con .main-visual-cir2 {left:210px; top:0;} .main-visual-item .main-visual-cir-con .main-visual-cir3 {left:420px; top:0;} .main-visual-item .main-visual-cir-con .bg {width:100%; height:100%; background:#fff; border:2px solid #1A4D99; z-index:1; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; } .main-visual-item .main-visual-cir-con .main-visual-cir2 .bg {background:#1A4D99; border:2px solid #1A4D99;} .main-visual-item .main-visual-cir-con p{position:absolute; top:50%; width:80%; left:10%; text-align:center; line-height:140%; letter-spacing:-0.07em; opacity:0.7; z-index:2; font-size:15px;} .main-visual-item .main-visual-cir-con p.tit {position:absolute; top:18%; width:100%; left:0; text-align:center; color:#1A4D99; line-height:110%; opacity:1; z-index:2; font-size:25px; font-family: 'GmarketSansMedium'; } .main-visual-item .main-visual-cir-con p.tit span {display:block; color:#1A4D99; font-size:25px; font-family: 'GmarketSansBold'; } .main-visual-item .main-visual-cir-con .main-visual-cir2 p, .main-visual-item .main-visual-cir-con .main-visual-cir2 p.tit, .main-visual-item .main-visual-cir-con .main-visual-cir2 p.tit span { color:#fff; } .main-visual-item .main-visual-cir-con .main-visual-cir1, .main-visual-item .main-visual-cir-con .main-visual-cir2, .main-visual-item .main-visual-cir-con .main-visual-cir3{position:absolute; width:190px; height:190px; display:inline-block; 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-cir-con.right .main-visual-cir1, .main-visual-item .main-visual-cir-con.right .main-visual-cir2, .main-visual-item .main-visual-cir-con.right .main-visual-cir3{ 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-cir-con.right .main-visual-cir3{ -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-cir-con.right .main-visual-cir2{ -webkit-transition-delay:0.4s;-moz-transition-delay:0.4s;-o-transition-delay:0.4s;-ms-transition-delay:0.4s;transition-delay:0.4s;} .main-visual-item .main-visual-cir-con.right .main-visual-cir1{ -webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-o-transition-delay:0.1s;-ms-transition-delay:0.1s;transition-delay:0.1s;} /* 메인 비주얼 :: 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-cir1, .main-visual-item.active-item .main-visual-cir2, .main-visual-item.active-item .main-visual-cir3{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-cir-con.right .main-visual-cir1, .main-visual-item.active-item .main-visual-cir-con.right .main-visual-cir2, .main-visual-item.active-item .main-visual-cir-con.right .main-visual-cir3 {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);} /* 메인 비주얼 :: 버튼 */ #mainVisual .slick-dots{position:absolute; width:100%; text-align:center; bottom:35px;} #mainVisual .slick-dots li{display:inline-block; margin:0 5px ; } #mainVisual .slick-dots li button{ cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:60px; height:8px; border:2px solid #fff;} #mainVisual .slick-dots li.slick-active button{background-color:#206BAD; border:2px solid #226DAE;} @media all and ( max-width:1000px ){ #mainVisual{height:auto; margin-top:60px;} /* 메인 비주얼 :: 텍스트 */ .main-visual-item .main-visual-txt-con{ top:40%; left:3%; } .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{ font-size:15px; } .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{ font-size:45px;} .main-visual-item .main-visual-txt-con .main-visual-txt2 b{ background-size:8px;} /* 메인 비주얼 :: 우측도형문구 */ .main-visual-item .main-visual-cir-con{ top:70%; left:3%; } .main-visual-item .main-visual-cir-con .main-visual-cir1 {left:0px;} .main-visual-item .main-visual-cir-con .main-visual-cir2 {left:160px;} .main-visual-item .main-visual-cir-con .main-visual-cir3 {left:320px;} .main-visual-item .main-visual-cir-con p{ font-size:12px;} .main-visual-item .main-visual-cir-con p.tit { font-size:19px; } .main-visual-item .main-visual-cir-con p.tit span { font-size:19px; } .main-visual-item .main-visual-cir-con .main-visual-cir1, .main-visual-item .main-visual-cir-con .main-visual-cir2, .main-visual-item .main-visual-cir-con .main-visual-cir3{width:150px; height:150px;} /* 메인 비주얼 :: 이미지 */ .main-visual-item .main-visual-pc-img{display:none;} .main-visual-item .main-visual-m-img{display:block;} .main-visual-m-img img{width:100%;} /* 메인 비주얼 :: 버튼 */ #mainVisual .slick-dots{ bottom:15px;} #mainVisual .slick-dots li button{ width:40px;} } @media all and ( max-width: 600px ){ /* 메인 비주얼 :: 텍스트 */ .main-visual-item .main-visual-txt-con{ top:45%; } .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{ font-size:12px; } .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{ font-size:30px;} .main-visual-item .main-visual-txt-con .main-visual-txt2 b{ background-size:6px;} /* 메인 비주얼 :: 우측도형문구 */ .main-visual-item .main-visual-cir-con{ top:80%; left:3%;} .main-visual-item .main-visual-cir-con .main-visual-cir1 {left:0px;} .main-visual-item .main-visual-cir-con .main-visual-cir2 {left:100px;} .main-visual-item .main-visual-cir-con .main-visual-cir3 {left:200px;} .main-visual-item .main-visual-cir-con p{ display:none;} .main-visual-item .main-visual-cir-con p.tit {display:block; font-size:15px; top:37%; } .main-visual-item .main-visual-cir-con p.tit span { font-size:15px; } .main-visual-item .main-visual-cir-con .main-visual-cir1, .main-visual-item .main-visual-cir-con .main-visual-cir2, .main-visual-item .main-visual-cir-con .main-visual-cir3{width:90px; height:90px;} } /* 메인비쥬얼 플러그인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;} /* 바로가기 배너 2개 */ .mtwo_banner {width:100%;} .mtwo_banner ul{ width:100%; } .mtwo_banner ul li { float:left; height:300px; width:50%; text-align:left; background:url(../../img/mtwo_banner1.jpg) no-repeat center 0; background-size:cover;} .mtwo_banner ul li:last-child {background:url(../../img/mtwo_banner2.jpg) no-repeat center 0;} .mtwo_banner ul li img {width:100%; } .mtwo_banner ul li a h2 { padding-top:60px; max-width:600px; margin:0 auto; width:90%; font-size:57px; color: #fff; letter-spacing:-0.02em; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s; } .mtwo_banner ul li a h2 img {display:block; width:60px;} .mtwo_banner ul li a h2 span {padding:4px 0 0 4px; font-size:16px; display:block; letter-spacing:0; color: #fff; font-weight:400; line-height:140%; } .mtwo_banner ul li a:hover h2{opacity:0.6;} @media screen and (max-width:1200px) { .mtwo_banner ul li a h2 { font-size:50px; } } @media screen and (max-width:1000px) { .mtwo_banner ul li { height:250px;} .mtwo_banner ul li a h2 {font-size:40px;} .mtwo_banner ul li a h2 img {width:45px;} .mtwo_banner ul li a h2 span { font-size:15x;} } @media screen and (max-width:800px) { .mtwo_banner ul li { height:140px; width:100%; } .mtwo_banner ul li a h2 {padding-top:30px; font-size:25px; line-height:100%; } .mtwo_banner ul li a h2 img {width:30px;} .mtwo_banner ul li a h2 span { font-size:12px;} } /* intro 4단 배너 */ .container04 {overflow:hidden;} .container04 h2{font-size:35px;letter-spacing:-1px; color:#000; font-family:"GmarketSansBold"; } .container04 h2 span {font-size:35px; color:#004B9B; font-family:"GmarketSansLight"; font-weight:bold; padding-right:5px; } .container04 .subText {width:90%; margin:0 auto; font-size:21px; letter-spacing:-0.5px; font-family:"GmarketSansLight"; font-weight:bold; padding-top:10px;} .container04 .box01{background:#F6F6F6; padding:80px 0; text-align:center; overflow:hidden;} .container04 .box01 ul{display: inline-block; max-width:1400px; width:94%; margin:30px auto; } .container04 .box01 ul li { float:left; margin:0.4%; position: relative; height:370px; background:#000; } .container04 .box01 ul li.mc_01,.container04 .box01 ul li.mc_04 {width:27.2%; } .container04 .box01 ul li.mc_02,.container04 .box01 ul li.mc_03 {width:71.2%;} .container04 .box01 ul li .bg {opacity:0.6; width:100%; height:100%; background-size: cover !important; } .container04 .box01 ul li.mc_01 .bg {background:url(../../img/mintro_img1.jpg) no-repeat center 0; } .container04 .box01 ul li.mc_02 .bg {background:url(../../img/mintro_img2.jpg) no-repeat center 0; } .container04 .box01 ul li.mc_03 .bg {background:url(../../img/mintro_img3.jpg) no-repeat center 0; } .container04 .box01 ul li.mc_04 .bg {background:url(../../img/mintro_img4.jpg) no-repeat center 0; } .container04 .box01 ul li a div.txt {position:absolute; top:45%; left:5%; width:90%; text-align:center; -moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s; } .container04 .box01 ul li a div.txt h3 {font-size:27px; color: #fff; font-family: 'GmarketSansMedium'; letter-spacing:-0.03em; font-weight:400; } .container04 .box01 ul li a div.txt p { font-size:13px; letter-spacing:-0.03em; color: #fff; font-weight:400; line-height:140%; opacity:0.8; padding-top:25px; display:none; } .container04 .box01 ul li a div.txt span { font-size:14px; padding-bottom:10px; color: #fff; font-weight:400; padding-top:25px; display:none; background:url(../../img/more_arrow.png) no-repeat center bottom; } @media screen and (min-width:1000px) { .container04 .box01 ul li a:hover .bg {opacity:0.3;} .container04 .box01 ul li a:hover div.txt {top:30%;} .container04 .box01 ul li a:hover div.txt {padding:20px 0 0 0; text-align:center; } .container04 .box01 ul li a:hover div.txt p, .container04 .box01 ul li a:hover div.txt span { display:block; } } @media screen and (max-width:1000px) { .container04 h2, .container04 h2 span {font-size:25px; } .container04 .subText {font-size:12px;padding-top:0px; } .container04 .box01{ padding:40px 0;} .container04 .box01 ul{max-width:500px; } .container04 .box01 ul li { margin:0.5%; height:150px; overflow:hidden;} .container04 .box01 ul li.mc_01,.container04 .box01 ul li.mc_04,.container04 .box01 ul li.mc_02,.container04 .box01 ul li.mc_03 {width:49%;} .container04 .box01 ul li a div.txt {top:45%; } .container04 .box01 ul li a div.txt h3 {font-size:17px; } } /* 수강후기 :: 모니터 이미지 롤링 배너 */ .work {background:url(../../img/lo_banner_bg.jpg) no-repeat center 0; width:100%; padding:100px 0 70px 0; position: relative;} .work .work_wrap:after {content:"";display:block;clear:both;} .work .work_wrap .work_txt {float:left; width:30%; padding-left:5%; } .work .work_wrap .work_txt h2 {font-size:35px; font-family:"GmarketSansLight"; display:block; margin-bottom:30px; padding-top:50px;} .work .work_wrap .work_txt h2 b { font-family:"GmarketSansBold"; display:block;} .work .work_wrap .work_txt h2 p {margin-bottom:30px; } .work .work_wrap .work_txt h2 span {color:#216CAD; border-top:1px solid #216CAD; padding:5px 0 2px 0; margin-bottom:10px;border-bottom:1px solid #216CAD; font-size:14px; font-family: 'GmarketSansMedium'; } .work .work_wrap .work_txt p {font-size:18px; line-height:160%; letter-spacing:-0.02em;} .work .work_wrap .work_txt .btn_list {margin-top:30px; text-align:left;} .work .work_wrap .work_img{ float:right; width:60%; height:470px; overflow:hidden; text-align:center; position: relative;} .work .work_wrap .work_img .item {float:left; display:inline-block; width:400px;} .item dl {position: relative; background:url('../../img/work.png') no-repeat center 0; background-size:400px; width:340px; height:380px; margin:0 auto; padding:25px 30px 62px 30px; overflow:hidden; } .item dl dt {width:100%; text-align:center;} .item dl dt img {width:100%; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } .item a:hover dl dt img {opacity:0.7;} .item dl dd {position:absolute; top:55%; width:85%; height:150px; background:url('../../img/b_bg2.png') repeat 0 0; text-align:center; } .item dl dd .tit h2 {padding:30px 0 10px 0;font-size:20px; color:#fff; } .item dl dd .tit h2 span{font-size:20px; padding-right:5px; color:#E24534;} .item dl dd p {font-size:15px; padding-top:3px; color:#fff; width:90%; margin:0 auto;} .carousel-control { position:absolute; top:0%; margin-top:15%; } .right {left:0; } .left {left:0px; top:50px; } @media screen and (max-width: 1260px) { .work .work_wrap .work_txt h2 {font-size:25px; margin-bottom:20px; padding-top:10px;} .work .work_wrap .work_txt h2 p {margin-bottom:10px; } .work .work_wrap .work_txt h2 span {font-size:11px; } } @media screen and (max-width:1000px) { .work .work_wrap .work_txt h2 {font-size:20px;} .work {background:url(../../img/lo_banner_bg.jpg) no-repeat center 0; padding:50px 0 20px 0; } .work .work_wrap .work_txt {display:block; width:90%; padding:0 5%; margin-bottom:30px;} .work .work_wrap .work_txt .btn_list {margin-top:20px;} .work .work_wrap .work_txt p {font-size:12px;} .work .work_wrap .work_img{ display:block; width:96%; padding-left:4%; height:370px;} .work .work_wrap .work_img .item {width:300px;} .item dl { background-size:300px; width:260px; height:280px; padding:17px 20px 45px 20px; } .item dl dd { width:87%; height:120px; } .item dl dd .tit h2 {padding:20px 0 5px 0;font-size:15px; } .item dl dd .tit h2 span{font-size:15px;} .item dl dd p {font-size:12px;} .carousel-control { margin-top:35%; } .right {left:3px; } .left {left:3px; top:40px; } .right img, .left img {width:30px;} .work .work_wrap .work_txt .btn_list li a {padding:10px;} } /* 육각퀵배너 */ .content {position: relative; max-width:1920px; margin:0 auto; width:100%; background:url(../../img/mquick_bg.gif) repeat 0 0;} .content h2{font-size:31px; line-height:100%; letter-spacing:-1px; ; font-family:"GmarketSansBold"; } .container01 {width:100%; overflow:hidden; height:450px; display:block; position: relative;} .container01 .box01{ margin:0 auto; width:1200px; position:absolute; z-index:12; right:50%; margin:100px -600px 0 0; } .container01 .Tit { background:url(../../img/mquick_icon_tit.png) no-repeat 10px 7px; padding-left:60px; background-size:45px; margin-bottom:30px; margin:0 auto; max-width:1200px;} .container01 h2{ color: #12120F; border-left:1px solid #D0D1D1; padding-left:20px; line-height:100%; font-weight:400; font-family:"Metropolis-ExtraBold"; } .container01 h2 span { display:block; font-size:13px; line-height:140%; color:#000; font-weight:400; opacity:0.7; font-family:'Noto Sans KR';} .container01 .box01 ul:after {content:"";display:block;clear:both;} .container01 .box01 ul li { float:left; width:21%; display:inline-blcok; margin:0 2%; background:url(../../img/mquick_bg.png) no-repeat center 20px; text-align:center;} .container01 .box01 ul li.mb_01 div {background:url(../../img/mquick_icon1.png) no-repeat center 55px; background-size:41px;} .container01 .box01 ul li.mb_02 div {background:url(../../img/mquick_icon2.png) no-repeat center 55px; background-size:41px;} .container01 .box01 ul li.mb_03 div {background:url(../../img/mquick_icon3.png) no-repeat center 55px; background-size:41px;} .container01 .box01 ul li.mb_04 div {background:url(../../img/mquick_icon4.png) no-repeat center 55px; background-size:41px;} .container01 .box01 ul li a div {margin:0 auto;} .container01 .box01 ul li a:hover div {opacity: 0.7; filter:alpha(opacity=70);} .container01 .box01 ul li a div h3 {margin:0 auto; padding-top:150px; font-size:18px; font-family: 'GmarketSansMedium'; color: #2C2C2A; } .container01 .box01 ul li a div p { padding-top:10px; width:98%; margin:0 auto; } .container01 .box01 ul li a div p span { font-family:'Noto Sans KR'; font-size:14px; color: #565656; display:block; font-weight:400; line-height:140%;} /* 회전하는 투명이미지 */ .container01 .mtxt_banner_rotateB img {width:250px; opacity:0.6;} .container01 .mtxt_banner_rotateB {overflow:hidden; position:absolute; z-index:2; top:-30px; left:-30px; animation:rotate 10s linear infinite; -moz-animation:rotate 10s linear infinite; -webkit-animation:rotate 10s linear infinite; -o-animation:rotate 10s 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 );}} @media screen and (min-width:960px) and (max-width:1280px) { .content { width:100%; } .container01 .box01{ width:960px; margin:100px -480px 0 0; } .container01 .box01 ul li { width:23%; margin:0 1%;} .container01 .box01 ul li a div p span {font-size:13px; display:block;} } @media screen and (min-width:670px) and (max-width:959px) { .container01 .box01{ width:660px; margin:100px -330px 0 0; } .container01 .box01 ul li { width:46%; margin:0 2%;} .container01 {height:650px; } .container01 .box02 ul li { width:50%; margin:10px 0;} } @media screen and (min-width:200px) and (max-width:669px) { .content { width:100%; } .container01 .box01 { padding:50px 0;} .content h2 { font-size:21px; padding-bottom:0px; padding-top:0px; background-size:30px 2px; line-height:32px;} .container01 { height:auto;} .container01 .box01{ position:relative; right:0; max-width:420px; width:90%; margin:0 auto;} .container01 .Tit { padding-left:60px; background-size:45px; margin-bottom:30px; background-size:35px;} .container01 h2{ padding-left:20px; line-height:100%; } .container01 h2 span { display:block; font-size:13px; line-height:140%; } .container01 .box01 ul li { width:100%; display:block; height:80px; border-bottom:1px solid #D4D4D4; margin:10px 0; text-align:left; background-size:55px; background-position:0 0px; } .container01 .box01 ul li a div h3 { font-size:16px; padding:0 0 5px 75px; } .container01 .box01 ul li a div p { padding:0 0 0 75px; } .container01 .box01 ul li a div span { font-size:11px; letter-spacing:-0.03em; } .container01 .box01 ul li.mb_01 div, .container01 .box01 ul li.mb_02 div, .container01 .box01 ul li.mb_03 div, .container01 .box01 ul li.mb_04 div {background-size:30px; background-position:13px 15px; } .container01 .mtxt_banner_rotateB img {width:170px;} } /* 배너::고객센터 */ .m_board {background:#2C2803 url('../../img/m_board_bg.jpg') no-repeat center 0; background-attachment:fixed; width:100%; padding:120px 0 0 0; position:relative; text-align:center;} .m_board section {max-width:1260px; width:96%; margin:0 auto; } .m_board section > div {width:42%; float:left; text-align:left; padding:40px 4%; } .m_board .top_tit h2 { color:#fff; font-size:29px;} .m_board .subText {color:#fff;} .b_tit {border-bottom:1px solid #fff; position: relative; 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:0px; top:0px;} .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;} .board_list .board_output .bd_out1 a {color:#fff; } .board_list .board_output .bd_out1 a {font-family:'Noto Sans KR'; font-size:15px; letter-spacing:0.02em;} /* 하단 숫자카운트 */ .m_board .m_count {width:100%; background:url('../../img/bg_b.png') repeat 0 0; margin-top:50px; padding:70px 0; } .m_count ul {width:100%; max-width:1240px; width:96%; margin:0 auto; } .m_count ul:after {content:"";display:block;clear:both;} .m_count ul li {float:left; width:25%; background:url(../../img/line.png) repeat-y right 0px; } .m_count ul li:last-child { background:none;} .m_count ul li dl {padding-left:80px; margin-left:30px; text-align:left;} .m_count ul li dl.count_1 {background:url(../../img/mcount_1.png) no-repeat 0 2px; } .m_count ul li dl.count_2 {background:url(../../img/mcount_2.png) no-repeat 0 2px; } .m_count ul li dl.count_3 {background:url(../../img/mcount_3.png) no-repeat 0 2px; } .m_count ul li dl.count_4 {background:url(../../img/mcount_4.png) no-repeat 0 2px; } .m_count ul li dl dt {color:#fff;} .m_count ul li dl dd b.counter {color:#fff; font-family: 'GmarketSansBold'; font-size:37px; padding:top:10px; letter-spacing:0.05em;} @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 section > div {width:90%; padding:25px 5%; display:block; } .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; } /* 하단 숫자카운트 */ .m_count ul li {width:47.2%; background:none; border:1px solid #3F94CC; margin:2px 1%; } .m_count ul li dl {padding:10px 0 10px 40px; margin-left:15px; } .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-size:30px; background-position:0 20px;} .m_count ul li dl dd b.counter {font-size:20px; } } @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:30px 0; } .b_tit .more a img {width:20px;} } @media screen and (max-width:380px) { .board_list .board_output .bd_out1 a {font-size:8px;} }