@charset "utf-8";

@media (max-width: 1600px) {
	.lnb ul {margin: 0 -30px;}
	.lnb ul li {padding: 0 30px;}
}

@media (max-width: 1400px) {
	.lnb ul {margin: 0 -15px;}
	.lnb ul li {padding: 0 15px;}

	/* s102 */
	.s102 .text-box .left {max-width: 400px;}
	.s102 .text-box .right {padding-right: 40px;}

	/* s402 */
	.s402 ul li .text-box {display: block;} 
	.s402 ul li .text-box .btn {margin: 10px 0 0 auto;}
}

@media (max-width: 1200px) {
	.lnb-wrap {border-bottom: 0;}
	.lnb-wrap .wrap {display: block; padding: 0;}
	.lnb {border-bottom: 1px solid #ddd;}
	.lnb ul li a {font-size: 18px;}
	.path ul {justify-content: flex-end; height: 60px;}

	/* s103 */
	.s103 .history:before {left: 380px;}
	.s103 .history .year {max-width: 380px;}
}

@media (max-width: 1024px) {
	.sub-visual {margin-top: 80px; height: 400px;}
	.sub-visual p {font-size: 50px;}
	
	.lnb ul {height: 60px; margin: 0 -20px;}
	.lnb ul li {padding: 0 20px;}
	.lnb ul li a {font-size: 18px;}
	.path ul {height: 50px; margin: 0 -12px;}
	.path ul li {padding: 0 12px; font-size: 15px;}
	.path ul li.home {width: 42px; height: 16px; background-size: auto 16px;}

	.page-title {margin: 70px 0 60px;}
	.page-title h2 {font-size: 45px; padding-top: 20px;}
	.page-title h2:before {width: 30px;}
	.page-title h2:after {margin-left: -15px;}
	@keyframes title-ani {
		0% {
			margin-left: -15px;
		}
		50% {
			margin-left: 10px;
		}
		100% {
			margin-left: -15px;
		}
	}

	.sub-cont {padding-bottom: 130px;}
	.real-cont {padding-bottom: 130px;}

	.sub_10 {padding-top: 100px;}

	/* s101 */
	.s101 .text-box {display: block; margin-bottom: 70px;}
	.s101 .text-box .left {max-width: none; padding-right: 0;}
	.s101 .text-box .left b {font-size: 18px; margin-bottom: 18px;}
	.s101 .text-box .left h3 {font-size: 30px; margin-bottom: 35px;}
	.s101 .text-box .sig.pc-only {display: none;}
	.s101 .text-box .right {width: 100%; flex: auto;}
	.s101 .text-box .right p {font-size: 16px;}
	.s101 .text-box .right p:not(:last-child) {margin-bottom: 20px;}
	.s101 .text-box .sig.mob-only {display: block; font-size: 20px;}
	.s101 .img-box {height: 300px;} 

	/* s102 */
	.s102 .img-box {height: 300px; margin-bottom: 50px;} 
	.s102 .text-box {display: block;}
	.s102 .text-box .left {max-width: none; padding-left: 0;}
	.s102 .text-box .left h3 {font-size: 30px; margin-bottom: 35px;}
	.s102 .text-box .left h3 br {display: none;}
	.s102 .text-box .right {width: 100%; flex: auto; padding-right: 0;}
	.s102 .text-box .right p {font-size: 16px;}
	.s102 .text-box .right p:not(:last-child) {margin-bottom: 20px;}
	.s102 .text-box .right .sig {font-size: 20px; margin-top: 30px;}

	/* s103 */
	.s103 .img-box {height: 300px; margin-bottom: 60px;} 
	.s103 .history {padding-bottom: 130px;}
	.s103 .history:before {left: 240px; height: calc(100% - 12px);}
	.s103 .history .row {display: flex;}
	.s103 .history .row:not(:last-child) {margin-bottom: 40px;}
	.s103 .history .year {max-width: 240px; padding-right: 40px;}
	.s103 .history .year:before {top: 12px; right: -1px;}
	.s103 .history .year:after {top: 33px; right: -7px;}
	.s103 .history .year h3 {font-size: 65px;}
	.s103 .history .details {width: 1%; flex: 1 1 auto; padding-left: 40px; margin-top: 23px;}
	.s103 .history .month-wrap .month {max-width: 70px; font-size: 18px;}
	.s103 .history .month-wrap ul li {font-size: 16px;}
	.s103 .history .month-wrap:not(:last-child) {margin-bottom: 30px;}

	/* s301 */
	.s301 .arti01 p {font-size: 20px;}
	.s301 .arti01 p:not(:last-child) {margin-bottom: 30px;}
	.s301 .arti01 .img-box {height: 400px; margin: 60px 0 70px;} 
	.s301 .arti01 .img-box:before {top: -30px; height: 60px;}
	.s301 .arti01 .img-box:after {top: 0; height: 30px;}
	.s301 .arti02 {padding-bottom: 130px;} 
	.s301 .arti02:before {top: -200px; height: calc(100% + 200px);}
	.s301 .arti02 .round-text {margin-bottom: 35px;}
	.s301 .arti02 .round-text p {padding: 15px 34px; font-size: 18px;}
	.s301 .arti02 .text-box p {font-size: 16px;}
	.s301 .arti02 .text-box p:not(:last-child) {margin-bottom: 25px;}

	/* s401 */
	.s401 .arti01 {margin-bottom: 100px;}
	.s401 .arti01 p {font-size: 22px;}
	.s401 .arti01 p:not(:last-child) {margin-bottom: 30px;}
	.s401 .arti01 .img-box {height: 400px; margin: 60px 0 0;} 
	.s401 .arti02 {padding: 90px 0 100px;}
	.s401 .arti02 h3 {font-size: 30px; margin-bottom: 60px;}
	.s401 .arti02 ol {flex-wrap: wrap; margin: -10px;}
	.s401 .arti02 ol li {flex: auto; width: 50%; padding: 10px;}
	.s401 .arti02 ol li .inner {padding: 40px 20px 50px;}
	.s401 .arti02 ol li .icon {width: 100px; height: 100px; background-size: 100px auto; margin: 0 auto 30px;}
	.s401 .arti02 ol li .num {font-size: 16px; margin-bottom: 10px;}
	.s401 .arti02 ol li b {font-size: 22px; margin-bottom: 8px;}
	.s401 .arti02 ol li p {font-size: 16px;}
	.s401 .arti03 .wrap {padding: 50px 0 60px;}
	.s401 .arti03 .wrap:nth-child(1) {padding-top: 80px;}
	.s401 .arti03 .title {margin-bottom: 20px;}
	.s401 .arti03 .title h3 {font-size: 36px; margin-right: 10px;}
	.s401 .arti03 p {font-size: 16px;}
	.s401 .arti03 table caption {font-size: 16px; padding: 14px;}
	.s401 .arti03 table tbody th {font-size: 16px;}
	.s401 .arti03 table tbody td {font-size: 16px; padding: 14px 25px;}
	.s401 .arti03 .mb-47 {margin-bottom: 30px;}
	.s401 .arti03 .mb-54 {margin-bottom: 40px;}

	/* s402 */
	.s402 ul {margin: -10px;}
	.s402 ul li {width: 33.3333%; padding: 10px;}
	.s402 ul li .text-box {padding: 25px 20px;}
	.s402 ul li .text-box b {font-size: 22px; margin-bottom: 9px;}
	.s402 ul li .text-box p {font-size: 18px;}
	.s402 ul li .text-box .btn {width: 50px; height: 50px;}

	.lecturers-popup .popup-header .btn-close {margin-top: -20px; right: 30px; width: 40px; height: 40px; z-index: 8040; }
	.lecturers-popup .popup-cont {padding: 0 40px 50px;}
	.lecturers-popup .popup-cont .inner {height: 500px; padding: 0 20px;}
	.lecturers-popup .popup-cont .wrap {display: block; padding: 30px 0;}
	.lecturers-popup .popup-cont .title {max-width: none; font-size: 20px; padding-left: 0; margin-bottom: 10px; border-right: 0;}
	.lecturers-popup .popup-cont ul {width: 100%; flex: auto; padding-left: 0;}
	.lecturers-popup .popup-cont ul li {font-size: 16px; padding-left: 10px;}
	.lecturers-popup .popup-cont ul li:before {top: 14px;}

	/* s501 */
	.s501 article:not(:last-child) {margin-bottom: 80px;}
	.s501 .arti01 p {font-size: 22px;}
	.s501 .arti01 .img-box {height: 400px; margin-top: 60px;} 
	.arti-title {margin-bottom: 25px;}
	.arti-title h3 {font-size: 34px; padding-left: 20px; margin-right: 8px;}
	.arti-title h3:before {top: 4px; width: 6px; height: 34px;}
	.arti-title span {font-size: 20px;}
	.text-list {display: flex;}
	.text-list li {padding: 16px 20px; font-size: 16px;}
	.s501 .arti03 .cont-box {height: 300px;}
	.s501 .arti03 .cont-box .wrap {padding: 40px 50px;}
	.s501 .arti03 .cont-box .text {padding-right: 10px;}
	.s501 .arti03 .cont-box .text h4 {font-size: 28px; margin-bottom: 15px;}
	.s501 .arti03 .cont-box .text p {font-size: 16px;}
	.s501 .arti03 .cont-box .text a {width: 200px; padding: 12px 26px; font-size: 16px;}
	.s501 .arti03 .cont-box .text a:after {right: 20px;}
	.s501 .arti03 .cont-box .qr figcaption {font-size: 16px; margin-bottom: 6px;}
	.s501 .arti04 p {font-size: 16px; margin-top: 20px;}
}

@media (max-width: 768px) {
	.sub-visual {margin-top: 60px; height: 300px;}
	.sub-visual p {font-size: 40px;}
	
	.lnb ul {height: 60px; margin: 0 -20px;}
	.lnb ul li {padding: 0 20px;}
	.lnb ul li a {font-size: 16px;}

	.sub_4 .lnb ul {flex-wrap: wrap; height: 100px; margin: 0;}
	.sub_4 .lnb ul li {width: 25%; padding: 0 5px;}
	.sub_4 .lnb ul li a {width: 100%;}

	.path ul {height: 50px; margin: 0 -12px;}
	.path ul li {padding: 0 12px; font-size: 15px;}
	.path ul li.home {width: 42px; height: 16px; background-size: auto 16px;}

	.page-title {margin: 60px 0 50px;}
	.page-title h2 {font-size: 35px; padding-top: 20px;}

	.sub-cont {padding-bottom: 100px;}
	.real-cont {padding-bottom: 100px;}

	.sub_10 {padding-top: 80px;}

	/* s101 */
	.s101 .text-box {margin-bottom: 60px;}
	.s101 .text-box .left b {font-size: 16px; margin-bottom: 18px;}
	.s101 .text-box .left h3 {font-size: 26px; margin-bottom: 25px;}
	.s101 .text-box .right p {font-size: 16px;}
	.s101 .text-box .right p:not(:last-child) {margin-bottom: 20px;}
	.s101 .text-box .sig.mob-only {font-size: 18px;}
	.s101 .img-box {height: 250px;} 
	
	/* s102 */
	.s102 .img-box {height: 250px; margin-bottom: 40px;} 
	.s102 .text-box .left h3 {font-size: 26px; margin-bottom: 25px;}
	.s102 .text-box .right p {font-size: 16px;}
	.s102 .text-box .right p:not(:last-child) {margin-bottom: 20px;}
	.s102 .text-box .right .sig {font-size: 18px; margin-top: 25px;}

	/* s103 */
	.s103 .img-box {height: 250px; margin-bottom: 40px;} 
	.s103 .history {padding-bottom: 100px;}
	.s103 .history:before {left: 6px; height: calc(100% - 12px);}
	.s103 .history .row {display: block; padding-left: 30px;}
	.s103 .history .row:not(:last-child) {margin-bottom: 45px;}
	.s103 .history .year {max-width: none; padding-right: 0; text-align: left;}
	.s103 .history .year:before {top: 0px; right: auto; left: -24px;}
	.s103 .history .year:after {top: 18px; right: auto; left: -29px;}
	.s103 .history .year h3 {font-size: 45px;}
	.s103 .history .details {width: 100%; flex: auto; padding-left: 0; margin-top: 23px;}
	.s103 .history .month-wrap .month {max-width: 55px; font-size: 16px;}
	.s103 .history .month-wrap ul li {font-size: 16px;}
	.s103 .history .month-wrap:not(:last-child) {margin-bottom: 20px;}

	/* s301 */
	.s301 .arti01 p {font-size: 18px;}
	.s301 .arti01 p:not(:last-child) {margin-bottom: 25px;}
	.s301 .arti01 .img-box {height: 300px; margin: 50px 0 60px;} 
	.s301 .arti01 .img-box:before {top: -30px; height: 60px;}
	.s301 .arti01 .img-box:after {top: 0; height: 30px;}
	.s301 .arti02 {padding-bottom: 100px;} 
	.s301 .arti02:before {top: -150px; height: calc(100% + 150px);}
	.s301 .arti02 .round-text {margin-bottom: 35px;}
	.s301 .arti02 .round-text p {padding: 15px 34px; font-size: 18px;}
	.s301 .arti02 .text-box p {font-size: 16px;}
	.s301 .arti02 .text-box p:not(:last-child) {margin-bottom: 25px;}

	/* s401 */
	.s401 .arti01 {margin-bottom: 70px;}
	.s401 .arti01 p {font-size: 20px;}
	.s401 .arti01 p:not(:last-child) {margin-bottom: 25px;}
	.s401 .arti01 p br {display: none;}
	.s401 .arti01 .img-box {height: 300px; margin: 50px 0 0;} 
	.s401 .arti02 {padding: 70px 0 80px;}
	.s401 .arti02 h3 {font-size: 26px; margin-bottom: 40px;}
	.s401 .arti02 ol {margin: -5px;}
	.s401 .arti02 ol li {width: 50%; padding: 5px;}
	.s401 .arti02 ol li .inner {padding: 30px 15px 40px;}
	.s401 .arti02 ol li .icon {width: 90px; height: 90px; background-size: 90px auto; margin: 0 auto 20px;}
	.s401 .arti02 ol li .num {font-size: 16px; margin-bottom: 10px;}
	.s401 .arti02 ol li b {font-size: 20px; margin-bottom: 8px;}
	.s401 .arti02 ol li p {font-size: 16px;}
	.s401 .arti02 ol li p br {display: none;}
	.s401 .arti03 .wrap {padding: 40px 0 50px;}
	.s401 .arti03 .wrap:nth-child(1) {padding-top: 70px;}
	.s401 .arti03 .title {margin-bottom: 15px;}
	.s401 .arti03 .title h3 {font-size: 30px;}
	.s401 .arti03 p {font-size: 16px;}
	.s401 .arti03 table caption {font-size: 16px; padding: 14px;}
	.s401 .arti03 table tbody th {font-size: 16px;}
	.s401 .arti03 table tbody td {font-size: 16px; padding: 14px 25px;}
	.s401 .arti03 .mb-47 {margin-bottom: 20px;}
	.s401 .arti03 .mb-54 {margin-bottom: 30px;}

	/* s402 */
	.s402 ul {margin: -5px;}
	.s402 ul li {width: 50%; padding: 5px;}
	.s402 ul li .text-box {padding: 15px 10px;}
	.s402 ul li .text-box b {font-size: 20px; margin-bottom: 6px;}
	.s402 ul li .text-box p {font-size: 16px;}
	.s402 ul li .text-box .btn {width: 40px; height: 40px;}

	.lecturers-popup .popup-header {position: relative; height: 60px;}
	.lecturers-popup .popup-header .btn-close {right:15px; margin-top: -15px; width: 30px; height: 30px;}
	.lecturers-popup .popup-cont {padding: 0 20px 20px;}
	.lecturers-popup .popup-cont .inner {height: 60vh; padding: 0 10px;}
	.lecturers-popup .popup-cont .wrap {padding: 20px 0;}
	.lecturers-popup .popup-cont .title {max-width: none; font-size: 18px; padding-left: 0; margin-bottom: 5px;}
	.lecturers-popup .popup-cont ul {width: 100%; flex: auto; padding-left: 0;}
	.lecturers-popup .popup-cont ul li {font-size: 15px; line-height: 1.8em; padding-left: 10px;}
	.lecturers-popup .popup-cont ul li:before {top: 12px;}

	/* s501 */
	.s501 article:not(:last-child) {margin-bottom: 60px;}
	.s501 .arti01 p {font-size: 20px;}
	.s501 .arti01 p br.pc-only {display: none;}
	.s501 .arti01 .img-box {height: 300px; margin-top: 50px;} 
	.arti-title {margin-bottom: 20px;}
	.arti-title h3 {font-size: 28px; padding-left: 18px; margin-right: 0;}
	.arti-title h3:before {top: 3px; width: 6px; height: 26px;}
	.arti-title span {font-size: 18px; padding-left: 18px;}
	.text-list {display: block; border-bottom: 0;}
	.text-list li {padding: 14px 15px; font-size: 16px; border-bottom: 1px solid #ddd;}
	.text-list li:after {display: none;}
	.s501 .arti03 .cont-box {height: 300px;}
	.s501 .arti03 .cont-box .wrap {padding: 30px 25px;}
	.s501 .arti03 .cont-box .text h4 {font-size: 24px; margin-bottom: 10px;}
	.s501 .arti03 .cont-box .text p {font-size: 16px;}
	.s501 .arti03 .cont-box .text a {width: 200px; padding: 12px 26px; font-size: 16px;}
	.s501 .arti03 .cont-box .text a:after {right: 20px;}
	.s501 .arti03 .cont-box .qr figcaption {font-size: 16px; margin-bottom: 6px;}
	.s501 .arti04 p {font-size: 16px; margin-top: 20px;}
}

@media (max-width: 480px) {
	.s301 .arti01 p br {display: none;}
}