/******************************************************************************************************* 메인 기본설정 *******************************************************************************************************/ html, body {position: relative;height: 100%;} body {background: #eee;color:#000;margin: 0;padding: 0;} /******************************************************************************************************* 메인 fullpage 설정 *******************************************************************************************************/ #menu {display:block;position:fixed;top:50%;right:2em;width:14px;z-index:1001;padding: 0;margin:0; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translate3d(0,-50%,0); } #menu li {display:inline-block;position:relative;text-align:right;margin:7px;} #menu li a {display: block;position: relative;z-index: 1;width: 100%;height: 100%;cursor: pointer;text-decoration: none;} #menu li.active a span, #menu ul li:hover.active a span {height: 14px;width: 14px;margin: -7px 0 0 -7px;border-radius: 100%; } #menu li a span {border-radius: 50%;position: absolute;z-index: 1;height: 6px;width: 6px;border: 0;background: #333;left: 50%;top: 50%;margin: -3px 0 0 -3px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } #menu li:hover a span {width: 14px;height: 14px;margin: -7px 0px 0px -7px;} #menu li a u {position:absolute;top:-18px;right:10px;display:block;width:auto;white-space: nowrap;max-width: 220px; overflow: hidden;cursor: pointer;text-decoration: none;font-size:0.75em; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } #menu li.active a u, #menu li:hover a u {right:15px; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .fp-viewing-001 #tnb_wrap.tnb_wrap {display:block;} .fp-viewing-002 #tnb_wrap.tnb_wrap {display:none;} .fp-viewing-003 #tnb_wrap.tnb_wrap {display:none;} .fp-viewing-004 #tnb_wrap.tnb_wrap {display:none;} .fp-viewing-005 #tnb_wrap.tnb_wrap {display:none;} .fp-viewing-006 #tnb_wrap.tnb_wrap {display:none;} .fp-viewing-007 #tnb_wrap.tnb_wrap {display:none;} .fp-viewing-001 #menu li a, .fp-viewing-004 #menu li a, .fp-viewing-005 #menu li a {color:rgba(255,255,255,0.7);} .fp-viewing-001 #menu li a span, .fp-viewing-004 #menu li a span, .fp-viewing-005 #menu li a span {background:rgba(255,255,255,0.5);} .fp-viewing-002 #menu li a, .fp-viewing-003 #menu li a, .fp-viewing-006 #menu li a {color:#333;} .fp-viewing-002 #menu li a span, .fp-viewing-003 #menu li a span, .fp-viewing-006 #menu li a span {background:rgba(0,0,0,0.5);} .fp-viewing-007 #menu li a, .fp-viewing-007 #menu li a span {color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.5);} .fp-viewing-001 #menu li.active a, .fp-viewing-004 #menu li.active a, .fp-viewing-006 #menu li.active a {color:#fff;font-weight:400;} .fp-viewing-001 #menu li.active a span, .fp-viewing-004 #menu li.active a span, .fp-viewing-006 #menu li.active a span {background:#fff;} .fp-viewing-001 #menu li.active a span:after, .fp-viewing-004 #menu li.active a span:after, .fp-viewing-006 #menu li.active a span:after {content:"";position:absolute;left:50%;top:50%;border-radius:50%;width:20px;height:20px;margin:-10px 0 0 -10px;background:none;border:1px solid #fff;} .fp-viewing-002 #menu li.active a, .fp-viewing-003 #menu li.active a, .fp-viewing-005 #menu li.active a {color:#000;font-weight:400;} .fp-viewing-002 #menu li.active a span, .fp-viewing-003 #menu li.active a span, .fp-viewing-005 #menu li.active a span {background:#333;} .fp-viewing-002 #menu li.active a span:after, .fp-viewing-003 #menu li.active a span:after, .fp-viewing-005 #menu li.active a span:after {content:"";position:absolute;left:50%;top:50%;border-radius:50%;width:20px;height:20px;margin:-10px 0 0 -10px;background:none;border:1px solid #333;} /*-------------------------------------------------------------------------------------------- 각 섹션 배경 및 스타일 정의 --------------------------------------------------------------------------------------------*/ #section0,#section0_1,#section0_2,#section0_3,#section0_4,#section0_5,#section0_6,#section0_7,#section0_8,#section0_9,#section0_10,#section1,#section2,#section3,#section4,#section5,#section6,#section7,#section8,#section9,#section10 {padding: 0 0 0 0;background-size: cover;background-size: cover;} #section0{background-image: url(../../images/main/bg0.jpg);} #section1{background-image: url(../../images/main/bg1.jpg);} #section2{background-image: url(../../images/main/m_bg02.jpg);} #section3{background-image: url(../../images/main/m_bg03.jpg);} #section4{background-image: url(../../images/main/m_bg04.jpg);} #section5{background-image: url(../../images/main/bg5.jpg);} #section6{background-image: url(../../images/main/bg6.jpg);} #section7{background-image: url(../../images/main/bg7.jpg);} #section8{background-image: url(../../images/main/bg8.jpg);} #section9{background-image: url(../../images/main/bg9.jpg);} #section10{background-image: url(../images/main/bg10.jpg);} #section7, #section7 .fp-tableCell {display:block;height:127px !important;} .section {text-align:center;} /*-------------------------------------------------------------------------------------------- 배경이미지 가림막 --------------------------------------------------------------------------------------------*/ .bgBlock {position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;z-index:2;} .bB_B {background-color:rgba(0,0,0,0.5);} .bBB_hb50 {background-color:rgba(0,0,0,0.5);top:50%;height:50%;} .bB_W {background-color:rgba(255,255,255,0.4);} .bBW_hb50 {background-color:rgba(255,255,255,1);top:50%;height:50%;} .bBW_ht {background-color:rgba(255,255,255,.6);top:0;height:35%;} .bBW_hb {background-color:rgba(255,255,255,.6);top:65%;height:35%;} /*-------------------------------------------------------------------------------------------- 각 섹션 내용 부분 --------------------------------------------------------------------------------------------*/ .inner {position:relative;z-index:3;} /* ---------------------------------------------- /* * Mouse animate icon /* ---------------------------------------------- */ .mouse-icon {position: absolute;left: 50%;bottom: 80px;border: 2px solid #fff;border-radius: 16px;height: 50px;width: 30px;margin-left: -15px;display: block;z-index: 10;} .mouse-icon .wheel {-webkit-animation-name: drop;-webkit-animation-duration: 1s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 0s;-webkit-animation-iteration-count: infinite;-webkit-animation-play-state: running;animation-name: drop;animation-duration: 1s;animation-timing-function: linear;animation-delay: 0s;animation-iteration-count: infinite;animation-play-state: running;} .mouse-icon .wheel {position: relative;border-radius: 10px;background: #fff;width: 4px;height: 10px;top: 4px;margin-left: auto;margin-right: auto;} @-webkit-keyframes drop {0% { top:5px; opacity: 0;}30% { top:10px; opacity: 1;}100% { top:25px; opacity: 0;}} @keyframes drop {0% { top:5px; opacity: 0;}30% { top:10px; opacity: 1;}100% { top:25px; opacity: 0;}} /******************************************************************************************************* 메인 swiper 롤링 *******************************************************************************************************/ .mrolltextZone01 {position:relative;left:0px;top:0px;width:1200px;z-index:4;} .mrolltextZone02 {position:relative;left:0px;top:0px;width:1200px;z-index:4;} .mrolltextZone03 {position:relative;left:0px;top:0px;width:1200px;z-index:4;} .mrolltextZone04 {position:relative;left:0px;top:0px;width:1200px;z-index:4;} .mrolltextZone05 {position:relative;left:0px;top:0px;width:1200px;z-index:4;} .mrolltextZone06 {position:relative;left:0px;top:0px;width:1200px;z-index:4;} .mrolltextZone07 {position:relative;left:0px;top:0px;width:1200px;z-index:4;} .mrolltextZone08 {position:relative;left:0px;top:0px;width:1200px;z-index:4;} .mrolltextZone09 {position:relative;left:0px;top:0px;width:1200px;z-index:4;} .mrolltextBox01 {width:50%;float:left;margin-left:3em;} .mrolltextBox02 {width:50%;float:left;margin-left:3em;} .mrolltextBox03 {width:50%;float:left;margin-left:3em;} .mrolltextBox01 .slogan01, .mrolltextBox02 .slogan01, .mrolltextBox03 .slogan01 {font-size:64px;font-weight:500;color:#fff;letter-spacing: -0.025em;text-align:left;margin:0.2em 0 0.5em 0;font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif;line-height:1.1em;} .mrolltextBox01 .slogan01 span, .mrolltextBox02 .slogan01 span, .mrolltextBox03 .slogan01 span {color:#fff;} .mrolltextBox01 .slogan02, .mrolltextBox02 .slogan02, .mrolltextBox03 .slogan02 {width:100%;line-height:1.5em;font-weight:300;letter-spacing: -0.025em;text-align:left;font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif;font-size:20px;color:#ddd;word-break: keep-all;word-wrap: break-word;} .mrolltextBox01 .slogan01 {color:#fff;opacity:0;} .mrolltextBox02 .slogan01 {color:#fff;opacity:0;} .mrolltextBox03 .slogan01 {color:#fff;opacity:0;} .mrolltextBox01 .slogan02 {color:#fff;opacity:0;} .mrolltextBox02 .slogan02 {color:#fff;opacity:0;} .mrolltextBox03 .slogan02 {color:#fff;opacity:0;} .mrolltextBox01 .slogan03, .mrolltextBox02 .slogan03, .mrolltextBox03 .slogan03 {text-align:left;margin-top:2em;opacity:0;font-size:18px;} .mrolltextBox01 .slogan03 a, .mrolltextBox02 .slogan03 a, .mrolltextBox03 .slogan03 a {border:1px solid #fff;padding:0.5em 1.5em;color:#fff;border-radius:25px;} .mrolltextBox01 .slogan03 a:hover, .mrolltextBox02 .slogan03 a:hover, .mrolltextBox03 .slogan03 a:hover {border:1px solid #fff;color:rgba(191,30,46,1);background:#fff;font-weight:400;} .mrolltextBox01 .slogan04, .mrolltextBox02 .slogan04, .mrolltextBox03 .slogan04 {text-align:left;font-size:24px;font-weight:300;color:#ddd;} .mrolltextBox01 .slogan04 {color:#ffff00;opacity:0;} .mrolltextBox02 .slogan04 {color:#ffff00;opacity:0;} .mrolltextBox03 .slogan04 {color:#ffff00;opacity:0;} .swiper-pagination {/* margin-left:3em; */} .swiper-pagination-clickable .swiper-pagination-bullet {} .swiper-pagination-bullet {} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan04 {animation: mainovject 1s 0.2s both;animation-delay:1.2s;word-break: keep-all;word-wrap: break-word;} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan01 {animation: mainovject 1s 0.5s both;animation-delay:1.5s;word-break: keep-all;word-wrap: break-word;} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan02 {animation: mainovject 1s 0.8s both;animation-delay:1.8s;word-break: keep-all;word-wrap: break-word;} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan03 {animation: mainovject 1s 1.1s both;animation-delay:2.1s;word-break: keep-all;word-wrap: break-word;} .slick-track .slick-current.slick-active .slogan04 {animation: mainovject 1s 0.2s both;animation-delay:1.2s;} .slick-track .slick-current.slick-active .slogan01 {animation: mainovject 1s 0.5s both;animation-delay:1.5s;} .slick-track .slick-current.slick-active .slogan02 {animation: mainovject 1s 0.8s both;animation-delay:1.8s;} .slick-track .slick-current.slick-active .slogan03 {animation: mainovject 1s 1.1s both;animation-delay:2.1s;} @keyframes mainovject { 0% { opacity: 0; transform: translateY(40px);} 100% { opacity: 1; transform: translateY(0px);} } #swiper01,#swiper02,#swiper03,#swiper04,#swiper05,#swiper06,#swiper07,#swiper08,#swiper09,#swiper10 {height:100vh;background-size:cover;} #swiper01 {background-image: url(../../images/main_roll/bg0_1.jpg);} #swiper02 {background-image: url(../../images/main_roll/bg0_3.jpg);} #swiper03 {background-image: url(../../images/main_roll/bg0_2.jpg);} #swiper04 {background-image: url(../../images/main_roll/bg0_4.jpg);} #swiper05 {background-image: url(../../images/main_roll/bg0_5.jpg);} #swiper06 {background-image: url(../../images/main_roll/bg0_6.jpg);} #swiper07 {background-image: url(../../images/main_roll/bg0_7.jpg);} #swiper08 {background-image: url(../../images/main_roll/bg0_8.jpg);} #swiper09 {background-image: url(../../images/main_roll/bg0_9.jpg);} #swiper01 .bB_B {background:rgba(0,0,0,0.2)} .mrolling01,.mrolling02,.mrolling03,.mrolling04,.mrolling05,.mrolling06,.mrolling07,.mrolling08,.mrolling09,.mrolling10 { text-align:center; margin:0 auto; flex-shrink: 0; display: -webkit-box !important; display: -ms-flexbox !important; display: -webkit-flex !important; display: flex !important; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height:100vh;background-size:cover;overflow:hidden;} .mrolling01 {background-image: url(../../images/main_roll/bg0_1.jpg);} .mrolling02 {background-image: url(../../images/main_roll/bg0_2.jpg);} .mrolling03 {background-image: url(../../images/main_roll/bg0_3.jpg);} .mrolling04 {background-image: url(../../images/main_roll/bg0_4.jpg);} .mrolling05 {background-image: url(../../images/main_roll/bg0_5.jpg);} .mrolling06 {background-image: url(../../images/main_roll/bg0_6.jpg);} .mrolling07 {background-image: url(../../images/main_roll/bg0_7.jpg);} .mrolling08 {background-image: url(../../images/main_roll/bg0_8.jpg);} .mrolling09 {background-image: url(../../images/main_roll/bg0_9.jpg);} .swiper-button-next.swiper-button-white {top:90%;margin-top:-15px;width:19px;height:35px;right:8em;color:#fff;background:url(../../images/nav_right.png) no-repeat center;} .swiper-button-prev.swiper-button-white {top:90%;margin-top:-15px;width:19px;height:35px;left:8em;color:#fff;background:url(../../images/nav_left.png) no-repeat center;} .swiper-container {width: 100%;height: 100%;margin-left: auto;margin-right: auto;} .swiper-slide { text-align: center; font-size: 18px; /* 슬라이드 텍스트를 세로로 가운데 정렬 */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {position:relative;margin:0.5em 0;} .swiper-container-vertical>.swiper-pagination-bullets {top:80%;right:35px;} .swiper-pagination-bullet .show_hide { display:none; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .swiper-pagination-bullet-active .show_hide {display:inline-block;position:absolute;width:auto;right:15px;top:-4px;font-size:0.65em;line-height:1em;white-space: nowrap; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .swiper-button-next {right:30px;} .swiper-button-prev {left:30px;} .colors_width {color:#fff;} .colors_block {color:#000;} .colors_red {color:#ff0000;} .colors_blue {color:#0000ff;} #pop { width:480px; height:510px; position:absolute; top:80px; left:10px; text-align:center; border:1px solid #ddd; background:#333; z-index:900; } #myContainer .swiper-pagination {/* margin-left:3em; */} #myContainer .swiper-pagination-clickable .swiper-pagination-bullet {} #myContainer .swiper-pagination-bullet {} #myContainer .swiper-pagination { position: absolute; bottom: 1.5em !important; width: 1200px !important; left: 50% !important; margin: 0; transform:translate(-50%); } #myContainer .swiper-pagination-bullet { margin:0 1px !important; padding: 1px 0px; border-radius: 0; width: 30%; height: 32px; text-align: center; line-height:30px; font-size: 14px; color:#fff; opacity: 1; background: rgba(0,0,0,0.5); } #myContainer .swiper-pagination-bullet-active { color:#333; background: #fff;font-weight:500; } .mrolltextZone01 {margin-top:1em;} .mrolltextZone01 .imgoutbox {width:100%;} .mrolltextZone01 .maimg1 {display:inline-block;animation: ovjAni 1s 0.2s both;animation-delay:1.6s;width:30.5%;position:absolute;left:14%;top:0;z-index:5;} .mrolltextZone01 .maimg2 {display:inline-block;animation: ovjAni 1s 0.2s both;animation-delay:1.8s;width:33%;position:absolute;left:63.6%;top:2.4%;z-index:5;} .mrolltextZone01 .maimg3 {display:inline-block;animation: ovjAni 1s 0.2s both;animation-delay:2.0s;width:60%;position:absolute;left:22.5%;top:26.5%;} .mrolltextZone01 .maimg4 {display:inline-block;animation: ovjAni 1s 0.2s both;animation-delay:2.2s;width:43%;position:absolute;left:0;top:35%;z-index:5;} .mrolltextZone01 .maimg5 {display:inline-block;animation: ovjAni 1s 0.2s both;animation-delay:2.4s;width:35.5%;position:absolute;left:64.5%;top:52.8%;z-index:5;} .mrolltextZone01 .maimg6 {display:inline-block;animation: ovjAni 1s 0.2s both;animation-delay:2.6s;width:25%;position:absolute;left:42.5%;top:66%;z-index:5;} .mrolltextZone01 .maimg7 {display:inline-block;animation: ovjAni 1s 0.2s both;animation-delay:2.8s;width:26%;position:absolute;left:41.7%;top:22%;z-index:6;} @keyframes ovjAni { 0% { opacity: 0; transform: translateY(0px);} 100% { opacity: 1; transform: translateY(40px);} } .mrolltextZone01 .maimg1 a, .mrolltextZone01 .maimg2 a, .mrolltextZone01 .maimg3 a, .mrolltextZone01 .maimg4 a, .mrolltextZone01 .maimg5 a, .mrolltextZone01 .maimg6 a, .mrolltextZone01 .maimg7 a {position:relative;} .mrolltextZone01 .maimg1 a em, .mrolltextZone01 .maimg2 a em, .mrolltextZone01 .maimg3 a em, .mrolltextZone01 .maimg4 a em, .mrolltextZone01 .maimg5 a em, .mrolltextZone01 .maimg6 a em, .mrolltextZone01 .maimg7 a em {display:none;} .mrolltextZone01 .maimg1 a em, .mrolltextZone01 .maimg2 a em, .mrolltextZone01 .maimg3 a em, .mrolltextZone01 .maimg4 a em, .mrolltextZone01 .maimg6 a em, .mrolltextZone01 .maimg7 a em {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:160px;font-style:normal;font-weight:bold;background:#fff;padding:0.5em 1em;z-index:7;border-radius:50px;} .mrolltextZone01 .maimg5 a em {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:160px;font-style:normal;font-weight:bold;background:#fff;padding:0.5em 1em;z-index:7;border-radius:50px;} .mrolltextZone01 .maimg1 a:hover em, .mrolltextZone01 .maimg2 a:hover em, .mrolltextZone01 .maimg3 a:hover em, .mrolltextZone01 .maimg4 a:hover em, .mrolltextZone01 .maimg5 a:hover em, .mrolltextZone01 .maimg6 a:hover em, .mrolltextZone01 .maimg7 a:hover em {display:inline-block;} .mrolltextZone01 .maimg1 a img, .mrolltextZone01 .maimg2 a img, .mrolltextZone01 .maimg3 a img, .mrolltextZone01 .maimg4 a img, .mrolltextZone01 .maimg5 a img, .mrolltextZone01 .maimg6 a img, .mrolltextZone01 .maimg7 a img { transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .mrolltextZone01 .maimg1 a:hover img, .mrolltextZone01 .maimg2 a:hover img, .mrolltextZone01 .maimg3 a:hover img, .mrolltextZone01 .maimg4 a:hover img, .mrolltextZone01 .maimg5 a:hover img, .mrolltextZone01 .maimg6 a:hover img, .mrolltextZone01 .maimg7 a:hover img { -moz-transform: scale(1.2) rotate(0deg); -webkit-transform: scale(1.2) rotate(0deg); -o-transform: scale(1.2) rotate(0deg); -ms-transform: scale(1.2) rotate(0deg); transform: scale(1.2) rotate(0deg); } /*-------------------------------------------------------------------------------------------- 롤링페이지 링크버튼 설정 --------------------------------------------------------------------------------------------*/ .main_btnzone {text-align:center;} .main_btnzone a {padding:0.5em 1em;font-size:0.75em;} .main_btnzone a:link, .main_btnzone a:active, .main_btnzone a:visited {border:1px solid #ddd;background:#fff; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } .main_btnzone a:hover {border:1px solid #003399;background:#003399;color:#fff; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; } /********************** swiper 설정 **********************/ .swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; } .swiper-slide { text-align: center; font-size: 18px; background: #000; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow:hidden; } .swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; } .swiper-slide { background-size: cover; background-position: center; } .gallery-thumbs { height: 20%; box-sizing: border-box; padding: 10px 0; } .gallery-thumbs .swiper-slide { width: 25%; height: 100%; opacity: 0.4; } .gallery-thumbs .swiper-slide-active { opacity: 1; } /*-------------------------------------------------------------------------------------------- swiper 수정 --------------------------------------------------------------------------------------------*/ .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {display:none;} /******************************************************************************************************* 최신글 스타일 설정 *******************************************************************************************************/ .basic_li i {font-size:0.75em;margin-left:5px;} /**************************************************************************************************************************************** 메인 영역 설정 ****************************************************************************************************************************************/ .section .container h1 {font-size:2em;} #section1 h1 {color:#000;} #section2 h1 {color:#000;} #section3 h1 {color:#000;} #section4 h1 {color:#fff;} #section5 h1 {color:#000;} #section6 h1 {color:#fff;} #section7 h1 {color:#000;} .basic_li {position:relative;display:inline-block;float:left;width:100%;} .basic_li a {float:left;width:auto !important;} .basic_li .new_icon {float:left;line-height:1em;background:#ff1a21;color:#fff;margin:10px 0 0 3px;border-radius:2px;font-size:12px;padding:2px 3px;} .basic_li .lt_info {float:right;} .basic_li:hover {background:#f9f9f9;} .outbox {position:relative;z-index:3;} section::before, section::after { position: absolute; content: ''; pointer-events: none; overflow: hidden; } /*-------------------------------------------------------------------------------------------- Section 1 : --------------------------------------------------------------------------------------------*/ .wrapper.style1 { position:relative; display:block; width:100%; background:url(../../images/main/m_bg01.jpg) fixed center; background-size:cover; padding:4em 0; } .style1 .container {text-align:center;} .style1 .container h2 {margin:0 0 1.5em 0;text-align:center;} .style1 .container h2 span {display:block;font-weight:300;font-size:0.65em;} .style1 .container h2 strong {} .main_slogan {font-size:34px;font-weight:600;color:#fff;} /*-------------------------------------------------------------------------------------------- Section 2 : --------------------------------------------------------------------------------------------*/ .wrapper.style2 { position:relative; display:block; width:100%; background:url(../../images/main/m_bg02.jpg) no-repeat center; background-size:cover; /* background:#e9e9e9; */ padding:4em 0; } .style2 .container {text-align:center;} .style2 .container h2 {margin:0 0 1.5em 0;text-align:center;color:#333;} .style2 .container h2 span {display:block;font-weight:300;font-size:0.65em;} .style2 .container h2 strong {} .mlm_group {width:50%;float:right;} .mlm_group ul {display:inline-block;} .mlm_group ul li {display:inline-block;width:100%;margin-bottom:5px;} .mlm_group ul li a {display:inline-block;width:100%;border:2px solid #005484;background:#fff;color:#005484;padding:1em; } .mlm_group ul li a span, .mlm_group ul li a i {font-size:20px;line-height:1.5em;} .mlm_group ul li a span {display:inline-block;float:left;} .mlm_group ul li a i {display:inline-block;float:right;} .mlm_group ul li a:hover {background:#005484;color:#fff;} /*-------------------------------------------------------------------------------------------- Section 3 --------------------------------------------------------------------------------------------*/ /* 여백 */ .margin_top_2em {margin-top:2em;} .padding_right_5px {padding-right:10px;} .padding_left_5px {padding-left:10px;} /* 기본설정 */ .wrapper.style3 { position:relative; display:block; width:100%; background:url(../../images/main/m_bg03.jpg) fixed center; background-size:cover; padding:4em 0; } .style3 .container h2 {margin:0 0 1.5em 0;text-align:center;} .mbtnBox {text-align:center;} .mbtnBox .mbtset {position:relative;display:inline-block;float:left;width:100%;padding:5px;} .mbtnBox .mbtset a {display:inline-block;float:left;width:100%;border:2px solid #005484;color:#005484;background:#fff;overflow:hidden;} .mbtnBox .mbtset a:hover {background:#005484;color:#fff;} .mbtnBox .mbtset a .mbt_imgbox {display:inline-block;float:left;width:30%;height:100%;} .mbtnBox .mbtset a .mbt_textbox {position:relative;display:inline-block;float:right;width:70%;height:128px;} .mbtnBox .mbtset a .mbt_textbox .mbt_intextbox {position:absolute;left:0;top:50%;transform: translateY(-50%);display:inline-block;width:100%;line-height:1.3em;padding:0 10%;} .style3 .mbtnBox h2 {position:relative;display:inline-block;float:right;width:100%;height:128px;margin:0;} .style3 .mbtnBox h2 img {vertical-align:middle;} .style3 .mbtnBox h2 span {position:absolute;left:0;top:50%;transform: translateY(-50%);display:inline-block;width:100%;line-height:1.3em;padding:0 10%;} /*-------------------------------------------------------------------------------------------- Section 4 --------------------------------------------------------------------------------------------*/ /* 여백 */ .margin_right_10px {margin-right:10px;} /* 기본설정 */ .wrapper.style4 { position:relative; display:block; width:100%; background:url(../../images/main/m_bg04.jpg) fixed center; background-size:cover; padding:4em 0; } .style4 .container h2 {margin:0 0 1.5em 0;text-align:center;} .golink_group .cu_inbox {position:relative;border:1px solid #ddd;padding:1em 1.3em;background:#fff;} .golink_group .cu_inbox h4 {font-weight:400;font-size:1.2em;} .golink_group .cu_inbox2 a {position:relative;border:1px solid #ddd;padding:1em 1em 4em;background:#fff;} .golink_group .cu_inbox2 h4 {font-weight:400;font-size:1.2em;margin-bottom:0.5em;} .golink_group .cu_inbox3 {position:relative;min-height:214px;border:1px solid #ddd;padding:0;background:#fff;overflow:hidden;} .quick_linkbox {} .quick_linkbox a {border:1px solid #ddd;background:#fff;padding:2em 0;} /*-------------------------------------------------------------------------------------------- Section 5 : 커뮤니티 --------------------------------------------------------------------------------------------*/ .wrapper.style5 { display:inline-block; width:100%; padding:3em 0; background:#f9f9f9; } .style5 h2 {margin:0 0 1.5em 0;text-align:center;} .style5 p {text-align:center;color:#333;margin-bottom:2em;line-height:1.5em;} /*-------------------------------------------------------------------------------------------- Section 6 : 고객센터 --------------------------------------------------------------------------------------------*/ /******************************************************************************************************* 기타 설정 ********************************************************************************************************/ /*-------------------------------------------------------------------------------------------- 유튜브 youtube --------------------------------------------------------------------------------------------*/ .youtube { position: relative; width: 100%; padding-bottom: 56.25%; } .youtube iframe { position: absolute; width: 100%; height: 100%; } .mpb_align p a {display:inline-block;} /*-------------------------------------------------------------------------------------------- 유튜브 youtube 플레이 버튼 생성 --------------------------------------------------------------------------------------------*/ .mmbox {position:relative;} .mmbox a:link .blackbox {content: "";position:absolute;left:0;top:0;display:none;} .mmbox a:hover .blackbox {display:inline-block;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:10;} .mmbox a:hover .upblackbox {display:none;} .mmbox a img {width:100%;height:auto;} .youtube_btn {position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin-left: -34px; margin-top: -24px; -moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1); z-index: 63;} .youtube_btn svg {height: 100%; left: 0; position: absolute; top: 0; width: 100%;} .blackbox:hover .youtube_btn .ytp-large-play-button-bg { -moz-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1); -webkit-transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1); transition: fill .1s cubic-bezier(0.0,0.0,0.2,1),fill-opacity .1s cubic-bezier(0.0,0.0,0.2,1); fill: #f00; fill-opacity: 1; } /******************************************************************************************************* 영카트 최신제품 ********************************************************************************************************/ .sct_img {overflow:hidden;padding:2px;} .sct_img a {display:block;padding:0;background:#fff;border-radius:0px;} .sct_img a img {width:100%;height:auto !important;} .sct_txt {padding:2px;} .sct_txt a {display:block;line-height:1.5em;font-weight:400;padding:0 0.5em;} .sct_cost {text-align:right;color:#fff;font-weight:600;padding:0 1em;line-height:1.5em;} /******************************************************************************************************* 팝업 ********************************************************************************************************/ .hd_pops_footer .hd_pops_close {position:relative;} /******************************************************************************************************* 반응형 설정 ********************************************************************************************************/ @media (max-width:1605px) { .swiper-button-next.swiper-button-white {right:30px;} .swiper-button-prev.swiper-button-white {left:30px;} #menu li a u {display:none;} } @media (max-width:1320px) { .swiper-button-next.swiper-button-white, .swiper-button-prev.swiper-button-white {display:none;} } @media (max-width:1280px) { .mimgbox {padding:1.6em 0;} .mbtn_group_box a {padding:0.5em 0 0.2em 0;} .mbtn_h2box {width:100%;} .style3 .mbtnBox h2 {} .style3 .mbtnBox h2 img {width:44px;} .mbtnBox .mbtset a {position:relative;overflow:auto;} .mbtnBox .mbtset a .mbt_textbox {position:static;width:70%;height:100%;} .mbtnBox .mbtset a .mbt_textbox .mbt_intextbox {left:30%;width:70%;font-size:16px;} } @media (max-width:1215px) { .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {width:100% !important;} .swiper-pagination-bullet {width:15%;} } @media (max-width:1215px) { } /* 화면 너비 0 ~ 1200px */ @media (max-width:1200px) { #myContainer .swiper-pagination {width:100% !important;} #menu {display:none;} } @media (max-width:1070px) { .dan-6 {width:100%;} } @media (max-width:991px) { .style3 .danalink,.style3 .danalink2 {padding:0 0;} } @media (max-width:948px) { .hd_pops {left:0 !important;top:0 !important;} } @media (max-width:936px) { } @media (max-width:901px) { .dan60, .dan40 {width:100%;} } @media (max-width:890px) { .main_slogan {font-size:24px;word-break: keep-all;word-wrap: break-word;} } @media (max-width:850px) { .mlm_group {width:100%;} } @media (max-width:840px) { .mouse-icon {display:none;} #myContainer .swiper-pagination-bullet {width:100%;} .style1 .container h2 {margin:0 0 1.5em 0;} .dan50 {width:100%;} .padding_right_5px {padding-right:0;margin-bottom:10px;} .padding_left_5px {padding-left:0;} .margin_right_10px {margin-right:0;} .style2 .danalink {padding:0;} .dan06 {width:33.333333%} #section7, #section7 .fp-tableCell {height: 250px !important;} } /* 화면 너비 0 ~ 768px */ @media (max-width:768px) { } @media (max-width:736px) { .swiper-pagination-bullet {width:25%;margin-bottom:2px !important;} .dan03, .dan02 {width:100%;} } @media (max-width:726px) { .dan05 {width:50%;} .dan-4 {width:100%;} } @media (max-width:690px) { } @media (max-width:600px) { .notice_title_box {width:100%;height:auto;padding-bottom:0.5em;} .notice_title_box .nt_in h4 {display:inline-block;} .notice_title_box .nt_in span {display:inline-block;} .golink_group .cu_inbox3 {min-height:auto;} .notice_list_box {width:100%;} .notice_title_box .nt_in a.the_more {font-size:1.2em;padding-bottom:3px;margin-left:1em;} } @media (max-width:510px) { .mbtnBox .mbtset a .mbt_textbox .mbt_intextbox {font-size:16px;} } @media (max-width:480px) { .basic_li .lt_info {display:none;} .style2 .danalink .dan03 {width:100%;} .hd_pops {width:100%;} .hd_pops_con {width:100% !important;height:auto !important;} .dan06 {width:50%} .latestBox {margin:0;} } @media (max-width:414px) { .mlm_group ul li a span, .mlm_group ul li a i {font-size:15px;} #footer {padding:1em 20px;} #footer .logo {height:40px !important;background-size:150px !important;} } @media (max-width:360px) { .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {font-size:14px;height:24px;} } @media (max-width:320px) { .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {font-size:12px;height:20px;} .mbtnBox .mbtset a .mbt_textbox .mbt_intextbox {line-height:1em;padding:0 5%;font-size:14px;} .mlm_group ul li a span {width:180px;line-height:1em;font-size:15px;} .mlm_group ul li a {padding:0.5em 1em;} .ta_center a p img {width:30%;} #footer .copyright {margin:0;font-size:12px;} }