@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: "notoKrR",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: 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: 100;
	}

	.gnb-wrapper {
		display: block;
	}
	
	.gnb-area .logo01 {
		position: absolute;
		top: 1.538rem;
		left: 0;
		margin-left: 0;
		z-index: 200;
		display: block;
	}

	.wrapper.fixed .gnb-area .logo01 {
		position: fixed;
		left: 20px
	}

	.gnb-area .logo01 > a > img {
		width: 5.385rem;
	}

	.gnb-box ul.login-eng-wrapper,
	.gnb-box .btn-facebook {
		display: none;
	}

	.gnb-box .totalsearch-totalmenu {
		position: absolute;
		top: 1.654rem;
		right: 0;
		float: none;
		margin-top: 0;
	}

	.wrapper.fixed .gnb-box .totalsearch-totalmenu {
		position: fixed;
		right: 20px;
	}

	.gnb-box .totalsearch-totalmenu > button {
		width: 1.385rem;
		height: 1.192rem;
	}

	.gnb-box .totalsearch-totalmenu > .btn-total-search {
		display: block;
		background: url(../make_img/common/icon_search_mobile@2x.png) no-repeat;
		background-size: 1.385rem 1.192rem;
	}

	.gnb-box .totalsearch-totalmenu > .btn-totalmenu {
		background: url(../make_img/common/btn_totalmenu01_mobile@2x.png) no-repeat;
		background-size: 1.385rem 1.192rem;
	}

	.gnb-box .totalsearch-totalmenu > span {
		float: left;
		width: 1px;
		height: 1.154rem;
		margin: 0 1.154rem;
		background: #b9b9b9;
	}

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

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

	.header-area > h1 {
		position: absolute;
		top: 0;
		left: 50%;
		margin-top: 0;
		margin-left: -5.385rem;
		padding-top: 1.231rem;
		height: 4.231rem;
		display: block;
		z-index: 10;
	}

	.header-area > h1 > a > img {
		display: block;
		width: 10.77rem
	}

	.header-area > h1 > a > .mobile {
		position: absolute;
		top: 0;
		left: 3.846rem;
		display: block;
		width: calc(100% - 7.692rem);
		height: 3.654rem;
		line-height: 3.654rem;
		color: #2c2c2c;
		font-size: 1.462rem;
		margin-bottom: 0;
		font-family: "notoKrM", notoKrM, sans-serif;
		font-weight: 500
	}

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

	.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 {
		position: fixed;
		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: #ffffff;
		-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;
	}

	.total-search-wrapper01 {
		position: fixed;
		top: 4.231rem;
		left: 0;
		margin-left: 0;
		width: 100%;
		display: none;
		background: #fff;
		padding: 1.154rem  1.154rem 0.9615rem  1.154rem;
		-webkit-box-shadow: 1px 5px 10px 0px rgba(0,0,0,0.2);
		-moz-box-shadow: 1px 5px 10px 0px rgba(0,0,0,0.2);
		box-shadow: 1px 5px 10px 0px rgba(0,0,0,0.2);
	}

	.wrapper.fixed .total-search-wrapper01 {
		opacity: 0.95
	}

	.total-search-wrapper01.on {
		display: block;
	}

	.total-search-area01 {
		width: 100%;
		height: 1.923rem;
		padding: 0 2.692rem 0 0.7692rem;
		border-radius: 0.9615rem;
	}

	.total-search-area01 input[type="search"] {
		height: 1.769rem;
		font-size: 0.9231rem;
	}


	.total-search-area01 .btn-search {
		right: 0.3846rem;
		width: 1.923rem;
		height: 1.923rem;
		background-size: 0.8462rem 0.8462rem;
	}


	.mobile-gnb-wrapper {
		display: block;
		background: #3d4557
	}

	.mobile-gnb-wrapper .mobile-login-information {
		display: block;
		height: 4.231rem;
		padding: 0 1.538rem;
		background: #2255c8 url(../make_img/common/bg_mobile_login01.jpg) repeat-y right top;
		background-size: 21.15rem 0.3846rem
	}

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

	.mobile-gnb-wrapper .mobile-login-information > p {
		float: left;
		padding-top: 1.615rem;
		color: #ffffff;
		font-size: 1.077rem;
		line-height: 1.154rem;
		font-family: "notoKrB", notoKrB, sans-serif;
		font-weight: 700
	}


	.mobile-gnb-wrapper .mobile-login-information > a {
		float: right;
		margin-top: 1.231rem;
	}

	.mobile-gnb-wrapper .mobile-login-information > a > img {
		display: inline-block;
		vertical-align: middle;
		width: 1.654rem;
	}

	.mobile-gnb-wrapper .language-list {
		padding: 1rem 1.538rem;
	}

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

	.mobile-gnb-wrapper .language-list > li {
		float: left;
		padding-right: 0.8077rem;
		margin-right: 0.8077rem;
		background: url(../make_img/common/icon_mobile_bar01@2x.gif) no-repeat right center;
		background-size: 1px 0.9231rem;
	}

	.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: 1rem;
		line-height: 1.538rem;
		font-family: "notoKrL", notoKrL, sans-serif;
		font-weight: 100;
	}

	.mobile-gnb-wrapper .language-list > li > a > img {
		width: 1.538rem;
		margin-right: 0.7692rem;
	}
	
	.totalmenu-area {
		position: relative;
		max-width: 100%;
		height: calc(100% - 7.846rem);
		padding: 0;
		margin: 0 auto;
		overflow-x: hidden;
		overflow-y: auto;
	}

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

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

	.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-family: "notoKrM", notoKrM, sans-serif;
		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(../make_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(../make_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: #2156d0
	}

	.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 ul {
		display: block;
		background: #f3f3f3;
		border-top: 1px solid #dddddd;
		padding: 1.538rem
	}

	.totalmenu-area > ul > li > .top-submenu ul > li {
		margin-bottom: 15px;
	}

	.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.231rem;
		line-height: 1.231rem;
		background: url(../make_img/common/bul_mobile_off@2x.png) no-repeat 0 50%;
		background-size: 0.3462rem  0.1154rem;
		font-family: "notoKrR", notoKrR, sans-serif;
		font-weight: 300
	}

	.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.active .title {
		background: url(../make_img/common/bul_mobile_onf@2x.png) no-repeat 0 50%;
		background-size: 0.3462rem  0.1154rem
	}

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

	.top-submenu-depth2-wrapper {
		display: none;
	}
	
	/* Æ˾÷Á¸ */
	.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;
	}

	.container {
		padding-top: 0;
		background: transparent;
	}

	.mobile-contents-title {
		display: block;
		background: #193d8f;
		padding: 1.154rem  1.154rem 0.9615rem  1.154rem;
		color: #fff;
		font-size: 1.308rem;
		line-height: 1.538rem;
		font-family: "notoKrM", notoKrM, sans-serif;
		font-weight: 500;
	}

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

	.contents-navigation {
		position: static;
		width: 100%;
		height: auto;
		/*
		margin-bottom: 1.923rem;
		*/
		text-align: center;
		background: transparent;
	}

	.contents-navigation > p {
		padding-top: 0;
		text-align: center;
	}

	.contents-navigation > p  > span,
	.contents-navigation > p > strong {
		font-size: 0.8462rem;
		line-height: 1rem;
		height: 1rem;
		color: #424242;
	}

	.contents-navigation > p > .icon-home {
		width: 1rem;
		height: 1rem;
		background-image: url(../make_img/icon/icon_home_white@2x.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 0.6154rem 0.5385rem;
		background-color: #2156d0;
		border-radius: 50%;
	}

	.contents-navigation > p > .icon-gt {
		margin: 0 0.3846rem;
		width: 0.1538rem;
		height: 1rem;
		background-image: url(../make_img/icon/icon_arrow_type02@2x.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 0.1538rem 0.2308rem;
		text-indent: -50000em;
		color: transparent;
	}

	.lnb {
		position: relative;
		margin-bottom: 0;
		padding: 1.154rem 1.154rem 0 1.154rem;
	}

	.lnb > ul {
		display: block;
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
	}

	.lnb > ul:after {
		content: "";
		clear: both;
		display: block;
	}

	.lnb > ul.depth5 {
		display: block;
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
		border: 1px solid #dddddd;
		border-top: 0;
		border-left: 0;
	}

	.lnb > ul.depth4 > li,
	.lnb > ul.depth5 > li,
	.lnb > ul.depth6 > li,
	.lnb > ul.depth7 > li,
	.lnb > ul.depth8 > li{
		margin-bottom: -1px;
		width: calc(50% + 1px);
	}

	.lnb > ul > li > a {
		height: 3.077rem;
	}

	.lnb > ul > li > a > .title {
		height: 3.077rem;;
		line-height: 3rem;
		font-size: 1rem;
	}

	.lnb > ul > li > ul {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 62px;
		text-align: center;
	}

	.center-tabmenu {
		width: 100%;
		height: 3.462rem;
		padding: 1.346rem 1.154rem 0 1.538rem;
		margin: 0;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.center-tabmenu > ul {
		display: block;
		width: 200%;
	}

	.center-tabmenu > ul:after {
		content: "";
		clear: both;
		display: block;
	}

	.center-tabmenu > ul > li {
		float: left;
		display: block;
		padding-right: 1.154rem;
		margin-right: 1.077rem;
		background: url(../make_img/icon/icon_bar01@2x.gif) no-repeat right 0.07692rem;
		background-size: 1px 1.077rem
	}

	.center-tabmenu > ul > li > a {
		padding: 0 0.3846rem;
		height: 2.115rem;
	}

	.center-tabmenu > ul > li > a .bg {
		height: 0.1154rem;
	}


	.center-tabmenu > ul > li > a.active .bullet {
		top: 0.3077rem;
		left: 0;
		width:  0.3077rem;
		height:  0.3077rem;
		margin-left: -0.3077rem;
	}


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

	.contents-wrapper {
		position: static;
		max-width: 100%;
		margin: 0;
		padding: 1.923rem 1.154rem;
	}
	
	/* ÀÚ·á½Ç > Recycling Center */
	.contents-wrapper-inner {
		position: static;
		max-width: 100%;
		margin: 0;
		padding: 1.923rem 0;
	}
	/* //ÀÚ·á½Ç > Recycling Center */

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

	.footer-left-information {
		padding-left: 0;
		font-size: 0.9231rem;
		line-height: 1.385rem;
	}

	.footer-left-information .footer-logo {
		display: none;
	}

	.footer-left-information .tel-fax-information > .icon-bar {
		width: 0.07692rem;
		height: 0.7308rem;
		margin: 0.3846rem  0.7692rem 0  0.7692rem;
	}



	.footer-right-information {
		position: static;
		float: none;
		margin-bottom: 1.538rem;
	}

	.footer-right-information:after {
		content: "";
		clear: both;
		display: block;
	}

	.footer-right-information .word-privacy {
		position: absolute;
		float: none;
		bottom: 3.077rem;
		font-size: 0.9231rem;
		font-size: 0.9231rem;
		margin-right: 0;
		margin-top: 0;
	}

	.footer-right-information .word-privacy .bg {
		display: none;
	}
	
	/*
	.family-list-wrapper {
		position: relative;
		float: left;
		margin-right: 0;
		width: 49%;
		border: 1px solid #dddddd;
	}
	*/

	.family-list-wrapper {
		position: relative;
		float: left;
		margin-right: 0;
		width: 100%;
		border: 1px solid #dddddd;
	}

	
	.family-list-wrapper:last-child {
		float: right;
	}

	.family-list-wrapper > dt > button {
		width:100%;
	}

	.family-list-wrapper > dt > button > .title {
		width: calc(100% - 3.077rem);
		height: 2.5rem;
		line-height: 2.5rem;
		padding-left: 1.154rem;
		font-size:  0.9231rem;
	}


	.family-list-wrapper > dt > button > .plus {
		width: 3.077rem;
		height: 2.5rem;
		background-size: 0.7308rem 0.3846rem;
	}

	.family-list-wrapper > dd {
		position: absolute;
		bottom: 2.5rem;
		left: 0;
		display: none;
		width: 100%;
	}

	.family-list-wrapper > dd > ul {
		display: block;
	}

	.family-list-wrapper > dd > ul > li {
		display: block;
		background: #ebeae9;
		border-bottom: 1px solid #fff;
	}

	.family-list-wrapper > dd > ul > li > a {
		position: relative;
		display: block;
		padding: 0.7692rem 1rem;
		font-size: 1rem;
	}

	.btn-mobile-facebook { 
		position: absolute;
		bottom: 2.308rem;
		right: 1.154rem;
		display: block;
		width: 2.308rem;
		height: 2.308rem;
		background: #2d67eb;
		border-radius: 50%;
		overflow: hidden;
	}

	.btn-mobile-facebook > img {
		display: inline-block;
		vertical-align: bottom;
		width: 2.308rem;
	}

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

	.btn-top-go {
		right: 1.154rem;
	}

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

	.btn-top-go:hover,
	.btn-mobile-back:hover { 
		opacity: 1;
		background: #000;
	}

	.mobile-span-br {
		display: block;
	}
}



@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
	}
	/* ¸ÞÀÎ > quick-recycling-center */
	.quick-recycling-center{
		display: block;
		width:3.75rem;
		position: fixed;
		top:110px;
		right: 10px;
		z-index: 999;
	}

	.quick-recycling-center img{
		display: block; 
		width:100%;
	}
/* //¸ÞÀÎ > quick-recycling-center */
}