/******************************************************************************************************* 메인 swiper 롤링 *******************************************************************************************************/ .mrolltextZone01, .mrolltextZone02, .mrolltextZone03, .mrolltextZone04, .mrolltextZone05, .mrolltextZone06, .mrolltextZone07, .mrolltextZone08, .mrolltextZone09 {position:relative;left:0px;top:100px;width:1200px;z-index:4;} .mrolltextBox01 {width:100%;float:left;margin-left:0;} .mrolltextBox02 {width:100%;float:left;margin-left:0;} .mrolltextBox03 {width:100%;float:left;margin-left:0;} .mrolltextBox04 {width:100%;float:left;margin-left:0;} .mrolltextBox05 {width:100%;float:left;margin-left:0;} .mrolltextBox06 {width:100%;float:left;margin-left:0;} .mrolltextBox01 .slogan01 {} .mrolltextBox01 .slogan02 {color:#b5e901;} .mrolltextBox01 .slogan03 {} .mrolltextBox01 .slogan04 {} .mrolltextBox01 .slogan04 a {} .mrolltextBox01 .slogan04 a:hover {} .mrolltextBox02 .slogan01 {} .mrolltextBox02 .slogan02 {color:#b5e901;} .mrolltextBox02 .slogan03 {} .mrolltextBox02 .slogan04 {} .mrolltextBox02 .slogan04 a {} .mrolltextBox02 .slogan04 a:hover {} .mrolltextBox03 .slogan01 {} .mrolltextBox03 .slogan02 {color:#b5e901;} .mrolltextBox03 .slogan03 {} .mrolltextBox03 .slogan04 {} .mrolltextBox03 .slogan04 a {} .mrolltextBox03 .slogan04 a:hover {} .mrolltextBox04 .slogan01 {} .mrolltextBox04 .slogan02 {color:#b5e901;} .mrolltextBox04 .slogan03 {} .mrolltextBox04 .slogan04 {} .mrolltextBox04 .slogan04 a {} .mrolltextBox04 .slogan04 a:hover {} .mrolltextBox05 .slogan01 {} .mrolltextBox05 .slogan02 {color:#b5e901;} .mrolltextBox05 .slogan03 {} .mrolltextBox05 .slogan04 {} .mrolltextBox05 .slogan04 a {} .mrolltextBox05 .slogan04 a:hover {} .mrolltextBox06 .slogan01 {} .mrolltextBox06 .slogan02 {color:#b5e901;} .mrolltextBox06 .slogan03 {} .mrolltextBox06 .slogan04 {} .mrolltextBox06 .slogan04 a {} .mrolltextBox06 .slogan04 a:hover {} .slogan01, .slogan02, .slogan03, .slogan04 {position:relative;/* opacity:0; */word-break: keep-all;word-wrap: break-word;} .slogan01 {font-size:20px;font-weight:300;color:#fff;text-align:center;} .slogan02 {font-size:38px;font-weight:600;color:#fff;letter-spacing: -0.025em;line-height:1.5em;} .slogan03 {font-size:24px;font-weight:400;color:#fff;letter-spacing: -0.025em;line-height:1.5em;margin:1em 0;} .slogan04 {font-size:16px;font-weight:300;color:#fff;line-height:1.5em;} .slogan04 span {display:block;position:relative;} .slogan04 span.division {padding-top:0.5em;margin-top:0.5em;} .slogan04 span.division:before {content:"";position:absolute;top:0px;left:50%;width:50%;transform: translate(-50%, -50%);border-top:1px solid #fff;} .slogan04 a {display:inline-block;border:1px solid #fff;padding:0.5em 1.5em;margin-top:2em;color:#fff;border-radius:25px;clear:both;} .slogan04 a:hover {border:1px solid #fff;color:#136638;background:#fff;} /* 텍스트 애니메이션 */ /* .swiper-wrapper .swiper-slide.swiper-slide-active .slogan01 {animation: mainovject 1s 0.2s both;animation-delay:1.2s;} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan02 {animation: mainovject 1s 0.5s both;animation-delay:1.5s;} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan03 {animation: mainovject 1s 0.8s both;animation-delay:1.8s;} .swiper-wrapper .swiper-slide.swiper-slide-active .slogan04 {animation: mainovject 1s 1.1s both;animation-delay:2.1s;} .slick-track .slick-current.slick-active .slogan01 {animation: mainovject 1s 0.2s both;animation-delay:1.2s;} .slick-track .slick-current.slick-active .slogan02 {animation: mainovject 1s 0.5s both;animation-delay:1.5s;} .slick-track .slick-current.slick-active .slogan03 {animation: mainovject 1s 0.8s both;animation-delay:1.8s;} .slick-track .slick-current.slick-active .slogan04 {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;} #swiper01 {background-image: url(../../../images/main_roll/bg0_1.jpg);} #swiper02 {background-image: url(../../../images/main_roll/bg0_2.jpg);} #swiper03 {background-image: url(../../../images/main_roll/bg0_3.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.5)} .swiper-button-next {right:30px;} .swiper-button-prev {left:30px;} .swiper-button-next.swiper-button-white {margin-top:-15px;width:19px;height:35px;color:#fff;background:url(../../../images/icon/nav_right_w.png) no-repeat center;} .swiper-button-prev.swiper-button-white {margin-top:-15px;width:19px;height:35px;color:#fff;background:url(../../../images/icon/nav_left_w.png) no-repeat center;} /* 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;} .swiper-container {width: 100%;height: 100%;margin-left: auto;margin-right: auto;background-color:#0a4d28;} .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 추가 --------------------------------------------------------------------------------------------*/ .swiper-slide { overflow:hidden; background-size: cover; background-position: 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; } #main_roll .swiper-pagination {/* margin-left:3em; */} #main_roll .swiper-pagination-clickable .swiper-pagination-bullet {background:#73b800;border-radius:10px; 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_roll .swiper-pagination-bullet {} #main_roll .swiper-pagination { position: absolute; bottom: 1em !important; width: 1200px !important; left: 50% !important; margin: 0; transform:translate(-50%); } #main_roll .swiper-pagination-bullet-active {color:#333;width:60px;border-radius:10px; 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; } /* ---------------------------------------------- /* * Mouse animate icon /* ---------------------------------------------- */ .mouse-icon {position: absolute;left: 50%;bottom: 60px;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;}} /*-------------------------------------------------------------------------------------------- 기타설정 --------------------------------------------------------------------------------------------*/ .colors_width {color:#fff;} .colors_block {color:#000;} .colors_red {color:#ff0000;} .colors_blue {color:#0000ff;} /* swiper 깜박임 제거 */ .ms_titlebox {position:absolute;left:50%;top:27%;transform: translate(-50%, -50%);text-align:center;z-index:10; } .ms_titlebox .top_title {color:#fff;font-size:1rem;line-height:1.5em;word-break: keep-all;word-wrap: break-word;margin-bottom:.5rem;} .ms_titlebox .top_title span {font-weight:400;} .ms_titlebox .top_title .mtcolor1 {color:#ffff00;} .ms_titlebox .top_title .mtcolor2 {color:#33ccff;} .ms_titlebox .top_title .mtcolor3 {color:#ff99ff;} .ms_titlebox .title {color:#64fda5;font-size:3rem;font-weight:800;line-height:1.2em;letter-spacing:-0.05em;margin:0em 0 0.3em;word-break: keep-all;word-wrap: break-word;} .ms_titlebox .date {color:#fff;font-size:21px;line-height:1.5em;margin:1em 0; padding:.5em 0; border-top:1px solid rgba(255,255,255,0.5);border-bottom:1px solid rgba(255,255,255,0.5);} .ms_titlebox .date .date1 strong {display:inline-block;background-color:rgba(0,0,0,.5);font-size:0.75em;padding:0px 10px;border-radius:5px;} .ms_titlebox .ectdata_group {color:#fff;font-size:16px;line-height:1.5em;} .ms_titlebox .ectdata_group .ect_title {background:#e9e9e9;color:#000;padding:0em 0.5em;margin-right:0.5em;border-radius:3px;} .ms_titlebox .ectdata_group .etcdata {margin-right:1em;word-break: keep-all;word-wrap: break-word;} .ms_titlebox .ectdata_group .ect_title {float:left;} .ms_titlebox .ectdata_group .etcdata.logo1 {float:left;width:88px;height:24px;text-indent:-5000px;overflow:hidden;background:url(../../../images/main/logo01.png) no-repeat center;background-size:100% 100%;} .ms_titlebox .ectdata_group .etcdata.logo2 {float:left;width:44px;height:24px;text-indent:-5000px;overflow:hidden;background:url(../../../images/main/logo02.png) no-repeat center;background-size:100% 100%;} @media (max-width:840px) { .ms_titlebox .title {font-size:7vw;} .ms_titlebox .top_title {font-size:3vw;} .ms_titlebox .date {font-size:3vw;} }