/* 공용서식 */



/*intro*/

 html , body , #wrap , .intro-container , .intro{height: 100%;}
 .intro-h{position: fixed; top: 15px; left: 3%; z-index: 999;}
.intro{width: 100%; overflow: hidden; position: relative;}
.intro > img{width: 100%; height: 100%; animation: bigimg 3s ease-in-out; object-fit: cover;}
.intro .PC{display: block;}
.intro .TA{display: none;}
.intro .MO{display: none;}
.intro .MO2{display: none;}
.main-txt{width: 900px; position: absolute; top: 50%; left: 50%;  transform: translate(-50% , -50%); text-align: center;}
.intro .tit h2{font-size: 7rem; color: #fff; line-height: 70px;}
.intro .tit h2::before ,.intro .tit h2::after{content: ''; display: block;  width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); }
.intro .tit h2::before{margin-bottom: 20px;}
.intro .tit h2::after{margin-top: 24px;}
.intro .tit h2 span{font-size: 8rem; font-weight: 700; color: #ffe788;}
.intro .tit .mark{display: flex; justify-content: center; gap: 30px;  margin-top: 15px;}
.intro .tit .mark img:nth-child(1){object-position: top;}
.intro .tit .mark img:nth-child(3){ object-position: bottom;}
.intro .tit h3{font-size: 7rem; font-weight: 700; color: #fff7d5;}
.intro .link{width: 85%; display: flex; margin: 60px auto 0; border-radius: 50px; overflow: hidden;}
.intro .link li{width: 50%; transition: all 0.4s ease;}
.intro .link .link-1{background: #0092a8;}
.intro .link .link-2{background: #076cdd;}
.intro .link li a{display: flex; justify-content: center; align-items: center; gap: 20px;}
.intro .link li p{font-size: 3.5rem; font-weight: 700; color: #fff; line-height: 95px;}
.intro .link li .go{width: 50px; height: 50px; border-radius: 100%;}
.intro .link .link-1 .go{background: #014751;}
.intro .link .link-2 .go{background: #03346c;}
.intro .link li .go span{ font-size: 1.8rem; line-height: 48px;}
.intro .link .link-1 .go span{color: #4be7ff;}
.intro .link .link-2 .go span{color: #78b8ff;}
.intro .link li:hover{background: #fff;}
.intro .link .link-1:hover p{color: #0092a8;}
.intro .link .link-2:hover p{color: #076cdd;}


@keyframes bigimg{
	0% {
		transform: scale(1.2)
	}

	100% {
		transform: scale(1)
	}
}


		
		
	/* 1025px 이상 해상도 데스크탑  */




	/* 태블릿, 아이패드(세로)  */
	@media screen and (max-width: 1400px) {
		.intro{width: 100%; background: url(../images/intro-bg-1024.png) no-repeat center top / cover;}
		.intro-h img{width: 129px;}
		.intro .PC{display: none;}
		.intro .TA{display: block;}
		.intro .MO{display: none;}
		.intro .MO2{display: none;}
		.main-txt{width: 500px;}
		.intro .tit h2{font-size: 3.7rem; line-height: 38px;}
		.intro .tit h2 span{font-size: 4.2rem;}
		.intro .tit .mark{display: flex; justify-content: center; gap: 12px;  margin-top: 12px;}
		.intro .tit .mark img{width: 14px;}
		.intro .tit .mark img:nth-child(1){object-position: top;}
		.intro .tit .mark img:nth-child(3){ object-position: bottom;}
		.intro .tit h3{font-size: 3.7rem;}
		.intro .link{margin: 30px auto 0;}
		.intro .link li p{font-size: 1.8rem; line-height: 50px;}
		.intro .link li a{gap: 10px;}
		.intro .link li .go{width: 30px; height: 30px;}
		.intro .link li .go span{font-size: 1.1rem; line-height: 30px;}
	}
	

	/* 모바일  */
	@media screen and (max-width:1023px){
		.intro .PC{display: none;}
		.intro .TA{display: none;}
		.intro .MO{display: block; animation: unset; object-position: bottom;}
		.intro .MO2{display: none;}
		.main-txt{top: 250px;}
	}


	@media screen and (max-width: 767px){
		.main-txt{width: 92%; top: 200px;}
		.intro .tit h2{font-size: 3.1rem;}
		.intro .tit h2 span{font-size: 3.8rem;}
		.intro .tit .mark h3{font-size: 3.1rem;}
		.intro .tit .mark img{width: 12px;}
		.intro .link li p{font-size: 1.6rem; line-height: 40px;}
		.intro .tit h2::before{margin-bottom: 15px;}
		.intro .tit h2::after{margin-top: 15px;}

	}

	@media screen and (max-width: 479px){
		.intro-h{display : flex; justify-content: center;}
		.intro{background: #666c76;}
		.intro .MO{display: none;}
		.intro .MO2{display: block; object-fit: contain; object-position: bottom; animation : unset}
		.intro .tit h2{font-size: 2.2rem; line-height: 22px;}
		.intro .tit h2 span{font-size: 2.8rem;}
		.intro .tit .mark h3{font-size: 2.2rem;}
		.intro .tit .mark img{width: 8px;}
		.intro .link li p{font-size: 1.2rem;}
		.main-txt{top: 220px;}
		.intro .MO{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
		.intro .link{width: 60%; flex-direction: column; border-radius: unset; row-gap: 15px; margin: 20px auto 0;}
		.intro .link li{width: 100%; border-radius: 50px;}
		
	}