@import url("common_pc.css");

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


	body {
		min-width: 320px;
		font-family: "Noto Sans KR",sans-serif;
		color: #666667;
		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: 5rem;
		clear: both;
		overflow: hidden;
	}

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

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

	.gnb-wrapper {
		display: none;
	}

	.header-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 5rem;
	}

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

	.header-area > h1 {
		display: inline-block;
		top: 50%;
		margin-top: 0;
		max-width: calc(100% - 12.69rem);
		transform: translate(-50%, -50%);
	}

	.header-area > h1 > a > img {
		display: none;
	}

	.header-area > h1 > a > .mobile {
		
		display: inline-block;
		line-height: 1.769rem;
		color: #2c2c2c;
		font-size: 1.462rem;
		margin: 0 auto;
		font-weight: 500;
	}

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

	.btn-back {
		position: absolute;
		top: 50%;
		left: 1.154rem;
		display: block;
		width: 1.769rem;
		height: 1.308rem;
		margin-top: -0.654rem;
		background: url(../img/common/btn_mobile_back01@2x.png) no-repeat 0 0;
		background-size: 1.769rem 1.308rem;
		text-indent: -5000rem;
		z-index: 200;
	}

	.btn-mobile-total-search {
		position: absolute;
		top: 50%;
		right: 4.808rem;
		display: block;
		width: 1.385rem;
		transform: translate(0, -50%);
		cursor: pointer;
	}

	.btn-mobile-total-search > img {
		display: inline-block;
		vertical-align: middle;
		width: 1.385rem
	}

	.input-total-search-wrapper {
		display: none;
		position: absolute;
		top: calc(5rem - 1px);
		left: 0;
		width: 100%;
		padding: 0 3.462rem 0 0;
		background: #fff;
		transform: translate(0, 0);
	}

	.wrapper.fixed .input-total-search-wrapper {
		background: rgb(255, 255, 255, 0.95);
		box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	}

	.input-total-search-wrapper > input[type="search"] {
		width: 100%;
		height: 4.808rem;
		font-size: 1.154rem;
		text-indent: 1.154rem !important;
	}

	.input-total-search-wrapper > input[type="search"]::placeholder {
		color: #375084;
	}


	.input-total-search-wrapper > button {
		position: absolute;
		top: 50%;
		right: 1.154rem;
		display: block;
		width: 1.385rem;
		height: 1.385rem;
		transform: translate(0, -50%);
		background: url(../img/common/icon_search02@2x.png) no-repeat center center;
		background-size: 1.385rem 1.385rem
	}

	.input-total-search-wrapper > button > img {
		width: 1.385rem;
	}

	.btn-totalmenu {
		position: absolute;
		top: 50%;
		left: auto;
		left: initial;
		right: 1.154rem;
		float: none;
		margin-top: 0.3077rem;
		width: 2.308rem;
		height: auto;
		padding: 0;
		padding-top:  1.385rem;
		display: block;
		text-indent: 0;
		color: #292929;
		font-size: 0.6154rem;
		line-height: 0.6154rem;
		font-weight: 500;
		letter-spacing: -1px;
		background: url(../img/common/btn_mobile_toalmenu01@2x.gif) no-repeat center top;
		background-size: 1.577rem 1.154rem;
		z-index: 200;
		text-align: center;
		transform: translate(0, -50%);
	}

	.btn-totalmenu > span {
		display: inline;
	}

	.btn-totalmenu.on {
		background: url(../img/common/btn_mobile_toalmenu01@2x.gif) no-repeat 0 0;
		background-size: 1.577rem 1.154rem;
	}

	.btn-mobile-close {
		position: absolute;
		display: block;
		top: 1.038rem;
		right: 1.038rem;
		display: block;
		width: 1.192rem;
		height: 1.192rem;
	}

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


	.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.92rem;
		margin-right: -21.92rem;
		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: #1355a4
	}

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


	.mobile-gnb-wrapper .logo {
		float: left;
		display: block;
		padding: 0.8846rem 1.154rem 0.9615rem 1.154rem
	}

	.mobile-gnb-wrapper .logo > a {
		display: inline-block;
	}

	.mobile-gnb-wrapper .logo > a > img {
		display: block;
		width: 8.846rem
	}


	.mobile-gnb-wrapper > .language-list {
		clear: both;
		display: block;
		border-top: 1px solid #3a77bf;
		padding: 0.7692rem 1.154rem;
		text-align: left;
	}

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

	.mobile-gnb-wrapper > .language-list > li {
		float: left;
		padding-right: 1rem;
		margin-right: 0.7692rem;
		background: url(../img/common/bul_mobile_language01@2x.png) no-repeat right center;
		background-size: 0.2308rem 0.2308rem;
	}

	.mobile-gnb-wrapper > .language-list > li:last-child {
		padding-right: 0;
		margin-right: 0;
		background: transparent;
	}

	.mobile-gnb-wrapper > .language-list > li > a {
		display: inline-block;
		vertical-align: middle;
		color: #ffffff;
		font-size: 1.077rem;
		line-height: 1.154rem;
		font-weight: 300
	}


	.mobile-gnb-wrapper .mobile-gnb-area {
		clear: both;
		border-top: 1px solid #3a77bf;
		padding: 0.7692rem 1.154rem;
		text-align: left;
	}

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

	.mobile-gnb-wrapper .mobile-gnb-area > a {
		display: inline-block;
		vertical-align: middle;
		width: 6.538rem;
		height: 1.923rem;
		line-height: 1.923rem;
		margin-right: 0.3846rem;
		text-align: center;
		background: #003574;
		border-radius: 0.9615rem;
	}

	.mobile-gnb-wrapper .mobile-gnb-area > a > img {
		display: inline-block;
		vertical-align: middle;
		width: 0.6923rem;
		margin-right: 0.3462rem
	}

	.mobile-gnb-wrapper .mobile-gnb-area > a > span {
		display: inline-block;
		vertical-align: middle;
		color: #fff;
		font-size: 1.077rem
	}

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

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

	.totalmenu-area > ul > li {
		float: none;
		width: 100%;
		background: #fff;
	}

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


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

	.totalmenu-area > ul > li.active > a .on,
	.totalmenu-area > ul > li.on > a .on {
		background: url(../img/common/icon_arrow_up02@2x.png) no-repeat 0 0;
		background-size: 1.231rem 0.6923rem;
		text-indent: -5000rem;
	}

	.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: #000000
	}

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

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

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

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

	.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: inline-block; 
	}

	.totalmenu-area > ul > li > .top-submenu > ul > li > a .title {
		position: relative;
		display: block;
		color: #424242;
		padding-left: 1rem;
		font-size: 1.077rem;
		line-height: 1.077rem;
		background: url(../img/bul/bul_logic_type03@2x.gif) 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: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;
		padding-left: 0.7692rem;
		font-size: 0.9231rem;
		line-height: 0.9231rem;
		background: url(../img/bul/bul_logic_type03@2x.gif) no-repeat 0 50%;
		background-size: 0.2308rem 0.07692rem
	}

	.contents-area {
		padding: 1.923rem 1.154rem;
	}



	.contents {
		position: static;
		max-width: 100%;
		margin: 0;
		padding: 0;
	}

	.contents-navigation {
		display: none;
	}

	.contents-title {
		display: none;
	}

	.tabmenu-wrapper {
		padding: 1.923rem 1.154rem 1.538rem 1.154rem;
		margin-bottom: 0;
	}

	.tabmenu-wrapper > ul > li {
		border-bottom: 1px solid #d6d6d9;
		margin-bottom: -1px;
	}

	.tabmenu-wrapper > ul.depth3 > li,
	.tabmenu-wrapper > ul.depth4 > li,
	.tabmenu-wrapper > ul.depth5 > li {
		width: 50% !important;
	}


	.tabmenu-wrapper > ul > li:last-child {
		border-right: 1px solid #e8e8eb
	}

	.tabmenu-wrapper > ul > li:nth-child(2n) {
		border-right: 0;
	}

	.tabmenu-wrapper > ul > li > a {
		height: 3.077rem;
		line-height: 3.077rem;
		font-size: 1.077rem;
		letter-spacing: -1px;
	}

	.tabmenu-wrapper > ul > li > a.on > span > img {
		margin-bottom: -1px;
	}

	.tabmenu-wrapper + .contents-area {
		padding: 0 1.154rem 1.923rem 1.154rem;
	}

	.contents-wrapper {
		min-height: 19.23rem;
		padding-bottom: 1.923rem;
	}

	.footer { 
		padding-bottom: 0;
	}

	.footer-fixed-menu-list {
		position: static;
		box-shadow: none
	}

	.footer-fixed-menu-list > ul {
		max-width: 100%;
		padding: 0;
	}

	.footer-fixed-menu-list > ul > li {
		width: 33.333%;
		border-right: 0;
		border-bottom: 1px solid #383a3e;
	}

	.footer-fixed-menu-list > ul > li:nth-child(2),
	.footer-fixed-menu-list > ul > li:nth-child(5) {
		width: 33.334%;
		border-left: 1px solid #383a3e;
		border-right: 1px solid #383a3e
	}

	.footer-fixed-menu-list > ul > li:first-child {
		border-left: 0;
	}

	.footer-fixed-menu-list > ul > li > a {
		height: 2.692rem;
		padding: 0.8462rem 0 0 1.154rem;
		font-size: 0.9231rem;
		line-height: 1.154rem;
		text-align: left;
	}

	.footer-fixed-menu-list > ul > li > a > img {
		height: 1.077rem;
		margin-right: 0.3846rem;
	}


	.footer-wrapper {
		position: relative;
		clear: both;
		max-width: 100%;
		padding: 1.538rem 1.154rem;
		margin: 0;
	}

	.footer-left-information {
		float: none;
	}

	.footer-menu {
		margin-bottom: 0.5769rem;
	}

	.footer-menu > li {
		padding-right: 0.4615rem;
		margin-right:0.3846rem;
		background-size: 1px 0.7692rem;
	}

	.footer-menu > li > a {
		font-size: 0.8077rem;
		line-height: 0.9231rem;
	}

	.footer-menu > li > a:hover {
		text-decoration: none;
	}

	.footer-right-information {
		position: relative;
	}

	.address-copyright-certification {
		clear: both;
		display: block;
		font-size:  0.8077rem;
		line-height: 1rem;
	}

	.address-copyright-certification .address-copyright {
		float: none;
		margin-right: 0;
		margin-bottom: 1.346rem;
		color: #999999;
		font-size: 0.8077rem;
		line-height: 1.154rem;
		word-break: keep-all;
	}

	.address-copyright-certification > img {
		float: none;
		display: block;
		width: 7.538rem;
		margin-top: 0;
	}

	.customer-information {
		position: static;
		margin-bottom: 1.231rem;
	}

	.customer-information > dt {
		font-size: 0.9231rem;
		line-height: 1.385rem;
		margin-right: 0.5769rem;
		color: #bababa;
	}

	.customer-information > dd {
		float: left;
		padding-right: 0.8462rem;
		margin-right: 0.7692rem;
		color: #e2e2e2;
		font-size: 1.385rem;
		line-height: 1.385rem;
		background-size: 0.07692rem 0.7692rem;
		letter-spacing: -1px;
	}



	.customer-information > dd.btn-mobile-tel > a {
		position: relative;
		display: block;
		width: auto;
		height: 2rem;
		background: #6b6f78;
		padding: 0 1rem;
		border-radius: 1rem;
		margin-top: -0.5rem;
	}

	.customer-information > dd.btn-mobile-tel > a:after {
		content: "";
		clear: both;
		display: block;
	}

	.customer-information > dd.btn-mobile-tel > a > span {
		float: left;
		font-size: 0.8462rem;
		line-height: 1rem;
		color: #fff;
		font-weight: 300;
		padding-top:  0.5385rem;
	}

	.customer-information > dd.btn-mobile-tel > a > img {
		float: left;
		width: 0.8462rem;
		
		margin-top: 0.6538rem;
		margin-left: 1.077rem;
	}

	.family-list-wrapper01 {
		display: none;
	}

	.footer-sns-list {
		position: absolute;
		bottom: 0.3077rem;
		left: 8.462rem;

		top: auto;
		top: initial;
		right: auto;
		right: initial;
		display: block;
		float: none;
		transform: none;
	}

	.footer-sns-list:after {
		content: "";
		clear: both;
		display: block;
	}

	.footer-sns-list > li {
		float: left;
		width: 1.923rem;
		height: 1.923rem;
		margin-top: 0;
		margin-left: 0.3846rem;
	}



	.footer-sns-list > li > a {
		width: 1.923rem;
		height: 1.923rem;
	}

	.footer-sns-list > li > a > img {
		display: block;
		width: 1.923rem;
	}

	.footer-sns-list > li.mobile-language {
		display: block;
		width: auto;
		margin-left: 0.3846rem;
	}

	.footer-sns-list > li.mobile-language a {
		padding-left: 0.5385rem;
		line-height: 1.923rem;
		font-size: 0.9231rem;
		color: #999;
		background: url(../img/bul/bul_logic_type02@2x.gif) no-repeat left center;
		background-size:  0.1538rem  0.1538rem;
	}

	.footer-sns-list > li:nth-child(4) {
		margin-left: 0.7692rem;
	}

	.footer-sns-list > li:nth-child(4) a {
		padding-left: 0;
		background: transparent;
	}

	.footer-sns-list > li.mobile-language a:hover {
		text-decoration: underline;
	}


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

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

	.popupzone-footer-wrapper {
		margin-right: 0;
		padding: 0;
	}

	.popupzone-footer-wrapper .today-checked-close {
		display: none;
		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;
		margin-right: 1.154rem;
	}

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

	.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-nav button {
		position: absolute;
		top: 50%;
		text-indent: -5000rem;
		display: block;
		width: 0.8462rem;
		height: 1.615rem;
		margin-top: -0.8077rem;
	}

	.popupzone-area .owl-nav .owl-prev {
		left: -0.7692rem;
		background-size:  0.8462rem 1.615rem !important;
	}

	.popupzone-area .owl-nav .owl-next {
		right: -0.7692rem;
		background-size:  0.8462rem 1.615rem !important;
	}

	.footer-language-list {
		position: absolute;
		bottom: 3.5
	}

	.mobile-footer-language-list {
		display: block;
		margin-top: 1.731rem;
		text-align: center;
	}

	.mobile-footer-language-list > li {
		display: inline-block;
		vertical-align: middle;
		margin-left: 1.154rem;
	}

	.mobile-footer-language-list > li > a {
		display: block;
		padding-left: 0.8077rem;
		color: #999999;
		font-weight: 1.077rem;
		line-height: 1.154rem;
		background: url(../img/bul/bul_logic_type05@2x.png) no-repeat left center;
		background-size: 0.2692rem 0.2692rem
	}

	.mobile-footer-language-list > li:first-child {
		margin-left: 0;
	}
}


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


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


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

	.btn-totalmenu > span {
		display: none;
	}


	.customer-information > dt {
		line-height: 1.154rem;
	}

	.customer-information > dd {
		padding-right: 1rem;
		margin-right:  0.9231rem;
		font-size: 1.354rem;
		line-height: 1.154rem;
		letter-spacing: 0;
	}
}


@media only all and (max-width: 359px) {
	.tabmenu-wrapper > ul > li > a {
		font-size: 0.9231rem;
	}

	.customer-information > dt {
		font-size: 0.8462rem;
		line-height: 1.077rem;
		letter-spacing: -1px;
	}

	.customer-information > dd {
		font-size: 1.077rem;
		line-height: 1.077rem;
		letter-spacing: -1px;
	}

	.footer-fixed-menu-list > ul > li > a {
		height: 2.692rem;
		padding: 0.8462rem 0 0 0.7692rem;
		font-size:  0.8462rem;
		line-height: 1.154rem;
		text-align: left;
	}

	.mobile-footer-language-list > li {
		margin-left: 0.5769rem
	}

}