@charset "UTF-8";

:root{
	--color-main01: rgb(242, 150, 0);
	--color-main02: rgb(0, 159, 80);
}

html,body{width:100%; height:100%;}
.w1600{width:1600px; margin:0 auto;}

div.intro-wrap{background:url(../img/intro_bg.png) no-repeat center /cover; width:100%; min-height:100%; display: flex; align-items: center;}
div.intro-wrap div.w1600{position: relative; min-height:auto;}

div.intro-container h1.header-tit{font-size: 2.625rem; color: #fff; font-family: "Pretendard-Medium" , sans-serif; text-align: right; letter-spacing:0.05em; line-height: 1.5; word-break:keep-all; text-shadow: 0 4px 10px rgba(0,0,0,.25); margin-bottom: 6rem; padding-top: 6rem;}
div.intro-container div.item-wrap{width: 45%;}
div.intro-container div.item-wrap div.item{position: relative; overflow: hidden; border: 2px solid #fff; box-sizing: border-box; padding: 2rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(6px); box-shadow: 0 15px 20px rgba(0,0,0,.2); -webkit-backdrop-filter: blur(6px); transition: 03.s; -webkit-transition:0.3s;}
div.intro-container div.item-wrap div.item::after{content: ''; position: absolute; width: 10rem; height: 10rem; bottom: -1.25rem; right: 0; opacity: .4;}
div.intro-container div.item-wrap div.item.item01{margin-bottom: 1.5rem;}
div.intro-container div.item-wrap div.item.item01::after{ background: url('../img/ico_item01.png') center/100% no-repeat;}
div.intro-container div.item-wrap div.item.item02::after{bottom: -0.5rem; background: url('../img/ico_item02.png') center/100% no-repeat;}
div.intro-container div.item-wrap div.item p{color: #fff;}
div.intro-container div.item-wrap div.item p.name{font-family: "Pretendard-ExtraBold" , sans-serif; font-size: 2rem; margin-bottom: 0.625rem;}
div.intro-container div.item-wrap div.item p.txt{font-size: 1.5rem; margin-bottom: 2.5rem; word-break:keep-all;}
div.intro-container div.item-wrap div.item a.btn{color: #fff; padding: 0.8rem 4.75rem 0.8rem 1.25rem; font-size: 1.375rem; position: relative; transition: 03.s; -webkit-transition:0.3s;}
div.intro-container div.item-wrap div.item a.btn::after{position: absolute; content: ''; display: block; width: 1.25rem; height: 1.25rem; top: 50%; right: 1.25rem; transform: translateY(-50%); background: url('../img/ico_arrow_wh.svg') center/cover no-repeat;}
div.intro-container div.item-wrap div.item.item01 a.btn{background: var(--color-main01);}
div.intro-container div.item-wrap div.item.item02 a.btn{background: var(--color-main02);}
div.intro-container div.footer{width: 100%; height:fit-content; color: #fff; text-align: center; padding-top: 4.5rem; position:relative;}
div.intro-container div.footer div.info-wrap{padding-bottom:1rem;}
div.intro-container div.footer div.info-wrap p.info{font-family: "Pretendard-Medium" , sans-serif;}
div.intro-container div.footer div.info-wrap p.copy{font-size: 0.9rem; margin-top: 0.25rem;}
div.intro-container div.footer div.f-logo{width: 14rem; position: absolute; right: 0; bottom: 0; padding-bottom:1rem;}
div.intro-container div.footer div.f-logo img{width: 100%; height: 100%; object-fit: contain;}

@media(hover: hover) {
	div.intro-container div.item-wrap div.item01:hover{border-color:rgba(242, 150, 0, 0); background:rgba(242, 150, 0, .7); box-sizing: border-box;}
    div.intro-container div.item-wrap div.item01:hover a.btn{background: #fff; color: var(--color-main01); }
    div.intro-container div.item-wrap div.item01:hover a.btn::after{background: url('../img/ico_arrow01.svg') center/cover no-repeat;}
    div.intro-container div.item-wrap div.item02:hover{border-color:rgba(0, 159, 80, 0); background:rgba(0, 159, 80, .7); box-sizing: border-box;}
    div.intro-container div.item-wrap div.item02:hover a.btn{background: #fff; color: var(--color-main02);}
    div.intro-container div.item-wrap div.item02:hover a.btn::after{background: url('../img/ico_arrow02.svg') center/cover no-repeat;}
    div.intro-container div.item-wrap div.item a.btn:hover{box-shadow: 0 8px 15px rgba(0,0,0,.15);}
}

@media screen and (max-width: 1600px){
	.w1600{width:90%;}
}

@media screen and (max-width: 1440px){
    div.intro-container h1.header-tit{font-size:2.5rem; margin-bottom:4.5rem; padding-top:4rem;}
    div.intro-container div.item-wrap{width:50%;}
    div.intro-container div.item-wrap div.item::after{width: 8rem; height: 8rem; bottom: -1rem;}
    
}

@media screen and (max-width: 1280px){
    div.intro-container div.item-wrap div.item p.name{font-size: 1.8rem;}
    div.intro-container div.item-wrap div.item p.txt{font-size:1.25rem;}
    div.intro-container div.item-wrap div.item a.btn{font-size:1.25rem;}
    div.intro-container div.footer{padding-top: 4rem; position:unset;}
    div.intro-container div.footer div.f-logo{position:unset; margin: 0 auto;}
}

@media screen and (max-width: 1024px){
    div.intro-container h1.header-tit{font-size: 2.25rem; margin-bottom: 4rem;}
    div.intro-container div.item-wrap div.item{padding: 2rem 1.5rem;}
}

@media screen and (max-width: 800px){
    div.intro-container h1.header-tit{font-size: 1.8rem; text-align: center;}
    div.intro-container div.item-wrap{width: 100%;}
}

@media screen and (max-width: 640px){
    div.intro-container div.item-wrap div.item{padding: 1.5rem;}
    div.intro-container div.item-wrap div.item::after{width: 6.5rem; height: 6.5rem; bottom: -0.7rem;}
}

@media screen and (max-width: 480px){
    div.intro-container h1.header-tit{font-size: 1.6rem;}
    div.intro-container div.item-wrap div.item p.name{font-size: 1.5rem;}
    div.intro-container div.item-wrap div.item p.txt{margin-bottom: 2rem; font-size:1.125rem;}
    div.intro-container div.item-wrap div.item a.btn{font-size: 1.125rem; padding: 0.6rem 3.75rem 0.6rem 1rem;}
    
}

@media screen and (max-width: 400px){
    div.intro-container h1.header-tit{padding-top: 2.5rem; margin-bottom: 2.5rem;}
}

@media screen and (max-width: 320px){

}