@charset "UTF-8";

@import url("common_pc.css");

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

	.fl,
	.fr {
		float: none;
	}


	.fr + .fl {
		margin-top: 0.625rem
	}

	.wrapper {
		padding: 4.583rem 0 0 0;
	}

	.header {
		height: 4.583rem
	}

	.gnb-wrapper {
		display: none;
	}

	.header-wrapper {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 4.583rem;
		background-color: rgba(255, 255, 255, 1);
		border-bottom: 0;
	}

	.wrapper.fixed .header-wrapper {
		position: fixed;
		top: 0;
		background-color: rgba(255, 255, 255, 0.98);
		box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.15);
		z-index: 2010
	}

	.header-wrapper > .bg {
		display: none !important;
	}

	.header-area {
		position: relative;
		text-align: center;
		height: 4.583rem;
		max-width: 100%;
		padding: 0 1.25rem;
		margin: 0;
		overflow: hidden;
	}

	.header-area > h1 {
		position: static;
		float: none;
		width: auto;
		height: auto;
		display: table;
		margin: 1.25rem 0 0 0;
		text-align: left;

	}

	.header-area > h1 > a {
		display: inline-block;
		vertical-align: middle;
	}

	.header-area > h1 > a > img {
		width: 8.417rem;
	}

	.header-area > h1 > a > strong {
		margin-top: 0.3333rem;
		margin-left: 0.9167rem;
		padding-left: 0.8333rem;
		font-size: 1rem;
		line-height: 1.25rem;
	}

	.header-area > h1 > a > strong:before {
		height: 0.75rem
	}

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

	.btn-totalmenu {
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: 4.875rem;
		height: 4.583rem;
		text-align: center;
	}

	.btn-totalmenu > .menu {
		display: table;
		vertical-align: middle;
		width: 1.75rem;
		margin: 0 auto;
	}

	.btn-totalmenu > .menu > span {
		display: block;
		width: 100%;
		height: 0.1667rem;
		background: #212121;
	}

	.btn-totalmenu > .menu > span:nth-child(2) {
		margin: 0.4583rem 0
	}

	/* 전체메뉴 */
	.mask-totalmenu {
		position: fixed;
		top: 0;
		left: 0;
		display: none;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 2000;
	}

	.totalmenu-wrapper {
		position: fixed;
		top: 0;
		right: -50rem;
		display: block;
		width: 22.5rem;
		height: 100%;
		margin-right: ;
		border-top: 0;
		background-color: rgba(255, 255, 255, 1);
		background-image: none;
		background-position: 0 0;
		background-repeat: no-repeat;
		z-index: 2010;
		box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.15);
		transition: all 0.2s ease-in-out;
		opacity: 0;
	}

	.totalmenu-wrapper.active {
		right: 0;
		opacity: 1;
	}

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

	.mobile-gnb-wrapper {
		position: relative;
		display: block;
		width: 100%;
		height: 10.42rem;
		padding: 4.583rem 1.25rem 0 1.25rem;
		border-bottom: 1px solid #e6e6e6;
		background-color: #ef3b39
	}

	.mobile-gnb-area > .btn-login {
		position: absolute;
		top: 1.375rem;
		left: 1.542rem;
		display: block;
		width: 6.917rem;
		height: 2.292rem;
		padding-top: 0.4167rem;
		border-radius: 1.167rem;
		color: #cb1f1d;
		background-color: #fff;
		font-size: 1.167rem;
		line-height: 1.5rem;
		font-weight: 700;
		letter-spacing: -0.5px;
		text-align: center;
	}

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

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

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

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

	.mobile-gnb-area > ul > li > a {
		display: block;
		width: 100%;
		height: 4.583rem;
		background: #cb1f1d;
		border-radius: 0.2083rem;
		text-align: center;
		font-size: 1.042rem;
		line-height: 1.458rem;
		padding-top: 1.792rem;
		color: #fff;
		letter-spacing: -0.5px;
	}

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

	.totalmenu-area > ul {
		float: none;
		width: 100%;
		padding: 0;
		border-bottom: 1px solid #cbcbcb;
	}

	.totalmenu-area > ul > li {
		border-top: 1px solid #e6e6e6
	}

	.totalmenu-area > ul > li:first-child {
		border-top: 0;
	}

	.totalmenu-area > ul > li > a {
		position: relative;
		display: block;
		font-size: 1.333rem;
		line-height: 2.083rem;
		color: #767676;
		font-weight: 500;
		padding: 0.8333rem 3.75rem 0.8333rem 1.333rem;
	}

	.totalmenu-area > ul > li > a .arrow {
		position: absolute;
		top: 50%;
		right: 1.25rem;
		display: block;
		width: 1.333rem;
		height:  0.8333rem;
		background-image: url(../img/icon/icon_arrow_down01.png);
		background-repeat: no-repeat;
		background-size: 1.333rem 0.8333rem;
		margin-top: -0.4167rem;
		transition: all 0.2s ease-in-out;
	}

	.totalmenu-area > ul > li > a.active,
	.totalmenu-area > ul > li.on > a.active { 
		color: #fff;
		background-color: #364b5c;
	}

	.totalmenu-area > ul > li.on > a {
		background-color: #ffa200;
		color: #fff;
	}

	.totalmenu-area > ul > li > a.active .arrow,
	.totalmenu-area > ul > li.on > a .arrow {
		background-image: url(../img/icon/icon_arrow_up01.png);
		transform: rotate(180deg);  
	}

	.totalmenu-area > ul > li.on > a .arrow {
		transform: rotate(180deg);  
	}


	.totalmenu-area > ul > li > .top-submenu {
		display: none;
		background-color: #dddddd;
	}

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

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

	.totalmenu-area > ul > li > .top-submenu > ul > li  {
		border-top: 1px solid #cbcbcb;
	}

	.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;
		vertical-align: middle;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > a:after {
		content: "";
		clear: both;
		display: block;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > a > .title {
		float: left;
		display: block;
		color: #666666;
		font-size: 1.333rem;
		line-height: 2.083rem;
		padding: 0.8333rem 0.8333rem 0.8333rem 1.917rem;
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > a:hover > .title,
	.totalmenu-area > ul > li > .top-submenu > ul > li > a:focus > .title,
	.totalmenu-area > ul > li > .top-submenu > ul > li > a.active > .title {
		color: #212121
	}

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


	.totalmenu-area > ul > li > .top-submenu > ul > li > a > .new-window {
		position: relative;
		float: left;
		margin-left: 0.625rem;
		margin-top: 1.375rem;
		width: 1rem;
		height: 1rem;
		overflow: hidden;
		background-image: url(../img/icon/icon_newwindows02.png);
		background-repeat: no-repeat;
		background-size: 1rem 2rem;
		background-position: 0 -1rem;
		text-indent: -5000rem;
		transition: all 0.2s ease-in-out;
	}

	.totalmenu-wrapper .btn-mobile-close {
		position: absolute;
		bottom: initial;
		bottom: auto;
		top: 1.375rem;
		right: 1.25rem;
		display: block;
		width: 1.5rem;
		height: 1.5rem;
		background-image: url(../img/button/btn_totalmenu_close01_mobile.png);
		background-repeat: no-repeat;
		background-size: 1.5rem 1.5rem;
		text-indent: -5000rem;
	}

	/* container */
	.container {
		display: block;
		padding: 0;
		min-height: 33.33rem;
	}

	/* contents navigation */
	.contents-navigation-area {
		display: none;
	}

	.container-wrapper {
		position: relative;
		max-width: 100%;
		padding: 6.333rem 1.25rem 1.25rem 1.25rem;
		margin: 0;
	}

	.lnb-wrapper {
		position: fixed;
		top: 8.75rem;
		left: 0;
		display: none;
		float: none;
		margin-left: 0;
		width: 100%;
		height: calc(100% - 8.75rem);
		overflow-x: hidden;
		overflow-y: auto;
		background: rgba(0, 0, 0, 0.5);
		z-index: 100;
	}

	.lnb-area {
		display: block;
		box-shadow: 0px 0.4167rem 0.4167rem 0px rgba(0,0,0,0.15);
	}

	.lnb-area > h2 {
		display: none;
	}

	.lnb-area > ul {
		background-color: #fff;
	}

	.lnb-area > ul > li {
		margin-top: -1px;
	}

	.lnb-area > ul > li > a {
		border: 1px solid #ddd;
		border-left: 0;
		border-right: 0;
	}

	.lnb-area > ul > li > a > .title {
		font-size: 1.25rem;
		line-height: 1.958rem;
		padding: 0.7083rem 0.7083rem 0.6667rem 1.917rem;
		border-left: 0;
		border-right: 0;
	}

	.lnb-area > ul > li > a > .new-window {
		margin-left: 0;
		margin-top: 1.25rem;
		width: 1rem;
		height: 1rem;
		background-size: 1rem 2rem;
		background-position: 0 -1rem;
	}


	.lnb-area > ul > li > a .bg {
		display: none;
	}

	.contents {
		float: none;
		width: 100%;
		padding-top: 0;
	}

	.contents-title {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 4.167rem;
		padding-top: 1.042rem;
		padding-bottom: 0;
		background-color: #e63c3c;
		color: #fff;
		font-size: 1.667rem;
		line-height: 2.167rem;
		text-align: center;
	}

	.contents-title .arrow {
		position: absolute;
		top: 50%;
		right: 1.538rem;
		display: block;
		width: 1.667rem;
		height: 0.8333rem;
		margin-top: -0.4167rem;
		background: url(../img/icon/icon_arrow_down02.png) no-repeat 0 0;
		background-size: 1.667rem 0.8333rem;
		transition: all 0.2s ease-in-out;
	}

	.contents-title.active {
		position: fixed;
		top: 4.583rem;
		box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.5);
		z-index: 10;
	}

	.contents-title.active .arrow {
		transform: rotate(180deg);
	}


	.contents-wrapper {
		display: block;
	}

	/* footer */
	.footer {
		position: relative;
		padding: 0;
	}


	.footer-wrapper {
		display: block;
		position: relative;
		max-width: 100%;
		padding: 1.25rem 1.25rem;
	}

	.footer-information-wrapper {
		position: relative;
		padding-top: 2.208rem;
		float: none;
		font-size: 1.083rem;
		line-height: 1.667rem;
		word-break: keep-all;
	}


	.footer-information-area > address {
		position: static;
		float: none;
		padding-right: 0;
		margin-right: 0;
	}

	.footer-information-area > address:after {
		display: none;
	}

	.footer-information-area > .word-privacy {
		position: absolute;
		top: 0;
		left: 0;
		float: none;
	}

	.footer-select-wrapper {		
		float: none;
		margin-bottom: 1rem;
	}

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

	.footer-select-wrapper > dl {
		position: relative;
		float: left;
		width: calc(50% - 0.25rem);
		margin-left: 0.5rem;
		text-align: left;
	}

	.footer-select-wrapper > dl:first-child {
		margin-left: 0;
	}

	.footer-select-wrapper > dl > dt {
		display: block;
	}


	.footer-select-wrapper > dl > dt > button {
		width: 100%;
		height: 2.708rem;
		padding: 0 2.25rem 0 0.8333rem;
		font-size: 1rem;
	}
	.footer-select-wrapper > dl > dt > button .arrow {
		right: 0.8333rem;
		width: 0.5833rem;
		height: 0.2917rem;
		margin-top: -0.125rem;
		background-image: url(../img/icon/icon_select_arrow_down01_mobile.png);
		background-size: 0.5833rem 0.2917rem;
	}

	.footer-select-wrapper > dl > dd {
		bottom: 2.708rem;
		max-height: 14.58rem
	}

	.footer-select-wrapper > dl > dd > ul > li > a {
		padding: 0.8333rem 1.25rem 0.75rem 1.25rem;
		font-size: 1rem;
		line-height: 1.25rem;
	}




	.btn-top-go,
	.btn-mobile-back  {
		display: none;
		top: auto;
		top: initial;
		bottom: 5rem;
		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;
	}

	.footer-download{
		clear:both;
		display:block;
	}

}


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

	.login-area{
		padding:20px 10px;
	}
	#login-memo{
		line-height:25px;
	}
	.login-area > .login-box .login-form{
		padding-right: 0px;
	}
	.login-area > .login-box .login-form > input[type="submit"]{
		position:relative;
		width : 100%;
		margin-top: 10px;
		height: 3.28rem;
	}
}

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

	
}

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


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

}