:root{
	--main_col_01: #FEA742;
	--main_col_02: #133149;
	
	--gary_col_01: #A3AAAF;
	--gary_col_02: #707070;
	
	--FFF_col_01: #FFFFFF;
	--F00_col_01: #FF0000;
}

.mt_5{margin-top: 5px;}
.mt_10{margin-top: 10px;}
.mt_15{margin-top: 15px;}
.mt_20{margin-top: 20px;}
.mt_25{margin-top: 25px;}
.mt_30{margin-top: 30px;}
.mt_35{margin-top: 35px;}
.mt_40{margin-top: 40px;}
.mt_45{margin-top: 45px;}
.mt_50{margin-top: 50px;}
.mt_55{margin-top: 55px;}
.mt_60{margin-top: 60px;}
.mt_65{margin-top: 65px;}
.mt_120{margin-top: 120px;}

.mb_5{margin-bottom: 5px;}
.mb_10{margin-bottom: 10px;}
.mb_15{margin-bottom: 15px;}
.mb_20{margin-bottom: 20px;}
.mb_25{margin-bottom: 25px;}
.mb_30{margin-bottom: 30px;}
.mb_35{margin-bottom: 35px;}
.mb_40{margin-bottom: 40px;}
.mb_45{margin-bottom: 45px;}
.mb_50{margin-bottom: 50px;}
.mb_55{margin-bottom: 55px;}
.mb_60{margin-bottom: 60px;}
.mb_65{margin-bottom: 65px;}

.ml_5{margin-left: 5px;}
.ml_10{margin-left: 10px;}
.ml_15{margin-left: 15px;}
.ml_20{margin-left: 20px;}
.ml_25{margin-left: 25px;}
.ml_30{margin-left: 30px;}
.ml_35{margin-left: 35px;}
.ml_40{margin-left: 40px;}
.ml_45{margin-left: 45px;}
.ml_60{margin-left: 60px;}
.ml_65{margin-left: 65px;}

.mr_5{margin-right: 5px;}
.mr_10{margin-right: 10px;}
.mr_15{margin-right: 15px;}
.mr_20{margin-right: 20px;}
.mr_25{margin-right: 25px;}
.mr_30{margin-right: 30px;}
.mr_35{margin-right: 35px;}
.mr_40{margin-right: 40px;}
.mr_45{margin-right: 45px;}
.mr_60{margin-right: 60px;}
.mr_65{margin-right: 65px;}

.tac{text-align: center;}
.tar{text-align: right;}
.tal{text-align: left;}

.col_red{color: var(--F00_col_01) !important;}

/* common ========================= */
button:focus{outline: 0;}
.hdr_wrap{width: 100%; height: 55px; background-color: var(--main_col_02); position: fixed; top: 0; right: 0; left: 0; margin: auto; z-index: 10;}
.hdr_wrap .header{height: 100%; line-height: 55px; display: flex; align-content: center;}
.hdr_wrap .header .icon{width: 55px;}
.hdr_wrap .header .icon i{color: var(--gary_col_01); font-size: 16px;}
.hdr_wrap .header h3{color: var(--FFF_col_01);}

.heading span{color: var(--main_col_01);}
.warning{color: var(--F00_col_01); font-size: 10px; line-height: 15px;}
.alarm{color: var(--main_col_01); font-size: 10px; line-height: 15px;}

.content_wrap{position: relative; width: 286px; height: 100vh; margin: 0 auto; padding: 55px 0 0 0;}
.content_wrap .heading{font-size: 23px; font-weight: bold; color: var(--main_col_02);}
.content_wrap .heading p{font-size: 18px; line-height: 27px;}


.btn_box{width: 100%; height: 50px;}
.btn_box button{width: 100%; height: 100%; border-radius: 5px; border: none; background-color: var(--main_col_01); color: var(--main_col_02); font-size: 18px; font-weight: bold; outline: none;}
.btn_box button:disabled{background-color: var(--gary_col_01); color: var(--FFF_col_01);}
/* .btn_box button{width: 100%; height: 100%; border-radius: 5px; border: none; background-color: var(--main_col_01); color: var(--main_col_02); font-size: 18px; font-weight: bold; outline: none;} */
/* .btn_box button.on{background-color: var(--gary_col_01); color: var(--FFF_col_01);} */

/* 번호인증 // 비밀번호 인증 // 비밀번호 재설정 등 인풋디자인 공통 // 셀렉트 박스 */
.text_area{}
.text_area label{font-size: 10px;}
.text_area input{width: 100%; height: 30px; outline: none; border: none; border-bottom: 1px solid var(--gary_col_01);}
.text_area input::placeholder{font-size: 18px; font-weight: bold; color: var(--gary_col_01); letter-spacing: -0.8px;}

.text_area div{position: relative; width: 100%; height: 30px;}
.text_area .time{position: absolute; bottom: 7px; right: 0; margin: auto; color: var(--main_col_01); font-size: 15px;}
.text_area .view{display: inline-block; width: 20px; height: 20px; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; background-image: url("../img/view_none.png"); background-position: center; background-repeat: no-repeat;}
.text_area .chk{display: inline-block; width: 19px; height: 13px; position: absolute; top: 0; bottom: 0; right: 28px; margin: auto; background-image: url("../img/chk_one_chk.png");}

.text_area .phone{width: 100%;}
.text_area .phone input{display: inline-block; width: 40px;}
.text_area .phone input:nth-child(1){width: 30px;}

.select_area{}
.select_area label{font-size: 10px;}
.select_area select{
	appearance: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	display: block; width: 100%; height: 33px; padding: 0 10px; border: 1px solid var(--main_col_02); border-radius: 5px;
	background:  url("../img/arrow_bottom.png") no-repeat 95% 50%;
}
.select_area select > option{color: var(--gary_col_01);}

/* 하단 네비바 공통 */
.nav{position: fixed; bottom: 0px; left: 0; right: 0; margin: auto; width: 100%; height: 50px; background-color: #FEFEFE; z-index: 120;}
.nav .nav_icon{}
.nav .nav_icon ul{display: flex; justify-content: space-around; align-items: center; width: 100%; height: 50px;}
.nav .nav_icon ul li{}
.nav .nav_icon ul li img{}

/* 슬라이더 공통 */
.swiper-pagination-bullet{background: var(--main_col_02); opacity: 1;}
.swiper-pagination-bullet-active{background: var(--main_col_01); width: 17px; height: 9px; border-radius: 11px;}

/* 공지사항 공통 */
.table_area{}
.table_area table{width: 100%;}
.table_area table tbody{border-top: 2px solid var(--main_col_02); border-bottom: 2px solid var(--main_col_02);}
.table_area table tr{color: var(--main_col_02); height: 50px;}
.table_area table tr:not(:last-child){border-bottom: 1px solid var(--gary_col_01);}
.table_area table tr td{font-size: 13px;}
.table_area table tr td.date{font-size: 10px; color: var(--gary_col_01);}
.table_area table tr td b{display: inline-block; font-size: 8px; padding: 3px 7px; border: 1px solid var(--main_col_01); color: var(--main_col_01); border-radius: 13px;}

/* pagenation 공통 */
.pg_nation{max-width: max-content; margin-right: auto; margin-left: auto;}
.pg_nation .pg_nation_num{font-size: 20px; margin: 0 4px; color: var(--gary_col_01);}
.pg_nation .pg_nation_num img{vertical-align: -2px;}
.pg_nation .pg_nation_num.on{color: var(--main_col_01);}

/*  공통 */
/* switchButton css w3School */
.switch {position: relative; display: inline-block; width: 38px; height: 21px; vertical-align: middle;}
.switch input {opacity: 0; width: 0; height: 0;}
.slider {position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #ccc;  -webkit-transition: .4s;  transition: .4s;}
.slider:before {position: absolute; content: ""; height: 15px; width: 15px; left: 3px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s;}
input:checked + .slider {background-color: var(--main_col_01);}
input:focus + .slider {}
input:checked + .slider:before {-webkit-transform: translateX(17px); -ms-transform: translateX(17px); transform: translateX(17px);}

/* Rounded sliders */
.slider.round {border-radius: 34px;}
.slider.round:before {border-radius: 50%;}

/* 공지사항 & 알람 // 방문차량 & 방문예약차량 - 공통 */
.tab_area{background-color: var(--FFF_col_01); position: fixed; top: 55px; right: 0; left: 0; margin: auto; z-index: 10;}
.tab_area ul{overflow: hidden; height: 50px; box-shadow: 1px 4px 3px rgba(163, 170, 175, 0.10); padding: 0 37px;}
.tab_area ul li{position: relative; float: left; line-height: 50px; box-sizing: border-box;}
.tab_area ul li.on{font-weight: bold;}
.tab_area ul li.on::before{position: absolute; content:""; display: inline-block; width: 100%; height: 4px; background-color: var(--main_col_01); top: 0;}

/* 노란배경 텍스트 가운데 */
.visit_title{width: max-content; background-color: var(--main_col_01); color: var(--main_col_02); padding: 9px 5px; font-size: 18px; font-weight: bold; margin-left: auto; margin-right: auto;}
.bg_back{
	/* display: none; */
	width: 100%; height: 100vh; position: fixed; z-index: 160; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: rgba(0, 0, 0, 0.6);
}
.ham_bg_back{
	/* display: none; */
	width: 100%; height: 100vh; position: fixed; z-index: 160; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: rgba(0, 0, 0, 0.6);
}

/* popup common =========================== */
.popup{
	/* display: none; */
	width: 288px; height: 181px; position: fixed; z-index: 250; top: 0; bottom: 0; right: 0; left: 0; margin: auto; background-color: var(--FFF_col_01); color: var(--main_col_02);
	border-radius: 20px;
}

.caption{display: flex; justify-content: center; align-items: center; height: 70%; font-size: 15px; font-weight: 500;}
.caption p{line-height: 22px;}
.pop_btn_box{display: flex; justify-content: center; align-items: center; height: 30%;}
.pop_btn_box button{font-size: 15px; font-weight: bold; border: none; background: none;}

.pop_btn_box_02{display: flex; height: 30%;}
.pop_btn_box_02 button{width: 50%; font-size: 15px; font-weight: bold; border: none; background: none;}
	
/* wrap ================================== */
.wrap{width: 100vw; margin: 0 auto;}

/* login ================================== */
.login{width: 100%; height: 100vh; padding-top: 140px; background-color: var(--main_col_02); box-sizing: border-box;}
.login .logo{}
.login .logo img{}
.login .input_area{width: 100%;}
.login .input_area input{width: 286px; height: 47px; margin: 0 auto; border-radius: 5px; outline: none; border: none; padding: 0 12px;}
.login .input_area input::placeholder{color: var(--gary_col_01);}
.login .btn_box_login{}
.login .btn_box_login button{width: 138px; height: 40px; background-color: var(--main_col_01); border: none; outline: none; border-radius: 5px; color: var(--main_col_02); font-weight: bold; font-weight: bold; font-size: 18px;}

.login .auto_login{color: var(--FFF_col_01); font-size: 14px;}
.login .auto_login input[type="checkbox"]{display: none;}
.login .auto_login input[type="checkbox"] + label em{display: inline-block; width: 21px; height: 21px; margin-right: 5px; background: url("../img/none_auto_check.png") 0 0 no-repeat; vertical-align: middle;}
.login .auto_login input[type="checkbox"]:checked + label em{ background: url("../img/chk_auto_check.png") 0 0 no-repeat; vertical-align: middle;}

.login .caption_login{margin-top: 100px;color: var(--gary_col_01); font-size: 12px;}
.login .caption_login .password_find{margin-top: 100px;}
.login .caption_login .join{padding-bottom: 50px;}
.login .caption_login .join a{text-decoration: underline;}

/* agreement  common ================================== */
.agreement_start{}
.agreement_start ul{display: flex; height: 120px; justify-content: space-around;}
.agreement_start ul li{height: 120px; line-height: 120px;}
.agreement_start ul li img{}
.agreement_start ul li i{color: var(--main_col_01);}


/* agreement  ================================== */
/* .agreement_wrap{position: relative;} */
.agreement .check_area{color: var(--main_col_02);}
.agreement .check_area hr{border:1px solid var(--main_col_02);}

.agreement .check_all{font-size: 18px; font-weight: bold;}
.agreement .check_all input[type="checkbox"]{display: none;}
.agreement .check_all input[type="checkbox"] + label em{display: inline-block; width: 28px; height: 28px; margin-right: 5px; background: url("../img/off_all_check.png") 0 0 no-repeat; vertical-align: middle;}
.agreement .check_all input[type="checkbox"]:checked + label em{ background: url("../img/chk_all_check.png") 0 0 no-repeat; vertical-align: middle;}

.agreement .check_area input[type="checkbox"]{display: none;}
.agreement .check_area input[type="checkbox"] + label.consent em{display: inline-block; width: 18px; height: 18px; margin-right: 5px; background: url("../img/none_one_chk.png") 0 0 no-repeat; vertical-align: middle;}
.agreement .check_area input[type="checkbox"]:checked + label.consent em{ background: url("../img/chk_one_chk.png") 0 0 no-repeat; vertical-align: middle;}

.agreement .check_area ul{}
.agreement .check_area ul li{display: flex; justify-content: space-between;	height: 32px; line-height: 32px;}
.agreement .check_area ul li div{line-height: 32px;}
.agreement .check_area ul li div label{font-size: 15px;}

/* person_agreement  ================================== */

/* phone_person_agreement =============================== */
.phone_person_agreement .resend{font-size: 13px; font-weight: 500; color: var(--main_col_02);}
.phone_person_agreement .resend a{display: inline-block; font-weight: bold; border-bottom: 1px solid var(--main_col_02); padding-bottom: 1px;}

/* apt_part_wrap  // apt_part_01 // apt_part_02  // apt_address =============================== */
.apt_part_wrap{}
.apt_part_wrap .dash{margin-top: 190px;}
.apt_part_wrap .apt_search{width: 100%; height: 40px; position: relative;}
.apt_part_wrap .apt_search input{width: 100%; height: 100%; border: 1px solid var(--main_col_02); padding: 0 40px 0 10px; border-radius: 5px; box-sizing: border-box;}
.apt_part_wrap .apt_search input::placeholder{color: var(--gary_col_01); font-size: 13px;}
.apt_part_wrap .apt_search div{position: absolute; width: 40px; height: 40px; line-height: 41px; top: 0; bottom: 0; right: 0; margin: auto;}
.apt_part_wrap .apt_search div img{}

.apt_part_wrap .question_marker{color: var(--main_col_02);}
.apt_part_wrap .question_marker p{font-size: 18px; font-weight: bolder;}
.apt_part_wrap .question_marker p img{vertical-align: sub;}

.apt_part_wrap .caption{flex-direction: column; justify-content: initial; align-items: flex-start; font-size: 15px; line-height: 22px; height: auto;}
.apt_part_wrap .caption a{border-bottom: 1px solid var(--main_col_02);}

.apt_part_02{}
.apt_part_02 .scroll{height: 50vh; overflow-y: scroll;}
.apt_part_02 .search_apt_box{height: 100%; overflow-y: scroll;}
.apt_part_02 .search_apt_box li{display: flex; justify-content: space-between; align-items: center; padding: 14px 12px 15px 14px; border: 1px solid var(--gary_col_01); border-radius: 5px; margin-bottom: 5px;}
.apt_part_02 .search_apt_box li .apt_icon{display: flex;}
.apt_part_02 .search_apt_box li .apt_icon p{font-size: 13px;}
.apt_part_02 .search_apt_box li .apt_icon p span{font-size: 10px;}
.apt_part_02 .search_apt_box li.on{border: 1px solid var(--main_col_02);}
.apt_part_02 .search_apt_box li .radio_area input[type="radio"]{display: none;}
.apt_part_02 .search_apt_box li .radio_area input[type="radio"] + label em{display: inline-block; width: 24px; height: 24px; margin-right: 5px; background: url("../img/off_apt_chk.png") 0 0 no-repeat; vertical-align: middle;}
.apt_part_02 .search_apt_box li .radio_area input[type="radio"]:checked + label em{background: url("../img/on_apt_chk.png") 0 0 no-repeat; vertical-align: middle;}

/*  */

.apt_address{}
.apt_address .address_input{display: flex; justify-content: space-between;}
.apt_address .address_input input{width: 48%; height: 40px; border-radius: 5px; border: 1px solid var(--gary_col_01); padding: 0 12px; box-sizing: border-box;}
.apt_address .address_input input::placeholder{text-align: right;}
.apt_address .house{display: inline-block; border-radius: 5px; border: 1px solid var(--main_col_02); overflow: hidden;}
.apt_address .house li{padding: 7px 22px; color: var(--gary_col_01); font-weight: 500;}
.apt_address .house li.on{background-color: var(--main_col_02); color: var(--FFF_col_01);}

/* reset_password  // reset_password_01 // reset_password_02 // reset_password_fix_03 =============================== */
.reset_password .error{display: inline-block; color: var(--F00_col_01); font-size: 10px;}
.reset_password .btn_box_resend{}
.reset_password .btn_box_resend button{width: 100%; height: 37px; color: var(--main_col_02); background-color: var(--FFF_col_01); border: 1px solid var(--main_col_02); border-radius: 5px; font-weight: bold; font-size: 15px}

.reset_password_fix_03{width: 100%; background-color: var(--main_col_02);}
.reset_password_fix_03 .logo{padding-top: 20px;}
.reset_password_fix_03 .content_wrap .heading{font-size: 18px; line-height: 27px; color: var(--FFF_col_01);}
.reset_password_fix_03 .content_wrap .heading p{font-size: 15px; line-height: 22px; font-weight: 500;}

/* tutorial =============================== */
.tutorial{}
.tutorial .hdr_wrap{background-color: var(--FFF_col_01);}

.tutorial .swiper-container{}
.tutorial .swiper-container .swiper-wrapper{}
.tutorial .swiper-container .swiper-wrapper .swiper-slide{}
.tutorial .swiper-container .swiper-wrapper .swiper-slide div{}
.tutorial .swiper-container .swiper-wrapper .swiper-slide div img{}
.tutorial .swiper-container .swiper-wrapper .swiper-slide ul{}
.tutorial .swiper-container .swiper-wrapper .swiper-slide ul li{}
.tutorial .swiper-container .swiper-wrapper .swiper-slide ul li h3{display: inline-block; font-size: 23px; font-weight: bold;}
.tutorial .swiper-container .swiper-wrapper .swiper-slide ul li h3::after{content: ""; display: inline-block; position: relative; top: -15px; width: 100%; height: 12px; background: var(--main_col_01); z-index: -1;}
.tutorial .swiper-container .swiper-wrapper .swiper-slide ul li h3 span{}

.tutorial .swiper-container .swiper-wrapper .swiper-slide ul li p{line-height: 27px;color: var(--main_col_02); font-size: 18px; margin-bottom: 60px; font-weight: 500;}
.tutorial .swiper-container .swiper-wrapper .swiper-slide .btn_box_tutorial{margin-top: 120px;}
.tutorial .swiper-container .swiper-wrapper .swiper-slide .btn_box_tutorial button{width: 138px; height: 40px; color: var(--main_col_02); background-color: var(--main_col_01); border-radius: 5px; border: 0; font-size: 18px; font-weight: bold;}



/* splash // splash_01  // splash_02 =============================== */
.splash{width: 100%; height: 100vh; background-color: var(--main_col_02);}

.splash .content_wrap{position: relative; padding: 0;}
.splash .content_wrap .logo, .splash .content_wrap .s_logo{position: absolute; left: 0; right: 0; margin: auto;}
.splash .content_wrap .logo{top: 10%;}
.splash .content_wrap .s_logo{bottom: 10%;}

.splash_02{}
.splash_02 .content_wrap .logo, .splash_02 .content_wrap .s_logo{position:static;}
.splash_02 .content_wrap img{width: 100%; height: 100%;}
.splash_02 .content_wrap .logo{width: 134px; height: 83px; padding-top: 60px;}
.splash_02 .content_wrap .s_logo{width: 100px; height: 30px; margin-top: 35px;}
.splash_02 .content_wrap .scroll{height: 40vh; overflow-y: scroll;}
.splash_02 .content_wrap .scroll ul{}
.splash_02 .content_wrap .scroll ul li{width: 100%; padding: 18px 0; border: 5px solid var(--FFF_col_01); border-radius: 5px; background-color: var(--FFF_col_01);  color: var(--gary_col_01); font-size: 18px; font-weight: bold; box-sizing: border-box; box-shadow: 1px 5px 8px rgb(0 0 0 / 60%);}
.splash_02 .content_wrap .scroll ul li.on{background-color: #FFCC91; color: var(--main_col_02); border: 5px solid var(--main_col_01); box-sizing: border-box;}
.splash_02 .content_wrap .scroll ul li a{display: inline-block; width: 100%; height: 100%;}
.splash_02 .btn_box_splash{}
.splash_02 .btn_box_splash button{width: 138px; height: 40px; border: 0; border-radius: 5px; background-color: var(--main_col_01); color: var(--main_col_02); font-weight: bold; font-size: 18px; outline: none;}

/* main_wrap =============================== */
.main_wrap .hdr_wrap{height: 55px; background-color: var(--main_col_02);}
.main_wrap .hdr_wrap .header{width: 95%; height: 100%; line-height: 55px; display: flex; align-content: center; justify-content: space-between; margin: 0 auto;}
.main_wrap .hdr_wrap .header .hdr_logo{width: 33px; height: 55px; background-image: url("../img/apt_logo_03.png"); background-repeat: no-repeat; background-size: contain; background-position: center;}
.main_wrap .hdr_wrap .header .user_info{font-size: 12px; color: var(--main_col_01); line-height: 15px;}

.main_wrap .hdr_wrap .header .icon{width: 55px;}
.main_wrap .hdr_wrap .header .icon i{color: var(--gary_col_01); font-size: 20px;}
.main_wrap .hdr_wrap .header h3{color: var(--FFF_col_01);}

.main_wrap .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{bottom: 15px;}

.main_wrap{background-color: var(--FFF_col_01);}
.main_wrap .content_wrap .swiper-container{padding-top: 15px;}
.main_wrap .swiper-wrapper{ color: var(--main_col_02); border: 1px solid var(--main_col_02); border-radius: 10px; box-sizing: border-box;}
.main_wrap .swiper-wrapper .swiper-slide{width: 100%; height: 100%; color: var(--main_col_02);}
.main_wrap .swiper-wrapper .swiper-slide div{width: 100%; height: 157px;}
.main_wrap .swiper-wrapper .swiper-slide div h4{font-size: 18px; font-weight: bold;}
.main_wrap .swiper-wrapper .swiper-slide div p{font-size: 15px; font-weight: 500; line-height: 24px;}

.main_wrap .title{font-size: 18px; color: var(--main_col_02);}
.main_wrap .sub_title{display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--main_col_02);}
.main_wrap .sub_title div{font-size: 10px; color: var(--main_col_02);}

.ham_menu_wrap{display: none; position: absolute; top: 0; bottom: 0; right: 0; left: -100%; width: 90vw; height: 100vh; z-index: 200;}
.ham_menu_wrap .ham_haedar{position: relative; background-color: var(--main_col_02); width: 100%; height: 30%; display: flex; flex-direction: column;}
.ham_menu_wrap .ham_haedar .close{position: absolute; top: 10%; right: 2%; width: 11.76vw; height: 11.76vw; margin: auto;}

.ham_menu_wrap .ham_haedar .profile{}
.ham_menu_wrap .ham_haedar .profile .profile_img{width: 26.47vw; height: 26.47vw; border-radius: 50%; overflow: hidden; margin: 0 auto;}
.ham_menu_wrap .ham_haedar .profile .profile_img img{width: 100%; height: 100%;}
.ham_menu_wrap .ham_haedar .profile .me_profile{color: var(--FFF_col_01); font-size: 18px; font-weight: bold;}
.ham_menu_wrap .ham_haedar .profile .apt_name{color: var(--gary_col_01); font-size: 10px; font-weight: bold;}

.ham_menu_wrap .menu_aera{width: 100%; height: 70%; background-color: var(--FFF_col_01);}
.ham_menu_wrap .menu_aera .menu_area_inner{position: relative; width: 76.47vw; height: 100%; margin: 0 auto;}
.ham_menu_wrap .menu_aera .menu_area_inner .user_info{width: 100%; padding-top: 12.76vw;}
.ham_menu_wrap .menu_aera .menu_area_inner .user_info li{width: 100%; line-height: 5.88vw; font-size: 13px;}
.ham_menu_wrap .menu_aera .menu_area_inner .user_info li span{display: inline-block; width: 62%; color: var(--gary_col_01);}
.ham_menu_wrap .menu_aera .menu_area_inner .user_info li strong{display: inline-block; width: 38%; color: var(--main_col_02);}

.ham_menu_wrap .menu_aera .menu_area_inner .menu_category{width: 100%;}
.ham_menu_wrap .menu_aera .menu_area_inner .menu_category ul{display: flex; flex-wrap: wrap;}
.ham_menu_wrap .menu_aera .menu_area_inner .menu_category ul li{width: 33.33%; height: 20.59vw;}
.ham_menu_wrap .menu_aera .menu_area_inner .menu_category ul li .img_area{width: 100%; height: 11.76vw;}
.ham_menu_wrap .menu_aera .menu_area_inner .menu_category ul li .img_area img{}
/* 
.ham_menu_wrap .menu_aera .menu_category ul li:nth-child(1) div{width: 70px; height: 70px; background-image: url("../img/ham_apt.png"); background-position: center; background-repeat: no-repeat; background-size:auto; margin: 0 auto;}
.ham_menu_wrap .menu_aera .menu_category ul li:nth-child(2) div{width: 70px; height: 70px; background-image: url("../img/ham_notice.png"); background-position: center; background-repeat: no-repeat; background-size:auto; margin: 0 auto;}
.ham_menu_wrap .menu_aera .menu_category ul li:nth-child(3) div{width: 70px; height: 70px; background-image: url("../img/ham_alarm.png"); background-position: center; background-repeat: no-repeat; background-size:auto; margin: 0 auto;}
.ham_menu_wrap .menu_aera .menu_category ul li:nth-child(4) div{width: 70px; height: 70px; background-image: url("../img/ham_register.png"); background-position: center; background-repeat: no-repeat; background-size:auto; margin: 0 auto;}
.ham_menu_wrap .menu_aera .menu_category ul li:nth-child(5) div{width: 70px; height: 70px; background-image: url("../img/ham.png"); background-position: center; background-repeat: no-repeat; background-size:auto; margin: 0 auto;}
.ham_menu_wrap .menu_aera .menu_category ul li:nth-child(6) div{width: 70px; height: 70px; background-image: url("../img/ham_visitlist.png"); background-position: center; background-repeat: no-repeat; background-size:auto; margin: 0 auto;}
.ham_menu_wrap .menu_aera .menu_category ul li:nth-child(7) div{width: 70px; height: 70px; background-image: url("../img/ham_call.png"); background-position: center; background-repeat: no-repeat; background-size:auto; margin: 0 auto;}
.ham_menu_wrap .menu_aera .menu_category ul li:nth-child(8) div{width: 70px; height: 70px; background-image: url("../img/ham_lot.png"); background-position: center; background-repeat: no-repeat; background-size:auto; margin: 0 auto;}
.ham_menu_wrap .menu_aera .menu_category ul li:nth-child(9) div{width: 70px; height: 70px; background-image: url("../img/ham_community.png"); background-position: center; background-repeat: no-repeat; background-size:auto; margin: 0 auto;}
*/
.ham_menu_wrap .menu_aera .menu_category ul li a{display: block; font-size: 10px; font-weight: 500; line-height: 10px; color: var(--gary_col_02);}
.ham_menu_wrap .menu_aera .setting{position: absolute; top: 2%; right: 0%; margin: auto;}
.ham_menu_wrap .menu_aera .setting a{color: var(--gary_col_02); font-size: 12px;}
.ham_menu_wrap .menu_aera .setting a img{vertical-align: -3px;}

/* welcome_wrap =============================== */
.welcome_wrap{}
.welcome_wrap h4{font-size: 24px; margin-top: 100px;}
.welcome_wrap h4 span{color: var(--main_col_01);}
.welcome_wrap p{line-height: 22px; color: var(--main_col_02);}
.welcome_wrap .questions{color: var(--main_col_02); font-size: 15px; font-weight: 700;}
.welcome_wrap .call_area{width: 100%;}
.welcome_wrap .call_area li{display: flex; justify-content: space-between; align-items: center; width: 100%; height: 64px; padding: 0 14px; box-sizing: border-box; border-radius: 5px; box-shadow: 1px 4px 3px rgba(0, 0, 0, 0.30);}
.welcome_wrap .call_area li div span{display: inline-block;}
.welcome_wrap .call_area li div span:first-child{font-size: 10px;}
.welcome_wrap .call_area li div span:last-child{font-size: 18px; font-weight: bold; margin-top: 3px;}
.welcome_wrap .call_area li .call{}

/* setting_menu // setting_menu_push // setting_menu_area // setting_access =============================== */
.setting_menu_area{width: 100%; height: 100vh; background-color: rgba(163, 170, 175, 0.2); margin-top: 55px;}
.setting_menu_area .setting_menu_list{}
.setting_menu_area .setting_menu_list .big_menu_wrap{}
.setting_menu_area .setting_menu_list .big_menu_wrap .big_title{font-size: 13px; font-weight: normal; color: rgb(163, 170, 175); padding: 0 20px; height: 40px; line-height: 40px;}
.setting_menu_area .setting_menu_list .big_menu_wrap .small_menu_wrap{background-color: var(--FFF_col_01);}
.setting_menu_area .setting_menu_list .big_menu_wrap .small_menu_wrap .small_menu{line-height: 60px; padding: 0 20px; overflow: hidden; font-weight: 500; color: #5B6471;}
.setting_menu_area .setting_menu_list .big_menu_wrap .small_menu_wrap .small_menu:not(:last-child){border-bottom: 2px solid rgba(154, 154, 154, 0.14);}
.setting_menu_area .setting_menu_list .big_menu_wrap .small_menu_wrap .small_menu a{display: inline-block; width: 100%; height: 100%; color: var(--main_col_02);}
.setting_menu_area .setting_menu_list .big_menu_wrap .small_menu_wrap .small_menu a span{float: right;}

.setting_menu_area .btn_box{}
.setting_menu_area .btn_box button{width: 124px; background-color: var(--main_col_02); color: var(--FFF_col_01); font-size: 15px; font-weight: bold;}

.setting_access_area{}
.setting_access_area .setting_menu_list{}
.setting_access_area .setting_menu_list .big_menu_wrap{}
.setting_access_area .setting_menu_list .big_menu_wrap .small_menu_wrap{}
.setting_access_area .setting_menu_list .big_menu_wrap .small_menu_wrap .small_menu{height: 85px; line-height: 1;}
.setting_access_area .setting_menu_list .big_menu_wrap .small_menu_wrap .small_menu a{display: flex; justify-content: space-between; align-items: center;}
.setting_access_area .setting_menu_list .big_menu_wrap .small_menu_wrap .small_menu a b{line-height: 18px; font-size: 15px; color: #5B6471;}
.setting_access_area .setting_menu_list .big_menu_wrap .small_menu_wrap .small_menu a b span{font-size: 13px;}
.setting_access_area .setting_menu_list .big_menu_wrap .small_menu_wrap .small_menu a span{float: initial;}

.setting_access_area .btn_box{margin-top: 260px;}

/* re_setting_password =============================== */
.re_setting_password .text_area{}
.re_setting_password .text_area label{font-size: 12px;}
.re_setting_password .text_area input{width: 100%; height: 45px; border: 1px solid var(--gary_col_01); border-radius: 5px; padding: 0 10px; box-sizing: border-box;}
.re_setting_password .text_area input::placeholder{font-size: 13px; color: rgba(170, 179, 191, 0.5);}
.re_setting_password .btn_box{}
.re_setting_password .btn_box button{width: 124px; height: 45px; color: var(--FFF_col_01); background-color: var(--main_col_02); font-size: 15px; font-weight: bold;}

/* visit_car =============================== */
.visit_car{}

.visit_car .info_area{border: 1px solid var(--main_col_02); border-radius: 5px; box-shadow: 3px 3px 6px #ccc;}
.visit_car .info_area ul{padding: 35px 20px; box-sizing: border-box;}
.visit_car .info_area ul li{display: flex; justify-content: space-between; padding: 10px 0;}
.visit_car .info_area ul li span{display: inline-block; text-align: left; width: 50%;}
.visit_car .info_area ul li span.info_caption{color: var(--gary_col_01);}
.visit_car .info_area ul li span.info_user{color: var(--main_col_02);}
.visit_car .text_refuse{width: 286px; display:none; margin: 0 auto; padding: 55px 0 0 0;}
.visit_car .text_refuse textarea{width: 100%; height: 252px; padding: 10px; border: 1px solid var(--main_col_02); box-shadow: 3px 3px 6px #ccc; border-radius: 5px; box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif;}
.visit_car .text_refuse button{width: 100%; height: 50px; background-color: var(--main_col_02); color: var(--FFF_col_01); font-size: 18px; font-weight: bold; border-radius: 5px; border: none;}

.visit_car .alarm_text{margin-top: 25px; font-size: 15px; color: var(--main_col_02); font-weight: 500; line-height: 24px;}
.visit_car .btn_box{position: static; overflow: hidden; position: flex; justify-content: space-between;}
.visit_car .btn_box button{width: 46%; background-color: var(--main_col_02); color: var(--FFF_col_01);}
.visit_car .btn_box_w{position: static; overflow: hidden;}
.visit_car .btn_box_w button{width: 100%; background-color: var(--main_col_02); color: var(--FFF_col_01);}

.visit_car .info_area p:first-child{color: var(--main_col_02); font-size: 16px; font-weight: bold;}
.visit_car .info_area p:last-child{color: var(--main_col_02); padding: 25px 0; font-size: 15px; font-weight: bold; line-height: 20px;}
.visit_car .info_area p .date{display: inline-block; margin-bottom: 150px;}

/* me_info =============================== */
.me_info{}
.me_info .me_content{width: 286px; margin: 120px auto 0;}
.me_info .content_wrap .me_info_img{margin-top: 120px;}
.me_info .me_info_img img{vertical-align: top;}
.me_info ul{margin-top: 75px;}
.me_info ul li{width: 100%; padding: 8px 0; overflow: hidden;}
.me_info ul li div{float: left; display: inline-block; width: 50%; font-size: 15px; color: var(--main_col_02);}
.me_info ul li div:first-child{}
.me_info ul li div:last-child{font-weight: bold;}
.me_info ul li hr{border: 1px solid var(--main_col_02);}

/* car_status // car_manage =============================== */

/* 차량등록 현황 */
.car_status{}
.car_status .content_wrap{height: 0;}
.car_status .content_wrap h4{font-size: 24px; font-weight: bold; color: var(--main_col_02); line-height: 36px;}
.car_status .content_wrap .car_info_wrap{height: 50vh;}
.car_status .content_wrap .car_info_wrap .car_info{border: 3px solid var(--main_col_02); background: var(--FFF_col_01); border-radius: 5px; padding: 15px 25px; box-sizing: border-box;}
.car_status .content_wrap .car_info_wrap .car_info > div{width: 236px; margin: 0 auto;}
.car_status .content_wrap .car_info_wrap .car_info .car_num{color: var(--main_col_01); font-size: 18px; font-weight: bold;}
.car_status .content_wrap .car_info_wrap .car_info ul{}
.car_status .content_wrap .car_info_wrap .car_info ul li{text-align: right; padding: 3px 0; font-size: 15px;}

.car_status .content_wrap .btn_box{position: static;}
.car_status .content_wrap .btn_box button{background-color: var(--main_col_02); color: var(--FFF_col_01); font-size: 15px;}
.car_status .content_wrap p{font-size: 10px; font-weight: 500;  color: var(--main_col_02);}

/* 차량등록 관리 */
.car_manage{}
.car_manage .content_wrap{}
.car_manage .content_wrap h4{font-size: 18px; font-weight: bold; color: var(--main_col_02); line-height: 27px;}
.car_manage .content_wrap .car_info{position: relative; margin-top: 280px; border: 3px solid var(--main_col_02); border-radius: 5px; padding: 15px 25px; box-sizing: border-box;}
.car_manage .content_wrap .car_info p{position: absolute; position: absolute; top: -25px; left: 0; margin: auto; font-size: 15px; font-weight: 500;}
.car_manage .content_wrap .car_info p img{}
.car_manage .content_wrap .car_info > div{width: 236px; margin: 0 auto;}
.car_manage .content_wrap .car_info .car_num{color: var(--main_col_01); font-size: 18px; font-weight: bold;}
.car_manage .content_wrap .car_info ul{}
.car_manage .content_wrap .car_info ul li{text-align: right; padding: 3px 0; font-size: 15px;}
.car_manage .content_wrap p{font-size: 13px; font-weight: 500;}

/* notice_wrap =============================== */
.notice_wrap{}
.notice_wrap .notice_all_write{width: 100%; height: 35px; line-height: 35px; padding: 0 22px; margin-top: 55px; font-size: 13px; color: var(--main_col_02); text-align: right; box-sizing: border-box; background-color: var(--gary_col_01);}
.notice_wrap .scroll{}
.notice_wrap .scroll ul{}
.notice_wrap .scroll ul li{position: relative; display: flex;align-items: center; width: 100%; height: 85px; box-shadow: 1px 4px 3px rgba(163, 170, 175, 0.10); padding: 0 22px 0 26px; overflow: hidden; box-sizing: border-box; color :var(--gary_col_01);}
.notice_wrap .scroll ul li .close{position: absolute; width: 18px; height: 18px; top: 15px; right: 15px; margin: auto;}
.notice_wrap .scroll ul li.on{color: var(--main_col_02);}
.notice_wrap .scroll ul li > div, .notice_wrap .scroll ul li h5{margin-right: 15px;}
.notice_wrap .scroll ul li div img{}
.notice_wrap .scroll ul li h5{font-size: 15px;}
.notice_wrap .scroll ul li h5 span{display: inline-block; font-size: 13px; font-weight: 500;}
.notice_wrap .scroll ul li .date_area{font-size: 10px;line-height: 15px; color :var(--gary_col_01); margin: 0;}

/* notice_and_push  // alarm_wrap =============================== */
.notice_and_push .content_wrap{margin-top: 105px; padding: 0;}
.notice_and_push .content_wrap .heading{padding-top: 15px; font-size: 18px; font-weight: bold;}
.notice_and_push .content_wrap .heading p{font-size: 15px; font-weight: 500;}

.notice_and_push .table_area{}
.notice_and_push .table_area table{}
.notice_and_push .table_area table thead{border-top: 2px solid var(--main_col_02);}
.notice_and_push .table_area table thead tr{height: 25px; background-color: rgba(163, 170, 175, 0.2);}
.notice_and_push .table_area table thead tr th{font-size: 10px;}

.alarm_wrap{background-color: var(--gary_col_01);}
.alarm_wrap .content_wrap{background-color: var(--gary_col_01); height: initial; padding-bottom: 30px; padding-top: 120px;}
.alarm_wrap .content_wrap .alarm_area{padding-top: 15px;}
.alarm_wrap .content_wrap .alarm_area .alarm_msg{}
.alarm_wrap .content_wrap .alarm_area .alarm_msg .massage{position: relative; display: flex; justify-content: space-between; width: 100%;}
.alarm_wrap .content_wrap .alarm_area .alarm_msg .massage .apt_profile{width: 13%; height: 13%; margin-top: -10px; border-radius: 50%; overflow: hidden;}
.alarm_wrap .content_wrap .alarm_area .alarm_msg .massage .apt_profile img{width: 100%; height: 100%;}
.alarm_wrap .content_wrap .alarm_area .alarm_msg .massage .alarm_content{width: 70%; background-color: var(--FFF_col_01); padding: 21px 20px 23px 20px; border-radius: 15px; color: var(--main_col_02); box-shadow: 3px 6px 6px rgba(163, 170, 175, 0.10);}
.alarm_wrap .content_wrap .alarm_area .alarm_msg .massage .alarm_content p{font-weight: bold;}
.alarm_wrap .content_wrap .alarm_area .alarm_msg .massage .alarm_content p div{font-weight: normal;}
.alarm_wrap .content_wrap .alarm_area .alarm_msg .massage .alarm_content .btn_box_detail{}
.alarm_wrap .content_wrap .alarm_area .alarm_msg .massage .alarm_content .btn_box_detail button{width: 100%; height: 30px; background-color: rgba(163, 170, 175, 0.2); border-radius: 7px; border: 0; font-size: 13px; font-weight: 700; outline: none;}


/* notice_write_wrap =============================== */
.notice_write_wrap{}
.notice_write_wrap .title{display: flex; flex-direction: column; align-items: center; padding: 10px 0;}
.notice_write_wrap .title h4{width: 90%; font-size: 16px; font-weight: bold; line-height: 22px;}
.notice_write_wrap .title span{display: inline-block; font-size: 12px; color: var(--gary_col_01); text-align: center; align-self: flex-end;}
.notice_write_wrap .notice_content{height: 50vh; overflow-y: scroll;}
.notice_write_wrap .notice_content p{line-height: 22px; padding: 10px; box-sizing: border-box;}
.notice_write_wrap .btn_box{position: static; }
.notice_write_wrap .btn_box button{width: 124px; height: 45px; background-color: var(--main_col_02); color: var(--FFF_col_01);}

 /* app_info_wrap =============================== */
.app_info_wrap{}
.app_info_wrap .logo{margin-top: 120px;}
.app_info_wrap .logo img{}
.app_info_wrap .app_version{margin-top: 70px;}
.app_info_wrap .app_version div{font-size: 13px; color: var(--gary_col_01);}

.app_info_wrap .setting_menu_area{position: fixed; bottom: 0; height: 180px; border-top: 2px solid rgba(154, 154, 154, 0.14);}

/* user_out_wrap =============================== */
.user_out_wrap .heading{}
.user_out_wrap .heading p{font-size: 15px; font-weight: 700; line-height: 22px;}
.user_out_wrap .btn_box{position: static;}
.user_out_wrap .btn_box button{width: 124px; background-color: var(--main_col_02); color: var(--FFF_col_01); font-size: 15px; font-weight: bold;}

/* visit_car_register // visit_car_register_01 // visit_car_register_02  // visit_car_register_03 =============================== */
.visit_car_wrap{}
.visit_car_wrap .visit_car_logo{}
.visit_car_wrap .visit_car_logo img{}
.visit_car_wrap div{}

.visit_car_wrap div .user_info{font-size: 18px; font-weight: bold; line-height: 27px; color: var(--main_col_02);}

.visit_car_wrap div .mileage{}
.visit_car_wrap div .mileage span{font-size: 18px; color: var(--main_col_02); font-weight: 700; line-height: 22px;}
.visit_car_wrap div .mileage span:nth-of-type(2){color: var(--main_col_01);}
.visit_car_wrap div .mileage a{display: block; font-size: 14px; color: var(--gary_col_01);}
.visit_car_wrap .btn_box_w{}
.visit_car_wrap .btn_box_w button{width: 100%; height: 50px; border: 4px solid var(--main_col_02); border-radius: 5px; background-color: var(--FFF_col_01); box-sizing: border-box; font-size: 18px; font-weight: bold;}

.visit_car_register{}
.visit_car_register .scroll{}
.visit_car_register .scroll .visit_car_list{}
.visit_car_register .scroll .visit_car_list .car_log_area{position: relative; display: flex; padding: 20px 24px 17px 16px; border: 2px solid var(--main_col_02); box-sizing: border-box; border-radius: 5px; box-shadow: 1px 4px 3px rgba(163, 170, 175, 0.10);}
.visit_car_register .scroll .visit_car_list .car_log_area .edit{position: absolute; top: 5px; right: 12px;}
.visit_car_register .scroll .visit_car_list .car_log_area .edit a{display: inline-block; font-size: 14px; width: 30px; height: 30px; text-align: right;}
.visit_car_register .scroll .visit_car_list .car_log_area .edit a:last-child{margin-left: 10px; color: var(--main_col_01);}
.visit_car_register .scroll .visit_car_list .car_log_area .num{width: 15%; font-size: 23px; font-weight: bolder; color: var(--main_col_01);}

.visit_car_register .scroll{height: 80%; overflow-y: scroll;}
.visit_car_register .scroll .visit_car_list .car_log_area .visit_log{width: 85%;}
.visit_car_register .scroll .visit_car_list .car_log_area .visit_log .car_num{font-size: 20px; font-weight: bolder; color: var(--main_col_02); padding: 0;}
.visit_car_register .scroll .visit_car_list .car_log_area .visit_log li{width: 100%; height: 30px; line-height: 30px;}
.visit_car_register .scroll .visit_car_list .car_log_area .visit_log li div{display: inline-block; font-size: 13px; font-weight: 700; width: 40%;}
.visit_car_register .scroll .visit_car_list .car_log_area .visit_log li div:first-child{color: var(--gary_col_01);}
.visit_car_register .scroll .visit_car_list .car_log_area .visit_log li div:last-child{color: var(--main_col_02); width: 60%;}

.visit_car_register .btn_box{}
.visit_car_register .btn_box img{vertical-align: -2px;}
.visit_car_register .btn_box button{width: 133px; height: 35px; color: var(--FFF_col_01); background-color: var(--main_col_02); border-radius: 0; font-size: 15px;}

/* car_call_wrap =============================== */
.car_call_wrap{}
.car_call_wrap .content_wrap{}
.car_call_wrap .car_call_img{padding-top: 85px;}
.car_call_wrap .car_call_img img{}
.car_call_wrap .search_area{position: relative; margin-top: 105px;}
.car_call_wrap .search_area input{width: 98%; height: 48px; margin: 0 auto; padding: 0 10px; border: 0.5px solid var(--main_col_02); border-radius: 5px; box-sizing: border-box; outline: none;}
.car_call_wrap .search_area input::placeholder{font-size: 15px; font-weight: bold; color: var(--gary_col_01)}
.car_call_wrap .search_area .search_icon{position: absolute; top: 0; right: 15px; bottom: 0; margin: auto; width: 23px; height: 23px;}
.car_call_wrap .search_area .search_icon img{}
.car_call_wrap .btn_box{position: static;}
.car_call_wrap .btn_box button{width: 108px; height: 42px; border-radius: 5px; background-color: var(--main_col_02); color:var(--FFF_col_01); font-size: 15px; font-weight: 700;}

.car_call_wrap .content_wrap .car_visit_info{width: 200px; border: 1px solid var(--main_col_02); border-radius: 5px; margin-left: auto; margin-right: auto;}

.car_call_wrap .content_wrap .car_number{height: 47px; line-height: 47px; margin-top: 90px; font-size: 23px; font-weight: bold; color: var(--main_col_02);}

.car_call_wrap .content_wrap .visit_info{padding: 21px 24px; box-sizing: border-box; font-size: 15px; font-weight: 700; color: var(--main_col_02);}

.car_call_wrap .content_wrap .request{display: flex; justify-content: space-between; margin-top: 120px;}
.car_call_wrap .content_wrap .request .icon{width: 80px; height: 80px;}
.car_call_wrap .content_wrap .request .icon img{}
.car_call_wrap .content_wrap .request .icon a{display: inline-block; width: 100%; height: 100%;}

.car_call_wrap .visit_title{margin-top: 110px;}
.car_call_wrap .send_area{position: relative; width: 246px; margin-left: auto; margin-right: auto;}
.car_call_wrap .send_area .text_count{position: absolute; top: 10px; right: 10px; margin: auto; font-size: 10px; color: var(--gary_col_01);}
.car_call_wrap .send_area .text_count span{}
.car_call_wrap .send_area textarea{width: 100%; padding: 15px 40px; box-sizing: border-box; color: var(--main_col_02); font-family: 'Noto Sans KR', sans-serif;}
.car_call_wrap .send_area textarea::placeholder{font-family: 'Noto Sans KR', sans-serif; color: var(--main_col_02);}

/* apt_intro =============================== */
.apt_intro{height: 100vh; background-color: rgba(163, 170, 175, 0.2); padding-bottom: 50px;}
.apt_intro .intro_img{padding-top: 120px;}
.apt_intro .intro_img p img{width: 90%;}

.apt_intro .call_area{padding-top: 120px;}
.apt_intro .call_area li{display: flex; justify-content: space-between; align-items: center; width: 312px; height: 58px; padding: 0 13px;  margin: 0 auto 15px; background-color: var(--FFF_col_01); border-radius: 5px; box-shadow: 1px 4px 3px rgba(0, 0, 0, 0.30);}
.apt_intro .call_area li .part{font-size: 15px; font-weight: bold;}
.apt_intro .call_area li .number{font-size: 15px; font-weight: 700;}
.apt_intro .call_area li .number em{display: inline-block; width: 29px; height: 29px;}
.apt_intro .call_area li .number em img{vertical-align: middle;}

/* visit_car_register_wrap =============================== */
.visit_car_register_wrap{}
.visit_car_register_wrap .btn_box{position: initial;}

/* calender select box */
.dtpicker-mobile .dtpicker-content{width: 90%; border-radius: 10px;}
.dtpicker-buttonCont .dtpicker-button{border-radius: 5px;}

/* visit_mileage_wrap =============================== */
.visit_mileage_wrap{padding-bottom: 50px;}
.visit_mileage_wrap .mileage{margin-top: 120px;}
.visit_mileage_wrap .mileage span{display: inline-block; font-size: 18px; font-weight: 700; padding: 3px 0;}
.visit_mileage_wrap .mileage span ~ span{color: var(--main_col_01);}

.visit_mileage_wrap .term_view{width: 330px; display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; font-size: 12px;}
.visit_mileage_wrap .term_view .count{color: var(--main_col_02);}
.visit_mileage_wrap .term_view .count span{color: var(--main_col_01); font-weight: bold;}
.visit_mileage_wrap .term_view .term_date{color: var(--main_col_02);}
.visit_mileage_wrap .term_view .term_date img{vertical-align: 1px;}

.visit_mileage_wrap hr{border: 2px solid rgba(163, 170, 175, 0.2);}
.visit_mileage_wrap .content_area{width: 330px; margin-left: auto; margin-right: auto;}
.visit_mileage_wrap .term{display: table; width: 100%; height: 25px; table-layout: fixed;}
.visit_mileage_wrap .term li{display: table-cell; vertical-align: top; width: 25%; line-height: 25px; color: var(--gary_col_01); font-size: 10px;}
.visit_mileage_wrap .term li button{display: block; width: 100%; height: 100%; border: 1px solid var(--gary_col_01); background-color: var(--FFF_col_01); font-size: 10px; color: var(--gary_col_01);}
.visit_mileage_wrap .term li:first-child button{border-radius: 2px 0 0 2px;}
.visit_mileage_wrap .term li:last-child button{border-radius: 0 2px 2px 0;}
.visit_mileage_wrap .term li button.on{border: 1px solid var(--main_col_01); color: var(--main_col_01); font-weight: bold;}

.visit_mileage_wrap .calendar_input_area{}
.visit_mileage_wrap .calendar_input_area .calendar_select{display: flex; justify-content: space-between; height: 22px;}
.visit_mileage_wrap .calendar_input_area .calendar_select span{width: 6%; text-align: center;}
.visit_mileage_wrap .calendar_input_area .calendar_select .calendar{position: relative; width: 45%; height: 100%;}
.visit_mileage_wrap .calendar_input_area .calendar_select .calendar input{width: 100%; height: 100%; box-sizing: border-box; border: 0;  outline: none;}
.visit_mileage_wrap .calendar_input_area .calendar_select .calendar label{}
.visit_mileage_wrap .calendar_input_area .calendar_select .calendar label em{position: absolute; top: 0; right: 0; bottom: 0; margin: auto; display: inline-block; width: 14px; height: 16px; background-image: url("../img/calendar.png");}
.visit_mileage_wrap .calendar_input_area span{}

.visit_mileage_wrap .btn_box{position: static;}
.visit_mileage_wrap .btn_box button{height: 40px; background-color: var(--FFF_col_01); color: var(--main_col_02); border: 1px solid var(--main_col_02); border-radius: 3px; font-weight: 700; font-size: 15px;}

.visit_mileage_wrap .wording{color: var(--gary_col_01); font-size: 10px;}

.visit_mileage_wrap .table_area{}
.visit_mileage_wrap .table_area table{}
.visit_mileage_wrap .table_area table tr{}
.visit_mileage_wrap .table_area table tr th{color: var(--gary_col_01); font-size: 10px; font-weight: normal;}
.visit_mileage_wrap .table_area table tr td{text-align: center; font-weight: bold; color: var(--main_col_02);}
.visit_mileage_wrap .table_area table thead{}
.visit_mileage_wrap .table_area table thead tr{height: 40px;}
.visit_mileage_wrap .table_area table thead tr th{}
.visit_mileage_wrap .table_area table tbody{border: 0;}
.visit_mileage_wrap .table_area table tbody tr{height: 60px;}
.visit_mileage_wrap .table_area table tbody tr td{}



















/**/
/* @media all and (min-width: 480px){
} */