@charset "utf-8";
@font-face {
    font-family: 'Lotteria';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/LOTTERIADDAG.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}


#m_conts {background:url(/portal/images/main/mainbg.jpg) no-repeat 50% 0; padding:8rem 0;}

.mvisualWrap {position:relative;}
.mvisualWrap .mvisual-slide {border-radius:2rem; overflow:hidden;}
.mvisualWrap .mvisual-slide img {width:100%;}

.mvisualWrap .controll {background:#fff; padding:2rem 2rem 2rem 2.5rem; display:flex; align-items:center; justify-content:space-between; position:absolute; bottom:-3.5rem; left:calc(50% - 16rem); width:32rem;  font-size:1.4rem; border-radius:5rem; height:7rem;}
.mvisualWrap .controll .tit em {font-weight:700; color:var(--volor-main);}

.mvisualWrap .controll .count {display:flex; align-items:center; color:#aaa;}
.mvisualWrap .controll .count .current {font-weight:700; color:var(--color-main); font-weight:700;}

.mvisualWrap .controll .progress-bar {background:#d8d8d8; width:6rem; height:2px; position:relative; margin:0 1rem;}
.mvisualWrap .controll .progress-bar span {background:var(--color-main); height:2px; position:absolute; top:0; left:0; transition:all .5s;}

.mvisualWrap button {position:relative; z-index:1;}
.mvisualWrap button span {text-indent:-9999px; display:inline-block;}
.mvisualWrap button.prev-slide,
.mvisualWrap button.next-slide {width:8rem; height:8rem; border-radius:50%; background:#fff; box-shadow: 0 0 1.5rem rgba(0,0,0,0.2); position:absolute; top:calc(50% - 4rem); opacity:0.7; transition:all .2s;}
.mvisualWrap button.prev-slide i,
.mvisualWrap button.next-slide i {font-size:3rem; font-weight:200;}
.mvisualWrap button.prev-slide {left:-4rem;}
.mvisualWrap button.next-slide {right:-4rem;}
.mvisualWrap button.prev-slide:hover,
.mvisualWrap button.next-slide:hover {opacity:1;}

.mvisualWrap button.stop-slide,
.mvisualWrap button.start-slide {width:3.8rem; height:3.8rem; background:var(--color-main); border-radius:50%; color:#fff;}
.mvisualWrap button.stop-slide i,
.mvisualWrap button.start-slide i{font-size:2rem; font-weight:200;}

@media (max-width:1024px) {
	#m_conts {padding:3rem 0;}
	.mvisualWrap .mvisual-slide {border-radius:2rem 2rem 0 0;}
	.mvisualWrap .controll {position:relative; bottom:auto; left:auto; width:100%; border-radius:0 0 2rem 2rem; justify-content: center; padding:2rem 1rem;} 
	.mvisualWrap .controll > * {margin:0 1rem;}
	.mvisualWrap .controll .progress-bar {width:5rem;}
}
@media (max-width:768px) {
	.mvisualWrap button.prev-slide,
	.mvisualWrap button.next-slide {width:5rem; height:5rem;}
	.mvisualWrap button.prev-slide {left:-1.5rem;}
	.mvisualWrap button.next-slide {right:-1.5rem;}
}

.linkWrap {margin-top:11rem;}
.linkWrap ul {display:flex; justify-content: space-around; flex-wrap:wrap;}
.linkWrap ul li a {text-align:center; display:block; color:var(--color-main); font-size:1.6rem; }
.linkWrap ul li a img {display:block; margin:0 auto; transition:all .2s;}
.linkWrap ul li span {display:inline-block; position:relative; }
.linkWrap ul li span em {position:relative; z-index:1;}
.linkWrap ul li a:hover span {font-weight:700; }
.linkWrap ul li a span:before {content:''; display:block; position:absolute; bottom:0; left:-1rem; width:0; height:1rem; background:var(--color-sub); z-index:0; border-radius:1rem; opacity:0; transition:all .2s;}
.linkWrap ul li a:hover span:before {opacity:0.2; width:calc(100% + 2rem);}
.linkWrap ul li a:hover img {transform: translateY(-1rem);}
@media (max-width:1024px) {
	.linkWrap {margin-top:5rem;}
}
@media (max-width:768px) {
	.linkWrap ul {flex-wrap:wrap; justify-content: space-between;}
	.linkWrap ul li {width:30%; margin:2rem 0;}
}
@media (max-width:480px) {
	.linkWrap {margin-top:2rem;}
	.linkWrap ul li {width:48%; margin:0.5rem 0;}
	.linkWrap ul li a {background:#fff; border-radius:1rem; display:flex; align-items:center; justify-content: center;  position:relative; padding:2rem; }
	.linkWrap ul li a img {display:inline-block; width:3rem; margin:0; margin-right:1rem;}
	.linkWrap ul li a:hover span:before{display:none;}
	.linkWrap ul li a:hover img {transform: translateY(0);}
}
@media (max-width:400px) {
	.linkWrap ul li a img {display:none;}
}

.permainWrap {position:relative; display:flex; flex-wrap:wrap; justify-content: space-between; margin-top:8rem;}
.permainWrap > div {width:calc(50% - 3rem); }
.permainWrap h3 {margin-top:0; font-size:5.8rem; color:var(--color-main); font-family: 'Lotteria'; width:100%;}
.perCal .calwrap {border:1px solid #dedede; padding:3rem; background:#fff; border-radius:3rem;}

.perCal .calTit {display:flex; justify-content: space-between; align-items:center;}
.perCal .calTit .calmonth {display:flex; align-items:center; color:#333;}
.perCal .calTit .calmonth strong {font-size:2.5rem; font-weight:600; margin:0 2rem;}
.perCal .calTit .calmonth a span {display:inline-block; text-indent:-9999px;}
.perCal .calTit .calmonth a i {font-size:3rem; opacity:0.5;}
.perCal .calTit .calmonth a:hover i {opacity:1;} 
.perCal .calTit .calType em { position:relative; display:inline-block; font-size:1.4rem;}
.perCal .calTit .calType em:before {content:'';  display:inline-block; overflow:hidden; width:1rem; height:1rem; border-radius:0.3rem; margin-right:0.5rem; margin-left:1rem; }
.perCal .calTit .calType em.t1:before {background:#ff6743;}
.perCal .calTit .calType em.t2:before {background:#2abc7d;}
.perCal .calTit .calType em.t3:before {background:#2ad2e6;}

.calendar { width: 100%; font-size:1.4rem; }
.calendar th, .calendar td {  text-align: left; vertical-align: top;/* ; border:2rem solid #fff;  */width:calc(100% / 7);}
.calendar td { height:7.8rem; border-bottom:0; text-align:Center; padding:0 0 1rem;}
.calendar thead th:first-child span {color:#ff0000; border-bottom:1px solid #ff0000;}
.calendar th {font-weight:600;}
.calendar th span {margin:1rem 1rem 0 1rem; border-bottom:1px solid var(--color-main); display:block; padding-bottom:1rem;}
.calendar td .date { display:flex; align-items: center; justify-content: center; margin:0 1rem;  border-top:1px solid #dedede; padding:1rem 0 0.5rem}
.calendar td .date span {width:3rem; height:3rem; text-align:center; align-content: center; border-radius:50%;}
.calendar td em {display:inline-block; overflow:hidden; width:1rem; height:1rem; border-radius:0.3rem; margin:0 0.2rem; text-indent:-9999px;}
.calendar td em.t1 {background:#ff6743;}
.calendar td em.t2 {background:#2abc7d;}
.calendar td em.t3 {background:#2ad2e6;}
.calendar td:has(em) .date span {background:var(--color-main); color:#fff;}

.calendar tbody tr:first-child td .date {border-top:0;}

.calendar td.today .date span {background:#333; color:#fff;}
.calendar td.closed .date span { color:#ff0000; }
.calendar .disable,
.calendar .closed { color: #999; }
.calendar td.today.closed .date span {color:#ffff00;}

 
.perList {position:relative; overflow:hidden; margin-top:-8rem;}
.perList .controll {display:flex; justify-content: flex-end; align-items:center; margin:2rem 0;}
.perList .controll .count {display:flex; align-items:center; font-size:1.4rem; color:#aaa; margin-right:3rem;}
.perList .controll .count .current {font-weight:700; color:var(--color-main);}
.perList .controll .count .progress-bar2 {width:7rem; height:2px; background:#f2f2f2; position:relative; margin:0 1rem;}
.perList .controll .count .progress-bar2 span {background:var(--color-main); position:absolute; top:0; left:0; height:2px; transition:all .5s;}

.perList .controll button {width:3.8rem; height:3.8rem; background:var(--color-main); color:#fff; border-radius:50%;}
.perList .controll button span {display:inline-block; text-indent:-9999px; }

.perList ul {width:calc(100% + 2rem);}
.perList ul .items {margin-left:-2rem; height:100%;}
.perList ul .items a {border-radius:4rem; background:#fff; padding:3rem; margin:0 2rem; display:block; box-shadow: 0 0 0 1px #dedede inset;}
.perList ul .items .thum {aspect-ratio: 1 / 1; overflow:hidden; border-radius:50%; margin-bottom:2rem; width:95%; margin:0 auto;}
.perList ul .items img {width:100%;}
.perList ul .items .pcon {}
.perList ul .items .pcon .type {display:inline-block; border-radius:1rem; background:#ff0000; padding:0.7rem 2rem 0.5rem; color:#fff; font-size:1.3rem;}
.perList ul .items .pcon .type.t1 {background:#ff6743;}
.perList ul .items .pcon .type.t2 {background:#2abc7d;}
.perList ul .items .pcon .type.t3 {background:#2ad2e6;}
.perList ul .items .pcon p.tit {font-size:2.2rem; font-weight:700; margin-top:1rem;
overflow: hidden; text-overflow: ellipsis; height: 3em; line-height: 1.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 
}
.perList ul .items .pcon p.date {font-size:1.6rem; color:#888; margin-top:1rem;}
.perList ul .items .pcon p.date span { display:inline-block; margin-right:2rem;}
.perList ul .items .pcon p.date strong {color:#333;}
.perList ul .items .pcon p.more {width:100%; border:1px solid #dedede; text-align:center; padding:1rem; border-radius:1rem; margin-top:2rem;}

.perList ul .items a:hover {box-shadow: 0 0 0 3px var(--color-main) inset;}
.perList ul .items a:hover .more {background:var(--color-main); color:#fff; border:0;} 

@media (max-width:1024px) {
	.permainWrap h3 {order:1;}
	.perCal {width:100%!important; order:3; margin-top:3rem;}
	.perList {width:100%!important; order:2;} 
}
@media (max-width:768px) {
	.perList {margin-top:0;}
	.permainWrap h3 {font-size:4rem; text-align:center;}
	.perList .controll {justify-content:center; }
}
@media (max-width:480px) {
	.perCal .calwrap {padding:2rem;}
	.calendar th span {margin:1rem 0.3rem 0 0.3rem; }
	.calendar td .date {margin:0 0.3rem;}
	.perCal .calTit { justify-content:center; align-items:center; flex-direction:column;}
}

.noticeWrap {display:flex; justify-content:space-between; flex-wrap: wrap; margin-top:8rem;}
.noticeWrap > div {width:calc(50% - 3rem); /* background:#ff000020; */}
.noticeWrap h3 {margin-top:0; font-size:5.8rem; color:var(--color-main); font-family: 'Lotteria'; }

.mnotice .mnoticeTit {display:flex; justify-content:flex-start; align-items:center; position:relative; margin-bottom:2.5rem;}
.mnotice .mnoticeTit .mmore {width:5rem; height:5rem; border-radius:50%; background:var(--color-main); overflow:hidden; display:flex; align-items:center; justify-content: center; position:absolute; top:1.5rem; right:0;}
.mnotice .mnoticeTit .mmore:before {content:'\ea70'; color:#fff; font-family: remixicon !important; font-style: normal; -webkit-font-smoothing: antialiased; font-size:2.2rem;}
.mnotice .mnoticeTit .mmore span {display:inline-block; text-indent:-9999px;}
.mnotice .mnoticeTit .mtabBtn {border:1px solid var(--color-main); padding:0.5rem; border-radius:5rem; margin-left:2rem;}
.mnotice .mnoticeTit .mtabBtn a {padding:1rem 2rem; display:inline-block;}
.mnotice .mnoticeTit .mtabBtn a.active {background:var(--color-main); color:#fff; border-radius:5rem;}
.mnoticecon {display:none;}
.mnoticecon ul {border-top:2px solid var(--color-main);}
.mnoticecon ul li {padding:4rem 0; border-bottom:1px solid #ccc;}
.mnoticecon ul li a {display:block;}
.mnoticecon ul li a p.tit {font-size:2.5rem; font-weight:700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom:1.5rem;}
.mnoticecon ul li a p.copy {overflow: hidden; text-overflow: ellipsis; height: 3.2em; line-height: 1.6em; display: -webkit-box; overflow:hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size:1.6rem; color:#999;}
.mnoticecon ul li a p.date {font-size:1.4rem; color:#777; margin-top:3rem; background:url(/portal/images/main/dateicon.png) no-repeat 0 1px; padding-left:2.5rem;}
.mnoticecon.active {display:block;}
.mnoticecon ul li a:hover p.tit{color:var(--color-main); text-decoration: underline;}
.mnoticecon ul li a:hover p.copy {color:#333;}

.msns {position:relative;}
.msns .msnsTit {display:flex; align-items:center; justify-content: space-between; margin-bottom:2rem;}
.msns .msnsTit a {width:5.6rem; height:5.6rem; border-radius:50%; display:inline-block; overflow:hidden; box-shadow:0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.1); margin-left:0.5rem;}
.msns .msnsTit a span {display:inline-block; text-indent:-9999px;}
.msns .msnsTit a.instar {background:url(/portal/images/main/instar.jpg) no-repeat 50% 50%;}
.msns .msnsTit a.blog {background:url(/portal/images/main/blog.jpg) no-repeat 50% 50%;}
.snsList {display:flex; justify-content: space-between;}

.snsList > div {width:calc(50% - 2.5rem); }
.snsList > div a {background:#fff;  box-shadow:0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.1); display:block; border-radius:2rem; overflow:hidden; position:relative;}
.snsList > div .thum {aspect-ratio: 1/1; position:relative; display:flex; align-items:center; justify-content: center;}
.snsList > div .thum img {width:100%;}
.snsList > div .snscon {padding:2rem;}
.snsList > div .snscon p.tit {overflow: hidden; text-overflow: ellipsis; height: 3.2em; line-height: 1.6em; display: -webkit-box; overflow:hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight:600;}
.snsList > div .snscon .date {font-size:1.4rem; color:#777; margin-top:2rem; background:url(/portal/images/main/dateicon.png) no-repeat 0 1px; padding-left:2.5rem;}
.snsList > div a:hover:after {content:''; display:block; width:100%; height:100%; border:3px solid var(--color-main); position:absolute; top:0; left:0; border-radius:2rem;}

@media (max-width:1024px) {
	.noticeWrap > div {width:100%; }
	.msns {margin-top:5rem;}	
}
@media (max-width:768px) {
	.noticeWrap h3 {font-size:4rem; }
	.mnotice .mnoticeTit .mmore { top:0.5rem; right:0;}
	.mnoticecon ul li {padding:2rem 0;}
	.snsList > div {width:calc(50% - 1.5rem); }
}
@media (max-width:480px) {
	.mnotice .mnoticeTit {flex-wrap:wrap;}
	.mnotice .mnoticeTit .mtabBtn {width:100%; margin-left:0; margin-top:1rem; display:flex;}
	.mnotice .mnoticeTit .mtabBtn a {width:50%; text-align:center;}
	.snsList {flex-wrap:wrap;}
	.snsList > div {width:100%; margin-bottom:3rem;}
	.msns .msnsTit a {width:4rem; height:4rem; background-size:4.6rem!important; margin-left:0;}
}
@media (max-width:360px) {
	.noticeWrap h3 {font-size:3.6rem; }
}