@import url("/resource/css/basic.css");

/**** layout ****/
#container {position:relative; width:100%; display:flex; align-items:center; justify-content:center; width:100%; height:100vh; background: #e6f7fe url('/resource/images/intro/wrap_bg.png') no-repeat center center; overflow:hidden;}
.intro_wrap {position:relative; width:100%; max-width:85rem; padding:0 5.25rem 7rem; margin:0 auto; text-align:center; letter-spacing:-1px; z-index:1;}

/**** contents ****/
/* intro_slogan */
.intro_slogan {font-size:2.5rem; font-family:'GmarketSans'; word-spacing:-2rem; color:#111;}
.intro_slogan img {max-width:70%;}
.intro_slogan span {font-weight:700;}
.intro_slogan .color1 {color:#fc4325;}
.intro_slogan .color2 {color:#012c5f;}
.intro_slogan .color3 {color:#00937b;}
.intro_slogan .color4 {color:#0063ab;}

/* intro_con_wrap */
.intro_con_wrap {display:flex; justify-content:space-between; margin-top:4rem;}
.intro_con_wrap .intro_con {position:relative; display:block; flex:1; padding:1.45rem 1.25rem 3.15rem; background:#fff; border-radius:2rem; border:4px solid #fff;}
.intro_con_wrap .intro_con ~ .intro_con {margin-left:3.5%;}
.intro_con_wrap .con1 {display:flex; flex-direction:column; align-items:center; justify-content:center;}
.intro_con_wrap .con1 .con1_img {display:flex; align-items:center; justify-content:center; margin-top:1.45rem;}
.intro_con_wrap .con1 .con1_img img {max-width:80%;}
.intro_con_wrap .con1 .con1_txt {font-size: 1.1rem;color:#000;font-weight:600;margin-top:1.75rem;line-height: 1.6rem;}
.intro_con_wrap .con1 .con1_txt strong {font-size: 1.3rem;color:#0062ab;font-weight:700;}
.intro_con_wrap .intro_con .con_btn {position:absolute; left:-4px; bottom:-1.75rem; width:calc(100% + 8px); line-height:3.6rem; border-radius:0 1.8rem 1.8rem; text-align:center; font-size:1.1rem; color:#fff;}
.intro_con_wrap .intro_con .con_btn i {font-size:1.45rem; margin-left:0.5rem; vertical-align:text-top;}
.intro_con_wrap .con1 .con_btn {background: #0062ad;}
.intro_con_wrap .con2 .con_btn {background:#00937b;}
.intro_con_wrap .con2 .con2_img {position:absolute; top:0.5rem; right:2.25rem;}
.intro_con_wrap .con2 .con2_img img {max-width:100%;}
.intro_con_wrap .con2 .con2_txt {width:100%;height:100%;border-radius:0.9rem;background:#f8f8f8;border:1px dotted #999;font-size:0.95rem;padding:3.7rem 1rem 2.7rem;line-height:1.7;word-break:keep-all;}
.intro_con_wrap .con2 .con2_txt strong {display:block; font-size:1.1rem; color:#012c61; margin-top:1.15rem; font-weight:700;}
/* intro_con_wrap:active */
.intro_con_wrap .intro_con:hover,
.intro_con_wrap .intro_con:focus {box-shadow: 12px 12px 0 rgba(75,75,75,0.15);}
.intro_con_wrap .con1:hover,
.intro_con_wrap .con1:focus {border-color:#0062ad;}
.intro_con_wrap .con2:hover,
.intro_con_wrap .con2:focus {border-color:#00937b;}
.intro_con_wrap .intro_con:hover .con_btn,
.intro_con_wrap .intro_con:focus .con_btn {font-weight:700;}
.intro_con_wrap .intro_con,
.intro_con_wrap .intro_con .con_btn {transition: all 0.15s; -webkit-transition: all 0.15s;}
/*25.10.10 con3 가*/
.intro_con_wrap .con3 {display:flex; flex-direction:column; align-items:center; justify-content:center;}
.intro_con_wrap .con3 .con_btn {background:#949100;}
.intro_con_wrap .con3:hover,
.intro_con_wrap .con3:focus {border-color:#949100;}

.wave {position: absolute; top: 38%; left: 0; width: 6469px; height: 765px; opacity: 1; animation: wave 25s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; -webkit-animation: wave 25s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); background: url('/resource/images/intro/wave.png') repeat-x; z-index: 0;}

@keyframes wave {
	0% {margin-left: 0;}
	100% {margin-left: -1600px;}
}
@-webkit-keyframes wave {
	0% {margin-left: 0;}
	100% {margin-left: -1600px;}
}

@media screen and (max-width:1280px){
	.intro_wrap {padding:0 3.5rem 5rem;}
	.intro_con_wrap {margin-top:2rem;}
	.intro_con_wrap .intro_con {width:47%;}
	.intro_con_wrap .con1 .con1_txt {font-size:1rem;}
	.intro_con_wrap .con1 .con1_txt strong {font-size:1.3rem;}
	.intro_con_wrap .con2 .con2_txt {font-size:0.85rem;}
	.intro_con_wrap .con2 .con2_txt strong {font-size:1rem;}
}

@media screen and (max-width:1024px){
	.intro_wrap {padding:0 2rem 5rem;}
	.intro_con_wrap .intro_con {width:48%;}
	.intro_con_wrap .con1 .con1_txt strong {display:block;}
	.intro_con_wrap .con2 .con2_txt {letter-spacing:-1.5px;}
	.intro_con_wrap .con2 .con2_txt br {display:none;}
	.intro_con_wrap .con2 .con2_txt br:nth-child(3) {display:block;}

	.intro_wrap {padding:0 1rem 9rem;}
	.intro_slogan {line-height:1.1; margin-top:1.5rem;}
	.intro_con_wrap {flex-direction:column; margin-top:1.5rem;}
	.intro_con_wrap .intro_con {width:100%; padding-bottom:2.85rem;}
	.intro_con_wrap .intro_con ~ .intro_con {margin-top:2.5rem; margin-left:0;}
	.intro_con_wrap .con1 .con1_img {margin-top:0; height:7rem;}
	.intro_con_wrap .con1 .con1_img img {max-height:100%;}
	.intro_con_wrap .con1 .con1_txt {margin-top:1rem;}
	.intro_con_wrap .intro_con .con_btn {line-height:3rem; bottom:-1.5rem;}
	#container {height:auto;}
}

@media screen and (max-width:767px){
	/* .intro_wrap {padding:0 1rem 9rem;}
	.intro_slogan {line-height:1.1; margin-top:1.5rem;}
	.intro_con_wrap {flex-direction:column; margin-top:1.5rem;}
	.intro_con_wrap .intro_con {width:100%; padding-bottom:2.85rem;}
	.intro_con_wrap .intro_con ~ .intro_con {margin-top:2.5rem; margin-left:0;}
	.intro_con_wrap .con1 .con1_img {margin-top:0; height:7rem;}
	.intro_con_wrap .con1 .con1_img img {max-height:100%;}
	.intro_con_wrap .con1 .con1_txt {margin-top:1rem;}
	.intro_con_wrap .intro_con .con_btn {line-height:3rem; bottom:-1.5rem;}
	#container {height:auto;} */
}

@media screen and (max-width:680px){
	#wrap {align-items:start; background-position: bottom center;}
	.intro_wrap {padding-bottom:4rem;}
	.intro_slogan {font-size:2rem; word-spacing:-1.65rem;}
}

@media screen and (max-width:480px){
	.intro_slogan {font-size:1.5rem; word-spacing:-1.15rem;}
}

@media screen and (max-width:380px){
	.intro_con_wrap .intro_con {border-radius:1rem; padding:1rem 0.9rem 2.5rem;}
	.intro_con_wrap .con2 .con2_img {height:2.25rem; top:0.25rem; right:1rem;}
	.intro_con_wrap .con2 .con2_img img {max-height:100%;}
	.intro_con_wrap .con2 .con2_txt {padding:1.5rem 1rem 1rem;}
}