* {word-break:keep-all;  line-height: 1.5; transition: all 0.3s ease-in-out;}
body { background: url(/resources/_Img/intro/bg.png) no-repeat top center; object-fit: cover;  box-sizing: border-box; font-family: "Pretendard", sans-serif;   }
#intro-wrap { position:relative; text-align:center; margin: 0 auto; max-width:1710px; min-height:860px; padding: 0 20px;}
#header { text-align: left; padding-top: 50px; }
#header .logo { display: flex; gap: 15px;}

#contents { margin: 0 auto; max-width: 1320px; padding-top: 65px;}
#contents .tit_flex { display: flex; justify-content: space-between; align-items: center;}
#contents .deco > img { display: block; max-width: 42px; padding-bottom: 10px;}
#contents h2 { color:#103E8C; font-size:80px; font-weight:900; text-shadow: 0 2px 4px rgba(255, 255, 255, 0.7); padding-top: 25px;  }
#contents .slogan { text-align: left; font-size:24px; color:#1A1B20; font-weight: 600; }

#contents .ilink-list { position:relative; text-align:center; margin:0 auto; display:flex; gap: 40px; padding-top: 115px; flex-wrap: wrap; align-items: center; justify-content: center;}
#contents .ilink-list li { display:block; width: calc((100% - 80px) / 3); }
#contents .ilink-list li .box { position:relative; background: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); border-radius: 30px 30px 0 0; }
#contents .ilink-list li .box::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 46%;  border-radius: 30px 30px 0 0;}
#contents .ilink-list li:nth-child(1) .box:before { background: #2A7FFE; }
#contents .ilink-list li:nth-child(2) .box:before { background: #FF5C67; }
#contents .ilink-list li:nth-child(3) .box:before { background: #3A4565; }

#contents .ilink-list li a { width: 100%; display: block; height: 53px; border-radius: 15px; color: #fff; margin-top: 13px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); font-size: 30px; line-height: 1.7; font-weight: 600;}
#contents .ilink-list li:nth-child(1) a { background: #2A7FFE; }
#contents .ilink-list li:nth-child(2) a { background: #FF5C67; }
#contents .ilink-list li:nth-child(3) a { background: #3A4565; }
#contents .ilink-list li:nth-child(1) a:hover { background: #1b52a5; }
#contents .ilink-list li:nth-child(2) a:hover  { background: #ad3e46; }
#contents .ilink-list li:nth-child(3) a:hover  { background: #262d42; }


#contents .ilink-list li:nth-child(1) .dp_name { color: #2A7FFE; }
#contents .ilink-list li:nth-child(2) .dp_name { color: #FF5C67; }
#contents .ilink-list li:nth-child(3) .dp_name { color: #3A4565; }

#contents .ilink-list li .ilink_txt { padding: 0 10px 30px;}
#contents .ilink-list li .dp_name { padding: 200px 0 10px; font-size: 30px; font-weight: 800;}
#contents .ilink-list li .dp_ex { color: #1B1B1B; font-size: 18px;   line-height: 1.3;}

#contents .ilink-list li .intro_img { position: absolute; left: 50%; top: -70px; transform: translateX(-50%); width: 100%; padding: 0 10px;}
#contents .ilink-list li .intro_img > img { display: block; max-width: 360px; transition: all 0.3s ease-in-out; margin: 0 auto; }

#footer { color:#72767F; padding: 50px 0 20px; font-size: 13x; }

@media all and (max-width:1200px) {
	#contents .ilink-list { gap: 30px; }
	#contents .ilink-list li { width: calc((100% - 60px) / 3); }
	#contents h2 { font-size: 65px; padding-top: 20px; }
	#contents .slogan { font-size:22px;}
	#contents .deco > img { max-width: 40px;  }
	#contents .ilink-list li .dp_name { font-size: 25px; padding: 143px 0 7px; }
	#contents .ilink-list li .dp_ex { font-size: 16px; }

	#contents .ilink-list li .intro_img > img { max-width: 305px;}
	#contents .ilink-list li a  { font-size: 25px; height: 47px;}
}

@media all and (max-width : 1100px) {
	#contents h2 { font-size: 55px; padding-top: 7px; }
	#contents .ilink-list { gap: 25px; }
	#contents .ilink-list li { width: calc((100% - 50px) / 3); }
	#contents .ilink-list li .ilink_txt { padding: 0 10px 24px; }
}

@media all and (max-width : 1024px) {
	#contents { padding-top: 60px;}
	#contents .ilink-list { gap: 20px; padding-top: 120px;}
	#contents .ilink-list li { width: calc((100% - 40px) / 3); }
	#contents h2 { font-size: 50px; padding: 5px 20px ;}
	#contents .slogan { font-size:20px;}
	#contents .deco > img { max-width: 38px;  }
	#contents .ilink-list li a .intro_img > img { max-width: 275px;}
}
@media all and (max-width:981px) {
	body { background: url(/resources/_Img/intro/bg_m.png) no-repeat top center ;}
	#contents .tit_flex { display: block;}
	#contents .tit_flex .txt_left { padding-top: 15px;}
	#contents .deco > img { margin: 0 auto;  }
	#contents .slogan { text-align: center;}
	#contents .ilink-list li { min-width: 350px; }
	#contents .ilink-list li:not(:last-child) { margin-bottom: 90px;}
	#contents .ilink-list li a .intro_img > img { max-width: 250px; }
}

@media all and (max-width:786px) {
	#header .logo img { height: 35px; display: block;}
  #contents { padding-top: 40px;}
	#contents h2 { font-size: 45px; padding: 5px 15px ;}
	#contents .slogan { font-size:18px;}
	#contents .deco > img { max-width: 36px;  }
	#contents .ilink-list { display:block; padding-top: 95px;}
	#contents .ilink-list li { width: 100%; }
	#contents .ilink-list li .dp_name { font-size: 22px; padding: 115px 0 5px; }
	#contents .ilink-list li .ilink_txt { padding: 0 10px 20px;}
	#contents .ilink-list li .intro_img > img { max-width: 262px;  }
}

@media all and (max-width:600px) {
	#contents h2 { font-size: 35px;}
}

@media all and (max-width:555px) {
	#contents .slogan { font-size:16px;}
}