/**********************
**********************
**********************
1. 기본 스타일 (모바일 우선)
**********************
**********************
**********************/
.hedaWrap{width: 100%; margin-bottom: 10px;}
#gnb{display: none;}
#gnb.open{display: block; top: 0; background: #0c3578; color: #fff; width: 100%; z-index: 22; padding: 102px 30px; position: fixed; height: 100vh; overflow-y: auto;}
/* 메뉴가 열릴 때 body 스크롤을 막기 위한 클래스 */
body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
#gnb > ul{width: 100%;}
.gnbM>li{border-bottom: 1px solid #ffffff33;}
.gnbM>li>a{display: block; padding: 16px;}
.open .lnb-area.active{height: auto; overflow-y: visible; transform: translateY(0); background: #143d7f; padding: 10px 0;}
.open .lnb-area{position:relative; height: 0; overflow: hidden; transition: all 0.4s ease; transform: translateY(-10px);}
.lnb-area>li{}
.open .lnb-area>li>a{display: block; padding: 10px 30px !important;}
.open .lnb-area>li>a:hover{color: yellow;}
.open .gnbM li>a{display: flex; padding: 16px; justify-content: space-between;}
.open .gnbM li>a.on{}

/* on 상태일 때 plus 아이콘 변화 */
.open .gnbM li > a .plus {
  display: block;
  width: 26px;
  height: 26px;
  background: #143d7f;
  position: relative;
  border-radius: 20px;
  padding: 7px;
}

.open .gnbM li > a .plus span.up,
.open .gnbM li > a .plus span.down {
  background: #fff;
  position: absolute;
  transform: translate(-50%, -50%);
}

.open .gnbM li > a .plus span.up {
  width: 13px;
  height: 3px;
  top: 50%;
  left: 50%;
}

.open .gnbM li > a .plus span.down {
  width: 3px;
  height: 13px;
  top: 50%;
  left: 50%;
}

/* on 상태일 때 아래 막대 숨김 (마이너스 표시) */
.open .gnbM li > a.on .plus span.down {
  display: none;
}

.logo-white{display: none;}
.logo-blue{display: block; margin: 11px 17px; width: 225px;}


/*main visual*/
#visual {width: 100%; margin: 0 auto;  transition: opacity 0.3s ease, transform 0.3s ease; background: #103578;}
.swiper { width: 100%; height: 471px; }
.swiper-slide { display: flex; align-items: center; justify-content: center;}
.bg1-1 { background:url("../images/main/slider01.png")no-repeat center;}
.bg2-1 { background:url("../images/main/slider02.png") no-repeat center;}

.slidePrev, .slideNext{opacity: 0; transform: translateX(-30px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; pointer-events: none; /* 숨겨진 동안 클릭 방지 */}
#visual:hover .slidePrev{display: flex; background: #0000009c; padding: 10px ; border-radius: 14px; height: 65px !important; width: 65px !important; color: #fff; opacity: 1; transform: translateX(0); pointer-events: auto; /* 보일 때 클릭 가능 */}
#visual:hover .slideNext{display: flex; background: #0000009c; padding: 10px ; border-radius: 14px; height: 65px !important; width: 65px !important; color: #fff; opacity: 1; transform: translateX(0); pointer-events: auto; /* 보일 때 클릭 가능 */}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{color: #fff;}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{color: #fff;}

.slideTitle{position: absolute; top: 145px; z-index: 1; width: 100%;}
.slideTitle img{transform: translateX(2%); width: 96%;}

#wrap.responsive .headtop{color: #0c3578;}
.headtop{color: #fff; margin-left: 21px;}
.headtop a{color: #0c3578; font-size: 13px;}
.headtop a img{width: 20px;}
.headtop a .Icon-w{display: none;}

/* 햄버거 버튼 스타일 */
.menu-toggle {display: block; position: fixed; top: 15px; right: 20px; width: 51px; height: 51px; z-index: 1000; cursor: pointer; background: #ffffffb3; padding: 10px; border-radius: 15px; box-shadow: 0 0 5px 4px #2b2b2b26;}

.menu-toggle span {display: block; width: 100%; height: 4px; background: #024287; margin: 6px 0; transition: all 0.3s ease-in-out;}

/* 햄버거 버튼 애니메이션 */
.menu-toggle.on span:nth-child(1) { transform: translateY(10px) rotate(45deg);}
.menu-toggle.on span:nth-child(2) {opacity: 0;}
.menu-toggle.on span:nth-child(3) {transform: translateY(-10px) rotate(-45deg);}


/*뉴스*/
.content{background: #103578; height: auto; padding: 30px 0;}
.newsW{ width: 100%; margin: 0 auto; display: flex;justify-content: space-between; padding: 0 10px; flex-direction: column-reverse;}
.news-slider-wrap{position: relative; top: 0px;}
.newsL{width: 100%; margin-top: 10px;}
.newsul{width: 100%; overflow: hidden; z-index: 2; position: relative;}
.newsul li{background: #fff; padding: 33px; width:100%; height: 159px; border-radius: 25px; margin-right: 10px; display: inline-flex; flex-direction: column;}
.newsul li p{text-align: left; font-size: 16px; float: left; font-family: 'S-CoreDream-5Medium'; margin-bottom: 50px; float: none;}
.newsul li span{text-align: right; display: block; color: #b2b2b2; font-size: 14px;}
.newsR{width: 100%; display: flex; align-items: center; gap:10px; justify-content: center; margin: 0 auto; padding-left: 59px; padding-bottom: 24px;}
.slickbutton{margin-bottom: 11px;}
.slickbutton button.slick-arrow{background: #1648a3; color: #fff; border: none; width: 41px; height: 41px; border-radius: 50px; font-family: 'SBAggroB'; cursor: pointer;}
.slickbutton button.slick-prev{}
.slickbutton button.slick-next{}
.newsR h3{color: #fff; font-family: 'S-CoreDream-8Heavy'; position: relative; display: inline-block;}
.newsR h3::after{position: absolute; display: block; content: url("../images/main/news_arrow.png"); top: -24px; left: -94px; }

/*주요일정 및 다운로드*/
.content2{padding: 30px 10px;display: block;}
.datesBox{display: block; width: 100%;}
.datesBox h3{font-family: 'S-CoreDream-8Heavy'; color: var(--main-blue); line-height: 1; text-align: center;}
.datesBox h3 span{display: inline-block;}
.datelist{}
.datelist li{display: flex; gap:12px; justify-content: center; margin-top: 30px; margin-left: 20px;}
.datelist li:nth-of-type(2), .datelist li:nth-of-type(3){margin-top: 30px;}	
.datelist li div.count{background: var(--main-black); color: var(--main-white); display: inline-block; padding: 5px 18px; border-radius: 10px 10px 0 10px; height: fit-content; font-family: 'S-CoreDream-5Medium'; font-size: 20px;}
.datelist li div p.date{font-size: 21.33px; font-family: 'S-CoreDream-5Medium'; line-height: 1.6;}
.datelist li div p.dTit{font-family: 'S-CoreDream-3Light'; font-size: 16px;}
.datelist li div.count.imp{background: var(--main-blue); position: relative;}
.datelist li div.count.imp::after{position: absolute; display: block; content: url("../images/main/dateCheck.svg"); top: 0; left: -42px; width: 31px;}
.downBox{width: 100%; margin-top: 30px;}
.downList{display: flex; flex-wrap: wrap; gap:10px;}
.downList li{width: 48%;}
.downList li a{display: block; text-align: center; padding: 17px 0; border: 3px solid #000; font-family: 'S-CoreDream-6Bold'; position: relative; background-color: transparent; overflow: hidden; transition: all 0.5s ease-in-out; z-index: 1; font-size: 16px;}
.type1::after {content: ""; position: absolute; left: 0; top: 0; transition: all 0.5s ease-in-out; background-color: var(--main-blue); border-radius: 30px;
	visibility: hidden; height: 10px; width: 10px; z-index: -1;}
.btn:hover {
  box-shadow: 1px 1px 7px #25252536; color: var(--main-white);}
.type1:hover::after {visibility: visible; transform: scale(100) translateX(2px);}	


.eventBtn{}
.eventBtn li{}
.eventBtn li a{font-size: 1em;}




/*quickmenu*/
.content3{background: #01b7c5; width: 100%; height: auto; padding: 38px 10px;}	
.quick-w{width: 100%;}
.quick-w h3{font-family: 'S-CoreDream-8Heavy'; text-align: center; color: #fff; line-height: 1;}
.quickList{display: flex; justify-content: space-between; margin-top: 50px; flex-wrap: wrap; gap:54px 15px;}
.quickList li{width: 26.333%;}
.quickImg{position: relative; z-index: 1; transition: .3s ease;}
.quickImg img{height: 60px;}
.quickList li a{display: block; text-align: center; font-family: 'S-CoreDream-6Bold'; transition: .3s ease; font-size: 17px;}
.quickImg::after{position: absolute ;  width: 60px; height: 60px; background: var(--main-pink); border-radius: 50px; content: ''; top: -18px; left: 32%; transform: translateX(-32%); z-index: -1; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;}
.quickList li a:hover .quickImg::after{opacity: 1; visibility: visible;}
.quickList li a:hover .quickImg{transform: translateY(-10px);}


/* footer logo */
.footer{background: #000; height: auto;}	
.footer_logo{width: 100%; padding: 30px 10px; clear: both; display: inline-block; background: #fff;}
.footer_logo .org_area{display:block; align-items:center; width: 100%; margin: 0 auto;}
.footer_logo .org_area span{display: block; font-size: 17.5px; font-weight: 600; position: relative; padding-left: 10px;}
.footer_logo .org_area span::before{position: absolute; display: block; content: ''; width: 3px; height: 19px; background: #282828; border-radius: 10px; left: 0;}
.footer_logo .org_area ul{display:flex; flex-wrap: wrap; align-items:center; width: 100%; gap:7px;}
.footer_logo .org_area ul li{width: 32%;}
.footer_logo .org_area ul li a{display: block; width: 90%;}
.footer_logo .org_area ul li a img{width: 100%;}
.footer_logo .org_area:nth-child(2) span{}

.footer_logo .sp_area{}
.footer_logo .sp_area span{}
.sp_area2 ul li{margin-right:13px !important;}

/* Footer Styles */
.footer_wrap{padding: 38px 20px;}
.footer-txt {border-bottom:none;font-size: 14px; line-height:29px;}
.footer-txt:last-child{ margin-top: 30px;}
.footer-txt ul{display: inline-block; width:100%; margin:0 auto; padding-left:0; list-style:none;}
.footer-txt ul li{float:left; margin-right:13px; color: #fff; font-size: 14px; font-weight: 300; font-family: 'S-CoreDream-3Light'; position: relative;}
.footer-txt ul li:last-child::after{content: ''}
.footer-txt ul li::after{content: '|'; position: absolute; top: 0; right: -10px;} 
.footer-txt ul li:nth-child(2)::after{display: none;}
.footer-txt ul li span{font-weight:600;}
.footer-txt ul li font{background: #3b3b3b; color: var(--main-white); padding: 3px 8px; border-radius: 8px; display: inline-block; margin-top: 2px;}
.footer-txt p{margin-bottom:0; padding-top:3px; line-height: 25px; color: #fff; font-weight: 300; font-size: 14px;}
.footer-txt h2{font-size: 16px; color: #fff;}
.footer-txt h2 span{font-weight: 300; font-family: 'S-CoreDream-3Light'; font-size: 14px; letter-spacing: 0.7px; text-transform: uppercase;}


/*후원로고 슬라이드*/
.sponSlide{background: #eeeeee; width: 100%; padding: 30px 0;}
.sponsorSlider{width: 100%; margin: 0 auto; text-align: center;}
.sponsorSlider .slick-slide{display: flex !important; justify-content: center; align-items: center;}
.sponsorSlider a{display: block; text-align: center;}
.sponsorSlider .slick-slide img {
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.image-container {
  position: relative;
  width: 100%;
  height: auto;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* 버튼 영역: 이미지 위에 위치 */
.popup-btn-grid {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3%;         /* 버튼 간격도 비율로 */
  width: 76%;
  max-width: 90%;  /* 이미지 크기에 비례 */
  z-index: 10;
}

/* 버튼 스타일 */
.popup-btn-grid a {
  color: transparent;
  border: none;
  padding: 0.8em 0;        /* em 단위로 버튼 높이를 비율로 설정 */
  border-radius: 6px;
  font-size: 1em;        /* em 단위 글꼴 크기 */
  cursor: pointer;
  transition: 0.3s;
  width: 100%;
  text-align: center;
}

.sliderbtn{top:62%; width: 72% !important; position: absolute; z-index: 999;}
.modal-content{}
.modal-content img{width: 100%;}

.sliderbtn > a{background: #ffffff21; color: #fff; padding: 8px 13px; font-size: 1em; border: 2px solid #fff; border-radius: 50px; transition: .3s ease;}
.sliderbtn > a:hover{cursor: pointer; background: #000;}
.close {float: right; font-size: 35px; font-weight: bold; position: relative; top: 30px; right: 0; background: #fff; width: 30px; height: 30px;}
.close:hover, 
.close:focus { color: black; text-decoration: none; cursor: pointer;}
/* The Modal (background) --------------------------------------------*/
.modal {display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);}	

/**********************
**********************
**********************
1. 2. 태블릿 사이즈 (768px 이상)
**********************
**********************
**********************/
@media (min-width: 768px) {
	.logo-blue{margin: 11px 17px;}
	.swiper{height: 606px;}
	.slideTitle img{width: 63%;}
	
	/*태블릿 뉴스*/
	.content{background: #103578; height: 236px; padding: 40px 0;}
	.newsW{ width: 100%; margin: 0 auto; display: flex;justify-content: space-between; padding: 0 10px; flex-direction: unset;}
	.news-slider-wrap{padding-top: 0px; top: -134px;}
	.newsL{width: 75%;}
	.newsul{width: 100%; overflow: hidden; z-index: 2; position: relative;}
	.newsul li{background: #fff; padding: 31px; width:50%; height: 201px; border-radius: 30px; margin-right: 10px;}
	.newsul li p{text-align: left; font-size: 16px; height: 94%; margin-bottom: 0;}
	.newsul li span{text-align: right; display: block; color: #b2b2b2; font-size: 15px;}
	.newsR{width: 25%; display: block;}
	.slickbutton{margin-bottom: 0px;}
	.slickbutton button.slick-arrow{background: #1648a3; color: #fff; border: none; width: 41px; height: 41px; border-radius: 50px; font-family: 'SBAggroB'; cursor: pointer;}
	.slickbutton button.slick-prev{}
	.slickbutton button.slick-next{}
	.newsR h3{color: #fff; font-family: 'S-CoreDream-8Heavy'; position: relative; display: inline-block; line-height: 1; padding-bottom: 0;}
	.newsR h3::after{position: absolute; display: block; content: url("../images/main/news_arrow.png"); top: -24px; left: -57px; }
	
	/*주요일정 및 다운로드*/
	.content2{width: 100%; padding: 38px 10px; display: flex; align-items: center;}
	.datesBox{display: block; width: 50%;}
	.datesBox h3{text-align: center; margin-bottom: 30px;}
	.datesBox h3 span{display: inline-block; margin-left: 10px;}
	.datelist{}
	.datelist li{ margin-top: 0; margin-left: 54px; justify-content: left;}
	.datelist li div.count{}
	.datelist li div p.date{}
	.datelist li div p.dTit{}
	.datelist li div.count.imp{}
	.downBox{width: 50%; margin-top: 0;}
	.downList{}
	.downList li{width: 100%;}
	.downList li a{position: relative; background-color: transparent; overflow: hidden; transition: all 0.5s ease-in-out; padding: 17px 0; font-size: 17px;}
	
/*quickmenu*/
.content3{}	
.quick-w h3{}
.quickList{display: flex; justify-content: center; margin-top: 50px;}
.quickList li{}
.quickImg{}
.quickImg img{}
.quickList li a{font-size: 17px;}
.quickImg::after{position: absolute ;  width: 60px; height: 60px; background: var(--main-pink); border-radius: 50px; content: ''; top: -18px; left: 32%; transform: translateX(-32%); z-index: -1; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;}
	
	
	/*footer*/
	.footer_logo{padding: 30px;}
	.footer_wrap{width: 100%; display: block;}
	.footer-txt{width: 100%;}
	.footer-txt:last-child{width: 100%;}
	
	  .popup-btn-group {
    gap: 8px;
    bottom: 5%;
  }

  .popup-btn {
    width: 80%;
    margin: 0 auto;
  }
  .sliderbtn{top:40%; width: 43% !important; position: absolute; z-index: 999;}	
}

.sponsorSlider .slick-track{display: flex; align-items: center;}

/**********************
**********************
**********************
3. 데스크탑 사이즈 (1316px 이상)
**********************
**********************
**********************/
@media (min-width: 1316px) {
  /*header*/
#wrap{}	
.hedaWrap{width: 1300px; margin: 0 auto;}	
#header {width: 100%; z-index: 30; height: 162px; display: flex; flex-direction: column; justify-content: center; position: absolute;}

.headtop{margin-left: 0;}	
.headtop a{color: #fff; font-size: 14.5px;}	
.header.active {background: #fff; border-bottom: 1px solid #e7e7e7;}
.header.active .headtop{color: #0c3578;}
.header.active .headtop a{color: #0c3578;}	
	
.Icon-b{display: none;}	
.header.active .Icon-b{display: block;}
.headtop a .Icon-w{display: block;}
.header.active .Icon-w{display: none;}	
	
#gnb.active{position: relative;}	
#header div.headerWrap {position: relative; margin: 0 auto; padding: 25px 0 10px; z-index: 20; width: 1300px; text-align: center;}
.slideTitle{position: absolute; top: 241px; z-index: 1; width: 100%;}
.slideTitle img{transform: translateX(40%); width: auto;}

.swiper {height: 784px; }	
	
/* depth 1  */
#gnb {position: relative; margin: 0 auto; width: 100%; text-align: center; height: 90px; margin-top: 8px; display: block;}
.gnbM>li>a{padding: 0;}
#gnb > ul {display: inline-block; width: 1300px; height: auto;}
#gnb > ul:after {clear: both; display: block; content: "";}
#gnb > ul > li {position: relative; float: left; width: 12.5%;}
#gnb > ul > li:first-child:after {display: none;}
#gnb > ul > li > a {display: block; font-weight: 600; font-size: 16.5px; color: #fff; box-sizing: border-box; height:70px; line-height:70px;}
.header.active #gnb > ul > li > a {color: #000;}
#gnb > ul > li > a:hover, #gnb > ul > li > a:focus, #gnb > ul > li > a:active, #gnb > ul > li.hover > a {color: #103578; text-decoration: none;}
#gnb.open > ul > li:active > ul, #gnb.open > ul > li:focus > ul, #gnb.open > ul > li:hover > ul {display: block;}

/* depth 2 */
#gnb > ul > li > ul {display: none; width: 100%; padding-top: 1rem; background: #fff; height: 392px; border-top: 1px solid #e7e7e7; box-sizing: border-box; z-index: 999;}

.lnb-area{position: absolute; z-index: 999;}
.lnb-area>li>a{display: block; padding: 0;}	
	
#gnb > ul:hover li ul {display: block;}
#gnb > ul > li:first-child > ul:before {content: ""; position: absolute; z-index: -1; left: -1000%; top: -1px; display: block; border-top: 1px solid #e7e7e7; box-sizing: border-box;    background: #fff; height: 392px; padding-bottom: 3px; width: 3027%; box-shadow: 10px 10px 10px rgba(0,0,0,0.3); left: -2015%;}

#gnb > ul > li ul:after {position: absolute; top: 0; left: 0; content: ""; display: block; width: 1px; height: 380px; background: #e7e7e7;}
#gnb > ul > li:first-child ul:after {display: none;}
#gnb > ul > li > ul > li {line-height: 24px;}
#gnb > ul > li > ul > li > a {display: block; line-height: 33px;font-size: 14px; letter-spacing: -0.6px; text-align: center; color: #000;}
#gnb > ul > li > ul > li > a:hover {color: #103578; font-weight: 500;}
	

.gnbM{}
.h1_logo img{margin: 33px auto 0; width: 346px;}
.logo-white{display: block;}
.logo-blue{display: none;}	
.header.active .logo-blue{display: block;}	
	.header.active .logo-white{display: none;}
#gnb{height: 70px; border-bottom: 1px solid #ffffff4a;}
	
.menu-toggle {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  position: absolute;
  right: 20px;
  top: 15px;
  cursor: pointer;
}
	
	
	/*뉴스*/
.content{background: #103578; height: 169px; padding: 40px 0;}
.newsW{width: 1300px; margin: 0 auto; display: flex;justify-content: space-between; flex-direction: unset;}
.news-slider-wrap{padding-top: 0px; margin-top: 0; top: -130px}
.newsL{}
.newsul{width: 943px; overflow: hidden; z-index: 2; position: relative;}
.newsul li{background: #fff; padding: 43px; width: 306px; height: 201px; border-radius: 30px; margin-right: 10px;}
.newsul li p{text-align: left; font-size: 16px;}
.newsul li span{text-align: right; display: block; color: #b2b2b2; font-size: 15px;}
.newsR{}
.slickbutton{margin-top: 10px; margin-bottom: 0;}
.slickbutton button.slick-arrow{background: #1648a3; color: #fff; border: none; width: 41px; height: 41px; border-radius: 50px; font-family: 'SBAggroB'; cursor: pointer;}
.slickbutton button.slick-prev{}
.slickbutton button.slick-next{}
.newsR h3{color: #fff; font-family: 'S-CoreDream-8Heavy'; position: relative; display: inline-block;}
.newsR h3::after{position: absolute; display: block; content: url("../images/main/news_arrow.png"); top: -24px; left: -94px;}
	
	
/*주요일정 및 다운로드*/
.content2{width: 1300px; margin: 0 auto; display: flex; padding: 72px 10px;}	
.datesBox{display: flex; gap:56px; width: 55%;}
.datesBox h3 span{display: block; margin-left: 0px; text-align: left;}
.downList li{width: 49%;}
.downList li a{padding: 45px 0; font-size: 21.33px;}
.datelist li{margin-top: 0; margin-left: 0px; justify-content: left;}	
.datelist li:nth-of-type(2), .datelist li:nth-of-type(3){margin-top: 40px;}
	
	
/*quickmenu*/
.content3{background: #01b7c5; width: 100%; height: 515px; padding: 62px 0;}	
.quick-w{width: 1300px; margin: 0 auto;}
.quick-w h3{}
.quickList{margin-top: 53px; gap:0;}
.quickList li{width: calc(100%/6); margin-bottom: 50px;}
.quickList li a{font-size: 20.33px;}	
.quickImg img{height: 79px;}	
	
	/* footer logo */
.footer{width:100%; padding: 38px 0; clear: both; background: #000; height: 212px}	
.footer_logo{padding: 30px 0;}
.footer_wrap{width: 1300px; display:flex; margin: 0 auto; padding: 0;}
.footer-txt {width: 75%;}
.footer-txt:last-child{width:25%;}	
.footer_logo .org_area{width: 1300px; margin: 0 auto;}
.footer-txt ul li{font-size: 16px;}	
.footer-txt:last-child{margin-top: 0;}
.footer-txt h2{font-size: 19px;}
.footer-txt h2 span{font-size: 15px;}
.footer-txt p{font-size: 16px;}
	.footer_logo .org_area ul li{width: auto;}	
.footer_logo .org_area ul li a{width: auto;}	
	
	/*sponslide*/
	.sponsorSlider{width: 1300px; margin: 0 auto;}
	
	.popup-btn-grid a {padding: 1.5em 0;        /* em 단위로 버튼 높이를 비율로 설정 */}
	
	
	.eventBtn{gap: 10px 1px; justify-content: space-between;}
.eventBtn li{width: 19%;}
.eventBtn li a{}
	
	
	#visual .roll > li img{margin: 0 auto; display: block; position: absolute; left: 50%; transform: translate(-50%, 0%);}
	
	.sliderbtn{position: absolute; z-index: 999; top:59%; text-align: center; width: 37%  !important;}
	.sliderbtn > a{background: #ffffff21; color: #fff; padding: 8px 13px; font-size: 1em; border: 2px solid #fff; border-radius: 50px; transition: .3s ease;}
	.sliderbtn > a:hover{cursor: pointer; background: #000;}
	.close {float: right; font-size: 35px; font-weight: bold; position: relative; top: 30px; right: 0; background: #fff; width: 30px; height: 30px;}
	.close:hover, 
	.close:focus { color: black; text-decoration: none; cursor: pointer;}
	/* The Modal (background) --------------------------------------------*/
	.modal {display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);}
	.modal-content img{width: 500px;}
	.modal-content{width: 500px;}
}