/* ****************** 메인 비주얼 ********************** */ #mainVisual{overflow:hidden; z-index:100; position: absolute; top:0%; left:0%; height: 100vh; width:100%; display:block; } #mmovie_con {position:relative; background:#131A34; overflow:hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100vh; position: relative; z-index:1; } #mmovie_con video {border:0; opacity:0.5; padding:0; margin:0; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background-size: cover; transition: 1s opacity;} .slick-track,.slick-list { -webkit-perspective: 2000; -webkit-backface-visibility: hidden;} #mainVisual .main-visual-list-c6n, #mainVisual .main-visual-con, #mainVisual .slick-list, #mainVisual .slick-track, .main-visual-item{ height:100%; overflow:hidden;} .main-visual-con{z-index:1;} /* 메인 비주얼*/ .main-visual-item{position:relative;} /* 메인 비주얼 :: 텍스트 */ .main-visual-item .main-visual-txt-con{z-index:12; position: absolute; top: 50%; left: 50%; width:94%; max-width:1400px; display:block; transform: translate(-50%,-55%);} .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con .main-visual-btn{ opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(50px); -o-transform: translateX(50px); -moz-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s;} .main-visual-item .main-visual-txt-con.left .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-btn{opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); -moz-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s;} /* 첫번째라인 구간*/ .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{line-height:110%; color:#fff; font-size:65px; font-family: 'Montserrat', 'GmarketSansBold'; margin-bottom:10px; -webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-o-transition-delay:0.1s;-ms-transition-delay:0.1s;transition-delay:0.1s;} .main-visual-item .main-visual-txt-con .main-visual-txt2 span{display:block; letter-spacing:0; font-size:17px; font-weight:500; font-family: 'Montserrat', 'GmarketSansMedium';} .main-visual-item .main-visual-txt-con img{display:inline-block;} /* 두번째라인 구간*/ .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{font-size:17px; color:#CBCCCC; line-height:150%; display:block; text-shadow:3px 3px 3px 1px rgba(0,0,0,0.2); letter-spacing:-0.02px; font-weight:500; margin-bottom:10px; padding-top:25px; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;} .main-visual-item .main-visual-txt-con .main-visual-txt1 span {font-size:24px; opacity:1; display:block; letter-spacing:0.02em; padding:10px 0 15px 0; font-weight:600; color:#fff;} .main-visual-item .main-visual-txt-con .main-visual-txt1:before{position:absolute; top:0; right:0; display:inline-block; content:""; width:36px; height:1px; background-color:#fff;} .main-visual-item .main-visual-txt-con.left .main-visual-txt1:before{right:auto; left:0;} /* 자세히보기 버튼 */ .main-visual-item .main-visual-txt-con .main-visual-btn, .main-visual-item .main-visual-txt-con.left .main-visual-btn{line-height:100%; margin:30px 0 10px 0; display:block; padding:0 15px; width:200px; border-radius:9px; background-color:rgba(0,0,0,0.8); -webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-o-transition-delay:0.1s;-ms-transition-delay:0.1s;transition-delay:0.1s;} .main-visual-item .main-visual-txt-con .main-visual-btn span {color:#fff; line-height:50px; font-size:16px; background:url('../../img/m_more.png') no-repeat right center; background-size:16px; width:100%; display:block; letter-spacing:-0.03em; font-family:'GmarketSansMedium';} /* 메인 비주얼 :: 하단버튼 */ #mainVisual .slick-dots{position:absolute; left:50%; bottom:150px; width:300px; text-align:center; margin-left:-150px;} #mainVisual .slick-dots li{display:inline-block; margin:0 5px; } #mainVisual .slick-dots li button{ cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:60px; height:10px; border-radius:5px; border:2px solid #fff;} #mainVisual .slick-dots li.slick-active button{background-color:#fff; border:2px solid #fff;} /* 메인 비주얼 :: 우측 박스이미지 */ .main-visual-item .main-visual-cir-con{ z-index:11; position: absolute;top: 50%; left: 50%; width:94%; text-align:right; max-width:1400px; display:block; transform: translate(-50%,-55%);} .main-visual-item .main-visual-cir-con .main-visual-cir1 { width:50%; border-radius:30px; height:auto; display:inline-block; opacity:0; filter:Alpha(opacity=0); -ms-transform: translateX(50px); -o-transform: translateX(50px); -moz-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s;} .main-visual-item .main-visual-cir-con .main-visual-cir1 img {width:100%; border-radius:30px;} .main-visual-item .main-visual-cir-con.right .main-visual-cir1{ opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(50px); -o-transform: translateX(50px); -moz-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s; -webkit-transition-delay:0.7s;-moz-transition-delay:0.7s;-o-transition-delay:0.7s;-ms-transition-delay:0.7s;transition-delay:0.7s;} /* 메인 비주얼 :: active효과 */ .main-visual-item.active-item .main-visual-pc-img{ -ms-transform: scale(1.0,1.0) rotate(0.01deg); -o-transform: scale(1.0,1.0) rotate(0.01deg); -moz-transform: scale(1.0,1.0) rotate(0.01deg); -webkit-transform: scale(1.0,1.0) rotate(0.01deg); transform: scale(1.0,1.0) rotate(0.01deg);} .main-visual-item.active-item .main-visual-txt1, .main-visual-item.active-item .main-visual-txt2, .main-visual-item.active-item .main-visual-btn .main-visual-item.active-item .main-visual-cir1{opacity:1.0;filter:Alpha(opacity=100); -ms-transform: translateX(0px); -o-transform: translateX(0px); -moz-transform: translateX(0px); -webkit-transform: translateX(0px); transform: translateX(0px);} .main-visual-item.active-item .main-visual-txt-con.left .main-visual-txt1, .main-visual-item.active-item .main-visual-txt-con.left .main-visual-txt2, .main-visual-item.active-item .main-visual-txt-con.left .main-visual-btn, .main-visual-item.active-item .main-visual-cir-con.right .main-visual-cir1 {opacity:1.0;filter:Alpha(opacity=100); -ms-transform: translateX(0px); -o-transform: translateX(0px); -moz-transform: translateX(0px);-webkit-transform: translateX(0px); transform: translateX(0px);} @media all and ( max-width:1220px ){ /* 첫번째라인 구간*/ .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{ font-size:55px;} /* 두번째라인 구간*/ .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{font-size:15px; margin-bottom:5px; padding-top:15px;} .main-visual-item .main-visual-txt-con .main-visual-txt1 span {font-size:21px; padding:5px 0;} /* 자세히보기 버튼 */ .main-visual-item .main-visual-txt-con .main-visual-btn, .main-visual-item .main-visual-txt-con.left .main-visual-btn{ width:120px; } .main-visual-item .main-visual-txt-con .main-visual-btn span {line-height:40px; font-size:15px; background-size:13px;} } @media all and ( max-width:1000px ){ /* 첫번째라인 구간*/ .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{ font-size:45px;} /* 두번째라인 구간*/ .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{font-size:14px;} .main-visual-item .main-visual-txt-con .main-visual-txt1 span {font-size:18px; padding:5px 0;} /* 자세히보기 버튼 */ .main-visual-item .main-visual-txt-con .main-visual-btn, .main-visual-item .main-visual-txt-con.left .main-visual-btn{margin-top:20px; width:100px; border-radius:4px;} .main-visual-item .main-visual-txt-con .main-visual-btn span {line-height:26px; font-size:12px; background-size:10px;} } @media all and ( max-width:800px ){ #mmovie_con, #mainVisual .main-visual-con {height:880px;} /* 첫번째라인 구간*/ .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-size:35px; margin-bottom:10px;} .main-visual-item .main-visual-txt-con .main-visual-txt2 span{font-size:15px;} /* 두번째라인 구간*/ .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{ padding-top:10px;} /* 메인 비주얼 :: 하단버튼 */ #mainVisual .slick-dots {bottom:150px;} #mainVisual .slick-dots li{ margin:0 3px; } #mainVisual .slick-dots li button{width:40px;} /* 메인 비주얼 :: 우측 박스이미지 */ .main-visual-item .main-visual-cir-con .main-visual-cir1 {width:100%;} .main-visual-item .main-visual-cir-con .main-visual-cir1 img {border-radius:20px;} /* 메인 비주얼 :: 텍스트와 이미지의 위치 */ .main-visual-item .main-visual-txt-con, .main-visual-item .main-visual-cir-con{left:50%; width:480px; transform: translate(-240px,0%);} .main-visual-item .main-visual-cir-con {top:100px;} .main-visual-item .main-visual-txt-con {top:460px;} /* 메인 비주얼 :: 하단버튼 */ #mainVisual .slick-dots{left:auto; right:3%; bottom:70%; width:15px; margin-left:0px;} #mainVisual .slick-dots li{display:inline-block; margin:6px 0; } #mainVisual .slick-dots li button{width:10px; height:30px; border:2px solid #fff; border-radius:5px;} } @media all and ( max-width:560px ){ #mmovie_con, #mainVisual .main-visual-con{ height:800px;} /* 두번째라인 구간*/ .main-visual-item .main-visual-txt-con.left .main-visual-txt1{font-size:12px;} /* 메인 비주얼 :: 텍스트와 이미지의 위치 */ .main-visual-item .main-visual-txt-con, .main-visual-item .main-visual-cir-con{width:400px; transform: translate(-200px,0%);} .main-visual-item .main-visual-txt-con {top:400px;} } @media all and ( max-width:480px ){ .main-visual-item .main-visual-txt-con, .main-visual-item .main-visual-cir-con{width:360px; transform: translate(-180px,0%);} .main-visual-item .main-visual-txt-con {top:370px;} } @media all and ( max-width:420px ){ #mmovie_con, #mainVisual .main-visual-con{ height:780px;} .main-visual-item .main-visual-txt-con, .main-visual-item .main-visual-cir-con{width:340px; transform: translate(-170px,0%);} .main-visual-item .main-visual-txt-con {top:360px;} } @media all and ( max-width:370px ){ #mmovie_con, #mainVisual .main-visual-con{ height:760px;} .main-visual-item .main-visual-txt-con, .main-visual-item .main-visual-cir-con{width:300px; transform: translate(-150px,0%);} .main-visual-item .main-visual-txt-con {top:340px;} } /* 메인비쥬얼 플러그인Slider */ .slick-slider{ position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none;-khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;} .slick-list{ position: relative; display: block; overflow: hidden; margin: 0; padding: 0;} .slick-list:focus{ outline: none !important;} .slick-list.dragging{ cursor: pointer; cursor: hand;} .slick-slider .slick-track, .slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .slick-track{ position: relative; top: 0; left: 0; display: block;} .slick-track:before, .slick-track:after{display: table; content: '';} .slick-track:after{ clear: both;} .slick-loading .slick-track{ visibility: hidden;} .slick-slide{ display: none; float: left; height: 100%; min-height: 1px;} [dir='rtl'] .slick-slide{ float: right;} .slick-slide img{display: block;} .slick-slide.slick-loading img{ display: none;} .slick-slide.dragging img{ pointer-events: none;} .slick-initialized .slick-slide{display: block;} .slick-loading .slick-slide{ visibility: hidden;} .slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent;} .slick-arrow.slick-hidden {display: none;} .slick-slider *:focus{outline:none !important;} /* 우측 바로가기 퀵배너 */ #mainVisual .m_quick {position:absolute; z-index:10000000; right:0; bottom:0; height:100px; width:450px; background:#000; } .m_quick ul li { float:left; position: relative; width:33%; margin:20px 0; height:60px; border-right:1px solid rgba(255,255,255,0.3); text-align:center; display:inline-block;} .m_quick ul li a:hover {opacity: 0.7; filter:alpha(opacity=70);} .m_quick ul li a h3 {line-height:120%; font-size:15px; font-family: 'GmarketSansMedium'; color: #fff; position: absolute;top: 50%; left: 50%; width:100%; display:block; transform: translate(-50%,-50%);} @media screen and (max-width:1260px) { #mainVisual .m_quick {width:350px;} .m_quick ul li a h3 {font-size:13px;} } @media screen and (max-width:1000px) { #mainVisual .m_quick {height:auto; bottom:70px; width:auto; right:0%; text-align:right; background:rgba(0,0,0,0.3); width:100%;} .m_quick ul {margin-right:0; float:right; padding:10px;} .m_quick ul li {margin:0 3px; height:36px; width:auto; padding:4px 16px; display:inline-block; border-radius:0%; border:none;background:#000;} .m_quick ul li a h3 {position:relative; } } @media screen and (max-width:380px) { .m_quick ul li {margin:0 2px; height:32px; padding:4px 10px;} .m_quick ul li a h3 {font-size:12px; } } /* 게시판 추출 */ #mainVisual .m_notice {position:absolute; z-index:10000; left:0%; bottom:0; height:100px; width:100%; background-color:rgba(0,0,0,0.5); } .m_notice h4 {float:left; background-color:rgba(0,0,0,0.6); border-radius: 0 10px 10px 0; display:block; margin-top:15px; margin-right:20px; padding:0 30px;} .m_notice h4 span{background:url('../../img/m_notice.png') no-repeat 0 center; background-size:25px; padding-left:40px; line-height:70px; font-size:16px; color:#fff;font-weight:800; font-family: 'Oxanium'; text-transform: uppercase; } .m_notice .more a{position:absolute; left:650px; top:20px;} .m_notice .more img {width:17px;} .m_notice .more a:hover {-ms-transform: rotate(60deg); // explorer -webkit-transform: rotate(60deg); // chrome, safari, opera transform: rotate(60deg); } .m_notice .board_list {float:left; width:450px; height:60px; padding-top:20px;} .m_notice .board_list marquee {width:100%; height:100%;} .m_notice .board_list .board_output {background:none;} .m_notice .board_list .board_output tr td {text-align:right; font-size:15px; color:#fff; } .m_notice .board_list .board_output .bd_out1 {text-align:left; padding:5px 0; color:#fff;} .m_notice .board_list .board_output .bd_out1 a {font-family:'Noto Sans KR'; font-size:15px; color:#fff;} @media screen and (max-width:1200px) { .m_notice .more a{left:580px;} .m_notice .board_list {width:390px;} .m_notice .board_list .board_output tr td , .m_notice .board_list .board_output .bd_out1, .m_notice .board_list .board_output .bd_out1 a { font-size:13px;} } @media screen and (max-width:1000px) { #mainVisual .m_notice {height:70px;} .m_notice h4 {margin-top:10px; margin-right:10px; padding:0 20px;} .m_notice h4 span{ background-size:15px; padding-left:20px; line-height:50px;} .m_notice .board_list {height:50px; padding-top:10px;} .m_notice .more a{left:auto; right:10px;} .m_notice .board_list .board_output tr td , .m_notice .board_list .board_output .bd_out1, .m_notice .board_list .board_output .bd_out1 a {font-size:12px;} } @media screen and (max-width:600px) { .m_notice h4 { margin:0 2%; padding:5px 3%; width:90%; display:block; border-radius:0 0 10px 10px; } .m_notice h4 span{line-height:22px; font-size:12px; } .m_notice .more a{ top:6px; right:20px;} .m_notice .more img {width:11px;} .m_notice .board_list { width:94%; margin:0 auto; padding:0;} .board_list .board_output tr td, .board_list .board_output .bd_out1 a {font-size:10px; letter-spacing:-0.05em;} } @media screen and (max-width:380px) { .board_list .board_output .bd_out1 a {font-size:8px;} } /* 유튜브 동영상 */ .m_movie {background:#44322C url(../../img/m_movie_bg.jpg) no-repeat center bottom; width:100%; position:relative; padding:140px 0; overflow:hidden;} .m_movie section {max-width:1260px; width:90%; margin:0 auto; position:relative; text-align:center;} .m_movie section h2 {font-size:30px; color:#fff; padding-bottom:20px; } .m_movie section p {padding-top:20px; line-height:160%; font-size:15px; color:#fff; max-width:700px; margin:0 auto 30px auto;} .m_movie section .mm_movie {z-index:1; width:600px; height:350px; margin:20px auto; } .m_movie section .mm_movie iframe {width:100%; height:100%; box-shadow:10px 10px 25px #2A2622; } @media screen and (max-width:1279px) { .m_movie section h2 {font-size:27px;} .m_movie section p {font-size:14px;} } @media screen and (max-width:1024px) { .m_movie {padding:70px 0;} .m_movie section h2 {font-size:23px; padding-bottom:10px;} .m_movie section p {font-size:13px;} .m_movie section .mm_movie { width:100%; height:260px; } } @media screen and (max-width:500px) { .m_movie section .mm_movie {height:220px; } } /* 배경이미지 + 버튼 추가섹션 3구간 부분 */ .mb_img {background-position:center tenter; background-size:cover; text-align:center; background-repeat:no-repeat; width:100%; position:relative; height:850px; overflow:hidden;} .mb_img h2 {font-size:40px; color:#fff; padding-top:6%;} .btn_list2 {position:absolute; bottom:10%; left:0; width:100%;} .btn_list2 ul { margin:0 auto; text-align:center;} .btn_list2 ul li {display:inline; padding:0 10px;} .btn_list2 ul li span {text-align:center;} .btn_list2 ul li span a {min-width:180px; padding:15px 5px; color:#fff; font-size:15px; transition: all 0.35s ease-in-out; display:inline-block; background:#000; } .btn_list2 ul li:last-child span a{background:#fff; color:#000;} .btn_list2 ul li span a:hover {color:#000; background:#fff;} .btn_list2 ul li:last-child span a:hover{background:#000; color:#fff;} @media screen and (max-width:1279px) { .mb_img {height:700px;} .mb_img h2 {font-size:35px;} } @media screen and (max-width:1024px) { .mb_img {height:500px;} .mb_img h2 {padding-top:15%; font-size:25px;} .btn_list2 ul li { padding:0 3px;} .btn_list2 ul li span a {min-width:130px; font-size:13px; } } /***** 5칸 배경롤링 배너*****/ .value_section{position:relative; overflow: hidden; background:#000; } .value_section .vsection {overflow: hidden; display:block; height:100vh !important; min-height:600px; } .value_section h2{display: none; opacity: 0; visibility: hidden;} .value_section .tab_box{display: none;} .value_section .con_box{position: relative; z-index: 2; width: 100%; height: 100%;} .value_section .con_box li{display: table; float: left; width: 20%; height: 100%; padding:200px 2%; border-right: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; } .value_section .con_box li.active{background-color: rgba(0,0,0, 0.4); } .value_section .con_box li .txt_box, .value_section .con_box li .btn_box{opacity: 0; visibility: hidden; transform: translateY(-15px); transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease;} .value_section .con_box li.active .txt_box, .value_section .con_box li.active .btn_box{opacity: 1; transform: translateY(0); visibility: visible;} .value_section .con_box li .con_wrap{display: table-cell; vertical-align: middle;} .value_section .con_box li .con_wrap .title_box, .value_section .con_box li .con_wrap .txt_box{color: #fff; word-break: keep-all; } .value_section .con_box li .con_wrap .title_box em{display: block; color: #fff; font-size: 15px; font-weight: 500; font-style: normal; margin-bottom:25px; } .value_section .con_box li .con_wrap .title_box h3{font-size:40px;color: #fff; font-weight: 700; line-height:1.2; margin-bottom: 10px; padding:0; text-align:left; } .value_section .con_box li .con_wrap .title_box h4{font-size:25px; color: #fff;font-weight:400; margin-bottom:50px; line-height:1.2; } .value_section .con_box li .con_wrap .txt_box{margin-bottom:70px;} .value_section .con_box li .con_wrap .txt_box .line{display: inline-block; width: 25px; height: 1px; text-indent: -9999px; background-color: #fff; margin-bottom: 40px;} .value_section .con_box li .con_wrap .txt_box p{font-size: 14px; line-height: 1.6;} .value_section .con_box li .btn_box{position: relative; display: inline-block; line-height: 0;} .value_section .con_box li .btn_box .bubble_line{position: absolute; visibility: hidden; width: 1px; height: 1px;} /**버튼**/ .button{width: 200px; height: 60px; background-color: transparent; border: none; color: #fff; display: inline-block; font-size: 16px; border-radius:50px; font-weight: 700; box-sizing: border-box; text-align: center; transition: all 0.1s ease-out; -webkit-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out;} .btn_bubble_box{position: relative; display: inline-block;} .btn_bubble_box .btn_bubble{position: relative; z-index: 2; border: 2px solid rgba(255, 255, 255, 1); box-sizing: border-box; transition: color 0.3s ease-out;} .btn_bubble_box .btn_bubble span{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;} .btn_bubble_box .bubble_effect{position: absolute; display: block; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-filter: url("#bubble"); filter: url("#bubble"); pointer-events: none; transition: all 0.1s ease-out; -webkit-transition: all 0.1s ease-out; -ms-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out;} .btn_bubble_box .bubble_effect .effect-button{position: absolute; width: 100%; height: 100%; top: 50%; left: 0; z-index: 1; transform: translateY(-50%); background: transparent; transition: background 0.1s ease-out; -webkit-transition: background 0.1s ease-out; -ms-transition: background 0.1s ease-out; -o-transition: background 0.1s ease-out; -moz-transition: background 0.1s ease-out;} .btn_bubble_box .bubble_effect .circle{position: absolute; width: 25px; height: 25px; border-radius: 15px; background: transparent; transition: background 0.1s ease-out; -webkit-transition: background 0.1s ease-out; -ms-transition: background 0.1s ease-out; -moz-transition: background 0.1s ease-out; -o-transition: background 0.1s ease-out;} .btn_bubble_box .bubble_effect .top-left{top: 0; left: 0;} .btn_bubble_box .bubble_effect .bottom-right{bottom: 0; right: 0;} .btn_box:hover .button{background-color: #fff;} .btn_box:hover .btn_bubble_box .btn_bubble{border: none; color: #000;} .btn_box:hover .bubble_effect .effect-button{background-color: #fff;} .btn_box:hover .bubble_effect .circle{background-color: #fff;} .value_section .value_img{position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%;} .value_section .value_img .bg_box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; text-indent: -9999px; transform: scale(1.1); opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; } .value_section .value_img .bg_box.active{opacity: 1; transform: scale(1);} /**배경이미지 경로**/ .value_section .value_img .bg_box_01{background-image: url("../../img/mbusi_bg_01.jpg");} .value_section .value_img .bg_box_02{background-image: url("../../img/mbusi_bg_02.jpg");} .value_section .value_img .bg_box_03{background-image: url("../../img/mbusi_bg_03.jpg");} .value_section .value_img .bg_box_04{background-image: url("../../img/mbusi_bg_04.jpg");} .value_section .value_img .bg_box_05{background-image: url("../../img/mbusi_bg_05.jpg");} @media screen and (max-width:1500px){ .value_section .con_box li .con_wrap .title_box h3{font-size:35px;} .value_section .con_box li .con_wrap .title_box h4{font-size:27px; margin-bottom:30px;} .value_section .con_box li .con_wrap .txt_box .line{margin-bottom:30px;} .button{width:180px; height: 45px;} .value_section .con_box li .con_wrap .txt_box {margin-bottom:45px;} .btn_bubble_box .bubble_effect .circle{width: 20px; height: 20px; border-radius: 15px} .btn_bubble_box .bubble_effect .top-left{top: 10px; left: 10px;} .btn_bubble_box .bubble_effect .bottom-right{bottom: 10px; right: 10px;} } @media screen and (max-width:1339px){ .value_section .con_box li .con_wrap .title_box h3{font-size:30px;} .value_section .con_box li .con_wrap .title_box h4{font-size:18px; margin-bottom:20px;} .value_section .con_box li .con_wrap .txt_box .line{margin-bottom:20px;} .value_section .con_box li .con_wrap .txt_box {margin-bottom:30px;} .value_section .con_box li .con_wrap .txt_box p{font-size:14px;} } @media screen and (max-width:1024px){ .value_section .tab_box{display: block; width:100%; position:absolute; z-index:3; top:160px; left:50%; transform: translateX(-50%); } .value_section .tab_box .tabMenu{max-width:800px; width:94%; margin: 0 auto;} .value_section .tab_box .tabMenu:after{content: ''; clear: both; visibility: hidden; display: block;} .value_section .tab_box .tabMenu li{float:left; width:33.33%; display:inline-block; padding:8px 0; font-size:17px; text-align:center; color: rgba(255, 255, 255, 0.5); box-sizing: border-box; cursor: pointer; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -o-transition: color 0.3s ease;} .value_section .tab_box .tabMenu li.active, .value_section .tab_box .tabMenu li:hover{color: #fff;} .value_section .tab_box .tabMenu li span{position: relative; padding-bottom:5px;} .value_section .tab_box .tabMenu li span:before, .value_section .tab_box .tabMenu li span:after{display: block; content: ''; position: absolute;} .value_section .tab_box .tabMenu li span:before{top: 10px; left: 50%; transform: translateX(-50%); width:6px; height:6px; border-radius:50%; background-color: #fff; opacity: 0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;} .value_section .tab_box .tabMenu li.active span:before{top: -10px; opacity: 1;} .value_section .tab_box .tabMenu li span:after{bottom: 0; left: 0; width: 100%; height: 1px; transform: translate3d(0,0,0) scaleX(0); background-color: #fff; transition: transform 0.3s ease; -webkit-transition: transform 0.3s ease; -ms-transition: transform 0.3s ease; -moz-transition: transform 0.3s ease; -o-transition: transform 0.3s ease;} .value_section .tab_box .tabMenu li.active span:after{transform: translate3d(0,0,0) scaleX(1);} .value_section .con_box li{width: 100%; padding:130px 15px; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; visibility: hidden; border-right: none;} .value_section .con_box li.active{opacity: 1; visibility: visible; z-index: 2; background-color: transparent;} .value_section .con_box li .txt_box, .value_section .btn_box{opacity: 0; visibility: hidden; transform: translateY(-15px); transition: all 0.8s ease 0.6s; -webkit-transition: all 0.8s ease 0.6s; -ms-transition: all 0.8s ease 0.6s; -moz-transition: all 0.8s ease 0.6s; -o-transition: all 0.8s ease 0.6s;} .value_section .con_box li:first-of-type.active .txt_box, .value_section .con_box li:first-of-type.active .btn_box{opacity: 0; visibility: hidden; transform: translateY(-15px);} .value_section .con_box li:first-of-type.active.mo_active .txt_box, .value_section .con_box li:first-of-type.active.mo_active .btn_box{opacity: 1; transform: translateY(0); visibility: visible;} .value_section .con_box li .con_wrap{text-align: center;} .value_section .con_box li .con_wrap .title_box h3, .value_section .con_box li .con_wrap .title_box h4{opacity: 0; visibility: hidden; transform: translateY(10px); text-align:center;} .value_section .con_box li .con_wrap .title_box h3{font-size:30px; transition: all 0.8s ease; -webkit-transition: all 0.8s ease; -ms-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease;} .value_section .con_box li .con_wrap .title_box h4{font-size:20px; transition: all 0.8s ease 0.3s; -webkit-transition: all 0.8s ease 0.3s; -ms-transition: all 0.8s ease 0.3s; -moz-transition: all 0.8s ease 0.3s; -o-transition: all 0.8s ease 0.3s;} .value_section .con_box li.active .con_wrap .title_box h3, .value_section .con_box li.active .con_wrap .title_box h4{opacity: 1; visibility: visible; transform: translateY(0px);} .value_section .con_box li:first-of-type.active .con_wrap .title_box h3, .value_section .con_box li:first-of-type.active .con_wrap .title_box h4{opacity: 0; visibility: hidden; transform: translateY(10px); } .value_section .con_box li:first-of-type.active.mo_active .con_wrap .title_box h3, .value_section .con_box li:first-of-type.active.mo_active .con_wrap .title_box h4{opacity: 1; visibility: visible; transform: translateY(0px);} .value_section .con_box li .con_wrap .title_box h4{margin-bottom:35px;} .value_section .con_box li .con_wrap .txt_box p {max-width:600px; margin:0 auto;} /**버튼**/ .button{width:130px; height:30px; font-size:13px;} } @media screen and (max-width: 1024px) and (orientation: landscape){ .value_section .value_img .bg_box{background-position: 70% center;} } @media screen and (max-width: 640px){ .value_section .vsection {min-height:580px; height:auto !important;} .value_section .tab_box{top:40px;} .value_section .tab_box .tabMenu li{font-size:12px;} .value_section .con_box li .con_wrap .title_box em{font-size:12px;} .value_section .con_box li .con_wrap .txt_box p{font-size:12px;} } @media screen and (max-width: 420px){ .value_section .con_box li .con_wrap .title_box h3{font-size:30px;} .value_section .con_box li .con_wrap .title_box h4{font-size:20px;} } @media screen and (max-width: 380px) and (max-device-height: 720px) and (orientation: portrait){ .value_section .con_box li{padding:160px 15px 70px;} } /* PRODUCT :: 이미지 롤링 배너 */ .product { width:100%; position: relative; background:url('../../img/mproduct_bg.jpg') no-repeat left bottom; padding:0; margin:0 } .product .p_wrap { z-index:1; } .product .p_wrap:after {content:"";display:block;clear:both;} /* 타이틀 및 텍스트 */ .product .p_wrap .p_txt{width:400px; left:30px; position:absolute; z-index:10; top:90px; } .product .p_wrap .p_txt h2 {position: relative; font-size:75px; letter-spacing:-0.06em; font-weight:800; font-family: 'Oxanium'; line-height:100%; padding-bottom:10px; margin-bottom:20px; } .product .p_wrap .p_txt h2:after {content:"";display:block;clear:both; position:absolute; z-index:10000; left:0%; bottom:0; width:30px; height:2px;background:#000;} .product .p_wrap .p_txt p {font-size:15px; color:#000; padding-top:10px; line-height:150%; font-family: 'GmarketSansMedium'; } /***버튼***/ .p_btn ul {padding-top:30px;} .p_btn ul li {display:inline; margin-right:4px;} .p_btn ul li {text-align:center;} .p_btn ul li a {padding:15px 0 11px 0; font-family: 'GmarketSansMedium'; color:#fff; letter-spacing:-0.03em; font-size:15px; width:180px; border-radius:30px; box-shadow:1px 1px 5px rgba(0,0,0,0.2); background-color:#000; background-image:url(../../img/arrow_1.png); background-repeat:no-repeat; background-position:10px center; -webkit-transition: all 0.35s ease-in-out;-moz-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; display:inline-block; } .p_btn ul li a:hover {background-color:#000; background-position:15px center; } .p_btn ul li.w a {background-color:#fff; color:#000;} .p_btn ul li.w a:hover {background-color:#000; color:#fff;} /***롤링배너***/ .product .p_wrap .p_img {margin-left:460px; height:460px; padding-top:80px; overflow:hidden;} .product .p_wrap .p_img .item {float:left; display:inline-block; padding-top:40px;} .product .p_wrap .item dl {text-align:left; width:400px; padding-left:40px; position: relative;} .product .p_wrap .item dl dt {width:100%; font-size:0;} .product .p_wrap .item dl dt img {width:100%; border-radius:15px; box-shadow:1px 1px 5px rgba(0,0,0,0.2);} .product .p_wrap .item a:hover dl dt img {opacity:0.7;} .product .p_wrap .item dl dd .tit h3 {font-size:20px; color:#000; padding:20px 0 7px 0; line-height:100%; font-family: 'GmarketSansMedium';} .product .p_wrap .item dl dd p {font-size:15px; opacity:0.8; color:#000;; } .carousel-control { position:absolute; top:0; margin-top:-20px;} a.carousel-control {opacity:0.6;} a:hover.carousel-control {opacity:1;} .right {right:30px;} .left {right:150px;} @media screen and (max-width: 1000px) { .product { background-position:-460px bottom; } /* 타이틀 및 텍스트 */ .product .p_wrap .p_txt{width:90%; padding:35px 5%; position: relative; left:0px; top:0px; background:#E5E6EA; } .product .p_wrap .p_txt h2 {font-size:50px; padding-bottom:5px; margin-bottom:10px; } .product .p_wrap .p_txt p {font-size:12px; padding-top:7px;} /***버튼***/ .p_btn ul {padding-top:20px;} .p_btn ul li {margin-right:2px;} .p_btn ul li a {padding:12px 0 8px 0; font-size:12px; width:150px; background-size:16px;} /***롤링배너***/ .product .p_wrap .p_img {margin-left:0px; height:320px; padding-top:50px;} .product .p_wrap .p_img .item { padding-top:20px;} .product .p_wrap .item dl {width:300px; padding-left:25px;} .product .p_wrap .item dl dd .tit h3 {font-size:15px;} .product .p_wrap .item dl dd p {font-size:11px;} .carousel-control img {width:50px;} .right {right:15px;} .left {right:90px;} } @media screen and (max-width:767px) { /* 타이틀 및 텍스트 */ .product .p_wrap .p_txt h2 {font-size:40px; } /***버튼***/ .p_btn ul li a {width:140px;} /***롤링배너***/ .product .p_wrap .p_img {height:280px;} .product .p_wrap .item dl {width:250px; padding-left:20px;} } /******** BUSINESS *******/ .busi {overflow:hidden; position: relative; width:100%; text-align:left; background:url('../../img/busi_bg.jpg') no-repeat 0px 0; } .busi .box01{ padding:100px 2%; width:96%; text-align:left; overflow:hidden; max-width:1280px; margin:0 auto;} /* 좌측 타이틀 및 텍스트 */ .busi .busi_txt {float:left; width:45%;} .busi .busi_txt h2 {font-size:16px; padding:0px 0 30px 0; font-family:'GmarketSansBold'; color:#fff;} .busi .busi_txt p{font-size:31px; line-height:130%; padding:0 0 35px 0; font-family: 'GmarketSansMedium'; color:#fff;} .busi .busi_txt span{font-size:15px; text-align:center; border:1px solid #fff; padding:14px 0 10px 0; width:150px; display:block;} .busi .busi_txt span a{color:#fff; background-image:url(../../img/arrow_1.png); background-repeat:no-repeat; padding-right:30px; background-position:right center; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;} .busi .busi_txt span a:hover {padding-right:40px;} /* 우측 사업분야 4칸 배너 */ .busi .box01 ul{ width:50%; float:right;} .busi .box01 ul:after {content:"";display:block;clear:both;} .busi .box01 ul li {float:left; width:38%; padding:30px 4%; background:#fff; margin:2% 0 2% 4%; height:140px; display:inline-block; text-align:left; position: relative; } .busi .box01 ul li a{display:inline-block; position: relative; background-repeat:no-repeat; opacity:0.7; background-position:bottom right; width:100%; height:100%; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; } .busi .box01 ul li a h3 {position:absolute; z-index:10; left:0; top:0; letter-spacing:0; font-size:21px; font-family: 'GmarketSansMedium'; color: #000; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;} .busi .box01 ul li a h3 span {display:block; font-size:13px; font-family: 'GmarketSansMedium'; opacity:0.3; padding-bottom:7px;} .busi .box01 ul li a span.b_btn {position:absolute; z-index:10; left:0; bottom:0; width:40px; height:13px; font-size:0; background:url('../../img/arrow_3.gif') no-repeat center; display:block; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;} .busi .box01 ul li a:hover {background-position:bottom right 5px; opacity:1;} /* 아이콘 */ .busi .box01 ul li:nth-child(1) a{background-image:url(../../img/mbusi_01.gif);} .busi .box01 ul li:nth-child(2) a{background-image:url(../../img/mbusi_02.gif);} .busi .box01 ul li:nth-child(3) a{background-image:url(../../img/mbusi_03.gif);} .busi .box01 ul li:nth-child(4) a{background-image:url(../../img/mbusi_04.gif);} /* 배이미지 */ .busi .img {position:absolute; bottom:0;left:-60px; z-index:10;line-height:0; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; animation:ship 6s ease-out infinite; -moz-animation:ship 6s ease-out infinite; -webkit-animation:ship 6s ease-out infinite; -o-animation:ship 6s ease-out infinite;} @keyframes ship { 0%{left:-200px; bottom:-30px; transform:scale(0.8); opacity:0;} 75%{left:-60px; bottom:0; opacity:1; transform:scale(1)} 100%{opacity:0; left:-10px;} } @-moz-keyframes ship{ 0%{left:-200px; bottom:-30px; transform:scale(0.8); opacity:0;} 75%{left:-60px; bottom:0; opacity:1; transform:scale(1) } 100%{opacity:0; left:-10px;} } @-webkit-keyframes ship { 0%{left:-200px; bottom:-30px; transform:scale(0.8); opacity:0;} 75%{left:-60px; bottom:0; opacity:1; transform:scale(1) } 100%{opacity:0; left:-10px;} } @-o-keyframes ship{ 0%{left:-200px; bottom:-30px; transform:scale(0.8); opacity:0;} 75%{left:-60px; bottom:0; opacity:1; transform:scale(1) } 100%{opacity:0; left:-10px;} } @media screen and (max-width:1300px) { .busi .img img {width:650px;} } @media screen and (min-width:1000px) { .busi .box01 ul li a:hover img { box-shadow:5px 5px 20px 5px rgba(0,0,0,0.3);} .busi .box01 ul li a:hover h3 { padding-left:10px; } .busi .box01 ul li a:hover span.b_btn {width:60px; } } @media screen and (max-width:1000px) { .busi .box01{ padding:70px 2%;} .busi .busi_txt {width:32%;} .busi .busi_txt h2 {font-size:15px;} .busi .busi_txt p{font-size:27px;} .busi .busi_txt span{font-size:13px; padding:10px 0 7px 0; width:140px;} .busi .box01 ul{ width:65%;} .busi .img img {width:480px;} } @media screen and (max-width:767px) { .busi .img img {width:350px;} .busi .box01{ padding:60px 3% 110px; width:94%;} .busi .busi_txt {width:92%; margin:0 auto 30px auto;} .busi .busi_txt h2 {font-size:13px; padding:0px 0 10px 0;} .busi .busi_txt p{font-size:21px; padding:0px 0 20px 0;} .busi .busi_txt span{font-size:12px;width:130px;} .busi .box01 ul{ width:100%;} .busi .box01 ul li {height:70px; width:41%; padding:15px 3%; margin:1.5%;} .busi .box01 ul li a{background-size:35px;} .busi .box01 ul li a h3 {font-size:15px;} .busi .box01 ul li a h3 span {font-size:10px; padding-bottom:2px;} } /* 파트너 - 지도 숫자카운트 */ .m_count {position: relative; width:100%; padding:60px 0; background:url('../../img/mcount_bg.jpg') no-repeat center / cover;} .m_count h4 {padding-top:120px; text-align:center; font-size:80px; letter-spacing:-0.05em; color:#000; font-weight:800; font-family: 'Oxanium'; } .m_count h4 span{color:#000; line-height:140%; padding-top:10px; font-family:'GmarketSansLight'; letter-spacing:0em; font-size:19px; display:block;} .m_count ul {max-width:1400px; margin:0 auto; padding:130px 0;} .m_count ul:after {content:"";display:block;clear:both;} .m_count ul li {display:inline-block; float:left; width:25%;} .m_count ul li dl {text-align:center;} .m_count ul li dl dt {color:#000; padding-bottom:15px; font-family:'GmarketSansMedium'; font-size:19px; } .m_count ul li dl dd b.counter {font-size:100px; letter-spacing:-0.05em; color:#000; font-weight:400; font-family: 'Oxanium';} @media screen and (max-width:1000px) { .m_count {padding:30px 0;} .m_count h4 {padding-top:80px; font-size:60px;} .m_count h4 span{padding-top:5px; font-size:17px;} .m_count ul {padding:100px 0;} .m_count ul li dl dt {padding-bottom:7px; font-size:15px;} .m_count ul li dl dd b.counter {font-size:80px;} } @media screen and (max-width:767px) { .m_count h4 {padding-top:40px; font-size:41px;} .m_count h4 span{font-size:14px;} .m_count ul {padding:40px 0;} .m_count ul li {width:50%; padding:10px 0;} .m_count ul li dl dt {padding-bottom:0px; font-size:13px;} .m_count ul li dl dd b.counter {font-size:45px;} } /* CONTACT US */ .m_formmail {background:#2C2803 url('../../img/m_board_bg.jpg') no-repeat center 0 / cover; width:100%; padding:150px 0; position:relative;} .m_formmail section {max-width:1400px; margin:0 auto; width:92%;} /* 텍스트 */ .m_formmail .info { float:left; width:35%; padding-top:10px;} .m_formmail .info h3 {font-size:15px; line-height:110%; display:block; color:#000; font-family:"GmarketSansMedium"; } .m_formmail .info p {font-size:44px; line-height:110%; font-family:"GmarketSansBold"; padding:40px 0;} .m_formmail .info p span {font-size:17px; line-height:140%; padding-top:15px; font-family:"GmarketSansMedium"; display:block;} .m_formmail .info dl {width:100%; margin-bottom:10px; max-width:500px;} .m_formmail .info dl:after {content:"";display:block;clear:both;} .m_formmail .info dl dt {width:30%; float:left;} .m_formmail .info dl dt span {font-size:13px; background-color:rgba(0,0,0,0.7); border-radius:4px; color:#fff; padding:8px 2px 4px 2px; line-height:100%; width:100%; font-family: 'GmarketSansMedium'; display:inline-block; text-align:center; } .m_formmail .info dl dd {font-size:14px; width:67%; padding-top:7px; color:#000; display:block; font-family: 'GmarketSansMedium';float:right;} /* 폼 */ .m_formmail .form {float:right; width:56%; border-radius:20px; padding:4%; background:#fff;} .m_formmail .Btn { text-align:center;} .m_formmail .Btn input[type=submit] {width:190px; height:43px; border:2px #000 solid; padding:0 20px; line-height:30px; box-sizing:border-box; cursor:pointer; font-family: 'GmarketSansMedium'; background: url(../../img/btn_check.png) 140px center no-repeat; font-size:15px; border-radius:5px; text-align:left; color:#000; } .m_formmail .Btn input:hover {background:#000 url(../../img/btn_check.png) 140px center no-repeat; border:0px; color:#fff; border:2px #000 solid;} @media screen and (max-width:1280px) { .m_formmail { padding:100px 0;} .m_formmail .info h3 {font-size:13px;} .m_formmail .info p {font-size:31px; padding:30px 0;} .m_formmail .info p span {font-size:13px;} } @media screen and (max-width:1000px) { .m_formmail {padding:60px 0;} .m_formmail .info {width:100%;} .m_formmail .form {width:92%; padding:4%; border-radius:12px; padding:20px 4% 30px 4%; margin-top:30px;} .m_formmail .Btn input[type=submit] { height:38px; line-height:25px; font-size:13px;} .m_formmail .info dl dt span {font-size:11px;} .m_formmail .info dl dd {font-size:12px; } }