@charset "utf-8";
/**
 * @File Name : intro.css
 * @Description : 인트로
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2024.04.05 | 김효진 | 최초 등록
 * </pre>
 * @author 디자인팀 김효진
 * @since 2024.04.05
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/*  김해가야체 */
@font-face {
	font-family: 'GimhaeGaya';
	src: url('//fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/GimhaeGayaR.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'GimhaeGaya';
	src: url('//fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/GimhaeGayaB.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}
          

/* 에스코어드림 */
@font-face {
     font-family: 'S-CoreDream';
     src: url('//fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
     font-weight:500;
     font-style: normal;
}

[lang|='ko'],
[lang|='ko']>*{
	font-family:
		'S-CoreDream',
		'돋움',Dotum,
		Helvetica,'Helvetica Neue',
		Arial,sans-serif;font-weight:500;letter-spacing:-.05em;
}

html, body, #intro1, #intro1 .datalist {height: 100%;}
#intro1 .datalist:after {content:"";display:block;clear:both;}
#intro1 .datalist .item {position:relative;float:left;width:17%;height: 100%;background:linear-gradient(to right, #f9f9f9, #fff 60%);box-sizing:border-box;transition:width .4s ease;text-align:center}
#intro1 .datalist .item .wrap1 {display:block;width:100%;height:100%;padding:37vh 40px 110px;box-sizing:border-box;border-left:1px solid #ddd;}
#intro1 .datalist .item .wrap1 .h1 {font-family:"GimhaeGaya", sans-serif;font-size:40px;line-height:46px;font-weight:600;letter-spacing:-.07em;color:#000}
#intro1 .datalist .item .wrap1 span {display:block;}
#intro1 .datalist .item .wrap1 .h1:before {content:"";display:none;width:175px;height:131px;background:url(../../img/intro_sprite.png) no-repeat;margin:auto auto 15px;}
#intro1 .datalist .item.over {width:49%;background-repeat:no-repeat;background-position:0 bottom;background-size:cover;}
#intro1 .datalist .item.over .wrap1 {border-left:0;}
#intro1 .datalist .item.over .wrap1 .h1 {font-size:54px;line-height:60px;color:#fff}
#intro1 .datalist .item.over .wrap1 .h1:before {display:none}
#intro1 .datalist .item.over .wrap1 .h1 .year {display:block;color:#fff}
#intro1 .datalist .item.n1.over .wrap1 .h1 span {color:#26f2ff}
#intro1 .datalist .item.n2.over .wrap1 .h1 span {color:#c9fdf9}
#intro1 .datalist .item.n3.over .wrap1 .h1 span {color:#26f2ff}
#intro1 .datalist .item.n4.over .wrap1 .h1 span {font-size: 35px !important;display:block;color:#fcfdc9}
#intro1 .datalist .item.over .wrap1 .gimhae {font-size:30px;font-weight:500;color:#fff;display:block;letter-spacing:-.03em;}
#intro1 .datalist .item .b1.more {display:block;width:190px;height:46px;border:1px solid #fff;border-radius:25px;box-sizing:border-box;color:#fff;text-align:center;font-size:17px;line-height:44px;margin-top:10px;}

#foot {display:none}
.foot {display:none}
.foot .sns1 {margin-bottom:15px;margin-left:0;padding:0;list-style:noe;}
.foot .sns1 li {display:inline-block;vertical-align:top;}
.foot .sns1 li a {display:block;width:48px;height:48px;background:url(../../img/intro_sprite.png) no-repeat;}
.foot .sns1 li.blog a {background-position:0 -133px}
.foot .sns1 li.twitter a {background-position:-50px -133px}
.foot .sns1 li.facebook a {background-position:-100px -133px}
.foot .sns1 li.youtb a {background-position:-150px -133px}
.foot .sns1 li.kakaostory a {background-position:-201px -133px}
.foot .sns1 li.insta a {background-position:-251px -133px}
#intro1 .datalist .item.over .foot {display:block;position:absolute;bottom:0;left:0;width:100%;padding:35px 40px;box-sizing:border-box;font-size:17px;color:#fff;line-height:23px}
@media screen and (min-width:1260px){
	
	#intro1 .datalist .item .wrap1 .h1:before {display:block;}
	#intro1 .datalist .item .wrap1 .h1 .year,#intro1 .datalist .item .wrap1 .gimhae, #intro1 .datalist .item .b1.more {opacity:0;}
	#intro1 .datalist .item .b1.more {margin-top: -375px;}
	#intro1 .datalist .item.over .b1.more {opacity:1;margin-left: 40px;margin-right:auto;margin-top: -375px;margin-bottom: 0;}
	#intro1 .datalist .item.n1.over .b1.more, #intro1 .datalist .item.n3.over .b1.more {margin-left:auto;margin-right: 40px;margin-top: -375px;margin-bottom: 0;}
	/* 배경 */
	#intro1 .datalist .item.n1.over {background-image:url(../../img/intro_bg1.jpg);text-align:right;}
	#intro1 .datalist .item.n2.over {background-image:url(../../img/intro_bg2.jpg);text-align:left;}
	#intro1 .datalist .item.n3.over {background-image:url(../../img/intro_bg3.jpg);text-align:right;}
	#intro1 .datalist .item.n4.over {background-image:url(../../img/intro_bg4_2.jpg);text-align:left}
	/* 아이콘 */
	#intro1 .datalist .item.n1 .wrap1 .h1:before {background-position:0 0}
	#intro1 .datalist .item.n2 .wrap1 .h1:before {background-position:-177px 0}
	#intro1 .datalist .item.n3 .wrap1 .h1:before {background-position:-354px 0}
	#intro1 .datalist .item.n4 .wrap1 .h1:before {background-position:-531px 0}
}
@media screen and (max-width:1639px){
	#intro1 .datalist .item .wrap1 {padding-left:10px;padding-right:10px;}
	#intro1 .datalist .item .wrap1 .h1 {font-size:32px;line-height:36px}
	#intro1 .datalist .item.over .wrap1 .h1 {font-size:43px;line-height:48px}
	#intro1 .datalist .item.over .wrap1 {padding-left:40px;padding-right:40px}
	#intro1 .datalist .item .b1.more {width:170px;height:37px;font-size:16px;line-height:35px}
	#intro1 .datalist .item.over .foot {padding:25px 40px;font-size:16px;}
}
@media screen and (max-width:1259px){
	#intro1 {height:auto;}
	#intro1 .datalist .item {float:none;width:100%;height:auto;text-align:center;background-size:cover;background-position:0 50%;}
	#intro1 .datalist .item .wrap1 {padding:50px 40px;border:0;/*background-color:rgba(0,0,0,.3)*/}
	#intro1 .datalist .item .b1.more {margin-left:auto;margin-right:auto;margin-top:20px;position: relative;bottom: 40px;}
	#intro1 .datalist .item .wrap1 .h1 {color:#fff}
	#intro1 .datalist .item .wrap1 .h1 .year {display:block;color:#fff}
	#intro1 .datalist .item.n1 .wrap1 .h1 span {color:#26f2ff}
	#intro1 .datalist .item.n2 .wrap1 .h1 span {color:#c9fdf9}
	#intro1 .datalist .item.n3 .wrap1 .h1 span {color:#26f2ff}
	#intro1 .datalist .item.n4 .wrap1 .h1 span {color:#fcfdc9}
	#intro1 .datalist .item.over {width:100%;}
	#intro1 .datalist .item .wrap1 .h1, #intro1 .datalist .item.over .wrap1 .h1 {font-size:30px;line-height:35px;}
	#intro1 .datalist .item .wrap1 .gimhae, #intro1 .datalist .item.over .wrap1 .gimhae {display:none}
	#intro1 .datalist .item.over .b1.more {margin-top: 20px;bottom: 40px;position: relative;}
	#intro1 .datalist .item.n1 {background-image:linear-gradient(to right,rgb(27 27 27 / 40%),rgba(0,0,0,.3)),url(../../img/intro_bg1.jpg);}
	#intro1 .datalist .item.n2 {background-image:linear-gradient(to right,rgb(27 27 27 / 40%),rgba(0,0,0,.3)),url(../../img/intro_bg2.jpg);}
	#intro1 .datalist .item.n3 {background-image:linear-gradient(to right,rgb(27 27 27 / 40%),rgba(0,0,0,.3)),url(../../img/intro_bg3.jpg);}
	#intro1 .datalist .item.n4{background-image:linear-gradient(to right,rgb(27 27 27 / 40%),rgba(0,0,0,.3)),url(../../img/intro_bg4_2.jpg);}
	#intro1 .datalist .item.over .foot {display:none}
	#foot {display:block;text-align:center}
	.foot .sns1 {margin-top:50px}
}
@media screen and (max-width:699px){
	#intro1 .datalist .item.over .wrap1 .h1, #intro1 .datalist .item .wrap1 .h1 {font-size:28px;}
	#intro1 .datalist .item .b1.more {font-size:15px;}
	#foot {font-size:14px}
	.foot .sns1 li a {width:34px;height:34px;background-size:700px auto;} /* 70% 축소 */
	.foot .sns1 li.blog a {background-position:0 -93px}
	.foot .sns1 li.twitter a {background-position:-35px -93px}
	.foot .sns1 li.facebook a {background-position:-70px -93px}
	.foot .sns1 li.youtb a {background-position:-105px -93px}
	.foot .sns1 li.kakaostory a {background-position:-141px -93px}
	.foot .sns1 li.insta a {background-position:-176px -93px}
	.foot .sns1 {margin-top:35px}
	#intro1 .datalist .item.n4.over .wrap1 .h1 span {font-size:24px !important;display:block;color:#fcfdc9}
}
 
 
 
/* font-size */
.fs38px{font-size:28px !important;display:block;}