@charset "utf-8";


/* ********************************* PC over : 1025 ~  ********************************* */

/* ******************** 공용 ******************** */
.main {}

.main .main-visual {height:calc(100vh - 100px);}
.main .main-visual h2 {font-size:80px; font-weight:700; position:absolute;left:0;top:300px; width:100%; text-align:center; z-index:2; color:#fff; line-height:1.2; text-shadow:10px 10px 10px rgba(0,0,0,.3);}
.main .visual-swiper {width:100%; height:100%; overflow-x:hidden;}
.main .visual-swiper img {width:100%; height:100%; object-fit:cover;}
.main .swiper-pagination {bottom:60px;}
.main .swiper-pagination-bullet {width:40px; height:10px; background:#fff; border-radius:100px; opacity:.3;}
.main .swiper-pagination-bullet-active { opacity:1;}

.main .main-hisNotice {padding:150px 0; position:relative;}
.main .hisNoticeWrap {display:flex; justify-content:space-between;}
.main .main-his {width:50%;}
.main .main-his img {position:absolute; left:90px; top:0; z-index:-1;}
.main .main-his h3 {font-size:100px; color:var(--blue);}
.main .main-his p {padding:33px 0; line-height:1.8;}
.main .main-his p span {padding-right:100px; position:relative;}
.main .main-his p span:after {width:67px; height:2px; background:#000; position:absolute; right:0; top:8px; content:''; display:block;}
.main .main-his ul {display:flex;gap:10px;}
.main .main-his ul li {}
.main .main-his ul li a {padding:0 40px; border:1px solid #dee1e6; display:block; line-height:58px; font-weight:500; background:#fff url(../images/main/i-hisArrow.png)right 20px center no-repeat; color:#000;}
.main .main-his ul li:hover a {background-color:#000; color:#fff;}

.main .main-notice {width:50%; transform:translateY(-14px);}
.main .main-notice h3 {padding-left:50px; color:#000; line-height:40px; position:relative; font-size:16px;}
.main .main-notice h3:before {width:40px; height:40px; background:url(../images/main/i-notice.svg)center /17px no-repeat; border:1px solid #e5e5e5; border-radius:50%; left:0; top:0; position:absolute; display:block; content:''; }
.main .main-notice h3 a {width:40px; height:40px; background:url(../images/main/i-plus.png)center no-repeat; border:1px solid #e5e5e5; border-radius:50%; right:0; top:0; position:absolute; display:block;}
.main .main-notice h3 a:hover {background-color:#f5f5f5;}
.main .main-notice ul {padding:19px 0 0;}
.main .main-notice ul li {color:#999; line-height:1;}
.main .main-notice ul li a {padding:20px 0; display:block;border-bottom:1px solid #e5e5e5;}
.main .main-notice ul li+li a {}
.main .main-notice ul li:last-child a {border-bottom:0; padding-bottom:0;}
.main .main-notice ul li p {padding:15px 0 0; font-size:24px; font-weight:300; color:#000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:all .2s;}
.main .main-notice ul li:hover a,
.main .main-notice ul li:hover a p {color:var(--blue); letter-spacing:1px;}

.main .main-root {padding:150px 0; background:url(../images/main/root-bg.jpg)center /cover no-repeat;}
.main .main-root-tit {text-align:center;}
.main .main-root-tit h3 {font-size:36px; color:#000; font-family:var(--f_Tmonsori);}
.main .main-root-tit p {padding:16px 0 90px;}
.main .main-root ul {display:flex; gap:20px;}
.main .main-root ul li {width:calc((100% - 80px)/5);}
.main .main-root ul li a {border-radius:20px; display:block; background:#fff; overflow:hidden; text-align:center;}
.main .main-root ul li a div {position:relative;}
.main .main-root ul li .num {line-height:160px; display:block;background:var(--blue); font-size:70px; color:#fff; font-family:var(--f_Tmonsori);}
.main .main-root ul li.green .num {background:var(--green);}
.main .main-root ul li .station {padding:20px 0; font-size:15px; color:#000; font-weight:500; line-height:1.3; border-bottom:1px solid #dee0ec; }
.main .main-root ul li .station img {margin:0 7px;}
.main .main-root ul li .date {padding:28px 0; font-size:15px; color:#000; font-weight:500; line-height:1.3;}
.main .main-root ul li .view {width:100%; height:100%; line-height:95px; background:var(--blue) url(../images/main/i-rootLinkArrow.png)center 45% no-repeat; position:absolute; left:0; top:0; font-weight:500; color:#fff;opacity:0; transition:all .2s;}
.main .main-root ul li .view span {background-color:inherit; padding:0 20px; display:inline-block;}
.main .main-root ul li.green .view {background-color:var(--green);}
.main .main-root ul li:hover .view {opacity:1;}


/* ********************************* 테블릿 : ~ 1024 ********************************* */
@media screen and (max-width:1024px), print{
	.main .main-visual {height:calc(100vh - 60px);}
	.main .main-visual h2 {padding:0 30px; font-size:60px; top:30dvh;}
	
	.main .main-hisNotice {padding:100px 0;}
	.main .hisNoticeWrap {padding:0 30px; flex-direction:column; gap:60px;}
	
	.main .main-his {width:100%;}
	.main .main-his img {left:auto; right:0; width:90%; max-width:600px;}
	.main .main-his h3 {font-size:80px;}
	.main .main-his p {padding:27px 0;}
	.main .main-his ul li a {line-height:54px;}
	.main .main-notice {width:100%;}
	.main .main-notice ul {padding:15px 0 0;}
	.main .main-notice ul li {}
	.main .main-notice ul li a {}
	.main .main-notice ul li p {font-size:22px; padding:12px 0 0;}
	
	.main .main-root {padding:100px 30px;}
	.main .main-root-tit h3 {font-size:30px;}
	.main .main-root-tit p {padding:16px 0 60px;}
	.main .main-root ul {gap:5px;}
	.main .main-root ul li {width:calc((100% - 20px)/5);}
	.main .main-root ul li a {}
	.main .main-root ul li .num {font-size:50px; line-height:140px;}
	.main .main-root ul li .view {line-height:85px; display:none;}
	.main .main-root ul li .date {padding:23px 0;}
	

}


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	
	.main .main-visual h2 {font-size:38px;}
	
	.main .main-hisNotice {padding:60px 0;}
	.main .hisNoticeWrap {gap:40px}
	.main .main-his h3 {font-size:48px;}
	.main .main-his p {padding:20px 0; line-height:1.6;}
	.main .main-his p span {display:block;}
	.main .main-his p br { display:none;}
	.main .main-his ul {flex-direction:column;}
	.main .main-his ul li {}
	.main .main-his ul li a {padding:0 30px; line-height:48px; font-size:;}
	
	.main .main-notice ul {padding:0;}
	.main .main-notice h3 {font-size:15px;}
	.main .main-notice ul li a {padding:14px 0; font-size:14px;}
	.main .main-notice ul li p {font-size:18px; padding:7px 0 0;}
	
	.main .main-root {padding:60px 30px;}
	.main .main-root-tit h3 {font-size:22px;}
	.main .main-root-tit p {padding:10px 0 40px;}
	
	.main .main-root ul {flex-direction:column; gap:10px;}
	.main .main-root ul li {width:100%;}
	.main .main-root ul li a {}
	.main .main-root ul li .num {line-height:100px; font-size:36px;}
	.main .main-root ul li .station {padding:14px 0;}
	.main .main-root ul li .view {line-height:60px;}
	.main .main-root ul li .date {padding:15px 0;}
	
	
	
	
	
	
	

}