@charset "UTF-8";
body {  }
#usm-wrap-id { width: 100%; height: auto; position: relative; }
#usm-wrap-id h2.hidden { position: absolute; top: -999px; left: -9999px; }

	#usm-top-id { width: 100%; height: 12rem; }

		#usm-logo-wrap-id { width: 30rem; height: 7rem; margin: 0 auto; }
		#usm-logo-wrap-id a { width: 30rem; height: 7rem; }
		#usm-logo-wrap-id img { width: 100%; height: 100%; }

		.usm-util-menu { width: 100%; height: 5rem; box-sizing: border-box; border-top: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb; }

		#usm-util-wrap-id { float: left; margin: 1.2rem 0 0 0.5rem; }
		#usm-util-wrap-id ul:first-child { display: none; }
		#usm-util-wrap-id ul { }
		#usm-util-wrap-id li { float: left; margin: 0 0.5rem 0 0; }
		#usm-util-wrap-id li:before { content: '\2022'; font-size: 2rem; color: #505050; margin: 0 0.5rem 0 0; display: inline-block; vertical-align: middle; }
		#usm-util-wrap-id li.usm-top-login { margin: 0.2rem 0.5rem 0 0; }
		#usm-util-wrap-id li:first-child:before { content: ''; }
		#usm-util-wrap-id li:last-child { margin: 0; }
		#usm-util-wrap-id li button { font-size: 1.6rem; font-family: 'Pretendard'; padding: 0.3rem 0 0 0; letter-spacing: -0.1rem; }
		#usm-util-wrap-id li button:hover { color: #01c289; }
		#usm-util-wrap-id li a { font-size: 1.6rem; padding: 0.2rem 0 0 0; letter-spacing: -0.1rem; }
		#usm-util-wrap-id li a:hover { color: #01c289; }
		#usm-util-wrap-id li.usm-admin { display: none; }

		.spinner-master { float: right; background-color: #01c289; border-radius: 5px; }
		.spinner-master .bar { background-color: #fff; }

		.usm-main-bg-wrap { width: 100%; background:url('../images/main_img_bg.jpg') top center no-repeat; }
		.usm-main-bg { width: 100%; height: 100%; line-height: 0; overflow: hidden; padding: 2rem 0 0 0; position: relative; }
		.usm-main-bg img { width:100%; height: 100%; display: block; }
		.usm-main-bg .swiper-slide { transition-property: opacity; transform: none; }
		.usm-main-bg .swiper-controls { position: absolute; top: 0; right: 0; z-index: 1; width: auto; margin: 1rem auto 0 auto; display: flow-root; background-color: #fff; box-sizing: border-box; padding: 1.5rem 2rem; border-radius: 2rem; text-align: center; display: none; }
		.usm-main-bg .swiper-controls button { float: left; display: inline-block; vertical-align: middle; width: 1.7rem; height: 1.7rem; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; text-indent: -9999px; margin: 0 0.7rem; }
       	.usm-main-bg .swiper-controls button.playing { background:url('../images/button_break.png') no-repeat center; font-size: inherit; }
       	.usm-main-bg .swiper-controls button.paused { background:url('../images/button_play.png') no-repeat center; font-size: inherit; }
       	.usm-main-bg .swiper-controls button.prev { background:url('../images/button_back.png') no-repeat center; font-size: inherit; }
       	.usm-main-bg .swiper-controls button.next { background:url('../images/button_forward.png')no-repeat center; font-size: inherit; }
		.usm-main-bg .swiper-controls #swiper-status { float: left; display: inline-block; vertical-align: middle; font-size: 1.8rem; margin: 0.8rem 0 0 1.5rem; }

		.usm-img-banner { width: calc(100% - 2rem); margin: 1.5rem 1rem 0 1rem; box-sizing: border-box; position: relative; z-index: 0; display: flow-root; }
		.usm-img-banner div { float: left; width: calc(50% - 0.5rem); min-height: 13.1rem; margin: 0 0 0.5rem 0; }
		.usm-img-banner div:nth-child(even) { margin: 0 0 0.5rem 1rem; }
		.usm-img-banner div:nth-child(5) { margin: 0; }
		.usm-img-banner div:last-child { margin: 0; }
		.usm-img-banner div a { display: block; text-align: center; font-size: 1.9rem; }
		.usm-img-banner div a:hover { font-weight: bold; }
		.usm-img-banner div a img { display: block; margin: 0 auto 0.5rem auto; text-align: center; }
		.usm-img-banner div a:hover img { transform: scaleX(-1); transition: 0.5s; } 

		.content01 { clear: both; width: 100%; display: flow-root;  }

		.usm-popup { clear: both; width: calc(100% - 2rem); margin: 1.5rem 1rem 0 1rem; box-sizing: border-box; position: relative; overflow: hidden; }
		.usm-popup .usm-popup-top { float: left; width: 100%; margin: 0; }
		.usm-popup .usm-popup-top h3 { float: left; font-size: 2.3rem; }
		.usm-popup .usm-popup-top .popup-btns { float: right; }
		.usm-popup .usm-popup-top .popup-btns .pbtns { margin: 0.3rem 0 0 0; }
		.usm-popup .popup-pagination { display: inline-block; position: static; font-size: 2rem; margin: 0 0 0 1rem; letter-spacing: 0.3rem; }
		.usm-popup .popup-btns { float: right; display: flow-root; margin: 0; }
		.usm-popup .popup-btns div { float: left; width: auto; height: 2.1rem; }
		.usm-popup .popup-btns div button { background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; text-indent: -9999px; margin: 0 0.7rem; width: 1.7rem; height: 1.7rem; }
		.usm-popup .usm-popup-prev { background: url('../images/button_back.png') no-repeat center; }
       	.usm-popup .play-pause-btn { margin: 0 2rem; }
       	.usm-popup .play-pause-btn.playing { background: url('../images/button_break.png') no-repeat center; }
       	.usm-popup .play-pause-btn.paused { background: url('../images/button_play.png') no-repeat center; }
       	.usm-popup .usm-popup-next { background: url('../images/button_forward.png') no-repeat center; }
       	.usm-popup .popup-container { width: 100%; margin: 0 auto; overflow: hidden; }
		.usm-popup .con { width: 100%; height: 215px; text-align: center; z-index: 0; margin: 1rem 0 0 0; }
		.usm-popup .swiper-slide { text-align: center; display: flex; justify-content: center; align-items: center; }
		.usm-popup .swiper-slide a { display: block; width: 100%; height: 21.5rem; }
		.usm-popup .swiper-slide img { display: block; width: 100%; height: 21.5rem; border-radius: 30px; }

		.btm_link_wrap2 { background-color: #329df0; width: 100%; box-sizing: border-box; padding: 2rem 1rem; margin: 1.5rem 0 0 0; }
		.btm_link_wrap2 h3 { font-size: 2.3rem; margin: 0 0 1rem 0; text-align: center; color: #fff; }
		.btm_link2 { width: 100%; box-sizing: border-box; display: flow-root; }
		.btm_link2 li { float: left; width: 25%; }
		.btm_link2 li a { display: block; border-radius: 1rem; text-align: center; padding: 0.8rem 0; font-size: 2rem; color: #fffab0; font-weight: bold; }
		.btm_link2 li:hover a { color: #329df0; background-color: #fffab0; }

		.img { width: calc(100% - 2rem); margin: 1.5rem 1rem; }

/* 모바일, 테블릿 메뉴는 skin/style.css 에서 제어함 */

@media (min-width:769px) and (max-width:1023px){

	.usm-img-banner div { width: 25%; margin: 0; }
	.usm-img-banner div:nth-child(even) { margin: 0; }
	.usm-img-banner div:nth-child(5) { margin: 0; }
	.usm-img-banner div:last-child { margin: 0; }
	
	.usm-popup { clear: both; }
	.usm-popup .popup-container { width: 50%; }
	.usm-popup .con { height: 30rem; }
	.usm-popup .swiper-slide a { height: 30rem; }
	.usm-popup .swiper-slide img { height: 30rem; }

	.btm_link_wrap2 { background: url('../images/center_bg.jpg') top center no-repeat; width: 65rem; height: 29.7rem; margin: 0 auto 1.5rem auto; box-sizing: border-box; padding: 12rem 0 0 0; }
	.btm_link_wrap2 h3 { display: none; }

	.img { width: 39rem; margin: 1.5rem auto; }

}

/* PC용 CSS */
@media all and (min-width:1024px){

	body {   }

	#usm-wrap-id { }

		#usm-top-id { clear: both; width: 100%; min-height: 12rem; height: auto; position: relative; }

			.top-wrap { width: 140rem; height: 7rem; margin: 0 auto; position: relative; }

			#usm-logo-wrap-id { text-align: center; margin: 0; }

			.usm-util-menu { border: none; position: absolute; right: 0; top: 2rem; width: 36rem; height: 1.7rem; }
			#usm-util-wrap-id { display: block; margin: 0; float: right; }
			#usm-util-wrap-id li.usm-admin { display: inline-block; }
			#usm-util-wrap-id li a:hover { color: #00c18a; }
			.spinner-master { display: none; }

			.menu-wrap { clear: both; width: 100%; height: 6rem; position: relative; }
			#usm-menu-wrap-id { display: block; width: 140rem; height: 6rem; z-index:10; margin: 0 auto; }
			#usm-menu-wrap-id > ul > li > a { font-weight: 600; }
			#usm-menu-wrap-id > ul > li > a:hover { font-weight: 900; }
			#usm-menu-wrap-id > ul > li.active .depth2 > ul > li > a:hover { font-weight: 600; }

		#usm-middle-id { width: 100%; margin: 0 auto; position: relative; }

			.usm-main-bg-wrap { background: url('../images/main_img_bg.jpg') top center no-repeat; }
			.usm-main-bg { overflow: hidden; width: 140rem; height: 44rem; margin: 0 auto; }

			.usm-img-banner { float: none; clear: both; width: 140rem; margin: 2rem auto 0 auto; position: relative; z-index: 1; display: flex; }

			.content01 { clear: both; width: 140rem; margin: 2rem auto; display: flow-root; }

				.usm-popup { clear: none; float: left; width: 30rem; margin: 0 3rem 0 0; }
				.usm-popup .con { width: 30rem; height: 23rem; }
				.usm-popup .swiper-slide a { width: 30rem; height: 23rem; }
				.usm-popup .swiper-slide img { width: 30rem; height: 23rem; }

				.btm_link_wrap2 { clear: none; float: left; width: 65rem; height: 29.7rem; background: url('../images/center_bg.jpg') top center no-repeat; margin: -3rem 3rem 0 0; padding: 12rem 3rem 0 3rem; }
				.btm_link_wrap2 h3 { display: none; }

				.img { float: left; width: 39rem; margin: 0; }



}