/******************************************************************************************************* 메인 swiper 롤링 *******************************************************************************************************/ .mrolltextZone01, .mrolltextZone02, .mrolltextZone03, .mrolltextZone04, .mrolltextZone05, .mrolltextZone06, .mrolltextZone07, .mrolltextZone08, .mrolltextZone09 {position:relative;left:0px;top:0px;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;} .mrolltextBox01 .slogan01 {text-align:center;} .mrolltextBox01 .slogan02 {} .mrolltextBox01 .slogan03 {} .mrolltextBox01 .slogan04 {} .mrolltextBox01 .slogan04 a {border:1px solid #fff;padding:0.5em 1.5em;color:#fff;border-radius:25px;} .mrolltextBox01 .slogan04 a:hover {border:1px solid #fff;color:rgba(191,30,46,1);background:#fff;} .mrolltextBox02 .slogan01 {text-align:center;} .mrolltextBox02 .slogan02 {} .mrolltextBox02 .slogan03 {word-break: keep-all;word-wrap: break-word;} .mrolltextBox02 .slogan04 {} .mrolltextBox02 .slogan04 a {border:1px solid #fff;padding:0.5em 1.5em;color:#fff;border-radius:25px;} .mrolltextBox02 .slogan04 a:hover {border:1px solid #fff;color:rgba(191,30,46,1);background:#fff;} .mrolltextBox03 .slogan01 {text-align:center;} .mrolltextBox03 .slogan02 {} .mrolltextBox03 .slogan03 {} .mrolltextBox03 .slogan04 {} .mrolltextBox03 .slogan04 a {border:1px solid #fff;padding:0.5em 1.5em;color:#fff;border-radius:25px;} .mrolltextBox03 .slogan04 a:hover {border:1px solid #fff;color:rgba(191,30,46,1);background:#fff;} .mrolltextBox04 .slogan01 {text-align:center;} .mrolltextBox04 .slogan02 {} .mrolltextBox04 .slogan03 {} .mrolltextBox04 .slogan04 {} .mrolltextBox04 .slogan04 a {border:1px solid #fff;padding:0.5em 1.5em;color:#fff;border-radius:25px;} .mrolltextBox04 .slogan04 a:hover {border:1px solid #fff;color:rgba(191,30,46,1);background:#fff;} .slogan01, .slogan02, .slogan03, .slogan04 {position:relative;opacity:0;word-break: keep-all;word-wrap: break-word;} .slogan01 {font-size:40px;font-weight:300;color:var(--swiper-text-w);} .slogan02 {font-size:2.8em;font-weight:700;color:var(--swiper-text-w);letter-spacing: -0.025em;line-height:1.5em;margin:0px;} .slogan03 {font-size:2.3em;font-weight:700;color:var(--swiper-text-w);letter-spacing: -0.025em;line-height:1.5em;margin:0px;} .slogan04 {font-size:18px;font-weight:300;color:var(--swiper-text-w);} /* 텍스트 애니메이션 */ .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);} */ /* 백그라운드 이미지 */ #section4 #swiper01, #section4 #swiper02, #section4 #swiper03, #section4 #swiper04, #section4 #swiper05, #section4 #swiper06, #section4 #swiper07, #section4 #swiper08, #section4 #swiper09, #section4 #swiper10 {height:auto;border:10px solid #fff;} #section4 #swiper01 {background-image: url(../../../images/main_roll/section4_01.jpg);} #section4 #swiper02 {background-image: url(../../../images/main_roll/section4_02.jpg);} #section4 #swiper03 {background-image: url(../../../images/main_roll/section4_03.jpg);} #section4 #swiper04 {background-image: url(../../../images/main_roll/section4_04.jpg);} #section4 #swiper05 {background-image: url(../../../images/main_roll/section4_05.jpg);} #section4 #swiper06 {background-image: url(../../../images/main_roll/section4_06.jpg);} #section4 #swiper07 {background-image: url(../../../images/main_roll/section4_07.jpg);} #section4 #swiper08 {background-image: url(../../../images/main_roll/section4_08.jpg);} #section4 #swiper09 {background-image: url(../../../images/main_roll/section4_09.jpg);} #section4 #swiper10 {background-image: url(../../../images/main_roll/section4_10.jpg);} #swiper01 .bB_B {background:rgba(0,0,0,0.5)} .main_rollimg {position:absolute;width:100vw;height:100vh;z-index:2;} .main_rollimg img {width:100vw;height:100vh;transform: scale(1.2)} .main_rollimgm {position:absolute;height:100vh;z-index:2;} .main_rollimgm img {height:100vh;transform: scale(1.2)} .swiper-slide-active .main_rollimg img {animation: mainroll 3s 0.5s both;} .swiper-slide-active .main_rollimgm img {animation: mainroll 3s 0.5s both;} /* .swiper-wrapper .swiper-slide.swiper-slide-active#swiper01 {animation: mainroll 3s 0.5s both;} .swiper-wrapper .swiper-slide.swiper-slide-active#swiper02 {animation: mainroll 3s 0.5s both;} .swiper-wrapper .swiper-slide.swiper-slide-active#swiper03 {animation: mainroll 3s 0.5s both;} .swiper-wrapper .swiper-slide.swiper-slide-active#swiper04 {animation: mainroll 3s 0.5s both;} */ @keyframes mainroll { 0% { transform: scale(1) } 100% { transform: scale(1.2) } } @media (min-width:841px) { .main_rollimgm {display:none;} } @media (max-width:840px) { .main_rollimg {display:none;} .main_rollimgm {display:block;} } .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/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/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;} .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 {position:relative;} #main_roll .swiper-pagination {/* margin-left:3em; */} #main_roll .swiper-pagination-clickable .swiper-pagination-bullet {background:var(--swiper-pagination);border-radius:10px;height:8px; 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: 2em !important; width: 1200px !important; left: 50% !important; margin: 0; transform:translate(-50%); } #main_roll .swiper-pagination-bullet-active {color:var(--basic-font-color);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; } .roll_textbox {display:inline-block;background:rgba(0,0,0,.5);padding:1em 3em;border-radius:10px;} .roll_textbox li {display:block;clear:both;text-align:left;} .roll_textbox li dl {display:inline-block;} .roll_textbox li dl dt {display:inline-block;background:var(--swiper-text-w);color:var(--swiper-text-basic);border-radius:50px;padding:0 1em;margin-right:10px;min-width:105px;text-align:center;} .roll_textbox li dl dd {display:inline-block;} @media (max-width:840px) { .slogan01 {} .slogan02 {} .slogan03 {line-height:1.5em;} .slogan04 {} .slogan02, .slogan03 {font-size:2em;} .roll_textbox li dl dt, .roll_textbox li dl dd {font-size:16px;} } @media (max-width:640px) { .roll_textbox {padding:1em;} .roll_textbox li dl dt {min-width:90px;} } @media (max-width:540px) { .slogan02, .slogan03 {font-size:1.6em;} } @media (max-width:280px) { .slogan02, .slogan03 {font-size:1em;} } /*-------------------------------------------------------------------------------------------- 공지사항 티커 : --------------------------------------------------------------------------------------------*/ /* 기본설정 */ .wrapper.notice_ticker { position:absolute; bottom:0px; display:block; width:100%; /*background:url(../../images/main_normal/m_bg04.jpg) fixed center;*/ background-color:rgba(0,0,0,0.4); background-size:cover; padding:1em 0; z-index:10; } .notice_ticker .container h4 {display:inline-block;float:left;margin:0;width:14%;height:35px;line-height:35px;color:#f8b412;font-size:28px;} .notice_ticker .container h4 a {color:#f8b412;} .notice_ticker .container h4 a:hover {color:#ffcc00;} .notice_ticker .container .lazy {display:inline-block;float:left;width:85%;} @media (max-width:840px) { .notice_ticker .container h4, .slick-slide a {font-size:20px;} .new_icon {top:10px;} } @media (max-width:640px) { .notice_ticker .container h4, .slick-slide a {font-size:16px;} .notice_ticker .container h4 {min-width:60px;} .notice_ticker .container .lazy {width:auto;} .new_icon {top:8px;left:5px;font-size:10px;} } /* ---------------------------------------------- /* * Mouse animate icon /* ---------------------------------------------- */ .mouse-icon {position: absolute;left: 50%;bottom: 120px;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;}} @media (max-width:840px) { .mouse-icon {display:none;} } /* ---------------------------------------------- /* * 영상 풀화면(전체영상) /* ---------------------------------------------- */ video.slider-video {position: absolute; left:50%; top:50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-size: cover; } /*-------------------------------------------------------------------------------------------- 기타설정 --------------------------------------------------------------------------------------------*/ .colors_width {color:#fff;} .colors_block {color:#000;} .colors_red {color:#ff0000;} .colors_blue {color:#0000ff;}