@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");	

@import url('https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo.css');



html {position: relative; height: 100%; min-height: 100%; margin: 0; -webkit-text-size-adjust:none;}
body {position: relative; width: 100%; height: auto; min-height: 100%; font-family: 'Pretendard','Pretendard'; overflow-y: auto; overflow-x: hidden; letter-spacing: -0.5px; color:#303030; word-break:keep-all; background: #fff }
*, *::before, *::after {padding:0; margin:0; box-sizing: border-box; line-height: 150%; word-break: keep-all}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;font-family: 'Pretendard','Pretendard'; word-break:keep-all; color: #000}
input,button,textarea,select{font-family: 'Pretendard','Pretendard'; color:#000; word-break:keep-all;}
ul {list-style-type: none; padding-inline-start: 0;}
a {text-decoration: none; color: inherit}
table{padding:0; border:0; border-spacing:0px; border-collapse:collapse;}
th, td{padding:0;}
button {border: none; background:none; cursor: pointer;}
input:focus, select:focus, option:focus, textarea:focus, button:focus{outline: none;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
textarea:focus {outline:none;}

.inner{padding: 0 25px}


.in_box{height:100vh; display: flex;
justify-content: center;
    align-items: center;}

.hidden {display: none;}
input {height: 44px; border-radius: 5px; border: 1px solid #E0E0E0; padding: 0 10px; font-size: 16px; width: 100%; line-height: 42px; background: #fff}
input::placeholder {color:#696E77;}
input:focus, textarea:focus {}
textarea {height: 120px; border-radius: 5px; border: 1px solid #E0E0E0; padding: 10px 10px; font-size: 16px; width: 100%; resize: none; display: block; background: #fff; text-align: left}
textarea::placeholder {color:#696E77;}

textarea:disabled{background: #F4F4F4; color: #696E77}

div::-webkit-scrollbar {width:18px; height: 3px;}
div::-webkit-scrollbar-thumb {background-color: #e1e1e1; background-clip : padding-box; border: 5px solid transparent;}
div::-webkit-scrollbar-track {background:none;}

input[type="text"]:disabled{background: #F4F4F4; color: #696E77}

select {height: 44px; border-radius: 5px; border: 1px solid #F4F4F4; padding: 0 10px; font-size: 16px; width: 100%; line-height: 42px; background: #F4F4F4}


input[type="checkbox"]{display: none}
input[type="checkbox"] + label{font-size: 14px; display: flex; align-items: center; gap:5px}

input[type="checkbox"] + label::before{width: 10px; height: 10px; border: 1px solid #000; display: block; content: ''}

input[type="checkbox"]:checked + label::before{width: 10px; height: 10px; border: 1px solid #0063F9; display: block; background: #0063F9}

input[type="radio"]{display: none}
input[type="radio"] + label{width: 24px; height: 24px; background: url(../images/radio.png); background-repeat: no-repeat; background-size: 24px auto; display: block}

input[type="radio"]:checked + label{background-image: url(../images/radio_on.png)}


/*
*::-webkit-scrollbar {
    width: 12px;
  }
*::-webkit-scrollbar-thumb {
    background-color: #204F97;
    border-radius: 10px;
    background-clip: padding-box;
    border: 3px solid transparent;
  }
*::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
  }
*/


.f10{font-size: 10px}
.f11{font-size: 11px}
.f12{font-size: 12px}
.f13{font-size: 13px}
.f14{font-size: 14px}
.f15{font-size: 15px}
.f16{font-size: 16px}
.f17{font-size: 17px}
.f18{font-size: 18px}
.f19{font-size: 19px}
.f20{font-size: 20px}
.f21{font-size: 21px}
.f22{font-size: 22px}
.f23{font-size: 23px}
.f24{font-size: 24px}
.f25{font-size: 25px}
.f26{font-size: 26px}
.f27{font-size: 27px}
.f28{font-size: 28px}
.f29{font-size: 29px}
.f30{font-size: 30px}
.f35{font-size: 35px}
.f40{font-size: 40px}
.f45{font-size: 45px}

.emt10{height: 10px}
.emt20{height: 20px}
.emt30{height: 30px}
.emt40{height: 40px}
.emt50{height: 50px}
.emt60{height: 60px}
.emt70{height: 70px}
.emt80{height: 80px}
.emt90{height: 90px}
.emt100{height: 100px}
.emt110{height: 110px}
.emt120{height: 120px}
.emt130{height: 130px}
.emt140{height: 140px}
.emt150{height: 150px}


.in_box{height:100vh; display: flex;
justify-content: center;
    align-items: center; background: #000; flex-direction: column; gap:40px; padding: 25px}

.intro_warp{ display: flex; overflow: hidden; padding: 20px; gap:20px; max-width: 1200px; width: 100%}
.intro_warp a{flex:1; background-size: cover; 
display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; position: relative; overflow: hidden; border-radius: 20px;
    aspect-ratio: 1;}



.intro_warp a .bg{ background-size: cover; position: absolute; 
left: 0; top: 0; width: 100%; height: 100%; opacity: .5; transition-duration: .8s}

.intro_warp a:hover .bg{opacity: 1; scale:1.05}

.intro_warp a:first-child .bg{background-image: url(../../intro/introimg/bg01.png)}
.intro_warp a:last-child .bg{background-image: url(../../intro/introimg/bg02.png)}

.intro_warp a *{color: #fff; word-break: keep-all}
.intro_warp a h2{font-size: 30px; z-index: 2}
.intro_warp a p{font-weight: 24px; font-weight: 600; margin-top: 15px; z-index: 2}

.custom-cursor{color: #fff}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  display: none; /* 기본적으로 숨김 */
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 150px;
  pointer-events: none;
  transform: translate(-100%, -100%);

  user-select: none;
  z-index: 9999;
  border: 1px solid #fff;
  gap:20px; display: flex;
}



@media all and (max-width:1280px){
	
	.intro_warp a h2{font-size: 40px}
	.intro_warp a p{margin-top: 5px; font-size: 18px}
	
}

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

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

.intro_warp {
    flex-direction: column;
}	


.in_box{gap:25px}
.intro_logo{max-width: 240px}
	
	
}

@media all and (max-width:600px){
	
	
	.intro_warp a h2{font-size: 24px}
	.intro_warp a p{margin-top: 2px; font-size: 14px}	
	

}