@charset "utf-8";

#mainVisualWrap{color:#fff;background:url(./img/main-bg.jpg);background-size:cover;font-family:'Pretendard'}
#mainVisual{overflow:hidden;display:flex;justify-content:space-between;padding-top:180px;height:850px; max-width: 1465px; margin: 0 auto;}
#mainVisual *{word-break:keep-all}
#mainVisual .pl{white-space:pre-line}

/* mainVisual */
#mainVisual .mainSwiper{width:970px;height:540px}
#mainVisual .main_img li{width:100%;height:100%; }
#mainVisual .main_img li img{float:right; position: absolute; bottom: 0; right: 0}


#mainVisual .slider{position:relative;}
#mainVisual .swiper-pager{position:absolute;left:120px;display:flex;align-items:flex-end;justify-content:center;z-index:101;margin-top:-60px;transform:translateX(-50%); z-index: 90}
#mainVisual .swiper-pager span{position:relative;opacity:.3;width:10px;height:10px;border-radius:50px;background:#181818;transition:all .3s}
#mainVisual .swiper-pager span+span{margin-left:10px}
#mainVisual .swiper-pager span.on{opacity:1; width:25px;}

#mainVisual .slider .swiper-slide { border-radius:20px; background: #fff}

#mainVisual .slide-tit {padding:80px 0 0 70px;}
#mainVisual .slide-tit h4 {color:#222; font-size:40px; font-family: 'GmarketSansMedium'; line-height: 1.2; padding-bottom:20px;}
#mainVisual .slide-tit h4 b {font-family: 'GmarketSansBold';}
#mainVisual .slide-tit p {color:#222; font-size:18px; color:#555;}

#mainVisual .cont{margin-left:135px}
#mainVisual .txt span{position:relative;padding-left:65px;font-size:15px;font-weight:700;font-family:'Play'}
#mainVisual .txt span:after{position:absolute;content:'';top:8px;left:0;width:50px;height:1px;background:#fff}
#mainVisual .txt p{margin:40px 0 30px;font-size:40px;font-weight:300;}
#mainVisual .txt p b{font-weight:700}
#mainVisual .txt div{font-size:16px;color:rgba(255,255,255,50%);line-height:1.5}

#mainVisual .link{margin-top:80px}
#mainVisual .link li+li{margin-top:45px}
#mainVisual .link a{position:relative;display:flex;align-items:center}
#mainVisual .link div{margin-left:40px;font-size:14px;color:rgba(255,255,255,50%)}
#mainVisual .link div p{margin-bottom:5px;font-size:17px;font-weight:700;color:#fff;text-transform:uppercase;font-family:'Play'}
#mainVisual .link .go_link{position:absolute;right:0;opacity:.3;transition:all .3s}

#mainVisual .contact{width:330px}

#mainVisual .tel{font-weight:700;text-align:center;font-family:'Play'}
#mainVisual .tel>span{font-size:20px}
#mainVisual .tel p{margin:20px 0;font-size:40px}
#mainVisual .tel ul{line-height:1.8}
#mainVisual .tel ul li{font-size:15px;color:rgba(255,255,255,50%)}
#mainVisual .tel ul span{margin-right:10px;color:#fff}
#mainVisual .tel a{display:flex;align-items:center;justify-content:center;width:330px;height:65px;margin-top:30px;border-radius:5px;font-size:17px;font-weight:700;color:#E2DBCA;background:#0D223B;transition:all .3s;font-family:'Pretendard'}
#mainVisual .tel a i{margin-right :25px;font-size:20px}

#mainVisual .lt_area{margin-top:20px}
#mainVisual .lt_area .s_tit{display:inline-block;margin-left:20px;padding:8px 15px;border-radius:50px;font-size:13px;font-weight:700;color:var(--primary);background:#fff}

#mainVisual .lt_area .quickMenu ul {display: flex; flex-wrap: wrap;}
#mainVisual .lt_area .quickMenu ul li {width:calc(100% / 3 - 14px); margin:7px;}
#mainVisual .lt_area .quickMenu ul li a {background: rgba(255,255,255,0.1); color:#fff; text-align: center; display: block; height: 110px; border-radius: 10px;}
#mainVisual .lt_area .quickMenu ul li a img { height: 40px; line-height: 40px; margin-top:25px;}
#mainVisual .lt_area .quickMenu ul li a:hover img {transform: rotateY(360deg); transition: all .3s ease; }
#mainVisual .lt_area .quickMenu ul li a span {font-size: 15px; margin-top:10px; display: block}

@media(hover:hover){
#mainVisual .link a:hover .go_link{opacity:1;transform:rotate(-45deg)}
#mainVisual .tel a:hover{background:#111}
}

/* 반응형 [s] */
@media (max-width:1750px){
#mainVisualWrap{padding-right:0}
#mainVisual .pl{white-space:normal}
#mainVisual{padding:180px 100px 100px;flex-wrap:wrap;height:auto}
#mainVisual .cont{width:100%;margin-left:0;padding-bottom:80px}
#mainVisual .link{display:grid;grid-template-columns:repeat(3,1fr);gap:80px;margin-top:40px}
#mainVisual .link li+li{margin-top:0}
#mainVisual .link .go_link{opacity:1}

#mainVisual .slider{width:65%;}
#mainVisual .mainSwiper{max-width:810px;width:100%;height:530px; }
#mainVisual .main_img li{overflow:hidden;}
#mainVisual .main_img li img{display:block; float:right; right:0; width:50%}

#mainVisual .tel{margin-top:0}
#mainVisual .contact{width:30%}
#mainVisual .lt_area{margin-top:20px}
#mainVisual .tel a{width:100%}
}
@media (max-width:1400px){
#mainVisual .txt p{margin:40px 0 15px;font-size:35px}
#mainVisual .link{margin-top:60px}
#mainVisual .tel p{font-size:35px}
#mainVisual .lt_slide .sh_contents{overflow:hidden;display:inline-block;height:37px}
}
@media (max-width:1200px){
#mainVisual{display:block;padding:180px 70px 100px}
#mainVisual .slider{width:100%}
#mainVisual .mainSwiper{max-width:100%;height:400px}
#mainVisual .link{gap:40px}
#mainVisual .contact{display:flex;justify-content:space-between;gap:40px;width:100%;margin-top:40px}
#mainVisual .contact>div{width:50%}
#mainVisual .lt_area{padding-bottom:16px}

#mainVisual .swiper-pager {left:70px;}
#mainVisual .slide-tit {padding:40px 0 0 30px;}    
#mainVisual .slide-tit h4 {color:#222; font-size:30px;}
#mainVisual .slide-tit p {font-size:16px;}
}
@media (max-width:1024px){
#mainVisual{padding:80px 50px 100px}
#mainVisual .txt{text-align:center}
#mainVisual .txt p{font-size:30px}
#mainVisual .link div{margin-left:20px}
#mainVisual .cont{padding-bottom:55px}
#mainVisual .lt_area{margin-top:0}
#mainVisual .tel p{font-size:30px}
}
@media (max-width:768px){
#mainVisual{padding:150px 50px 50px}
#mainVisual .mainSwiper{height:350px}
#mainVisual .link{display:block}
#mainVisual .link a{padding:20px 25px;border:1px solid rgba(255,255,255,.2);border-radius:10px}
#mainVisual .link a>img:not(.go_link){width:25px}
#mainVisual .link .go_link{right:25px}
#mainVisual .link div p{margin-bottom:0;font-size:16px}
#mainVisual .link li+li{margin-top:10px}
#mainVisual .link div{display:flex;align-items:center;gap:25px}
#mainVisual .contact{display:block}
#mainVisual .contact>div{width:100%}
#mainVisual .lt_area{margin-top:30px}
#mainVisual .lt_control{bottom:45px}
    
#mainVisual .swiper-pager {left:60px;}  
    
#mainVisual .main_img li img{width:60%;}
#mainVisual .slide-tit {padding:20px 0 0 20px;}    
#mainVisual .slide-tit h4 {color:#222; font-size:24px;}
#mainVisual .slide-tit p {font-size:14px;}
}
@media (max-width:480px){
#mainVisual{padding:120px 30px 30px}
#mainVisual .link{margin-top:35px}
}
@media (max-width:390px){
#mainVisual{padding:120px 15px 30px}
}
/* 반응형 [e] */