@charset "UTF-8";

@import url("common_pc.css");




/*22.5.12추가*/
@media only all and (max-width: 1100px){
	.header-wrapper h1 > .logo > img{width:150px;}
	.header-area h1 > .sub-logo{font-size:16px;}
	.total-menu-search-wrapper{margin-right:5px ;}
	.right-side-menu-wrapper .side-menu-area > button{margin-right:5px;}
}

/*22.5.12추가*/






@media only all and (max-width: 1023px) {
	html {
		font-size: 1.625rem; /* 기본베이스 폰트사이즈 26px */
		line-height: 1.625rem; /* 기본베이스 line-height 사이즈 26px */
	}

	body {
		min-width: 320px;
		list-style: none;
		outline: 0;
		font-size: 1rem;
		line-height: 1rem;
		-webkit-text-size-adjust: none;
	}

	body.fixed {
		height: 100%;
		overflow: hidden;
	}

	.wrapper {
		position: relative;
		margin: 0;
		padding-top: 4.231rem;
		clear: both;
		overflow: hidden;
	}

	.wrapper:after {
		content: "";
		clear: both;
		display: block;
	}

	/* header */
	.header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 4.231rem;
		z-index: 10;
	}

	.header-wrapper {
		width: 100%;
		height: 4.231rem;
	}

	.header-area {
		max-width: 100%;
		height: 100%;
		padding: 0 0.7692rem;
		margin: 0;
	}


	.header-area > h1 {
		float: left;
		position: static;
		padding-top:1.346rem;
		margin-left: 0.3846rem;
	}
	.header-area h1 > .logo {
		margin-right: 0.5769rem;
		margin-top: 0.4rem;
	}

	.header-area h1 > .logo > img {
		width: 10.462rem;
	}
	.header-area h1 > .sub-logo {
		margin-top: 0.3077rem;
		font-size: 1rem;
		line-height: 1.154rem;
	}

	.top-menu-wrapper {
		display: none;
	}


	.right-side-menu-wrapper {
		position: static;
		float: right;
	}

	.right-side-menu-wrapper .side-menu-area,
	.right-side-menu-wrapper .side-menu-area > .side-menu-area02 {
		display: none;
	}

	.total-menu-search-wrapper {
		display: block;
		margin-right: 0;
	}

	.total-search-wrapper {
		position: static;
		float: left;
		display: block;
		width: auto;
		height: auto;
		margin-top: 1.577rem;
	}

	.total-search-wrapper:after {
		content: "";
		clear: both;
		display: block;
	}

	.total-search-wrapper > .btn-total-search {
		display: block;
		width: 1.154rem;
		height: 1.154rem;
		background: transparent url(../img/icon/icon_search_mobile@2x.png) no-repeat 0 0;
		background-size: 1.154rem 1.154rem;
		text-indent: -5000rem;
		cursor: pointer;
	}

	.total-search-wrapper > .btn-total-search:hover {
		background-color: #fff;
	}

	.total-search-wrapper > .total-search-area {
		position: absolute;
		bottom: auto;
		bottom: initial;
		top: 4.231rem;
		right: auto;
		right: initial;
		left: 0;
		display: none;
		width: 100%;
		padding-right: 5rem;
		margin-bottom: 0;
	}


	.total-search-wrapper > .total-search-area:after {
		content: "";
		clear: both;
		display: block;
	}

	.total-search-area input[type="search"] {
		float: block;
		width: 100%;
		height: 2.692rem;
		margin-right: 0;
		text-indent: 1rem;
		color: #828282;
		font-size: 0.9231rem;
	}

	.total-search-area input[type="search"]:focus {
		color: #000;
	}

	.total-search-area input[type="submit"] {
		position: absolute;
		top: 50%;
		right: 3.077rem;
		float: none;
		width: 1.154rem;
		height: 1.154rem;
		margin-top: -0.5769rem;
		background: transparent url(../img/icon/icon_search_mobile@2x.png) no-repeat 0 0;
		background-size: 1.154rem 1.154rem;
		text-indent: -5000rem;
		border: 0;
		border-radius: 0;
		-webkit-appearance: none;
	}

	.total-search-area .btn-close {
		position: absolute;
		top: 50%;
		right: 1.154rem;
		display: block;
		margin-top: 0;
		margin-right: 0;
		display: block;
		width: 1.154rem;
		height: 1.154rem;
		margin-top: -0.5769rem;
		background-size: 0.3846rem 0.3462rem;
		text-indent: -5000rem;
	}

	.total-menu-search-wrapper > .btn-totalmenu-wrapper {
		float: left;
		display: block;
		height: 1.154rem;
		padding-left: 1.538rem;
		margin-top: 1.577rem;
		margin-left: 1.462rem;
		border-left: 0.07692rem solid #e5e5e5
	}

	.total-menu-search-wrapper > .btn-totalmenu-wrapper > a {
		display: block;
		width: 1.538rem;
		height: 1.154rem;
		background: url(../img/btn/btn_mobile_totalmenu.gif) no-repeat center center;
		background-size: 1.538rem 1.038rem;
		text-indent: -5000rem;
	}


	.mask-totalmenu {
		display: none;
		top: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.3;
		z-index: 100;
	}

	.totalmenu-wrapper {
		display: block;
		position: fixed;
		top: 0;
		left: auto;
		left: initial;
		right: 0;
		width: 21.54rem;
 		margin-right: -21.54rem; 
		height: 100%;
		border-top: 0;
		background: #e9e9e9;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		-webkit-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		z-index: 10000;
	}

	.totalmenu-wrapper.active {
		margin-right: 0;
	}

	.wrapper.fixed .totalmenu-wrapper {
		top: 0;
	}

	.totalmenu-wrapper > .bg {
		display: none;
	}

	.mobile-gnb-wrapper {
		display: block;
		background: #2194dc;
		height: 9.846rem;
		padding: 1.538rem 1.538rem 0 1.538rem;
		color: #fff;
	}
	.mobile-gnb-wrapper .mobile-gnb-area {
		display: block;
	}

	.mobile-gnb-wrapper .mobile-gnb-area:after {
		content: "";
		clear: both;
		display: block;
	}

	.mobile-gnb-wrapper .mobile-gnb-area > h2 {
		font-size: 1.231rem;
		line-height: 1.385rem;
		margin-bottom: 0.9231rem;
	}

	.mobile-gnb-wrapper .mobile-gnb-area > ul {
		display: block;
	}

	.mobile-gnb-wrapper .mobile-gnb-area > ul:after {
		content: "";
		clear: both;
		display: block;
	}

	.mobile-gnb-wrapper .mobile-gnb-area > ul > li {
		float: left;
		width: 32%;
		margin-left: 2%;
	}

	.mobile-gnb-wrapper .mobile-gnb-area > ul > li:first-child  {
		margin-left: 0;
	}

	.mobile-gnb-wrapper .mobile-gnb-area > ul > li > a {
		display: block;
		text-align:center;
	}

	.mobile-gnb-wrapper .mobile-gnb-area > ul > li > a > .image {
		position: relative;
		display: block;
		vertical-align: middle;
		text-align: center;
		width: 2.692rem;
		height: 2.692rem;
		border-radius: 50%;
		margin: 0 auto 0.7692rem auto;
		background-color: #0ac394;
	}

	.mobile-gnb-wrapper .mobile-gnb-area > ul > li:first-child > a > .image {
		background-color: #45bdfd
	}

	.mobile-gnb-wrapper .mobile-gnb-area > ul > li > a > .image > img {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		width: 2.154rem;
		height: 2.154rem;
		margin-top: -1.077rem;
		margin-left: -1.077rem;
	}
	
	.mobile-gnb-wrapper .mobile-gnb-area > ul > li > a > strong {
		display: block;
		font-size: 0.8462rem;
		line-height: 1rem;
	}
	

	.totalmenu-area {
		position: relative;
		max-width: 100%;
		height: calc(100% - 9.846rem);
		padding: 0;
		margin: 0 auto;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.totalmenu-area > ul {
		padding: 0;
		background: #fff;
	}

	.totalmenu-area > ul > li {
		float: none;
		width: 100%;
		background: #fff;
		border-top: 1px solid #e7e7e7;
	}

	.totalmenu-area > ul > li > a {
		position: relative;
		display: block;
		margin-bottom: 0;
		font-size: 1.385rem;
		line-height: 1.615rem;
		padding: 1.308rem 1.308rem 1.077rem 2.923rem;
		font-weight: 500
	}

	.totalmenu-area > ul > li > a .on {
		position: absolute;
		top: 50%;
		left: 1.738rem;
		display: block;
		width: 1.231rem;
		height: 0.6923rem;
		margin-top: -0.3077rem;
		background: url(../img/icon/icon_arrow_right02@2x.png) no-repeat 0 0;
		background-size: 0.3462rem 0.6154rem;
		text-indent: -5000rem;
	}

	.totalmenu-area > ul > li.active > a .on,
	.totalmenu-area > ul > li.on > a .on {
		background: url(../img/icon/icon_arrow_right02_over@2x.png) no-repeat 0 0;
		background-size: 0.3462rem 0.6154rem;
	}

	.totalmenu-area > ul > li > a .off {
		display: block;
		color: #000000;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.totalmenu-area > ul > li > a:hover .off,
	.totalmenu-area > ul > li.active > a .off,
	.totalmenu-area > ul > li.on > a .off {
		display: block;
		color: #001f84
	}

	.totalmenu-area > ul > li.active > a + .top-submenu {
		display: block;
	}

	.totalmenu-area > ul > li > .top-submenu {
		display: none;
		padding: 0;
	}

	.totalmenu-area > ul > li > .top-submenu h2 {
		display: none;
	}

	.totalmenu-area > ul > li > .top-submenu > ul {
		display: block;
		background: #f0f4f9;
		border-top: 2px solid #1355a4;
		padding: 1.538rem 0rem 1.538rem 1.838rem;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li {
		margin-bottom: 1.154rem;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li:last-child {
		margin-bottom: 0;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > a {
		position: relative;
		display: block; 
	}
	

	.totalmenu-area > ul > li > .top-submenu > ul > li > a .title {
		position: relative;
		display: inline-block;
		color: #424242;
		padding-left: 1rem;
		font-size: 1.267rem;
		line-height: 1.077rem;
		background: url(../img/bul/bul_type01@2x.png) no-repeat 0 50%;
		background-size: 0.2308rem 0.2308rem
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > a:hover .title,
	.totalmenu-area > ul > li > .top-submenu > ul > li > a.active .title {
		color: #3f7dc8;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > a > .arrow {
		display: none;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > a > .bg {
		display: none;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > a .new-window01 {
		display: inline-block;
		vertical-align: baseline;
		margin-left: 0.2308rem;
		width: 0.6923rem;
		height: 0.7692rem;
		background: transparent url(../img/icon/icon_new_window02.gif);
		background: -webkit-linear-gradient(transparent,transparent),url(../img/icon/icon_new_window02@2x.gif);
		background: linear-gradient(transparent,transparent),url(../img/icon/icon_new_window02@2x.gif);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 0.6923rem 0.7692rem;
		text-indent: -5000rem;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li:last-child {
		margin-bottom: 0;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > ul {
		display: block;
		padding: 1rem 0 1rem 1rem;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > ul > li {
		display: block;
		margin-bottom: 0.5769rem;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > ul > li:last-child {
		margin-bottom: 0;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > ul > li > a {
		position: relative;
		display: block;
		color: #424242;
		font-size: 1.1231rem;
		line-height: 1.1231rem;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > ul > li > a:before {
		content: "- ";
		font-weight: 700
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > ul > li > a.active {
		color: #3f7dc8;
		font-weight: 500;
	}

	

	.totalmenu-wrapper .btn-mobile-close {
		position: absolute;
		top: 1.538rem;
		right: 1.462rem;
		display: block;
		width: 1.308rem;
		height: 1.308rem;
	}

	.totalmenu-wrapper .btn-mobile-close > img {
		display: inline-block;
		vertical-align: middle;
		width: 1.308rem;
	}

	.container {
		padding: 1.538rem 0.7692rem;
		background-size: cover;
	}

	.container.bg01 {
		background-image: url(../img/sub01/bg_sub_visual_mobile.jpg);
	}

	.container.bg02 {
		background-image: url(../img/sub02/bg_sub_visual_mobile.jpg);
	}

	.container.bg03 {
		background-image: url(../img/sub03/bg_sub_visual_mobile.jpg);
	}

	.container.bg04 {
		background-image: url(../img/sub04/bg_sub_visual_mobile.jpg);
	}

	.container.bg05 {
		background-image: url(../img/sub05/bg_sub_visual_mobile.jpg);
	}

	.container.bg06 {
		background-image: url(../img/sub06/bg_sub_visual_mobile.jpg);
	}

	.container.bg07 {
		background-image: url(../img/sub07/bg_sub_visual_mobile.jpg);
	}

	.sub-visual {
		max-width: 100%;
		padding: 0 0.7692rem 1.538rem 0.7692rem;
		margin: 0;
	}

	.sub-visual > .word-sub-slogan > img {
		display: inline-block;
		vertical-align: bottom;
		width: 100%;
		max-width: 22.77rem;
		height: auto;
	}

	.container-wrapper {
		max-width: 100%;
		padding: 0 0;
		margin: 0;
	}

	.lnb-wrapper {
		display: none;
	}


	.contents {
		min-height: 23.08rem;
		padding: 1.538rem 1.154rem;
	}

	.contents-navigation {
		float: none;
		margin-bottom: 1.769rem;
	}

	.contents-navigation:after {
		content: "";
		clear: both;
		display: block;
	}


	.contents-navigation .icon-home {
		float: left;
		width: 1.154rem;
		height: 1.154rem;
		background-size: 0.6923rem 0.6923rem;
	}


	.contents-navigation .icon-gt {
		width: 0.3846rem;
		height: 1.154rem;;
		line-height: 1.154rem;;
		margin: 0 0.7692rem;
		background-size: 0.3846rem 0.6923rem;
	}

	.contents-navigation .location,
	.contents-navigation strong {
		font-size:  0.8462rem;
		line-height: 1.154rem;
	}

	.contents-title {
		margin-bottom: 1.154rem;
		font-size: 1.615rem;
		line-height: 1.923rem;
	}


	/* footer */
	.footer {
		padding: 1.538rem;
	}

	.footer-wrapper {
		max-width: 100%;
		padding: 0;
		margin: 0;
	}

	.footer-site-wrapper {
		display: block;
		float: none;
		margin-right: 0;
		margin-bottom: 1.423rem;
		display: block;
	}

	.footer-site-wrapper > button {
		width: 100%;
		height: auto;
		text-align: left;
		padding: 0.7692rem;
		font-size: 0.8462rem;
		line-height: 1rem ;
	}

	.footer-site-wrapper > button .arrow {
		right: 0.7692rem;
	}

	.footer-site-area {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 1.538rem 0;
		overflow-x: hidden;
		overflow-y: auto;
		z-index: 100;
	}

	.footer-site-area .footer-site-box,
	.footer-site-area .footer-site-box:nth-child(3) {
		float: none;
		width: 100%;
		min-height: auto;
		min-height: initial;
		padding: 0 1.154rem;
		border-right: 0;
		margin-top: 1.923rem;
	}

	.footer-site-area .footer-site-box:last-child {
		border-right: 0;
	}

	.footer-site-area .footer-site-box dl {
		margin-top: 1.923rem;
	}
	
	.footer-site-area .footer-site-box:nth-child(3) dl {
		float: none;
		width: 100%;
	}

	.footer-site-area .footer-site-box dl > dt {
		font-size: 1.154rem;
		line-height: 1.385rem;
		margin-bottom: 0.7692rem;
	}
	
	.footer-site-area .footer-site-box:nth-child(3) dl:nth-child(even) dt {
		display: none;
		opacity: 0;
	}

	.footer-site-area .footer-site-box dl > dd > a {
		font-size: 0.9231rem;
		line-height: 1.385rem;
		padding-left: 0.6154rem;
		letter-spacing: 0;
		background: url(../img/bul/bul_type02@2x.gif) no-repeat left 0.4615rem;
		background-size: 0.1538rem 0.1538rem;
	}

	.footer-site-area .footer-site-box dl > dd > a:hover {
		color: #f9b514;
	}

	.footer-site-area .footer-site-box dl:first-child {
		margin-top: 0;
	}

	.footer-site-area .btn-close {
		position: fixed;
		top: 1.538rem;
		right: 1.538rem;
		display: block;
		width: 1.308rem;
		height: 1.308rem;
		background-size: 1.308rem 1.308rem;
	}

	.footer-information-wrapper {
		font-size: 0.8462rem;
		line-height: 1.231rem;
	}

	.footer-information-wrapper .footer-information-area {
		display: block;
		margin: 0;
		padding: 0;
	}

	.footer-information-wrapper .footer-information-area > .word-privacy {
		float: left;
		margin-left: 0;
		padding-left: 0;
		background: transparent;
	}
	
	.footer-information-wrapper .footer-information-area > .word-sitemap {
		float: left;
	}
	


	.footer-information-wrapper .footer-information-area > address {
		clear: both;
		float: none;
		padding-top: 0.3846rem
	}

	.footer-information-wrapper .footer-information-area > address > span {
		display: block;
	}

	.btn-top-go, 
	.btn-mobile-back  {
		display: none;
		top: auto;
		top: initial;
		bottom: 1.923rem;
		right: auto;
		right: initial;
		width: 2.692rem;
		height: 2.692rem;
		line-height: 2.692rem;
		font-size:  0.7692rem;
	}

	.btn-top-go {
		right: 0;
	}

	.btn-mobile-back {
		left: 0;
		margin-top: 0;
	}

	.btn-top-go:hover,
	.btn-mobile-back:hover { 
		opacity: 1;
		background: #000;
	}
	
	
	/* 팝업존 */
	.popupzone-wrapper {
		z-index: 1;
	}

	.popupzone-area {
		max-width: 100%;
		padding: 0 1.538rem;
		margin: 0;
		background: trnasparent;
	}

	.popupzone-area #popupzone-slider {
		height: auto;
		background: transparent;
	}

	.popupzone-footer-wrapper {
		position: static;
		margin-right: 0;
		padding: 0.3846rem 0;
	}
	
	.popupzone-area #popupzone-slider .item {
		background: transparent;
	}

	.popupzone-area #popupzone-slider .item > a {
		height: 8.385rem;
	}


	.popupzone-footer-wrapper .today-checked-close {
		margin-right: 0.3846rem;
	}

	.popupzone-footer-wrapper .today-checked-close input[type="checkbox"] {
		margin-right: 0.1923rem;
	}

	.popupzone-footer-wrapper .today-checked-close label {
		font-size: 0.7692rem;
		line-height: 0.9231rem;
	}

	.popupzone-footer-wrapper .btn-popup-close {
		margin-top: 0.1538rem;
	}

	.popupzone-area .owl-dots {
		bottom: 0;
		margin-bottom: -1.25rem;
		right: auto;
		right: initial;
		left: 0;
		width: auto;
		display: block;
	}

	.popupzone-area .owl-dots .owl-dot {
		width: 0.9231rem;
		height: 0.9231rem;
		margin: 0 0.1923rem;
	}

	.popupzone-area .owl-dots .owl-dot > span {
		width: 0.9231rem;
		height: 0.9231rem;
	}

	.popupzone-area .owl-dots .owl-dot.active {
		width: 1.538rem;
	}

	.popupzone-area .owl-dots .owl-dot.active > span {
		width: 1.538rem;
		border-radius: 0.4615rem;
	}

	.popupzone-area button.btn-popup-previous,
	.popupzone-area button.btn-popup-next {
		position: absolute;
		top: 50%;
		text-indent: -5000rem;
		display: block;
		width: 0.8462rem;
		height: 1.615rem;
		margin-top: -0.8077rem;
	}

	.popupzone-area .btn-popup-previous {
		left: 1.154rem;
		background-size:  0.8462rem 1.615rem !important;
	}

	.popupzone-area .btn-popup-next {
		right: 1.154rem;
		background-size:  0.8462rem 1.615rem !important;
	}
	
	.popupzone-btns-wrapper {
		position: absolute;
		top: initial;
		top: auto;
		bottom: 0.55rem;
		left: 0.7692rem;
		display: block;
	}
	
	/* 221216 포기팝업 */
	.jwxe_popup:nth-of-type(1) {
 
    top: 2%!important;
		width: 100% !important;
}
	.jwxe_popup:nth-of-type(2){
		    top: 13% !important;
		   margin-left:0;
}


@media only all and (max-width: 767px) {
	html {
		font-size: 1.25rem; /* 기본베이스 폰트사이즈 18px */
		line-height: 1.25rem; /* 기본베이스 line-height 사이즈 18px */ 
	}

	.footer-sns-list {
		bottom: 4.038rem
	}

}


@media only all and (max-width: 600px) {
	html {
		font-size: 0.9375rem; /* 기본베이스 폰트사이즈 15px */
		line-height:  0.9375rem; /* 기본베이스 line-height 사이즈 15px */ 
	}

	.footer-sns-list {
		bottom: 4.346rem
	}
}


@media only all and (max-width: 475px) {
	html {
		font-size: 0.8125rem; /* 기본베이스 폰트사이즈 13px */
		line-height:  0.8125rem; /* 기본베이스 line-height 사이즈 13px */ 
	}

	.footer-sns-list {
		bottom:	4.615rem
	}
}