@charset "utf-8";

/*---------- common
 ----------*/

/* btn */
.btn,
.btn_bottom {overflow: hidden; margin: 20px 0;}
.btn ul li {float: left; width: calc(100%/2 - 5px); text-align: center;}
.btn ul li:first-child {margin-right: 10px;}
.btn ul li a {display: block; color: #fff; line-height: 28px; border-radius: 5px;}
.btn ul li a:hover,
.btnTxt:hover {text-decoration: underline;}

.btn_bottom ul li { height: 34px; background-color: #f3442d; border-radius: 10px !important;}
.btn_bottom ul li a {line-height: 34px;}

.btnTxt {display: inline-block; padding: 0 12px; color: #fff !important; border-radius: 15px; height: 25px; line-height: 27px; font-size: 0.768rem;}


.col_bgG {background-color: #68b919;}
.col_bgR {background-color: #d12323;}
.col_bgGr {background-color: #ededed; color: #000 !important;}
.col_bgGr2 {background-color: #9d9d9d;}

/*---------- mainPage
 ----------*/

/** common **/
#wrap {width: 100%; margin: 0 auto;}
.section {padding-bottom: 20px; border-bottom: 1px solid #eee;}
h2.title {font-size: 1.01rem; color: #212121; padding-bottom: 10px; line-height: 1;}
h2.title span.col_r {color: #ee2d24; padding-left: 3px;}
a.more {position: absolute; top: -2px; right: 0; width: 19px; height: 19px; background: url("../images/more_icon.png") #29296d 50% 50% no-repeat; border-radius: 50%;}
.bg {width: 100%; padding: 10px; background-color: #e7eaf1; border-radius: 5px;}

/** header **/
header {position: relative; width: 100%; height: 160px; background: linear-gradient(35deg, #ee2d24 45%, #fb6e3d 100%); padding: 40px 20px 0;}
.header_top h1 {display: inline-block;}
.header_top p {color: #fff; padding-top: 10px; line-height: 1; font-size: 0.87rem;}
.header_top p span {font-weight: 600; padding-left: 2px;}
.logout {position: absolute; top: 37px; right: 20px;}

/** main **/
.main,
.sub_main {position: relative; margin-top: -60px; padding: 0 20px;}

.back {position: absolute; top: 0; right: 20px; color: #fff !important; opacity: 0.5; font-size: 0.87rem;}
.back:hover,
.back.on {opacity: 1;}
.back img {vertical-align: inherit; padding-left: 2px;}

/* section01 */
.section01 .tab_menu {overflow: hidden;}
.section01 .tab_menu li {display: inline-block; float: left; padding: 0 10px;}
.section01 .tab_menu li:first-child {padding: 0 10px 0 0;}
.section01 .tab_menu li a {color: #fff; opacity: 0.5; font-size: 0.87rem;}
.section01 .tab_menu li a:hover,
.section01 .tab_menu li.active a {opacity: 1;}
.section01 .tab_content {height: 118px; margin-top: 10px;}
.section01 .tab_content ul li {position: relative; display: inline-block; float: left; width: calc(100%/3 - 7px); height: 98px; text-align: center; padding: 25px 0 15px; margin-right: 10px; border-radius: 5px; background-color: #fff; box-shadow: 0 2px 11px #d7d7d7;}
.section01 .tab_content ul li:last-child {margin-right: 0;}
.section01 .tab_content ul li p {font-size: 1.7rem; font-weight: 600; line-height: 1;}
.section01 .tab_content ul li p.all {color: #ed8c3a;}
.section01 .tab_content ul li p.complete {color: #4242dd;}
.section01 .tab_content ul li p.No_complete {color: #ee2d24;}
.section01 .tab_content ul li span {display: inline-block; font-weight: 600; padding-top: 15px; line-height: 1; font-size: 0.87rem;}
.section01 .tab_content ul li a {position: absolute; top: 10px; right: 10px;}

/* section02 */
.section02 .center {height: 200px;}
.section02 .search_box {position: relative; width: 100%;}
.section02 .search_box .search_box_wrap {height: 30px; width: 100%;}
.section02 .search_box .search_box_wrap .search_select {position: absolute; top: 0; left: 0; width: 105px; height: 30px;}
.section02 .search_box .search_box_wrap .search_select select {font-size: 0.7815rem; color: #333; width: 100%; height: 30px; line-height: 30px; padding-left: 5px; background: #fff; border: none; border-radius: 5px 0 0 5px;}

.section02 .search_box .search_box_wrap .keyword_input {position: relative; height: 30px; margin: 0 45px 0 0;}
.section02 .search_box .search_box_wrap .keyword_input input {display: block; width: 100%; height: 30px; text-indent: 15px; font-size: 0.7815rem; background-color: #fff;}
.section02 .search_box .search_box_wrap .keyword_input input::placeholder {color: #9c9c9c; letter-spacing: -0.45px;}

.section02 .btn_search {position: absolute; top: 0; right: 0;}
.section02 .btn_search a {display: block; width: 40px; line-height: 30px; background-color: #f3442d; color: #fff; text-align: center; font-size: 0.7815rem;  border-radius: 0 5px 5px 0;}

.section02 .center_list {background-color: #fff; margin-top: 8px; height: 142px; overflow-y: auto;}
.section02 .center_list::-webkit-scrollbar {width: 5px;}
.section02 .center_list::-webkit-scrollbar-thumb {height: 30%; background: #eee; border-radius: 10px;}
.section02 .center_list::-webkit-scrollbar-track {background: transparent;}

.section02 .center_list ul.depth01 {padding: 0 0;}
.section02 .center_list ul.depth01 > li {text-indent: 15px;}
.section02 .center_list ul.depth01 > li:last-child {padding-bottom: 0;}
.section02 .center_list ul.depth01 > li > a {display: block; font-size: 0.8rem; color: #414141; font-weight: 600; line-height: 35px; border-bottom: 1px solid #e7eaf1;}
.section02 .center_list ul.depth02 li {display: block; text-indent: 20px; border-bottom: 1px solid #e7eaf1; background-color: #dadfeb;}
.section02 .center_list ul.depth02 li a {position: relative; display: block; font-size: 0.8rem; color: #29292c; line-height: 45px; }
.section02 .center_list ul.depth02 li a:after {content: ''; position: absolute; top: 17px; right: 15px; width: 7px; height: 11px; background: url("../images/arrow_icon.png") 50% 50% no-repeat;}
.section02 .center_list ul.depth02 li a:hover,
.section02 .center_list ul.depth02 li a:active,
.section02 .center_list ul.depth02 li a:visited {color: #ee2d24;}

/* section03 */
.section03.btn_bottom ul li {height: 36px; background-color: transparent; border: 1px solid #f3442d;}
.section03.btn_bottom ul li a {line-height: 36px;}
.section03.btn_bottom ul li .icon {display: inline-block; margin-top: 3px;}
.section03.btn_bottom ul li .icon img {vertical-align: inherit;}
.section03.btn_bottom ul li .txt {padding-left: 4px; color: #29292c; font-weight: 600; vertical-align: top; font-size: 0.87rem;}

/* section04 */
.section04 {margin-top: 20px;}
.section04 .history .history_wrap {background-color: #fff;}

/* footer */
footer {background-color: #29292c; text-align: center; height: 30px; line-height: 30px;}
footer p {color: #fff; font-size: 0.8rem; }


/*---------- login
 ----------*/
.login_bg {width: 100%; height: 100vh;}
.login_bg #wrap {height: 100vh;}
.login_bg #wrap .login {display: table; width: 100%; height: 100vh;}
.login_bg #wrap .login h1 {padding-bottom: 30px;}
.login_bg #wrap .login .login_wrap {display: table-cell; vertical-align: middle; padding: 20px;}
.login_bg #wrap .login .login_field p {margin-bottom: 10px;}
.login_bg #wrap .login .input_field input {width: 100%; height: 40px; border: 1px solid #e7e7e7; text-indent: 15px; background: #fff; font-size: 0.7815rem; }
.login_bg #wrap .login .input_field input::placeholder {color: #9c9c9c; letter-spacing: -0.45px;}
.login_bg #wrap .login .login_btn {width: 100%; height: 40px; line-height: 40px; text-align: center; background: linear-gradient(35deg, #ee2d24 45%, #fb6e3d 100%); margin-top: 20px;}
.login_bg #wrap .login .login_btn a {display: block; color: #fff; font-weight: 600; font-size: 0.9rem;}
.login_bg #wrap .login .login_footer p {text-align: center; padding-top: 30px; color: #29292c; font-size: 0.8rem; }