.text-center {text-align: center; margin-bottom:70px} .lead { font-size:18px; line-height:1.75; letter-spacing:-0.02em; color:#333; font-weight:500; word-break:keep-all} ::selection {background-color:#ff3414;color:#fff;} @media screen and (max-width: 480px) { .lead { font-size:17px; font-weight:400} } .lview{} .sview{display:none;} .mview{display:none;} @media all and (max-width:1100px){ .sview{display:block;} } @media screen and (max-width: 768px) { .lview{display:none;} .mview{display:block;} } /*헤드메뉴*/ #header_wrap {position: fixed; width:100%; height:81px; background:rgba(0,0,0,0.1); z-index:9999999999990} .scrolled #header_wrap { background-color:#000; border-bottom:none; -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 {position:absolute;left:0;top:0px; width:100%; max-width:1400px; left: 50%; transform:translateX(-50%) ;z-index:99999999999999999999999999999999;-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 .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:100px; vertical-align:middle; text-align:center;} #header .gnb > li > a {display:inline-block; line-height:1em; width:100%; color:#ddd; font-size:15px; letter-spacing:-0.5px; font-weight:600; text-decoration:none;} #header .gnb > li > a:hover {color: #fff} #header .gnb > li.active {background-color: #b0905e} #header .gnb > li.active > a {color: #fff} #header .gnb .login { font-size:12px; width:70px; color:#fff} #header .gnb .join { font-size:12px; color:#fff; margin-left:20px} #header .gnb .login a { color:#ddd; font-size:12px} #header .gnb .login a:hover { color:#fff} #header .gnb .join a { color:#ddd; font-size:12px} #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 a { display:block; width:100px; height:80px; line-height:80px} #header #logo img { width:100%} #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} #open-button{position:fixed;z-index:2000;right:65px;top:32px;width:40px;height:40px;-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;} #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:#000;} #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:#fff;} @media screen and (max-width: 960px) { /*버튼*/ #open-button{ display:none} #sitemap { display:none} /*버튼*/ } @media screen and (max-width:640px) { #header { display:block; background-color:transparent; top:0; height:60px; position:fixed} #header #logo { width:120px; display:block} #header .gnb { display:none} .scrolled #header_wrap { background-color:#fff} .scrolled #header { border-bottom:0} .scrolled #open-button { z-index:9999} .scrolled #open-button .navicon-line { background-color:#333} } /*헤드메뉴*/ /*사이트맵*/ #sitemap {border:0; background-color:#07348c; width:100%; max-width:1200px; padding:80px} #sitemap h2{ font-size:36px; color:#fff; text-align:center; padding:0 0 20px 0; width:100%; border-bottom:1px solid rgba(255, 255, 255, .3)} #sitemap .depth1>li{float:left; width:20%; margin-top:5px} #sitemap .depth1 > li:nth-child(5n+5) {margin-right:0px;} #sitemap .depth1 > li:nth-child(5n+1) {clear:both;} #sitemap .depth1>li>a{font-size:20px;display:block;text-align:left;color:#fff;margin-bottom:20px} #sitemap .depth2>li>a{font-size:16px;display:block;line-height:2.1;color:#fff;opacity:.9} #sitemap .depth2 > li > a:hover { color:#F4E913} #sitemap .depth3>li>a{font-size:14px;display:block;line-height:2.1;padding-left:15px;color:#fff;opacity:.7} #sitemap .mfp-close{position:absolute;right:0;top:-50px;z-index:1;width:30px;height:30px;border:0;font-size:16px;color:#fff} #sitemap .mfp-close:after {background: url(../img/w_btn_close.png) no-repeat center center;} #sitemap .arrow i { display:none} @media screen and (max-width:1200px) { #sitemap { max-width:800px} #sitemap .depth1>li { width:50%; margin-top:4%} } @media screen and (max-width: 960px) { #sitemap { display:none} } /*사이트맵*/ /*퀵메뉴*/ .right_quick-area{position: fixed; z-index: 100;bottom:120px; right: 10px} .right_quick-area .quick-left{background: #fff; position: fixed; right: -100px; opacity: 0; border-radius: 8px; width: 60px; box-shadow: rgba(0,0,0,0.1) 0 10px 20px; transition: all 0.5s ease; bottom:120px;} .right_quick-area.active .quick-left{opacity: 1; right: 10px;} .right_quick-area li {padding: 8px 0; position: relative} .right_quick-area li span {position: absolute; color: #fff; border-radius: 30px; padding: 4px 0px; width: 80px; text-align: center; background: rgba(0,0,0,0.8); right: 100px; top: 20px; font-size: 11px; display: block; opacity: 0; transition: all 0.5s ease} .right_quick-area li a,.right_quick-area li div {text-align: center; line-height: 50px; display: block; transition: all 0.3s ease; color:#a27b73; width:50px; height: 50px; margin: auto} .right_quick-area li:nth-child(3) a {color: #f90} .right_quick-area li:hover a,.right_quick-area li:hover div { background:#1e76fe; color: #fff; border-radius: 50%; box-shadow: rgba(0,0,0,0.2) 0 8px 6px} .right_quick-area li:hover div {cursor: pointer;} .right_quick-area li:hover span { right:50px; opacity:1; display: block;} .right_quick-area li a i,.right_quick-area li div i {font-size: 18px; margin-top:15px;} /*form*/ .right_quick-area .quick-form{background: #fff;float: right;width: 0px;opacity:0;max-width: 255px;height:0px;border-radius: 8px;transition: all 0.5s ease;padding: 18px;} .right_quick-area .quick-form .txt_notice{font-size: 16px;padding-left: 20px;} .right_quick-area .quick-form .privacy{padding-left: 20px;line-height: 30px;} .right_quick-area .quick-form .qf_box{padding-left: 20px;} .right_quick-area .quick-form .pt_1 {height: 46px;} .right_quick-area .quick-form .pt_1 li{float: left;padding-right: 5px;} .right_quick-area .quick-form .pt_1 li input{width: 60px;padding: 5px;} .right_quick-area .quick-form .qf_box .name input,.right_quick-area .quick-form .qf_box .subject input,.right_quick-area .quick-form .pt_1 li input{height: 30px;} .right_quick-area .quick-form .qf_box .content textarea{height: 60px;} .right_quick-area .quick-form .qf_box .name input,.right_quick-area .quick-form .qf_box .subject input,.right_quick-area .quick-form .qf_box .content textarea{width: 190px;padding: 5px;} .right_quick-area .quick-form .qf_box .send_btn{float: right;margin-right: 8px;height: 30px;width: 60px;font-weight: 600; letter-spacing: -1px; background: #000; border: none;color: #fff;cursor: pointer;border-radius: 5px;} /*form*/ .kakao {width: 40px; height: 40px; margin: 10px auto; background: #fdcd21; border-radius: 50%; text-align: center; box-shadow: rgba(0,0,0,0.1) 0 10px 20px; } .kakao a { color: #461b0e; font-size: 18px; line-height: 38px; display: block;} .kakao i { line-height:40px} @media (max-width:480px) { .right_quick-area {display: none; } } /*퀵메뉴*/ /*모바일 오른쪽 메뉴*/ #right-side {background-color:#333;position:fixed; z-index:9999; top:0;right:-400px;max-width:400px; 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:-300px; } .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 #ddd;} .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 #f2f2f2;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:#f2f2f2;font-size:1.2em;line-height:3.0em;padding:0 1.5em 0 2.2em;border-bottom:1px solid #fff; color:#000} /*모바일 오른쪽 메뉴*/ /*메인배너*/ .mainVideo {top:0;width: 100%;height: 950px;overflow:hidden; background-size:cover;padding:0;} .bg-fixed{background-size:cover;padding:0;background-color:#000; opacity:0.5; position:absolute; width:100%; height:900px; top:0;left:0; z-index:1} .main-carousel{padding:0; display:block; position:relative; margin-top:80px} .main-carousel .li{height:950px; 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:.3;z-index:1} .main-carousel .jarallax { height: 950px;} .main-carousel .img01 { background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ),url(../img/main_banner_img01.jpg); background-repeat:no-repeat} .main-carousel .img02 { background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ),url(../img/main_banner_img02.jpg); background-repeat:no-repeat} /*.main-carousel .img02 { background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url(../img/main_banner_img03.jpg); background-repeat:no-repeat}*/ .main-carousel .li .copy_area{max-width:1400px;color:#fff;position:relative;top:30%;-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:2; margin: auto; padding: 0 30px;} .main-carousel .li .copy_area h1{font-size:16px;font-weight:300; line-height:1.3; text-align:center} .main-carousel .li .copy_area h2{font-size:50px;font-weight:100; line-height:1.3;letter-spacing:-2px} .main-carousel .li .copy_area h3{font-size:18px;font-weight:300;margin:30px 0px; color:#fff; opacity:0.8; word-break:keep-all} .main-carousel .li .copy_area h4{text-align:center; margin:50px auto 0 auto; color:#fff;-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:1} .main-carousel .li .copy_area h4 a{color:#fff;padding:18px 42px;display:block; text-align:center;width: 160px; margin: auto; background-color:#ff3414} .main-carousel .owl-dots{position:relative;width:1400px; margin:0 auto; padding: 0 30px; bottom:135px; display:none} .main-carousel .owl-dots .owl-dot{background:rgba(255, 255, 255, 0.5);width:30px;height:5px;display:inline-block;margin-left:10px; border:0} .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-prev {position:absolute;top:50%;left:5%;z-index:999;background:url(../img/arrow_left.png) no-repeat; width:62px; height:53px; text-indent:-9999px; border:0; cursor:pointer} .main-carousel .owl-next {position: absolute; top: 50%; right: 5%;z-index: 999;background:url(../img/arrow_right.png) no-repeat; width:62px; height:53px; text-indent:-9999px; border:0; cursor:pointer} .main-carousel .owl-prev:hover { background: url("../img/arrow_on_left.png") no-repeat;} .main-carousel .owl-next:hover { background: url("../img/arrow_on_right.png") no-repeat;} .nav-view .progress-bar{width:300px;position:relative;display:inline-block;margin-left:10px;height:2px;background-color:#ddd;transform:translateY(-5px)} .nav-view .progress-bar .bar{position:absolute;left:0;top:0;height:100%;width:0;background-color:#fff} .nav-view{position:absolute;left:30px;bottom:240px;z-index:10;color:#f3f3f3;font-size:18px} .nav-view #slider-nav-idx { color: #fff;} .nav-view-wrapper { max-width: 1400px; margin: 0 auto;position: relative; } @media screen and (max-width:576px) { .nav-view {bottom:200px} .mainVideo { height:100vh} .bg-fixed { height:100vh} .main-carousel .jarallax { height: 120vh;} .main-carousel .li { height:120vh} .main-carousel .img01 { background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ),url(../img/main_banner_img01.jpg); background-repeat:no-repeat} .main-carousel .img02 { background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ),url(../img/main_banner_img02.jpg); background-repeat:no-repeat} /* .main-carousel .img03 { background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ),url(../img/main_banner_img03.jpg); background-repeat:no-repeat}*/ .main-carousel .li .copy_area{ top:20%;} .main-carousel .li .copy_area h2 {font-size: 36px;} .main-carousel .li .copy_area h3 { margin:10px auto 0 auto; font-size: 15px; letter-spacing:-0.5px} .main-carousel .owl-nav { display:none} } /*메인배너*/ .slide-quick{ position: absolute; bottom:60px; left:0; right:0; margin:0 auto; max-width:1400px; z-index:5; } @media all and (max-width: 576px) { .slide-quick {/* top:550px*/} } @media all and (min-width: 577px) and (max-width:992px) { .slide-quick { bottom:-20px} } /* 인증서 */ .certificate {position:relative; width:100%; text-align:center; z-index:1; max-width:1200px; margin:0px auto;} .certificate .box-wrap {width:100%; font-size:0;} .certificate .box-wrap li {width:12.35%; margin-left:2%; padding-bottom:60px; display:inline-block; vertical-align:top;} .certificate .box-wrap li:first-child {margin-left:0;} .certificate .box-wrap li:nth-child(8) {margin-left:0;} .certificate .box-wrap li p {color:#fff; font-size:18px; line-height:20px; } .certificate .box-wrap li .pic img {width:100%; border:1px solid #CCC; margin-bottom:10px;} .certificate .box-wrap li .pic i{color:#fff; font-size:50px; padding:10px 0} @media all and (max-width: 768px) { .certificate .box-wrap li {width:23%; margin:1% !important; padding-bottom:10px; display:inline-block; vertical-align:top;} .certificate .box-wrap li p {font-size:14px; line-height:18px;} } @media all and (max-width: 480px) { .certificate .box-wrap li {width:32%; margin:0% !important; padding-bottom:20px; } .certificate .box-wrap li .pic i{font-size:20px; } } .section01 { width:100%; padding:150px 0} .section01 h3 { font-size:17px; font-weight:400; letter-spacing:5px; text-align:center} .section01 h2 { font-size:70px; font-weight:300; letter-spacing:25px; text-align:center; padding:30px 0} .section01 p { text-align:center; font-size:17px; font-weight:400; color:#555; max-width:450px; margin:0 auto; padding-bottom:100px; word-break:keep-all; line-height:1.6} .section01 .photo {background-size:cover; background-repeat:no-repeat; width:100%} .section01 .photo .img01 {background-image: url(../img/content1_img1.jpg); background-repeat:no-repeat; height:520px;} .section01 .photo .img02 {background-image: url(../img/content1_img2.jpg); background-repeat:no-repeat; height:520px;} .section01 .photo .img03 {background-image: url(../img/content1_img3.jpg); background-repeat:no-repeat; height:520px;} .section01 .photo .owl-dots{position:absolute;width:100%; text-align:center; margin:0 auto; bottom:50px;} .section01 .photo .owl-dots .owl-dot{background-color:#ddd;width:30px;height:5px;display:inline-block;margin-left:10px; border:0} .section01 .photo .owl-dots .owl-dot.active{background-color:#be001c} .section01 .photo .owl-nav {position: absolute; width: 100%; bottom: 50%; z-index:2} .section01 .photo .owl-nav .owl-prev{width:40px;height:30px;position:absolute;left:-100px; font-size:34px; color:#000; border:0; padding-top:5px; text-align:center; background-color:transparent; cursor:pointer} .section01 .photo .owl-nav .owl-next{width:40px;height:30px;position:absolute;right:-100px; font-size:34px; color:#000; border:0; padding-top:5px; text-align:center; background-color:transparent; cursor:pointer} .section2 .inner { width: 100%; padding-top:80px; display: flex; justify-content: space-between; flex-wrap: wrap} .section2 .left { width:68%; height:447px; background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ),url(../img/section2_img01.jpg); background-repeat:no-repeat; background-size:cover; padding:55px; } .section2 .left h3 { color:#fff; font-weight:400; font-size:24px} .section2 .left h2 { font-size:30px; font-weight:bold; color:#fff; padding:20px 0; max-width:430px; word-break:keep-all} .section2 .left p { font-size:17px; color:#fff; opacity:0.8; font-weight:400; max-width:280px; line-height:1.4; word-break:keep-all} .section2 .left .button a { width:200px; height:50px; line-height:50px; font-size:17px; color:#fff; text-align:left} .section2 .right { width:30%; height:447px; } .section2 .right .top { width:100%; height:212px; background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ),url(../img/section2_img02.jpg); background-repeat:no-repeat; background-size:cover; padding:42px 37px 42px 37px; text-align:left} .section2 .right .top h2 {font-size:30px; font-weight:bold; color:#fff; } .section2 .right .top p { font-size:17px; color:#fff; opacity:0.8; padding-top:10px; line-height:1.4} .section2 .right .button a { width:200px; height:50px; line-height:50px; font-size:17px; color:#fff; text-align:left} .section2 .right .bottom { width:100%; height:212px; margin-top:25px; background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ),url(../img/section2_img03.jpg); background-repeat:no-repeat; background-size:cover; padding:42px 37px 42px 37px; text-align:left} .section2 .right .bottom h2 { font-size:30px; font-weight:bold; color:#fff} .section2 .right .bottom p { font-size:17px; color:#fff; opacity:0.8; padding-top:10px; line-height:1.4} @media screen and (max-width:768px) { .section2 .left { width:100%; margin-bottom:20px} .section2 .right { width:100%} } .section3 .inner { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap} .section3 .left { width:40%; margin-top:200px;} .section3 .left h3 { color:#8176ff; font-size:20px; font-weight:500} .section3 .left h2 { font-size:42px; font-weight:bold; padding:20px 0} .section3 .left p { font-size:17px; color:#555; font-weight:400; padding:20px 0; max-width:300px; word-break:keep-all; line-height:1.4} .section3 .right {width:50%;} .section3 .right .icon_wrap {width:100%; text-align:left} .section3 .right .icon_wrap h2 { font-size:24px; text-align:left; font-weight:700; color:#000; margin-top:50px} .section3 .right .icon_wrap p { max-width:500px; word-break:keep-all; padding-top:10px; color:#555; font-weight:400; line-height:1.4; font-size:17px} .grid-container { display: grid; grid-template-columns: 1fr 1fr; /* 2개의 열을 만듭니다. */ gap: 80px 140px; /* 각 아이템 사이의 간격을 조정합니다. */ margin:150px 0 } @media screen and (max-width:768px) { .grid-container { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 40px; margin: 150px 0;} } @media screen and (max-width:768px) { .section3 .left { width:100%; margin-bottom:20px} .section3 .right { width:100%} } /* 메인배너 */ .tl_main_about_wrap {padding:50px 0px; background-color:#f5f8fb} .tl_main_about_wrap h2 {font-size:42px; color:#fff; line-height:30px; font-weight:bold;} .tl_main_about_wrap h2 span{display:block; font-size:17px; color:rgba(255,255,255,0.8); line-height:23px; padding:30px 20px 30px 20px; font-weight:400} .tl_main_about_wrap ul {display:flex; flex-wrap: wrap;width:100%; vertical-align:middle; margin-top:30px;} .tl_main_about_wrap ul li{display:flex;justify-content: center;align-items: center; gap: 5%; width:25%; float:left;} .tl_main_about_wrap ul li .t1{color:rgba(0,0,0,0.9); font-size:20px;} .tl_main_about_wrap ul li .t2{color:#cf9d70; font-size:50px; font-weight:400; } .tl_main_about_wrap ul li .t3{color:rgba(0,0,0,0.8); font-size:16px; font-weight:400} @media screen and (max-width:960px) { .tl_main_about_wrap ul li{ width:50%} } @media screen and (max-width: 640px) { .tl_main_about_wrap h2 { font-size:32px} .tl_main_about_wrap ul li { width:100%; margin-bottom:6%} .tl_main_about_wrap ul li .t2 { font-size:58px} } /* 메인배너 */ .tl_product_box_wrap { padding:150px 0; max-width:1200px; margin:0 auto; overflow:hidden} .tl_product_box_wrap h2 { font-size:30px; text-align:center; color:#000; line-height:1.6; font-weight:600} .tl_product_box_wrap span{ padding:10px 10px 50px 10px; font-size:16px; text-align:center; display:block; color:#555; letter-spacing:-0.02em; font-weight:400} /*메인 갤러리 최신글*/ .tl_gall_box_wrap { width:100%; padding:150px 0} /*메인 갤러리 최신글*/ /* 포토박스 */ .tl_photobox_wrap {width:100%; padding:100px 0px 200px; z-index:2} .tl_photobox_wrap .inner { max-width:1400px} .tl_photobox_wrap .main_title { text-align: center;margin-bottom: 75px;} .tl_photobox_wrap h1 { font-size: 18px; font-weight: 400; margin:0 0 22px 0; color:#cf9d70; letter-spacing: 0.05em; display:inline-block; position:relative} /* .tl_photobox_wrap h1:before {position:absolute;content:"";width:50px;height:2px;background:#dd412b;left:-67px;top:50%;transform:translateY(-50%);} */ .tl_photobox_wrap h2 {text-align:center; font-size:50px; color:#222; font-weight: 500} .tl_photobox_wrap h2 .strong {color:#dd412b; font-weight: 600} /* .tl_photobox_wrap p { max-width: 690px; margin:0 auto; color:#555; text-align:center; font-size:17px; font-weight:300; padding:20px 20px 40px 20px} */ .tl_photobox_wrap ul {display: flex; flex-wrap: wrap; background-color:#fff} .tl_photobox_wrap ul li{ width:32%; margin-left:2%; text-align:left; display:block; } .tl_photobox_wrap ul li:nth-child(3n+1) { margin-left:0} .tl_photobox_wrap ul li .photo img {width:100%} .tl_photobox_wrap ul li img {vertical-align:middle; transition:transform 500ms} /* .tl_photobox_wrap ul li:hover {} */ .tl_photobox_wrap ul li .box {padding:0px; display:block; box-shadow: 0 4px 32px 0 rgb(10 14 29 / 2%), 0 8px 64px 0 rgb(10 14 29 / 8%);} .tl_photobox_wrap ul li:last-child .box {border-right:0px} .tl_photobox_wrap .photo { position: relative; } .tl_photo_text_wrap { position: absolute; bottom: 50px; left: 20px; color: #fff; } .tl_photo_text01 { font-size: 22px; margin-bottom: 15px; } .tl_photo_text02 { font-size: 16px; color: #cf9d70; } @media screen and (max-width: 960px) { .tl_photobox_wrap ul li { width:49%; padding:50px 0;} .tl_photobox_wrap ul li:nth-child(2n+1) { margin-left:0} .tl_photobox_wrap ul li .box { border-left:0;} .tl_photo_text_wrap { bottom: 100px; } } @media screen and (max-width:640px) { .tl_photobox_wrap {padding:100px 0} .tl_photobox_wrap h2 {font-size:32px} .tl_photobox_wrap ul li { width:100%; padding:50px 0; margin-left:0; clear:both; float:none} .tl_photobox_wrap ul li .box { border-left:0;} .text-center {margin-bottom: 0} } /* 포토박스 */ .section4 { width:100%; padding:100px 0; background-color:#f5f8fb} .section4 .inner {width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap} .section4 .left { width:48%; border-right:1px solid #ddd} .section4 .left .title { float:left; font-size:18px; font-weight:700; color:#1384be; margin-right:50px} .section4 .left .latest { float:left; font-size:17px; color:#555} .section4 .right { width:48%} .section4 .right .title { float:left; font-size:18px; font-weight:700; color:#1384be } .section4 .right .latest { float:left; font-size:17px; color:#555} .section4 .more {display:block; font-size:14px; color:#333; font-weight:400; margin-top:65px} @media screen and (max-width:768px) { .section4 .left .title { width:100%; } .section4 .left { width:100%; margin-bottom:20px; border-right:0; border-top:1px solid #ddd; padding-top:20px} .section4 .left:first-child { border:0} .section4 .right { width:100%} .section4 .more { display: block; font-size: 14px; color: #333; font-weight: 400; margin-top: 35px; margin-bottom: 30px; float: right;} } /*서브상단*/ .sub_visual{position:relative;max-width:2560px;margin:0 auto;height:522px;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 .title_warp { max-width:1240px; margin:0 auto; } .sub_visual .title_warp .title_page { height:522px; position: relative;text-align:center; margin:0 auto; transform:translateY(40%); z-index:2} .sub_visual h3{font-size:14px;font-weight:500; padding-bottom:20px; letter-spacing:1px; color:#fff; opacity:0.8} .sub_visual .main_title{font-size:45px; font-weight:500; text-align:center; color:#fff; letter-spacing:-1px } .sub_visual .inBox {font-size:14px; padding-top:10px; color:#fff} .sub_visual .inBox i { font-size:14px; color:#fff; display:inline-block;} .sub_visual .inBox a { padding:0 13px 0 0} .sub_visual .inBox span {padding:0 13px; opacity:0.8} .sub_visual .inBox span.strong { opacity:1; padding:0 0 0 13px} .sub_visual .cover{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/sub_visual_cover0.png) center bottom no-repeat; -webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;min-width:1200px;opacity:.6;z-index:1} .sub_visual .bg{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center center;background-repeat:no-repeat;background-size:cover;} .sub_visual.tmp {height:100px; background-color:#000;} .sub_visual.tmp .title_warp {display:none;} .sub_visual h3, .sub_visual .main_title , .sub_visual .inBox { animation-duration: 0.7s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; -webkit-animation-duration: 0.7s; -webkit-animation-fill-mode: both; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; animation-delay: 0.3s; -webkit-animation-delay: 0.3s; animation-name:visual-tit; -webkit-animation-name:visual-tit; } .sub_visual .main_title {animation-delay: 0.6s; -webkit-animation-delay: 0.6s;} .sub_visual .inBox {animation-delay: 0.9s; -webkit-animation-delay: 0.9s;} .sub_visual .bg{ content:''; animation-duration: 3s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease; -webkit-animation-duration: 3s; -webkit-animation-fill-mode: both; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; animation-delay: 0.4s; -webkit-animation-delay: 0.4s; animation-name:visual-zoom; -webkit-animation-name:visual-zoom; } @keyframes visual-zoom { 0% {transform:scale(1.2);} 100% {transform:scale(1);} } @-webkit-keyframes visual-zoom { 0% {transform:scale(1.2);} 100% {transform:scale(1);} } @keyframes visual-tit { 0% {opacity:0; -webkit-opacity:0; transform:translateY(20px);} 100% {opacity:1; -webkit-opacity:1; transform:translateY(0px);} } @-webkit-keyframes visual-tit { 0% {opacity:0; -webkit-opacity:0; transform:translateY(20px);} 100% {opacity:1; -webkit-opacity:1; transform:translateY(0px);} } @media screen and (max-width: 640px) { .sub_visual { height:422px} .sub_visual .title_warp { width:100%;} .sub_visual .title_warp .title_page { height:422px} .sub_visual h3 { font-size:12px} .sub_visual .main_title { font-size:34px;} .sub_visual .inBox { font-size:12px} } /*서브상단*/ /*서브 제목*/ .content_wrap { width:100%;} .content_wrap .content_area { width:100%; max-width:1400px; margin:0px auto 0px auto; padding: 20px 20px 100px 20px;} .content_wrap .txtCon { max-width:1400px; margin:0 auto; padding:100px 0px 0px 0px; clear:both} .content_wrap .txtCon .sub_title { text-align:center; padding:50px 20px 50px 20px;} .content_wrap .txtCon .sub_title h2 {font-size:40px; color:#000;} .content_wrap .txtCon .sub_title p {font-size: 16px; color:#555; padding-top:10px; word-break:keep-all;} .content_wrap .txtboard { max-width:1400px; margin:0 auto; padding:100px 20px 50px 20px; font-size:12px; line-height:1.75; letter-spacing:-0.02em; clear:both} .content_wrap .txtboard span { font-size:14px} @media screen and (max-width:640px) { .content_wrap .txtCon .sub_title{margin:50px 0px 0; padding:0px 20px 0px 20px; } .content_wrap .txtCon .sub_title h2 { font-size:32px} } /*서브 제목*/ /*서브 하단 네비*/ .share-area {float: right; display:block; padding-top:16px;box-sizing: border-box;} .share-area .hide-wrap{width:151px;height:34px;overflow:hidden;float:left} .share-area .hide-wrap .hide-area{width:151px;height:34px;position:relative;left:200px} .share-area .hide-wrap .hide-area ul {overflow: hidden; padding:0; margin:0} .share-area .hide-wrap .hide-area ul li {float: left;margin-left: 13px; cursor:pointer} .share-area .hide-wrap .hide-area ul li:first-child {margin-left: 0;} .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} .share-area .share-btn.active {background-image: url(../img/share_close_bt.png);border-left: 1px solid #fff;} @media screen and (max-width: 770px) { .share-area { display:none} } @media screen and (max-width: 640px) { .share-area .share-btn { display:none} .share-area { display:none} } /*서브 하단 네비*/ /*푸터*/ #footer{ width:100%; height:auto; background:#30343b; clear:both} .foot_menu{width:100%; padding:20px 20px; background:#30343b; border-bottom:1px solid rgba(255,255,255,0.07); } .foot_menu .inner { max-width:1200px; margin:0 auto} .foot_menu .fm{ float:left} .foot_menu .fm li{ display:inline-block; line-height:2em; margin-right:15px; padding-right:15px; border-right:1px solid rgba(255,255,255,0.07); } .foot_menu .fm li a{ font-size:1.08em; color:rgba(255,255,255,0.9);} .foot_menu .fm li a.point{color:#32c0eb;} .foot_menu .fm li:last-child{border-right:0; margin-right:0} .foot_menu .sns{ float:right} .foot_menu .sns li{ display:inline-block; margin-left:10px} .foot_menu .sns li:first-child {margin-left:0;} .foot_menu .sns li a { color:#777} .foot_menu .sns li a:hover { color:#fff} .foot_menu .menu { margin-top:20px; } .foot_menu #phone { display:inline-block; color:#fff; font-size:12px; text-align:center; padding: 0px 20px; background-color:#6C6} .foot_menu #kakao{ display:inline-block; color:#000; font-size:12px; text-align:center; padding: 0px 20px; background-color:#ffeb33} .footer_in{ max-width:1240px; height:auto; padding:38px 20px; margin:0 auto; box-sizing:border-box} .footer_in address h1{ font-size:16px; line-height:1.8; padding-bottom:10px; color:#fff; font-weight:bold; } .footer_in address p{ overflow:hidden; font-size:13px; color:rgba(255,255,255,0.4);} .footer_in address p strong{ font-weight: 500; color:rgba(255,255,255,0.5);} .footer_in address p span{display:inline-block;margin-right:10px; line-height:1.8em;} .footer_in address p.addr{margin-top:18px;} .footer_in address p.copylight{ font-size:13px; color:#999; margin-top:18px;} .footer_in address{float:left; width:65%; font-style:normal} .footer_in .customer{float:right; color:rgba(255,255,255,0.5); margin-left:20px; padding-left:30px; border-left:1px solid rgba(255,255,255,0.05); font-size:13px;} .footer_in .customer .main_tel{font-size:15px; font-weight:300; color:#fff; margin-bottom:20px; margin-top:20px;} .footer_in .customer .main_tel span{font-size:20px; font-weight:bold; color:#32c0eb; display:block; margin-top:10px;} @media screen and (max-width: 640px) { .footer_in address { width:100%} .footer_in .customer { width:100%; border-left:0; margin-left:0; padding-left:0} .foot_menu .sns { float:left; padding-top:20px} .foot_menu .fm { margin-bottom:20px} } /*푸터*/ .tl_pop_con{background:#fff;} .tl_pop_con h2.f_pop_tit{width:100%;height:80px;line-height:80px;background:#076aa3;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/w_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); } /* */ #info_wrap .sect1 h3 { font-weight: bold; } #info_wrap .sect1 span { font-weight: 400; } #info_wrap .sect1_con ul { overflow: hidden; } #info_wrap .sect1_con ul li { float: left; } #info_wrap .sect1_con ul li:nth-child(1) { width: 100%; margin-bottom: 60px; } #info_wrap .sect1_img1 { position: relative; height: 480px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url("../img/business/bs_info/section1_img1.jpg"); } #info_wrap .sect1_tbox { width: 300px; padding: 40px 20px; margin: 0; position: absolute; top: 0; left: 100px; height: 100%; background: rgba(0, 0, 0, 0.6); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; /* align-items: center; */ -ms-flex-line-pack: center; align-content: center; } #info_wrap .sect1_tbox h5 { font-size: 28px; line-height: 36px; color: #fff; font-weight: 300; text-align: left; } #info_wrap .sect1_tbox h5 span { font-weight: bold; } #info_wrap .sect1_tbox p { padding-top: 20px; font-size: 14px; line-height: 24px; color: rgba(255, 255, 255, 0.8); text-align: left; } #info_wrap .sect1_img2 { width: 100%; height: 320px; margin-bottom: 20px; background-size: cover; background-position: center; background-repeat: no-repeat; } #info_wrap .sect1_tbox2 p { padding-top: 10px; font-size: 14px; line-height: 24px; color: #666; } .sect_title { margin: 0 auto; margin-bottom: 20px; } .sect_title h3 { font-size: 36px; line-height: 45px; color: #333; } .sect_title h3 span { position: relative; font-weight: 700; } .sect_title h3 span:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; background-color: #2185d0; z-index: -1; opacity: 0.6; } .sect_title p { padding-top: 20px; font-size: 14px; line-height: 24px; color: #888; } .title_line { width: 100px; height: 1px; background: #2185d0; margin: 20px auto; } .section5 { width:100%; padding:50px 0; background-color:#f5f8fb} .section_wrap { padding: 10px 0; } /* 서브 section 공통*/ .sub_sec_hd { text-align: center; } .sub_heading { padding-bottom: 10px; font-size: 26px; color: #333; line-height: 1.2; } .sub_hd_desc { font-size: 17px; color: #666; padding-bottom: 80px; line-height: 1.6; letter-spacing: -0.5px; } .bnst_sec2_cap { padding-bottom: 15px; font-size: 16px; color: #2185d0; } .bnst_sec2_txt { float: left; width: 100%; /* -webkit-box-sizing: border-box; box-sizing: border-box; */ padding-right: 80px; } .bnst_sec2_txt .sub_hd_desc { /* word-break: keep-all; */ padding-bottom: 60px; } @media screen and (max-width:780px) { .sect_title h3 { font-size: 26px; } } @media screen and (max-width:480px) { .section5 { padding:20px 0; } .section_wrap {padding: 50px 0;} .bnst_sec2_txt .sub_hd_desc { padding: 0 0 60px 0;} } .cat_03{ display: flex; max-width: 1400px; margin: 10px auto; padding: 20px; } .cat_03 .left-box { flex: 2; /* 왼쪽 박스 크기 */ padding: 20px; /* background-color: #f0f0f0;*/ border-radius: 8px; } .cat_03 .right-box { flex: 2; /* 오른쪽 박스 크기 */ padding: 20px; /* background-color: #d0d0d0; */ border-radius: 8px; } .cat_03 .right-box p{ font-size: 17px; /* 작은 글씨 */ } .cat_03 .small-text { font-size: 22px; /* 작은 글씨 */ font-weight: 700; margin: 0 0 20px 0; } .cat_03 .large-text { font-size: 40px; /* 큰 글씨 */ margin: 0px 0 0; /* 상단 여백 */ } @media (max-width: 768px) { .cat_03 { flex-direction: column; /* 모바일에서 세로로 정렬 */ } .cat_03 .left-box, .cat_03 .right-box { margin: 0 0 20px; /* 모바일에서 하단 여백 추가 */ } } #tech_con{position: relative; overflow:hidden; width:100%; padding:150px 0 50px;} #tech_con h3{text-align:center; font-size:30PX; padding:0 0 62px 0} #tech_con .inner {width: 1300px;} #tech_con .slick-slider {width: 1300px; margin:0 auto; } #tech_con .slick-slide {position:relative; } #tech_con .slick-slide {width:650px;} #tech_con dl{position: relative; width:630px; text-align:center; background:#333;} #tech_con dl a{display:block; width:630px; height:430px; padding:125px 0 0 0; box-sizing:border-box; opacity:.5; -webkit-filter : grayscale(100%)} #tech_con .slick-active dl a{opacity:1; -webkit-filter : grayscale(0%)} #tech_con .slick-active dl a:after{position: absolute; top:0; display:block; opacity:0; content:""; overflow:hidden; width:630px; height:0; background:rgba(207,32,38,.9); transition: all 0.5s;} #tech_con .slick-active dl a:hover:after{height:430px; opacity:1; transition: all 0.5s;} #tech_con dl.one a{background:url('/theme/gang/img/tech_img01.jpg') center no-repeat;} #tech_con dl.two a{background:url('/theme/gang/img/tech_img02.jpg') center no-repeat;} #tech_con dl.three a{background:url('/theme/gang/img/tech_img03.jpg') center no-repeat;} #tech_con dl.four a{background:url('/theme/gang/img/tech_img04.jpg') center no-repeat;} #tech_con dl.five a{background:url('/theme/gang/img/tech_img05.jpg') center no-repeat;} #tech_con dt{position: relative; z-index:1; font-size:32px; color:#fff; letter-spacing:-0.5pt; line-height:100%; padding:17px 0 50px 0;} #tech_con dd.eng{position: relative; z-index:1; font-size:15px; color:rgba(255,255,255,.6); font-family:'Raleway',sans-serif; letter-spacing:0.4pt; text-decoration:underline} #tech_con dd.more {position: relative; z-index:1; display:inline-block; color:#fff; padding:0 0 0 23px; text-align:left; font-family:'Raleway',sans-serif; background:url('/theme/gang/img/more_icon.png') 80% 20px no-repeat; font-size:13px; letter-spacing:0.3pt; border:1px solid #fff; line-height:50px; width:135px; border-radius:50px; box-sizing:border-box; transition: all 0.3s;} #tech_con .slick-active dl a:hover > dd.more{padding:0 0 0 32px; color:#cf2026; background:#fff url('/theme/gang/img/more_icon_r.png') 75% 20px no-repeat; transition: all 0.3s;} #tech_con .slick-prev, #tech_con .slick-next{position: absolute;top:-100px; display: block;width: 48px;height: 30px; padding: 0; cursor: pointer; color: transparent; border: none; outline: none; background: transparent; z-index:99} #tech_con .slick-prev{left:0; background:url('/theme/gang/img/arrow_prev.gif') center no-repeat;} #tech_con .slick-next{right:20px; background:url('/theme/gang/img/arrow_next.gif') center no-repeat;} #tech_con .slick-slider{position: relative; display: block; box-sizing: border-box;} #tech_con .slick-list{position: relative;display: block; margin: 0;padding: 0;} #tech_con .slick-slide{display: none;float: left;height: 100%;min-height: 1px;} #tech_con .slick-initialized .slick-slide{display: block;} /******************************************************************************* @media 1024px~1310px *******************************************************************************/ @media all and (max-width:1310px){ /*** TECHNOLOGY ***/ #tech_con .inner {width: 96%;} #tech_con .slick-slider {width: 96%; margin:0 auto; } #tech_con .slick-slide {position:relative; } #tech_con .slick-slide {} #tech_con dl{width:97%; margin:0 auto;} #tech_con dl a{width:100%;} #tech_con .slick-active dl a:after{width:100%;} } /******************************************************************************* @media 768~980px *******************************************************************************/ @media all and (max-width:980px){ /*** TECHNOLOGY ***/ #tech_con{padding:100px 0;} #tech_con h3{padding:0 0 45px 0} #tech_con dl a{height:400px; padding:115px 0 0 0;} #tech_con .slick-active dl a:hover:after{height:400px;} #tech_con .slick-prev, #tech_con .slick-next{top:-80px; } } /******************************************************************************* @media 640px~768px *******************************************************************************/ @media all and (max-width:768px){ /*** TECHNOLOGY ***/ #tech_con dl a{height:360px; padding:100px 0 0 0;} #tech_con .slick-active dl a:hover:after{height:360px;} #tech_con dt{font-size:28px; padding:17px 0 30px 0;} } /******************************************************************************* @media ~640px *******************************************************************************/ @media all and (max-width:640px){ /*** TECHNOLOGY ***/ #tech_con{padding:50px 0;} #tech_con h3{padding:0 0 25px 0} #tech_con dl a{height:320px; padding:95px 0 0 0;} #tech_con .slick-active dl a:hover:after{height:320px;} #tech_con dt{font-size:20px; padding:17px 0 30px 0;} #tech_con dd.eng{font-size:13px; letter-spacing:0.2pt;} #tech_con dd.more {line-height:45px;} #tech_con .slick-prev, #tech_con .slick-next{top:-50px;width: 18px;height: 20px; } #tech_con .slick-prev{background-size:100%} #tech_con .slick-next{right:0; background-size:100%} } /******************************************************************************* @media ~480px *******************************************************************************/ @media all and (max-width:480px){ /*** TECHNOLOGY ***/ #tech_con dl a{height:265px; padding:70px 0 0 0;} #tech_con .slick-active dl a:hover:after{height:265px;} } #business_wrap {position:relative; width:100%; min-width:320px; max-width:1400px; padding-top:100px; margin:0 auto; } #business_wrap:before {position: absolute; top:60px; left: 50%; width: 1px; height: 30px; content: ''; background-color: #7f7f7f; } #business_wrap .con_title{ width:100%; padding-bottom:30px; margin:0 auto;} #business_wrap .con_title p { text-align:center; font-size:2.8em; line-height:50px; color:#000; font-weight:700; padding:0 10px; margin:0px auto; } #business_wrap .con_title span { display:block; text-align:center; font-size:1.15em; color:#777; padding:0 10px; margin:10px 0 20px 0;} .main_neo{margin:0 auto; max-width:1360px; } .main_neo ul{font-size:0;} .main_neo li{display:inline-block; text-align:center; width:315px; height:300px; position:relative; font-size:1rem; border-radius:15px; overflow:hidden; margin:0 10px;} .main_neo li:first-child{background:url('../image/business_img1.jpg') no-repeat center/cover;} .main_neo li:nth-child(2){background:url('../image/business_img2.jpg') no-repeat center/cover;} .main_neo li:nth-child(3){background:url('../image/business_img3.jpg') no-repeat center/cover;} .main_neo li:last-child{background:url('../image/business_img4.jpg') no-repeat center/cover;} .main_neo li a{display:block; width:100%; height:100%; font-weight:700; color:#fff; font-size:20px; line-height:120%; letter-spacing:-0.75pt; box-sizing:border-box; padding:202px 0 0;transition:all 0.3s linear;} .main_neo li span{line-height:250%; font-family:"Montserrat", sans-serif; display:block; font-size:22px; font-weight:500; color:#fff; margin:38px 0 0} .main_neo li p .more{line-height:120%; font-family:"Montserrat", sans-serif; display:block; font-size:13px; font-weight:700; color:#0daba6 !important; text-decoration:underline !important; margin:18px 0 0} .main_neo li:hover a{ padding-top:82px;background:rgba(0,0,0,0.82); transition:all 0.3s linear;} /******************************************************************************* @media ~1280px *******************************************************************************/ @media all and (max-width:1280px){ .main_neo{} .main_neo ul{font-size:0;} .main_neo li{display:inline-block; width:calc( (100% - 30px) / 4 ); height:260px; margin:0 10px 0 0} .main_neo li:nth-child(4){margin-right:0} } @media all and (max-width:980px){ .main_neo{} .main_neo ul{font-size:0;} .main_neo li{display:inline-block; width:calc( (100% - 10px) / 2 ); height:300px; margin:0 10px 10px 0; } .main_neo li:nth-child(2n){margin-right:0} .main_neo li a{padding:122px 20px 30px;} .main_neo li:hover a{padding:32px 20px 30px;} } /******************************************************************************* @media ~480px body,html{font-size:13px; } *******************************************************************************/ @media all and (max-width:480px){ .main_neo{} .main_neo li{width:100%; height:auto; margin:0 0 10px} .main_neo li a{padding:50px 0;} .main_neo li a:hover{padding:50px 0;} .main_neo li span{margin:14px 0 0} }