/*******************메인 스크롤 배경글씨***********************/ #mainContainer {position: relative; z-index: 1; } .main-container {position: relative; z-index: 1;} .scrolling-text-wrap {position: fixed;mix-blend-mode: multiply;left: 0; top: 40%; width: 100%; letter-spacing: -10px; font-size: 180px; font-family:'Montserrat'; font-weight: 900; overflow: hidden; color: #EFEFEF;} .scrolling-text {white-space: nowrap; display: flex; transform: translateX(0); animation: marquee 40s linear infinite;} .scrolling-text .line-txt {color: transparent; -webkit-text-stroke: 2px #EFEFEF;} @media screen and (max-width:1024px) { .scrolling-text-wrap { font-size: 100px; letter-spacing: -5px;} } @keyframes marquee { 0% {transform: translateX(0);} 100% {transform: translateX(-4582px);} } /******************* 메인이미지 하단 바***********************/ .m_on {position:absolute; bottom:-1px; left:0%; width:100%; z-index:1000000; display:block; font-size:0; line-height:0; padding:0; margin-top:-10px; vertical-align:baseline;} .m_on img {width:100%; height:220px;} @media screen and (max-width:1339px) { .m_on img {height:160px;} } @media screen and (max-width:1024px) { .m_on img {height:100px;} } /******************메인이미지 하단 공지***********************/ .m_notice {position:absolute; bottom:0px; left:2%; z-index:10000000; display:block;} .m_notice h3 {font-family: 'S-CoreDream-7Black'; font-size:30px; color:#000; padding-bottom:18px; } .m_notice div.con {width:100%; height:50px; position:relative; } .m_notice .board_output {background:none;} .m_notice .board_output tr td {text-align:right; font-size:15px; letter-spacing:0.05em;} .m_notice .board_output .bd_out1 {text-align:left; line-height:180%; width:100%; } .m_notice .board_output .bd_out1 a {font-family:'Noto Sans KR'; font-size:15px;} .m_notice .board_output tr td:nth-child(3) {display:none;} .board_list { width:100%; margin:20px auto 0; } .board_list .board_output {margin:0 auto; width:96%; max-width:1400px; background:none;} .board_list .board_output tr:after {content:"";display:block;clear:both;} .board_list .board_output tr .board_output tr {float:left; width:49.4%; border-radius:10px; margin:5px 0.3%; background:#fff; box-shadow: 3px 3px 8px rgba(0,0,0,0.3); display: inline-block;} .board_list .board_output tr .board_output tr td { padding:30px 0;} .board_list .board_output tr .board_output tr td.bd_out1 { padding-left:10px;} @media screen and (max-width:1339px) { .m_notice h3 {font-size:26px;} .m_notice div.con {height:45px;} .m_notice .board_output tr td, .m_notice .board_output .bd_out1 a {font-size:14px;} } @media screen and (max-width:1024px) { .m_notice h3 {font-size:17px; padding-bottom:5px;} .m_notice div.con {height:25px;} .m_notice .board_output tr td, .m_notice .board_output .bd_out1 a {font-size:12px;} } @media screen and (max-width:767px) { .m_notice .board_output tr td, .m_notice .board_output .bd_out1 a {font-size:10px; } } /******************메인이미지 하단 문의바로가기 아이콘 버튼***********************/ .m_quiry {position:absolute; display:block; bottom:52px; right:3%; min-height:50px; z-index:10000000; display:block; } .m_quiry h3 a {display:block; font-size:20px; line-height:120%; padding:13px 0 0 66px; color:#fff;transition: all 0.35s ease-in-out; font-family: 'S-CoreDream-7ExtraBold'; } .m_quiry h3 a span {position:absolute; left:0; top:0; border-radius: 50%; background:rgba(0,0,0,0.2) url(../../img/mquiry_icon.png) no-repeat center center; width:50px; height:50px; display:block;} @media screen and (min-width:1024px) { .m_quiry h3 a span:before {position:absolute; content: ''; z-index:10; border-radius:50%; display:block; width:56px; height:56px; border:2px dotted #fff; left:0; top:0; margin-top:-5px; margin-left:-5px; animation:rotate 10s linear infinite;} .m_quiry h3 a:hover {background:url(../../img/arrow_5.png) no-repeat right 25px; padding-right:40px;} .m_quiry h3 a:hover span:before { animation:rotate 1s linear infinite; } .m_quiry h3 a:hover span {background-color:rgba(0,0,0,0.4);} } @media screen and (max-width:1339px) { .m_quiry {bottom:45px;min-height:40px; } .m_quiry h3 a { font-size:18px; padding:14px 0 0 62px;} } @media screen and (max-width:1024px) { .m_quiry {bottom:22px; right:1%; min-height:30px; } .m_quiry h3 a { font-size:15px; padding:6px 0 0 36px; font-family: 'S-CoreDream-6Bold'; } .m_quiry h3 a span {background-size:25px; width:30px; height:30px;} } @media screen and (max-width:767px) { .m_quiry {bottom:20px;} .m_quiry h3 a { font-size:13px; padding:4px 0 0 30px;} .m_quiry h3 a span {background-size:25px; width:25px; height:25px;} } /* 아래로 버튼 */ .scroll_down {position:absolute; z-index:10000000000000; right:50%; width:200px; margin:0 -100px 0 0; bottom:100px; text-align:center;} .scroll_down span {border-radius: 50%; background:rgba(33,127,126,0.3); width:50px; height:50px; display:block; margin:0 auto;} .scroll_down a {position:absolute; width:100%; font-size:12px; display:block; background: url(../../img/arrow_down.png) no-repeat center top; padding-top:69px; left;0; animation:scroll_down 1s infinite;} @media screen and (max-width:1339px) { .scroll_down { bottom:80px;} } @media screen and (max-width:1024px) { .scroll_down {display:none;} } @keyframes scroll_down { 0% {top:30px; opacity:0.3; } 50% {top:35px; opacity:1;} 100% {top:30px; opacity:0.3;} } /******************* 메인 비주얼 ********************** */ #mainVisual{overflow:hidden; width:100%; height:100%; position:relative; z-index:100;} .slick-track,.slick-list { -webkit-perspective: 2000; -webkit-backface-visibility: hidden;} #mainVisual .main-visual-list-con, #mainVisual .main-visual-con, #mainVisual .slick-list, #mainVisual .slick-track, .main-visual-item{ height:100%; overflow:hidden;} .main-visual-con{z-index:1;} /* 메인 비주얼 :: 이미지 */ .main-visual-item{position:relative; height:100%; } .main-visual-item .main-visual-pc-img{ width:100%; height:100%; z-index:10; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; background-size:cover !important; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);-webkit-transition:transform 2000ms ease-in-out ;-moz-transition:transform 2000ms ease-in-out ;-o-transition:transform 2000ms ease-in-out ;-ms-transition:transform 2000ms ease-in-out ;transition:transform 2000ms ease-in-out ; } /* 메인 비주얼 :: 텍스트 */ .main-visual-item .main-visual-txt-con{position:absolute; top:42%; left:12%; width:84%; word-break:keep-all; z-index:10000;} .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con .main-visual-txt2{ opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(50px); -o-transform: translateX(50px); -moz-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s;} .main-visual-item .main-visual-txt-con.left .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt2,{ opacity:0;filter:Alpha(opacity=0); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); -moz-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); -webkit-transition:opacity 1.0s, transform 1.0s; -moz-transition:opacity 1.0s, transform 1.0s; -o-transition:opacity 1.0s, transform 1.0s; -ms-transition:opacity 1.0s, transform 1.0s; transition:opacity 1.0s, transform 1.0s;} .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{display:block; /*작은 텍스트 사이즈 */ font-size:19px; letter-spacing:0.02em; text-align:left; text-shadow: 3px 3px 8px rgba(0,0,0,0.4); color:#fff; -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.left .main-visual-txt1:before{right:auto; left:0;} .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{ /*큰 텍스트 사이즈 */ font-size:56px; font-weight:700; text-shadow: 2px 2px 6px rgba(0,0,0,0.4); text-align:left; display:block; line-height:120%; color:#fff; 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 b{color:#48DBB6; ; font-weight:800;} .main-visual-item .main-visual-txt-con img{display:inline-block;} /* 메인 비주얼 :: 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-txt2{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-txt2 {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-txt1{opacity:0.7; filter:Alpha(opacity=70); -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 {opacity:0.6;filter:Alpha(opacity=60); -ms-transform: translateX(0px); -o-transform: translateX(0px); -moz-transform: translateX(0px);-webkit-transform: translateX(0px); transform: translateX(0px);} /* 메인 비주얼 :: 버튼 */ #mainVisual .slick-dots{position:absolute; left:5%; bottom:220px; z-index:10000000000000;} #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:50px; height:10px; border:2px solid #fff;} #mainVisual .slick-dots li.slick-active button{background-color:#48DBB6; border:2px solid #48DBB6;} /* 이전 다음 화살표 버튼*/ #pager {position:absolute; top:70%; margin-top:-16px; left:10%; z-index:10000000; cursor:pointer; } .mbtn {position: relative; display:inline-block; width:20px; height:32px; opacity:0.5; font-size:0;} .prev{ background:url('../../img/arrow-bold-left.png') no-repeat center center / cover; margin-right:50px;} .next{ background:url('../../img/arrow-bold-right.png') no-repeat center center / contain;} .prev:hover,.next:hover {opacity:1;} .prev:before {content: ''; position: absolute; z-index: -1; right:0; margin-right:-29px; top:0px; width:1px; height: 100%; background:rgba(255,255,255,0.5); } /* 동그란 영역 버튼*/ #mainVisual .slick-dots{position:absolute; left:10%; margin-left:150px; top:70%; z-index:10000000000000;} #mainVisual .slick-dots li{display:inline-block; margin:0 5px ; width:22px; height:22px; text-align:center; } #mainVisual .slick-dots li button {cursor:pointer; margin:0px; padding:0px; background:#fff;position:relative; font-size:0; width:8px; height:8px; border-radius:50%; } #mainVisual .slick-dots li.slick-active button {background:none; border:1px solid #48DBB6; position:relative; width:20px; height:20px; } #mainVisual .slick-dots li.slick-active button:before {content:"";position:absolute; display:block; background:#48DBB6; width:8px; height:8px; top:5px; left:5px; border-radius:50%; transition:0.5s;z-index:100000; } @media all and ( max-width:1339px ){ .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{font-size:19px;} .main-visual-item .main-visual-txt-con .main-visual-txt2,.main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-size:56px; } } @media all and ( max-width:1024px ){ #mainVisual{height:700px;} .main-visual-item .main-visual-txt-con{top:40%;left:10%;} } @media all and ( max-width:767px ){ #mainVisual{height:500px;} .main-visual-item .main-visual-txt-con{top:30%;left:5%;} .main-visual-item .main-visual-txt-con .main-visual-txt1,.main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-size:38px;} /* 이전 다음 화살표 버튼*/ #pager {left:5%; margin-top:-10px; } .mbtn { width:13px; height:21px;} .prev{margin-right:30px;} .prev:before { margin-right:-18px;} /* 동그란 영역 버튼*/ #mainVisual .slick-dots{left:5%; margin-left:100px;} #mainVisual .slick-dots li{ margin:0 2px; width:18px; height:18px; } #mainVisual .slick-dots li button {width:5px; height:5px; } #mainVisual .slick-dots li.slick-active button { width:16px; height:16px; } #mainVisual .slick-dots li.slick-active button:before {width:5px; height:5px;} /* 메인 비주얼 :: 텍스트 */ .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{font-size:15px;} .main-visual-item .main-visual-txt-con .main-visual-txt2,.main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-size:38px; } } /* 메인비쥬얼 플러그인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;} /** 동영상 적용 **/ .mmovie_con {position:relative; z-index:1000; background:#000; 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:100%; position: relative; } .mmovie_con video {border:0; opacity:0.8; 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;} .mmovie_con .section_inner {width:100%;} /** 홍보영상 **/ .content .m_movie {width:100%; position:relative;} .content .m_movie section {width:94%; margin:0 auto; position:relative; text-align:center;} .content .portfolio ul {width:100%; position:relative; display:flex; flex-wrap :wrap;} .content .portfolio ul:after{content:"";display:block;clear:both;} .content .portfolio ul li {background:#000; float: left; position:relative;display:inline-block; border-radius:0px; width:48%; margin:1%;} .content .portfolio ul li img {width:100%; line-height:0; font-size:0; padding:0%;} .content .portfolio ul li p {padding:10px 0px 20px; 0; color:#fff; font-size:17px; text-align: center;} .content .portfolio ul li div.btn_ytube {position: absolute; width:100%; text-align:center; top:50%; margin-top:-35px;} .content .portfolio ul li div.btn_ytube img {width:80px;} .content .portfolio ul li div.btn_ytube a:hover img {opacity:0.7; } #portfol_load { display: block; width: 100%; max-width: 160px; margin: 20px auto; text-align: center; margin-left: 42%; border: 1px solid #000; padding: 10px 0;} @media screen and (max-width:767px) { .content .portfolio ul li {width:48%;} .content .portfolio ul li p {padding:10px 0px 10px; 0; font-size:14px; } .content .portfolio ul li div.btn_ytube img {width:40px;} } /* 타이틀 공통 */ .top_tit {padding:60px 0; text-align:center;} .top_tit h2 {font-size:65px; position:relative; display:inline-block; color:#242424; font-family: 'S-CoreDream-7Black';line-height:120%; margin-bottom:10px; } .top_tit h2:before {position:absolute; content: ''; z-index:10; display:block; width:100%; height:18px; background:rgba(0,0,0,0.2); z-index:-1; left:0; bottom:8px;} .top_tit h2 b{color:#129743;} .top_tit p {font-size:19px; opacity:1.0;} .tt_w h2, .tt_w h2 b, .tt_w p {color:#000;} @media screen and (max-width:1339px){ .top_tit {padding:40px 0;} .top_tit h2 {font-size:50px;} .top_tit p {font-size:18px;} } @media screen and (max-width:1024px){ .top_tit {padding:30px 0;} .top_tit h2 {font-size:40px; padding-bottom:5px; } .top_tit p {font-size:15px;} } @media screen and (max-width:767px){ .top_tit h2 {font-size:30px;} .top_tit h2:before {height:10px; bottom:10px;} .top_tit p {font-size:13px;} } /* 제품소개 :: 롤링 배너 */ .work { width:100%; position: relative; paddding:30px 0; } .work:before {content: ''; position: absolute; z-index: -1; left: 0%; top: 0; width: 200%; height: 100%; background:#F3F2F2; } /* 좌측 세로 영문 타이틀*/ .work .top_tit {position:absolute; z-index:10; left:1.5%; top:20px; text-align:left;} .work .top_tit h2 { writing-mode : vertical-rl; font-size:75px;} .work .top_tit h2:before {display:none;} .work .work_wrap { z-index:1; } .work .work_wrap:after {content:"";display:block;clear:both;} .work .work_wrap .work_img{ margin-left:10%; width:90%; height:700px; overflow:hidden; } .work .work_wrap .work_img h3 {font-size:27px; padding:70px 0 40px 0; font-family: 'GmarketSansBold'; } .work .work_wrap .work_img h3 span{font-size:13px; padding-left:14px; letter-spacing:0.4em;} .work .work_wrap .work_img h3 span a:hover{opacity:0.6;} .work .work_wrap .work_img .item {float:left; display:inline-block; width:450px; } .item .inner {margin:0 30px 0 10px; padding-top:150px; position: relative;} .item .inner .txt_box {background:#fff; text-align:center; padding:120px 30px 20px 30px; display:block; height:200px; transition: all 0.35s ease-in-out; overflow:hidden; border-radius:30px; box-shadow:2px 2px 10px rgba(0,0,0,0.3); } .item .inner .txt_box .tit h4 {font-size:32px; color:#000; font-family: 'GmarketSansBold'; line-height:100%; margin:0;} .item .inner .txt_box p {font-size:17px; padding-top:12px; color:#818181; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; line-height:1.6em; height:3.2em;} .item .inner .txt_box span.more {position: relative; font-size:0; margin:30px auto 10px auto; background:#129743 url('../../img/more.png') no-repeat center center; border-radius:50%; display:block; width:48px; height:48px;} .item .inner .txt_box span.more:before {position:absolute; content: ''; z-index:10; border-radius:50%; display:block; width:60px; height:60px; border:2px dotted #129743; left:0; top:0; margin-top:-8px; margin-left:-8px;} .item .inner a:hover .txt_box span.more:before { animation:rotate 10s linear infinite; } .item .inner a:hover .txt_box span.more {background-color:#116651;} .item .inner a:hover .txt_box {border-radius:30px 30px 100px 30px; box-shadow:2px 2px 20px rgba(0,0,0,0.6); } .item .inner .img_box {width:100%; position:absolute; top:0; left:0; width:100%; text-align:center;} .item .inner .img_box img {max-width:100%; border-radius:30px; transition: all 0.35s ease-in-out; } .item .inner a:hover .img_box img {padding-top:10px;} .work .carousel-control { position:absolute; top:0; opacity:0.3; margin-top:-70px;} .work a:hover.carousel-control {opacity:1;} .work .right {right:60px;} .work .left {right:180px;} @keyframes rotate { 0%{} 100%{transform: rotate(360deg );} } @media screen and (max-width: 1339px) { /* 좌측 세로 영문 타이틀*/ .work .top_tit {top:40px;} .work .top_tit h2 {font-size:63px;} .work .work_wrap .work_img{ height:600px; } .work .work_wrap .work_img h3 span{font-size:12px;} .work .work_wrap .work_img .item { width:380px; } .item .inner .txt_box {height:170px; padding:90px 20px 10px 20px; } .item .inner .txt_box .tit h4 {font-size:29px;} .item .inner .txt_box p {font-size:14px; padding-top:10px;} .item .inner .txt_box span.more {margin:20px auto 10px auto; } .item .inner .img_box img {width:320px;} .work .right {right:20px;} .work .left {right:140px;} } @media screen and (max-width:767px) { /* 좌측 세로 영문 타이틀*/ .work .top_tit {left:-20px; top:20px;} .work .top_tit h2 {font-size:50px;} .work .work_wrap .work_img{ height:440px; margin-left:12%; width:88%;} .work .work_wrap .work_img h3 {font-size:21px; padding:51px 0 20px 8px; } .work .work_wrap .work_img h3 span{font-size:10px;} .work .work_wrap .work_img .item { width:280px; } .item .inner {padding-top:110px;} .item .inner .txt_box { padding:60px 25px 10px 25px; height:150px; } .item .inner .txt_box .tit h4 {font-size:21px;} .item .inner .txt_box p {font-size:13px;} .item .inner .txt_box span.more { width:36px; height:36px;} .item .inner .txt_box span.more:before {width:42px; height:42px; margin-top:-5px; margin-left:-5px;} .work .left {right:70px;} .work .carousel-control { margin-top:-55px;} .work .carousel-control img {width:45px;} } /* business 5단 배너 2026 */ .container05 {overflow:hidden; position:relative; } .container05:before {content: ''; position: absolute; z-index: -1; left:0%; top:0px; width:100%; height: 100%; background:url('../../img/mbusi_bg.jpg') no-repeat center top; } .container05 .box01{ padding:180px 0 20px 0; text-align:center; overflow:hidden;} .container05 .box01 ul{display: inline-block; max-width:1400px; width:98%; margin:30px auto; } .container05 .box01 ul li { float:left; width:23%; margin:0 1%; border-radius:10px; display:inline-block; position:relative; background:#48DBB6; } .container05 .box01 ul li img {width:100%; border-radius:10px; transition: all 0.35s ease-in-out; line-height:0;} .container05 .box01 ul li a div {padding:0; text-align:left; position:absolute; left:10%; top:10%; width:80%; z-index:10; } .container05 .box01 ul li a div h3 { margin:15px auto; font-size:30px; color: #fff; font-family: 'GmarketSansBold'; } .container05 .box01 ul li a div p {font-size:15px; color: #fff; line-height:160%; opacity:0.8; transition: all 0.35s ease-in-out; } .container05 .box01 ul li a div span {position:absolute; transition: all 0.35s ease-in-out; right:0; top:7px; font-size:0;border-radius:50%; background:rgba(0,0,0,0.6) url('../../img/arrow_1.png') no-repeat center center; background-size:25px; width:50px; height:50px; display:block;} .container05 .box01 ul li a:hover div p {opacity:1;} .container05 .box01 ul li a:hover img {box-shadow:5px 5px 10px 5px rgba(0,0,0,0.3); margin-top:10px; border-radius:10px 10px 60px 10px;} .container05 .box01 ul li a:hover div span {background-color:#fff;} @media screen and (max-width:1339px) { .container05:before {background-size:1600px; } .container05 .box01 ul li a div h3 { font-size:25px;} .container05 .box01 ul li a div p {font-size:14px;} .container05 .box01 ul li a div span {background-size:20px; width:40px; height:40px;} } @media screen and (max-width:1024px) { .container05:before { background-size:1000px; } .container05 .box01 ul li { float:left; width:46%; margin:10px 2%; display:inline-block; } .container05 .box01{ padding:100px 0 0 0;} .container05 .box01 ul li a div {padding:10px 0 0 0; } } @media screen and (max-width:767px) { .container05 .box01 ul{display: inline-block; max-width:1400px; width:98%; margin:0 auto; } .container05 .box01 ul li a div {left:5%; width:90%;top:3%;} .container05 .box01 ul li a div span {background-size:15px; width:25px; height:25px; top:15px; } .container05 .box01 ul li a div h3 { margin:10px auto; font-size:17px; } .container05 .box01 ul li a div p { font-size:11px;} } /* business 4단 배너 */ .container04 {overflow:hidden; position:relative; } .container04:before {content: ''; position: absolute; z-index: -1; left:0%; top:0px; width:100%; height: 100%; background:url('') no-repeat center top; } .container04 .box01{ padding:80px 0 20px 0; text-align:center; overflow:hidden;} .container04 .box01 ul{display: inline-block; max-width:1400px; width:98%; margin:30px auto; } .container04 .box01 ul li { float:left; width:98%; margin:0 1%; border-radius:10px; display:inline-block; position:relative; background:#FFF; margin-bottom: 50px; } .container04 .box01 ul li img {width:100%; border-radius:10px; transition: all 0.35s ease-in-out; line-height:0;} .container04 .box01 ul li a div {padding:0; text-align:left; position:absolute; left:10%; top:10%; width:80%; z-index:10; } .container04 .box01 ul li a div h3 { margin:15px auto; font-size:38px; color: #fff; font-family: 'GmarketSansBold'; } .container04 .box01 ul li a div p {font-size:15px; color: #fff; line-height:160%; opacity:0.8; transition: all 0.35s ease-in-out; } .container04 .box01 ul li a div span {position:absolute; transition: all 0.35s ease-in-out; right:0; top:7px; font-size:0;border-radius:50%; background:rgba(0,0,0,0.6) url('../../img/arrow_1.png') no-repeat center center; background-size:25px; width:50px; height:50px; display:block;} .container04 .box01 ul li a:hover div p {opacity:1;} .container04 .box01 ul li a:hover img {box-shadow:2px 2px 5px 2px rgba(0,0,0,0.3); margin-top:10px; border-radius:80px 10px 200px 10px;} .container04 .box01 ul li a:hover div span {background-color:#fff;} @media screen and (max-width:1339px) { .container04:before {background-size:1600px; } .container04 .box01 ul li a div h3 { font-size:40px;} .container04 .box01 ul li a div p {font-size:14px;} .container04 .box01 ul li a div span {background-size:20px; width:40px; height:40px;} } @media screen and (max-width:1024px) { .container04:before { background-size:1000px; } .container04 .box01 ul li { float:left; width:96%; margin:10px 2%; display:inline-block; } .container04 .box01{ padding:100px 0 0 0;} .container04 .box01 ul li a div {padding:10px 0 0 0; } } @media screen and (max-width:767px) { .container04 .box01 ul{display: inline-block; max-width:1400px; width:98%; margin:0 auto; } .container04 .box01 ul li a div {left:5%; width:90%;top:3%;} .container04 .box01 ul li a div span {background-size:15px; width:25px; height:25px; top:15px; } .container04 .box01 ul li a div h3 { margin:10px auto; font-size:30px; } .container04 .box01 ul li a div p { font-size:11px;} } /* board 4단 배너 2025추가 */ .board {overflow:hidden; position:relative; } .board:before {content: ''; position: absolute; z-index: -1; left:0%; top:0px; width:100%; height: 100%;} .board .box00{ padding:80px 0 20px 0; text-align:center; overflow:hidden;} .board .box00 ul{display: inline-block; max-width:1400px; width:98%; margin:30px auto; } .board .box00 ul li { float:left; width:23%; margin:0 1%; border-radius:00px; display:inline-block; position:relative; background:#FFF;} .board .box00 ul li img {width:100%; border-radius:10px; transition: all 0.35s ease-in-out; line-height:0;} .board .box00 ul li a div {padding:0; text-align:left; position:absolute; left:10%; top:10%; width:80%; z-index:10; } .board .box00 ul li a div h3 { margin:15px auto; font-size:28px; color: #fff; font-family: 'GmarketSansBold'; } .board .box00 ul li a div p {font-size:15px; color: #fff; line-height:160%; opacity:0.8; transition: all 0.35s ease-in-out; } .board .box00 ul li a div span {position:absolute; transition: all 0.35s ease-in-out; right:0; top:7px; font-size:0;display:block;} .board .box00 ul li a:hover div p {opacity:1;} .board .box00 ul li a:hover img {margin-top:10px;} .board .box00 ul li a:hover div span {background-color:#fff;} @media screen and (max-width:1339px) { .board:before {background-size:1600px; } .board .box00 ul li a div h3 { font-size:40px;} .board .box00 ul li a div p {font-size:14px;} .board .box00 ul li a div span {background-size:20px; width:40px; height:40px;} } @media screen and (max-width:1024px) { .board:before { background-size:1000px; } .board .box00 ul li { float:left; width:45%; margin:10px 2%; display:inline-block; } .board .box001{ padding:100px 0 0 0;} .board .box00 ul li a div {padding:10px 0 0 0; } } @media screen and (max-width:767px) { .board .box00 ul{display: inline-block; max-width:767px; margin:0 auto; } .board .box00 ul li a div {left:2%; width:45%; top:3%;} .board .box00 ul li a div span {background-size:15px; width:25px; height:25px; top:15px; } .board .box00 ul li a div h3 { margin:10px auto; font-size:30px; } .board .box00 ul li a div p { font-size:11px;} } /* vod - 동영상 추가 */ .vod {overflow:hidden; position:relative; padding: 0 0 90px 0;} .vod:before {content: ''; position: absolute; z-index: -1; left:0%; top:0px; width:100%; height: 100%; background-color:#f2f2f2;} .vod h2{margin:0 0 10px 0} .vod .left {float:left; width:60%;} .vod .right {float:right; position:relative;width:30%; padding-top:180px;} .vod .box01{ padding:80px 0 20px 0; text-align:center; overflow:hidden;} .vod .box01 ul{display: inline-block; max-width:1400px; width:98%; margin:30px auto; } .vod .box01 ul li { float:left; width:48%; margin:0 1%; border-radius:0px; display:inline-block; position:relative; margin-bottom: 50px; } .vod .box01 ul li video {width:96%; border-radius:0px; transition: all 0.35s ease-in-out; line-height:0;} .vod .box01 ul li a div {padding:0; text-align:left; position:absolute; left:10%; top:10%; width:80%; z-index:10; } .vod .box01 ul li a div h3 { margin:15px auto; font-size:28px; color: #fff; font-family: 'GmarketSansBold'; } .vod .box01 ul li a div p {font-size:15px; color: #fff; line-height:160%; opacity:0.8; transition: all 0.35s ease-in-out; } .vod .box01 ul li a div span {position:absolute; transition: all 0.35s ease-in-out; right:0; top:7px; font-size:0;border-radius:50%; background:rgba(0,0,0,0.6) url('../../img/arrow_1.png') no-repeat center center; background-size:25px; width:50px; height:50px; display:block;} .vod .box01 ul li a:hover div p {opacity:1;} .vod .box01 ul li a:hover img {box-shadow:5px 5px 10px 5px rgba(0,0,0,0.3); margin-top:10px; border-radius:10px 10px 60px 10px;} .vod .box01 ul li a:hover div span {background-color:#fff;} @media screen and (max-width:1339px) { .vod:before {background-size:1600px; } .vod .box01 ul li a div h3 { font-size:25px;} .vod .box01 ul li a div p {font-size:14px;} .vod .box01 ul li a div span {background-size:20px; width:40px; height:40px;} } @media screen and (max-width:1024px) { .vod:before { background-size:1000px; } .vod .box01 ul li { float:left; width:96%; margin:10px 2%; display:inline-block; } .vod .box01{ padding:100px 0 0 0;} .vod .box01 ul li a div {padding:10px 0 0 0; } } @media screen and (max-width:767px) { .vod .left {float:left; width:96%; height:240px; margin: 10px 2%; display: inline-block;} .vod .right {float:left; position:relative;width:100%; padding-top:20px; width:96%; margin: 10px 2%; display: inline-block;;} .vod .box01 ul{display: inline-block; max-width:1400px; width:98%; margin:0 auto; } .vod .box01 ul li a div {left:5%; width:90%;top:3%;} .vod .box01 ul li a div span {background-size:15px; width:25px; height:25px; top:15px; } .vod .box01 ul li a div h3 { margin:10px auto; font-size:17px; } .vod .box01 ul li a div p { font-size:11px;} } /* 파트너 - 지도 숫자카운트 */ .m_count {position: relative; width:100%; padding:100px 0; margin-top:50px; } .m_count:before {content: ''; position: absolute; z-index: -1; left:0%; top: 0; width:100%; height: 100%; background:url('../../img/mcount_bg.png') no-repeat center 0;} .m_count .top_tit {padding:0; text-align:center;} .m_count .top_tit h2 {color:#fff; padding-top:50px;} .m_count section .info .info_inner { } .m_count .top_tit h3 { text-align:center; font-size:40px; line-height:110%; display:block; color:#fff; font-family:"GmarketSansBold"; } .m_count .top_tit p {font-size:38px; color:#fff; padding:30px 0 30px; line-height:100%; font-weight:600;} .m_count ul {width:96%; max-width:1000px; margin:0 auto; padding:200px 0; text-align:center;} .m_count ul:after {content:"";display:block;clear:both;} .m_count ul li {display:inline-block; float:left; width:100%;} .m_count ul li dl {text-align:center;} .m_count ul li dl dt {color:#000; padding-bottom:15px; font-size:19px; } .m_count ul li dl dd b.counter {font-size:70px; font-family: 'Poppins'; font-weight:800;} @media screen and (max-width:1339px) { .m_count { padding:60px 0; } .m_count .top_tit {padding:0; text-align:center;} .m_count .top_tit h2 {font-size:40px; color:#fff; padding-top:50px;} .m_count section .info .info_inner { } .m_count .top_tit h3 { text-align:center; font-size:40px; line-height:110%; display:block; color:#fff; font-family:"GmarketSansBold"; } .m_count .top_tit p {font-size:24px; color:#fff; padding:30px 0 30px; line-height:100%; font-weight:600;} .m_count ul { padding:100px 0;} .m_count ul li dl dt {padding-bottom:10px; font-size:17px; } .m_count ul li dl dd b.counter {font-size:62px;} } @media screen and (max-width:1024px) { .m_count .top_tit {padding:0; text-align:center;} .m_count .top_tit h2 {font-size:36px; color:#fff; padding-top:50px;} .m_count section .info .info_inner { } .m_count .top_tit h3 { text-align:center; font-size:40px; line-height:110%; display:block; color:#fff; font-family:"GmarketSansBold"; } .m_count .top_tit p {font-size:24px; color:#fff; padding:30px 0 30px; line-height:100%; font-weight:600;} .m_count ul li dl dt {font-size:15px; } .m_count ul li dl dd b.counter {font-size:50px;} } @media screen and (max-width:767px) { .m_count {padding:0; } .m_count:before {background-position:center 80px; } .m_count .top_tit {padding:0; text-align:center;} .m_count .top_tit h2 {font-size:36px; color:#fff; padding-top:150px;} .m_count section .info .info_inner { } .m_count .top_tit h3 { text-align:center; font-size:30px; line-height:110%; display:block; color:#fff; font-family:"GmarketSansBold"; } .m_count .top_tit p {font-size:18px; color:#fff; padding:30px 0 30px; line-height:100%; font-weight:600;} .m_count ul { padding:40px 0;} .m_count ul li dl dt {padding-bottom:2px; font-size:13px; } .m_count ul li dl dd b.counter {font-size:35px;} } /***버튼***/ ul.btn_list { margin:0 auto; text-align:left;} ul.btn_list li {display:inline; padding:0 2px;} .btn {text-align:center;} .btn a {min-width:140px; padding:10px; color:#fff; font-size:16px; border-radius:30px; transition: all 0.35s ease-in-out; display:inline-block; background-color:#000; background-image:url(); background-repeat:no-repeat; background-position:right 15px center; background-size:18px; } .btn a:hover,.btn a.current {background:#058537; } @media screen and (max-width:1024px){ .btn a {min-width:150px; padding:10px; font-size:13px; background-size:13px; } } /***버튼vod***/ ul.btn_list { margin:0 auto; text-align:left;} ul.btn_list li {display:inline; padding:0 2px; text-align:center;} .btn1 {text-align:center;} .btn1 a {min-width:130px; padding:18px; color:#fff; font-size:16px; border-radius:30px; transition: all 0.35s ease-in-out; display:inline-block; background-color:#058537; background-image:url(); background-repeat:no-repeat; background-position:right 15px center; background-size:18px; } .btn1 a:hover,.btn1 a.current {background:#000; } @media screen and (max-width:1024px){ .btn1 a {min-width:150px; padding:10px; font-size:13px; background-size:13px; } } .btn2 {text-align:center;} .btn2 a {min-width:130px; padding:18px; color:#000; font-size:16px; border-radius:30px; transition: all 0.35s ease-in-out; display:inline-block; background-color:#fff; border: 2px solid #058537;} .btn2 a:hover,.btn2 a.current {background:#058537; color:#fff; } @media screen and (max-width:1024px){ .btn2 a {min-width:150px; padding:10px; font-size:13px; background-size:13px; } } /* movie opup CSS */ .mfp-bg {top: 0;left: 0; width: 100%; height: 100%;z-index: 1042; overflow: hidden; position: fixed;background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0;left: 0;width: 100%; height: 100%;z-index: 1043;position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container {text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0;padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content {position: relative; display: inline-block; vertical-align: middle; margin: 0 auto;text-align: left; z-index: 1045; } .mfp-close{overflow: visible;cursor: pointer;background: transparent;border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } .mfp-close {width: 44px; height: 44px; line-height: 44px;position: absolute;right: 0;top: 0; text-decoration: none;text-align: center;opacity: 0.65;padding: 0 0 18px 10px; color: #FFF; font-style: normal;font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content {line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: 0px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block;top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; }.m_movie {width:100%; position:relative;} .m_movie section {width:94%; margin:0 auto; position:relative; text-align:center;} /* movie opup CSS */ .mfp-bg {top: 0;left: 0; width: 100%; height: 100%;z-index: 1042; overflow: hidden; position: fixed;background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0;left: 0;width: 100%; height: 100%;z-index: 1043;position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container {text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0;padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content {position: relative; display: inline-block; vertical-align: middle; margin: 0 auto;text-align: left; z-index: 1045; } .mfp-close{overflow: visible;cursor: pointer;background: transparent;border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } .mfp-close {width: 44px; height: 44px; line-height: 44px;position: absolute;right: 0;top: 0; text-decoration: none;text-align: center;opacity: 0.65;padding: 0 0 18px 10px; color: #FFF; font-style: normal;font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content {line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: 0px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block;top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* 게시판 최근 게시물 css */ .m_board {text-align:center; position: relative;} .m_board:before {content: ''; position: absolute; z-index: -1; left: 60%; top: 0; width: 200%; height: 100%; transform: skewX(-65deg); background: #219d7e;} .sec3-wrap{position:relative; padding-top:40px; width:96%; max-width:1400px; margin:0 auto; } /* 탭메뉴 */ .sec3-tab{text-align:left;} .sec3-tab a{position:relative; display:inline-block; justify-content:center; letter-spacing:-0.03em; align-items:center; width:auto; padding:0 40px; margin:30px 5px 5px 5px; height:40px; line-height:40px; border:1px solid #000; font-size:16px; color:#000; transition:all .4s; font-family: 'S-CoreDream-5Medium'; } .sec3-tab a.active{background-color:#000; border:1px solid #000; color:#fff; z-index:2;} .sec3-content{display:none; padding-top:50px;} .sec3-content.active{display:block;} .sec3-content .content{flex:1; } @media screen and (max-width:1339px){ .sec3-tab a{ height:45px; line-height:45px; font-size:18px; } } @media screen and (max-width:1024px){ .sec3-tab a{ padding:0 30px; margin:3px; height:40px; line-height:40px; font-size:15px; } .sec3-content{ padding-top:20px;} } @media screen and (max-width:767px){ .sec3-tab a{ margin:20px 2px; height:30px; line-height:30px; font-size:13px; } } * 웹진형*/ .board_webzine {width:100%; margin:0 auto;} .board_webzine .board_output {width:100%; background:none;} .board_webzine .board_output img {width:100%; height:190px; padding-bottom:20px; } .board_webzine .board_output .bd_out1 a {font-size:20px; color:#129743; font-family: 'S-CoreDream-7ExtraBold'; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; line-height:2em; height:1em; padding-bottom:10px;} .board_webzine .board_output .bd_out1 a img {width:10px; height:10px; } .board_webzine .board_output tr .board_output tr {float:left; border-radius:10px; width:23%; margin:0 1%; padding:0 0 20px 0; box-shadow: 3px 3px 8px rgba(0,0,0,0.3); } .board_webzine .board_output tr td {display:block; text-align:left; line-height:160%; font-size:15px; padding:0 5%; font-family: 'S-CoreDream-4Regular'; color:#000; padding-bottom:10px; } .board_webzine .board_output tr td:first-child,.board_webzine .board_output tr td:nth-child(2) {padding:0px; } .board_webzine .board_output tr td img { border-radius:10px; transition: all 0.35s ease-in-out; } .board_webzine .board_output tr td a:hover img { border-radius:10px 60px 10px 10px;} .board_webzine .board_output tr td a {display:block; text-align:left; line-height:140%; font-size:16px; font-family: 'S-CoreDream-4Regular'; } .board_webzine .board_output tr .board_output tr td:first-child {width:0%; height:0; } .board_webzine .board_output tr .board_output tr:first-child {background:#129743; } .board_webzine .board_output tr .board_output tr:first-child .bd_out1 a, .board_webzine .board_output tr .board_output tr:first-child td { color:#fff; } @media screen and (max-width:1339px){ .board_webzine .board_output img {height:170px; padding-bottom:15px; } .board_webzine .board_output .bd_out1 a {font-size:19px; } .board_webzine .board_output tr .board_output tr { padding:0 0 20px 0; } .board_webzine .board_output tr td { font-size:14px; padding:0 5%; padding-bottom:10px; } .board_webzine .board_output tr td a { font-size:14px; } } @media screen and (max-width:1024px){ .top_tit .more img {width:17px;} .board_webzine {max-width:700px; margin:0 auto;} .board_webzine .board_output tr .board_output tr {width:48%; margin:10px 1%;} .board_webzine .board_output img {height:150px;} } @media screen and (max-width:767px){ .board_webzine .board_output .bd_out1 a {font-size:13px;} .board_webzine .board_output tr td, .board_webzine .board_output tr td a {font-size:11px; padding-bottom:3px;} } /* 갤러리형*/ .board_gall {width:100%; margin:0 auto;} .board_gall .board_output {width:100%; background:none;} .board_gall .board_output .board_output tr td {float:left; border-radius:10px; width:23%; margin:0 1% 30px 1%; padding:0; box-shadow: 3px 3px 8px rgba(0,0,0,0.3); } .board_gall .board_output .board_output tr td tr td {border-radius:0; box-shadow:3px 3px 8px rgba(0,0,0,0); } .board_gall .board_output .board_output tr td table { width:100%;} .board_gall .board_output .board_output tr td table tr td {width:100%; margin:0; padding:0; background:none; } .board_gall .board_output .board_output_gallery_img {width:100%;} .board_gall .board_output .board_output_gallery_img img {width:100%; height:190px;transition: all 0.35s ease-in-out; } .board_gall .board_output .board_output_gallery_img a:hover img {width:100%; height:190px; border-radius:0px 60px 0px 0px;} .board_gall .board_output .board_output_gallery_subject a {font-size:18px; color:#333333; padding-top:10px; margin:0 auto; width:92%;font-family: 'S-CoreDream-6Bold'; line-height:120%; display:block; text-align:left; } .board_gall .board_output .board_output_gallery_subject a img {width:10px; height:10px;} @media screen and (max-width:1339px){ .board_gall .board_output .board_output_gallery_subject a {font-size:17px;} } @media screen and (max-width:1024px){ .board_gall .board_output .board_output tr td {width:45%; margin:5px 2%; } } @media screen and (max-width:500px){ .board_gall .board_output .board_output_gallery_subject a {font-size:12px;} .board_gall .board_output .board_output_gallery_img img {width:100%; height:100px; } } /********리스트형**********/ .board_list { width:100%; margin:20px auto 0; text-align:left; } .board_list .board_output {width:100%; background:none;} .board_list .board_output tr:after {content:"";display:block;clear:both;} .board_list .board_output tr .board_output tr { position:relative; float:left; width:49.4%; border-radius:10px; margin:8px 0.3%; background:#fff; box-shadow: 3px 3px 8px rgba(0,0,0,0.3); display: inline-block;} .board_list .board_output tr .board_output tr td { position:relative; padding:30px 0;} .board_list .board_output tr .board_output tr td.bd_out1 { padding-left:10px;} /* 앞도트제거*/ .board_list .board_output tr .board_output tr td:first-child { display:none; } /* 제목*/ .board_list .board_output .bd_out1 {margin-left:3%; width:97%; display:inline-block; float:left; background:url('../../img/dot_1.png') no-repeat 0 center;} .board_list .board_output .bd_out1 a {font-size:18px; line-height:120%; font-family: 'S-CoreDream-4Regular'; } .board_list .board_output .bd_out1 a:hover {color:#368674; text-decoration: none; } /* new 비밀글 이미지 아이콘 사이즈 조정*/ .board_list .board_output .bd_out1 a img {width:10px; height:10px; vertical-align:top;} .board_list .board_output .bd_out1 img {width:13px; height:13px; vertical-align:top;} /* 날짜*/ .board_list .board_output tr .board_output tr td:last-child {bottom:0; right:3%; position: absolute; text-align:right; line-height:120%; opacity:0.5; font-size:15px; font-family: 'S-CoreDream-4Regular'; color:#636363; } @media screen and ( max-width:1339px ) { .board_list .board_output .bd_out1 {margin-left:2%; padding-left:7px;} .board_list .board_output .bd_out1 a {font-size:16px;} .board_list .board_output tr .board_output tr td:last-child {margin-right:2%; font-size:13px; } } @media screen and ( max-width:1024px ) { .board_list .board_output {max-width:700px; } .board_list .board_output tr .board_output tr { width:99.4%;} .board_list .board_output tr .board_output tr td { padding:20px 0;} } @media screen and ( max-width:767px ) { .board_list .board_output .bd_out1 {margin-left:1%; width:99%; background:none; } .board_list .board_output .bd_out1 a {font-size:13px; letter-spacing:-0.04em;} .board_list .board_output .bd_out1 a img, .board_list .board_output .bd_out1 img {margin-top:5px;} .board_list .board_output tr .board_output tr { margin:3px 0.3%; padding-bottom:20px;} .board_list .board_output tr .board_output tr td { padding:15px 0; } .board_list .board_output tr .board_output tr td:last-child {font-size:11px;} } /* CONTACT US */ .m_formmail {width:100%; padding:100px 0 200px 0; position:relative; } .m_formmail section {max-width:1400px; margin:0 auto; width:92%; position:relative;} .m_formmail section .info {position:absolute; right:0; top:70px; width:48%; z-index:100; text-align:left; } .m_formmail .top_tit {padding:0; text-align:left;} .m_formmail .top_tit h2 {color:#fff; padding-right:30px;} .m_formmail section .info .info_inner {margin-top:10px; background:url('../../img/mform_bg.jpg') no-repeat center top / cover; width:96%; padding:14% 6% 13% 6%; border-radius:0 140px 140px 0; z-index:100; } .m_formmail .info h3 {font-size:40px; line-height:110%; display:block; color:#fff; font-family:"GmarketSansBold"; } .m_formmail .info p {font-size:19px; color:#fff; padding:10px 0 30px; line-height:130%;} .m_formmail .info dl {width:94%; margin:15px auto;} .m_formmail .info dl:after {content:"";display:block;clear:both;} .m_formmail .info dl dt {width:28%; float:left;} .m_formmail .info dl dt span {font-size:15px; background-color:#fff; border-radius:4px; color:#000; 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:16px; width:67%; color:#fff; display:block; text-align:left; float:right;} /* 폼 */ .m_formmail .form {float:left; position:relative; padding:4% 27% 4% 5%; width:47%; text-align:left;} .m_formmail .form:before {content: ''; position: absolute; z-index: -1; left:0%; top: 0; width:100%; height: 100%; background:#8fbf3a; border-radius:60px 60px 0 0; } .m_formmail .formmail_cell_bgcolor table tr td textarea {display:none;} .m_formmail .Btn { text-align:center;} .m_formmail .Btn input[type=submit] {width:200px; font-size:18px; border-radius:30px; box-sizing:border-box; color:#219D7E; border:2px #fff solid; padding:14px; background:#fff; cursor:pointer; font-family: 'S-CoreDream-7ExtraBold'; } .m_formmail .Btn input:hover {color:#fff; background:none; } .m_formmail .bs input[type=submit] {width:160px; font-size:15px; border:none; padding:7px; background:#000; } .m_formmail .bs input:hover {color:#fff; } /* 개인정보취급방침 레이어팝업 */ #popupLayer { position: absolute; left:4%; top:10%; width:400px; height:400px;z-index:1000; background:rgba(0,0,0,0.7); box-shadow: 3px 3px 8px rgba(0,0,0,0.3); text-align:center; border-radius:10px; } #popupLayer h3 {color:#058537; font-family: 'S-CoreDream-4Regular'; font-size:23px; padding-top:25px;text-align:center; } #popupLayer textarea { font-family: 'S-CoreDream-4Regular'; width:355px; height:230px; margin:20px;} #popupLayer a img {width:170px;} @media all and ( max-width:1024px ){ #popupLayer {left:5%; top:10%; width:90%;} #popupLayer h3 {color:#058537; font-family: 'S-CoreDream-4Regular'; font-size:20px; padding-top:25px; } #popupLayer textarea { width:90%; margin:20px;} #popupLayer a img {width:170px;} } @media screen and (max-width:1600px) { .m_formmail section .info .info_inner {border-radius:0 110px 110px 0;} .m_formmail .info h3 {font-size:35px; } .m_formmail .info p {font-size:18px;} .m_formmail .info dl dt span {font-size:13px; } .m_formmail .info dl dd {font-size:15px;} .m_formmail .Btn input[type=submit] {font-size:17px; } } @media screen and (max-width:1339px) { .m_formmail {padding:50px 0;} .m_formmail .top_tit h2 {color:#000;} /* 텍스트 */ .m_formmail section .info {position:relative; top:0px; width:100%; } .m_formmail section .info .info_inner {margin-top:0px; width:90%; padding:40px 5%; border-radius:30px; } .m_formmail .form {float:none; padding:6%; width:88%;} .m_formmail .form:before {border-radius:30px; } .m_formmail .info h3 {font-size:30px; } .m_formmail .info p {font-size:17px;} } @media screen and (max-width:1024px) { .m_formmail .info h3 {font-size:22px; } .m_formmail .info p {font-size:14px;} .m_formmail .info dl {margin:7px auto;} .m_formmail .info dl dt span {font-size:11px; } .m_formmail .info dl dd {font-size:12px;} .m_formmail .Btn input[type=submit] {width:150px; font-size:13px; padding:5px; } }