.lead { font-size:16px; line-height:1.75; letter-spacing:-0.02em; color:#555; word-break:keep-all} /* @media screen and (max-width: 640px) { input { -webkit-appearance: none; -webkit-border-radius: 0; } } */ .mobile-block-1401 {display: none;} .mobile-block-1280 {display: none;} .mobile-block-1024 {display: none;} .mobile-block-960 {display: none;} .mobile-block-768 {display: none;} .mobile-block-640 {display: none;} .mobile-block-575 {display: none;} .mobile-block-480 {display: none;} .mobile-block-400 {display: none;} .mobile-block-360 {display: none;} /*Font Size*/ .font-size-11 {font-size:11px} .font-size-12 {font-size:12px} .font-size-13 {font-size:13px} .font-size-14 {font-size:14px} .font-size-15 {font-size:15px} .font-size-16 {font-size:16px} .font-size-17 {font-size:17px} .font-size-18 {font-size:18px} .font-size-19 {font-size:19px} .font-size-20 {font-size:20px} .font-size-25 {font-size:25px} .font-size-30 {font-size:30px} .font-size-32 {font-size:32px} .font-size-34 {font-size:34px} .font-size-36 {font-size:36px} .font-size-38 {font-size:38px} /*Font Weight*/ .font-bold {font-weight:bold} .font-normal {font-weight:normal} /*Text Ellipsis*/ .ellipsis {display:block;overflow:hidden;white-space:nowrap;word-wrap:normal;text-overflow:ellipsis;-o-text-overflow:ellipsis} /*Display Block*/ .display-block {display:block} .display-inline-block {display:inline-block} .inline-mix .display-inline-block {display:inline-block} /*Position & Overflow*/ .position-relative {position:relative} .overflow-hidden {overflow:hidden} /*Outline*/ .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus, .close:focus, .close:hover, .dropdown-menu>li>a, .form-control:focus, .nav>li>a:focus, a, a:focus, button, input, input[type=radio]:focus, input[type=checkbox]:focus, input[type=file]:focus, textarea {outline:0} /* 폰트색상 설정 */ .black {color:#000;} .red {color:#ea2424;} .orange {color:#ff4d4d;} .green {color:#00bd39;} .blue {color:#017dc3;} .sky{color:#3395D6;} .gray {color:#999;} .white {color:#fff;} /*Width*/ .width-10 {width:10%} .width-20 {width:20%} .width-30 {width:30%} .width-40 {width:40%} .width-50 {width:50%} .width-60 {width:60%} .width-70 {width:70%} .width-80 {width:80%} .width-90 {width:90%} .width-100 {width:100%} .width-10px {width:10px} .width-20px {width:20px} .width-30px {width:30px} .width-40px {width:40px} .width-50px {width:50px} .width-60px {width:60px} .width-70px {width:70px} .width-80px {width:80px} .width-90px {width:90px} .width-100px {width:100px} .width-120px {width:120px} .width-150px {width:150px} .width-170px {width:170px} .width-200px {width:200px} .width-250px {width:250px} .width-300px {width:300px} .width-350px {width:350px} .width-400px {width:400px} .width-450px {width:450px} .width-500px {width:500px} /*---------- Spaces ----------*/ .margin-0 {margin:0} .margin-left-0 {margin-left:0} .margin-right-0 {margin-right:0} .margin-left-5 {margin-left:5px} .margin-right-5 {margin-right:5px} .margin-left-10 {margin-left:10px} .margin-right-10 {margin-right:10px} .no-top-space {margin-top:0;padding-top:0} .no-bottom-space {margin-bottom:0;padding-bottom:0} .margin-top-0, .margin-top-5,.margin-top-10,.margin-top-15,.margin-top-20,.margin-top-25,.margin-top-30,.margin-top-35,.margin-top-40,.margin-top-45,.margin-top-50,.margin-top-55,.margin-top-60 {clear:both} .margin-top-0 {margin-top:0} .margin-top-5 {margin-top:5px} .margin-top-10 {margin-top:10px} .margin-top-15 {margin-top:15px} .margin-top-20 {margin-top:20px} .margin-top-25 {margin-top:25px} .margin-top-30 {margin-top:30px} .margin-top-35 {margin-top:35px} .margin-top-40 {margin-top:40px} .margin-top-45 {margin-top:45px} .margin-top-50 {margin-top:50px} .margin-top-55 {margin-top:55px} .margin-top-60 {margin-top:60px} .margin-top-65 {margin-top:65px} .margin-top-70 {margin-top:7px} .margin-top-75 {margin-top:75px} .margin-top-80 {margin-top:80px} .margin-top-85 {margin-top:85px} .margin-top-90 {margin-top:90px} .margin-top-95 {margin-top:95px} .margin-top-100 {margin-top:100px} .margin-bottom-0,.margin-bottom-5,.margin-bottom-10,.margin-bottom-15,.margin-bottom-20,.margin-bottom-25,.margin-bottom-30,.margin-bottom-35,.margin-bottom-40,.margin-bottom-45,.margin-bottom-50,.margin-bottom-55,.margin-bottom-60 {clear:both} .margin-bottom-0 {margin-bottom:0} .margin-bottom-5 {margin-bottom:5px} .margin-bottom-10 {margin-bottom:10px} .margin-bottom-15 {margin-bottom:15px} .margin-bottom-20 {margin-bottom:20px} .margin-bottom-25 {margin-bottom:25px} .margin-bottom-30 {margin-bottom:30px} .margin-bottom-35 {margin-bottom:35px} .margin-bottom-40 {margin-bottom:40px} .margin-bottom-45 {margin-bottom:45px} .margin-bottom-50 {margin-bottom:50px} .margin-bottom-55 {margin-bottom:55px} .margin-bottom-60 {margin-bottom:60px} .margin-bottom-65 {margin-bottom:65px} .margin-bottom-70 {margin-bottom:70px} .margin-bottom-75 {margin-bottom:75px} .margin-bottom-80 {margin-bottom:80px} .margin-bottom-85 {margin-bottom:85px} .margin-bottom-90 {margin-bottom:90px} .margin-bottom-95 {margin-bottom:95px} .margin-bottom-100 {margin-bottom:100px} .margin5 {margin:5px;} .margin10 {margin:10px;} .margin15 {margin:15px;} .margin20 {margin:20px;} .margin25 {margin:25px;} .margin30 {margin:30px;} .margin35 {margin:35px;} .margin40 {margin:40px;} .padding-top-0, .padding-top-5,.padding-top-10,.padding-top-15,.padding-top-20,.padding-top-25,.padding-top-30,.padding-top-35,.padding-top-40,.padding-top-45,.padding-top-50,.padding-top-55,.padding-top-60 {clear:both} .padding-top-0 {padding-top:0} .padding-top-5 {padding-top:5px} .padding-top-10 {padding-top:10px} .padding-top-15 {padding-top:15px} .padding-top-20 {padding-top:20px} .padding-top-25 {padding-top:25px} .padding-top-30 {padding-top:30px} .padding-top-35 {padding-top:35px} .padding-top-40 {padding-top:40px} .padding-top-45 {padding-top:45px} .padding-top-50 {padding-top:50px} .padding-top-55 {padding-top:55px} .padding-top-60 {padding-top:60px;} .padding-top-65 {padding-top:65px} .padding-top-70 {padding-top:7px} .padding-top-75 {padding-top:75px} .padding-top-80 {padding-top:80px} .padding-top-85 {padding-top:85px} .padding-top-90 {padding-top:90px} .padding-top-95 {padding-top:95px} .padding-top-100 {padding-top:100px} .padding-top-105 {padding-top:105px} .padding-top-110 {padding-top:110px} .padding-top-115 {padding-top:115px} .padding-top-120 {padding-top:120px} .padding-top-125 {padding-top:125px} .padding-top-130 {padding-top:130px} .padding-top-135 {padding-top:135px} .padding-top-140 {padding-top:140px} .padding-top-145 {padding-top:145px} .padding-top-150 {padding-top:150px} .padding-bottom-0,.padding-bottom-5,.padding-bottom-10,.padding-bottom-15,.padding-bottom-20,.padding-bottom-25,.padding-bottom-30,.padding-bottom-35,.padding-bottom-40,.padding-bottom-45,.padding-bottom-50,.padding-bottom-55,.padding-bottom-60 {clear:both} .padding-bottom-0 {padding-bottom:0} .padding-bottom-5 {padding-bottom:5px} .padding-bottom-10 {padding-bottom:10px} .padding-bottom-15 {padding-bottom:15px} .padding-bottom-20 {padding-bottom:20px} .padding-bottom-25 {padding-bottom:25px} .padding-bottom-30 {padding-bottom:30px} .padding-bottom-35 {padding-bottom:35px} .padding-bottom-40 {padding-bottom:40px} .padding-bottom-45 {padding-bottom:45px} .padding-bottom-50 {padding-bottom:50px} .padding-bottom-55 {padding-bottom:55px} .padding-bottom-60 {padding-bottom:60px} .padding-bottom-65 {padding-bottom:65px} .padding-bottom-70 {padding-bottom:70px} .padding-bottom-75 {padding-bottom:75px} .padding-bottom-80 {padding-bottom:80px} .padding-bottom-85 {padding-bottom:85px} .padding-bottom-90 {padding-bottom:90px} .padding-bottom-95 {padding-bottom:95px} .padding-bottom-100 {padding-bottom:100px} .only-mobile {display:none;} .mobile_br {display: none;} .mobile_br_one {display: none;} .mobile_br_two {display: none;} @media (max-width: 1401px) { .mobile-none-1401 {display: none;} .mobile-block-1401 {display: block;} } @media (max-width: 1280px) { .mobile-none-1280 {display: none;} .mobile-block-1280 {display: block;} } @media (max-width: 1024px) { .mobile-none-1024 {display: none;} .mobile-block-1024 {display: block;} } @media screen and (max-width: 960px) { .mobile-none {display: none;} .mobile-none-960 {display: none;} .mobile-block-960 {display: block;} } @media screen and (max-width:768px) { .mobile-none-768 {display: none;} .mobile-block-768 {display: block;} } @media screen and (max-width: 640px) { .mobile-none-640 {display: none;} .mobile-block-640 {display: block;} } @media (max-width: 575px) { .top-mobile-none {display: none;} .mobile-none-575 {display: none;} .mobile-block-575 {display: block;} } @media screen and (max-width:480px){ .mobile-none {display: none;} .mobile-none-480 {display: none;} .mobile-block-480 {display: block;} } @media screen and (max-width:400px){ .mobile-none-400 {display: none;} .mobile-block-400 {display: block;} } @media screen and (max-width:360px){ .mobile-none-360 {display: none;} .mobile-block-360 {display: block;} } /*헤드메뉴*/ #header {position:absolute;left:0;top:40px;/* max-width: 1600px;*/ width:100%; left: 50%;/* border-radius: 8px;*/ transform:translateX(-50%) ;z-index:6;height:50px;-webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;/*background-color: #fff;*/} #header .header-inner {width:100%; height:100% } #header .gnb { list-style:none;/* height:100%;*/ position:absolute; right:0px} #header .gnb > li { float:left; position:relative; display:inline-block;/* width:140px; */ vertical-align:middle; text-align:center;padding-left: 54px;} #header .gnb > li > a {display:inline-block; line-height:1em; width:100%; color:#fff;font-size:18px; letter-spacing:-0.5px; font-weight:600; text-decoration:none;} #header .gnb > li > a:hover {color: #2253b8} #header .gnb > li.active {background-color: #b0905e} #header .gnb > li.active > a {color: #fff} #header .gnb .login { /*background-color:#2253b8;*/ font-size:15px; color:#fff;border-top-right-radius: 8px;border-bottom-right-radius: 8px;} #header .gnb .join { /*background-color:#343434;*/ font-size:15px; color:#fff; margin-left:20px} #header .gnb .login a { color:#ddd; font-size:14px} #header .gnb .login a:hover { color:#fff} #header .gnb .join a { color:#ddd; font-size:14px} #header .gnb .join a:hover { color:#fff} #header .header-inner .menu {cursor:pointer;text-indent:-9999px; position:absolute;top:29px; left:50%;width:25px;height:20px; background-image:url(../img/cate_more.gif); margin-left:200px; border:0; display:none} #header .header-inner .menu.on {background-image: url(../img/cate_close.gif)} #header .gnb > li, #header #right-side-open {height:80px;line-height:80px; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;} #header #right-side-open { position:absolute; right:0; width:100px; cursor:pointer; border-left:1px solid rgba(255,255,255,0.3); text-align:center; display: inline-block; } #header #right-side-open span{display:inline-block;width:20px; height:20px;font-size:20px;line-height:1em;margin-top:-10px; margin-left:-10px; position:absolute; top:50%;left:50%; color:#fff;} #header .gnb .snb {list-style:none; display:none;} #header #logo { margin-left:25px; padding:0} #header #logo agnb { display:block; width:180px; height:80px; line-height:80px;margin-top: -5px;} #header #logo img { width:100%} #header #demo {} #header #tel {} #header .gnb .snb,.device-md #header .gnb .snb{display: none;position: absolute;right: -82px;width: 200px; top:80px; border-top: 0;background-color: #000; z-index:2} #header .gnb .snb li { font-size:14px; line-height:3.1; text-align:left; border-top:1px solid #414141;} #header .gnb .snb li a { color:#FFF; display:block; padding-left:20px} #header .gnb .snb li a:hover {color:#fff; display:block; background-color:#2253b8; text-decoration:none; line-height:3.1} #header .gnb .snb li:first-child { border-top:0} .global {display:none; } @media screen and (max-width: 1401px) { .gnb {padding: 0 20px;} #header .gnb > li {padding-left: 30px;} } @media screen and (max-width: 1191px) { } @media screen and (max-width: 1025px) { .gnb {font-size: 16px;} .gnb > ul > li {margin-left: 24px;} } @media screen and (max-width: 961px) { } @media screen and (max-width: 960px) { .global {width: 100%;display: flex;} #header { display:block; background-color:transparent; top:0;/* border-bottom:1px solid rgba(255,255,255,0.4);*/ position:fixed} #header #logo { width:120px; display:block} #header #logo img {width: 100%;} #header #demo {} #header .gnb { display:none} #header #tel {} } /*헤드메뉴*/ /*오른쪽 퀵메뉴*/ .right_quick { position: absolute; right: 0; top: -60px; z-index: 2} .right_quick.fixed {position: fixed; right: 0; top: 50%; margin-bottom:50px; z-index: 100; top: 189px} .right_quick.fixed .material-icons { color:#fff; float:right} .right_quick ul.quick_info { position: relative; height: 240px} .right_quick ul.quick_info li { position: absolute; height: 60px; right:0} .right_quick ul.quick_info li:nth-child(1) {top: 0} .right_quick ul.quick_info li:nth-child(2) {top: 60px} .right_quick ul.quick_info li:nth-child(3) {top: 120px} .right_quick ul.quick_info li:nth-child(4) {top: 180px} .right_quick ul.quick_info li:nth-child(5) {top: 240px} .right_quick ul.quick_info li a{width:60px; height:60px; text-align:center; background:#343434; overflow:hidden; display:block} .right_quick ul.quick_info li i { color:#fff; font-size:24px;} .right_quick ul.quick_info li i.ico{position:absolute;right:20px;top:15px; z-index:2} .right_quick ul.quick_info li:nth-child(1) i {right: 17px} .right_quick ul.quick_info li:nth-child(2) i {right: 17px} .right_quick ul.quick_info li:nth-child(3) i {right: 17px} .right_quick ul.quick_info li:nth-child(4) i {right: 17px} .right_quick ul.quick_info li:nth-child(5) i {right: 17px} .right_quick ul.quick_info li a span{height:60px; line-height:60px; color:#fff; position:absolute; text-align:left; opacity:0; left:30px; font-size:14px; font-weight:500; z-index:2} .right_quick ul.quick_info li a.kakao span { color:#000} @media screen and (max-width: 900px) { .right_quick.fixed { display:none} } /*오른쪽 퀵메뉴*/ /*모바일 오른쪽 메뉴*/ #right-side {background-color:#333;position:fixed; z-index:30; top:0;right:-100%;max-width:100%; width:100%; height:100%; color:#FFF; padding:30px;-webkit-transition: right .3s ease;-moz-transition: right .3s ease;-ms-transition: right .3s ease;-o-transition: right .3s ease;transition: right .3s ease; box-sizing:border-box; overflow:auto;} #right-side .side_gnb .call a {text-align:center; display:block;position:relative;background:#6cc043; color:#fff; font-weight:bold; height:5.0em; line-height:5em; border-radius:3px; margin-top:10px; padding:2px 0 4px 0;} #right-side #btn-close-right-side {position:absolute;top:20px;right:0;color:#fff;width:60px;text-align:center;line-height:40px; font-size:16px; cursor:pointer} #right-side #btn-close-right-side .fa.fa-times { font-size:18px; padding-top:20px} .right-side-on #right-side {right:0;} .right-side-on #wrapper { left:-300px; } .right-side-on #header { left:-502px; } .right-side-on #rs-overlay {display:block;} .quick_menu {width:100%; margin:auto; padding-top:20px} .quick_menu ul { text-align:center} .quick_menu li{display:inline-block; margin-left:-3px; width:80px; border-right:1px solid #555;} .quick_menu li:last-child { border:0} .quick_menu li a{display:block; box-sizing:border-box; color:#f5f5f5; letter-spacing:-0.8px; text-align:center; position:relative; font-size:12px} .quick_menu li a:hover{color:#fff;backface-visibility:hidden} .quick_menu li a.on{color:#fff;border-bottom-color:#FF3300;border-bottom-width:2px;border-bottom-style:solid} .quick_kakao{text-align:center; height:35px; background-color:#ffd800; display:inline-block; clear:both} .quick_kakao a{display:block;position:relative;background:#ffd800} .quick_kakao a img{display:block;margin:0 auto} .side_gnb{position:relative;width:100%;float:left;padding-top:20px;} .side_gnb p{color:#fff; text-align:center; padding:20px } .side_gnb .menu-list{display:block;position:relative;border-bottom:1px solid #555; margin-top:60px} .side_gnb .menu-list>li>a{display:block;position:relative;color:#fff;font-size:15px;line-height:3.8em;padding:0 1.0em;border-top:1px solid #555; text-decoration:none} .side_gnb .menu-list>li>a i{display:block;position:absolute;top:50%;transform:translateY(-75%) rotate(135deg);-webkit-transform:translateY(-75%) rotate(135deg);right:1.5em;width:5.31%;max-width:32px;border:1px solid #ddd;border-left-width:0;border-bottom-width:0;transition:transform .3s ease;-webkit-transition:-webkit-transform .3s ease;-ms-transition:transform .3s ease} .side_gnb .menu-list>li.on>a i{-webkit-transform:translateY(-25%) rotate(315deg);transform:translateY(-25%) rotate(315deg)} .side_gnb .menu-list>li>a i:before{content:"";display:block;position:relative;padding-top:100%} .side_gnb .depth-2{display:none;} .side_gnb .depth-2>li { background-color:#ddd} .side_gnb .depth-2>li>a{display:block;color:#ddd;font-size:1.2em;line-height:3.0em;padding:0 1.5em 0 2.2em;border-bottom:1px solid #fff; color:#000} /* @media screen and (max-width: 640px) { .side_gnb .depth-2>li>a { font-size:16px} } */ /*모바일 오른쪽 메뉴*/ /*메인배너*/ /* Title */ .container_now {min-height: 656px;} /*Why Bestpage.kr*/ .slider {max-width: 1600px;width: 90%;margin: 15px auto;padding: 20px 0;} .slick-slider button {display: none!important;} .slick-slide {color: #333;padding: 40px 0;font-size: 1.25em;font-family: "Verdana";text-align: center;pointer-events: none;} .slick-slide .desc {opacity: 0;} .slick-slide .desc > * {transition: all 900ms ease;} .slick-slide .desc p {position: relative;top: 50px;padding-top: 10px;opacity: 0;} .slick-prev:before, .slick-next:before {color: black;} .slick-dots {text-align: center;} .slick-dots li {display: inline-block;padding: 1px;margin: 10px 5px;width: 40px;height: 5px;} .slick-dots li.slick-active {/*background: #18c495;*/} .slick-dots button {display: none;} .slick-slide:nth-child(odd) {/* background: blue;*/} .slick-slide {opacity: 0.2;transition: all 300ms ease;} .slick-current {opacity: 1;transform: scale(1.1);} .slick-current .desc {opacity: 1;} .slick-current .desc h2 { left: 0; } .slick-current .desc p { top: 0; opacity: 1;} .slick-track {margin-left:0px;margin-right: 0px;} /*크기*/ .slick-slide .desc h2 {position: relative;width: 400px;text-align: center;line-height: 1;} .slick-slide img {width: 400px; /*이미지*/} @media screen and (max-width: 1401px) { /*크기*/ .slick-slide .desc h2 {padding-right: 80px;} .slick-slide img {width: 320px; /*이미지*/} } @media screen and (max-width: 1191px) { /*크기*/ .slick-slide .desc h2 {padding-right: 150px;} .slick-slide img {width: 250px; /*이미지*/} } @media screen and (max-width: 1025px) { /*크기*/ .slick-slide .desc h2 {padding-right: 200px;} .slick-slide img {width: 200px; /*이미지*/} } .slider {max-width: 1600px; width: 90%; margin: 15px auto; padding: 20px 0;} .slick-slider button {display: none!important;} .slick-slide {color: #333;padding: 40px 0;font-size: 1.25em;font-family: "Verdana";text-align: center;pointer-events: none;} .slick-slide .desc {opacity: 0;} .slick-slide .desc > * {transition: all 900ms ease;} /*.slick-slide .desc h2 {position: relative; left: 50px; line-height: 1;font-size:24px;font-weight: 400;}*/ .slick-slide .desc p {position: relative; top: 50px;padding-top: 10px; opacity: 0;} .slick-slide img {width: 400px;} .slick-prev:before, .slick-next:before {color: black;} .slick-dots {text-align: center;} .slick-dots li {display: inline-block;padding: 1px;/*background: #ccc;*/margin: 10px 5px;width: 40px; height: 5px;} .slick-dots li.slick-active {/*background: #18c495;*/} .slick-dots button {display: none;} .slick-slide:nth-child(odd) {/* background: blue;*/} .slick-slide {opacity: 0.2;transition: all 300ms ease;} .slick-current {opacity: 1; transform: scale(1.1);} .slick-current .desc {opacity: 1;} .slick-current .desc h2 {left: 0;} .slick-current .desc p {top: 0; opacity: 1;} .slick-slide .strong {font-size: 24px;} .slider { max-width: 1600px; width: 90%; margin: 15px auto; padding: 20px 0;} .slick-slider button { display: none!important;} .slick-slide { color: #333; padding: 40px 0; font-size: 1.25em; font-family: "Verdana"; text-align: center; pointer-events: none;} .slick-slide .desc {opacity: 0;} .slick-slide .desc > * { transition: all 900ms ease;} .slick-slide .desc h2 { position: relative; /*left: 50px; display: inline-block; margin-left: -64px;*/ font-size: 24px; text-align: center; line-height: 1;} .slick-slide .desc p { position: relative; top: 50px; padding-top: 10px; opacity: 0;} /*크기*/ .slick-initialized .slick-slide {width: 400px;;} .slick-slide img { width: 400px; /*이미지*/} .slick-prev:before, .slick-next:before { color: black;} .slick-dots {text-align: center;} .slick-dots li { display: inline-block; padding: 1px; /*background: #ccc;*/ margin: 10px 5px; width: 40px;height: 5px;} .slick-dots li.slick-active { /*background: #18c495;*/} .slick-dots button {display: none;} .slick-slide:nth-child(odd) { /* background: blue;*/} .slick-slide {opacity: 0.2;transition: all 300ms ease;} .slick-current {opacity: 1; transform: scale(1.1);} .slick-current .desc { opacity: 1;} .slick-current .desc h2 { left: 0;} .slick-current .desc p {top: 0; opacity: 1;} .main-carousel{padding:0; display:block} .main-carousel .li{height:900px; background-size:cover; background-position:center; position:relative} .main-carousel .li .cover{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/main_visual_cover.png) center bottom no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;min-width:300px;opacity:.6;z-index:1} .main-carousel .jarallax { min-height: 900px;} .main-carousel .img01 { background-image:url(../img/main_banner_img01.jpg);} .main-carousel .img02 { background-image:url(../img/main_banner_img02.jpg);} .main-carousel .img03 { background-image:url(../img/main_banner_img03.jpg);} .main-carousel .li .copy_area{width:100%;text-align:center;color:#fff;position:absolute;top:50%;-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:2} .main-carousel .li .copy_area h1{font-size:28px;font-weight:300; line-height:1.3; letter-spacing:0.5px; padding-bottom:20px; color:#fff; text-align:center} .main-carousel .li .copy_area h2{font-size:62px;font-weight:100; line-height:1.3; letter-spacing:-5px; color:#fff; text-align:center} .main-carousel .li .copy_area h3{font-size:24px;font-weight:500;text-align:center;margin:10px 0 0; padding:0 20px; word-break:keep-all; color:#fff; opacity:0.8; letter-spacing:-1px} .main-carousel .owl-dots{position:absolute;width:100%; text-align:center; margin:0 auto; bottom:135px;} .main-carousel .owl-dots .owl-dot{background:rgba(255, 255, 255, 0.5);width:30px;height:5px;display:inline-block;margin-left:10px} .main-carousel .owl-dots .owl-dot.active{background:rgba(255, 255, 255, 1)} .main-carousel .owl-nav{position:absolute;width:100%;bottom:50%} .main-carousel .owl-nav .owl-prev{width:40px;height:30px;position:absolute;left:50px; font-size:14px; color:#fff; border-top: 1px solid #fff; padding-top:5px; text-align:center; background-color:transparent; cursor:pointer} .main-carousel .owl-nav .owl-next{width:40px;height:30px;position:absolute;right:50px; font-size:14px; color:#fff; border-top: 1px solid #fff; padding-top:5px; text-align:center; background-color:transparent; cursor:pointer} /* @media screen and (max-width: 640px) { .main-carousel .li { height:100vh} .main-carousel .jarallax { min-height: 100vh;} .main-carousel .img01 { } .main-carousel .img02 { } .main-carousel .img03 { } .main-carousel .li .copy_area h2 {font-size: 36px; letter-spacing:-3px} .main-carousel .li .copy_area h3 { max-width:300px; margin:10px auto 0 auto; font-size: 15px; letter-spacing:-0.5px} .main-carousel .owl-nav { display:none} } */ .quick-iso {position:absolute; bottom:70px; left:100px; animation:1.5s quickScrollUpDown linear infinite; z-index:60;} .quick-iso a {display:block;} .badge-award {margin:0 auto 16px; z-index:50;} @keyframes quickScrollUpDown{ 0%,100% {transform:translateY(0);} 50% {transform:translateY(15px);} } @media (max-width: 1280px) { .quick-iso {bottom: 50px;} } @media (max-width: 1024px) { .quick-iso {bottom:60px; right:30px; width:120px;} .quick-iso-img {width: 110%;} .badge-award {width:120px; /* height:100px; */ margin-bottom:12px;} } @media (max-width: 960px) { .quick-iso {left: 40px;} .quick-iso-img {width: 90%;} } @media (max-width:768px){ .quick-iso-img {width: 72%;} } @media (max-width: 640px) { .quick-iso {bottom:35px; right:16px; width:80px;} .quick-iso-img {width: 100px;} .badge-award {width:80px; /* height:70px; */ margin-bottom:6px;} } @media (max-width: 575px) { .quick-iso-img {width: 120px;display: none;} } @media (max-width: 480px) { .quick-iso {left: 10px;} .quick-iso-img {width: 90px;} } /*메인배너*/ /*사업영역*/ .tl_company_box_wrap{ width:100%; padding:150px 0px;} .tl_company_box_wrap h2 {text-align:center; font-size:42px; color:#333} .tl_company_box_wrap h2:before{ display:block; content:""; width:30px; height:6px; background:#8fd92e; margin:0 auto 20px auto; border-radius:10px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg);} .tl_company_box_wrap h2 span{ display:block; padding:20px 0; color:#555; font-size:20px; font-weight:400} .tl_company_box_wrap ul {margin-top:30px; overflow:hidden} .tl_company_box_wrap ul li{ width:25%; text-align:center; float:left; display:block} .tl_company_box_wrap ul li .icon { display:inline-block; padding:30px} .tl_company_box_wrap ul li .icon i { color:#666;font-size: 7em;} .tl_company_box_wrap ul li img {vertical-align:middle; transition:transform 500ms} .tl_company_box_wrap ul li:hover i{transform:rotateY(180deg); transition:transform 500ms} .tl_company_box_wrap ul li .box {border-right:1px #eaeaea solid; padding:0 10px; display:block} .tl_company_box_wrap ul li:last-child .box {border-right:0px} .tl_company_box_wrap ul li dl dt {font-weight:bold; padding-bottom:15px; line-height:20px; color:#222; font-size:28px} .tl_company_box_wrap ul li a {display:inline-block; font-size: 16px;margin-top:20px; border:1px #ddd solid; border-radius: 5px;padding:0 20px; line-height:30px; color:#666; transition: all .2s} .tl_company_box_wrap ul li:hover a {background:#2253b8; color:#fff; transition: all .3s} @media screen and (max-width: 1024px) { .tl_company_box_wrap ul li { width:50%} } @media screen and (max-width: 960px) { .tl_company_box_wrap ul li { width:100%} .tl_company_box_wrap ul li .box { border-right:0; border-bottom:1px solid #ddd; padding-bottom:30px} } /*사업영역*/ /*뉴스갤러리*/ .tl_main_gallery_wrap { width:100%; padding:100px 0; background:url(../img/tl_main_gallery_bg.jpg) center no-repeat; background-size:cover;} .tl_main_gallery_wrap .inner {max-width:1600px; margin:0 auto; overflow:hidden} .tl_main_gallery_wrap h2 {text-align:center; font-size:42px; color:#fff} .tl_main_gallery_wrap h2:before{ display:block; content:""; width:30px; height:6px; background:#fff; margin:0 auto 20px auto; margin-top: 8px; border-radius:10px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg);} .tl_main_gallery_wrap h2 span{ display:block; padding:20px 0; color:#fff; opacity:0.8; font-size:20px; font-weight:400} .tl_main_gallery_wrap a:hover {color:#2253b8} .tl_main_gallery_wrap ul {margin-top:30px} .tl_main_gallery_wrap li {position:relative; float:left; width:48%; margin:1%; overflow:hidden; background-color:#fff; display:block} .tl_main_gallery_wrap .one_box {display:block; min-height:155px; background:#fff} .tl_main_gallery_wrap .photo {position:absolute; left:0; top:0; width:100%; max-width:160px; min-height: 155px; height:100%; overflow:hidden; background-repeat:no-repeat; background-size:cover; background-position:center center; -webkit-transform: scale(1);transform: scale(1);transition:all 1s ease;-webkit-transition:all 1s ease} .tl_main_gallery_wrap dl {margin-left:190px; padding-right:10px} .tl_main_gallery_wrap dt {color:#333; font-size:18px; font-weight:bold; margin-top:30px; letter-spacing:-1px} .tl_main_gallery_wrap dd {color:#555; font-size:16px; letter-spacing:-0.02em; line-height:1.75; word-break:keep-all; padding:10px 0; } .tl_main_gallery_wrap li:hover .one_box {background-color:#095ead;cursor: pointer} .tl_main_gallery_wrap li:hover dt {color:#fff} .tl_main_gallery_wrap li:hover dd {color:#fff} .tl_main_gallery_wrap li:hover .more_btn {color:#eee} .tl_main_gallery_wrap a:hover .photo {-webkit-transform: scale(1.1);transform: scale(1.1)} @media screen and (max-width: 1024px) { .tl_main_gallery_wrap li { width:100%; margin:0 0 4% 0} } /*뉴스갤러리*/ /*제품소개*/ .tl_business_now_box_warp { width:100%; padding:100px 0; text-align:center; background-color:#eff1f6; clear:both;} .tl_business_now_box_warp h2 { font-size:42px; color:#000; line-height:1.6; font-weight:600} .tl_business_now_box_warp h2:before{ display:block; content:""; width:30px; height:6px; background:#8fd92e; margin:0 auto 20px auto; border-radius:10px; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg);} .tl_business_now_box_warp span{ padding:10px 10px 50px 10px; font-size:20px; display:block; color:#555; font-weight:400} .tl_business_div {width: 100%;padding-top: 30px;} .tl_business_table {width: 100%;border-top: 3px solid #bbb;border-collapse: collapse;border-spacing: 0;} .tl_business_table_td1 {width: 120px;height: 60px;border-bottom: 1px solid #ccc;background: #eee;padding-left: 15px;} .tl_business_table_td2 {border-bottom: 1px solid #ccc;padding: 15px;} /*제품소개*/ /*TLOG PRODUCTS*/ .tl_product_box_wrap { padding:150px 0; max-width:1600px; margin:0 auto; overflow:hidden} .tl_product_box_wrap h2 { font-size:42px; text-align:center; color:#000; line-height:1.6; font-weight:600} .tl_product_box_wrap span{ padding:10px 10px 50px 10px; font-size:20px; text-align:center; display:block; color:#555; letter-spacing:-0.02em; font-weight:400} /*TLOG PRODUCTS*/ /*메인 공지 최신글*/ .tl_latest_box_warp { width:100%; max-width:1600px; margin:0 auto; padding:0px 20px 100px 20px; clear:both; overflow:hidden} .tl_latest_box_warp .notice_latest { width:48%; float:left} .tl_latest_box_warp .counsel_latest {width:48%; float:right} @media screen and (max-width: 960px) { .tl_latest_box_warp .notice_latest { width:100%} .tl_latest_box_warp .counsel_latest { width:100%} } /*메인 공지 최신글*/ /*하단 상담신청*/ .tl_contact_box_wrap { width:100%; min-height:550px; padding:100px 0; background:url(../img/main_contact_bg.jpg) center top no-repeat; background-size:cover} .tl_contact_box_wrap .inner { max-width:600px; margin:0 auto; padding:0 20px 0} .tl_contact_box_wrap h2 {text-align:center;font-size:42px; color:#fff; line-height:1.6; font-weight:600} .tl_contact_box_wrap h2 span {padding:10px 0 50px 10px; display:block; font-size:20px; color:#fff; opacity:0.8; font-weight:400; letter-spacing:-0.02em} .tl_contact_box_wrap .input_page #co_name { width:48%; height:60px; font-size:15px; color:#6e6e6e; padding-left:10px; float:left; border:0} .tl_contact_box_wrap .input_page #co_email { width:48%; height:60px; font-size:15px; color:#6e6e6e; padding-left:10px; float:right; border:0} .tl_contact_box_wrap .txtarea_page #co_message { margin-top:20px; width:100%; height:120px; font-size:15px; color:#6e6e6e; padding:10px 0 0 10px; border:0} .tl_contact_box_wrap .send_page { text-align:center;} .tl_contact_box_wrap .send_page .send {margin:50px 0 0; max-width:142px; height:41px; line-height:41px; padding:0px 40px;background-color: #3949a3; font-size:15px; font-weight:bold; color:#fff; border:0; border-radius:20px} .tl_contact_box_wrap #x_message{position:absolute;width:300px;border-radius:10px;height:50px;text-align:center;line-height:50px;top:50px;left:50%;margin-left:-150px;background-color:#FDD;border:2px solid #C00;font-weight:700;color:#666;z-index:1000} .tl_contact_box_wrap #x_loading{position:absolute;display:none;width:200px;height:200px;top:50px;left:50%;margin-left:-100px;z-index:1;font-size:100px;line-height:200px} .tl_contact_box_wrap #x_message.x-msg1 {background-color: #FDD;} .tl_contact_box_wrap #x_message.x-msg2 {background-color: #9C6;border:2px solid #096} /*하단 상담신청*/ /*서브상단*/ .sub_visual{position:relative;max-width:2560px;margin:0 auto;height:472px;overflow:hidden;background-repeat:no-repeat;background-position:center top} .sub_visual.visual01 .bg{background-image:url(../img/sub_visual01.jpg)} .sub_visual.visual02 .bg{background-image:url(../img/sub_visual02.jpg)} .sub_visual.visual03 .bg{background-image:url(../img/sub_visual03.jpg)} .sub_visual.visual04 .bg{background-image:url(../img/sub_visual04.jpg)} .sub_visual.visual05 .bg{background-image:url(../img/sub_visual05.jpg)} .sub_visual:hover .bg{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)} .sub_visual .title_warp { max-width:1240px; margin:0 auto; display:table; z-index:5} .sub_visual .title_warp .table-cell { display:table-cell; vertical-align:middle; height:472px;} .sub_visual h3{position:relative;z-index:5;font-size:45px;font-weight:bold; text-align:center; letter-spacing:-1px; color:#fff} .sub_visual .sub_title{ position:relative; padding-bottom:10px; font-size:14px; font-weight:500; color:#fff; text-align:center; opacity:.8; z-index:5} .sub_visual .cover{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/sub_visual_cover.png) center bottom no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;min-width:1600px;opacity:.5;z-index:1} .sub_visual .bg{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;z-index:0;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease} /* @media screen and (max-width: 640px) { .sub_visual .title_warp { max-width:100%;} .sub_visual h3 { font-size:35px} .sub_visual .sub_title { font-size:13px} } */ /*서브상단*/ .content_wrap { width:100%;} .content_wrap .txtCon { /*max-width:1300px;*/ margin:0 auto;/* padding:60px 20px 50px 20px;*/ font-weight:400; position:relative; clear:both} .content_wrap .txtCon .sub_title{ margin-bottom:100px} .content_wrap .txtCon .sub_title h1 {font-size:38px; color:#000; text-align:center} .content_wrap .txtCon .sub_title h1:before {content:""; display:block; height:40px; width:1px; margin:20px auto; background-color:#b0b0b0} .content_wrap .txtCon .sub_title .sub_title {font-size: 16px; color:#555; font-weight:400; text-align:center; padding-top:20px; word-break:keep-all;} .content_wrap .txtboard { /*max-width:1200px;*/ font-size:16px;} /* @media screen and (max-width: 640px) { .content_wrap .txtCon .sub_title h1 { font-size:32px} } */ /*서브 하단 네비*/ .category-wrap {width:100%; height:70px; background-color:#fff; border-bottom:1px solid #ddd; clear:both; background-attachment:scroll; position:relative; z-index:3} .sub_navI_warp { background-color:#fff; max-width:1300px; z-index:3; position:relative; margin: -70px auto;} .all-wrap{max-width:1300px; height:69px; margin:0 auto; transition:all .3s ease;} .all-wrap .loca-wrap{width:100%;margin:0 auto;height:69px} .all-wrap .loca-wrap .loca-area i{float:left;display:inline-block;width:60px;height:71px; line-height:65px; color:#555; border-right:1px solid #ddd; padding:0; margin-top:0; text-align:center} .all-wrap .loca-wrap .loca-area{height:69px;float:left;} .all-wrap .loca-wrap .loca-area > a {display:inline-block;width:54px;height:100%; float:left; line-height:100%; text-align:center;} .all-wrap .loca-wrap .loca-area > a img {margin-top:17px;} .all-wrap .loca-wrap .loca-area>ul {float: left;margin:0; padding:0;} .all-wrap .loca-wrap .loca-area>ul>li{float:left;width:220px;height:70px;position:relative; margin-left:-1px} .all-wrap .loca-wrap .loca-area>ul>li button{height:69px;width:220px;position:relative;text-align:left; background-image:url(../img/loca_arrow_off.png);background-position-y:50%;background-position-x:100%;background-repeat:no-repeat;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-o-transition:background .3s ease;-ms-transition:background .3s ease; border:0; background-color: inherit; box-sizing: border-box; border-left: 1px solid #ddd; border-right: 1px solid #ddd;} .all-wrap .loca-wrap .loca-area>ul>li button.active{background-image:url(../img/loca_arrow_on.png);background-position-y:50%;background-position-x:100%;background-repeat:no-repeat;} .all-wrap .loca-wrap .loca-area>ul>li button span {padding-left: 19px;background-color: transparent; color:#333; font-size:15px} .all-wrap .loca-wrap .loca-area>ul>li div{overflow:hidden;height:0;position:relative} .all-wrap .loca-wrap .loca-area>ul>li div ul{display:block;position:absolute;width:100%;left:0;border:1px solid #ddd; background-color:#fff; padding:0} .all-wrap .loca-wrap .loca-area>ul>li div ul li a{ border-bottom:1px solid #ddd; background:#fff;height:46px;color:#555;line-height:46px;display:block;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-o-transition:background .3s ease;-ms-transition:background .3s ease;padding-left:19px; font-size:15px; box-sizing:border-box} .all-wrap .loca-wrap .loca-area>ul>li div ul li a:hover { color:#000; font-weight:bold} .all-wrap .loca-wrap .share-area {float: right; display:block; padding-top:16px;box-sizing: border-box;} .all-wrap .loca-wrap .share-area .hide-wrap{width:151px;height:34px;overflow:hidden;float:left} .all-wrap .loca-wrap .share-area .hide-wrap .hide-area{width:151px;height:34px;position:relative;left:200px} .all-wrap .loca-wrap .share-area .hide-wrap .hide-area ul {overflow: hidden; padding:0; margin:0} .all-wrap .loca-wrap .share-area .hide-wrap .hide-area ul li {float: left;margin-left: 13px; border-bottom: 1px solid #ddd; cursor:pointer} .all-wrap .loca-wrap .share-area .hide-wrap .hide-area ul li:first-child {margin-left: 0;} .all-wrap .loca-wrap .share-area .share-btn{width:34px;height:34px;background-image:url(../img/share_open_bt.png);float:right;text-indent:-9999px;padding-left:18px;box-sizing:unset;background-repeat:no-repeat;background-position-x:right;transition:all .5s ease; background-color: inherit; border:0; margin-right:20px} .all-wrap .loca-wrap .share-area .share-btn.active {background-image: url(../img/share_close_bt.png);border-left: 1px solid #fff;} /* @media screen and (max-width: 640px) { .all-wrap .loca-wrap .loca-area {100%; float:none;} .all-wrap .loca-wrap .loca-area > a {width:10%;} .all-wrap .loca-wrap .share-area { display:none} .all-wrap .loca-wrap .loca-area > ul {width:100%;} .all-wrap .loca-wrap .loca-area > ul > li { width:50%} .all-wrap .loca-wrap .loca-area > ul > li:first-child { border:0} .all-wrap .loca-wrap .loca-area > ul > li button {width:100%; border-right:0} .all-wrap .loca-wrap .loca-area i { display:none} } */ /*서브 하단 네비*/ /*푸터*/ #footer { padding: 30px 0px; width: 100%; max-width:2560px; position:relative; z-index:10; background-color:#0d0d0d; clear:both } #footer .footer_in { position:relative; z-index:10; max-width:1600px; height:224px; padding:0 10px 0 10px; margin:0 auto; } #footer .gotop { position:fixed; left:0; bottom:20px; width:100%; min-width:1080px; height:1px; text-align:center; } #footer .gotop a { position:absolute; right:7px; bottom:0; } #footer .menu { display:block; padding:7px 0 0; } #footer .menu a { display:inline-block; margin-right:28px; font-size:14px; font-weight:bold; color:#bbb; } #footer .menu a:active { font-size:14px;} #footer .menu a strong { color:#f36910; } #footer address { position:relative; margin:35px 0 0; padding-top:37px; border-top:1px solid #414141; font-size:14px; color:#a9a9a9; } /* font-weight:bold; */ #footer .adr { display:block; margin:0 0 6px; vertical-align:middle; font-style:normal; } #footer .adr:before { content:""; display:inline-block; width:3px; height:3px; margin:0 8px 0 0; border-radius:3px; background-color:#fff; vertical-align:middle; } #footer .copyright { display:block; margin:22px 0 0; font-size:11px;font-style:normal; } #footer a.wa { position:absolute; right:0; top:37px; } /*푸터*/ /* 푸터팝업*/ .tl_pop_con{background:#fff;} .tl_pop_con h2.f_pop_tit{width:100%;height:80px;line-height:80px;font-size:20px;color:#fff;} .tl_pop_con h2.f_pop_tit img {display:inline-block;margin-left:50px;margin-right:5px;margin-top:-10px;width:120px;} .tl_pop_con h2.f_pop_tit span {display:inline-block; padding-left:50px;} .f_pop_wrap {line-height:23px;text-align:justify;word-break:break-all;font-size:15px;overflow-y:auto;} .f_pop_wrap strong {color:#00a19a;font-weight:normal;} .f_pop_wrap p { color:#333; padding:40px 50px; line-height:1.6;} .mfp-close:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../img/btn_close.png") no-repeat center center; -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; border-radius: 50%; } .mfp-close { width: 40px; height: 40px; text-indent: -999px;opacity: 1; overflow: hidden; background-color:transparent; border:0; } button.mfp-close:hover:after { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } /* 푸터팝업*/ @media screen and (max-width: 960px) { .scrolled #header {background-color:#fff; border-bottom:1px solid #ddd;} .scrolled #open-button .nl1 { background-color:#fff} .scrolled #open-button .nl2 { background-color:#fff} .scrolled #open-button .nl3 { background-color:#fff} .scrolled #open-button .navicon-line { background-color:#fff} .scrolled #open-button.on .navicon-line { background-color:#fff} /*버튼*/ #open-button{position:fixed;z-index:12;right:0px;padding-top:17px;width:75px; height:80px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer;display:block;z-index: 30;} #open-button .navicon-line{position:absolute;width:20px;height:2px;border-radius:1px;background:#fff;-webkit-transition:all .7s ease-out;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out;transition:all .7s ease-out} #open-button .nl1 {top: 11px;right: 10px; width:30px;} #open-button .nl2 {top: 19px;right: 10px; width:24px;} #open-button .nl3 {top: 27px;right: 10px; width:30px;} #open-button.on>div>div{transform:rotate(225deg);-ms-transform:rotate(225deg);-webkit-transform:rotate(225deg);width:25px;position:absolute;top:15px;right:10px;margin:0;padding:0;background-color:#fff;} #open-button.on>div>div:first-child{transform:rotate(135deg);-ms-transform:rotate(135deg);-webkit-transform:rotate(135deg)} #open-button.scrolled .navicon-line {background-color: #fff;} #open-button.on.scrolled >div>div{background-color:#333;} /*버튼*/ } @media (max-width: 1600px) { .benefits-v2-heading {height:660px;} .benefits-v2-heading h2 {font-size:85px;} .benefits-v2-heading p {font-size:16px;} .bf-head {margin-bottom:60px;} .bf-head h3 {font-size:32px;} .bf-head p {font-size:16px;} .bf-nav {margin-bottom:60px; font-size:15px; line-height:42px;} .bf-nav ul li a {min-width:130px; padding:0 20px;} } @media (max-width: 1280px) { .bf-item .txt {font-size:16px;} .bf-item .etc {font-size:16px;} .bf-item .etc ul li span {width:140px; height:140px;} } @media (max-width: 1024px) { .benefits-v2-heading {height:580px;} .benefits-v2-heading h2 {font-size:65px;} .benefits-v2-heading p {font-size:15px;} .benefits-v2-content {padding-bottom:140px;} .bf-head {margin-bottom:50px;} .bf-head h3 {font-size:26px;} .bf-head p {font-size:15px;} .bf-nav {display:none;} .bf-item {padding:0 50px;} .bf-item .inner {min-height:330px;} .bf-item .img {padding:15px 0;} .bf-item .cnt {padding:40px 0;} .bf-item h4 {font-size:22px;} .bf-item .badge {font-size:14px; line-height:24px; padding:0 8px;} .bf-item .tt {font-size:16px;} .bf-item .txt {font-size:15px;} .bf-item .etc {font-size:14px;} .bf-item .etc ul li {margin-right:-10px;} .bf-item .etc ul li span {width:120px; height:120px;} .bf-item .btns.mgt {margin-top:30px;} .bf-item .btn {min-width:auto; height:45px; font-size:15px; padding:0 20px;} .bf-item .btn:after {width:16px; height:16px; margin-left:12px;} .bf-item.type1 .img {padding-right:10%; padding-left:0;} .bf-item.type2 .img {padding-left:10%;} .bf-item.type3 .cnt {padding:50px 0;} .bf-item.type2#n2 .img {padding-left:5%;} .bf-item.type2#n12 .img {width:50%;} .bf-item.type2#n14 .img {width:50%;} .event-v2-heading {margin-bottom:47px;} .event-v2-heading h2 {font-size:30px;} .event-v2-heading p {font-size:16px;} .event-v2-section-7 {padding:80px 0;} .event-v2-section-7:before {top:-80px; bottom:-80px;} .event-v2-section-7 .form {width:80%; padding:40px 70px;} .event-v2-section-7 .form .txt1 {font-size:18px; margin-bottom:2px;} .event-v2-section-7 .form .txt2 {font-size:20px;} } @media (max-width: 900px) { .bf-item.type3 {width:100%;} .event-v2-section-7 .form {width:90%; padding:40px;} .event-v2-section-7 .form .submit {width:120px; flex:0 0 120px;} } @media (max-width: 760px) { .benefits-v2-wrapper {padding-bottom:80px;} .benefits-v2-heading {height:calc(100vh - 190px);} .benefits-v2-heading:before {height:calc(100% - 27px); clip-path:polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 80%);} .benefits-v2-heading .inner {background:url("images/top_img_m.jpg") 50% 50% no-repeat; background-size:cover; clip-path:polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 80%, 0 100%);} .benefits-v2-heading h2 {font-size:50px; line-height:1em; margin-bottom:10px;} .benefits-v2-heading p {font-size:13px;} .benefits-v2-content {padding:15px 16px 80px;} .bf-head {margin-bottom:45px;} .bf-head h3 {font-size:23px;} .bf-head p {font-size:13px;} .bf-item {padding:25px; border-radius:10px; margin-bottom:10px;} .bf-item .inner {flex-direction:column; min-height:auto;} .bf-item .img {width:100%; padding:0; margin:25px 0 0 0; transform:none; text-align:center;} .bf-item .img img {height:160px;} .bf-item .cnt {position:relative; z-index:2; width:100%; padding:0; transform:none;} .bf-item h4 {font-size:19px; margin-bottom:7px;} .bf-item .badge {font-size:11px; line-height:22px; padding:0 6px; margin:-.2em 0 0 4px;} .bf-item .tt {font-size:14px; margin-bottom:7px;} .bf-item .txt {font-size:13px;} .bf-item .txt.mgb {margin-bottom:30px;} .bf-item .etc {font-size:11px; position:relative; padding-bottom:27%;} .bf-item .etc ul {position:absolute; top:0; left:0; width:100%; height:100%;} .bf-item .etc ul li {width:27%; margin-right:-2%;} .bf-item .etc ul li span {width:100%; height:100%; padding:8px;} .bf-item .btns {margin-top:12px;} .bf-item .btn {height:38px; padding:0 15px; font-size:13px; margin:3px 3px 0 0;} .bf-item .btn:after {width:12px; height:12px;} .bf-item .sns {margin:-6px -6px 0;} .bf-item .sns img {height:auto; width:70px;} .bf-item.type1 .img {order:2;} .bf-item.type3 .cnt {padding:0;} .bf-item#n9 .img {text-align:right; margin-top:-15px;} .bf-item#n9 .img img {height:150px;} .bf-item.type2#n12 {padding-bottom:80px;} .bf-item.type2#n12 .img {position:absolute; top:15%; left:48%; width:85%; height:106%; margin:0;} .bf-item.type2#n12 .img img {height:100%; left:0; object-fit:contain;} .bf-item.type2#n12 .mo-width-1 {width:90%;} .bf-item.type2#n12 .mo-width-2 {width:70%;} .bf-item.type2#n14 {padding-bottom:70px;} .bf-item.type2#n14 .img {position:absolute; top:15%; left:48%; width:85%; height:106%; margin:0;} .bf-item.type2#n14 .img img {height:100%; left:0; object-fit:contain;} .bf-item.type2#n14 .txt {width:60%;} .event-v2-heading {margin-bottom:47px;} .event-v2-heading h2 {font-size:22px;} .event-v2-heading p {font-size:13px;} .event-v2-section-7 {padding:80px 0 100px;} .event-v2-section-7:before {top:-20px; bottom:-20px; clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);} .event-v2-section-7 .event-v2-heading {margin-bottom:15px;} .event-v2-section-7 .form {width:100%; padding:30px 16px 25px;} .event-v2-section-7 .form .txt1 {font-size:14px;} .event-v2-section-7 .form .txt2 {font-size:17px; margin-bottom:20px;} .event-v2-section-7 .form .input-group {display:block; margin-bottom:-20px;} .event-v2-section-7 .form .input {display:block; width:100%; height:44px; margin-bottom:6px;} .event-v2-section-7 .form .submit {width:100%; height:50px; font-size:18px; margin-top:40px;} .event-v2-section-7 .form .agree {position:relative; top:-64px; font-size:14px;} .event-v2-section-7 .form .checkbox label:before {width:20px; height:20px; background-size:contain;} } .only-desktop {display:block;} .only-desktop-tablet {display:block;} .only-tablet-mobile {display:none;} .only-tablet {display:none;} .only-mobile {display:none;} /* Title */ .container_now {min-height: 656px;} /*Why Bestpage.kr*/ .slider {max-width: 1600px;width: 90%;margin: 15px auto;padding: 20px 0;} .slick-slider button {display: none!important;} .slick-slide {color: #333;padding: 40px 0;font-size: 1.25em;font-family: "Verdana";text-align: center;pointer-events: none;} .slick-slide .desc {opacity: 0;} .slick-slide .desc > * {transition: all 900ms ease;} .slick-slide .desc p {position: relative;top: 50px;padding-top: 10px;opacity: 0;} .slick-prev:before, .slick-next:before {color: black;} .slick-dots {text-align: center;} .slick-dots li {display: inline-block;padding: 1px;margin: 10px 5px;width: 40px;height: 5px;} .slick-dots li.slick-active {/*background: #18c495;*/} .slick-dots button {display: none;} .slick-slide:nth-child(odd) {/* background: blue;*/} .slick-slide {opacity: 0.2;transition: all 300ms ease;} .slick-current {opacity: 1;transform: scale(1.1);} .slick-current .desc {opacity: 1;} .slick-current .desc h2 { left: 0; } .slick-current .desc p { top: 0; opacity: 1;} .slick-track {margin-left:0px;margin-right: 0px;} /*크기*/ .slick-slide .desc h2 {position: relative;width: 400px;text-align: center;line-height: 1;} .slick-slide img {width: 400px; /*이미지*/} @media screen and (max-width: 1401px) { /*크기*/ .slick-slide .desc h2 {padding-right: 80px;} .slick-slide img {width: 320px; /*이미지*/} } @media screen and (max-width: 1191px) { /*크기*/ .slick-slide .desc h2 {padding-right: 150px;} .slick-slide img {width: 250px; /*이미지*/} } @media screen and (max-width: 1025px) { /*크기*/ .slick-slide .desc h2 {padding-right: 200px;} .slick-slide img {width: 200px; /*이미지*/} } /* Title */ .bp_wrap {width:100%;/*height: 620px;*/ padding-top:80px;padding-bottom: 100px;} .bp_wrap .title {line-height: 70px;text-align:center; font-size:38px;font-weight: 700;font-family: 'NanumSquareOTFB';color:#333;} .bp_wrap .sub_title {text-align: center;color: #555;font-size: 26px;font-weight: 400;padding-top: 12px;padding-bottom: 40px;} .bp_wrap .title-dot {position: relative;line-height: 58px;font-size: 38px;font-weight: 700;font-family: 'NanumSquareOTFB';color: #333;padding-top: 10px;} .bp_wrap .title-dot:before {content: "";position: absolute;top: 10px;left: 50%;margin-left: -4px;width: 8px;height: 8px;border-radius: 100%; animation: move_dot 2.5s ease-in 2s infinite;} .bp_wrap .dot-1:before {background: #6dcde5;animation-delay: .2s;} .bp_wrap .dot-2:before {background: #42ade2;animation-delay: .3s;} .bp_wrap .dot-3:before {background: #314eaa;animation-delay: .4s;} .bp_wrap .dot-4:before {background: #002060;animation-delay: .5s;} .bp_wrap .title_img {text-align: center;} .bp_wrap h2:before{ display:block; content:""; width:30px; height:6px;} .bp_wrap h2 span{ display:block; padding:40px 0; color:#555; font-size:30px; font-weight:400} .bp_wrap ul {width: 100%;margin:auto;/*border-bottom: solid 1px rgba(211, 211, 211, 0.5);*/ overflow:hidden} .bp_wrap ul li{ width:33%; text-align:center; float:left; display:block} .bp_wrap ul li .icon { display:inline-block; padding:50px} .bp_wrap ul li .icon i { color:#666} .bp_wrap ul li img {vertical-align:middle; transition:transform 500ms} .bp_wrap ul li:hover i{transform:rotateY(180deg); transition:transform 500ms} .bp_wrap ul li .box {width: 90%;height: 460px;border:1px #ddd solid;background: #f1f1f1;border-radius: 30px; padding:0 10px;display:inline-block;text-align: center;} .bp_wrap ul li:last-child .box {border-right:0px} .bp_wrap ul li dl dt {height: 85px;font-weight:bold; padding-bottom:34px; line-height:20px; color:#222; font-size:26px} .bp_wrap ul li dl dd {height: 100px;} .bp_wrap ul li a {display:inline-block;width: 110px;font-size: 15px;font-weight: 700;margin-top:20px;/* border:2px #ddd solid;*/ padding:0 20px; line-height:40px; color:#666; transition: all .2s;border-radius: 5px;background: #ddd;} .bp_wrap ul li:hover a {background:#2253b8; color:#fff; transition: all .3s} .slider {max-width: 1600px; width: 90%; margin: 15px auto; padding: 20px 0;} .slick-slider button {display: none!important;} .slick-slide {color: #333;padding: 40px 0;font-size: 1.25em;font-family: "Verdana";text-align: center;pointer-events: none;} .slick-slide .desc {opacity: 0;} .slick-slide .desc > * {transition: all 900ms ease;} /*.slick-slide .desc h2 {position: relative; left: 50px; line-height: 1;font-size:24px;font-weight: 400;}*/ .slick-slide .desc p {position: relative; top: 50px;padding-top: 10px; opacity: 0;} .slick-slide img {width: 400px;} .slick-prev:before, .slick-next:before {color: black;} .slick-dots {text-align: center;} .slick-dots li {display: inline-block;padding: 1px;/*background: #ccc;*/margin: 10px 5px;width: 40px; height: 5px;} .slick-dots li.slick-active {/*background: #18c495;*/} .slick-dots button {display: none;} .slick-slide:nth-child(odd) {/* background: blue;*/} .slick-slide {opacity: 0.2;transition: all 300ms ease;} .slick-current {opacity: 1; transform: scale(1.1);} .slick-current .desc {opacity: 1;} .slick-current .desc h2 {left: 0;} .slick-current .desc p {top: 0; opacity: 1;} .slick-slide .strong {font-size: 24px;} .slider { max-width: 1600px; width: 90%; margin: 15px auto; padding: 20px 0;} .slick-slider button { display: none!important;} .slick-slide { color: #333; padding: 40px 0; font-size: 1.25em; font-family: "Verdana"; text-align: center; pointer-events: none;} .slick-slide .desc {opacity: 0;} .slick-slide .desc > * { transition: all 900ms ease;} .slick-slide .desc h2 { position: relative; /*left: 50px; display: inline-block; margin-left: -64px;*/ font-size: 24px; text-align: center; line-height: 1;} .slick-slide .desc p { position: relative; top: 50px; padding-top: 10px; opacity: 0;} /*크기*/ .slick-initialized .slick-slide {width: 400px;;} .slick-slide img { width: 400px; /*이미지*/} .slick-prev:before, .slick-next:before { color: black;} .slick-dots {text-align: center;} .slick-dots li { display: inline-block; padding: 1px; /*background: #ccc;*/ margin: 10px 5px; width: 40px;height: 5px;} .slick-dots li.slick-active { /*background: #18c495;*/} .slick-dots button {display: none;} .slick-slide:nth-child(odd) { /* background: blue;*/} .slick-slide {opacity: 0.2;transition: all 300ms ease;} .slick-current {opacity: 1; transform: scale(1.1);} .slick-current .desc { opacity: 1;} .slick-current .desc h2 { left: 0;} .slick-current .desc p {top: 0; opacity: 1;} /* 제작 혜택 */ .contain {max-width:1600px;/* padding-left:30px; padding-right:30px;padding-bottom: 10px;*/ margin:0 auto;} .main-service-2024 {position:relative; padding:70px 0 0; margin-bottom:70px; overflow:hidden;} .main-service-2024 .main-title {width:42%; text-align:left; margin-bottom:0;} .main-service-2024 .tit-area {display:flex; flex-direction:column; position:absolute; top:0; left:0; width:100%; height:100vh; padding:0px 0 20px;} .main-service-2024 .tit-area:nth-of-type(2) { position: fixed; } .main-service-2024 .heading {margin-bottom:-20px;} .main-service-2024 .heading .main-title h2 {font-size:40px; line-height:1.2em; letter-spacing:-.03em;} .main-service-2024 .heading .website {margin-top:0px; white-space:nowrap; color:#dbdada; font-size:120px; font-weight:800; line-height:1em;margin-left: 240px; ;letter-spacing:-.03em;} .main-service-2024 .content {flex:1 1 auto; min-height:0; height:1%; position:relative; padding:40px 0; color:#fff;} .main-service-2024 .content:before {content:''; position:absolute;height: 400px; top:18px;/* left:calc(50% - 800px);*/ left:calc(0px - 700px); bottom:0; right:0; background:#1c61ad; border-radius:100px 0 0 100px;} .main-service-2024 .content .contain {position:relative;/* height:100%;*/ display:flex; flex-direction:column; justify-content:space-between;} .main-service-2024 .content .main-title h2 {color:#fff; font-size:60px; font-weight:800; line-height:1.3em;text-align: left;margin-left: 200px; letter-spacing:-.03em;} .main-service-2024 .content .main-title p {font-size: 16px;color:#fff;margin-left:200px;} .main-service-2024 .content .main-title .lg {margin:16px 0; font-size:26px; line-height:1.3em;margin-left:200px; letter-spacing:-.03em;} .main-service-2024 .content .more {display:inline-flex; justify-content:space-between; align-items:center; width:180px; height:50px; padding:20px 20px; border:1px solid rgba(255,255,255,.5); border-radius:50px;margin-left:200px;margin-top:36px} .main-service-2024 .content .more span {margin-left:8px;font-size: 16px;color: #fff;} .main-service-2024 .list-area {position: sticky;top:0; margin-left:44.5%; padding:100px 0;padding-bottom: 50px;} .main-service-2024 .list-area .items {display:flex; flex-wrap:wrap; align-items:flex-start; gap:56px;} .main-service-2024 .list-area .item {display:flex; flex-direction:column; gap:15px; width:calc(50% - 28px);/* min-height:425px;*/;text-align: center; padding:49px; background:#fff; border-radius:24px; box-shadow:0px 0px 16px 0px rgba(0, 0, 0, 0.2);} .main-service-2024 .list-area .item:first-child {margin-left:calc(50% + 28px);} .main-service-2024 .list-area .item:nth-child(even) {margin-top:-207px;} .main-service-2024 .list-area .ico {text-align: center;} .main-service-2024 .list-area .num {flex:1 1 auto; min-height:0; height:1%; margin-top:-3px; color:#4876ef;font-size: 18px; font-weight:600; line-height:1.3em;} .main-service-2024 .list-area .txt-area {display:flex; flex-direction:column; justify-content:flex-end;place-items:center; min-height:180px;} .main-service-2024 .list-area .cost {display:inline-block; width:96px; margin-bottom:10px; padding:6px 4px; background:#5837e4; border-radius:8px; color:#fff; font-size:15px; line-height:1.34em; letter-spacing:-.03em; text-align:center;} .main-service-2024 .list-area .m-tt {margin-bottom:8px; font-size:23px; line-height:1.3em; letter-spacing:-.03em;} .main-service-2024 .list-area .s-tt {margin-bottom:4px; font-size:18px; font-weight:600; line-height:1.3em;color:#e6360d; letter-spacing:-.03em;} .main-service-2024 .list-area .txt {color:#686868;font-size:14px; font-weight:300; line-height:1.38em; letter-spacing:-.035em;} .main-service-2024 .list-area .ico img {width:100px;} .main-service-2024 .img_AGENCY img {width:100%;} .main-service-2024 .company_name {margin-bottom:4px; font-size:24px; font-weight:600; line-height:1.3em; letter-spacing:-.03em;padding-top: 10px;text-align: center;color: #333;} .main-service-2024 .company_name_sub {margin-bottom:4px; font-size:18px; font-weight:600; line-height:1.3em; letter-spacing:-.03em;padding-top: 10px;text-align: center;color: #888;} .main-service-2024 .company_name_three {margin-bottom:4px; font-size:16px; font-weight:300; line-height:1.3em; letter-spacing:-.03em;padding-top: 10px;text-align: center;color: #888;} .section03 {position:relative} .section03 .inner {position:relative;width:100%;top:0px;margin:0 auto;background:url(../img/main/section_03.jpg) no-repeat center 0;background-size:cover;height:100%;min-height:783px;text-align:center;max-width: none;} .section03 .inner .wrapper {height:100%} .section03 .inner .partner_list {max-width:795px;width:100%;margin:30% auto 0;} .section03 .inner .partner_list li {float:left;width:25%;} .section03 .inner .partner_list li:first-child a {margin-left:0} .section03 .inner .partner_list li a {margin-left:1px;} .section03 .inner .txt_box .text {width: 340px;height: 328px;border: 1px solid #fff;padding: 20px;text-align: left;} .section03 .inner .txt_box .text_txt {line-height: 54px;color: #fff;font-size: 39px;} .section03 .inner .txt_box .text_txt_tx {font-size: 39px;font-weight: 900;} .section03 .inner .txt_box .text_txt_non{line-height: 24px;color: #fff;font-size: 16px;padding-top: 15px;} .section03 .inner .txt_box {display:inline-block;position:relative;left:0;top:210px;width:370px;height:328px;margin-left:-50px;padding: 15px;} .section03 .inner .txt_box>div {width:190px;overflow:hidden;} .section03 .inner .txt_box .num_01 {position:absolute;top:-50px;left:-200px;text-align:right;} .section03 .inner .txt_box .num_01 #counter1 {font-weight:700;font-size:50px;height:60px;line-height:60px; color:#fff;letter-spacing:-1px;} .section03 .inner .txt_box .num_01 .des {color:#ddd} .section03 .inner .txt_box .num_02 {position:absolute;top:-70px;right:-190px;text-align:left;} .section03 .inner .txt_box .num_02 #counter2 {font-weight:700;font-size:90px;height:90px;line-height:90px;color:#feb252;letter-spacing:-8px;overflow:hidden} .section03 .inner .txt_box .num_02 .des {font-size:20px;color:#feb252;} .section03 .inner .txt_box .num_03 {position:absolute;bottom:-70px;left:-190px;text-align:right;} .section03 .inner .txt_box .num_03 #counter3 {font-weight:700;font-size:100px;height:100px;line-height:100px;color:#fff;letter-spacing:-1px;} .section03 .inner .txt_box .num_03 .des {color:#ddd;font-size:16px;} .section03 .inner .txt_box .num_04 {position:absolute;bottom:-66px;right:-190px; text-align:left;} .section03 .inner .txt_box .num_04 #counter4 {font-weight:700;font-size:50px;height:60px;line-height:60px;color:#fff;letter-spacing:-1px;} .section03 .inner .txt_box .num_04 .des {color:#ddd;} /* 유지보수 */ .main-as-2024 {padding:100px 0;padding-bottom: 100px;background:#4644a0;} .main-as-2024 .main-title {margin-bottom:70px;} .main-as-2024 .main-title h2 {line-height: 40px;text-align:center; font-size:38px;font-weight: 700;font-family: 'NanumSquareOTFB';color:#fff;padding-top: 30px;} .main-as-2024 .main-title h2 strong {font-size:38px;font-weight: 700;color: #f72a85;} .main-as-2024 .main-title p {text-align: center;color: #555;font-size: 26px;font-weight: 400;color: #fff;padding: 30px 0;} .as-counter-wrap {display:flex; gap:56px;max-width: 1600px;margin: 0 auto;} .as-counter-wrap h3 {margin-bottom:24px; color:#fff; font-size:20px; font-weight:400;text-align: center; line-height:1.3em; letter-spacing:-.03em;} .as-box {background:#fff; border-radius:20px;} .as-total {width:43.5%} .as-total .as-box {display:flex; justify-content:center; align-items:center; height:160px; padding:10px; text-align:center;} .as-total dt {margin-bottom:16px; color:#242424; font-size:16px; font-weight:500; line-height:1.3em; letter-spacing:-.04em;} .as-total dd {color:#686868; font-size:18px; line-height:1.3em; letter-spacing:-.03em;} .as-total dd strong {color:#5250aa; font-size:40px; font-weight:700; line-height:1em; letter-spacing:0; letter-spacing:-.03em;} .as-total .items {display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;} .as-total .item.wide {grid-area: 2 / 1 / 3 / 3; padding-left:0; padding-right:0;} .as-total .item.wide dl {position:relative; flex:1;} .as-total .item.wide dl:not(:first-child)::before {content:''; position:absolute; top:8px; left:0; bottom:8px; width:1px; background:#ddd;} .as-total .item.wide dt {width:95px; margin-left:auto; margin-right:auto; background:#f72a85; border-radius:30px; color:#fff; line-height:32px;} .as-graph {display:flex; flex-direction:column; width:56.5%} .as-graph .as-box {display:flex; align-items:center; flex:1 1 auto; min-height:0; height:1%;overflow: hidden;} .as-graph #chart_as_monthly {width:98%;} .as-graph foreignObject {overflow:visible;} .as-graph svg {overflow:visible;} .as-graph svg * {font-family:'Pretendard',sans-serif;} .as-graph .apexcharts-legend-marker {margin-right:6px; width:16px; height:16px;} .as-graph .apexcharts-xaxis text, .as-graph .apexcharts-yaxis text {fill:#454545;} .as-graph .apexcharts-legend-text {font-size:16px; font-weight:500; color:#454545; line-height:1em;} /*사이트제작*/ .contain_flex {display: flex;justify-content: center;padding-top: 60px;} .contain_flex .img_process {float: left;} .contain_flex .img_process_next {float: left;line-height: 106px;padding: 0 60px 0 60px;} .maintenance-listup {margin-top:90px;} .maintenance-listup .main-title {margin-bottom:50px;} .maintenance-listup .main-title h2 strong {color:#f72a85;} .maintenance-listup .slider {padding:0 4.5%; overflow:hidden;} .maintenance-listup .slider .swiper {width:100%; height:380px; overflow:visible;} .maintenance-listup .slider .swiper-slide {position:relative; width:230px; height:calc((100% - 20px) / 2); padding:30px; background:#fff; border-radius:24px; font-size:17px; color:#454545; line-height:1.765em; letter-spacing:-.03em;} .maintenance-listup .slider strong {font-weight:600;} .maintenance-listup .slider .cate {position:absolute; top:30px; right:30px; text-align:center; width:48px; color:#fff; font-size:16px; font-weight:500; line-height:24px; border-radius:30px; background:#5250aa;} .maintenance-listup .slider .cate.cate-2 {background:#686868} .maintenance-list-contain {/*display: grid;align-items: start;grid-template-columns: repeat(6, 1fr);gap: 24px;justify-content: center;align-items: center;text-align: center;*/} .maintenance-list-div {float: left;width:240px;letter-spacing:-.03em;} .maintenance-list-div .div-sm {padding: 15px; background: #fff; border-radius: 24px; font-size: 17px; color: #454545; line-height: 1.765em; margin: 13px; letter-spacing: -.03em;} .maintenance-list-div ul {width: 100%;font-size: 15px;} .maintenance-list-div ul li {width: 100%;line-height: 30px;font-size: 15px;text-align: left;} .maintenance-list-div .li-l {float: left;width: 70%;line-height: 30px;font-size: 15px;text-align: left;} .maintenance-list-div .li-r {float: right;width: 30%;line-height: 30px;font-size: 15px;} .maintenance-list-div .li-r span {display:inline-block;text-align:center; width:50px; color:#fff; font-size:14px; font-weight:500; line-height:24px; border-radius:30px; background:#5250aa;} .main-as-2024 .maintenance_more {width: 400px;height: 70px;line-height: 70px; color: #4644a0;font-size: 22px;font-weight: 700;background: #fff;text-align: center;border-radius: 40px;margin-right:auto;margin-left: auto;} /* 제작기술 */ .main-tech-2024 {padding:70px 0 70px; text-align:center;} .main-tech-2024 .main-title {margin-bottom:70px;} .main-tech-2024 .main-title p {font-size:28px;font-weight: 700;line-height: 48px;color: #333;} .main-tech-2024 .items {display:grid; align-items:start; grid-template-columns:repeat(4, 1fr); gap:24px;} .main-tech-2024 .item .box {position:relative; overflow:hidden; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; color:#fff; border-radius:500px;} .main-tech-2024 .item .box:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#2174ce; opacity:.80;} .main-tech-2024 .item .box:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#2174ce; transition:.75s;} .main-tech-2024 .item .box.st1 {background-image:url('/theme/bestpage01/img/main/2024-tech-api.jpg');} .main-tech-2024 .item .box.st2 {background-image:url('/theme/bestpage01/img/main/2024-tech-sms.jpg');} .main-tech-2024 .item .box.st3 {background-image:url('/theme/bestpage01/img/main/2024-tech-video.jpg');} .main-tech-2024 .item .box.st4 {background-image:url('/theme/bestpage01/img/main/2024-tech-ebook.jpg');} .main-tech-2024 .item .box.st5 {background-image:url('/theme/bestpage01/img/main/2024-tech-zoom.jpg');} .main-tech-2024 .item:nth-child(even) {margin-top:100px;} .main-tech-2024 .item:nth-child(even) .box:before {background:#09cd87;} .main-tech-2024 .item:nth-child(even) .box:after {background:#09cd87;} .main-tech-2024 .item .in {position:relative; display:flex; flex-direction:column; height:560px; padding:80px 32px;} .main-tech-2024 .item .cnt-area {flex:1 1 auto; min-height:0; height:1%;} .main-tech-2024 .item .ico {width:100px; margin:0 auto 32px;} .main-tech-2024 .item .tit {margin-bottom:8px; font-size:26px; line-height:1.3em; letter-spacing:-.03em;} .main-tech-2024 .item .txt {font-size:18px; font-weight:300; line-height:1.38em; letter-spacing:-.03em;} .main-tech-2024 .item .txt strong {font-weight:600;} .main-tech-2024 .item .more {display:block; padding:20px 0;font-size: 18px;color: #fff;} .main-tech-2024 .item .more svg {vertical-align:middle; margin-left:5px; transition:.2s;} .main-tech-2024 .item .more:hover svg {transform:translate(5px,0);} .main-tech-2024 .item .underline {text-decoration:underline; text-underline-offset: 0.25em!important;} .main-tech-2024 .item.aos-animate .box:after {transform:translate(0,-100%); -webkit-transform:translate(0,-100%); transition-delay:.5s;} .process-v2-wrapper {/*padding-bottom:200px;*/ overflow:hidden;} .benefits-v2-heading .inner02 {position:relative; display:flex; align-items:center; height:100%; background:url("../img/process/main_top_process.jpg") 50% 50% fixed no-repeat; background-size:cover; clip-path:polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 77%, 0 100%);} .process-v2-heading {position:relative; height:780px; text-align:center; color:#fff;} .process-v2-heading .inner {position:relative; display:flex; align-items:center; height:100%;} .process-v2-heading .img_02 {background:url("../img/benefits/top_img.png") 50% 100% no-repeat; background-size:cover;} .process-v2-heading h2 {;color: #fff;font-size:100px; font-weight:800; line-height:1.33em; text-shadow: 6px 6px 6px rgb(68 68 68 / 70%); letter-spacing:-.02em;} .process-v2-heading p {font-size:26px; line-height:1.6em; text-shadow: 6px 6px 6px rgb(68 68 68 / 70%); letter-spacing:-.04em;} .benefits-v2-content {padding:20px 50px 200px;} .contain {max-width:100%; padding-left:30px; padding-right:30px; margin:0 auto;} /*사이트 제작 Process & 차별화*/ .process {display:flex; margin:0 -8px; text-align:center;} .process .col {position:relative; width:16.66666666%; padding:0 8px;} .process .col:before {content:""; position:absolute; top:50%; left:-33px; margin-top:-33px; width:66px; height:66px; background:url("/theme/bestpage01/img/main/step_arr.png") 50% 50% no-repeat;} .process .col:first-child::before {display:none;} .process .col:nth-child(even) .item {background:#d1d5ed} .process .item {height:100%; padding:30px 10px 32px; border-radius:20px; background:#d4dff2;} .process .item .ico {margin-bottom:15px;} .process .item .tit {color:#242424; font-size:20px; font-weight:700; line-height:1.3em; letter-spacing:-.03em;} .process .item .txt {color:#454545; font-size:16px; line-height:1.3em; letter-spacing:-.03em; margin-top:7px;} /*Maintenance*/ .Maintenance {width: 100%;margin: 0 auto;padding: 15px;} .Maintenance .wrap {float: left;width: 60%;} .Maintenance .wrap2 {float: left;width: 40%;padding-top: 30px;} .Maintenance .wrap .title {font-size: 44px;font-weight: bold;color: #fff;letter-spacing: -1.38px;font-family: 'Play', sans-serif;line-height: 1;} .Maintenance .wrap .title_sub {font-size: 18px;color: #fff;letter-spacing: -1px;padding-top: 20px;padding-bottom: 30px;} .Maintenance .wrap ul {width: 100%; border-bottom: 0px solid #bbb;padding: 0;margin-top: 0px;} .Maintenance .img {width: 100%;} .Maintenance .img_area {margin-left: 60px;margin-right: 60px;margin-top: 60px;} .list li{line-height: 60px;} .list li.status{display: flex;align-items: center; width: 14%;color: #fff;font-size: 16px;} .list li.status img{margin-right: 8px;margin-left: 15px;} .list li.status .img_Maintenance {animation: 3s linear 0s infinite normal none running rota_ani;} .list li.name{width: 17%;color: #fff;font-size: 16px;} .list li.price{width: 4%;color: #fff;font-size: 16px;} .list li.price span {word-break: keep-all;background: #fff; color: #ff0000; padding: 4px;border-radius: 6px;font-size: 14px;} .list li.date{width: 12%;color: #fff;font-size: 16px;} .list li.type_s{width: 40%;color: #fff;font-size: 16px;} .tl_company_box_wrap{ width:100%;/*height: 620px;*/ padding:50px 0px;} .tl_company_box_wrap h2 {text-align:center; font-size:50px;font-weight: 700;font-family: 'NanumSquareOTFB';color:#333;padding-top: 30px;} .tl_company_box_wrap h2:before{ display:block; content:""; width:30px; height:6px;} .tl_company_box_wrap h2 span{ display:block; padding:40px 0; color:#555; font-size:30px; font-weight:400} .tl_company_box_wrap ul {width: 100%;margin:auto;/*border-bottom: solid 1px rgba(211, 211, 211, 0.5);*/ overflow:hidden} .tl_company_box_wrap ul li{ width:33%; text-align:center; float:left; display:block} .tl_company_box_wrap ul li .icon { display:inline-block; padding:50px} .tl_company_box_wrap ul li .icon i { color:#666} .tl_company_box_wrap ul li img {vertical-align:middle; transition:transform 500ms} .tl_company_box_wrap ul li:hover i{transform:rotateY(180deg); transition:transform 500ms} .tl_company_box_wrap ul li .box {width: 90%;height: 464px;border:1px #ddd solid;background: #f1f1f1;border-radius: 30px; padding:0 10px;display:inline-block;text-align: center;} .tl_company_box_wrap ul li:last-child .box {border-right:0px} .tl_company_box_wrap ul li dl dt {font-weight:bold; padding-bottom:34px; line-height:20px; color:#222; font-size:24px} .tl_company_box_wrap ul li a {display:inline-block;width: 110px;font-size: 15px;margin-top:20px; border:2px #ddd solid; padding:0 20px; line-height:30px; color:#666; transition: all .2s;border-radius: 5px;} .tl_company_box_wrap ul li:hover a {background:#2253b8; color:#fff; transition: all .3s} /* Partners */ .partners ul{width:100%;} .partners ul li{width:20%;float:left;text-align:center;} .partners ul li a{display:inline-block;max-width:100%;width:unset;background:none;} .partners ul li img{max-width:100%;} /*홈페이지는 전문가가 만들어야 합니다.*/ #bottomBtn { position: relative; width: 100%;height: 750px; user-select: auto;display: table; background:url("../img/common/bottom_btnBG.png") no-repeat center;background-size: cover; color:#fff; text-align: center; } #bottomBtn .en-stit2 {font-size: 20px;} #bottomBtn > div { display: table-cell; vertical-align: middle; } #bottomBtn h4 { font-size: 50px; font-weight: 700; line-height: 60px; } #bottomBtn p { font-size: 30px; line-height: 50px;padding-bottom: 30px; } #bottomBtn ul { overflow: hidden; } #bottomBtn ul li { margin: 0 10px; display: inline-block; *zoom: 1; *display: block; } #bottomBtn ul li a { background:#fff; display: block; width: 400px;color:#27252c; padding: 25% 0;border-radius: 6px; } #bottomBtn ul li:last-child a { background:#27252c; color:#fff; } #bottomBtn ul li a h5 { font-size: 32px;font-family: "NanumSquareBold"; margin-top: 10px; } #bottomBtn ul li a p { opacity: 0.7; font-size: 20px; margin-top: 25px; } #bottomBtn ul li a span.more { border-radius: 6px;margin-top: 0px; border:1px solid rgba(39,37,44,0.5); width: 140px; line-height: 50px; font-size: 18px; font-weight: 500;display: inline-block; font-family: 'Montserrat', sans-serif;-webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);-webkit-transition-property: color; transition-property: color;-webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #bottomBtn ul li:last-child a span.more { border:1px solid rgba(255,255,255,0.5); } #bottomBtn ul li a span.more:before {content: "";position: absolute;z-index: -1; top: 0;left: 0;right: 0;bottom: 0;background: #f43c04;-webkit-transform: scaleX(0);transform: scaleX(0); -webkit-transform-origin: 0 50%;transform-origin: 0 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out; } #bottomBtn ul li a:hover span.more, #bottomBtn ul li a:focus span.more, #bottomBtn ul li a:hover span.active { color:#fff; border-color:#f43c04; } #bottomBtn ul li a:hover span.more:before, #bottomBtn ul li a:focus span.more:before, #bottomBtn ul li a:hover span.active:before {-webkit-transform: scaleX(1); transform: scaleX(1);} /* footer */ /* footer */ #footer {position:relative; padding:50px; color:#d0d0d0; font-size:14px; font-weight:200; line-height:1.4em; background:#262626;} #footer address {font-style:normal;} .foot-row-1 {display:flex; margin-bottom:40px;} .foot-logo {width:230px; margin-right:30px;} .foot-nav {flex:1 1 auto; min-width:0; width:1%;margin-right: 40px;} .foot-nav ul {display:flex; flex-wrap:wrap;} .foot-nav ul li {position:relative; padding:0 20px; margin-bottom:8px;} .foot-nav ul li:before {content:""; position:absolute; top:50%; left:0; width:1px; height:15px; margin-top:-6px; background:#626262;} .foot-nav ul li:first-child {padding-left:0;} .foot-nav ul li:first-child::before {display:none;} .foot-nav ul li:last-child {padding-right:0;} .foot-nav ul li a {display:block;color: #d0d0d0;; font-size:16px; font-weight:400; line-height:1.3em;} .foot-nav ul li a:hover {text-decoration:underline;} .foot-contact p {color:#91c8f3; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing:-.03em;} .foot-contact p .tel {margin-left:13px;color: #1572b6; font-family:"Roboto",sans-serif; font-size:30px; font-weight:700; line-height:1em; letter-spacing:0;} .foot-contact .time {display:flex; margin:10px -5px 0; justify-content:space-between;} .foot-contact .time div {padding:0 5px; color:#1d90b6; line-height:1.5em; letter-spacing:-.02em;} .foot-contact .time .t1 {font-size:20px; font-weight:500;} .foot-contact .time .t2 {font-size:20px; font-weight:600;} .foot-row-2 {display:flex; align-items:flex-end;width: 100%;} .foot-info {flex:1 1 auto; min-width:0; width:1%;} .foot-info span {display:inline-block; margin-bottom:4px;} .foot-info .bar {width:1px; height:12px; background:#616161; vertical-align:middle; margin:-.2em 13px 0;} .foot-info .copyright {margin-top:25px;} .foot-links ul {display:flex; flex-wrap:wrap;} .foot-links ul li {margin-left:9px; min-width:155px; text-align:center; border-bottom:1px solid #686868;} .foot-links ul li a {display:block; padding-bottom:14px; font-size:15px; font-weight:400;color:#d0d0d0; line-height:1.3em;} .foot-links ul li a:before {content:""; display:inline-block; width:14px; height:14px; vertical-align:middle; margin:-.2em 7px 0 0; background:url("../images/common/icon_link.png") 50% 50% no-repeat;} .foot-links .download {margin-left:9px; margin-bottom:22px;} .foot-links .download a {display:block; line-height:46px; border:1px solid #b1b1b1; text-align:center; font-size:16px; font-weight:500;color: #d0d0d0; } .foot-links .download a:before {content:''; width:16px; height:16px; background:url('../images/bbs/download01.png') 0 0 no-repeat; background-size:cover; display:inline-block; vertical-align:middle; margin-top:-4px; margin-right:8px;} .foot-links .s-demo {color:#d0d0d0} /* //footer */ /*###################################################################################################################### */ @media (max-width: 1601px) { .main-service-2024 .heading .website {margin-left: 110px;} .main-service-2024 .content .main-title h2 {margin-left: 70px;} .main-service-2024 .content .main-title .lg {margin-left: 70px;} .main-service-2024 .content .main-title p {margin-left: 70px;} .main-service-2024 .content .more {margin-left: 70px;} } @media (max-width: 1401px) { .main-service-2024 .content {padding: 54px 0;} .main-service-2024 .content .main-title h2 {margin-left: 30px;} .main-service-2024 .content .main-title .lg {margin-left: 30px;} .main-service-2024 .content .main-title p {margin-left: 30px;} .main-service-2024 .content .more {margin-left: 30px;} /*사업영역*/ .bp_wrap ul li dl dt {line-height: 34px;font-size: 24px;} .main-tech-2024 .main-title p {font-size: 24px;} /*사이트제작*/ .contain_flex .img_process_next {padding: 0 45px 0 45px;} } @media (max-width: 1280px) { .main-service-2024 .main-title {margin-bottom: 28px;} .main-service-2024 .heading .website {font-size: 65px;} .main-service-2024 .content .main-title .lg {font-size: 20px;} .main-service-2024 .content .main-title p {font-size: 15px;} .main-service-2024 .content .more {margin-top: 0px;} .main-service-2024 .list-area .item {padding: 30px;} .main-service-2024 .list-area {} /*사업영역*/ .bp_wrap ul li .box {height: 430px;} .bp_wrap ul li .icon {padding: 36px;} .bp_wrap ul li dl dt {font-size: 20px;} .lead {font-size: 15px;} .main-tech-2024 .main-title p {font-size: 20px;} .main-tech-2024 .item .in {height:450px;padding: 40px 10px;} .main-tech-2024 .item .tit {font-size: 20px;} .main-tech-2024 .item .txt {font-size: 16px;} /*유지보수*/ .mobile_br_one {display: block;} .as-total dd strong {font-size: 34px;} .apexcharts-legend.position-bottom.center, .apexcharts-legend.position-top.center {width: 100%;} /*사이트제작*/ .contain_flex .img_process_next {padding: 0 20px 0 20px;} .list li.status {width: 20%;} .list li.date {width:15%} /* footer */ #footer {padding:40px 30px;} } @media (max-width: 1024px) { .main-service-2024 .content .main-title h2 {margin-left: 0px;} .main-service-2024 .content .main-title .lg {font-size: 18px;margin-left: 0px;} .main-service-2024 .content .main-title p {font-size: 14px;margin-left: 0px;} .main-service-2024 .content .more {margin-left: 0px;} .main-service-2024 .list-area .txt-area {text-align: center;} .main-service-2024 .list-area .m-tt {font-size: 20px;} .apexcharts-legend.position-bottom.center, .apexcharts-legend.position-top.center {width: 550px;} /*사이트제작*/ .contain_flex .img_process_next {padding: 0 15px 0 15px;} /* footer */ #footer {font-size:13px;} .foot-contact p {font-size:16px;} .foot-contact p .tel {font-size:28px;} .foot-contact .time .t1 {font-size:16px;} .foot-contact .time .t2 {font-size:16px;} .foot-nav ul li {padding:0 16px;} .foot-nav ul li:before {height:12px;} .foot-nav ul li a {font-size:15px;} .foot-links ul li a {font-size:14px;} } @media screen and (max-width: 960px) { .bp_wrap .title {font-size: 30px;} .bp_wrap .title-dot {font-size: 30px} .bp_wrap .sub_title {font-size: 22px;padding-top:0px;} .main-service-2024 .heading { margin-bottom: -77px;} .main-service-2024 .main-title {margin-bottom: 80px;} .main-service-2024 .content {} .main-service-2024 .heading .website {margin-left: 0px;margin-left: 0px;} .main-service-2024 .content .main-title .lg {font-size: 16px;} /*사업영역*/ .bp_wrap ul li .box {height: 460px;} .bp_wrap ul li dl dd {height: 140px;} .apexcharts-legend.position-bottom.center, .apexcharts-legend.position-top.center {width: 432px;} /*사이트제작*/ .contain {padding-left: 10px;padding-right: 10px;} .contain_flex .img_process_next {padding: 0 20px 0 20px;} .contain_flex .img_no {width: 100%;} .br_none {display: none;} .Maintenance .wrap {float: none; width: 100%;} #bottomBtn h4 {font-size: 32px;} #bottomBtn p {font-size: 20px;} #bottomBtn ul li a {width:300px;} #bottomBtn ul li a h5 {font-size: 26px;} #bottomBtn ul li a p {font-size:16px;} .foot-row-1 {display:block;} .foot-nav {width:100%;margin-top:30px;} .foot-contact {margin-top: -6px;position: absolute;right: 10px;top:36px;} } @media screen and (max-width:768px){ .only-mobile {display: block;} .bp_wrap .title {font-size: 32px;} .bp_wrap .title-dot {font-size: 32px;padding-top: 16px;} .bp_wrap .sub_title {font-size: 18px;} .main-service-2024 .main-title {width: 55%;} .main-service-2024 .heading {margin-bottom: -20px;} .main-service-2024 .heading .website {font-size: 56px;margin-top: 0px;} .main-service-2024 .list-area {padding: 40px 0;} .main-service-2024 .content {flex:none;height: 316px;padding: 35px 0;} .main-service-2024 .main-title {margin-bottom: 30px;} .main-service-2024 .heading .website {font-size: 33px;} .main-service-2024 .content .main-title h2 {font-size: 34px;} .main-service-2024 .content .main-title .lg {font-size: 22px;} .main-service-2024 .content .main-title p {font-size:14px;} .main-service-2024 .list-area {padding: 40px 0;margin-left: 54%;} .main-service-2024 .list-area .items {flex-wrap: none;} .main-service-2024 .list-area .item {width: calc(100% - 28px);} .main-service-2024 .list-area .item:first-child {width: calc(100% - 28px);margin-left: calc(13% - 28px);} .main-service-2024 .list-area .item:nth-child(even) {margin-top:0px;} /*사업영역*/ .bp_wrap ul li .box {height: 500px;padding:0px 10px;} .bp_wrap ul li .icon { padding:22px;} .bp_wrap ul li dl dt {font-size: 19px;} .bp_wrap ul li dl dd {height: 218px;} .main-tech-2024 .main-title {margin-bottom:20px;} .main-tech-2024 .items {grid-template-columns: repeat(2, 1fr);} .main-tech-2024 .item .in {height: 337px;} /*숫자로보는베스트,고객에게 믿음을 드리고 싶습니다.*/ .section03 .inner .txt_box {top:210px;width:280px;height:342px;} .section03 .inner .txt_box .text {width:276px;height:306px;} .section03 .inner .txt_box .text_txt {font-size:30px;line-height: 44px;} .section03 .inner .txt_box .text_txt_tx {font-weight:900;} .section03 .inner .txt_box .num_02 {right: -220px;} .section03 .inner .txt_box .num_04 {right: -220px;} .section03 .inner .txt_box .num_02 #counter2 {font-size:70px;} .section03 .inner .txt_box .num_01 .des {display: inline-block;padding-left: 88px;} .section03 .inner .txt_box .num_02 .des {padding-right: 100px;} .section03 .inner .txt_box .num_03 .des {display: inline-block;padding-left: 98px;} .section03 .inner .txt_box .num_04 .des {padding-right: 100px;} /*사이트 제작 Process & 차별화*/ .process {display:block; margin:-5px 0; text-align:left;} .process .col {width:100%; padding:5px 0;} .process .col:before {top:-12px; left:50%; margin:-22px 0 0 -22px; width:58px; transform:rotate(90deg);} .process .item {padding:18px 25px; border-radius:10px; display:flex; align-items:center;} .process .item .ico {width:64px; margin:0 15px 0 0;} .process .item .tit {font-size:18px;} .process .item .txt {margin-top:4px;} /*사이트 제작*/ .as-counter-wrap {display: block;max-width:100%;} .as-total {width: 100%;} .as-graph {width: 100%;padding-top: 60px;} .apexcharts-legend.position-bottom.center, .apexcharts-legend.position-top.center {width: 524px;} .img_next {display: inline-block;margin-top: -36px;width: 120%;} /*partner*/ .partners ul li {width: 33.333%;} } /* @media screen and (max-width:641px){ .main-service-2024 .main-title {margin-bottom: 26px;} .main-service-2024 .list-area {padding: 80px 0;} } */ @media screen and (max-width: 640px) { .img_next {display: inline-block;margin-top: -36px;width: 18%;} .contain_flex {clear: both;display: grid; align-items: start; grid-template-columns: repeat(3, 1fr); gap: 24px;} /*.contain_flex .img_process {width: 25%;}*/ .list li.date {width: 18%;} #bottomBtn ul li a {width:264px;} /* footer */ #footer {padding:25px 15px; font-size:12px;} #footer address {border-top:unset;} .foot-row-1 {margin-bottom:25px;} .foot-logo {width:114px;} .foot-contact {top:7px;} .foot-contact p {font-size:11px; letter-spacing:-.06em;} .foot-contact p .tel {font-size:20px; letter-spacing:-.04em; margin-left:2px;} .foot-contact .time .t1 {font-size:12px;} .foot-contact .time .t2 {font-size:12px;} .foot-nav {width:260px;} .foot-nav ul li {width:130px; padding:0;} .foot-nav ul li:before {display:none;} .foot-nav ul li a {font-size:14px;} .foot-nav ul li:nth-child(1) {order:1;} .foot-nav ul li:nth-child(2) {order:3;} .foot-nav ul li:nth-child(3) {order:5;} .foot-nav ul li:nth-child(4) {order:7;} .foot-nav ul li:nth-child(5) {order:2;} .foot-nav ul li:nth-child(6) {order:4;} .foot-nav ul li:nth-child(7) {order:6;} .foot-nav ul li:nth-child(8) {order:8;} .foot-row-2 {display:block;} .foot-info {width:auto;} .foot-info .bar {height:10px; margin-left:6px; margin-right:6px;} .foot-info .copyright {margin-top:16px;} .foot-links {margin-top:25px;} .foot-links ul li {margin-left:0; margin-right:8px; min-width:110px;} .foot-links ul li a {padding-bottom:5px;} .foot-links ul li a:before {width:12px; height:12px; background-size:contain; margin-right:4px;} .foot-links .download {margin-left:0; margin-bottom:16px;} .foot-links .download a {line-height:36px; font-size:14px; display:inline-block; width:auto; padding:0 30px;} .foot-links .download a:before {width:12px; height:12px; margin-top:-2px;} } @media (max-width: 575px) { .mobile_br {display: block;} .bp_wrap .title {font-size: 28px;} .bp_wrap .title-dot {font-size: 28px;} .bp_wrap .sub_title {font-size: 15px;} .contain {padding-top: 200px;padding-left: 10px;padding-right: 10px;} .main-service-2024 .list-contain {margin-right: -20px;} .main-service-2024 .main-title {width: 44%;margin-bottom: 10px;} .main-service-2024 .heading .website {font-size: 30px;} .main-service-2024 .list-area .item {padding: 10px;} .main-service-2024 .list-area {padding-top:80px;margin-left: 46%;} .main-service-2024 .content .contain {margin-left: 5px;} .main-service-2024 .content .main-title h2 {font-size: 28px;} .main-service-2024 .content .main-title .lg {font-size: 18px;} .main-service-2024 .content .main-title p {font-size: 14px;} /*사업영역*/ .bp_wrap ul {display: grid;align-items: start;grid-template-columns: repeat(1, 1fr);} .bp_wrap ul li {width:100%;padding-bottom:15px;} .bp_wrap ul li .box {height: auto;} .bp_wrap ul li dl dt {line-height:0px;height:20px;} .bp_wrap ul li dl dd {height:auto;} .bp_wrap ul li a {margin-bottom:20px;} .main-tech-2024 .main-title p {line-height: 30px;} .apexcharts-legend.position-bottom.center, .apexcharts-legend.position-top.center {width: 484px;} /*숫자로보는 베스트, 고객에게 믿음을 드리고 싶습니다.*/ .section03 .inner .txt_box .text {height: 352px;} .section03 .inner .txt_box .num_01 {text-align: left;top:-108px;left: 30px;} .section03 .inner .txt_box .num_02 {right: -88px;top: -135px;} .section03 .inner .txt_box .num_01 .des {width: 80px;padding-left:unset;} .section03 .inner .txt_box .num_03 {bottom: unset;text-align: left;left: 16px;bottom: -178px;} .section03 .inner .txt_box .num_03 .des {width: 80px;padding-left:unset;} .section03 .inner .txt_box .num_04 {right: -148px;bottom: -141px;} .maintenance-list-div {width: 50%;} .maintenance-list-div .div-sm {padding: 15px; background: #fff; border-radius: 24px; font-size: 17px; color: #454545; line-height: 1.765em; margin: 13px; letter-spacing: -.03em;} .main-as-2024 .maintenance_more {width: 100%;} .list li.status {font-size:14px;} .list li.name {font-size:14px;} .list li.price {font-size:14px;} .list li.type_s {font-size:14px;} .list li.date {font-size:14px;} /*partner*/ .partners ul.list-unstyled {display:block;} .partners ul li {width: 50%;} #bottomBtn h4 {font-size:22px;} #bottomBtn ul li a {width:216px;} #bottomBtn ul li a p {font-size:13px;} .foot-contact {top: 20px;} } /* 가로모드 모바일 디바이스 (가로 해상도가 576px보다 크고 768px 보다 작은 화면에 적용) */ /*@media (min-width: 576px) and (max-width: 767px) { }*/ @media screen and (max-width:480px){ .bp_wrap .title {height: auto;font-size: 23px;} .bp_wrap .title-dot {font-size: 23px;} /*.bp_wrap .sub_title {font-size: 12px;}*/ .main-service-2024 .heading .website {font-size: 25px;} .main-service-2024 .content {padding: 20px 0;} .main-service-2024 .content .main-title h2 {font-size: 30px;} .main-service-2024 .content .main-title .lg {font-size: 16px;} .main-service-2024 .content .main-title p {font-size: 14px;} .main-service-2024 .content .more {width: 134px;} .main-service-2024 .content .more span {font-size: 14px;} .apexcharts-legend.position-bottom.center, .apexcharts-legend.position-top.center {width: 406px;} /*Maintenance*/ .br_480d {} .list li.status {width: 20%;} .list li.name {width: 35%;} .list li.status img {margin-left: 0px;} .list li.date {display:none;} #bottomBtn p {font-size:18px;} #bottomBtn ul li a {width:260px;margin-bottom:20px;} #bottomBtn ul li a p {font-size: 14px;} } @media screen and (max-width:400px){ .apexcharts-legend.position-bottom.center, .apexcharts-legend.position-top.center {width: 362px;} .list li.status {width: 25%;} .list li.name {width: 28px;} } @media screen and (max-width:360px){ .apexcharts-legend.position-bottom.center, .apexcharts-legend.position-top.center {width: 310px;} } @media screen and (max-width:320px){ .main-service-2024 .heading .website {font-size: 21px;} } /*######################################### */