@charset "utf-8";
/* CSS Document */
[id^="sect_0"] {
    /*padding: calc(var(--sec_pd) / 1.25) 0;*/
	padding: var(--sec_pd) 0;
    transition: all var(--q_trans);
}
.sect_tit {
    line-height: 1.125;
}

/* 메인 */
main { width: 100%; height: 570px; position: relative; background-color: var(--darker_point);}
main::after {/* 비네트 */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(8, 41, 91, 0.4) 90%), linear-gradient(to right,  rgba(15, 16, 21, 0.3) 10%, rgba(0,0,0,0) 100%); z-index: 1;}
main video.fullscreen { /* 비디오 */ position: absolute;  z-index: 0;  object-fit: cover;  width: 100%;  height: 100%;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}
main video.fullscreen::-webkit-media-controls {  display: none !important;}

main .wrap {z-index: 2; text-shadow: 1px 2px 3px rgba(0,0,0,0.7);}
    main .txt_01 { font-size: 2.2em; font-weight: bold; margin-bottom: 2rem; }
    main .txt_02 { font-size: 1.1em; }
    main p span{ background: rgba(0,0,0,0.2);}

/* 섹션 */
#sect_01 {padding: 0;}
#sect_01 .sect_cont a{ display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; align-items: center; padding: 0 1rem;}
#sect_01 .sect_cont a i {font-size: xx-large; }
#sect_01 .sect_cont a:hover{color: var(--mint)}
#sect_01 .sect_cont a:hover i{animation: fa-beat-fade 1s cubic-bezier(.4, 0, .6, 1) infinite;}


#sect_02 .sect_cont .card_pack{flex-wrap: wrap;	align-content: stretch; }
#sect_02 .sect_cont .card {width: 31%; margin:1.25% 1%; transition:all 0.3s ease;}
#sect_02 .sect_cont .card.hover-on {  border-color: var(--sky); box-shadow: 0 0.2rem 0.7rem 0.2rem  rgba(0,93,191,0.15);}
#sect_02 .sect_cont .card hr {margin-bottom: 1rem;}
#sect_02 .sect_cont .card a .btn_txt{ font-size: 87%;}
#sect_02 .sect_cont .card:nth-child(even) {background-color: var(--surface);}
#sect_02 .sect_cont .card:nth-child(odd) {background-color: var(--white);}

#sect_03 {padding: calc(var(--sec_pd) *2 ) 1rem;
     background: url(../images/sect_03.jpg) no-repeat; background-attachment: fixed;}


#sect_04 .sect_cont {flex-wrap: wrap; align-content: stretch; }
#sect_04 .sect_cont .card{width:23%; display: flex; flex-direction: column;}
#sect_04 .sect_cont .card .txt_list a { display: block; padding: 2px 1rem 2px .5rem; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; line-height: 1.8; }  
#sect_04 .sect_cont .card .txt_list a:nth-child(odd){background-color: var(--gray_f3); border-radius: var(--br_s);}

#sect_04 .sect_cont .card2{width:46%; display: flex; flex-direction: column;}
#sect_04 .sect_cont .card2 .txt_list a { display: block; padding: 2px 1rem 2px .5rem; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; line-height: 1.8; }  
#sect_04 .sect_cont .card2 .txt_list a:nth-child(odd){background-color: var(--gray_f3); border-radius: var(--br_s);}

#sect_05 {padding: calc(var(--sec_pd) *2 ) 1rem;
     background: url(../images/sect_05.png) no-repeat; background-attachment: fixed;}





/* ==================== 모바일 레이아웃 ==================== */
@media ( max-width: 900px ) {
	/* 메인 */
	main { text-align: center; height: auto; margin-top: 50px; }
	main .wrap { padding: 5rem 0; }	

	#sect_01 .sect_cont {padding: 1.5rem;}
	#sect_01 .sect_cont a {padding: 0 0.5rem; text-align: center;}
	#sect_01 .sect_cont a i {font-size: normal;}
	#sect_01 .sect_cont .bg_red {border-radius: var(--br_s)  var(--br_s) 0 0;}
	#sect_01 .sect_cont .bg_dark_red {border-radius: 0 0 var(--br_s) var(--br_s) ;}

    #sect_02 .sect_cont .card {width:48%; display: flex; flex-direction: column; justify-content: center;  }
    #sect_02 .sect_cont .card a .btn_txt{ font-size: 87%;}
    #sect_04 .sect_cont .card{width:48%;}
	#sect_02 .sect_cont .card:nth-child(1),#sect_02 .sect_cont .card:nth-child(4),#sect_02 .sect_cont .card:nth-child(5) {background-color: var(--white);}
	#sect_02 .sect_cont .card:nth-child(2),#sect_02 .sect_cont .card:nth-child(3),#sect_02 .sect_cont .card:nth-child(6) {background-color: var(--surface);}

}


/* ==================== oneWaySend ==================== */

.result_page { text-align: center; position: absolute; width: 100%; height: inherit; }
.result_page .innerwrap {  width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); }
.result_page img { width: 110px; }
.result_page strong { display: inline-block; font-size: 1.4em; margin-top: 1.5rem; }
.result_page a { background-color: rgba(0,0,0,0.8); color: #fff; padding: 0.7rem 2rem; border-radius: 500px; margin-top: 2.5rem; }

@media only screen and (min-width: 300px) and (max-width: 850px) {
	.result_page img { width: 85px; }
	.result_page strong { display: inline-block; font-size: 1.4em; margin-top: 1.2rem; }
	.result_page a { margin-top: 2rem; }
}

/* ========================================================================== */