@charset "utf-8";
/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2022-03-14
******************************************************** */


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1220px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;margin-right:calc(-1* var(--area-padding)); cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.cm-scroll-drag-guide {display:flex; justify-content:flex-end; margin-right:var(--area-padding); position: absolute; top: -1.5rem; right: 0; transform: translateY(-100%);}
	.cm-scroll-drag-guide .cm-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.cm-scroll-drag-guide .cm-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:#ccc; content:""; border-radius:5px;}
	.cm-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:moveScrollAni 3s both infinite; }
	.cm-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color: rgba(0, 0, 0, 0.7); border-radius:5px; opacity:1; }
	.cm-scroll-drag-guide .drag-tail .hand-icon{ font-size:30px; color:#aaa }
	@keyframes moveScrollAni {
		0%, 10% {
			left: 0;
			margin-left: 0px;
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1220px){
	.sub-tab-list-style .area{padding:0}
}
@media all and (max-width:1024px){
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	/* .sub-tab-wrapper-style, */
	.sub-tab-list-style.top-fixed
	/* .sub-tab-list-style ul li a */{height:40px; }
	/* .sub-tab-list-style ul li a em{font-size:13px} */
	.sub-tab-list-style ul li a em {font-size:1.4rem;}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-tab-wrapper-style{background:none; height:auto;}
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 2rem; height:5rem; line-height:5rem; font-size:1.6rem; background-color: #f2f2f2; backdrop-filter: blur(2rem); box-sizing:border-box; border-radius: 2.5rem}
	.open .sub-drop-open-btn-style {border-radius: 2.5rem 2.5rem 0 0;}
	.sub-drop-open-btn-style span{color:#000; font-weight:700;}
	.sub-drop-open-btn-style .arrow{color:#000; position:absolute; top:50%; right:1.5rem; margin-top:-7px}
	.open .sub-drop-open-btn-style .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color: #f2f2f2; /* border: 2px solid #f2f2f2; */ border-top:0; z-index:11;  box-sizing:border-box; border-radius: 0 0 2.5rem 2.5rem; padding-bottom:1rem; overflow: hidden;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; /* border-top:1px solid #eee;  */width:auto; background-color:#f2f2f2; /* background-color:transparent */ border-radius:0;}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:1.5rem 2rem; border:0;}
	.sub-drop-menu-style ul li.selected{background-color:#000;}
	.sub-drop-menu-style ul li.selected a em {color: #fff;}
	/* .sub-drop-menu-style ul li a em{font-size:1.6rem; color: #555 !important;} */
	/* .sub-drop-menu-style ul li.selected{background-color:transparent;} */
	/* .sub-drop-menu-style ul li.selected a em{color:#000 !important; font-weight:600; } */
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}

/* Paging */
@media all and (max-width:800px){
	.paging-style05 .paging a{width:3rem; height:3rem; line-height:3rem;}

	.paging-style05 .paging-select .cur-num input{width:3rem; height:3rem; line-height:3rem;}
	.paging-style05 .paging-select .slash{font-size:1.6rem;}


	.paging-style05  {flex-direction: column;}
	.paging-style05 .paging {width: auto !important; margin-bottom: 2rem;}
}

/* btn */
@media all and (max-width:800px){
	.cm-btn-box a span{font-size:1.4rem;}
}


/* ******************  공지사항 ********************** */
@media all and (max-width:800px){
	.location-map-con{display: block;}
	.location-map-con .left-box{width:100%; margin-bottom:5rem;}
	.location-map-con .right-box{width:100%;}

	.location-tit-box .tit{font-size:3.6rem;}
	.location-tit-box .txt{font-size:1.8rem; margin-top:1.5rem;}
	
	.location-search-box{margin-top:4rem;}
	.location-search-box .search-box{height:5rem; margin-top:1rem;}
	.location-search-box .search-box .location-input{padding-inline:2rem 5rem; font-size:1.6rem;}
	.location-search-box .search-box .location-search-btn{width:3rem; height:3rem; font-size:1.6rem;}

	.location-list-tbl,
	.location-list-tbl colgroup,
	.location-list-tbl tbody,
	.location-list-tbl tbody tr,
	.location-list-tbl tbody td{display: block;}
	.location-list-tbl thead{display: none;}
	
	.location-list-tbl{border-top:2px solid #000;}
	.location-list-tbl tbody tr{padding:1rem 0; border-color:rgba(0,0,0,0.3);}
	.location-list-tbl tbody tr td{position: relative; /* height: 2.7rem; */ height:auto; text-align:left; padding-block:0; padding-left:11rem; /* padding-left:6rem; */ box-sizing:border-box; margin:0.5rem 0;}
	.location-list-tbl tbody tr td:before{position: absolute; content:attr(data-label); top:0; left:0; font-size:1.6rem; line-height:1.625; letter-spacing:-0.01em; color:rgba(0,0,0,0.7); font-weight:500;}
	.location-list-tbl tbody tr td:has(.tbl-tit):before{top:3px;}
	.location-list-tbl tbody tr td:has(.bbs-no-list){height:auto; padding:0;}
	.location-list-tbl tbody tr td .tbl-tit{font-size:2rem;}
	.location-list-tbl tbody tr td:nth-of-type(3) {margin-bottom: 1rem;}
}

/* ****************** 회원 :: 로그인페이지 ********************** */
@media all and (max-width:800px){	
	.login-page:not(.join-page) {padding: 0 3rem;}
	/* 로그인 :: 상단 타이틀 */
	.login-top-box{margin-bottom:3rem;}
	.login-top-box .login-tit{font-size:4rem;}
	.login-top-box .login-txt{font-size:1.6rem;}

	.login-item .login-input{font-size:1.5rem; height:5rem;}
	.login-item .input-label{font-size:1.5rem;}
}

/* ****************** 회원 :: 회원가입페이지 ********************** */
@media all and (max-width:800px){
	.join-wrapper {padding: 0 3rem;}
	.join-intro-con {flex-direction:column; width: 100%;}
	.join-intro-con .join-intro-item {width: 100%; height: 32rem;}
	.join-intro-con .join-intro-item:last-of-type {margin-top: 3rem;}
	.join-intro-con .join-intro-item a {padding: 2rem; box-sizing: border-box;}
}

/* ****************** 회원 :: 회원가입01(약관동의) ********************** */
@media all and (max-width:800px){
	.join-write-wrap{padding:3rem 0;}
	.join-agree-con{margin-bottom:1rem;}
	.join-agree-con .agree-item .more{font-size:1.3rem;}
	.join-agree-con .agree-item .more i{margin-left:1rem;}

	.join-agree-con .agree-inner{padding:1.5rem; margin-top:1rem; margin-bottom:3rem;}
	.join-agree-con .agree-inner .inquiry-agreement-con{height:20rem; font-size:1.5rem;}
}

/* ****************** 회원 :: 회원가입02() ********************** */
@media all and (min-width:801px){
	.cm-write-item .write-tit-box .write-tit.small{font-size:1.6rem;}
}
@media all and (max-width:800px){
	.join-write-con {padding-inline: 0;}
	.cm-write-item {flex-direction:column;}
	.cm-write-item .cm-fieldset-box {width: 100%; max-width:none;}
	.btn-fieldset .write-btn {width: 12rem; font-size:1.5rem;}
	.btn-fieldset .btn-fieldset-inner {width: calc(100% - 13rem);}
	.cm-fieldset-box .write-input::placeholder {font-size:1.3rem;}
}

@media all and (max-width:480px){
	.email-fieldset .fakeform-selectbox {width: 50%;}
	.email-fieldset .hypen {width: 3rem;}
}

/* ***********************
	*	페이크폼 스타일 추가css 
*********************** */
@media all and (max-width:800px){
	.fakeform-selectbox .select-title {text-indent: 1em; font-size: 1.4rem; line-height: 5rem;}
	.fakeform-selectbox .select-title:after{right:0.7em; font-size:2rem;}
	/* 옵션창 */
	.select-option span,
	.select-option strong {height: auto; font-size: 1.3rem; font-weight: 500; line-height: 1.5; padding: 1.5rem 1em;}
}


/* 마이페이지 :: 내가 작성한 글 */
@media all and (min-width:801px){
	#mypageCon .bbs-list-style01 {}
	#mypageCon .bbs-list-style01 .bbs-item {}
	#mypageCon .bbs-list-style01 .bbs-item a {height: 8.4rem;}
	#mypageCon .bbs-list-style01 .bbs-item a .bbs-list-num {width: 10rem;}
	#mypageCon .bbs-list-style01 .bbs-item a .bbs-list-state {width: 8rem;}
	#mypageCon .bbs-list-style01 .bbs-item a .bbs-list-info-con {width: calc(100% - 39rem); padding: 0 2rem;}
	#mypageCon .bbs-list-style01 .bbs-item a .bbs-list-info-con .bbs-subject-txt {font-size: 2rem; }
}

/* ****************** 마이페이지 ********************** */
@media all and (max-width:1280px){
	/* 마이페이지 :: 정보수정 */
	#mypageCon .join-write-con{display: block;}
	#mypageCon .join-write-con .left-box{width:100%; padding-inline:0; margin-bottom:0;}
	#mypageCon .join-write-con .right-box{width:100%;}
}
@media all and (max-width:800px){
	/* 마이페이지 :: 메인 */
	#mypageWrap{flex-direction:column-reverse;}
	.mypage-index {padding: 0 3rem;}
	/* 마이페이지 :: 좌측메뉴 */
	#mypageMenu{display: flex; flex-wrap:wrap; width:100%; padding-right:0rem; margin-top:5rem;}
	#mypageMenu:before{display: none;}
	#mypageMenu .mypage-menu-inner{width:50%; padding:1rem 0; }
	#mypageMenu .mypage-menu-inner:nth-last-child(-n+2){border:none;}
	/* 마이페이지 :: 우측메뉴 */
	#mypageCon{width:100%; padding-left:0;}
	.mypage-con-inner{position: relative; border-bottom:2px solid #000; padding-bottom:6rem;}
	.mypage-con-inner:before{display: none;}
	.mypage-con{padding:3rem 1.5rem;}
	/* 마이페이지 :: 공통 :: 타이틀 */
	.mypage-tit-box{}
	.mypage-tit-box .mypage-tit{font-size:1.8rem;}
	.mypage-tit-box .plus-txt{font-size:1.4rem;}
	.mypage-txt{font-size:1.4rem;}
	.mypage-tit-box + .mypage-txt{margin-top:2rem;}
	/* 마이페이지 :: 공통 :: 버튼 */
	.mypage-btn-list{display: flex; margin:0 -0.5rem;}
	.mypage-btn-list .mypage-btn{font-size:1.4rem; padding:0 1.5rem;}
	/* 마이페이지 :: 인덱스 :: 리스트 */
	.mypage-index-list{flex-wrap:wrap; padding-top:1rem; margin:2rem 0 -2rem;}
	.mypage-index-list .list-item{width:25%; margin:2rem 0;}
	.mypage-index-list.list05 .list-item{width:20%;}
	.mypage-index-list:not(.list05) .list-item:nth-child(4n):before{display: none;}
	.mypage-index-list .list-item .num{font-size:3rem;}
	
	/* 마이페이지 :: 대리점회원 전환신청 */
	.mypage-con:has(.mypage-inquiry-box){margin-bottom:3rem;}
	.mypage-inquiry-box{display: block; padding:2rem 0 1.5rem; margin-top:2rem;}
	.mypage-inquiry-box .mypage-btn{width:100%; margin-top:2rem;}
	
	/* 마이페이지 :: 내가 작성한 글 */
	.bbs-list-style01 .bbs-item a .bbs-list-category {width:100%; text-align:left; margin-bottom:1rem;} 
	#mypageCon .bbs-list-style01 .bbs-item a .bbs-list-info-con .bbs-subject-txt {font-size: 2rem; }

	/* ***** 마이페이지 :: 뷰 ***** */
	.mypage-view-wrap .my-view-tit .tit-box {width: calc(100% - 8.5rem);}
	.mypage-view-wrap .my-view-tit .state-box {width: 8rem; height: 3.5rem;}
}
@media all and (max-width:480px){
	.mypage-index-top{display: block;}
	.mypage-index-top .mypage-tit-box{margin-bottom:1rem;}
}

/* ****************** 마이페이지 :: 접수 및 선정 확인 ********************** */
@media all and (max-width:800px){
	.board-date-search-box {width: 100%;}
	.mypage-confirm-item a {padding: 3rem 2rem;}
	.mypage-confirm-item a .confirm-inner {padding-right: 0;}
	.mypage-confirm-item a .btn-box {position: relative; width: 8rem; height: 3.5rem; top: 0; left: 0; margin-top: 1.2rem;}
	.mypage-confirm-item a .confirm-inner .tit {font-size:2.2rem; margin-top: 0.7rem;}
	.mypage-confirm-item a .confirm-inner .date {margin-top: 0.7rem;}

	/* 마이페이지 뷰 */
	.mypage-view-wrap .my-view-con .my-view-info dt {width: 12rem;}
	.mypage-view-wrap .my-view-con .my-view-info dd {width: calc(100% - 12rem);}
}


@media all and (max-width:800px){
	.location-search-box .fakeform-selectbox .select-title {padding: 0 2rem; line-height:4.5rem; font-size:1.6rem;}
	.location-search-box .select-box:last-of-type {margin-top: 1rem;}
	.location-search-box .select-option span, .location-search-box .select-option strong {padding: 1.2rem 2rem;}
}

@media all and (max-width:800px){
	.app-plus-txt{margin-top:0;}
}