@charset "UTF-8";
@import url("contents02_pc.css");

@media only all and (max-width: 1023px) {

	.sub-tab.depth01.type02 {
		text-align: center;
	}

	.sub-tab.depth01.type02 li {
		display: inline-block;
		vertical-align: middle;
		width: auto;
		margin: 0 24px 99px 24px;
	}

	.images-box > img {
		max-width: initial;
		width: 100%;
	}
	.images-box  img.pc {
		display: none;
	}

	.images-box  img.mobile {
		display: block;
	}

	.image-fixed {
		height: auto;
	}

	.image-fixed img.pc {
		display: none;
	}

	.image-fixed img.mobile {
		width: 100%;
	}


	.btn-mobile-image-view {
		display: flex;
		width: 100%;
		height: 48px;
		background-color: #0056a7;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 18px;
		line-height: 21px;
	}
	.btn-mobile-image-view > strong {
		margin-right: 18px;
	}

	.oversea02 .images-box:before,
	.oversea02 .images-box:after{
		height: 27px;
	}

	.oversea02 .images-box:before {
		margin-top: -27px;
	}

	.title-english-type01 {
		font-size: 32px;
		line-height: 32px;
	}
	.title-english-type01 + .images-box {
		margin-top: 45px;
	}

	.oversea02 .affil-list {
		margin: 70px auto;
		padding: 0 30px;
	}

	.oversea02 .affil-list .affil-detail {
		padding: 30px 0;
	}

	.oversea02  .affil-list li:first-child .affil {
		padding-top: 32px;
	}

	.table-type01.affil-ab tr:last-child {
		margin-bottom: 0;
	}

	.map-information-wrapper {
		position: relative;
		max-width: calc(100% - 60px);
		min-height: initial;
		padding: 0;
		margin: 84px auto 0 auto;
		border-top: 0;
	}


	.map-information-list-wrapper {
		position: relative;
		display: block;
		width: 100%;
		background-color: #fff;

	}

	.main-group-list {
		position: relative;
		height: 60px;
		margin-bottom: 25px;
	}

	.main-group-list > button {
		position: relative;
		display: block;
		width: 100%;
		height: 60px;
		text-align: left;
		font-size: 21px;
		line-height: 26px;
		padding: 0 60px 0 27px;
	}

	.main-group-list > ul {
		width: 100%;
		padding: 0;
	}

	.main-group-list > ul > li > button {
		display: block;
		padding: 0 35px;
		color: #fff;
		font-size: 18px;
		line-height: 28px;
		font-weight: 600;
	}

	.map-information-list {
		position: relative;
		width: 100%;
		height: 60px;
		background-color: initial;
		overflow: initial;
	}

	.map-information-list > #mobile-title {
		position: relative;
		display: block;
		width: 100%;
		height: 60px;
		text-align: left;
		background-color: #0056a7;
		color: #fff;
		font-size: 21px;
		line-height: 26px;
		font-weight: 600;
		padding: 0 60px 0 27px;
		margin-bottom: 25px;
	}

	.map-information-list > #mobile-title:before {
		position: absolute;
		top: 50%;
		right: 27px;
		content: "";
		display: block;
		width: 20px;
		height: 12px;
		margin-top: -6px;
		background-image: url(/kor/assets/img/sub/icon_arrow_down01.png);
		background-repeat: no-repeat;
		background-size: 20px 12px;
		background-position: 0 0;
	    transition: all 0.2s ease;
	}

	.map-information-list > #mobile-title.active:before {
		transform: rotate(180deg);
	}


	.map-information-list > ul {
		position: absolute;
		top: 60px;
		left: 0;
		display: none;
		width: 100%;
		max-height: 400px;
		background-color: #efefef;
		z-index: 100;
		border-top: 1px solid #fff;
		overflow-x: hidden;
		overflow-y: auto;
	}



	.map-information-list > ul > li {
		height: 55px;
	}

	.map-information-list > ul > li > button {
		padding: 0 25px;
		height: 55px;
		font-size: 14px;
		line-height: 18px;
	}


	.map-information-area {
		position: relative;
		display: block;
	}

	.map-wrapper {
		height: 435px;
	}

	.map-information-box.active {
		padding: 22px 0 33px 0;
	}

	.map-information-box > h3 {
		margin-bottom: 26px;
		font-size: 27px;
		line-height: 40px;
	}

	.map-information-box dl {
		margin-top: 5px;
		padding-left: 128px;
		font-size: 22px;
		line-height: 35px;
	}

	.map-information-box dl > dt {
		margin-left: -128px;
	}
}


@media only all and (max-width: 474px) {
	.sub-tab.depth01.type02 li {
		margin: 0 12px 66px 12px;
	}

	.title-english-type01 {
		font-size: 21px;
		line-height: 21px;
	}

	.btn-mobile-image-view {
		height: 32px;
		font-size: 12px;
	}
	.btn-mobile-image-view > strong {
		margin-right: 12px;
	}

	.oversea02 .images-box:before,
	.oversea02 .images-box:after{
		height: 18px;
	}

	.oversea02 .images-box:before {
		margin-top: -18px;
	}


	.map-information-wrapper {
		max-width: calc(100% - 40px);
		margin: 55px auto 0 auto;
	}








	.main-group-list {
		position: relative;
		height: 40px;
		margin-bottom: 15px;
	}

	.main-group-list > button {
		height: 40px;
		font-size: 14px;
		line-height: 20px;
		padding: 0 60px 0 18px;
	}


	.main-group-list > button:before {
		right: 15px;
		width: 18px;
		height: 18px;
		margin-top: -9px;
		background-size: 9px 5.25px;
	}

	.main-group-list > ul {
		top: 40px;
	}



	.main-group-list > ul > li > button {
		padding: 0 30px;
		font-size: 13px;
		line-height: 21px;
	}





	.map-information-list {
		height: 40px;
	}

	.map-information-list > #mobile-title {
		height: 40px;
		font-size: 14px;
		line-height: 20px;
		padding: 0 36px 0 18px;
		margin-bottom: 16px
	}

	.map-information-list > #mobile-title:before {
		right: 18px;
		content: "";
		display: block;
		width: 10px;
		height: 6px;
		margin-top: -3px;
		background-size: 10px 6px;
	}

	.map-information-list > ul {
		top: 40px;
		max-height: 300px;
	}

	.map-information-list > ul > li {
		height: 35px;
	}

	.map-information-list > ul > li > button {
		padding: 0 20px;
		height: 35px;
		font-size: 12px;
		line-height: 16px;
	}



	.map-wrapper {
		height: 260px;
	}


	.map-information-box > h3 {
		margin-bottom: 18px;
		font-size: 18px;
		line-height: 27px;
	}

	.map-information-box dl {
		margin-top: 4px;
		padding-left: 85px;
		font-size: 15px;
		line-height: 24px;
	}


	.map-information-box dl > dt {
		margin-left: -85px;
	}
}