@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2023-02-03
******************************************************** */
#maincontainer{}
.mainsec .main-tit-box{ margin-bottom: 4rem;}
.mainsec .main-tit{ font-size: 3.8rem; color:#202936; font-weight: 700; line-height: 5.2rem; letter-spacing: -.5px;}
.mainsec .main-tit.wh{color: #fff;}
.mainsec .main-tit-box a.more{ font-weight: 500;}
.mainsec .main-tit-box a.more > i[class^='xi-']{    
	border: 1px solid #e9e9e9;padding: .5rem;font-size: 1.4rem;border-radius: 50%;width: 2.6rem;height: 2.6rem;transition: transform .3s;
}
.mainsec .main-tit-box > a:hover{ color: var(--main-color);}
.mainsec .main-tit-box > a:hover > i[class^='xi-']{ transform: translateX(3px);}

@media all and (max-width:768px){
	.mainsec .main-tit{ font-size: 2.8rem; line-height: 3.8rem;}
	.mainsec .main-tit-box{ margin-bottom: 2rem;}
}

/* main :: search bar */
#mainSearchBoard{}
#mainSearchBoard .srh-title{ font-size: 5rem; line-height: 1.3; letter-spacing: -.5px; color:#202936; margin: 10rem 0 4rem;}
#mainSearchBoard .search-inner{}
#mainSearchBoard form{max-width: 60rem; height: 6rem; margin: 0 auto;border: 1px solid #e0e0e0; border-radius: 30rem;padding: 0 1rem 0 var(--area-padding);}
#mainSearchBoard form .search-word{font-size: 1.6rem; line-height: 2.4rem;height: 100%;border: 0; outline: none; padding-right: 1.3rem; background-color:#fff !important;}
#mainSearchBoard form .search-word::placeholder{color: #a5a5a5;}
#mainSearchBoard form .search-btn{
	background-color: #e9e9e9;height: 4.5rem;width: 4.5rem;border-radius: 100%;font-size: 2rem; color:#a5a5a5; cursor: default;
	pointer-events: none;
}
#mainSearchBoard form:not(:has(.search-word:placeholder-shown)) .search-btn{ 
	pointer-events:all; background-color: var(--main-color); cursor: pointer; color:#fff;
}
@media all and (max-width:1024px){
	#mainSearchBoard .srh-title{ margin: 5rem 0 2rem; font-size: 3.8rem;}
}

/* main :: Guides*/
#mainGuides{ margin: 8rem 0 12rem;}
#mainGuides > div , #mainGuides .guide_group{ gap: 2rem;}
#mainGuides .guide-items{ background-color: #F1F3F9; flex: 1; border-radius: 4rem; overflow: hidden;}
#mainGuides .guide-items:not(.mainNotice){transition: transform .4s cubic-bezier(.16,1,.3,1);padding: 4.5rem 1.5rem;}
#mainGuides .mainNotice{ flex: 0 0 45%; position: relative; background-color: transparent; min-height: 35rem;}
#mainGuides .mainNotice:not(:has(.empty_li)){border-top-right-radius: 0;}
#mainGuides .mainNotice > div{width: 100%; height: 100%;}

#mainGuides .mainNotice li{ padding: 4.5rem 4rem;background-color: #F1F3F9;border-radius: 4rem; overflow: hidden;}
#mainGuides .mainNotice li .lat_li_tit_box{ width: 70%;}
/*main :: notice :: pagination*/
#mainGuides .mainNotice .swiper-pagination{
	top: -1px;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;right: 0px;bottom: auto;left: initial;
	-webkit-transform: initial;-moz-transform: initial;-ms-transform: initial;transform: initial;border-radius: 0 0 0 2.4rem;padding: 1rem 1.5rem;
	background-color: #fff;
}
#mainGuides .mainNotice .swiper-pagination::before,
#mainGuides .mainNotice .swiper-pagination::after{
	content: ""; display: block; position: absolute; width: 24px; height: 24px;
	background-size: cover; background-repeat: no-repeat;
}
#mainGuides .mainNotice .swiper-pagination::before{ 
	background-image: url('../img/outline-border-left.svg'); top: 0; left: -20px;transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
}
#mainGuides .mainNotice .swiper-pagination::after{ 
	background-image: url(../img/outline-border-right.svg);bottom: -24px;right: 0;transform: rotate(-180deg);-webkit-transform: rotate(-180deg);
}
#mainGuides .mainNotice .swiper-pagination > span{ width: 1rem; height: 1rem; background-color: #292a2e; margin: 0 .7rem;}
#mainGuides .guide-items:not(.mainNotice):hover{transform: translateY(-12px);}
#mainGuides .guide-items dl{ text-align: center;}
#mainGuides .guide-items dl dt{ font-size: 2.6rem; color:#202936; font-weight: 700; margin-bottom: 1.2rem;}

#mainGuides .guide-items .img{width: 100%;height: 0;position: relative;padding-top: 65%;overflow: hidden;}
#mainGuides .guide-items .img lottie-player{height: auto;width: 90%;position: absolute;left: 50%;top: 44%;transform: translate(-50%, -50%);}
#mainGuides .guide-items.UserGuide .img lottie-player{ width: 70%;}

@media all and (max-width:1024px){
	#mainGuides .mainNotice{flex: 0 0 50%;}
}
@media all and (max-width:1024px) and (min-width:769px){
	#mainGuides .guide_group > a{ 
		width: 100%; flex:unset; display: flex; align-items: center; position: relative; padding:4rem 3rem !important; border-radius: 1.6rem;
	}
	#mainGuides .guide-items .img{ position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); padding-top: 25%; width: 32%;}
	#mainGuides .guide-items .img lottie-player{ width: 100% !important}
	#mainGuides .guide-items dl{ text-align: left;padding-right: 40%;}
	#mainGuides .guide-items dl dd br{ display: none;}
}
@media all and (max-width:768px){
	#mainGuides{ margin-bottom: 8rem;}
	#mainGuides > div > *{ width: 100%; flex: unset !important;}
}
@media all and (max-width:640px){
	#mainGuides .guide_group > a{ 
		width: 100%; flex:unset; display: flex; align-items: center; position: relative; padding:4rem 3rem !important; border-radius: 1.6rem;
	}
	#mainGuides .guide-items .img{ position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); padding-top: 25%; width: 32%;}
	#mainGuides .guide-items.UserGuide .img lottie-player{ width: 100%;}
	#mainGuides .guide-items dl{ text-align: left;padding-right: 40%;}
	#mainGuides .guide-items dl dd br{ display: none;}
}

/* main :: FAQ */
#mainFaq{ margin-bottom: 10rem;}
#mainFaq .main-tit{ width: 60%;}
.main-faq-content{}
.main-faq-content .main-faq-list .main-faq-item{
	padding: 2.4rem 4.3rem 2rem 1rem;height: auto;letter-spacing: -0.5px;position: relative; border-bottom: 1px solid #F1F3F9;
}
.main-faq-content .main-faq-list .main-faq-item:nth-child(1){ border-top: 1px solid #F1F3F9}
@media all and (min-width:1025px){
	#mainFaq .main-tit{ width: auto;}
	.main-faq-content .main-faq-list{        
		display: grid;grid-template-columns: repeat(2, calc(50% - 40px));grid-template-rows: repeat(auto, 1fr);grid-column-gap: 8rem;grid-row-gap: 0;
	}
	.main-faq-content .main-faq-list .main-faq-item:nth-child(2){ border-top: 1px solid #F1F3F9}
}
.main-faq-content .main-faq-list .main-faq-item > a{
	max-height: 7rem;width: 100%; max-width: 60rem;
	color:#202124; display: flex; align-items: center; gap: 1.6rem;
}
.main-faq-content .main-faq-list .main-faq-item .tit{text-overflow: ellipsis;overflow: hidden;white-space: nowrap; flex: 1;}
.main-faq-content .main-faq-list .main-faq-item > a:after{ 
	content: "\e93f";display: block;position: absolute;right: 0;top: 50%;transform: translateY(-50%);
	font-family: var(--font-xi);font-size: 2rem;color: #666;
}
.main-faq-content .main-faq-list .main-faq-item > a .cate{ color:var(--main-color);}
@media all and (max-width:768px){
	#mainFaq{ margin-bottom: 7rem;}
}

/* main :: CONTACT */
#mainContact{ padding: 10rem 0; background:#1A54F5 url('../img/contact_bg.jpg') no-repeat center/cover;position: relative;isolation: isolate;}
#mainContact::before{
	content: '';position: absolute;background: #fff;z-index: -1;inset: 0;opacity: 0.1;
}
#mainContact .contact_btns{ margin-top: 5rem; gap: 1.3rem;}
#mainContact .contact_btns a{ 
	width: 18rem; display: flex; align-items: center; justify-content: center; height: 5rem; 
	font-weight: 500; border-radius: .8rem; overflow: hidden; border:1px solid transparent;
}
#mainContact .contact_btns a:nth-child(1){ background-color: #fff; color:var(--sub-color)}
#mainContact .contact_btns a:nth-child(2){ border-color: #fff; color: #fff;}
#mainContact .contact_btns a:hover{background: rgba(255, 255, 255, .9);}
#mainContact .contact_btns a:nth-child(2):hover{ background-color: rgba(255, 255, 255, .1);}

@media all and (max-width:768px){
	#mainContact{ padding: 5rem 0;}
	#mainContact .contact_btns{ margin-top: 3rem;}
}
@media all and (max-width:480px){
	#mainContact .contact_btns a{ width: 50%; font-size: 1.8rem;}
}