@charset "utf-8";
html, body{height: 100%;}
/* 인트로페이지 */
.intro_wrap{ position: relative;height: 100%; text-align: center;}
.intro_wrap:before{ position: absolute; content: ''; height:calc(100% - 595px); min-height: 250px; width: 100%; background: #e4e9ee; top:595px; left: 0;}
.intro_wrap .intro_box{ margin-top: 160px; display: inline-block; margin-bottom: 50px;}
.intro_box h1{font-size: 22px; font-weight: 400;}
.intro_box h1>p{padding-top: 10px;}
.intro_box ul{ margin-top: 100px; display: flex;}
.intro_box ul li{position: relative;box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 20px 100px 20px 20px; overflow: hidden; margin:0 20px; background: #fff;}
.intro_box ul li:first-of-type{border-radius: 100px 20px 20px 20px;}
.intro_box ul li *{display: block;}
.intro_box ul li a:hover{text-decoration: none;}
.intro_box ul li span{overflow: hidden;}
.intro_box ul li a span img {transition: all 0.4s; object-position: center;}
.intro_box ul li a:hover span img{transform:scale(1.1, 1.1);}
.intro_box ul li strong{ font-size: 30px; padding-top: 20px; padding-bottom: 70px;}
.intro_box ul li strong > b{font-size: 20px;}
.intro_box ul li em{position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);display: inline-block; width: 60%; padding: 15px 0px; border-radius:30px 30px 0 0; color: #fff;font-size: 18px; }
.intro_box ul li em.bg01{background: #653fd2;}
.intro_box ul li em.bg02{background: #5f8b00;}


@media all and (max-width :1024px) {
.intro_wrap{overflow: auto;}
.intro_wrap:before{ height:calc(100% - 515px); top:515px;}	
.intro_wrap .intro_box{ margin-top: 100px;}	
.intro_box ul{ margin-top: 80px; }	
.intro_box ul li{width:300px;}	
.intro_box ul li strong{ font-size: 26px; padding-bottom: 60px;}
.intro_box ul li strong > b{font-size: 16px;}
.intro_box ul li em{width: 70%; padding: 12px 0px;border-radius:20px 20px 0 0;}
	
	
}

@media all and (max-width :767px) {

.intro_wrap:before{height:230px;top:294px;min-height: inherit;}
.intro_wrap .intro_box{ margin-top: 30px;}
.intro_box h1{font-size: 16px;}
.intro_box h1 img{width: 220px;}
	
.intro_box ul{  flex-direction: column; margin-top: 30px; text-align: center;}	
.intro_box ul li{width:250px;border-radius:20px 70px 20px 20px;margin:10px auto;}
.intro_box ul li:first-of-type{border-radius: 70px 20px 20px 20px;}
.intro_box ul li span{ height: 120px;}	
.intro_box ul li a span img {height: 130px;}
	
.intro_box ul li strong{ font-size: 22px; padding-top: 10px;padding-bottom: 50px;}
.intro_box ul li strong > b{font-size: 15px;}
.intro_box ul li em{padding: 10px 0px;font-size: 15px;}
	
}