@charset "utf-8";

@media (max-width: 1600px) {
	/* header */
	#gnb > .container > ul > li > a {padding: 0 10px; width: 140px;}

	.main-visual .controler-wrap {bottom: 20px; justify-content: center;}
	.m-section01 .board-wrap {width: 45%; padding-right: 100px;}
	.m-section01 .stories-wrap {max-width: none; width: 55%;}
}

@media (max-width: 1400px) {
	.m-section01 .board-wrap {padding-right: 60px;}
	.m-section01 .stories-title {margin-bottom: 55px;}
	.m-section01 .stories-details .text-box .university {font-size: 36px;}
	.m-section01 .stories-wrap .btn-more {bottom: 25px; right: 25px;}

	.m-section02 .gallery {padding: 0 15px;}
}

@media (max-width: 1200px) {
	/* header */
	#gnb > .container > ul > li > a {padding: 0 10px; width: 125px;}

	.m-section01 {padding: 135px 0 200px;}
	.m-section01 .stories-wrap .inner {padding: 44px 30px 100px 30px;}

	.m-section02 {height: 250px;}
}

@media (max-width: 1024px) {
	/* header */
	#header {height: 120px; box-shadow: 0px 5px 10px rgba(0,0,0,0.03);}
	#header.hide {transform:translateY(0);}

	.header-top {position: relative; height: 100%;}
	.header-top .banner {display: none;}
	.header-top .util-wrap {right: 70px;}
	.mems {margin-bottom: 15px;}
	.mems ul {margin: 0;}
	.d-day p {font-size: 16px; line-height: 38px; padding: 0 22px;}

	#gnb {display:none;}

	.sitemap-btn {display: block;}

	/* main */
	.main-visual {/* height: 586px; */ margin-top: 120px;}
	/* .main-visual .origin .item {height: 586px;}
	.main-visual .origin .logo {bottom: 35px; padding: 0 15px;}
	.main-visual .origin .logo img {margin: 0 0 0 auto;}
	.main-visual .thumb .text-box p {font-size: 20px; margin-bottom: 11px;}
	.main-visual .thumb .text-box h2 {font-size: 55px; margin-bottom: 8px;}
	.main-visual .thumb .text-box b {font-size: 48px;}
	.main-visual .thumb .text-box b span {padding: 0 13px;} */

	.m-section01 {padding: 100px 0 220px;}
	.m-section01 .wrap {display: block;}
	.m-section01 .board-wrap {width: 100%; flex: auto; padding-right: 0; margin-bottom: 80px;}
	.m-section01 .board:not(:last-child) {margin-bottom: 50px;}
	.m-section01 .board-title {padding-bottom: 11px; margin-bottom: 25px;}
	.m-section01 .board-title h3 {font-size: 24px;}
	.m-section01 .board-details li:not(:last-child) {margin-bottom: 30px;}
	.m-section01 .board-details .num {max-width: 38px; height: 38px; line-height: 38px; margin-right: 18px;}
	.m-section01 .board-details .content h4 {font-size: 16px;}
	.m-section01 .board-details .content p {font-size: 16px;}
	.m-section01 .board-details .date {font-size: 15px;}
	.m-section01 .stories-wrap {width: 100%; padding: 30px;}
	.m-section01 .stories-wrap:before {background-size: 220px auto;}
	.m-section01 .stories-wrap .inner {border-radius: 0 260px 0 0; padding: 40px 30px 90px;}
	.m-section01 .stories-wrap .inner.no-data {font-size: 16px;}
	.m-section01 .stories-wrap .btn-more {bottom: 20px; right: 20px; width: 66px; height: 66px; font-size: 15px;}
	.m-section01 .stories-title {margin-bottom: 55px;}
	.m-section01 .stories-title h3 {font-size: 24px; padding-left: 60px; text-underline-offset: 12px;} 
	.m-section01 .stories-title h3:before {top: -5px; background-size: 40px auto;}
	.m-section01 .stories-details .img-box {max-width: 124px; margin: 25px 50px 0 30px;}
	.m-section01 .stories-details .img-box:before {top: -46px; left: -32px; background-size: 70px auto;}
	.m-section01 .stories-details .img-box:after {top: 165px; background-size: 46px auto;}
	.m-section01 .stories-details .text-box .name-wrap {padding-bottom: 25px; margin-bottom: 25px;}
	.m-section01 .stories-details .text-box .university {font-size: 32px;margin-bottom: 9px;}
	.m-section01 .stories-details .text-box .student {font-size: 18px;padding-right: 18px; margin-right: 12px;}
	.m-section01 .stories-details .text-box .student:after {top: 4px;}
	.m-section01 .stories-details .text-box .school {font-size: 15px;}
	.m-section01 .stories-details .details-wrap .title {font-size: 20px; margin-bottom: 10px;}
	.m-section01 .stories-details .details-wrap .details {font-size: 16px; padding-right: 25px; height:calc(1.72em * 1 * 5); -webkit-line-clamp:5;}
	
	.m-section02 {height: 180px;}
	.m-section02 .wrap {bottom: 60px;}
	.m-section02 .gallery {padding: 0 15px;}
	.m-section02 .gallery .arrows {top: 15px; right: 20px;}
	
	.m-section03 {padding: 100px 0 150px;}

	.m-section03 .title {margin-bottom: 20px;}
	.m-section03 .title h3 {font-size: 24px;}
	.m-section03 .title .tab-nav ul li:after {top: 4px; height: 16px;}
	.m-section03 .title .tab-nav a {font-size: 18px;}

	.m-section03 .wrap {padding: 25px 25px;}
	.m-section03 .map-box .root_daum_roughmap {height:400px !important;}
	.m-section03 .map-box .root_daum_roughmap .wrap_map {height:400px !important;}
	.m-section03 .info-box {max-width: 400px; padding-left: 40px;}
	.m-section03 .info-box .logo {margin: 0 0 15px;}
	.m-section03 .info-box .address {font-size: 16px; padding-bottom: 20px; margin-bottom: 25px;}
	.m-section03 .info-box .time-wrap {margin-bottom: 20px;}
	.m-section03 .info-box .time-wrap dl:not(:last-child) {margin-bottom: 16px;}
	.m-section03 .info-box .time-wrap dt {max-width: 145px; font-size: 20px; padding-left: 15px;}
	.m-section03 .info-box .time-wrap dt:before {top: 11px;}
	.m-section03 .info-box .time-wrap dt:after {top: 6px; right: 13px;}
	.m-section03 .info-box .time-wrap dd {font-size: 18px;}
	.m-section03 .info-box .time-wrap dd span {font-size: 16px;}
	.m-section03 .info-box .tel p {font-size: 26px; margin-bottom: 10px;}
	.m-section03 .info-box .tel a {font-size: 40px;}

	/* footer */
	#footer {padding: 70px 0 80px;}
	#footer .logo {max-width: 200px;}
	#footer .logo img {width: 120px;}
	#footer .footer-top {padding-bottom: 25px; margin-bottom: 25px;}
	#footer .footer-top .name h2 {font-size: 26px; margin-right: 25px;}
	#footer .footer-top .name p {font-size: 18px;}
	#footer .footer-top .name li {font-size: 18px;}
	#footer .footer-top .sns ul li:not(:nth-of-type(1)) {margin-left: 20px;}
	#footer .footer-bottom .info {margin-bottom: 30px;}
	#footer .footer-bottom .info p {font-size: 16px;}
	#footer .footer-bottom .info ul {margin: 0 -15px;}
	#footer .footer-bottom .info ul li {font-size: 16px; padding: 0 15px;}
	#footer .footer-bottom .copyright {font-size: 15px;}

	/* quick-link */
	.quick-link ul {padding: 20px 10px;}
	.quick-link ul li:not(:last-child) {margin-bottom: 15px;}
}

@media (max-width: 768px) {
	/* header */
	#header {height: 100px; box-shadow: 0px 5px 10px rgba(0,0,0,0.03);}
	.header-top .sitelogo a {margin-top:-28px;}
	.header-top .sitelogo img {width: 80px;}
	.header-top .util-wrap {right: 56px;}
	.mems {margin-bottom: 10px;}
	.mems ul li {padding:0 8px;} 
	.mems ul li a {font-size: 14px;}
	.d-day {width: 200px;}
	.d-day p {font-size: 14px; line-height: 34px;}

	/* main */
	.main-visual {/* height: 450px; */ margin-top: 100px;}
	.main-visual .items .pic .visual-mob {display: block;}
	.main-visual .items .pic .visual-pc {display: none;}
	.main-visual .items .pic {padding-bottom:60%;}
	/* .main-visual .origin .item {height: 450px;}
	.main-visual .origin .logo {bottom: 25px; padding: 0 15px;}
	.main-visual .origin .logo img {margin: 0 0 0 auto;}
	.main-visual .thumb .text-box p {font-size: 18px; margin-bottom: 8px;}
	.main-visual .thumb .text-box h2 {font-size: 40px; margin-bottom: 6px;}
	.main-visual .thumb .text-box b {font-size: 32px;}
	.main-visual .thumb .text-box b span {padding: 0 10px;}
	.main-visual .controler-wrap {margin-top: 40px;} */
	.main-visual .controler-wrap {bottom: 10px;}

	.m-section01 {padding: 80px 0 100px;}
	.m-section01 .board-wrap {margin-bottom: 60px;}
	.m-section01 .board:not(:last-child) {margin-bottom: 40px;}
	.m-section01 .board-title {padding-bottom: 11px; margin-bottom: 20px;}
	.m-section01 .board-title h3 {font-size: 20px;}
	.m-section01 .board-details li:not(:last-child) {margin-bottom: 30px;}
	.m-section01 .board-details .num {margin-right: 15px;}
	.m-section01 .stories-wrap {padding: 20px;}
	.m-section01 .stories-wrap:before {background-size: 180px auto;}
	.m-section01 .stories-wrap:after {bottom: 19px; right: 19px;}
	.m-section01 .stories-wrap .inner {border-radius: 0 200px 0 0; padding: 40px 20px 90px;}
	.m-section01 .stories-wrap .btn-more {bottom: 20px; right: 20px; width: 60px; height: 60px; font-size: 14px;}
	.m-section01 .stories-title {margin-bottom: 55px;}
	.m-section01 .stories-title h3 {font-size: 20px; padding-left: 55px; text-underline-offset: 6px;} 
	.m-section01 .stories-title h3:before {top: -8px; background-size: 36px auto;}
	.m-section01 .stories-details {display: block;}
	.m-section01 .stories-details .img-box {max-width: 120px; margin: 25px auto 60px;}
	.m-section01 .stories-details .img-box:before {top: -36px; left: -32px; background-size: 60px auto;}
	.m-section01 .stories-details .img-box:after {top: 160px; background-size: 40px auto;}
	.m-section01 .stories-details .text-box {width: 100%; flex: auto;}
	.m-section01 .stories-details .text-box .name-wrap {padding-bottom: 15px; margin-bottom: 15px;}
	.m-section01 .stories-details .text-box .university {font-size: 26px;margin-bottom: 9px;}
	.m-section01 .stories-details .text-box .student {font-size: 16px;padding-right: 16px; margin-right: 12px;}
	.m-section01 .stories-details .text-box .student:after {top: 4px; height: 14px;}
	.m-section01 .stories-details .details-wrap .title {font-size: 18px; margin-bottom: 10px;}
	.m-section01 .stories-details .details-wrap .details {font-size: 16px; padding-right: 0; height:calc(1.72em * 1 * 4); -webkit-line-clamp:4;}

	.m-section02 {height: auto; padding: 80px 15px;}
	.m-section02 .wrap {position: relative; bottom: auto; display: block;}
	.m-section02 .gallery {width: 100%; padding: 0;}
	.m-section02 .gallery:not(:last-child) {margin-bottom: 40px;}
	.m-section02 .gallery .arrows {top: 15px; right: 20px;}

	.m-section03 {padding: 80px 0 100px;}
	.m-section03 .title h3 {font-size: 20px;}
	.m-section03 .wrap {display: block; padding: 25px 20px;}
	.m-section03 .map-box {width: 100%; flex: auto; margin-bottom: 50px;}
	.m-section03 .map-box .root_daum_roughmap {height:300px !important;}
	.m-section03 .map-box .root_daum_roughmap .wrap_map {height:300px !important;}
	.m-section03 .info-box {max-width: none; width: 100%; padding-left: 0;}
	.m-section03 .info-box .logo {margin: 0 0 20px;}
	.m-section03 .info-box .address {font-size: 16px; padding-bottom: 15px; margin-bottom: 20px;}
	.m-section03 .info-box .time-wrap {margin-bottom: 15px;}
	.m-section03 .info-box .time-wrap dl:not(:last-child) {margin-bottom: 10px;}
	.m-section03 .info-box .time-wrap dt {max-width: 130px; font-size: 18px; padding-left: 15px;}
	.m-section03 .info-box .time-wrap dt:before {top: 9px;}
	.m-section03 .info-box .time-wrap dt:after {top: 6px; right: 10px; height: 16px;}
	.m-section03 .info-box .time-wrap dd {width: 1%; flex: 1 1 auto; font-size: 16px;}
	.m-section03 .info-box .time-wrap dd span {font-size: 16px; }
	.m-section03 .info-box .tel p {font-size: 22px; margin-bottom: 10px;}
	.m-section03 .info-box .tel a {font-size: 30px;}	

	/* footer */
	#footer {padding: 60px 0 80px;}
	#footer .wrap {display: block; text-align: center;}
	#footer .logo {max-width: none; margin-bottom: 25px;}
	#footer .logo img {width: 100px;}
	#footer .info-wrap {width: 100%; flex: auto;}
	#footer .footer-top {display: block; padding-bottom: 15px; margin-bottom: 15px;}
	#footer .footer-top .name {display: block; flex-wrap: wrap; align-items: center;}
	#footer .footer-top .name h2 {font-size: 22px; margin-right: 0; margin-bottom: 10px;}
	#footer .footer-top .name ul {justify-content: center; margin: 0 -10px 20px;}
	#footer .footer-top .name li {padding: 0 10px; font-size: 18px;}

	#footer .footer-top .sns ul {justify-content: center;}
	#footer .footer-top .sns ul li:not(:nth-of-type(1)) {margin-left: 10px;}
	#footer .footer-top .sns ul img {width: 40px;}
	#footer .footer-bottom .info {margin-bottom: 20px;}
	#footer .footer-bottom .info p {font-size: 14px;}
	#footer .footer-bottom .info ul {justify-content: center; margin: 0 -10px;}
	#footer .footer-bottom .info ul li {font-size: 14px; padding: 0 10px;}
	#footer .footer-bottom .copyright {font-size: 14px;}

	/* quick-link */
	.quick-link {position: fixed; top: auto; bottom: 0; left: 0; right: auto; transform: translateY(0); width: 100%;}
	.quick-link ul {display: flex; justify-content: space-between; padding: 10px 10px; border-radius: 0; box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.03);}
	.quick-link ul li {flex: 1; text-align: center;}
	.quick-link ul li:not(:last-child) {margin-bottom: 0;}
	.quick-link ul li a:hover {transform: translateY(0);}
	.quick-link ul li img {width: 40px;}
}