@import url("common.css");

/* INTRO */
.intro { position:relative; display:flex; flex-direction:column; justify-content:space-between; align-items:center; min-height:100vh; padding:50px 0; background:var(--dark_blue); overflow:hidden; box-sizing:border-box; }
.intro_bg { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.intro_bg img { display:block; width:100%; height:100%; object-fit:cover;}

.intro_top { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; width:90%; max-width: 1590px;}
.intro_logo { width:229px; height:52px; }
.intro_logo a{display: block; width: 100%; height: 100%;}
.intro_logo img { display:block; width:100%; height:auto; }
.intro_ver { font-weight:300; line-height:1; letter-spacing: 0.4px; color:var(--white); }

.intro_cont { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:30px; width:90%; max-width:1200px; padding-bottom:50px; }
.intro_tit { font-weight:400; font-size:3.125rem; line-height:130%; letter-spacing: -2.5px; color:var(--white); text-align:center; }
.intro_tit strong { font-weight:700; display: inline-block; letter-spacing: inherit; line-height: inherit;}

.intro_menu { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap:10px; width: 100%;}
.intro_menu li{box-sizing: border-box; position: relative; background: rgba(255,255,255,.05); border-radius: var(--borderR5); overflow: hidden;}
.intro_menu li::after{content: ''; display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.1); border-radius: var(--borderR5); position: absolute; left: 0; top: 0;}
.intro_menu a { display:flex; align-items:center; justify-content:center; box-sizing: border-box; color: var(--white); font-weight: 600; padding: 20px 10px; text-align: center; transition: background .3s; position: relative; z-index: 2;}
.intro_menu a:hover { background: rgba(255,255,255,.1);}

.intro_foot { position:relative; z-index:1; display:flex; justify-content:center; width:100%; }
.intro_foot p { font-weight:300; line-height: 140%; letter-spacing: 0.32px; color:var(--white); opacity:0.99; }
.intro_foot a{display: inline-block; letter-spacing: inherit; line-height: inherit; transition: all .3s;}
.intro_foot a:hover{opacity: 0.5;}



/*******************************************************************************
	@media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

}
/*******************************************************************************
	@media 1300px
*******************************************************************************/
@media all and (max-width:1300px){




}
/*******************************************************************************
	@media 980px
*******************************************************************************/
@media all and (max-width:980px){

/* INTRO */
.intro {padding:30px 0;}

.intro_logo { width:185px; height:42px; }

.intro_cont { gap:20px; padding-bottom:30px; }
.intro_tit { font-size:2.222rem; letter-spacing: -2px; }

.intro_menu a { padding: 15px 10px;}

}
/*******************************************************************************
	@media 680px
*******************************************************************************/
@media all and (max-width:680px){

/* INTRO */
.intro {padding:20px 0;}

.intro_logo { width:132px; height:30px; }
.intro_ver{font-size: 0.857rem;}
.intro_cont { gap:15px; }
.intro_tit { font-size:1.944rem; letter-spacing: -1.5px; }

.intro_menu {grid-template-columns: repeat(3, 1fr); grid-gap:5px;}
.intro_menu a { padding: 10px 5px;}

}