.main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; left: 0; top: 0; width: 100%; min-height: 97%; padding-bottom: 22.92vw; background-color: #5ea66a; }

.main_contents { position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; padding: 8.94vw 5.56vw 0; border-radius: 6.67vw 6.67vw 0 0; background-color: #fff; }


.main_contents .info_box { display: flex; justify-content: space-between; align-items: center; padding-right: 4.86vw; margin-bottom: 1vw;}
.main_contents .info_box .btn_commute { display: inline-block; background: url(../img/ico_clock.png) no-repeat 3vw center; background-size: auto 3.06vw; border: 1px solid #5ea66a; height: 6.11vw; padding: 0 5vw 0 8vw; border-radius: 3.19vw; color: #111; font-size: 2.78vw; }

.main_contents .manage_commute { display: none; position: relative; border: 1px solid rgb(206, 206, 206); border-radius: 3vw; background-color: rgb(245, 245, 245); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); position: absolute; left: 9.56vw; top: 28vw; width: 81vw; padding: 1.5vw 2.5vw; box-sizing: border-box; z-index: 1;; }
.main_contents .manage_commute strong { display: block; margin-bottom: 1.5vw; text-align: center; color: #111; font-size: 2.78vw; font-weight: normal }
.main_contents .manage_commute div { display: flex; justify-content: space-between; height: 5.5vw; }
.main_contents .manage_commute div + div { margin-top: 1vw;}
.main_contents .manage_commute div input { width: 29%; border: 1px solid rgb(206, 206, 206); border-radius: 1.5vw; background: #fff; text-align: center; font-size: 2.78vw;}
.main_contents .manage_commute div button { width: 19%; background: #5ea66a; border-radius: 1.5vw; color: #fff; font-size: 2.78vw; }
.main_contents .manage_commute div button:last-child { background: #6b6b6b;}
.main_contents .manage_commute .btn_close { position: absolute; right: 3vw; top: 1.7vw; width: 4vw; height: 4vw; background: url(../img/btn_close.png) no-repeat center; background-size: 2.5vw; /* outline: 1px solid red; */}

.main_contents .date_box { padding-left: 6.39vw; color: #747474; font-size: 4.58vw; }

.main_contents .date_box strong { font-family: 'Roboto'; }

.main_contents .user_box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 4.86vw 0 6.39vw; }

.main_contents .user_box p { color: #747474; font-size: 3.33vw; }

.main_contents .user_box p em { color: #000; }

.main_contents .user_box > ul { display: inline-block; border: 1px solid #c8c8c8; border-radius: 3.19vw; }

.main_contents .user_box > ul li { float: left; }

.main_contents .user_box > ul li + li { border-left: 1px solid #c8c8c8; }

.main_contents .user_box > ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 6.11vw; padding: 0 3.33vw; color: #747474; font-size: 2.78vw; }

.main_contents .user_box > ul li a img.setting { height: 3.06vw; }

.main_contents .main_btns { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}

.main_contents .main_btns li { width: 25%; margin: 4.94vw 0; text-align: center; }

.main_contents .main_btns li a { display: block; }

.main_contents .main_btns li img { height: 9.72vw; }

.main_contents .main_btns li p { margin-top: 2.08vw; color: #000; font-size: 3.75vw; }

.main_foot { position: absolute; left: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 22.92vw; padding: 0 5.56vw; border-top: 1px solid #d2d2d2; background-color: #fff; }

.main_foot li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.main_foot li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.main_foot li img { height: 6.67vw; }

.main_foot li p { margin-top: 2.78vw; color: #292929; font-size: 3.33vw; text-align: center; word-break: keep-all; }