* { font-family: 'Noto Sans KR', 'sans-serif'; } body { margin: 0 auto; overflow-x: hidden; } ul { list-style: none; padding: 0; } a:visited, a:link { text-decoration: none; color: black; } h1, h2, h3, h4, h5, p { margin: 0; } div, section, nav, main, footer, span { margin: 0; padding: 0; box-sizing: border-box; } .hide { display: none !important; } /*notice효과들*/ .notice-fade-in { transform: translateY(0px); opacity: 1; } .notice-fade-out { transform: translateY(80px); opacity: 0; } /*notice banner 효과들*/ .notice-banner-animation0-off { transform: translateY(150px); opacity: 0; } .notice-banner-animation1-off { transform: translateY(200px); opacity: 0; } .notice-banner-animation2-off { transform: translateY(250px); opacity: 0; } .notice-banner-animation0-on { transform: translateY(0px); transition: all 1s; opacity: 1; } .notice-banner-animation1-on { transform: translateY(0px); transition: all 1s; opacity: 1; } .notice-banner-animation2-on { transform: translateY(0px); transition: all 1s; opacity: 1; } /*bot slider효과들*/ .bot-slider-fade-in { transform: translateY(0px); opacity: 1; } .bot-slider-fade-out { transform: translateY(200px); opacity: 0; } .fixed{ position: fixed; top: 0; } .dot-color { background-color: #7CE063 !important; } .cusor-p { cursor: pointer; } .nav { width: 100%; height: auto; display: flex; flex-flow: column nowrap; align-items: center; justify-content: flex-start; text-align: center; padding-top: 15px; overflow: hidden; background-color: #fff; z-index: 999; } .nav .login-sec { width: 100%; height: auto; padding-bottom: 10px; } .nav .login-sec .login-menu { width: 100%; max-width: 1080px; margin: 0 auto; display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; font-size: 16px; font-weight: 600; color: #000; } .nav .login-sec .login-menu li:nth-child(2) { margin-left: 8px; margin-right: 8px; } .nav .logo-sec { width: auto; max-width: 1080px; height: auto; } .nav .logo-sec .nav-logo{ width: 355px; height: auto; } .nav .logo-sec .nav-logo-m { display: none; } .nav .gnb { width: 100%; max-width: 1150px; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; margin-top: 15px; } .nav .gnb .main-menu { display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; font-size: 22px; font-weight: 600; margin-bottom: 20px; flex: 5; } .nav .gnb .gnb-sns { display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; margin-bottom: 20px; flex: 1; } .nav .gnb .gnb-sns li { width: 28px; height: 28px; transition: all 0.2s; } .nav .gnb-line{ width: 100%; height: 5px; background: url("./main/main/line.png") no-repeat center; background-size: cover; } .nav .toggle-btn { display: none; } .m-menu-box { transition: all 1s; } /*********************************************************************/ #main { width: 100%; height: auto; margin: 0; padding: 0; } #main .slider-sec{ width: 100%; height: auto; } #main .slider-sec .slider-outer{ width: 100%; height: auto; min-height: 240px; position: relative; overflow: hidden; } #main .notice-sec { width: 100%; height: auto; display: flex; flex-flow: column; align-items: center; margin-top: 50px; } #main .notice-sec .notice { width: 100%; max-width: 1080px; display: flex; flex-flow: row nowrap; align-items: center; margin-bottom: 20px; transition: all 1s; } #main .notice-sec .notice h4 { font-size: 22px; font-weight: 800; flex: 1; } #main .notice-sec .notice .notice-roll-box{ width: 900px; height: 24px; font-size: 18px; font-weight: 700; margin-left: 25px; position: relative; overflow: hidden; } #main .notice-sec .notice .notice-roll-box .notice-roll{ width: 100%; height: auto; margin: 0; animation: noticeRoll 5s infinite; } @keyframes noticeRoll { 0% { transform: translateY(0px);} 25% { transform: translateY(-24px);} 50% { transform: translateY(-48px);} 50.05% { transform: translateY(0px);} 100% { transform: translateY(0px);} } #main .notice-sec .notice .notice-roll li{ width: 100%; height: 24px; } #main .notice-sec .notice .notice-btn { border: none; background: transparent; } #main .notice-sec .banner { width: 100%; max-width: 1080px; height: auto; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding-bottom: 80px; transition: all 1s; } #main .bot-slider-sec { width: 100%; background-color: #B4A0FF; transition: all 1s; } #main .bot-slider-sec .bot-slider-box { width: 100%; max-width: 1080px; margin: 0 auto; padding-top: 50px; padding-bottom: 50px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box { width: 300px; height: auto; display: flex; flex-flow: column; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text { display: flex; flex-flow: column nowrap; align-items: flex-start; color: #fff; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{ font-size: 2em; display: block; font-weight: normal; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){ font-size: 2.4em; margin-bottom: 30px; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){ font-size: 1.5em; font-weight: normal; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{ font-size: 1.3em; padding-bottom: 30px; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box { width: 150px; height: auto; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{ border: none; background: transparent; filter: contrast(170%); } #main .bot-slider-sec .bot-slider-box .bot-slider-outer { width: 780px; height: auto; padding: 0px 15px 0px 15px; box-sizing: border-box; } #main .bot-slider-sec .bot-slider-box .bot-slider-outer .swiper-slide{ padding: 0px 10px 0px 10px; box-sizing: border-box; } #main .alliance-sec { width: 100%; height: auto; border-top: 1px solid #e0e0e0; display: flex; flex-flow: row; justify-content: center; transition: all 1s; } #main .alliance-sec .alliance-bar { width: 100%; max-width: 1080px; display: flex; flex-flow: row nowrap; align-items: center; margin-top: 15px; margin-bottom: 15px; } #main .alliance-sec .alliance-bar a { margin-right: 70px; } #footer { width: 100%; height: auto; border-top: 1px solid #e0e0e0; padding-top: 50px; padding-bottom: 30px; display: flex; flex-flow: row; justify-content: center; } #footer .footer-box { width: 100%; max-width: 1080px; display: flex; flex-flow: row; justify-content: space-between; align-items: center; } #footer .footer-box .footer-logo { width: auto; height: auto; flex: 1; } #footer .footer-box .footer-logo img { width: 50%; } #footer .footer-box .footer-sns { display: none; } #footer .footer-box .footer-text { display: flex; flex-flow: column; color: #666; font-size: 14px; flex: 2; } #footer .footer-box .footer-text span { margin-bottom: 5px; } #footer .footer-box .footer-text span:last-child { margin-top: 10px; } #footer .footer-box .call-num { flex: 1; } #footer .footer-box .call-num h1{ font-size: 18px; font-weight: 500 } #footer .footer-box .call-num p { font-size: 14px; font-weight: 500; } #footer .footer-box .call-num p > strong{ font-size: 35px; font-weight: 600 } .nav-scroll{ width: 100%; height: auto; display: flex; flex-flow: column; align-items: center; background-color: #fff; z-index: 9999; } .nav-scroll .scroll-nav-top { width: 100%; max-width: 1080px; height: auto; display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; } .nav-scroll .scroll-nav-top .gnb-sns { width: auto; height: auto; display: flex; flex-flow: row; } .nav-scroll .scroll-nav-top .gnb-sns li { width: 28px; height: 28px; margin-right: 25px; transition: all 0.2s; } .nav-scroll .scroll-nav-top .login-sec { width: auto; height: auto; } .nav-scroll .scroll-nav-top .login-sec .login-menu{ width: auto; height: auto; display: flex; flex-flow: row nowrap; font-size: 16px; font-weight: 600; } .nav-scroll .scroll-nav-top .login-sec .login-menu li:nth-child(2) { margin-left: 8px; margin-right: 8px; } .nav-scroll .scroll-nav-bottom { width: 100%; max-width: 1080px; height: auto; display: flex; align-items: center; justify-content: space-between; } .nav-scroll .scroll-nav-bottom .logo-sec{ width: 100%; height: auto; flex: 1; text-align: center; } .nav-scroll .scroll-nav-bottom .logo-sec img{ width: 60%; height: auto; } .nav-scroll .scroll-nav-bottom .gnb{ width: 100%; height: auto; flex: 2; } .nav-scroll .scroll-nav-bottom .gnb .main-menu{ width: 100%; height: auto; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; } .nav-scroll .scroll-nav-bottom .gnb .main-menu li{ font-size: 22px; font-weight: 600; } .nav-scroll .gnb-line{ width: 100%; height: 5px; background: url(./main/main/line.png) no-repeat center; background-size: cover; } .swiper { width: 100%; height: 100%; } .swiper-wrapper { width: 100%; height: 100%; min-height: 240px ; } .swiper-slide{ width: 100%; height: 100%; } .swiper-slide img { display: block ; width: 100% ; height: 100%; object-fit: cover; } .swiper .swiper-pagination-bullet { width: 12px; height: 12px; background-color: #7CE063; margin: 0 15px !important; } @media (max-width: 425px) { #scroll-nav { display: none !important; } .m-menu-box { width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6); z-index: 9999; position: absolute; } .m-menu-box .m-menu { width: 85%; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff; } .m-menu-box .m-menu .m-login-sec { width: 100%; height: auto; padding: 25px 0px; text-align: center; } .m-menu-box .m-menu .m-login-sec .m-login-menu { margin: 0; display: flex; flex-flow: row-reverse nowrap; justify-content: center; align-items: center; font-size: 1rem; } .m-menu-box .m-menu .m-login-sec .m-login-menu > li:nth-child(2){ margin-left: 30px; margin-right: 30px; } .m-menu-box .m-menu .m-gnb { width: 100%; height: auto; } .m-menu-box .m-menu .m-gnb .m-main-menu { margin: 0; } .m-menu-box .m-menu .m-gnb .m-main-menu > li { width: 100%; height: auto; font-size: 20px; font-weight: 800; padding: 15px 30px; box-sizing: border-box; } .nav .login-sec { width: 100%; height: 70px; display: none; } .nav .logo-sec { width: 50%; max-width: 1080px; height: auto; } .nav .logo-sec .nav-logo{ display: none; } .nav .logo-sec .nav-logo-m { display: block; margin: 0 auto; width: 100%; } .nav .gnb { display: none; } .nav .gnb-line{ width: 100%; height: 5px; background: url("./main/main/line.png") no-repeat center; background-size: cover; margin-top: 10px; } .nav .toggle-btn{ width: 50px; height: 29px; position: absolute; top: calc((80px - 29px) / 2); left: calc((100% - 60px )); padding: 0px ; display: flex; flex-flow: column; justify-content: space-around; align-items: center; } .nav .toggle-btn > div { width: 30px; height: 4px; background-color: #B4A0FF; display: block; margin: 0; } /* nav m-menu */ /*silder-sec*/ #main .slider-sec .slider-outer .slider-btn { width: 100%; height: 50px; position: absolute; bottom: 0; display: flex; flex-flow: row; justify-content: center; align-items: center; } #main .slider-sec .slider-outer .slider-btn .slider-bullet { content: ""; display: inline-block; vertical-align: middle; width: 10px; height: 10px; background-color: rgba(0, 0, 0, 0.4); border-radius: 100%; } #main .slider-sec .slider-outer .slider-btn .slider-bullet:nth-child(2) { margin-left: 25px; margin-right: 25px; } #main .notice-sec { width: 100%; height: auto; display: flex; flex-flow: column; align-items: center; margin-top: 0px; } #main .notice-sec .notice { width: 100%; max-width: 1080px; height: auto; display: flex; flex-flow: row nowrap; align-items: center; padding: 10px 20px; margin-bottom: 0px; } #main .notice-sec .notice h4 { width: 25%; font-size: 18px; font-weight: bold; } #main .notice-sec .notice .notice-roll-box{ width: 70%; height: 35px; font-size: 16px; font-weight: 500; margin-left: 0px; position: relative; overflow: hidden; } #main .notice-sec .notice .notice-roll-box .notice-roll{ width: 100%; height: auto; margin: 0; animation: noticeRoll 5s infinite; } @keyframes noticeRoll { 0% { transform: translateY(7px);} 25% { transform: translateY(-27px);} 50% { transform: translateY(-64px);} 50.5% { transform: translateY(0px);} 100% { transform: translateY(7px);} } #main .notice-sec .notice .notice-roll li{ width: 100%; height: 35px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #main .notice-sec .notice .notice-btn { width: auto; border: none; background: transparent; } #main .notice-sec .notice .notice-btn img{ width: 15px; height: 15px; } #main .notice-sec .banner { width: 100%; max-width: 1080px; height: auto; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; padding: 0px 20px 20px 20px; } #main .notice-sec .banner a{ width: 100%; height: auto; } #main .notice-sec .banner a img{ width: 100%; } /*notice*/ #main .bot-slider-sec { width: 100%; background-color: #B4A0FF; } #main .bot-slider-sec .bot-slider-box { width: 100%; max-width: 1080px; margin: 0 auto; padding-top: 50px; padding-bottom: 50px; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box { width: auto; height: auto; display: flex; flex-flow: column; align-items: center; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text { display: block; color: #fff; text-align: center; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:first-child{ font-size: 1.75rem;; display: inline-block; font-weight: normal; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(2){ font-size: 1.6em; margin-bottom: 30px; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:nth-child(3){ font-size: 18px; display: inline-block; font-weight: normal; margin-top: 10px; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .text span:last-child{ font-size: 18px; padding-bottom: 0px; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box { width: auto; height: auto; padding-top: 20px; padding-bottom: 25px; } #main .bot-slider-sec .bot-slider-box .bot-slider-text-box .bot-slider-btn-box .bot-slider-btn{ border: none; background: transparent; filter: contrast(170%); } #main .bot-slider-sec .bot-slider-box .bot-slider-outer { width: 100%; height: auto; } #main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner { width: auto; height: auto; padding: 0px 0px; overflow: hidden; } #main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items { width: 100%; height: auto; display: flex; padding: 0px; transition: all 1s; } #main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a { width: 100%; height: auto; padding: 0px 30px; } #main .bot-slider-sec .bot-slider-box .bot-slider-outer .bot-slider-inner .bot-slider-items a:nth-child(2n) { margin-left: 0px; margin-right: 0px; } /*bot-slider-sec*/ #main .alliance-sec { width: 100%; height: auto; border-top: 1px solid #e0e0e0; display: flex; flex-flow: row; justify-content: center; } #main .alliance-sec .alliance-bar { width: 100%; max-width: 1080px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin-top: 15px; margin-bottom: 15px; } #main .alliance-sec .alliance-bar a { margin-right: 0px; text-align: center; } #main .alliance-sec .alliance-bar a img{ width: 80%; } /*.alliance-sec*/ #footer { width: 100%; height: auto; border-top: 1px solid #e0e0e0; padding-top: 0px; padding-bottom: 30px; display: flex; flex-flow: row; justify-content: center; } #footer .footer-box { width: 100%; max-width: 1080px; display: flex; flex-flow: column; justify-content: space-between; align-items: center; } #footer .footer-box .footer-logo { width: auto; height: auto; flex: 1; display: none; } #footer .footer-box .footer-logo img { width: 50%; } #footer .footer-box .footer-sns { width: 100%; height: auto; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } #footer .footer-box .footer-sns li:first-child{ margin-right: 5px; } #footer .footer-box .footer-sns li:nth-child(2){ margin: 0px 5px 0px 5px; } #footer .footer-box .footer-sns li:nth-child(3){ margin: 0px 5px 0px 5px; } #footer .footer-box .footer-sns li:last-child{ margin-left: 5px; } #footer .footer-box .footer-text { display: flex; flex-flow: column; align-items: center; color: #666; font-size: 14px; flex: 2; text-align: center; } #footer .footer-box .footer-text span { margin-bottom: 5px; } #footer .footer-box .footer-text span:last-child { margin-top: 10px; } #footer .footer-box .call-num { flex: 1; display: none; } #footer .footer-box .call-num h1{ font-size: 18px; font-weight: 500 } #footer .footer-box .call-num p { font-size: 14px; font-weight: 300; } #footer .footer-box .call-num p > strong{ font-size: 35px; font-weight: 500; } .mySwiper { width: 100%; height: 100%; } .mySwiper .swiper-wrapper { width: 100%; height: 100%; } .mySwiper .swiper-wrapper .swiper-slide{ width: 100%; height: 100%; max-height: 240px; } .mySwiper .swiper-wrapper .swiper-slide img { display: block; width: 100%; height: 100%; max-height: 240px !important; object-fit: fill; } .mySwiper .swiper-pagination-bullet { width: 9px; height: 9px; background-color: #7CE063; margin: 0 5px !important; } }