@charset "UTF-8";
/* CSS Document */


@media only screen and (max-width: 1440px) {
	/*푸터*/
	footer {min-width: auto;}
	
	/*서브공통*/
	.container {min-width: auto;}
	
	/*서브네비게이션*/
	.sub_nav ul {width: 100%;}
	.sub_nav ul li {width: 16.6%;}
	.sub_nav ul li a {font-size: 13px;}
	.sub_nav.ty05 ul li {width: 20% !important;}
	
	/*header h1 a {width: 180px;}*/
}


@media only screen and (max-width: 1300px) {
    #haka_section05 ul.work_list li.banners {height: 450px; background-position: bottom -80px right -50px !important;}
    
    
}

@media only screen and (max-width: 1200px) {
	/*헤더*/
	header ul.gnb {margin-left: -382px;}
	header ul.gnb li {padding-left: 40px; padding-right: 40px;}
	
	#haka_section05 ul.work_list li.banners {padding-right: 1.5rem;}
	
	/*서브공통*/
	.content {width: 100% !important; padding: 45px 15px!important; margin-bottom: 0}
	.content .sub_txt {font-size: 15px !important; margin-top: 15px !important}
	.sub_section .contents {width: 100%;}
	.pdts {padding-bottom: 0 !important;}
	.pdts .sub_common_select_line {margin-bottom: 0}
	
	/*고객지원*/
	.content.company {width: 100%; padding-left: 20px; padding-right: 20px;}
	
	/*FAQ*/
	.sub_common_select_line .sc_select_item {font-size: 13px;}
	.sideMenu li {line-height: 1.6;}
	.sideMenu li a {font-size: 13px; padding: 15px 0; display: block;}
	
	/*매장찾기*/
	#mArticle {padding-left: 15px; padding-right: 15px; box-sizing: border-box;}
	
	/*제품소개*/
	.sideNav {width: 100% !important}
	
}

@media only screen and (max-width: 1068px) {
	header #gnb_wraps {padding-left:90px; box-sizing: border-box; height: 50px;}
	header h1 {transform:translateX(0); top:-5px; left: 20px; padding-top: 0;}
	header h1 a {width: 65px; /*width: 145px;*/ background-size: 100%;}
	header ul.gnb {position: relative; top: auto; 
		left: auto; 
		margin-left: 0; text-align: center; font-size: 0;  width: 100%;}
	header ul.gnb li {font-size: 15px; padding:5px 30px; display: inline-block; float: none;}
	
	header .call-mypage {top: 10px;}
	
	header .util_menu {}
	header .util_menu li {font-size: 12px; padding-top: 11px;}
	header .util_menu li:last-of-type {margin-right: 20px;}
	
	#gnbM {width: 100%; left: 0; margin-left: 0; border-radius: 0; top: 84px; box-sizing: border-box; padding: 3rem 8rem; padding-top: 0; border-width: 1px 0;}
	.gnbM_header {border-radius: 0;}
	.gnbM_header::after {margin-left: 336px; top: -9px;}
	#gnbNavigation > ul > li > a {font-size: .9em; padding-left: 10px;}
	#gnbNavigation > ul > li:last-of-type {border-bottom: 1px solid #ddd;}
	
	#haka_section05 ul.work_list.ver2 li.banners {padding: 3rem; padding-right: 1.5rem;}
	#haka_section05 ul.work_list.ver2.new_list li.banners {padding: 0; margin-top: 10px;}
	#haka_section05 ul.work_list.ver1 li.banners {padding: 2rem; background-size: 500px; height: 430px;}
	
	
	
	footer .footer_top {font-size: 12px; padding: 17px 0}
	.footer_sitemap .sitemap_box dl dt {font-size: 12px; font-family: 'NotoSans-Medium'; margin-bottom: 15px}
	.footer_sitemap .sitemap_box dl dd a {font-size: 12px;}
	
	/*서브공통*/
	.sub_title {font-size: 39px !important}
	.tc {margin-bottom: 0;}
	
	.tit-sec-wrap h2 {font-size: 25px; margin-bottom: 20px; margin-top: 30px;}
	
	#nomal_product_wrap {display: none;}
	#res_product_wrap {display: block;}
	#res_product_wrap img {width: 100%;}
	
	/*고객지원*/
	.board_zone_list .date_check_box form .date_faq_list .input-wrap {width: 94%;}
	.content.company {padding-left: 15px; padding-right: 15px;}
	.board_zone_sec {margin-top: 30px;}
	
	/*faq*/
	.sideNav {height: auto;}
	.sideMenu {overflow: hidden; /*padding: 15px 0;*/}
	.sideMenu li  {width: 33.3%; margin: 0; float: left;}
	.sideMenu li a.active.on {border: 0;}
	#faq_wrap li h3 {font-size: .9em; padding-left: 35px; padding-right: 40px;}
	#faq_wrap li h3 .tit_btn {font-size: 1em; right: 5px;}
	#faq_wrap li h3 .tit_bg {font-size: 1.2em; left: 10px;}
	#faq_wrap li a {line-height: 1.5; display: block;}
	
	
	/*이벤트*/
	ul.newslist {margin-top:-50px;}
	ul.newslist li {padding-left: 390px;}
	ul.newslist li span {width: 360px;}
	
	/*제휴문의*/
	.cs_form_w {width: 100%; box-sizing: border-box; padding: 0 15px; margin: 0; margin-bottom: 50px;}
	.cu_input_w {margin-top: 2%;}
	.cui_box {width: 49%; margin-left: 2%; height: 45px !important; font-size: 13px;}
	.cu_memo_box textarea {width: 100%; font-size: 14px; padding: 15px;}
	
	/*보증관련정보*/
	.board.board-row tbody td {padding-left: 20px; padding-right: 20px;}
	
	/*매장찾기*/
	.box_search {padding: 0;box-sizing: border-box;}
    .box_search .search_tab_btn {
        line-height: 1.9em;
        font-size: 14px;
    }
	.box_search .search_cont {position: relative; width: 100%; box-sizing: border-box; padding:10px 10px;}
	.box_search .search_cont .lab_search {width: 100%; margin-right: 0;}
    
    .box_search .search_cont .lab_search input{height:30px;}
    
	.box_search .search_cont .lab_search .tf_search {font-size: 13px;}
	.box_search .search_cont .btn_search {
        position: absolute;
        height:30px;
        top:10px;
    }
	.box_search #si,
	.box_search #gu {
        padding-right: 10px;
        margin-bottom:10px;
	    width: 100%;
	}
    .box_search #gu {
        margin-bottom:0;
	}
    
	.store_location {height: auto;}
	.store_location .cont_map {width: 100%; height: 430px;}
	.store_location .cont_store {position: relative; width: 100%; height: 500px; border-right: 0;}
	.store_location .tit_cont {position: sticky; top: 0; left: 0; background: #fff; z-index: 1;}
	.store_cont {padding: 20px 15px;}
	.store_cont .tit_name {margin: 0; max-width: none;}
    /* 221026 률 - font-size: 1.1em -> 1em 으로 변경 */
	.store_cont .tit_name .txt_name {font-size: 1em;}
	.store_cont .tit_name .txt_name img {width: 16px; height: auto; margin-right: 5px;}
	.store_cont .txt_tel {font-size: 14px; margin-top: 10px;}
	
	/*쿠폰발급*/
	.board_view_content p img {width: 100%;}
	
	/*1:1고객문의*/
	.board_zone_list .date_check_box {padding-right: 0;}
	.board_zone_list .date_check_box form .date_faq_txt {padding-left: 30px;}

}


@media only screen and (max-width: 1000px) {
	.main_section .contents_wrap {width: 93%; margin: 0 auto;}
	footer {padding-bottom: 65px;}
	footer .footer_wrap {width: 96%; margin: 0 auto;}
	footer .footer_bottom ul.fnb li {font-size: 12px;}
	footer .footer_bottom address {font-size: 12px; line-height: 1.6;}
	
	header ul.gnb li {padding-left: 15px; padding-right: 15px;}
}



@media only screen and (max-width: 980px) {

	.main_wrap {
		height: 490px;
	}
	.main_wrap .on .main_vis {
		transform: translate(-50%, 14%) scale(0.34);
	}
	#haka_section05 ul.work_list li.banners {width: 100%; height: auto; min-height: 350px; margin: 0; padding-left: 1.5rem; padding-top: 2.5em; padding-bottom: 2.5em; background-size: 450px; background-position: center !important}
	#haka_section05 ul.work_list li.banners p.text-semi_big {font-size: 22px;}
	
	#haka_section05 ul.work_list.ver2 li.banners a {margin-top: 25px; font-size: 14px;}
	#haka_section05 ul.work_list.ver2 li.banners a span {background-size:11px; background-position: top 5px right;}
	 
	.main_body header {position: sticky; top: 0; left: 0;}
	 
	header #gnb_wraps {padding-left: 0;}
	header h1 {left: 50%; margin-left: -33px; /*margin-left: -70px;*/}
	
	header ul.gnb {float: right; width: auto; right: 0;}
	header ul.gnb li {padding: 0;}
	header ul.gnb li.nomal-gnb {display: none;}
	
	header .util_menu li:last-of-type  {margin-right: 16px;}
	header .call-mypage {width: 50px; height: 50px; top: 0; right: 0;}
	header .call-mypage .btn {width: 35px; height: 35px; background-image: url(/images/icon/signIn.svg); background-size: 100%; background-repeat: no-repeat;}
	header .call-mypage .btn span {display: none;}
	header .call-gnbs {display: block;}
	header .all_menu .btn.active span + span {margin-top: 22px;}
	#gnbM {padding-left: 3rem; padding-right: 3rem;}
	.gnbM_header::after {margin-left:0; left: auto; right: -114px;}
	
	#res_show-gnb {padding-left: 3rem; padding-right: 3rem;}
	
	.head_notice {display: block;}
	
	footer {padding-bottom: 55px;}
	
	/*메인컨텐츠*/
	.main_section {padding: 45px 0 !important;}
	.banner_text {display: block; width: 100%;}
	.inner_vertical_arr {display: block;}
	
	#haka_section01 {height: auto !important; min-height: 550px; background-size: cover;}
	#haka_section01 .banner_text p img {max-width: 360px; width: 100%;}
	#haka_section01 a {margin-top: 1em;}

	#haka_section02 {height: auto !important; min-height: 490px; background-size: 880px;}
	#haka_section02 .banner_text p img {max-width: 360px; width: 100%;}
	#haka_section02 a {margin-top: 1em;}

	#haka_section0302 {height: 490px !important; background-size: cover;}
	#haka_section0302 .banner_text p img {max-width: 360px; width: 100%;}
	#haka_section0302 a {margin-top: 1em;}

/*	#haka_section02 .section_title p {margin-bottom: 0}*/
	#haka_section04 {height: 490px !important; padding: 6rem 0 !important;}
	#haka_section05 {padding: 0 !important;}
	#haka_section05 ul.work_list.ver2 li.banners {height: auto; min-height: 270px; margin: 0; padding-left: 1.5rem; padding-top: 2.5em; padding-bottom: 2.5em; background-position: center}
	#haka_section05 ul.work_list.ver2 li.banners p.text-semi_big {margin-bottom: 15px; font-size: 22px;}
	/*#haka_section05 ul.work_list.ver2 li.banners p.text-small {display: none;}*/
	
	#haka_section05 ul.work_list.ver1 li.banners {width: 100%; height: auto; min-height: 350px; margin: 0; padding-left: 1.5rem; padding-top: 2.5em; padding-bottom: 2.5em; background-size: 450px;}
	#haka_section05 ul.work_list.ver1 li.banners p.text-semi_big {font-size: 22px;}
	#haka_section05 ul.work_list.ver1 li.banners a {margin-top: 15px;}
	#haka_section05 ul.work_list.ver1 li.banners a span {font-size: 14px; background-size: 9px; padding-right: 16px;}
	
	/*푸터*/
	.footer_sitemap {padding: 0; border:0;}
	.footer_sitemap .sitemap_box {width: 100%;}
	.footer_sitemap .sitemap_box dl {margin: 0; border-bottom: 1px solid #999fa7;}
	.footer_sitemap .sitemap_box dl dd {display: none; padding-bottom: 10px;}
	.footer_sitemap .sitemap_box dl dd a:first-of-type {margin-top: 5px}
	.footer_sitemap .sitemap_box dl dt {margin-bottom: 0; padding: 15px 0;}
	.footer_sitemap .sitemap_box dl dt span {display: block;}
	.footer_sitemap .sitemap_box dl dt::after {content: '+'; float: right; font-size: 14px; font-family: 'NotoSans-Light';  margin-top: -2px; margin-right: 8px;  -webkit-transition: -webkit-transform .3s ease;  transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; color: #fff;}
	.footer_sitemap .sitemap_box dl.on dt::after {-webkit-transform: rotate(45deg) scale(1.08); transform: rotate(45deg) scale(1.08);}
	
	footer .footer_bottom {padding: 25px 0;}
	footer .footer_bottom ul.fnb {position: relative; top: auto; right:auto; width: 100%; overflow: hidden; margin-bottom: 15px;}
	footer .footer_bottom ul.fnb li {font-family: 'NotoSans-Light',sans-serif;}
	footer .footer_bottom ul.fnb li:first-of-type {padding-left: 0;}
	
	/*서브공통*/
	.res-snb {display: block;}
	.sub_nav {display: none;}
	
	.sub_title {font-size: 31px !important;}
    /* 221026 률 - display: inline 추가 */
	.content .sub_txt {font-size: 14px !important; margin-top: 10px !important; /*display: inline;*/}
	.content .sub_txt .mobile_br {display:inline}
	
	.liquid {display: none;}
	
	/*브랜드스토리*/
	.sub_header .sub_slog {margin-top: -92px;}
	.sub_header .sub_slog p img {width: 40%;}
	.sub_header .sub_slog p:nth-of-type(1) {font-size: 40px; font-family: 'NotoSans-Bold'; line-height: 1; margin-bottom: 15px;}
	.sub_header .sub_slog p.textSplit {line-height: 1;}
	.sub_header .sub_slog p.textSplit span {font-size: 21px; line-height: 1.5;}
	.sub_header.about .sub_slog p.textSplit span:nth-of-type(15) {display: block;}
	
	
	/*1:1고객문의*/
	.content.company {padding-top: 45px;}
	.board_zone_list .date_check_box {padding: 30px 0;}
	.board_zone_list .date_check_box.faq-type {margin-bottom: 25px;}
	.board_zone_list .date_check_box form .date_faq_list {width: 100%; border-right: 0;}
	.board_zone_list .date_check_box form .date_faq_list h2 {text-align: center; font-size: 21px; line-height: 1.5;}
	.board_zone_list .date_check_box form .date_faq_list .input-wrap {width: 100%; height: 48px;}
	.board_zone_list .date_check_box form .date_faq_list .input-wrap input {border: 0;}
	.board_zone_list .date_check_box form .date_faq_txt {position: relative; width: 100%; padding:0; margin-top: 15px; text-align: center; box-sizing: border-box;}
	.board_zone_list .date_check_box form .date_faq_txt p.text-big {font-size: 25px; margin-bottom: 10px}
	.board_zone_list .date_check_box form .date_faq_txt .a_wraps a{width: 100%; margin: 10px 0}
	.tit-sec-wrap {display: none;}

	
	.board_list_table th {font-size: 13px; padding: 10px 5px}
	.board_list_table td {font-size: 13px;}
	.badge.badge_type01 {font-size: 12px; }
	
	#faq_con .con_inner {padding: 15px 10px}
	
	/*이벤트*/
	ul.newslist li {padding-left: 0; padding: 30px 0;}
	ul.newslist li span {width: 100%; position: relative; top: auto; left: auto; margin-top: 0; height: auto; padding-bottom: 50%;}
	ul.newslist li dl {padding-bottom: 0}
	ul.newslist li dl dt {font-size: 17px;}
	ul.newslist li dl dd.txtcon {font-size: 14px;}
	ul.newslist li dl dd.txtdate {font-size: 13px; margin-bottom: 15px;}
	ul.newslist li dl dd.btn_2 a {font-size: 13px; width: 100%;}
	
	/*제휴문의*/
	.cu_input_w {margin-top: 0;}
	.cui_box {width: 100%; margin-left: 0; margin-bottom: 2% !important;}
	.cu_memo_box, .private_check {margin-top: 2%;}
	
	.pb_title {font-size: 16px; padding-top: 25px;}
	.pb_info_text {margin: 10px 0 15px 0}
	.pb_info {padding: 20px 15px; font-size: 13px;}
	.pb_info .pbi_inner dd {width: 100%;}
	.pb_info .pbi_inner dt {width: 100%; padding-bottom: 5px;}
	
	.module_btn_type3 {width: 100%; font-size: 14px; height: 50px; line-height: 50px; position: sticky; bottom: 15px; left: 0; }
	
	/*보증관련정보*/
	.board {margin-bottom: 0; margin-top: 30px;}
	.board.board-row tbody td, .board table tbody > tr > th {padding-left: 0; padding-right: 15px; font-size: 14px; line-height: 1.45 !important; height: auto !important}
	.board.board-row tbody td {padding-top: 5px !important;}
	.board table tbody > tr > th  {border-right:0; padding-left:  0 !important; padding-bottom: 0 !important; font-family: 'NotoSans-Medium'; }

	/* Force table to not be like tables anymore */
	.guarantee table, 
	.guarantee thead, 
	.guarantee tbody, 
	.guarantee th, 
	.guarantee td, 
	.guarantee tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	.guarantee thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	.guarantee tr {height: auto !important;}
 
	.guarantee td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	.guarantee td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
	
	/*히스토리*/
	.historywrap {
		padding-top: 0;
		padding-bottom: 163.5px;
	}
	.historywrap::before {display: none;}	
	.historywrap .box {/*margin-top: 20px !important*/}
	.historywrap .box ul {box-sizing: border-box; padding-left: 10px;}
	.historywrap .box ul li {font-size: 14px; line-height: 1.5; margin: 7px 0; box-sizing: border-box; padding-left: 10px;}
	.historywrap .box ul li br {display: none;}
	.historywrap .box ul li i.dot {position: absolute; top: 5px; left: 0; }
	.historywrap .box p.year {padding-left: 10px;}
	.historywrap .box img {margin-top: 15px;}
	.historywrap .section_L, .historywrap .section_R {width: 100%; float:none;}
	.historywrap .section_L .box {text-align: left; padding-right: 1rem; padding-left: 50px; padding-top: 40px; padding-bottom: 40px;}
	.historywrap .section_L .box::before {right: auto; left: 0; top: 60px;}
	.historywrap .section_L .box::after {right: auto; top:56px; left: 40px;}
	.historywrap .section_L .box:nth-of-type(1) {margin-top:0}
	.historywrap .section_L .box:nth-of-type(2) {margin-top: 527.5px}
	.historywrap .section_L .box:nth-of-type(3) {margin-top: 373.5px;}
	.historywrap .section_L .box:nth-of-type(4) {margin-top: 763.5px;}
	.historywrap .section_L .box:nth-of-type(5) {margin-top: calc(541.5px + 20px);}
	.historywrap .section_L .box:nth-of-type(6) {margin-top: 436.5px;}



	.historywrap .section_R {position: absolute; top: 0; left: 0;}
	.historywrap .section_R .box {padding-left: 50px; padding-right: 1rem; background: #fafafa; padding-top: 40px; padding-bottom: 40px;}
	.historywrap .section_R .box::before {top: 60px; left: -10px;}
	.historywrap .section_R .box::after {top:56px; left: 40px;}



	.historywrap .section_R .box:nth-of-type(1) {margin-top: 429.5px;}
	.historywrap .section_R .box:nth-of-type(2) {margin-top: 513.5px;}
	.historywrap .section_R .box:nth-of-type(3) {margin-top: 679.5px;}
	.historywrap .section_R .box:nth-of-type(4) {margin-top: 532.5px;}
    .historywrap .section_R .box:nth-of-type(5) {margin-top: 541.5px;}
    .historywrap .section_R .box:nth-of-type(6) {margin-top: 387.5px;}
 
	
	/**/
	.manual_wrap .manual {width: 32%;  float: left; margin-left: 2%; margin-right: 0;}
	.manual_wrap .manual:first-of-type {margin-left: 0}
	.fixo-dimmed {box-sizing: border-box; padding: 0 15px;}
	
	/*FAQ*/
	.sub_common_select_line {display: block; border-top: 1px solid #ddd; border-left: 1px solid #ddd; overflow: hidden; border-bottom: 0; margin-top: 20px;}
	.sub_common_select_line .sc_select_item {position: relative; width: 50%; float: left; line-height: 1; height: auto; top: 0; padding: 13px 5px; border: 1px solid #ddd; border-top: 0; box-sizing: border-box; border-left: 0;}
	.sub_common_select_line .sc_select_item.on_sc_select {color: #0071e3 !important;}
	.sub_common_select_line .sc_select_item.on_sc_select::after {position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #0071e3; content: '';}
	

}

#haka_section05 ul.work_list.ver2 li.banners p.text-semi_big {margin-bottom: 15px; font-size: 22px;}

@media only screen and (max-width: 640px) {

	.board_zone_list .date_check_box form .date_faq_txt  {padding-right: 0}
	.board_zone_list .date_check_box form .date_faq_txt a {position: relative; width: 100%; right: auto; top: auto; margin-top: 20px;}
	.board_zone_list .date_check_box form .date_faq_txt a#my_q {right: auto; margin-left: 0; margin-top: 10px;}
	
}

@media only screen and (max-width: 480px) {

	#haka_section05 ul.work_list.ver2 li.banners p.text-semi_big {font-size: 32px;}
	
}