/* ****************** 메인 비주얼 ********************** */ #mainVisual{overflow:hidden; width:100%; height:727px; position:relative;} .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;} .main-visual-item .main-visual-pc-img{ width:100%; height:100%; 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 5000ms ease-in-out ;-moz-transition:transform 5000ms ease-in-out ;-o-transition:transform 5000ms ease-in-out ;-ms-transition:transform 5000ms ease-in-out ;transition:transform 5000ms ease-in-out ; } .main-visual-item .main-visual-m-img{display:none;} /* 메인 비주얼 :: 텍스트 */ .main-visual-item .main-visual-txt-con{position:absolute; top:50%; right:50%; width:800px; margin:-100px -400px 0 0; text-shadow:1px 1px 2px rgba(0, 0, 0, .5);} .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-more-btn{ text-align:center; 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-more-btn{ text-align:center; 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{text-align:center; display:block; font-size:20px; letter-spacing:-1px; font-weight:400; color:#fff; margin-bottom:30px; padding-top:28px; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;} .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:#404041;} .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{display:block; font-size:70px; font-weight:300; letter-spacing:-4px; line-height:75px; color:#fff; margin-bottom:30px; -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-txt2 b{font-weight:600;} .main-visual-item .main-visual-txt-con .main-visual-txt2 span{color:#FFE308;} .main-visual-item .main-visual-txt-con .main-visual-more-btn{display:inline-block; font-size:16px; font-weight:300; color:#fff; padding-bottom:13px; border-bottom:3px solid #fff; -webkit-transition-delay:0.8s;-moz-transition-delay:0.8s;-o-transition-delay:0.8s;-ms-transition-delay:0.8s;transition-delay:0.8s;} .main-visual-item .main-visual-txt-con .main-visual-more-btn:hover{text-shadow:1px 1px 2px rgba(0, 0, 0, .5);} .main-visual-item .main-visual-txt-con img{display:inline-block;} @keyframes rotate {0%{} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg );}} @-moz-keyframes rotate {0%{} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg );}} @-webkit-keyframes rotate {0%{} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg );}} @-o-keyframes rotate {0%{} 50%{transform: rotate(180deg);} 100%{transform: rotate(360deg );}} /* 메인 비주얼 :: active효과 */ /* .main-visual-item.active-item .main-visual-pc-img{ -ms-transform: scale(1.0,1.0) rotate(0.1deg); -o-transform: scale(1.0,1.0) rotate(0.1deg); -moz-transform: scale(1.0,1.0) rotate(0.1deg);-webkit-transform: scale(1.0,1.0) rotate(0.1deg); transform: scale(1.0,1.0) rotate(0.1deg);} */ .main-visual-item.active-item .main-visual-txt1, .main-visual-item.active-item .main-visual-txt2, .main-visual-item.active-item .main-visual-more-btn{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-more-btn {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);} /* 메인 비주얼 :: 버튼 */ #mainVisual .slick-dots{position:absolute; width:100%; text-align:center; bottom:35px;} #mainVisual .slick-dots li{display:inline-block; margin:0 22px ; } #mainVisual .slick-dots li button{ cursor:pointer; margin:0px; padding:0px; background:none; font-size:0; width:13px; height:13px; background-color:#fff; border:2px solid #fff; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} #mainVisual .slick-dots li.slick-active button{background-color:transparent;} @media all and ( max-width: 800px ){ #mainVisual{height:auto;} /* 메인 비주얼 :: 이미지 */ .main-visual-item .main-visual-pc-img{display:none;} .main-visual-item .main-visual-m-img{display:block;} .main-visual-m-img img{width:100%;} /* 메인 비주얼 :: 텍스트 */ .main-visual-item .main-visual-txt-con{margin-top:-77px} .main-visual-item .main-visual-txt-con .main-visual-txt1, .main-visual-item .main-visual-txt-con.left .main-visual-txt1{font-size:13px; margin-bottom:14px; padding-top:14px; letter-spacing:-1px;} .main-visual-item .main-visual-txt-con .main-visual-txt1:before, .main-visual-item .main-visual-txt-con.left .main-visual-txt1:before{width:18px;} .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-size:40px; line-height:45px; margin-bottom:14px; letter-spacing:-1.75px;} .main-visual-item .main-visual-txt-con .main-visual-more-btn{font-size:12px; padding-bottom:4px; border-bottom-width:2px;} /* 메인 비주얼 :: 버튼 */ #mainVisual .slick-dots{bottom:19px;} #mainVisual .slick-dots li{margin:0 11px;} } @media all and ( max-width: 480px ){ /* 메인 비주얼 :: 텍스트 */ .main-visual-item .main-visual-txt-con{margin-top:-50px} .main-visual-item .main-visual-txt-con.point{margin-top:-77px;} .main-visual-item .main-visual-txt-con .main-visual-txt2, .main-visual-item .main-visual-txt-con.left .main-visual-txt2{font-size:36px; line-height:41px;} } /* 메인비쥬얼 플러그인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 .monline_quick {position:absolute; right:50px; bottom:50px; z-index:10; } #mainVisual .monline_quick a p {color:#FFE308; font-size:0px; display:inline-block; height:50px; font-weight:600; float:left; padding:8px 0 0 10px; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; -o-transition:all 0.4s; -ms-transition:all 0.4s; transition:all 0.4s} #mainVisual .monline_quick a:hover p {color:#fff; font-size:23px; } #mainVisual .monline_quick .mtxt_banner_rotate {float:left; width:50px; height:50px; display:inline-blcok; animation:rotate 5s linear infinite; -moz-animation:rotate 5s linear infinite; -webkit-animation:rotate 5s linear infinite; -o-animation:rotate 5s linear infinite;} #mainVisual .monline_quick .mtxt_banner_rotate img {width:50px;} @media all and ( max-width:1024px ){ #mainVisual .monline_quick { display:none;} } /* -------- 메인 비쥬얼 아래 사단 배너-------- */ #productQuickMenuCon{ position:relative; top:0; z-index:2; margin:0;} #productQuickMenuCon ul {width:100%; margin:0 auto; position:relative;} #productQuickMenuCon ul:after {content:"";display:block;clear:both;} #productQuickMenuCon ul li{float:left; position:relative; width:25%;} #productQuickMenuCon ul li a{display:block; position:relative; height:0; padding-bottom:120px;} #productQuickMenuCon ul li a .prd-thumb{ overflow:hidden; position:absolute; bottom:0px; left:0px; 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} #productQuickMenuCon ul li a p {color:#fff; text-align:left; font-size:15px; font-weight:400; padding-top:40px; padding-left:20px;} #productQuickMenuCon ul li a p span { font-size:23px; padding-bottom:5px; color:#FFE308;font-weight:600; font-family:"Metropolis-ExtraBold"; display:block;} #productQuickMenuCon ul li.prd-quick-menu1 a{background:url(../../img/mb4_img1_bg.jpg) no-repeat center top; } #productQuickMenuCon ul li.prd-quick-menu2 a{background:url(../../img/mb4_img2_bg.jpg) no-repeat center top; background-size:cover;} #productQuickMenuCon ul li.prd-quick-menu3 a{background:url(../../img/mb4_img3_bg.jpg) no-repeat center top; background-size:cover;} #productQuickMenuCon ul li.prd-quick-menu4 a{background:url(../../img/mb4_img4_bg.jpg) no-repeat center top; background-size:cover;} #productQuickMenuCon ul li.prd-quick-menu1 a, #productQuickMenuCon ul li.prd-quick-menu2 a, #productQuickMenuCon ul li.prd-quick-menu3 a, #productQuickMenuCon ul li.prd-quick-menu4 a{background-size:480px;} #productQuickMenuCon ul li a .prd-thumb .prd-over-con{text-align:center; display:table; width:100%; height:100%; opacity:0;filter:Alpha(opacity=0); visibility:hidden;} #productQuickMenuCon ul li a .prd-thumb .prd-over-con .prd-over-inner{display:table-cell; width:100%; height:100%; vertical-align:top; text-align:center;} #productQuickMenuCon ul li a .prd-thumb .prd-over-con .prd-over-inner img{ padding-top:3%; width:94%; } #productQuickMenuCon ul li a .prd-thumb .prd-over-con .prd-over-inner p{font-size:19px; line-height:22px; color:#fff; font-weight:500; letter-spacing:-0.1px; padding-top:15px;} #productQuickMenuCon ul li a .prd-thumb .prd-over-con .prd-over-inner p span{font-family:'Noto Sans KR'; line-height:140%; width:94%;font-size:12px; padding-top:10px; opacity:0.7; color:#fff; } #productQuickMenuCon ul li a .prd-thumb .prd-over-con .prd-over-inner p.ybg, #productQuickMenuCon ul li a .prd-thumb .prd-over-con .prd-over-inner p.ybg span { color:#000; } @media all and (min-width:1220px){ #productQuickMenuCon ul li a:hover .prd-thumb{height:170%; -webkit-transition:height 0.4s; -moz-transition:height 0.4s; -o-transition:height 0.4s; -ms-transition:height 0.4s; transition:height 0.4s} #productQuickMenuCon ul li.prd-quick-menu1 a:hover .prd-thumb{background:#FFE308;} #productQuickMenuCon ul li.prd-quick-menu2 a:hover .prd-thumb{background:#000;} #productQuickMenuCon ul li.prd-quick-menu3 a:hover .prd-thumb{background:#FFE308;} #productQuickMenuCon ul li.prd-quick-menu4 a:hover .prd-thumb{background:#000;} #productQuickMenuCon ul li a:hover .prd-thumb .prd-over-con{opacity:1.0;filter:Alpha(opacity=100); visibility:visible; -webkit-transition:height 0.4s; -moz-transition:height 0.4s; -o-transition:height 0.4s; -ms-transition:height 0.4s; transition:height 0.4s} } @media all and ( max-width: 800px ){ #productQuickMenuCon ul li a{ padding-bottom:80px;} #productQuickMenuCon ul li a p {font-size:13px; padding-top:20px;} #productQuickMenuCon ul li a p span { font-size:17px; } #productQuickMenuCon ul li{ width:50%;} #productQuickMenuCon ul li.prd-quick-menu1 a, #productQuickMenuCon ul li.prd-quick-menu2 a, #productQuickMenuCon ul li.prd-quick-menu3 a, #productQuickMenuCon ul li.prd-quick-menu4 a{background-size:400px;} } @media all and ( max-width: 480px ){ #productQuickMenuCon ul li a{ padding-bottom:60px;} #productQuickMenuCon ul li a p {font-size:11px; padding-top:15px;} #productQuickMenuCon ul li a p span { font-size:15px; } #productQuickMenuCon ul li.prd-quick-menu1 a, #productQuickMenuCon ul li.prd-quick-menu2 a, #productQuickMenuCon ul li.prd-quick-menu3 a, #productQuickMenuCon ul li.prd-quick-menu4 a{background-size:300px;} } /* -------- 메인컨텐츠 :: NEWS */ #mainCsContainer {background:url(../../img/mnews_bg.jpg) no-repeat center bottom; position:relative; min-height:600px;} .main-news-wrapper{position:relative; z-index:11; max-width:650px; margin:0px auto;} .main-news-top-con{position:relative; border-bottom:1px solid #dedede; padding-bottom:25px;} .main-news-top-con .main-news-tit {text-align:center; font-size:38px; padding-top:100px; font-weight:200; } .main-news-top-con .main-news-tit span{ color:#000; font-size:38px; letter-spacing:-0.75px; font-weight:500 } .main-news-container{ min-height:200px; padding-top:38px;} .main-news-container .news-more-btn{display:block; position:relative; font-size:13px; max-width:130px; margin:38px auto 0;} .main-news-container .news-more-btn a{display:block; position:relative; padding-right:10px;} .main-news-container .news-more-btn span{display:inline-block; color:#FFE308; vertical-align:middle; padding-bottom:10px; font-size:16px; font-weight:400; border-bottom:1px solid #000;} .main-news-container .news-more-btn img{position:absolute; top:10px; right:0px;} @media all and ( max-width: 1600px ){ .main-news-wrapper{width:450px} } @media all and ( max-width: 1220px ){ .main-news-wrapper{width:auto; max-width:684px; margin-bottom:64px;} .main-news-container{min-height:auto;} } @media all and ( max-width: 800px ){ .main-news-wrapper{max-width:none; margin-bottom:42px; padding:0 5%; width:90%;} .main-news-top-con{padding-bottom:13px;} .main-news-top-con .main-news-tit strong{font-size:23px; padding-top:15px;} .main-news-top-con button{top:72px;} .main-news-top-con .main-news-tit,.main-news-top-con .main-news-tit span { font-size:23px;} .main-news-top-con .main-news-tit {padding-top:40px; } .main-news-container{padding-top:30px;} .main-news-container .news-more-btn{font-size:20px; max-width:106px; margin-top:25px} .main-news-container .news-more-btn a{padding-right:20px;} .main-news-container .news-more-btn span{font-size:11px; padding-bottom:6px;} .main-news-container .news-more-btn img{top:7px; max-width:9px;} } /* -------- 메인컨텐츠 설립년도/홍보영상 -------- */ .main-cs-wrapper{position:absolute; top:90px; left:0px; width:100%; } .main-cs-container{display:block;} .main-cs-wrapper .main-invest-con, .main-cs-wrapper .main-video-con{ display:inline-block; width:420px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s} .main-cs-wrapper .cs-circle-inner{position:relative; height:0; width:100%; padding-top:100%; } /* 설립년도 */ .main-cs-wrapper .main-invest-con{float:left; margin-left:3%;} .main-cs-wrapper .main-invest-con .cs-circle-inner{background:url(../../img/m_history.png) no-repeat; background-size:cover;} .main-cs-wrapper .main-invest-con .main-invest-con-inner{position:absolute; text-align:center; top:0px; left:0px; right:0px; bottom:0px; color:#000; letter-spacing:-0.55px; } .main-cs-wrapper .main-invest-con .main-invest-con-inner h3{font-weight:300; font-size:36px; } .main-cs-wrapper .main-invest-con .main-invest-con-inner h3 span{font-size:36px; font-weight:500;} .main-cs-wrapper .main-invest-con .main-invest-con-inner .main-invest-info{font-size:20px; color:#000; padding:10px 0 20px; line-height:180%; font-family:"Metropolis-ExtraBold"; } .main-cs-wrapper .main-invest-con .main-invest-con-inner .main-invest-info b{font-size:48px; font-weight:600;display:block; } .main-cs-wrapper .main-invest-con .main-invest-con-inner dl, .main-cs-wrapper .main-invest-con .main-invest-con-inner dt, .main-cs-wrapper .main-invest-con .main-invest-con-inner dd{display:inline-block; } .main-cs-wrapper .main-invest-con .main-invest-con-inner dl{padding:5px 10px; background-color:#000; font-size:17px; color:#FFE308; -webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:30px;} .main-cs-wrapper .main-invest-con .main-invest-con-inner dd.up b {width:20px; display:inline-block;} /* 홍보영상 */ .main-cs-wrapper .main-video-con{float:right; margin-right:3%;} .main-cs-wrapper .main-video-con .cs-circle-inner{background:url(../../img/mmovie_bg.png) no-repeat; background-size:cover;} .main-cs-wrapper .main-video-con .cs-circle-inner h3{position:absolute; top:80px; left:0; right:0; font-weight:300; font-size:36px; text-align:center; color:#fff;} .main-cs-wrapper .main-video-con .cs-circle-inner h3 span {font-weight:500; font-size:36px; color:#fff;} .main-cs-wrapper .main-video-con .video-play-btn{position:absolute; top:50%; left:50%; width:70px; height:70px; margin:-15px 0 0 -35px;} .main-cs-wrapper .main-video-con .video-play-btn:after{display:none; position:absolute; content:""; bottom:-50px; left:50%; width:1px; height:12px; } @media all and ( max-width: 1600px ){ .main-cs-container{padding:0 15px;} .main-cs-wrapper .main-invest-con .main-invest-con-inner .main-invest-info{font-size:18px; color:#FFE308; } .main-cs-wrapper .main-invest-con .main-invest-con-inner .main-invest-info b{font-size:38px; } .main-cs-wrapper .main-invest-con .main-invest-con-inner dl{ font-size:15px;} .main-cs-wrapper .main-invest-con, .main-cs-wrapper .main-video-con{width:360px;} .main-cs-wrapper .main-video-con{ margin-right:0%;} .main-cs-wrapper .main-invest-con{margin-left:0%;} } @media all and ( max-width: 1220px ){ .main-cs-wrapper{position:static; text-align:center; padding-bottom:64px;} .main-cs-container{padding:0;} .main-cs-wrapper .main-invest-con, .main-cs-wrapper .main-video-con{float:none; padding:15px; } } @media all and ( max-width: 800px ){ .main-cs-wrapper .main-invest-con, .main-cs-wrapper .main-video-con{width:47%; } .main-cs-wrapper .main-invest-con .main-invest-con-inner{ top:2px;} .main-cs-wrapper .main-invest-con .main-invest-con-inner h3, .main-cs-wrapper .main-video-con .cs-circle-inner h3 {font-size:24px;} .main-cs-wrapper .main-invest-con .main-invest-con-inner h3 span, .main-cs-wrapper .main-video-con .cs-circle-inner h3 span {font-size:24px; line-height:24px;} .main-cs-wrapper .main-video-con .cs-circle-inner h3{top:30%;} .main-cs-wrapper .main-invest-con .main-invest-con-inner h3:after, .main-cs-wrapper .main-video-con .cs-circle-inner h3:after{margin:9px auto 15px;} .main-cs-wrapper .main-invest-con .main-invest-con-inner .main-invest-info{font-size:16px; margin-bottom:10px;} .main-cs-wrapper .main-invest-con .main-invest-con-inner .main-invest-info b{font-size:32px;} .main-cs-wrapper .main-invest-con .main-invest-con-inner dl{padding:10px 16px; font-size:12px;} .main-cs-wrapper .main-video-con .video-play-btn{top:55%; width:48px; height:48px; margin-left:-24px;} .main-cs-wrapper .main-video-con .video-play-btn img{max-width:100%;} .main-cs-wrapper .main-video-con .video-play-btn:after{bottom:-40px;} } @media all and ( max-width: 640px ){ .main-cs-wrapper .main-invest-con, .main-cs-wrapper .main-video-con{width:90%; margin:10px 5%; max-width:300px; padding:10px 0;} .main-cs-wrapper .main-invest-con .main-invest-con-inner .main-invest-info{ padding:10px 0 5px; line-height:160%;} } /* 육각퀵배너 */ .content {position: relative; max-width:1920px; margin:0 auto; width:100%;} .content h2{font-size:31px; line-height:100%; letter-spacing:-1px; font-weight:400; font-family:"Metropolis-ExtraBold";} .content h3{font-size:50px; line-height:100%; letter-spacing:-1px; font-weight:500; font-family:"Metropolis-ExtraBold";} .content h4{font-size:65px; line-height:100%; letter-spacing:-1px; font-weight:650; font-family:"Metropolis-ExtraBold";} .container01 {width:100%; background:url(../../img/bg_pattern.jpg) no-repeat 0 bottom; overflow:hidden; height:450px; display:block; position: relative;} .container01 .box01{ margin:0 auto; width:1200px; position:absolute; z-index:12; right:50%; margin:100px -600px 0 0; } .container01 .Tit { background:url(../../img/mquick_icon_tit.png) no-repeat 10px 7px; padding-left:60px; background-size:45px; margin-bottom:30px; margin:0 auto; max-width:1200px;} .container01 h2{ color: #fff; border-left:1px solid #D0D1D1; padding-left:20px; line-height:100%; font-weight:400; font-family:"Metropolis-ExtraBold"; } .container01 h2 span { display:block; font-size:13px; line-height:140%; color:#fff; font-weight:400; opacity:0.7; font-family:'Noto Sans KR';} .container01 .box01 ul:after {content:"";display:block;clear:both;} .container01 .box01 ul li { float:left; width:21%; display:inline-blcok; margin:0 2%; background:url(../../img/mquick_bg.png) no-repeat center 20px; text-align:center;} .container01 .box01 ul li.mb_01 div h3 {background:url(../../img/mquick_icon1.png) no-repeat center 55px; background-size:41px;} .container01 .box01 ul li.mb_02 div h3 {background:url(../../img/mquick_icon2.png) no-repeat center 55px; background-size:41px;} .container01 .box01 ul li.mb_03 div h3 {background:url(../../img/mquick_icon3.png) no-repeat center 55px; background-size:41px;} .container01 .box01 ul li.mb_04 div h3 {background:url(../../img/mquick_icon4.png) no-repeat center 55px; background-size:41px;} .container01 .box01 ul li a div {margin:0 auto;} .container01 .box01 ul li a:hover div {opacity: 0.7; filter:alpha(opacity=70);} .container01 .box01 ul li a div h3 {margin:0 auto; padding-top:150px; padding-bottom:10px;font-size:17px; font-family:"Metropolis-ExtraBold","NotoSansKR"; color: #fff; font-weight:600; } .container01 .box01 ul li a div span { font-size:13px;color: #fff; font-weight:200; line-height:140%; width:95%; margin:0 auto; display:block; opacity:0.7;} @media screen and (min-width:960px) and (max-width:1280px) { .content { width:100%; } .container01 .box01{ width:960px; margin:100px -480px 0 0; } .container01 .box01 ul li { width:23%; margin:0 1%;} } @media screen and (min-width:670px) and (max-width:959px) { .container01 .box01{ width:660px; margin:100px -330px 0 0; } .container01 .box01 ul li { width:46%; margin:0 2%;} .container01 {height:650px; } .container01 .box02 ul li { width:50%; margin:10px 0;} } @media screen and (min-width:200px) and (max-width:669px) { .content { width:100%; } .container01 .box01 { padding:30px 0;} .content h2 { font-size:21px; padding-bottom:20px; padding-top:0px; background-size:30px 2px; line-height:32px;} .content h3 { font-size:25px; padding-bottom:20px; padding-top:0px; background-size:30px 2px; line-height:32px;} .content h4 { font-size:35px; padding-bottom:20px; padding-top:0px; background-size:30px 2px; line-height:32px;} .container01 { height:auto;} .container01 .box01{ position:relative; right:0; max-width:420px; width:90%; margin:0 auto;} .container01 .Tit { padding-left:60px; background-size:45px; margin-bottom:30px; background-size:35px;} .container01 h2{ padding-left:20px; line-height:100%; } .container01 h2 span { display:block; font-size:13px; line-height:140%; } .container01 .box01 ul:after {content:"";display:block;clear:both;} .container01 .box01 ul li { width:100%; display:block; height:auto; margin:20px 0; background-size:55px; } .container01 .box01 ul li a div h3 { font-size:17px; padding-top:85px; } .container01 .box01 ul li a div span { font-size:13px;} .container01 .box01 ul li.mb_01 div h3, .container01 .box01 ul li.mb_02 div h3, .container01 .box01 ul li.mb_03 div h3, .container01 .box01 ul li.mb_04 div h3 {background-size:30px; background-position:center 40px;} } @media screen and (min-width:670px) and (max-width:959px) { .container04 .box01 ul li a div {padding:10px; } .container04 .box01 ul li a div h3 { margin:20px auto; font-size:15px; } .container04 .box01 ul li a div span { font-size:12px; line-height:120%;} .container04 .box01 ul li a div h3 span { font-size:25px; } } @media screen and (min-width:200px) and (max-width:669px) { .container04 .box01{ padding:40px 0; } .container04 .box01 ul{ max-width:300px; height:auto;margin:10px 2%; } .container04 .box01 ul li { float:none; width:100%; height:auto; display:block; } .container04 .box01 ul li.mc_01, .container04 .box01 ul li.mc_02, .container04 .box01 ul li.mc_03 {background-position: center 0px; background-size:300px; } .container04 .box01 ul li a div,.container04 .box01 ul li.mc_02 a div {padding:220px 20px 20px 20px; } .container04 .box01 ul li a div h3 { margin:20px auto; } .container04 .box01 ul li a div span { font-size:12px;} .container04 .box01 ul li a div h3 span { font-size:21px; padding:10px 5px 0 10px; } } /* 메뉴소개 롤링배너*/ .container04 {background:#000 url(../../img/mbanner_bg.jpg) no-repeat center bottom; width:100%;} .container04 .box01{ padding:100px 0; text-align:center; overflow:hidden; max-width:1203px; height:430px; margin:0 auto; } .subText {color:#000;} .container04 h2{color: #000; } .container04 .banner_wrap {padding-top:30px;} .container04 .box01 .item {float:left; width:300px; display:inline-block; margin-right:1px; background:#fff; } .container04 .box01 .mc_01 {background:url(../../img/mclass_01.jpg) no-repeat center 0px; background-size:300px;} .container04 .box01 .mc_02 {background:url(../../img/mclass_02.jpg) no-repeat center 0px; background-size:300px;} .container04 .box01 .mc_03 {background:url(../../img/mclass_03.jpg) no-repeat center 0px; background-size:300px;} .container04 .box01 .mc_04 {background:url(../../img/mclass_04.jpg) no-repeat center 0px; background-size:300px;} .container04 .box01 .mc_05 {background:url(../../img/mclass_05.jpg) no-repeat center 0px; background-size:300px;} .container04 .box01 .mc_06 {background:url(../../img/mclass_06.jpg) no-repeat center 0px; background-size:300px;} .container04 .box01 .ml .txt {padding:170px 20px 30px 20px; text-align:left; } .container04 .box01 .ml .txt h3 { margin:30px auto; font-size:17px; color: #000; letter-spacing:-0.03em; font-weight:600; } .container04 .box01 .ml .txt span { font-size:14px;color: #2C2C2A; font-weight:400; line-height:140%;} .container04 .box01 .ml .txt h3 span { margin-right:6px; font-family:"Metropolis-ExtraBold"; font-size:21px;color:#FFE308; display:inline; padding:15px 5px 0 20px; line-height:100%;background:#000; } .carousel-control { position:absolute; top:0; margin-top:-80px; right:50%; } .right {margin-right:-160px; } .left {margin-right:120px;} @media screen and (max-width:1250px) { .container04 .box01{ padding:100px 0; max-width:902px; } } @media screen and (max-width:950px) { .container04 .box01{ max-width:601px; } } @media screen and (max-width:650px) { .container04 .box01{ max-width:300px; } .container04 h2 {padding:0;} .right img, .left img {width:25px;} .carousel-control {margin-top:-50px; } .right {margin-right:-125px; } .left {margin-right:100px;} .container04 .box01 .item { margin-right:0px;} } /*news contact */ .container03 h2{background: url(../../img/titleBar04.png) no-repeat center 60px;color: #fff; padding-top:0; padding-bottom:20px; font-family:"Metropolis-ExtraBold";} .container03 h3{background: url(../../img/titleBar04.png) no-repeat center 60px;color: #fff; padding-top:0; padding-bottom:20px; font-family:"Metropolis-ExtraBold";} .container03 h4{background: url(../../img/titleBar04.png) no-repeat center 60px;color: #fff; padding-top:0; padding-bottom:20px; font-family:"Metropolis-ExtraBold";} .container03 p { color:#fff; opacity:0.7; filter:alpha(opacity=70); } .container03 ul:after {content:"";display:block;clear:both;} .container03 ul > li{width: 50%;position:relative; float:left; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height:449px; display:inline-block; text-align:center; } .container03 ul > li a{ display:block; width:100%; height:100%; position:relative; z-index:2; } .container03 ul > li .over_bg {opacity:0; filter:alpha(opacity=0); background:#FFE308; width:100%; height:100%; position:absolute; left:0px; top:0; transition:all .5s; -moz-transition:all .5s} .container03 ul > li:hover .over_bg{opacity:0.7; filter:alpha(opacity=70); } .container03 .bg01 { background:url(../../img/main_bottom_bg01.jpg) no-repeat 50%; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover; background-size:cover;} .container03 .bg02 { background:url(../../img/main_bottom_bg02.jpg) no-repeat 50%; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover; background-size:cover;} .container03 .bg03 { background:url(../../img/main_bottom_bg03.jpg) no-repeat 50%; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover; background-size:cover;} .container03 .bg04 { background:url(../../img/main_bottom_bg04.jpg) no-repeat 50%; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover; background-size:cover;} .container03 .bg05 { background:url(../../img/main_bottom_bg05.jpg) no-repeat 50%; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover; background-size:cover;} .container03 .bg06 { background:url(../../img/main_bottom_bg06.jpg) no-repeat 50%; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover; background-size:cover;} .container03 .bg07 { background:url(../../img/main_bottom_bg07.jpg) no-repeat 50%; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover; background-size:cover;} .container03 .bg08 { background:url(../../img/main_bottom_bg08.jpg) no-repeat 50%; -webkit-background-size:cover; -moz-background-size: cover; -o-background-size: cover; background-size:cover;} .container03 .box_line{ display:inline-block; vertical-align:middle; } .container03 .bg01 a:before {height:100%; content:' '; vertical-align:middle; display:inline-block; } .container03 .bg02 a:before {height:100%; content:' '; vertical-align:middle; display:inline-block; } .container03 .bg03 a:before {height:100%; content:' '; vertical-align:middle; display:inline-block; } .container03 .bg04 a:before {height:100%; content:' '; vertical-align:middle; display:inline-block; } .container03 .bg05 a:before {height:100%; content:' '; vertical-align:middle; display:inline-block; } .container03 .bg06 a:before {height:100%; content:' '; vertical-align:middle; display:inline-block; } .container03 .bg07 a:before {height:100%; content:' '; vertical-align:middle; display:inline-block; } .container03 .bg08 a:before {height:100%; content:' '; vertical-align:middle; display:inline-block; } @media screen and (min-width:960px) and (max-width:1280px) { .container03 ul > li { height:350px;} } @media screen and (min-width:670px) and (max-width:959px) { .container03 ul > li { width:100%; float:none !important; height:280px;} .contact .ff > li li{min-height: 60px;padding: 10px 0;margin-right: 30px;border-bottom: 1px solid #d5333a; margin-left:10px;} } @media screen and (min-width:200px) and (max-width:669px) { .container03 ul > li { width:100%; float:none !important; height:170px;} .container03 h2 {background-size:30px 2px; background-position: center 90%; } .container03 h3 {background-size:30px 2px; background-position: center 90%; } .container03 h4 {background-size:30px 2px; background-position: center 90%; } } /* 온라인문의*/ .project_btn { width:100%; text-align:center; background:#3F3F3F;} .project_btn a { padding:40px 0 20px 0; display:block; transition:all 200ms linear; -webkit-transition:all 200ms linear; cursor:pointer; -moz-transition:all 200ms linear; -ms-transition:all 200ms linear; -o-transition:all 200ms linear; } .project_btn a h3 {background:url(../../img/icon_online.png) no-repeat center top; padding-top:60px; font-family:'Archivo Narrow',sans-serif; font-size:17px; color:#fff; font-weight:600;} .project_btn a p { padding-top:10px; opacity:0.8; filter:alpha(opacity=80);} .project_btn a p span{ font-size:13px; color:#fff;} .project_btn a:after { content:''; display:inline-block; width:26px; height:13px; margin-left:15px; } .project_btn a:hover { background:#161615; color:#2C2C2A;} .project_btn a:hover h3 {background:url(../../img/icon_online2.png) no-repeat center top; } .project_btn a:hover h3 ,.project_btn a:hover p { color:#FFE308;} @media screen and (min-width:200px) and (max-width:669px) { .project_btn a h3, .project_btn a:hover h3 {background-size:30px; } .project_btn a p span{ display:block;} }