@charset "utf-8";

@font-face {
    font-family: 'SBAggro';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'SBAggro';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'SBAggro';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* 레이아웃 공통 */
.inner{max-width:1460px; margin:0 auto; }
.full{max-width:1460px; margin:0 auto;}

.hidden{display:none; opacity:0;}

@media(max-width:1480px){
	.inner{margin:0 10px;}
	/* .full{max-width:100%; margin:0 10px;} */
}

body { min-width:320px; overflow:hidden; position:relative; background: url(/hadanlib/images/intro/introbg.png) no-repeat 0 0;}
#intro {padding:50px 0 0; position:relative;}

header {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; }
header h1 {z-index:1;}
header .introsear {background:#fff; border-radius:40px; padding:10px 20px; position:relative; height:70px; width:620px; display:flex; flex-wrap:wrap;}
header .introsear label {display:flex; position:relative; align-items:center; font-size:20px; font-family: 'SBAggro'; transform:scale(0.7);}
header .introsear label:before {content:''; display:inline-block; width:43px; height:38px; background-image:url(/hadanlib/images/main/mainicon.png); background-repeat:no-repeat; background-position:-43px 0; transform: translateY(-2px);}
header .introsear label input[type="radio"] {width:0; height:0; position:absolute; opacity:0;}
header .introsear label:has(input:checked):before {background-position:0 0;}
header .introsear input[type="text"] { height:100%; padding:0 15px; width:calc(100% - 170px);}
header .introsear input[type="text"]::placeholder { font-size:22px; font-family: 'SBAggro'; font-weight:200; color:#999;}
header .introsear button {width:60px; height:60px; border-radius:50%; overflow:hidden; background: linear-gradient(to left, #115fac 0%, #e2426c 100%); position:absolute; top:5px; right:-30px;  text-indent:-9999px; box-shadow:5px 5px 10px rgba(0,0,0,0.2); transition:all .2s;}
header .introsear button:before {content:''; width:20px; height:20px; background:url(/hadanlib/images/intro/introicon.png) no-repeat 0 0; position:absolute; top:calc(50% - 10px); left:calc(50% - 10px);}
header .introsear button:hover {transform:translateX(-5px);}

header a.link {background: linear-gradient(to right, #e76587 0%, #e2426c 100%); border-radius:40px; border-radius:40px; font-family: 'SBAggro';  padding:10px 100px 7px 20px; position:relative; color:#fff; font-size:17px;}
header a.link:after {content:''; display:block; width:66px; height:58px; background:url(/hadanlib/images/intro/introicon.png) no-repeat -60px 0; position:absolute; bottom:0; right:20px;}
header a.link strong:after {content:''; display:inline-block; width:6px; height:11px; background:url(/hadanlib/images/intro/introicon.png) no-repeat -176px 0; margin-left:5px;}
header a.link strong span {font-weight:400;}
header a.link:hover {color:#ffd800; transform:translateY(-5px);}
@media(max-width:1480px){
	header .introsear {width:calc(100% - 650px); margin-left:-30px;}
}
@media(max-width:1024px){
	#intro {padding:30px 0;}
	header {flex-direction:column;}
	header .introsear {width:calc(100% - 30px); margin:20px 0 20px -30px;}
	header .introsear input[type="text"]::placeholder { font-size:18px;}
	header a.link {width:100%;}
}

@media(max-width:768px){
	header .introsear {height:auto; justify-content:center;}
	header .introsear input[type="text"] {width:100%; height:40px;}
	header .introsear input[type="text"]::placeholder {text-align:center;}
	header .introsear button {top:calc(50% - 30px);}
}

.lincon {display:flex; margin-top:100px; justify-content:space-between; flex-wrap:wrap;}

.lincon .tit {position:relative; margin-top:50px;}
.lincon .tit p.copy {margin-top:40px; font-size:22px; color:#666; line-height:1.4em;}
.lincon .link {display:flex;}
.lincon .link a {border-radius:50px 20px 50px 50px; padding:60px; display:block; width:390px; position:relative; overflow:hidden; min-height:360px; box-shadow: 28.3px 33.7px 35px 0 rgba(67, 65, 78, 0.08);}
.lincon .link a > * {position:relative; z-index:1;}
.lincon .link a:before {content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,0.8); position:absolute; top:0; left:0; opacity:0; transition:all .2s; z-index:0;}
.lincon .link a:after {content:''; display:block; width:50px; height:50px; border-radius:50%; background:#e2426c url(/hadanlib/images/intro/introicon.png) no-repeat -448px 19px; position:relative; z-index:1; transition:all .2s;}
.lincon .link a:nth-of-type(1) {background:url(/hadanlib/images/intro/lib01.jpg) no-repeat 0 0; background-size:cover;}
.lincon .link a:nth-of-type(2) {background:url(/hadanlib/images/intro/lib02.jpg) no-repeat 0 0; background-size:cover;  margin-left:50px; transform:translateY(40px);}
.lincon .link a > strong {display:block; font-family: 'SBAggro'; font-size:26px; font-weight:400;}
.lincon .link a > strong span {color:#e2426c; }
.lincon .link a > span {display:block; line-height:1.4em; margin:10px 0 80px 0;  font-family: 'SBAggro'; font-size:18px; font-weight:200;}
.lincon .link a:hover:before {opacity:1;}
.lincon .link a:hover > * {color:#fff!important;}
.lincon .link a:hover:after {background:#fff url(/hadanlib/images/intro/introicon.png) no-repeat -364px 19px;}
.lincon .link a:hover > strong span {color:#fff; }
@media(max-width:1480px){
	.lincon .tit {width:35%;}
	.lincon .link {width:60%;}
	.lincon .link a:nth-of-type(2) {margin-left:20px;}
}
@media(max-width:1024px){
	.lincon {margin-top:0px;}
	.lincon .tit {width:100%; margin-bottom:20px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;}
	.lincon .tit p.img {width:40%;}
	.lincon .tit p.copy {width:55%; font-size:18px;}
	.lincon .link {width:100%; gap:20px;}
	.lincon .link a {min-height:auto; width:calc(50% - 10px);}
	.lincon .link a > span {margin:10px 0 30px 0;}
	.lincon .link a:nth-of-type(2) { transform:translateY(0px); margin-left:0;}
}
@media(max-width:768px){
	.lincon .tit p.img {width:100%;}
	.lincon .tit p.copy {width:100%;}
	.lincon .link a {padding:30px;}	
}
@media(max-width:480px){
	.lincon .link {flex-wrap:wrap;}
	.lincon .link a {width:100%;}
}

.alim {position:relative; padding-bottom:50px;}
.alim > * { z-index:1; position:relative;}
.alim:after {content:''; display:block; width:5000px; height:calc(100% - 200px);background:#fff; position:absolute; bottom:0; left:-100px; z-index:0; border-radius:100px 0 0 0;}
/*.alim:before {content:''; display:block; width:662px; height:295px; background:url(/hadanlib/images/intro/intro-illust.png) no-repeat 0 0; z-index:1; position:relative;}*/
.alim h3 {padding:30px 0;}
.alim h3 strong {font-family: 'SBAggro'; font-size:36px; font-weight:400; margin-right:20px;}
.alim h3 strong em {color:#e2426c;}
.alim h3 span {font-size:18px;}
 
.intro_notice .tabmenu {font-family: 'SBAggro'; font-size:20px; font-weight:400; display:flex;  color:#888; }
.intro_notice .tabmenu li:after {content:'/'; display:inline-block; font-weight:200; font-size:14px; margin:0 20px; transform:translateY(-3px); color:#dedede;}
.intro_notice .tabmenu li:last-child:after {display:none;}
.intro_notice .tabmenu li a {position:relative; color:#888; line-height:1.4em;}
.intro_notice .tabmenu li.active a{color:#333;}
.intro_notice .tabmenu li.active a:after {content:''; display:inline-block; width:11px; height:11px; border-radius:50%; background:#e2426c; transform:translateY(-10px);}
.intro_notice .tabmenu li.active span {border-bottom:1px solid #888;}

.noticewrap {font-family: 'SBAggro';  margin-top:60px; position:relative;}
.noticewrap .noticeSwiper {overflow:hidden; }
.noticewrap .noticeSwiper li {position:relative;}
.noticewrap .noticeSwiper li:after {content:''; display:block; width:1px; height:100%; border-right:1px dashed #dedede; position:absolute; top:0; right:-40px;}
.noticewrap .noticeSwiper a span.type { border-radius:20px 20px 20px 3px; padding:9px 20px 5px 20px; display:inline-block;}
.noticewrap .noticeSwiper a span.type.t01 {background:#f3f0f5; color:#5646b4;}
.noticewrap .noticeSwiper a span.type.t02 {background:#f2f8f9; color:#278f93;}
.noticewrap .noticeSwiper a p.title {line-height:1.4em; margin-top:20px; font-size:18px; text-overflow: ellipsis; height:2.8em;  display: -webkit-box; overflow:hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.noticewrap .noticeSwiper a p.ndate {color:#666; font-family: 'Pretendard'; margin-top:30px;}

.noticewrap .controll {position:absolute; top:-115px; right:0; width:calc(100% -  370px); display:flex; justify-content:flex-end; align-items:center;}
.noticewrap .controll:before {content:''; display:inline-block; width:calc(100% - 160px); height:1px; background:#dedede;}
.noticewrap .controll button {width:70px; height:70px; background:#fff; border-radius:50%; box-shadow:10px 10px 15px rgba(0, 0, 0, 0.1); overflow:hidden; text-indent:-9999px; z-index:1; position:relative;}
.noticewrap .controll button.swiper-prev {background:#e4597e url(/hadanlib/images/intro/introicon.png) no-repeat -216px 28px; transform:translateX(10px);}
.noticewrap .controll button.swiper-next {background:#fff url(/hadanlib/images/intro/introicon.png) no-repeat -288px 28px;}


@media(max-width:1024px){
	.alim {margin-top:50px;}
	.alim > img {display:none;}
	.alim:after {height:100%;  left:0px;}
}

@media(max-width:768px){	
	.alim h3 span {font-size:18px; display:block;}
	.intro_notice .tabmenu li:after {font-size:12px; margin:0 10px;}
	.noticewrap {margin-top:20px;}
	.noticewrap .noticeSwiper li:after {right:-20px;}		
	.noticewrap .controll {position:relative; top:auto; right:auto; width:auto; transform:scale(0.8); justify-content:center;}
	.noticewrap .controll:before {display:none;}	
	.noticewrap .noticeSwiper a p.ndate {margin-top:10px;}
}



footer {background:#17191c; color:rgba(255,255,255,0.7); padding:60px 0;}
footer > div.inner {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}

footer .footinfo {display:flex; align-items:center; gap:60px; font-size:16px;}
footer .footinfo div div {display:flex; align-items:center; }
footer .footinfo div div p strong {color:#fff; margin-right:10px;}
footer .footinfo div div p:nth-of-type(1):after {content:''; display:inline-block; width:1px; height:10px; background:rgba(255,255,255,0.4); margin:0 15px;}

footer .footlink a {border:1px solid rgba(255,255,255,0.4); border-radius:50px; padding:15px 30px; display:flex; align-items:center;}
footer .footlink a:after {content:''; display:inline-block; width:29px; height:29px; background:url(/hadanlib/images/intro/introicon.png) no-repeat right 0; margin-left:10px; transition:all .2s;}
footer .footlink a:hover {border:1px solid rgba(255,255,255,1); color:rgba(255,255,255,1);}
footer .footlink a:hover:after {transform:translateX(10px);}

@media(max-width:1280px){
	footer .footinfo div div {display:flex; align-items:center; flex-direction:column; align-items:flex-start;}
	footer .footinfo div div p:nth-of-type(1):after {display:none;}
}
@media(max-width:1024px){
	footer {padding:30px 0;}
	footer .footinfo {display:flex; flex-direction:column; align-items:center; width:100%; gap:20px;}
	footer .footlink {margin:10px auto 0;}
}
@media(max-width:768px){
	footer .footinfo { font-size:13px;}	
}