@CHARSET "UTF-8";

html, body, div, span, object, iframe,
p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, font, ins, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, h1, h2, h3, h4, h5, h6,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td 
{margin:0;padding:0;border:0;list-style:none;}

a, a:link{color:#000;text-decoration:none;}

html{font-size:62.5%;line-height:1.285;}
body{font-family:'Pretendard',sans-serif;font-weight:500;color:#000;-webkit-text-size-adjust:100%;font-size:1.7rem;line-height:1.6;letter-spacing:-0.025em;word-break:keep-all;}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');


.intro_wrap{position:relative; width:100%; height:100%; background-size: cover; background-position: center; background-image: url("/nanum/site/builder/skin/common/img/intro/intro_bg.jpg"); transition:.3s;}
.intro_wrap::before{content:""; position: absolute; bottom:0; left:0; width:100%; height:40%; background:linear-gradient(0deg, #fff, transparent);}

.header{padding:0 2vw; border-bottom:1px solid rgba(255,255,255,0.2);}
.header .head{display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1400px; height:80px; margin:0 auto;}
.header .head h1 a{display:flex; font-size:0; text-indent:-99999px;}
.header .head h1 a::before{content:""; display:block; width:171px; height:80px; background-image: url("/nanum/site/builder/skin/common/img/intro/logo.png"); background-position: center; background-size: 100% auto; background-repeat: no-repeat;}
.header .head .sns_icon a{display:flex; align-items:center; justify-content:center; width:38px; height:38px; font-size:0; text-indent:-99999px; border-radius:50%; background:#f9e62c;}
.header .head .sns_icon a::before{content:""; display:block; width:23px; height:22px; background-image: url("/nanum/site/builder/skin/common/img/intro/sidequick_icon02.png"); background-size: cover;}

.container{position:relative; width:100%; max-width:1400px; margin:0 auto; padding:0 2vw; box-sizing:border-box;}

.container .intro_tit{margin:50px 0 60px; text-align:center;}
.container .intro_tit .big_txt{font-size:5rem; color:#fff; font-weight:200; letter-spacing: 0; text-shadow:0 0 7px rgba(255,255,255,.7);}
.container .intro_tit .big_txt strong{font-weight:700;}
.container .intro_tit .smr_txt{margin-top:5px; margin-left:22px; text-transform:uppercase; font-family:"Poppins",sans-serif; font-size:1.7rem; color:#fff; font-weight:600; letter-spacing:22px; opacity:.6;}

.typing-txt{display:none;}

.container .link_boxs{display:flex; justify-content:space-between; gap:30px; max-width:1260px; margin:0 auto;}
.container .link_boxs .main_box{display:flex; flex-wrap:wrap; gap:30px; width:70%;}

.threed_box{position:relative; display:flex; width: calc(50% - 15px); max-width:400px; perspective: none;}
.container .link_boxs .main_box .threed_box .shadow{opacity:0; position: absolute; top:0; left:0; width:100%; height:100%; border-radius:30px; background:#162d81; transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0rem, -2rem);   filter: blur(2rem) saturate(0.9);}

.container .link_boxs .main_box .dor_box{position:relative; width:100%; border:2px solid rgba(255,255,255,.5); box-sizing:border-box; transition:.3s; transform: rotateX(var(--rotateX)) rotateY(var(--rotateY)) translate3d(0, 0, 6rem); overflow:hidden;}
.container .link_boxs .main_box .dor_box a{position:relative; display:block; width:100%; height:100%; padding:45px 35px 100px 35px; color:#fff; background:rgba(0,0,0,.3); box-sizing:border-box; transition:.3s;}
.container .link_boxs .main_box .dor_box a::after{content:""; opacity:0; position: absolute; left:0; top:0; width:100%; height:100%; border-radius:inherit; transition:opacity 500ms; background:radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(0, 0, 0, 0.2), transparent 60%); z-index:1;}
.container .link_boxs .main_box .dor_box a p{position: relative; z-index:2;}

.container .link_boxs .main_box.first{width:40%; max-width:400px;}
.container .link_boxs .main_box.first > .threed_box{width:100%;}

.container .link_boxs .tit{line-height:1; margin-bottom:30px; font-size:3.5rem; font-weight:700;}
.container .link_boxs .sub_tit{font-size:1.8rem; font-weight:600; margin-bottom:30px;}
.container .link_boxs .txt{opacity:.8; font-size:2.2rem; font-weight:400;}

.container .link_boxs .plus{position: absolute !important; right:40px; bottom:40px; display:flex; align-items:center; gap:15px; font-size:1.5rem; font-weight:600;}
.container .link_boxs .plus::after{content:""; display:block; width:19px; height:19px; background-image: url("/nanum/site/builder/skin/common/img/intro/plus_btn.png"); background-size: cover;}




.footer{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px 0; margin-top:50px; padding:30px 2vw;}
.footer .foot_info{display:flex; align-items:center; justify-content:center; text-align:center;}
.footer .foot_info li{font-size:1.6rem;}
.footer .foot_info li.tit{margin-right:30px; font-weight:700;}
.footer .foot_info li:nth-child(n+2){margin-right:15px;}
.footer .foot_info li:last-child{margin-right:0;}

.footer .copy{text-align:center; font-weight:600; font-size:1.7rem; color:#888; text-transform: uppercase;}
	
	
/****************************** 태블릿 ******************************/
@media all and (max-width:1024px){

	.none{display:none;}

	.header .head{height:60px;}
	.header .head h1 a::before{width:140px; height:60px;}
	.header .head .sns_icon a{width:30px; height:30px;}
	.header .head .sns_icon a::before{width:20px; height:19px;}
	
	.container .intro_tit .big_txt{font-size:4rem;}
	.container .intro_tit .smr_txt{font-size:1.5rem;}

	.container .link_boxs{flex-wrap:wrap;}
	.container .link_boxs .main_box{width:100%;}
	.container .link_boxs .main_box.first{width:100%; max-width:none;}
	.container .link_boxs .main_box .threed_box{max-width:none;}
	.container .link_boxs .main_box .threed_box .dor_box a{padding:35px 25px 60px 25px;}
	
	.container .link_boxs .plus{right:25px; bottom:30px;}
	
	.container .link_boxs .sub_tit{margin-bottom:10px;}
	
}

/****************************** 모바일 ******************************/
@media all and (max-width:767px){

	html{font-size:50%;}
	
	.container .intro_tit{margin:20px 0 30px;}
	.container .intro_tit .big_txt strong{display:block;}
	.container .intro_tit .smr_txt{margin-left:5px; letter-spacing: 5px;}
	
	
	.container .link_boxs{gap:10px;}
	.container .link_boxs .main_box{gap:10px;}
	.container .link_boxs .main_box .threed_box{width:100%;}
	
	.container .link_boxs .tit{font-size:3rem; margin-bottom:10px;}
	.container .link_boxs .txt{font-size:2rem;}
	
	.container .link_boxs .main_box .dor_box a{padding:25px 15px 45px 15px;}
	
	.container .link_boxs .plus{right:15px; bottom:20px;}
	
	.footer{margin-top:0;}
	.footer .foot_info{flex-wrap:wrap;}
	.footer .foot_info li{width:100%;}
	.footer .foot_info li.tit{margin-right:0; margin-bottom:10px;}
	.footer .foot_info li:nth-child(n+2){margin-right:0;}
	
}

/****************************** 웹 ******************************/
@media(min-width:1025px){
	
	.container .link_boxs .main_box .threed_box:hover{perspective: 800rem;}
	
	.container .link_boxs .main_box .threed_box:hover .shadow{opacity: 1;}
	.container .link_boxs .main_box .threed_box .dor_box:hover{border-radius:30px; border-color:transparent;}
	.container .link_boxs .main_box .threed_box .dor_box:hover a{text-shadow: 0 0 2rem rgba(0, 0, 0, 0.5); background:#0b3c9e;}
	
	.container .link_boxs .main_box .threed_box .dor_box:hover a::after {
	  opacity: 1;
	}

}