/* ==========================================================================
   main page
   ========================================================================== */

/* fullpage */
.fp-watermark{display: none !important;}
#fullpage .imgbox{display: flex; height: 100vh; width: 100%;  padding: 0; margin: 0; min-height: 100vh;}
#fullpage .imgbox img {width: 100%; height: auto; object-fit: cover;min-height: 100vh;}
#fullpage .textbox{position: absolute; bottom: 60px; left: calc(50% + 30px); transform: translateX(-50%); width: 100%; max-width: 1450px; padding: 3px 10px; color: rgba(255,255,255,0.7); font-size: 16px;}
#fullpage .textbox a {display: inline-block; }
#fp-nav ul li a span, .fp-slidesNav ul li a span{width: 12px !important; height: 12px !important; background: rgba(255,255,255,0); margin: 0 0 5px 0 !important; border: 1px solid #ffffffbf}
#fp-nav ul li, .fp-slidesNav ul li{width: 12px !important; height: 20px !important; margin: 0 20px 0 0 !important;}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span{background: rgba(255,255,255,1);}
#fp-nav { display: var(--fp-nav-display) !important;}
.bigImg{ position: relative; overflow: hidden; height: 100vh;}

/* main  */
.front-page .marker{ background-color: #7ee1ff;}
.front-page .search-toggle i{color: #fff;}
.front-page ul.sns li a img { filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(300%) contrast(200%); width: 23px; height: auto; } 
.front-page footer{display: none;}
.front-page .gotoTop{display: none !important;}

.edit_main_tel{ position: fixed; font-size: 20px;color: #fff; bottom:47px; right: 100px; z-index: 50;  min-width: 300px; width: max-content; height: 30px;text-align: right; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);} 
.edit_main_tel i {margin-right: 10px;}

/* 메인 슬로건  */
.front-page .mainslogen{ position: fixed; width: max-content;max-width: calc(100% - 60px); height: max-content;bottom: 100px; left: 50px; transform: translate(0%, 0%); z-index: 50;}
.mainslogen_text{font-weight: 800; color: #fff; margin-bottom: 10px; line-height: 1.3;letter-spacing: -0.5px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); animation:fadebanner 0.7s ease-in-out forwards; animation-delay: 0.4s; opacity: 0;}
.mainslogen_text{font-size: clamp(34px, 1.9vw, 40px)}
.mainslogen_subtext{font-size: clamp(15px, 1.2vw, 18px); font-weight:300; line-height: 1.4;letter-spacing: -0.5px;color: rgba(255,255,255,1); margin-bottom: 30px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); animation:fadebanner 0.7s ease-in-out forwards; animation-delay: 0.7s; opacity: 0;}
.mainslogen_subtext br.onlymobile, .mainslogen br.onlymobile{display: none;}
.mainslogen .mainbtn{display: inline-block; padding: 13px 50px; background-color: #0e85e3; color: #fff; font-size: 15px; font-weight: 400; 
    text-decoration: none; border-radius: 30px; transition: all 0.3s ease;width: max-content; animation:fadebanner 0.7s ease-in-out forwards; animation-delay: 0.9s; opacity: 0;
position: relative; text-align: center;margin-bottom: 0px;min-width: 170px;}
.mainslogen .mainbtn i{position: absolute;right: 0;top: calc( 50% + 1px); transform: translateY(-50%); opacity: 0; transition: all 0.2s; font-size: 18px; }
.mainslogen .mainbtn span{transition: all 0.2s; transform: translateX(0px); display: inline-block;}
.mainslogen .mainbtn:hover i {right: 20px; opacity: 1;}
.mainslogen .mainbtn:hover span{ transform: translateX(-20px);}
.mainslogen_text { font-weight: var(--mainslogen-fontweight); text-shadow: var(--text-shadow);}
.mainslogen_subtext { text-shadow: var(--sub-text-shadow);}
.mainslogen .mainbtn { background-color: var(--main-button-color);}

.front-page .mainslogen.mainBelow{ bottom: 100px; left: 50px; transform: translate(0%, 0%); }
.front-page .mainslogen.mainLeft{ bottom: inherit; top: 50%; left: 14%; transform: translate(0%, -50%); }
.front-page .mainslogen.mainCenter{bottom: inherit; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.front-page .mainslogen.mainCenter>div{text-align: center;}
.mainslogen.mainSizeS .mainslogen_text{font-size: clamp(28px, 1.8vw, 32px)}
.mainslogen.mainSizeS .mainslogen_subtext{font-size: clamp(14px, 1.1vw, 16px)}
.mainslogen.mainSizeL .mainslogen_text{font-size: clamp(40px, 2.2vw, 48px);margin-bottom: 17px;}
.mainslogen.mainSizeL .mainslogen_subtext{font-size: clamp(16px, 1.2vw, 21px);margin-bottom: 23px;}
.mainslogen.mainSizeL .mainbtn{font-size: 16px;}

/* 지연 로딩 이미지 스타일 */
.lazy-image {  opacity: 0; transition: opacity 0.3s ease-in-out;}
.lazy-image.loaded { opacity: 1;}
.section:first-child .imgbox img { opacity: 1;}

@media screen and (max-width:1024px) {
    .mainslogen .mainbtn{font-size: 15px;padding: 10px 45px; min-width: 180px;}
    .mainslogen_text, .mainslogen_subtext{margin-bottom: 15px;}
    .mainslogen_text{font-size: 30px;}
    #fp-nav.fp-right{right: 3px;}
}

@media screen and (max-width:820px) {
    .front-page .mainslogen{ pointer-events: none;}
    .mainslogen .mainbtn{pointer-events: all;}
    .mainslogen .mainbtn:hover i {right: inherit; opacity:0;}
    .mainslogen .mainbtn:hover span{ transform: inherit;}
}

/* 카카오챗팅과 네이버톡이 둘 다 공백일 때 edit_main_tel 위치 조정 (520px 이상에서만 적용) */
@media screen and (min-width: 521px) {
    .edit_main_tel.no-chat-buttons { right: 50px; }
}

@media screen and (max-width:520px) {
    #fp-nav ul li, .fp-slidesNav ul li { height: 20px !important; }
    #fp-nav ul li a span, .fp-slidesNav ul li a span { width: 10px !important; height: 10px !important; }
    .front-page .site-main { margin: 0; }
    .front-page .site-main { gap: 0; margin-bottom: 0; padding-bottom: 0;}
    .front-page .mainslogen{ pointer-events: none; left: 30px; }
    .front-page .mainslogen.mainBelow {bottom: inherit;top: 40%; }
    .front-page .mainslogen.mainLeft{top: 40%;left: 50px;bottom: inherit; transform: translate(0%, 0%);}
    .front-page .mainslogen.mainCenter{top: 40%;}
    .front-page .mainslogen_text{ font-size: 24px !important; }
    .mainslogen_subtext { font-size: 15px !important; pointer-events: none; line-height: 1.5; }
    .mainslogen_subtext br.onlymobile, .mainslogen br.onlymobile { display: block; }
    .mainslogen .mainbtn { padding: 8px 45px; font-size: 15px; pointer-events: all; margin-bottom: 0; min-width: inherit; }
    .edit_main_tel { text-align: left; right: inherit; left: 20px; bottom: 30px; }
    .front-page .floatRight{bottom: 30px;}
   
    .metaslider.ms-theme-default-base .flexslider .flex-direction-nav li a{top: calc(50% + 13px) !important;}

}