/* ****************** 메인 비주얼 ********************** */ #mainVisual{overflow:hidden; width:100%; max-height:750px; min-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:50%; 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:22px; letter-spacing:-1px; font-weight:400; color:#404041; margin-bottom:30px; padding-top:28px; -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:before{position:absolute; top:0; right:0; display:inline-block; content:""; width:36px; height:1px; background-color:#404041;} .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: 'GmarketSansBold'; display:block; font-size:70px; font-weight:300; letter-spacing:-5.5px; line-height:75px; color:#000; margin-bottom:30px; -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:#004B9B;} .main-visual-item .main-visual-txt-con .main-visual-txt2 span{display:block; font-family: 'GmarketSansLight'; } .main-visual-item .main-visual-txt-con img{display:inline-block;} /* 메인 비주얼 :: 우측도형문구 */ .main-visual-item .main-visual-cir-con{position:absolute; top:50%; right:7%; margin-top:-82px; } .main-visual-item .main-visual-cir-con .main-visual-cir1 {right:0px; top:0;} .main-visual-item .main-visual-cir-con .main-visual-cir2 {right:140px; top:0;} .main-visual-item .main-visual-cir-con .main-visual-cir3 {right:280px; top:0;} .main-visual-item .main-visual-cir-con .bg {width:100%; height:100%; opacity:0.5; z-index:1; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; } .main-visual-item .main-visual-cir-con .main-visual-cir1 .bg {background:#0076DE; } .main-visual-item .main-visual-cir-con .main-visual-cir2 .bg {background:#00439B;} .main-visual-item .main-visual-cir-con .main-visual-cir3 .bg { background:#008D9B;} .main-visual-item .main-visual-cir-con p {position:absolute; top:40%; width:100%; text-align:center; color:#fff; line-height:110%; z-index:2; font-size:25px; font-family: 'GmarketSansBold';} .main-visual-item .main-visual-cir-con p span {display:block; color:#fff; font-size:25px; font-family: 'GmarketSansLight';} .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:165px; height:165px; 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-cir1{ -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-cir3{ -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:1200px ){ .main-visual-item .main-visual-txt-con{left:3%;margin-top:-100px; } .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{font-size:19px;} .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-size:55px; line-height:55px; margin-bottom:15px; } /* 메인 비주얼 :: 우측도형문구 */ .main-visual-item .main-visual-cir-con{right:3%; } .main-visual-item .main-visual-cir-con .main-visual-cir1 {right:0;} .main-visual-item .main-visual-cir-con .main-visual-cir2 {right:110px;} .main-visual-item .main-visual-cir-con .main-visual-cir3 {right:220px;} .main-visual-item .main-visual-cir-con p, .main-visual-item .main-visual-cir-con p 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:130px; height:130px;} } @media all and ( max-width: 800px ){ #mainVisual{height:auto; margin-top:60px; min-height:auto; } .main-visual-item .main-visual-txt-con{top:37%; } .main-visual-item .main-visual-cir-con{top:75%; } .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{font-size:15px; margin-bottom:15px; padding-top:15px;} /* 메인 비주얼 :: 이미지 */ .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 .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-size:36px; line-height:41px;} /* 메인 비주얼 :: 우측도형문구 */ .main-visual-item .main-visual-cir-con{ top:80%; right:20px;} .main-visual-item .main-visual-cir-con .main-visual-cir1 {right:0;} .main-visual-item .main-visual-cir-con .main-visual-cir2 {right:80px;} .main-visual-item .main-visual-cir-con .main-visual-cir3 {right:160px;} .main-visual-item .main-visual-cir-con p, .main-visual-item .main-visual-cir-con p span {font-size:16px;} .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;} /* business 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 {font-size:21px; letter-spacing:-0.5px; font-family:"GmarketSansLight"; font-weight:bold; padding-top:10px;} .container04 .box01{background:#F6F6F6; padding:100px 0; text-align:center; overflow:hidden;} .container04 .box01 ul{display: inline-block; max-width:1400px; width:98%; margin:30px auto; } .container04 .box01 ul li { float:left; width:24%; margin:0 0.5%; display:inline-block; } .container04 .box01 ul li img {width:100%; } .container04 .box01 ul li a div {padding:20px 0 0 0; text-align:center; } .container04 .box01 ul li a div h3 { margin:15px auto; font-size:21px; color: #000; letter-spacing:-0.03em; font-weight:400; } .container04 .box01 ul li a div span { font-size:13px; letter-spacing:-0.03em; color: #2C2C2A; font-weight:400; line-height:140%;} .container04 .box01 ul li a div span {opacity:0.7;} .container04 .box01 ul li a:hover div span {opacity:1;} .container04 .box01 ul li a:hover img {opacity:0.7;} @media screen and (max-width:800px) { .container04 .box01 ul li { float:left; width:46%; margin:10px 2%; display:inline-block; } .container04 h2, .container04 h2 span {font-size:25px; } .container04 .subText {font-size:15px;padding-top:0px; } .container04 .box01{ padding:60px 0;} .container04 .box01 ul li a div {padding:10px 0 0 0; } .container04 .box01 ul li a div h3 { margin:10px auto; font-size:17px; } .container04 .box01 ul li a div span { font-size:11px;} } /* 포트폴리오 :: 모니터 이미지 롤링 배너 */ .work {background:#eee; width:100%; padding:60px 0;} .work .work_wrap {background:#fff; max-width:1300px; margin:0 auto; padding:50px; } .work .work_wrap:after {content:"";display:block;clear:both;} .work .work_wrap .work_txt {float:left; width:440px; padding-top:10px; } .work .work_wrap .work_txt h2{font-size:35px; font-family:"GmarketSansBold"; font-weight:bold; line-height: 40px;} .work .work_wrap .work_txt h2 span {color:#216CAD; font-size:35px; font-family: 'GmarketSansMedium'; } .work .work_wrap .work_txt .subText {color:#000; font-size:21px; font-family: 'GmarketSansMedium'; padding:20px 0;} .work .work_wrap .work_txt p {font-size:15px; line-height:160%; padding-top:20px; } .work .work_wrap .work_txt .btn_list {margin-top:30px; text-align:left;} .work .work_wrap .work_img{ float:right; width:800px; height:400px; overflow:hidden; text-align:center;} .work .work_wrap .work_img .item {float:left; display:inline-block; width:400px;} .item dl { background:url('../../img/work.png') no-repeat center 0; background-size:400px; width:340px; height:300px; margin:0 auto; padding:25px 30px; } .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 {padding-top:100px; text-align:center; } .item dl dd .tit h2 {font-size:16px; color:#000; } .item dl dd .tit h2 span{font-size:16px; padding-right:5px; color:#E24534;} .item dl dd p {font-size:14px; padding-top:3px; color:#818181; } .carousel-control { position:absolute; top:0; padding-top:16%; } .right {right:0; } .left {left:0px;} @media screen and (max-width:1400px) { .work .work_wrap { max-width:900px; } .work .work_wrap .work_img{ width:400px;} } @media screen and (max-width: 1000px) { .work { padding:15px 0;} .work .work_wrap {width:88%; margin:0 2%; padding:30px 4%; } .work .work_wrap .work_txt {display:block; width:100%; margin-bottom:30px; } .work .work_wrap .work_txt h2,.work .work_wrap .work_txt h2 span {font-size:25px; line-height:30px;} .work .work_wrap .work_txt .subText {font-size:17px; padding:10px 0;} .work .work_wrap .work_txt p {font-size:12px; letter-spacing:-0.05em;} .work .work_wrap .work_txt .btn_list {margin-top:15px;} .btn a {width:84%; padding:8px 8px 8px 25px; font-size:16px; background-position:10px 10px; border-radius:4px; -moz-border-radius: 4px; -webkit-border-radius:4px; } .work .work_wrap .work_img{ float:none; margin: 0 auto; } .work .work_wrap .work_img{ width:320px; height:360px;} .work .work_wrap .work_img .item {width:320px;} .item dl { background-size:320px; width:270px; height:300px; padding:21px 25px; } .item dl dd .tit h2,.item dl dd .tit h2 span{font-size:14px;} .item dl dd p {font-size:12px; } .carousel-control {padding-top:25%; } .carousel-control img {width:25px;} } /* 육각퀵배너 */ .content {position: relative; max-width:2560px; 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:15px; 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:23px; font-family: 'GmarketSansBold'; 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:15px; color: #565656; display:block; font-weight:400; line-height:120%;} /* 회전하는 투명이미지 */ .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:14px; 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:30px 0;} .content h2 { font-size:24px; padding-bottom:20px; 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:14px; 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:19px; 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:80px 0 80px 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:40px; font-family: gmarketSansBold;} .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:20px;} .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:16px; 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;} /* 배너::고객센터 - JY 수정 */ .m_board2 {background:#2C2803 url('../../img/m_board_bg.jpg') no-repeat center 0; background-attachment:fixed; width:100%; padding:0; position:relative; text-align:center;} .m_board2 section {max-width:1260px; width:96%; margin:0 auto; } .m_board2 section > div {width:42%; float:left; text-align:left; padding:40px 4%; } .m_board2 .top_tit h2 { color:#fff; font-size:29px;} .m_board2 .subText {color:#fff;} .b_tit {border-bottom:1px solid #fff; position: relative; padding-bottom:10px; margin-bottom:15px;} .b_tit h3 {font-size:20px;} .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;} /* 하단 숫자카운트 JY 수정 */ .m_board2 .m_count2 {width:100%; background:url('../../img/bg_b.png') repeat 0 0; /*margin-top:50px;*/ padding:70px 0; } .m_count2 ul {width:100%; max-width:1240px; width:96%; margin:0 auto; } .m_count2 ul:after {content:"";display:block;clear:both;} .m_count2 ul li {float:left; width:33.333%; background:url(../../img/line.png) repeat-y right 0px; } .m_count2 ul li:last-child { background:none;} .m_count2 ul li dl {padding-left:80px; margin-left:30px; text-align:left;} .m_count2 ul li dl.count_1 {background:url(../../img/mcount_1.png) no-repeat 0 2px; } .m_count2 ul li dl.count_2 {background:url(../../img/mcount_2.png) no-repeat 0 2px; } .m_count2 ul li dl.count_3 {background:url(../../img/mcount_3.png) no-repeat 0 2px; } .m_count2 ul li dl.count_4 {background:url(../../img/mcount_4.png) no-repeat 0 2px; } .m_count2 ul li dl dt {color:#fff; font-size:15px;} .m_count2 ul li dl dd b.counter {color:#fff; font-family: 'GmarketSansBold'; font-size:37px; padding:top:10px; letter-spacing:0.05em;} .m_count2 ul li dl dd b {color:#fff; font-family: 'GmarketSansBold'; font-size:34px; 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:14px; letter-spacing:0;} } @media screen and (max-width:1200px) { .board_list .board_output tr td, .board_list .board_output .bd_out1 a {font-size:14px; letter-spacing:-0.05em; } } @media screen and (max-width:1000px) { .m_board .top_tit h2 {font-size:34px;} .m_board section > div {width:90%; padding:25px 5%; display:block; } .m_board2 section > div {width:90%; padding:25px 5%; display:block; } /* JY 수정 */ .b_tit h3 {font-size:16px;} .board_list .board_output tr td, .board_list .board_output .bd_out1 a {font-size:14px; 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:14px; letter-spacing:-0.05em; } /* 하단 숫자카운트 */ .m_board .m_count { margin-top:30px; padding:30px 0; } .b_tit .more a img {width:20px;} .m_board2 .m_count2 { /*margin-top:30px;*/ padding:30px 0; } /* JY 수정*/ /* 하단 숫자카운트 */ .m_count2 ul li {width:98%; background:none; border:1px solid #3F94CC; margin:2px 1%; } .m_count2 ul li dl {padding:10px 0 10px 40px; margin-left:15px; } .m_count2 ul li dl.count_1, .m_count2 ul li dl.count_2, .m_count2 ul li dl.count_3, .m_count2 ul li dl.count_4 {background-size:38px; background-position:0 20px; padding-left:55px;} .m_count2 ul li dl dd b.counter {font-size:20px; } .m_count2 ul li dl dt {font-size:14px;} .m_count2 ul li dl dd b {font-size:27px; } } } @media screen and (max-width:380px) { .board_list .board_output .bd_out1 a {font-size:8px;} } #divpop2 { position: fixed; width: 540px; margin:auto; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 200; visibility: hidden; background-color: white; } #divpop2 td { font-family: Tahama, Dotum, sans-serif; font-size: 11px; line-height: 150%; text-decoration: none; background:#fff; } .poppc {display: flex;} .popm {display: none;} .pop-bottom{background:#fff;height:30px;} .pop-bottom-left{padding-left:15px;font-family: Tahama, Dotum, sans-serif;font-size: 11px;} .pop-bottom-right{padding-right:15px;text-align:right;} @media (max-width: 767px){ #divpop2 {width: 80%; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); margin:auto;} .poppc {display: none;} .popm {display: flex;} .pop-bottom-left{padding-left:5px;font-family: Tahama, Dotum, sans-serif;font-size: 11px;} .pop-bottom-right{padding-right:5px;text-align:right;} } #divpop3 { position: fixed; width: auto; margin:auto; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 200; visibility: hidden; background-color: white; } #divpop3 td { font-family: Tahama, Dotum, sans-serif; font-size: 11px; line-height: 150%; text-decoration: none; background:#fff; } .poppc {display: flex;} .popm {display: none;} .pop-bottom{background:#fff;height:30px;} .pop-bottom-left{padding-left:15px;font-family: Tahama, Dotum, sans-serif;font-size: 11px;} .pop-bottom-right{padding-right:15px;text-align:right;} @media (max-width: 767px){ #divpop3 {width: 95%; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); margin:auto;} .poppc {display: none;} .popm {display: flex;} .pop-bottom-left{padding-left:5px;font-family: Tahama, Dotum, sans-serif;font-size: 11px;} .pop-bottom-right{padding-right:5px;text-align:right;} } #divpop4 { position: fixed; width: 500px; margin:auto; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 200; visibility: hidden; background-color: white; } #divpop4 td { font-family: Tahama, Dotum, sans-serif; font-size: 11px; line-height: 150%; text-decoration: none; background:#fff; } .poppc {display: flex;} .popm {display: none;} .pop-bottom{background:#fff;height:30px;} .pop-bottom-left{padding-left:15px;font-family: Tahama, Dotum, sans-serif;font-size: 11px;} .pop-bottom-right{padding-right:15px;text-align:right;} @media (max-width: 767px){ #divpop4 {width: 80%; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); margin:auto;} .poppc {display: none;} .popm {display: flex;} .pop-bottom-left{padding-left:5px;font-family: Tahama, Dotum, sans-serif;font-size: 11px;} .pop-bottom-right{padding-right:5px;text-align:right;} }