@charset "utf-8";

@media (max-width: 1400px) {
	.section-header .inner .img {right: 0px !important; z-index: -1;}

	.arti_common .how ul {width: calc(100% + 20px); margin: 0 -10px;}
	.arti_common .how ul li {padding: 0 10px;}
	
	.s1_3 .arti03 .way ul {flex-wrap: wrap; gap: 30px}
	.s1_3 .arti03 .way ul li {max-width: 100% !important;}
	.s1_3 .arti03 .way ul li:nth-of-type(2) {border-top: 1px solid #ddd; padding-top: 30px;}

	/* s2_1 */
	.s2_1 .arti_common .how ul {width: calc(100% + 20px); margin: 0 -10px;}
	.s2_1 .arti_common .how ul li {padding: 0 10px;}
	.s2_1 .arti_common .how ul li:nth-of-type(3) ~ li {margin-top: 20px;}
	.s2 .effect {padding: 50px 0 0; background-size: contain;}
	
	/* s2_3 */
	.s2_3 .arti_common .how ul {width: calc(100% + 20px); margin: 0 -10px;}
	.s2_3 .arti_common .how ul li {padding: 0 10px;}
	.s2_3 .arti_common .how ul li:nth-of-type(3) ~ li {margin-top: 20px;}
	
	/* s3_1 */
	.s3_1 .arti_common .how ul {width: calc(100% + 20px); margin: 0 -10px;}
	.s3_1 .arti_common .how ul li {padding: 0 10px;}
	.s3_1 .arti_common.arti02 .how ul li:nth-of-type(1) dl dd p > br {display: none;}
	
	.step ul li .box {padding-top: 30px;}
	.step ul li .box h6 {font-size: 20px;}
	.step ul li .box p {line-height: 1.3;}
	
	/* s5 */
	.s5_1_1 .arti_common .how ul li:nth-of-type(4) ~ li {margin-top: 20px;}

	.s5_1 .arti02 .contact ul {width: calc(100% + 20px); margin: 0 -10px; padding: 32px 10px;}
	.s5_1 .arti02 .contact ul li {padding: 0 10px;}
	.s5_1 .arti02 .contact ul li dl {gap: 10px;}
	
}

@media (max-width: 1200px){
	.section-header .inner {display: flex; padding: 0 !important;}
	.section-header .inner .img {position: static; max-width: 500px; width: 100%;}

	.arti_common .how ul li dl {padding: 55px 10px 0;}

	/* s2 */
	.s2 .effect ul {height: 230px; justify-content: center;}
	.s2 .effect ul li {max-width: 230px;}
	
	/* s3_1 */
	.s3_1 .arti_common .how ul li dl {padding: 55px 20px 0; gap: 20px}
	.s3_1 .arti_common .how ul li dl dt {max-width: 70px;}
	
	.s5_1 .arti02 .contact ul li dl dt {font-size: 20px;}
	.s5_1 .arti02 .contact ul li dl dd {font-size: 20px;}
}

@media (max-width: 1024px) {
	.section-header .inner {flex-wrap: wrap; gap: 40px; flex-direction: column-reverse; padding-bottom: 60px !important;}
	.section-header .inner .txt {width: 100%; text-align: center;} 
	.section-header .inner .txt h5 > br {display: none;}
	.section-header .inner .txt p {text-align: center;}
	.section-header .inner .txt p > br {display: none;}
	.section-header .inner .img {max-width: 100%;}

	.arti_common .how ul {flex-wrap: wrap;}
	.arti_common .how ul li {width: 50%;}
	.arti_common .how ul li:nth-of-type(2) ~ li {margin-top: 20px;}
	
	/* s1_1_1 */
	.s1_1_1	.section-header .inner {padding-bottom: 0 !important;}
	
	/* s1_1_2 */
	.s1_1_2 .history .year {max-width: 250px;}
	
	/* s1_2_1 */
	.s1_2_1 .ideology .keyword {font-size: 20px; line-height: 64px;}
	.s1_2_1 .ideology > p {font-size: 20px;}
	.s1_2_1 .ideology.value ul {flex-wrap: wrap;}
	.s1_2_1 .ideology.value ul li {width: 33.3333%;}
	.s1_2_1 .ideology.value ul li:nth-of-type(3) ~ li {margin-top: 10px;}
	
	/* s1_2_2 */
	.table-wrap table colgroup {display: none;}
	.table-wrap table th {width: 120px;}
	.table-wrap table th:nth-of-type(3) {width: 200px;}
	.table-wrap table th:last-child {width: 400px;}

	/* s1_3 */
	.s1_3 .arti01 .map-info {flex-wrap: wrap;}
	.s1_3 .arti01 .map-info .info {max-width: 100%;}
	.s1_3 .arti01 .map-info .map-btn {margin-left: auto;}
	
	/* s2_1 */
	.s2_1 .arti_common .how ul li {width: 50%;}
	.s2_1 .arti_common .how ul li:nth-of-type(3) ~ li {margin-top: 20px;}
	
	.s2 .effect ul {height: 180px; gap: 30px}
	.s2 .effect ul li {max-width: 180px;}
	.s2 .effect ul li:not(:last-child)::after {right: -26px;}
	.s2 .effect ul li .circle p {font-size: 20px;}
	
	/* s2_2 */
	.s2_2 .arti03 .cnt ul {width: calc(100% + 20px); margin: 0 -10px;}
	.s2_2 .arti03 .cnt ul li {padding: 0 10px;}
	.s2_2 .arti03 .cnt ul li:nth-of-type(4) ~ li {margin-top: 20px;}
	.s2_2 .arti03 .cnt ul li dl dd {line-height: 48px; font-size: 20px;}
	
	/* s2_3 */
	.s2_3 .arti_common .how ul li {width: 50%;}
	
	/* s3_1 */
	.s3_1 .arti_common .how ul li dl {position: relative; padding: 40px 15px 0;}
	.s3_1 .arti_common .how ul li dl dt {position: absolute; top: 35px; left: 15px; max-width: 40px}
	.s3_1 .arti_common .how ul li dl dd h6 {padding-left: 50px;}
	.s3_1 .arti_common .how ul li dl dd p {margin-top: 20px;}
	
	.step ul {flex-wrap: wrap;}
	.step ul li {width: 33.3333%; min-height: 240px;}
	.step ul li:nth-of-type(3)::after {display: none;}
	.step ul li:nth-of-type(3) .box {border: none;}
	.step ul li:nth-of-type(3) ~ li .box {border-top: 1px solid #ddd;}
	
	/* s5_1 */
	.s5_1 .arti02 .contact ul {flex-wrap: wrap;}
	.s5_1 .arti02 .contact ul li {width: 50%;}
	.s5_1 .arti02 .contact ul li:nth-of-type(2) ~ li {margin-top: 20px;}
	.s5_1 .arti02 .contact ul li dl {justify-content: center;}
	
	.s5_1_1 .step ul li {min-height: 240px;}
}

@media (max-width: 768px) {
	.page-header.type1 {background-image: url(../images/sub/mo-s-visual01.jpg);}
	.page-header.type2 {background-image: url(../images/sub/mo-s-visual02.jpg);}
	.page-header.type3 {background-image: url(../images/sub/mo-s-visual03.jpg);}
	.page-header.type4 {background-image: url(../images/sub/mo-s-visual04.jpg);}
	.page-header.type5 {background-image: url(../images/sub/mo-s-visual05.jpg);}

	.page-header .container {padding-top: 150px;}
	.page-header .container h3 {font-size: 40px;}
	.page-header .container p {margin-top: 15px; line-height: 30px; font-size: 18px;}
	
	.lnb > .container {padding: 0;}
	.lnb ul li a {font-size: 16px; line-height: 59px;}
	
	.sub-tab {margin-bottom: 50px;}
	.sub-tab ul li a {font-size: 16px; line-height: 55px; padding: 0 20px;}
	
	section {padding: 80px 0 100px;}
	.real-cont {padding: 80px 0 100px;}
	
	.section-header h4 {font-size: 35px;}
	.section-header p {font-size: 18px; padding-top: 30px;}
	
	.article-header h5 {font-size: 28px; padding-top: 30px;}
	
	.arti_common {padding: 60px 0;}
	.arti_common .how {margin-top: 40px;}
	.arti_common .how ul li {min-height: 300px;}
	.arti_common .how ul li dl {padding-top: 30px;}
	.arti_common .how ul li dl dd h6 {font-size: 22px;}
	.arti_common .how ul li dl dd p {font-size: 16px; margin-top: 15px;}
	.arti_common .how ul li dl dd p > br {display: none;}
	
		
	/* s1 */
	.s1 .section-header .inner .txt h5 {font-size: 30px;}
	
	.s1_1_1 article {margin-top: 60px;}
	.s1_1_1 .arti_common .how ul li {min-height: 280px;}
	
	.s1_1_2 .history {flex-wrap: wrap; gap: 30px;}
	.s1_1_2 .history .year {padding-right: 0; text-align: left; font-size: 40px;}
	.s1_1_2 .history .month {max-width: 100%;}
	.s1_1_2 .history .month dl {padding-left: 20px;}
	.s1_1_2 .history:not(:last-child) .month dl:last-child::after {display: none;}
	.s1_1_2 .history .month dl dd p ~ p {margin-top: 5px;}
	
	.s1_2_1 .ideology {flex-wrap: wrap; gap: 40px; justify-content: center;}
	.s1_2_1 .ideology ~ .ideology {margin-top: 40px;}
	.s1_2_1 .ideology .keyword::before {top: inherit; right: inherit; bottom: -22.5px; left: 50%; transform: none; transform: translateX(-50%);}
	.s1_2_1 .ideology p {max-width: 100%;}
	.s1_2_1 .ideology:nth-of-type(4) .keyword {margin-top: 0;}
	.s1_2_1 .ideology.value ul::before {width: 100%; background-size: contain;}
	.s1_2_1 .ideology.value ul li {width: 50%; min-height: 200px;}
	.s1_2_1 .ideology.value ul li:nth-of-type(2) ~ li {margin-top: 10px;}
	.s1_2_1 .ideology.value ul li dl dd h5 {font-size: 20px;}
	.s1_2_1 .ideology.value ul li dl dd p {font-size: 16px;}
	
	.s1_2_2 .arti01 figure {margin-top: 40px;}
	.s1_2_2 .arti02 {margin-top: 60px;}
	.table-wrap {overflow: auto; margin-top: 40px;}
	.table-wrap table th {font-size: 16px;}
	.table-wrap table td p {font-size: 16px;}
	.table-wrap table th {width: 80px;}
	.table-wrap table th:nth-of-type(3) {width: 150px;}
	.table-wrap table th:last-child {width: 300px;}
	.table-wrap table td:last-child {padding-left: 20px;}
	
	.s1_3 .arti01 {margin-top: 60px;}
	.s1_3 .arti01 .map {height: 300px;}
	.s1_3 .arti01 .map-info {gap: 20px;}
	.s1_3 .arti01 .map-info .info dl dt {max-width: 70px; font-size: 16px;}
	.s1_3 .arti01 .map-info .info dl dd {font-size: 16px;}
	.s1_3 .arti01 .map-info .map-btn {justify-content: right;}
	.s1_3 .arti01 .map-info .map-btn a {font-size: 16px; line-height: 48px; max-width: 120px;}
	.s1_3 article > h5 {font-size: 30px;}
	.s1_3 .way {padding: 30px 0;}
	.s1_3 .arti02 {margin-top: 40px;}
	.s1_3 .arti02 .way ul {width: calc(100% + 30px); margin: 0 -15px; gap: 0;}
	.s1_3 .arti02 .way ul li {width: 50%; padding: 0 15px;}
	.s1_3 .arti02 .way ul li:nth-of-type(2) ~ li {margin-top: 30px;}
	.s1_3 .arti02 .way ul li p {font-size: 24px;}
	.s1_3 .arti02 .way ul li dl dd {font-size: 18px;}
	.s1_3 .arti03 {margin-top: 40px;}
	.s1_3 .arti03 .way:nth-of-type(1) {margin-top: 20px;}
	.s1_3 .arti03 .way ul li {flex-wrap: wrap; gap: 20px;}
	.s1_3 .arti03 .way ul li .tit p {font-size: 24px;}
	
	/* s2 */
	.s2 .section-header .inner .txt h5 {font-size: 30px;}
	.s2 .effect {margin-top: 40px;}
	.s2 .effect ul {flex-wrap: wrap; height: auto;}
	.s2 .effect ul li {height: 210px; max-width: 210px;}
	.s2 .effect ul li:nth-of-type(2)::after {display: none;}
	.s2 article ~ article {padding-top: 60px;}
	.s2_1 .arti_common .how ul li dl dd p > br {display: block;}
	.s2_1 .table-wrap2 {margin-top: 40px;}
	.s2_1 .table-wrap2 table colgroup {display: none;}
	.s2_1 .table-wrap2 table td.tit {width: 120px; font-size: 16px;}
	.s2_1 .table-wrap2 table td {font-size: 16px;}
	.s2_2 .table-wrap table th:nth-of-type(1) {width: 100px;}
	.s2_2 .table-wrap table th:nth-of-type(2) {width: 100px;}
	.s2_2 .table-wrap table th:last-child {width: 250px;}
	.s2_2 .arti03 .cnt {margin-top: 40px;}
	.s2_2 .arti03 .cnt ul li {width: 33.3333%}
	.s2_2 .arti03 .cnt ul li:nth-of-type(3) ~ li {margin-top: 20px;}
	.s2_2 .arti03 .cnt ul li dl dd {font-size: 16px; line-height: 38px;}
	.s2_3 .arti_common .how ul li dl dd p > br {display: block;}
	.s2_4 .arti_common .how ul li {min-height: 340px;}
	.s2_4 .arti_common .how ul li dl {padding-top: 20px;}
	.s2_4 .arti_common .how ul li dl dd p > br {display: block;}
	.s2_4 .arti02 .note p {font-size: 18px;}
	.s2_4 .arti02 .note p > br {display: none;}
	
	/* s3_1 */
	.s3 .section-header .inner .txt h5 {font-size: 30px;}
	.s3_1 .arti_common.arti01 .how ul li {min-height: 230px;}
	.s3_1 .arti_common.arti02 .how ul li {min-height: 150px;}
	.s3_1 .arti_common .how ul li dl {padding-top: 20px;}
	.s3_1 .arti_common .how ul li dl dt {top: 15px;}
	.s3_1 .arti_common .how ul li dl dd h6 {flex-wrap: wrap;}
	.s3_1 .arti_common .how ul li dl dd h6 span {display: block; margin-left: 0; margin-top: 5px; font-size: 14px; width: 100%;}
	.s3_1 .arti_common.arti01 .how ul li:nth-of-type(2) dl dd p {margin-top: 10px;}
	.s3_1 .arti_common .how ul li dl dd p > br {display: block;}
	.s3_1 .arti02 {padding-top: 60px;}
	
	.step {margin-top: 40px;}
	.step ul li {width: 50%;}
	.step ul li:nth-of-type(3) .box {border-right: 1px solid #ddd;}
	.step ul li:nth-of-type(2) .box, .step ul li:nth-of-type(4) .box {border: none;}
	.step ul li:nth-of-type(2) ~ li .box {border-top: 1px solid #ddd;}
	.step ul li:nth-of-type(even)::after {display: none;}
	.step ul li:nth-of-type(3)::after {display: block;}
	
	/* s5 */
	.s5 .section-header .inner .txt h5 {font-size: 30px;}
	
	.s5_1_1 .step-note a {font-size: 18px;}
	.s5_1_1 .step-note a > strong {margin-right: 10px;}
	
	.s5_1 .arti02 {padding-top: 60px;}
	.s5_1 .arti02 .contact {margin-top: 40px;}
	.s5_1 .arti02 .contact ul li {width: 100%;}
	.s5_1 .arti02 .contact ul li ~ li {margin-top: 20px;}
	
	.s5_1 .arti02 .contact ul li dl dt {font-size: 18px;}
	.s5_1 .arti02 .contact ul li dl dd {font-size: 18px;}
	
	.s5_1 .arti02 .apply {max-width: 150px; line-height: 53px; font-size: 18px;}
	
}

@media (max-width: 480px) {
	.page-header {height: 400px;}
	.page-header > .container {padding-top: 130px;}

	.lnb .btn-drop {display: block;}
	.sub1 .lnb {border-color: #f7c048;}
	.sub2 .lnb {border-color: #f68f8f;}
	.sub3 .lnb {border-color: #faa23a;}
	.sub4 .lnb {border-color: #69c0f7;}
	.sub5 .lnb {border-color: #ab97eb;}
	
	.lnb ul {position: absolute; top: 51px; left: 0; width: 100%; display: none;}
	.lnb ul li {width: 100%; display: block; border-bottom: 1px solid #ddd;}
	.lnb ul li a {background-color: #fff; text-align: left; padding: 0 15px; font-size: 16px; line-height: 48px;}
	.lnb ul li a:after {display: none;}
	.lnb.on ul {display: block;}

	.section-header h4 {line-height: 40px;}
	
	.arti_common .how ul li {width: 100%; min-height: 280px;}
	.arti_common .how ul li ~ li {margin-top: 20px;}
	.arti_common .how ul li dl {display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 0;}
	
	/* s1 */
	.s1 .section-header .inner .txt h5 {font-size: 24px;}
	.s1 .section-header .inner .txt p {font-size: 16px;}
	
	.s1_1_2 article {margin-top: 40px;}
	.s1_1_2 .history .year {font-size: 30px;}
	.s1_1_2 .history .month dl dt {font-size: 16px;}
	.s1_1_2 .history .month dl dd p {font-size: 16px;}	
	
	.s1_2_1 .ideology .keyword {font-size: 16px; line-height: 50px; max-width: 180px;}
	.s1_2_1 .ideology p {font-size: 16px;}
	.s1_2_1 .ideology.value ul {padding-top: 50px;}
	.s1_2_1 .ideology.value ul::before {top: 0; height: 60px;}
	.s1_2_1 .ideology.value ul li dl {padding: 20px 10px;}
	
	.s1_3 .arti02 .way ul {width: calc(100% + 10px); margin: 0 -5px;}
	.s1_3 .arti02 .way ul li {padding: 0 5px;}
	.s1_3 .arti02 .way ul li:nth-of-type(2) ~ li {margin-top: 10px;}
	.s1_3 .arti02 .way ul li p {font-size: 20px;}
	.s1_3 .arti02 .way ul li dl dd {font-size: 16px; min-height: auto; line-height: 35px; padding-top: 0;}
	.s1_3 .arti03 .way ul li .tit {max-width: 100%; min-height: 50px;}
	.s1_3 .arti03 .way ul li .tit img {max-width: 32px; width: 100%;}
	.s1_3 .arti03 .way ul li .tit p {font-size: 20px;}
	.s1_3 .arti03 .way ul li .txt dl dt {max-width: 110px; font-size: 16px;}
	.s1_3 .arti03 .way ul li .txt dl dd {font-size: 16px;}

	/* s2 */
	.s2 .section-header .inner .txt h5 {font-size: 24px;}
	
	.s2_1 .arti_common .how ul li {width: 100%;}
	.s2_1 .arti_common .how ul li ~ li {margin-top: 20px;}
	.s2_1 .arti_common .how ul li dl {padding-top: 0;}
	
	.s2 .effect ul li {height: 150px; max-width: 150px;}
	.s2 .effect ul li .circle p {font-size: 18px;}
	.s2_1 .table-wrap2 table td.tit {width: 90px;}
	.s2_1 .table-wrap2 table td {padding: 15px;}
	
	.s2_2 .arti03 .cnt ul li {width: 50%}
	.s2_2 .arti03 .cnt ul li:nth-of-type(2) ~ li {margin-top: 20px;}
	
	.s2_3 .arti_common .how ul li {width: 100%; min-height: 300px;}
	.s2_3 .arti_common .how ul li ~ li {margin-top: 20px;}
	.s2_3 .arti_common .how ul li dl {padding-top: 0;}
	
	.s2_4 .arti_common .how ul li {min-height: 300px;}
	.s2_4 .arti_common .how ul li dl {padding-top: 0;}
	.s2_4 .arti02 .note p {font-size: 16px;}
	
	/* s3_1 */
	.s3 .section-header .inner .txt h5 {font-size: 24px;}
	.s3_1 .arti_common .how ul {flex-wrap: wrap;}
	.s3_1 .arti_common .how ul li {width: 100%}
	.s3_1 .arti_common.arti01 .how ul li {min-height: 180px;}
	.s3_1 .arti_common .how ul li dl {padding-top: 0;}
	.s3_1 .arti_common .how ul li dl dt {top: 20px;}
	
	.step ul li {width: 100%;}
	.step ul li:not(:last-child)::after {display: none;}
	.step ul li ~ li {border-top: 1px solid #ddd;}
	.step ul li .box {padding-top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0 !important;}
	.step ul li .box span {margin-bottom: 15px;}
	
	/* s5 */
	.s5 .section-header .inner .txt h5 {font-size: 24px;}
	.s5_1_1 .arti_common .how ul li {min-height: 200px;}
	.s5_1_1 .arti_common .how ul li dl {padding-top: 0;}
	
	.s5_1_1 .step ul li {min-height: 220px;}
	
	.s5_1_1 .step-note {padding: 15px 10px;}
}