/* ¸ÞÀκñÁÖ¾ó */ #mainvisual { width: 100%; height:800px; position: relative; background-color: #292b2c; overflow: hidden;} #mainvisual .container { margin-left: 0 !important; margin-right: 0 !important; } #mainvisual .ani-text { opacity: 0; } #mainvisual .ani-text-subtext { height:50px; background:url("/img/main/vsl_txt_bg.png") no-repeat center top; margin-top:20px; padding-top:20px; font-size:28px; color:#fff; letter-spacing:-0.03em; text-shadow:0 2px 2px rgba(0,0,0,.5);} .slider .slider-inner { width: 100%; height:800px; left: 0; top: 0; } .slider, .slider-inner, .slider-catpion { will-change: transform; -webkit-transform: translate3d(0, 0, 0); -webkit-transition: transform 0s linear; -webkit-backface-visibility: hidden; } .swiper-container { width: 100%; height:800px; } .swiper-slide { text-align: center; font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; cursor: move; position: relative; /* ½½¶óÀÌ´õ °ËÀº»ö ±ÛÀÚ »ç¿ë */ } .swiper-slide .slider-catpion.black-font h2 { color: #fff !important; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.35); } .swiper-slide .slider-catpion.black-font p { color: #fff !important; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.35); } .swiper-slide .slider-catpion.black-font .slide-more-btn { border: 2px solid #000; color: #343a40; } .swiper-slide .slider-catpion.black-font .slide-more-btn:hover { color: #f8f9fa; background-color: #000; } .swiper-slide .slider-catpion h2 {font-family: "Noto Sans KR", sans-serif; color: #f8f9fa; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35); font-weight: 900; line-height: 1.5; letter-spacing: 2px; padding: 0 2rem; font-size: 1.8rem; margin-bottom: 0; } @media only screen and (max-width:767px){ .slider-catpion { margin-top:-180px; } .slider-catpion h2 img { width: 250px; height:31px; } #mainvisual .ani-text-subtext {font-size:14px; margin-bottom: 1rem;} } .swiper-slide .slider-catpion .slide-more-btn { font-family: "Noto Sans KR", sans-serif; display: inline-block; padding: 0.4rem; border: 2px solid #fff; font-size: 0.8rem; color: #f8f9fa; font-weight: bold; border-radius: 6px; transition: 0.3s; } .swiper-slide .slider-catpion .slide-more-btn:hover { color: #343a40; background-color: #fff; } .swiper-slide .movie-wrap { position: absolute; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; } .swiper-slide .goods-container { position: relative; height: 100%; } .swiper-slide .goods-container .slider-layer-wrap { position: relative; height: 100%; } .swiper-slide .goods-container .slider-layer-wrap .head-text { padding-top: 4rem; } @media (min-width: 768px) { .swiper-slide .goods-container .slider-layer-wrap .head-text { padding-top: 5rem; } } @media (min-width: 992px) { .swiper-slide .goods-container .slider-layer-wrap .head-text { padding-top: 15rem; } } .swiper-slide .goods-container .slider-layer-wrap .head-text h2 { font-size: 2rem; font-weight: 700; color: #fff; } .swiper-slide .goods-container .slider-layer-wrap .head-text h2 span { color: #007bff; } @media (min-width: 768px) { .swiper-slide .goods-container .slider-layer-wrap .head-text h2 { font-size: 4.5rem; } } @media (min-width: 992px) { .swiper-slide .goods-container .slider-layer-wrap .head-text h2 { font-size: 5rem; } } @media only screen and (max-width:767px){ .swiper-button-next, .swiper-button-prev {display:none;} } .swiper-slide .goods-container .slider-layer-wrap .goods-img { position: absolute; bottom: 0; width: 100%; text-align: center; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-opacity: 1; -khtml-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1; opacity: 1; } .swiper-slide .goods-container .slider-layer-wrap .goods-img img { width: 100%; height: auto; } .animate-subtext { animation-delay: .8s; opacity: 0; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animate { opacity: 0; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .delay-_1 { animation-delay: 0.1s; } .delay-_2 { animation-delay: 0.2s; } @-webkit-keyframes fade-in-up { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fade-in-up { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fade-in-up { -webkit-animation-name: fade-in-up; animation-name: fade-in-up; } @-webkit-keyframes fade-out-down { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fade-out-down { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fade-out-down { -webkit-animation-name: fade-out-down; animation-name: fade-out-down; } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .fadeInUp_1 { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .fadeInUp_1-5 { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .fadeInUp_2 { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .flip-animate { perspective: 1000px; } .flip-animate span { position: relative; display: inline-block; padding: 0; transition: transform 0.3s; transform-origin: 50% 0; transform-style: preserve-3d; } .flip-animate span:before { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; content: attr(data-hover); transition: color 0.3s; transform: rotateX(-90deg); transform-origin: 50% 0; text-align: center; } .flip-animate:hover span, .flip-animate:focus span { transform: rotateX(90deg) translateY(-22px); } .flip-animate:hover span:before, .flip-animate:focus span:before { color: #d24936; } @media only screen and (max-width:960px){ #mainvisual { height: 600px;} } @media only screen and (max-width:768px){ #mainvisual { height: 500px;} } @media only screen and (max-width:650px){ #mainvisual { height: 400px;} } /* ¸ÞÀÎ ÄÁÅÙÃ÷ ¹Ú½º */ @media only screen and (min-width: 1200px){ .mainBox{width:1400px; margin:0 auto; overflow:hidden;} } @media only screen and (max-width:1199px){ .mainBox{width:96%; margin:0 2%;} } /** ½ºÅ©·Ñ **/ #scrollAni{ position: absolute; left:50%; width:100px; margin-left:-50px; text-align:center; bottom:100px; opacity:1; z-index:100; text-decoration:none;} #scrollAni.hide{ opacity:0; z-index:-1} .page-height i {cursor:pointer; } @media only screen and (max-width:767px){ #scrollAni {display:none;} } /* ¸ÞÀÎ ÄÁÅÙÃ÷ ¹Ú½º */ @media only screen and (min-width: 1152px){ .mainBox{width:1200px; margin:0 auto; overflow:hidden;} } @media only screen and (max-width:1151px){ /* ¸ÞÀÎ ÄÁÅÙÃ÷ ¹Ú½º */ .mainBox{width:96%; margin:0 2%;} } /* ŸÀÌƲ1*/ .mainBox .p1 {text-align:center; color:#222; font-size:27px; font-family:notokrM; line-height:30px; position:relative; margin:10px 0 25px 0; letter-spacing:-0.03em;} .mainBox .p2 {text-align:center; color:#222; font-size:23px; font-family:notokrM; line-height:30px; position:relative; margin:30px 0 25px 0; letter-spacing:-0.03em;} .mainBox .tit_line {width:100%; height:3px; background:url("/img/main/tit_line.png") no-repeat center top; margin:10px 0 30px 0;} /* ÄÁÅÙÃ÷1*/ .mainBox .box_in1{width:100%;} .mainBox .box_in1 ul{} .mainBox .box_in1 .box1{float:left; width:47%; position:relative; margin-bottom:30px;} .mainBox .box_in1 .box1 img{width:100%;} .mainBox .box_in1 .box2{float:left; width:47%; margin:0 0 0 4%; position:relative; margin-bottom:30px;} .mainBox .box_in1 .box2 p{color:#444; font-size:20px; font-family:notokrM; line-height:20px; letter-spacing:-0.03em; padding:20px 0 20px 0;} .mainBox .box_in1 .box2 span{color:#666; font-size:18px; font-family:notokrM; line-height:32px; letter-spacing:-0.03em;} .mainBox .box_in1 .box2 .company_more i{margin-left:5px;} .mainBox .box_in1 .box2 .company_more {display:block; margin-top:20px;} .mainBox .box_in1 .box2 .company_more .btn {overflow:hidden; position:relative; display:block; width:175px; height:55px; font-size:12px; text-align:center; border:1px solid #ccc; line-height:55px; background:#000; text-transform:uppercase; border-radius:2px; font-family:notokrM;} .mainBox .box_in1 .box2 .company_more .btn span {color:#fff; position:relative; transition:color .25s ease-out; -webkit-transition:color .5s ease-out; -moz-transition:color .5s ease-out; font-family:"NanumGothic",sans-serif;} .mainBox .box_in1 .box2 .company_more .btn:hover span {color:#fff;} .mainBox .box_in1 .box2 .company_more .btn .hover {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:#990033; border:1px solid #ab2c66; color:#fff; transform:scale(1,0); -webkit-transform:scale(1,0); -moz-transform:scale(1,0); -ms-transform:scale(1,0); transform-origin:center top; -webkit-transform-origin:center top; -moz-transform-origin:center top; -ms-transform-origin:center top; transition:all .2s ease-out; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out;} .mainBox .box_in1 .box2 .company_more .btn:hover .hover { transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1);} /* ÄÁÅÙÃ÷2 - °í°´»ç ¹× ½ÇÀû */ .box_in2 { width:100%; padding:0; overflow:hidden; margin-top:50px; text-align:center; letter-spacing: -0.03em;} .box_in2 .bg { height:400px; background:url("/img/main/box_in2_full_bg.jpg") no-repeat center fixed; background-size:cover; padding-top:100px} .box_in2 .bg h2 { margin:5px 0 20px 0; font-size:30px; font-family:'Noto Sans KR', serif; line-height:33px; color:#fff;} .box_in2 .bg p {height:50px; background:url("/img/main/vsl_txt_bg.png") no-repeat center top; margin-top:20px; padding-top:20px; font-size:24px; color:#fff; margin-bottom:30px;} .box_in2 .txt a {margin-left:20px;} .box_in2 .txt a:first-child{margin-left:0;} .box_in2 .txt a em{position: relative; display:inline-block; margin-top:20px; padding: 0 30px; font-size:16px; font-style:normal; line-height:45px; border:1px solid #fff; color: #fff; -webkit-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; } .box_in2 .txt a em i{margin-left:15px;} .box_in2 .txt a em:hover{ color: #fff; background: #b5110b; border-color:#b5110b;} @media only screen and (max-width:768px){ /* ÄÁÅÙÃ÷2 - ±â°è½Ã¼³ */ .box_in2 {margin-top:30px;} .box_in2 .bg { height:300px; padding-top:50px} .box_in2 .bg h2 {font-size:20px;} .box_in2 .bg p {font-size:14px;} } @media screen and (max-width:650px) { /* ÄÁÅÙÃ÷2 - ±â°è½Ã¼³ */ .box_in2 .txt a em{margin-top:0; } .box_in2 .txt em{ line-height:35px; font-size:13px; padding: 0 20px;} .box_in2 .txt a {margin-left:10px;} } /*ÄÁÅÙÃ÷ 3 ȸ»çÁ¤º¸*/ .mainBox .box_in3{width:100%; overflow:hidden; margin-top:60px; text-align:center;} .box_in3 {width:100%; overflow:hidden; margin-bottom:30px; letter-spacing: -0.03em; } .box_in3 .left {float:left; width:49%; overflow: hidden; position: relative; text-align: center; margin-bottom:30px;} .box_in3 .left .leftBn { width:100%; height:200px; overflow: hidden; box-sizing:border-box;} .box_in3 .left .bg1 { background: #f7f7f7;} .box_in3 .left .bg2 { background: #dcdfe0;} .box_in3 .left .leftBn p { position: absolute; top: 77px; left: 50%; width: 42px; height: 42px; background: rgba(255,255,255,.8); margin-left:-22px; border-radius:50%;} .box_in3 .left .leftBn p i { position: relative; width: 17px; height: 17px; display: block; margin:13px auto 0; font-size:0; transition:all .3s; -webkit-transition:all .3s; } .box_in3 .left .leftBn p i:before, .box_in3 .left .leftBn p i:after { content: ""; display: block; background: #666; position: absolute; } .box_in3 .left .leftBn p i:before { width: 100%; height: 1px; top: 8px; left: 0; } .box_in3 .left .leftBn p i:after { width: 1px; height: 100%; top: 0; left: 8px; } .box_in3 .left .leftBn a { display: block; width: 100%; height: 100%; overflow: hidden; position: relative; } .box_in3 .left .leftBn div { float: right; width:50%; height: 100%; overflow: hidden; position: relative; } .box_in3 .left .leftBn div img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height: 100%; transition:all .3s; -webkit-transition:all .3s; } .box_in3 .left .leftBn dl { float: left; margin:60px 0 0 10%; text-align: left; } .box_in3 .left .leftBn dt { color: #000; font-size:22px; line-height: 100%; } .box_in3 .left .leftBn dd { font-size:15px; line-height: 20px; margin-top: 10px; color: #666;} .box_in3 .left .leftBn a:hover dd {color: #333;} .box_in3 .left .leftBn a:hover p { background: rgba(181,17,11,.8); } .box_in3 .left .leftBn a:hover p i { transform:rotate(-90deg); -webkit-transform:rotate(-90deg); } .box_in3 .left .leftBn a:hover p i:before, .box_in3 .left .leftBn a:hover p i:after { background: #e4edf4; } .box_in3 .left .leftBn a:hover div img { min-width: 120%; min-height: 120%;} .box_in3 .right {float:right; width:49%; overflow: hidden; position: relative; margin-bottom:30px;} .box_in3 .right .rightBn { width:100%; overflow: hidden; box-sizing:border-box;} .box_in3 .right .rightBn .banner{float: left; width:50%; height:200px; } .box_in3 .right .rightBn .bg1{background:url("/img/main/box_in3_banner03.jpg") no-repeat right;} .box_in3 .right .rightBn .bg2{background:url("/img/main/box_in3_banner04.jpg") no-repeat right;} .box_in3 .right .rightBn .banner a { display:table; width:100%; height:100%; position:relative; box-sizing:border-box;} .box_in3 .right .rightBn .banner .icon { display:table-cell; vertical-align:middle;} .box_in3 .right .rightBn .banner .icon dl { padding:5px 0 0 40px; text-align:left; letter-spacing:-0.03em;} .box_in3 .right .rightBn .banner .icon dt {color: #000; font-size:22px; line-height: 100%; } .box_in3 .right .rightBn .banner .icon dd {padding-top:10px; color:#666; font-size:15px;} .box_in3 .right .rightBn .banner .hover { opacity:0; position:absolute; top:0; left:0; z-index:5; width:100%; height:100%; background:rgba(0,0,0,.75); display:table; transition:all .3s;} .box_in3 .right .rightBn .banner:hover .hover {opacity:1;} .box_in3 .right .rightBn .banner .hover > div { display:table-cell; vertical-align:middle;} .box_in3 .right .rightBn .banner .hover i {font-style:normal; display:inline-block; *display:inline; zoom:1; color:#fff; border-bottom:1px solid #fff; margin-top:10px; font-size:14px;} .box_in3 .right .rightBn .banner a:link{color:#fff;} .box_in3 .right .rightBn .banner a:active{color:#fff;} .box_in3 .right .rightBn .banner a:visited{color:#fff;} .box_in3 .right .rightBn .banner a:hover{color:#fff;} .box_in3 .right .notice { width:100%; height:200px; overflow: hidden; background: #dbe2e9; padding:25px 30px 30px 30px;} .box_in3 .right .notice h3 { float: left; margin:0 0 25px 0; color: #333; font-size:22px;} .box_in3 .right .notice .line {content:""; display: block; width:100%; height:1px; background: #dbe2e9; margin-top:20px; } .box_in3 .right .notice > a { float: right; display: block; line-height: 45px; color:#dcdfe0; font-size:14px; } .box_in3 .right .notice > a:hover {color:#fff;} .box_in3 .right .notice > a i {display: block; width:60px; height:25px; line-height:25px; font-size:13px; font-style:normal; color:#666; transition:0.3s; border:1px solid #a8afb5; margin-bottom:5px; letter-spacing:-0.03em;} .box_in3 .right .notice > a i:hover {background: #666; color:#fff; border:1px solid #666;} .box_in3 .right .notice .notice_in { width:100%; position:relative; display: block; clear: both;} @media screen and (max-width:960px) { /*ÄÁÅÙÃ÷ 3 ȸ»çÁ¤º¸*/ .box_in3 .left, .box_in3 .right{float:none; width: 100%;} } @media screen and (max-width:768px) { /*ÄÁÅÙÃ÷ 3 ȸ»çÁ¤º¸*/ .box_in3 .left .leftBn dt {font-size:16px;} .box_in3 .left .leftBn dd { font-size:14px; line-height: 18px;} .box_in3 .right .rightBn .banner .icon dt {font-size:16px;} .box_in3 .right .rightBn .banner .icon dd {font-size:14px;} .box_in3 .right .rightBn .banner .hover i {font-size:13px;} .box_in3 .right .notice h3 {font-size:18px;} } @media screen and (max-width:650px) { /*ÄÁÅÙÃ÷ 3 ȸ»çÁ¤º¸*/ .mainBox .box_in3{margin-top:30px;} .box_in3 .left .leftBn p { left: 60%;} .box_in3 .left .leftBn div {width:40%;} .box_in3 .left .bg2 {margin-top:30px;} .box_in3 .right .rightBn .banner{float:none; width:100%;} .box_in3 .right .rightBn .bg1{margin-bottom:30px;} .box_in3 .right {margin-bottom:0;} .box_in3 .right .notice {margin-top:30px;} } /* ÄÁÅÙÃ÷4 - °í°´¼¾ÅÍ */ .mainBox4 { background:url("/img/main/box_in4_bg.jpg") center top no-repeat fixed; background-size:cover; padding:70px 0 100px 0; text-align:center; letter-spacing: -0.03em;} .mainBox4 .inner_box { max-width:1400px; margin:0 auto; -webkit-box-sizing:border-box; box-sizing:border-box; } .mainBox4 .inner_box.w1200 { max-width:1200px; } .mainBox4 h2 {margin:5px 0 20px 0; font-size:30px; font-family:'Noto Sans KR', serif; line-height:33px; color:#fff; } .mainBox4 p { height:50px; background:url("/img/main/vsl_txt_bg.png") no-repeat center top; margin-top:20px; padding-top:20px; font-size:18px; color:#fff; margin-bottom:30px;} .mainBox4 ul { margin-top:50px; } .mainBox4 li { float:left; position:relative; width:25%; padding:110px 0 0; color:#fff; -webkit-box-sizing:border-box; box-sizing:border-box; } .mainBox4 li:before { content:''; display:block; position:absolute; left:0; right:0; top:0; height:99px; background:center no-repeat; } .mainBox4 li.adr:before { background-image:url("/img/main/contact_icon1.png"); } .mainBox4 li.tel:before { background-image:url("/img/main/contact_icon2.png"); } .mainBox4 li.fax:before { background-image:url("/img/main/contact_icon3.png"); } .mainBox4 li.mail:before {background-image:url("/img/main/contact_icon4.png"); } .mainBox4 li h3 {display:block; margin-top:10px; font-size:22px;} .mainBox4 li span { display:inline-block; height:30px; font-size:18px; line-height:30px; letter-spacing:0; vertical-align:middle; } .mainBox4 li:first-child span { font-size:16px; font-weight:300; } .mainBox4 li.tel span { font-size:22px; } .mainBox4 li.tel span strong { display:inline-block; font-size:30px; vertical-align:text-top; } .mainBox4 li.fax span { font-size:22px; } .mainBox4 .clearfix:after { content:''; display:block; clear:both; } @media screen and (max-width:960px){ /* ÄÁÅÙÃ÷4 - °í°´¼¾ÅÍ */ .mainBox4 h2 { font-size:26px;} .mainBox4 p {font-size:17px;} .mainBox4 ul { margin-top:40px; } .mainBox4 li { width:50%; padding:140px 5px 30px; } .mainBox4 li:nth-child(2n) { border-left:1px solid rgba(255,255,255,.2); } .mainBox4 li:nth-child(1), .mainBox4 li:nth-child(2) { border-bottom:1px solid rgba(255,255,255,.2); } .mainBox4 li:before { top:30px; } } @media screen and (max-width:768px){ /* ÄÁÅÙÃ÷4 - °í°´¼¾ÅÍ */ .mainBox4 {padding:50px 0; margin-top:30px;} .mainBox4 h2 { font-size:22px;} .mainBox4 p {font-size:14px; margin-top:5px;} .mainBox4 li:first-child span { font-size:15px; } .mainBox4 li h3 { margin-bottom:0;} .inner_box { padding:0 15px; } .mainBox4.inner_box { padding:40px 15px; } } @media screen and (max-width:640px){ /* ÄÁÅÙÃ÷4 - °í°´¼¾ÅÍ */ .mainBox4 li { padding:140px 5px 50px; } .mainBox4 li h3 { margin-bottom:10px; font-size:18px; } .mainBox4 li span { font-size:16px; line-height:1.4em; } .mainBox4 li.tel span { font-size:18px; } .mainBox4 li.tel span strong { margin-left:3px; font-size:25px; } .mainBox4.inner_box { padding:20px 15px; } } @media only screen and (max-width:768px){ .tp-leftarrow.large, .tp-rightarrow.large, .tp-bullets{display:none !important;} .s_img1 img{width:300px; height:294px;} .s_img2 img{width:300px; height:162px;} .s_img3 img{width:500px; height:135px;} .s_img4 img{width:500px; height:170px;} .mainBox .p1, .mainBox .p2, .mainBox .box_in3 ul li .Tit h2, .mainBox .box_in3 ul li p{font-size:18px;} .mainBox .box_in1 .box1, .mainBox .box_in1 .box2, .mainBox .box_in3 .box1, .mainBox .box_in3 .box2, .mainBox .box_in5 .box1, .mainBox .box_in5 .box2, .mainBox .box_in5 .box3 {width:100%; height:180px; margin-left:0;} .mainBox .box_in3 ul li{width:100%; margin-left:0;} .mainBox .box_in2 ul li {width:100%; margin-left:0;} .mainBox .box_in4 .ul li {float:left; width:48%; height:158px; margin:0 0 5% 4%; } .mainBox .box_in4 .ul li:nth-child(3n+1) { margin-left:4%;} .mainBox .box_in4 .ul li:nth-child(2n+1), .mainBox .box_in4 .ul li:nth-child(4n+1) { margin-left:0;} .mainBox .box_in4 .ul .icon img { margin-top:10%; height:40px; } .mainBox .box_in4 .ul .icon dl { margin:5px 0 10%; background-size:15px; } .mainBox .box_in5 .inner .custmer img {width:100px; height:77px;} .mainBox .box_in5 .inner .custmer .tel {line-height:24px;} .cusBox {margin:10px 0 20px 0;} .mainBox .box_in1 .box2 p, .cusTit h2{font-size:16px; letter-spacing:-0.04em;} .mainBox .box_in1 .box2 span{font-size:13px;} .mainBox .box_in2 ul li a .ov .in p {font-size:16px;} .mainBox .box_in2 ul li a .con strong {font-size:14px;} .mainBox .box_in6 .right ul li{width:49%;} .mainBox .box_in6 .right ul li:first-child + li + li + li {margin-left:2%;} .mainBox .box_in6 .right ul li:first-child + li + li{margin-left:0;} .mainBox .box_in6 .right ul li:first-child + li + li + li + li{margin-left:0;} .mainBox .box_in6 .right ul li:first-child + li + li + li {margin-bottom:20px;}, .mainBox .box_in6 .right ul li:first-child + li + li + li + li, .mainBox .box_in6 .right ul li:first-child + li + li + li + li + li {margin-bottom:0;} .mainBox .box_in6 .left .box_in6_more {margin:12px 0 20px 35%;} .mainBox .box_in6 .left p{font-size:18px;} .mainBox .box_in6 .left span{font-size:13px;} } @media only screen and (min-width:1200px){ .sub_cusBox{display:none !important;} }