@charset "UTF-8";

@media screen and (max-width:1300px){
	/* footer */
	.footer .quick_box {left: auto; right: 20px; margin-left: 0;}
	.web_mark {
		right: 0;
		top: 0;
		transform: translateX(40px);
	}
}

@media screen and (max-width:1280px){
	/* common */

	/* head_logo */
	.head_logo {-webkit-transition: left 0.3s; -moz-transition: left 0.3s; -o-transition: left 0.3s; transition: left 0.3s; left: 15px; width: 520px;}
	.util_header .util_menu {-webkit-transition: margin-right 0.3s; -moz-transition: margin-right 0.3s; -o-transition: margin-right 0.3s; transition: margin-right 0.3s; margin-right: 5px;}
}

@media screen and (max-width:1170px){
	.web_mark {transform: translateX(0);top: 90px;}
}
@media screen and (max-width:991px){
	/* header */
	.container {padding:0 5px;}
	.header {border-bottom: 1px solid #e8e8e8;}
	.gnb_header .container {height:60px;}
	.m_gnb_btn {display:block;}
	.scrolled .m_gnb_btn {position: fixed;top: 40px;right: 30px;}
	.gnb_header {display: none;}
	.sitemap_btn {display: none;}
	.util_header {top: -100px; transition:top 0.3s; -moz-transition:top 0.3s; -webkit-transition:top 0.3s;}
	.util_header .util_menu {display: none;}
	.util_header .container {height: 70px;}
	.head_logo {-webkit-transition-property: left, width; -moz-transition-property: left, width; -o-transition-property: left, width; transition-property: left, width; width: 350px; left: 10px;}
	.boda_btn {display: none;}
	
	/* scrolled */
	.header.scrolled {padding-top:70px;}
	.header.scrolled .util_header {position:fixed; top:0; z-index:1; width:100%; background-color: #fff; border-bottom: 1px solid #e2e4e8; box-shadow:0 2px 5px rgba(211,211,211,0.5);}

	.contents {padding-bottom: 243px;}


	/* footer */
	.footer .quick_box .q_share_box {display: block;} 
	.footer .foot_link > li:nth-last-child(2) {padding-right: 0;}
	.footer .foot_link > li:nth-last-child(2):after {display: none;}


	.sns_link_btn_wrap {display: none;}


	.m_voice_wrap {display: none !important;}
}
@media screen and (max-width:880px){
	.footer .foot_logo {display:block;margin:0;margin-bottom:15px;;}

	.web_mark {position: static;margin-top:15px;}
	.web_mark img  {width:80px;}
}
@media screen and (max-width:767px){
	/* common */
	.contents {padding-bottom: 230px;}

	.footer .foot_logo {display: block; width: 96px; margin: 0 auto 20px;}
		.footer .foot_logo img {height:auto !important;}
}

@media screen and (max-width:640px){
	.footer {padding:3rem 2rem 2rem 2rem;}
	.footer .foot_link > li {padding: 0 12px;}
	.footer .foot_link > li a {font-size: 1em;}
	.footer .txt_box {padding: 0; font-size: 0.933em;}
	.footer .txt_box p .each {margin: 2px 7px;}

	/* common */
	.contents {padding-bottom: 269px;}
}

@media screen and (max-width:480px){
	/* common */
	body {font-size:14px;}
	.contents {padding-bottom: 232px;}
	.head_logo {width: 270px;}
	.m_logo {width: 270px;}
	.m_gnb > li > a {height: 65px; line-height: 65px;}
	.m_sub_gnb > li > a {height: 50px; line-height: 50px;}
	.m_gnb_wrap .m_util_menu > li a {height: 70px; line-height: 70px;}
	.m_gnb_wrap .m_util_menu > li.li01 a:before {width: 30px;}
	.m_gnb_wrap .m_util_menu > li.li02 a:before {width: 22px;}
	.m_gnb_wrap .tts_btn {width: 310px; height: 55px; line-height: 55px;}
	.m_gnb_wrap .tts_btn .ico {width: 27px;}
	.m_gnb_wrap .tts_btn:hover {box-shadow: 6px 6px 0 rgba(0,0,0,0.24);}
	.m_gnb_wrap .m_boda_btn {width: 310px; height: 55px; line-height: 55px; margin-bottom: 60px;}
	.m_gnb_wrap .m_boda_btn:before {width: 22px; height: 22px;}
	.m_gnb_wrap .m_boda_btn:hover {box-shadow: 6px 6px 0 rgba(0,0,0,0.15);}
	.m_gnb_wrap .m_util_menu > li.kakao a {width: 310px; height: 55px; line-height: 55px; margin-left: -155px; bottom: 55px;}

	.footer {padding: 30px 0;}
	.footer .foot_link > li {float: none; width: 40%; margin: 3px 0; padding: 0; display: inline-block;}
	.footer .foot_link > li:nth-child(2n):after {display: none;}
	.footer .foot_link > li:after {height: 14px;}
	.footer .txt_box {margin-top: 10px;}
}

@media screen and (max-width:360px){
	.head_logo {width: 225px;}
	.m_logo {width: 225px;}
	.contents {padding-bottom: 288px;} 
}