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

/*  Reset CSS  */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

* { margin:0; padding:0; border:0; outline:0; vertical-align:top; }
html, body {height: 100%; width: 100%; margin: 0; padding: 0; left: 0; top: 0; min-height: -webkit-fill-available; min-height: 100vh;color: #000;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
ul, ol, dl { list-style:none; }
img, video { max-width:100%; border:0; vertical-align:middle; }
a { text-decoration:none; cursor:pointer; vertical-align:top; color: #000;  }
input, select { vertical-align:middle;}
input, button, textarea, select {font: inherit;}
input[type="text"], input[type="number"], input[type="password"], textarea{-webkit-appearance:none;}
body { font-size:14px; line-height:1.2; letter-spacing:-.5px;}
label { cursor:pointer; }
legend, caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i, em, address { font-style:normal; font-weight:normal; }

table {word-wrap:break-word;word-break:break-all;font-size: 14px; border-collapse:collapse; border-spacing:0;}

/* 폰트스타일 */
* {
	font-family: 'Malgun Gothic', sans-serif, Dotum, arial;
	line-height: 1.5;
	font-size: 14px;
	font-weight: 400;
}

/* header */
header{width: 100%; border-bottom: 1px solid #d9d9d9;}
.header_wrapper{width: 1280px; margin: 0 auto;  padding: 10px 0 0;display: flow-root;}
.header_wrapper .menu_top{width: 100%; height: 71px; position: relative;}
.header_wrapper h1 {width:430px; height:71px; float:left; }
.header_wrapper h1 a {font-size:24px; line-height:71px;}


.header_wrapper .search_box{border: 1px solid #32B432; border-radius: 3px; height: 42px; width: 330px; position: absolute; left: calc((100% - 330px) / 2); top: 15px}
.header_wrapper .search_box input{width: 288px; height: 40px; float: left; padding: 0 10px; border: 0}
.header_wrapper .search_box .search_btn{font-size: 0; background: url("/WebBtbr/images/search_icon.png") no-repeat #32B432; width: 40px; height: 40px; background-size: 24px 24px; background-position: 8px 8px; border-radius: 2px; transition: 0.3s ease; display: inline-block}
.header_wrapper .search_box .search_btn:hover{background: url("/WebBtbr/images/search_icon.png") no-repeat #239a23; background-position: 8px 8px; background-size: 24px 24px;}

.header_wrapper .right_menu{float: right; margin-top: 27px; margin-right: 30px; }
.header_wrapper .right_menu ul li{font-size: 12px; float: left; font-weight: 200;}
.header_wrapper .right_menu ul li::after{content: ""; display: inline-block; width: 1px; height: 14px; background: #d5dde3; margin: 3px 7px 0;}
.header_wrapper .right_menu ul li:last-child::after{margin-right: 0;}
.header_wrapper .right_menu ul li a{font-size: 12px;}
.header_wrapper .right_menu ul li i{width: 18px; height: 18px; display: inline-block; background: url("/WebBtbr/images/user_icon.png") no-repeat; margin: 0 5px 0 0;}
.header_wrapper .right_menu ul li i.logout{width: 18px; height: 18px; display: inline-block; background: url("/WebBtbr/images/logout_icon.png") no-repeat; margin: -1px 5px 0 0;}
.header_wrapper .right_menu ul li.cart{position: relative; }
.header_wrapper .right_menu ul li.cart i{width: 18px; height: 18px; display: inline-block; background: url("/WebBtbr/images/cart_icon.png") no-repeat; margin: 0 5px 0 0;}
.header_wrapper .right_menu ul li.cart span{width: 15px; height: 15px; background: #32B432; color: #fff; border-radius: 50%; position: absolute; top: -6px; right: 5px; font-size: 12px; text-align: center; line-height: 15px;}
.header_wrapper .right_menu ul li.last::after{display: none;}
.header_wrapper .right_menu ul li:hover a{font-weight: bold;}
.header_wrapper .right_menu ul li.bold a{color: #32B432; font-weight: bold;}

.header_wrapper .menu{width: 100%; height: 50px}
.header_wrapper .menu li{float: left; font-size: 18px; font-weight: bold; position: relative; margin: 0 10px; padding: 0 15px}
.header_wrapper .menu li a{font-size: 18px; font-weight: bold; line-height: 50px; transition: all .2s ease-in-out;}
.header_wrapper .menu li::after{content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #32b432; transition: all .2s ease-in-out;}
.header_wrapper .menu li:hover::after,.header_wrapper .menu li.on::after{width: 100%}
.header_wrapper .menu li:hover a,.header_wrapper .menu li.on a{color: #32b432;}

.header_wrapper .menu .menu01{background: #141450; color: #fff; width: 180px; height: 50px; text-align: center; transition: all .2s ease-in-out; margin: 0 15px 0 0; padding: 0; position: relative;}
.header_wrapper .menu .menu01::after{content: ''; position: absolute; bottom: 0; left: 20px; width: 0; height: 2px; background: #fff; transition: all .2s ease-in-out;}
.header_wrapper .menu .menu01:hover::after,.header_wrapper .menu .menu01.on::after{width: 140px; }
.header_wrapper .menu .menu01:hover,.header_wrapper .menu .menu01.on{background: #3264C8; border-bottom: 0;}
.header_wrapper .menu .menu01:hover a,.header_wrapper .menu .menu01.on a{color: #fff;}
.header_wrapper .menu .menu01 a{color: #fff; line-height: 50px; width: 100%; height: 50px; display: block;}
.menu01 span:after, .menu01 span:before {  content: ""; position: absolute; left: 0;  top: 6px;}
.menu01 span:after {top: 12px;}
.menu01 span {position: relative; display: block; margin: 20px 10px 0 0;}
.menu01 span, .menu01 span::after, .menu01 span::before {width: 20px; height: 3px; display: inline-block; background-color: #fff;}

.menu01 .dropdown_menu {display: none; position: absolute; background-color: #f5f5f5; width: 1280px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; transition: all .5s ease-in-out; padding: 40px 0 20px; border-radius: 0 0 10px 10px; top: 50px; transition: all .2s ease-in-out;}
.header_wrapper .menu .menu01:hover .dropdown_menu {width: 1280px; display: block;}
.menu01 .dropdown_menu .tlt{margin-left: 40px;}
.menu01 .dropdown_menu .tlt b{font-size: 18px; font-weight: bold; text-align: left; line-height: 1; margin-bottom: 10px; padding: 7px 20px 10px; border-radius: 3px; background: #32b432; color: #fff; display: inline-block;}

.menu01 .dropdown_menu li,.header_wrapper .menu .menu01 .dropdown_menu li a{font-size: 14px; font-weight: normal; padding: 0; margin: 0; color: #000; width: 100%; text-align: left; line-height: 1.5; height: auto; margin-bottom: 2px; transition: 0.3s ease;}
.menu01 .dropdown_menu li a::before{content: ''; width: 3px; height: 3px; border-radius: 50px; background: #32b432; display: inline-block; position: relative; top: -3px; margin-right: 5px;}
.menu01 .dropdown_menu li::after{display: none;}
.menu01 .dropdown_menu .col-3 li a:hover,.menu01 .dropdown_menu .col-3 li:hover{color: #32b432; font-weight: bold;}
.menu01 .dropdown_menu .col-3{margin-bottom: 20px; position: relative; text-align: left;}
.menu01 .dropdown_menu .col-3+.col-3::before{content: ''; width: 1px; height: 300px; display: inline-block; background: #d9d9d9; position: absolute; left: 0px;}
.menu01 .dropdown_menu .col-3 ul{width: 49%; display: inline-block; padding-left: 40px;}

/* contents */
main{width: 1280px; margin: 40px auto 100px; min-height: calc(100% - 132px - 160px - 197px); display: list-item; list-style:none;}
main::before, main::after{content: ''; width: 100%; height: 0; clear: both;}
main.type02{margin-top: 20px;}

/* left_menu */
.left_menu{width: 300px; float: left;}
.left_menu .tab li{background: #f5f5f5; color: #666; font-size: 16px; width: 50%; text-align: center; height: 50px; line-height: 50px; float: left; cursor: pointer}
.left_menu .tab li.active{background: #32b432; color: #fff; font-weight: bold;}
.left_menu .tab li.full{background: #32b432; color: #fff; font-weight: bold; width: 100%; border-radius: 10px 10px 0 0 !important;}
.left_menu .tab li:first-child{border-radius: 10px 0 0 0;}
.left_menu .tab li:last-child{border-radius: 0 10px 0 0;}
.left_menu .menu_con{display: none; border: 1px solid #d9d9d9; border-top: 0; border-radius: 0 0 10px 10px; padding: 15px 20px 17px; margin-top: 50px;}
.left_menu .menu_con.show{display: block;}
.left_menu .menu_con ul{}
.left_menu .menu_con li,.left_menu .menu_con li a{line-height: 30px; transition: all .3s ease-in-out;}
.left_menu .menu_con li::before{content: ''; width: 3px; height: 3px; border-radius: 50%; display: inline-block; background: #32b432; margin: 0 7px 0 0; position: relative; top: -3px;}
.left_menu .menu_con li a:hover,.left_menu .menu_con li.on a{font-weight: bold;}
.left_menu .menu_con li.on a::after{content:' \25B6';}
.left_menu .menu_con .tlt{font-size: 18px; font-weight: bold; color: #141450; margin-bottom: 10px}


/* footer */
footer{width: 100%; background: #f5f5f5;}
.footer_menu{background: #8b8b8b; width: 100%; display: inline-block;}
.footer_menu ul{text-align: center; width: 1280px; margin: 0 auto; padding: 4px 0;}
.footer_menu ul li{display: inline-block;}
/*.footer_menu ul li::after{content: ''; width: 1px; height: 13px; background: #fff; display: inline-block; margin: 4px 10px 0;}*/
.footer_menu ul li::before {content: ''; width: 1px; height: 13px; background: #fff; display: inline-block; margin: 4px 10px 0;}
.footer_menu ul li:first-child::before {content: ''; width: 0px; height: 13px;}
.footer_menu ul li a{color: #fff; font-weight: normal; font-size: 12px;}
/* .footer_menu ul li:nth-child(2) a{text-decoration: underline; font-weight: bold;} */
.footer_menu ul li.on a{text-decoration: underline; font-weight: bold;}

.company_info{width: 1280px; height: 185px; margin: 0 auto; padding: 40px 0; display: flex; justify-content: center;; align-items: center;}
.company_info h1{width: 175px; height: 49px; font-size: 0; background: url("/WebBtbr/images/logo_footer.png") no-repeat; margin-right: 40px}
.company_info h1 a{width: 100%; height: 100%; display: inline-block; font-size: 0;}
.company_info h1,.company_info p{float: left;}
.company_info p b{font-weight: bold;}

/* layout */
.col-5, .col-3{float: left;}
.col-5{width: 20%;}
.col-3{width: 33.3%;}

/* buttons */
.btn_xsm{color: #fff; text-align: center; height: 32px; width: 90px; border-radius: 3px; display: inline-block; line-height: 30px; transition: 0.3s ease;}
.btn_sm{color: #fff; text-align: center; height: 32px; width: 90px; border-radius: 3px; display: inline-block; line-height: 30px; transition: 0.3s ease;}
.btn{color: #fff; text-align: center; height: 32px; width: 140px; border-radius: 3px; display: inline-block; line-height: 30px; transition: 0.3s ease; }
.btn_lg{color: #fff; text-align: center; height: 42px; width: 140px; border-radius: 3px; display: inline-block; line-height: 40px; transition: 0.3s ease; font-size: 16px; font-weight: bold;}


/* select , input */
select{border: 1px solid #d9d9d9; height: 32px; border-radius: 3px; padding: 0 30px 0 10px; min-width: 100px; margin: 0; appearance:none; -moz-appearance:none; -webkit-appearance:none; background: #fff url("/WebBtbr/images/select_arrow.png") no-repeat; background-position: calc(100% - 10px) calc(50% + 2px);}
input{border: 1px solid #d9d9d9; height: 32px; border-radius: 3px; padding: 0 10px; min-width: 90px; margin: 0;}
input:disabled,select:disabled,input:read-only{background: #d9d9d9;}
select::-ms-expand{display: none;}
input[type="date"]{padding: 0 0 0 10px}
input[type="date"]::-webkit-calendar-picker-indicator {width: 19px; background: url("/WebBtbr/images/calendar.png") no-repeat; background-position: 0; position: relative;}
input[type="date"]::after {content: ''; display: inline-block; width: 1px; height: 32px; background: #d9d9d9; position: relative; right: 32px;}


/* checkbox */
.checkbox {display: inline-block; position: relative; padding-left: 20px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.checkbox input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkbox .checkmark {position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #fff; border: 1px solid #c8c8c8; border-radius: 3px; margin-right: 10px}
.checkbox input:checked ~ .checkmark {background-color: #141450; border: 1px solid #141450}
.checkbox input:disabled ~ .checkmark {background-color: #d9d9d9;}
.checkmark:after {content: "";position: absolute;display: none;}
.checkbox input:checked ~ .checkmark:after {display: block;}
.checkbox .checkmark:after {left: 6px;top: 2px;width: 6px; height: 12px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

/* loading */
.loading.ing,.modal.ing{display: block;}
.loading{display: none; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); position: fixed; z-index: 150; top: 0; left: 0; overflow: hidden;}
.modal{display: none; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); position: fixed; z-index: 100; top: 0; left: 0; overflow: hidden;}
.loader {border: 4px solid #f5f5f5; border-top: 4px solid #32B432; border-radius: 50%; width: 60px; height: 60px; animation: spin 2s linear infinite; position: absolute; top: calc(50% - 30px); left: calc(50% - 30px);}
@keyframes spin {
	0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
body.hidden{height: 100%; overflow: hidden;}
.loading img{width: 126px; height: 126px; animation: spin 2s linear infinite; position: absolute; top: calc(50% - 30px); left: calc(50% - 30px);}


/* table */
.table{border-top: 2px solid #32B432; width: 100%;}
.table.bor_top{border-top: 2px solid #141450; width: 100%;}
.table.txt_c thead th, .table tbody.txt_c td{text-align: center;}
.table.small thead th, .table.small tbody td, .table.small tbody td a{padding: 5px; font-size: 12px;}
.table tr{border-bottom: 1px solid #d9d9d9;}
.table th{background: #F5F5F5; padding: 10px; font-weight: bold; text-align: left; vertical-align: middle;}
.table th.bg{background: #EAEAEA;}
.table td{padding: 10px; text-align: left; vertical-align: middle;}
.table td+td, .table th+th, .table .line{border-left: 1px solid #d9d9d9;}
.table td input[type=text]{height: 32px; width: 100%}
.table td .checkbox{padding-left: 25px; height: 20px; line-height: 18px; }
.table.txt_c td .checkbox{padding-left: 20px; height: 20px; line-height: 18px; }
.table td .checkbox+.checkbox{margin-left: 20px;}
.table td.price{font-weight: bold; text-align: center;}
.table td.txt_l{text-align: left !important;}
.table td.txt_r{text-align: right !important;}

/* login */
.login{background: #fff; border-radius: 10px; width: 400px; height: 420px; position: absolute; top: calc(50% - 200px); left: calc(50% - 210px); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8); padding: 20px;}
.login_box{position: relative;}
.login_box h1{font-size: 24px; text-align: center; font-weight: bold; margin: 20px 0 10px;}
.login_box input{width: 100%; height: 52px}
.login_box input+input{margin-top: 10px;}
.login_box .message{font-size: 12px; color: #E80000; margin: 10px 0 0;}
.login_box .checkbox{padding-left: 25px; height: 20px; line-height: 18px; font-size: 12px; margin: 10px 0;}
.login_box .checkbox input{height: 0; width: 0}
.login_box .bg_blue{font-size: 18px; height: 52px; line-height: 50px;}
.login_box .btn_box{display: flex; justify-content: space-between; margin-top: 20px;}
.login_box .btn_box a{font-size: 14px; font-weight: normal; width: calc(50% - 10px)}
.login_box .close{cursor: pointer; position: absolute; right: 0; top: -10px;}
.login_box .close::before{content: ''; width: 4px; height: 23px; background: #8B8B8B; display: inline-block; transform: rotate(45deg) translate(-5px, -1px);}
.login_box .close::after{content: ''; width: 4px; height: 23px; background: #8B8B8B; display: inline-block; transform: rotate(-45deg) translate(-2px, -8px);}

/* popup */
.popup{background: #fff; border-radius: 10px; width: 400px; min-height: 200px; position: absolute; top: calc(50% - 100px); left: calc(50% - 210px); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8); padding: 20px;}
.popup_box{position: relative; display: inline-block; width: 100%; height: 100%; padding-top: 50px;}
.popup_box h1{font-size: 18px; color: #fff; text-align: left; font-weight: bold; margin: 0; position: absolute; top: -20px; left: -20px; z-index: 10; background: #32b432; width: calc(100% + 40px); border-radius: 10px 10px 0 0; padding: 7px 0 8px 20px;}
.popup_box p{line-height: 22px; text-align: center; margin: 0 0 30px;}
.popup_box .btn_box{text-align: center}
.popup_box .btn_box a{font-size: 12px; font-weight: normal; width: auto; padding: 0 20px;}
.popup_box .btn_box a+a{margin-left: 5px;}
.popup_box .close{cursor: pointer; position: absolute; right: 0; top: -6px; z-index: 20;}
.popup_box .close::before{content: ''; width: 4px; height: 23px; background: #fff; display: inline-block; transform: rotate(45deg) translate(-5px, -1px);}
.popup_box .close::after{content: ''; width: 4px; height: 23px; background: #fff; display: inline-block; transform: rotate(-45deg) translate(-2px, -8px);}

/* popup_password */
.popup_password{background: #fff; border-radius: 10px; width: 400px; min-height: 300px; position: absolute; top: calc(50% - 150px); left: calc(50% - 200px); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8); padding: 20px;}
.popup_password_box{position: relative; display: inline-block; width: 100%; height: 100%; padding-top: 35px;}
.popup_password_box h1{font-size: 18px; color: #fff; text-align: left; font-weight: bold; margin: 0; position: absolute; top: -20px; left: -20px; z-index: 10; background: #32b432; width: calc(100% + 40px); border-radius: 10px 10px 0 0; padding: 7px 0 8px 20px;}
.popup_password_box p{line-height: 22px; margin: 0 0 30px; font-size: 12px; color: #E80000;}
.popup_password_box p.notice{line-height: 22px; margin: 0; font-size: 12px; color: #666;}
.popup_password_box .btn_box{text-align: center}
.popup_password_box .btn_box a{font-weight: normal; padding: 0 20px;}
.popup_password_box .btn_box a+a{margin-left: 5px;}
.popup_password_box .close{cursor: pointer; position: absolute; right: 0; top: -6px; z-index: 20;}
.popup_password_box .close::before{content: ''; width: 4px; height: 23px; background: #fff; display: inline-block; transform: rotate(45deg) translate(-5px, -1px);}
.popup_password_box .close::after{content: ''; width: 4px; height: 23px; background: #fff; display: inline-block; transform: rotate(-45deg) translate(-2px, -8px);}

/* find */
.find{background: #fff; border-radius: 10px; width: 400px; min-height: 420px; position: absolute; top: calc(50% - 200px); left: calc(50% - 210px); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8); padding: 20px;}
.find_box{position: relative;}
.find_box h1{font-size: 24px; text-align: center; font-weight: bold; margin: 20px 0 10px;}
.find_box input{width: 100%; height: 52px}
.find_box input+input{margin-top: 10px;}
.find_box .message{font-size: 12px; color: #E80000; margin: 10px 0 0; text-align: center;}
.find_box .btn_sm{font-size: 18px; height: 42px; line-height: 40px;}
.find_box .btn_box{display: flex; justify-content: space-between; margin-top: 20px;}
.find_box .btn_box a{font-size: 14px; font-weight: normal; width: calc(50% - 10px)}
.find_box .close{cursor: pointer; position: absolute; right: 0; top: -10px;}
.find_box .close::before{content: ''; width: 4px; height: 23px; background: #8B8B8B; display: inline-block; transform: rotate(45deg) translate(-5px, -1px);}
.find_box .close::after{content: ''; width: 4px; height: 23px; background: #8B8B8B; display: inline-block; transform: rotate(-45deg) translate(-2px, -8px);}
.find_box .find_tab{width: 100%; display: inline-block; margin:20px 0 0;}
.find_box .find_tab li{background: #f5f5f5; color: #666; font-size: 16px; width: 50%; text-align: center; height: 50px; line-height: 50px; float: left; cursor: pointer}
.find_box .find_tab li.active{background: #32B432; color: #fff; font-weight: bold;}
.find_box .find_tab li:first-child{border-radius: 10px 0 0 0;}
.find_box .find_tab li:last-child{border-radius: 0 10px 0 0;}
.find_box .contents{display: none; padding: 20px 0;}
.find_box .contents.show{display: block;width: 100%;}


/* address */
.address_popup{background: #fff; border-radius: 10px; width: 900px; height: 600px; overflow-y: auto; position: absolute; top: calc(50% - 300px); left: calc(50% - 450px); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.8); padding: 20px;}
.address_popup.type02{width: 900px; height: 300px; top: calc(50% - 135px);}
.address_box{position: relative; display: inline-block; width: 100%; height: 100%; padding-top: 50px;}
.address_box h1{font-size: 18px; color: #fff; text-align: left; font-weight: bold; margin: 0; position: absolute; top: -20px; left: -20px; z-index: 10; background: #32b432; width: calc(100% + 40px); border-radius: 10px 10px 0 0; padding: 7px 0 8px 20px;}
.address_box .btn_box{text-align: center}
.address_box .btn_box a{font-size: 12px; font-weight: normal; width: auto; padding: 0 20px;}
.address_box .close{cursor: pointer; position: absolute; right: 0; top: -6px; z-index: 20;}
.address_box .close::before{content: ''; width: 4px; height: 23px; background: #fff; display: inline-block; transform: rotate(45deg) translate(-5px, -1px);}
.address_box .close::after{content: ''; width: 4px; height: 23px; background: #fff; display: inline-block; transform: rotate(-45deg) translate(-2px, -8px);}
.address_box .input_box{background: #F5F5F5; padding: 20px; border-radius: 10px; text-align: center}
.address_box .input_box dl, .address_box .input_box dd, .address_box .input_box dt{display: inline-block;}
.address_box .input_box dt{line-height: 30px; margin-right: 10px}
.address_box .input_box dd{margin-right: 20px;}
.address_box .input_box dd input{width: 200px}
.address_box .list{margin: 10px 0 0;}
.address_box .list li::before{content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: #32b432; position: relative; top: -3px; margin-right: 7px;}
.address_box .list li{font-size: 12px;}
.address_box .address span{line-height: 30px;}
.address_box .adress_list_box{width: 100%; height: 310px; overflow-y: auto; margin-top: 20px}


/* background_color */
.bg_green{background: #32b432}
.bg_blue{background: #3264C8}
.bg_blue02{background: #141450}
.bg_gray{background: #d9d9d9; color: #666 !important;}
.bg_gray02{background: #808080}
.bg_green:hover{background: #299829}
.bg_blue:hover{background: #2a54a8}
.bg_blue02:hover{background: #3264C8}
.bg_gray:hover{background: #bebebe; color: #666 !important;}
.bg_gray02:hover{background: #656565}

/* pagination */
/*
.pagination_box{margin: 40px auto 0; text-align: center;}
.pagination{display: inline-block;}
.pagination a{ font-size: 12px; float: left; transition: 0.3s ease; padding: 3px 3px 5px;}
.pagination a.active, .pagination a:hover:not(.active){font-weight: bold;}
.pagination a.prev, .pagination a.next {background-color: #f5f5f5; padding: 3px 5px 5px; border-radius: 3px;}
.pagination a.prev02, .pagination a.next02 {background-color: #f5f5f5; padding: 2px 5px 4px; border-radius: 3px; font-size: 19px; line-height: 16px; height: 26px}
.pagination a+a::after, .pagination a:first-child::after{content: ''; width: 1px; height: 14px; display: inline-block; background: #d9d9d9; position: relative; top: 3px; margin: 0 0 0 5px;}
.pagination a.prev::after, .pagination a.next::after,.pagination a.prev02::after, .pagination a.next02::after, .pagination a.last::after{display: none;}
.pagination a.prev{margin-right: 10px;}
.pagination a.next{margin-left: 10px;}
.pagination a.prev02{margin-right: 5px;}
.pagination a.next02{margin-left: 5px;}
.pagination a:hover.prev, .pagination a:hover.next{background: #d9d9d9}
*/
.pagination_box{margin: 40px auto 0; text-align: center;}
.pagination { display: inline-block; }
.pagination a { font-size: 12px; font-weight:bold; color:#444; float:left; padding:2px 8px; text-decoration:none; transition:background-color .3s; border:solid 1px #fff; }
.pagination a.active { background-color: white; color: #f84450; border:solid 1px #ddd; font-weight:bold; }
.pagination a:hover:not(.active) { border:solid 1px #ddd; background: #ddd; }
.pagination a:hover.prev, .pagination a:hover.next{background: #ddd;}

/* nothing */
.nothing{font-size: 20px; font-weight: bold; text-align: center; margin: 100px 0}
.nothing .red{font-size: 20px; font-weight: bold; color: #E80000}

/* error */
.error{width: 100%; height: calc(100% - 215px); text-align: center; display: flex; align-items: center; justify-content: center;}
.error.had_header{height: calc(100% - 215px - 132px);}
.error h1{font-size: 24px; font-weight: bold; margin: 20px 0 40px}
.error .logo img{margin-bottom: 80px;}

/* popup_con */
.popup_con{width: 100%; height: 100vh; padding: 20px; position: relative; overflow: hidden;}
.popup_con .table{max-width: 100%;}
.popup_con .table td.read_title{font-size: 16px; padding: 10px 20px; height: 45px; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.popup_con .table tbody{height: calc(100vh - 45px - 52px - 40px); overflow: auto; display: block;}
.popup_con .table tbody tr{display: inline-block; width: 100%;}
.popup_con .btn_box{height: 52px; position: absolute; width: calc(100% - 40px); bottom: 20px; padding-top: 20px; margin: 0; background: #fff;}

/* width */
.w-100{width: 100% !important;}
.w_100{width: 100px !important;}
.w_70{width: 70px !important; min-width: 70px !important;}
.w_150{width: 150px !important;}
.w_250{width: 250px !important;}
.w_300{width: 300px !important;}
.w_420{width: 420px !important;}
.m0{margin: 0 !important;}
.mt0{margin-top: 0 !important;}
.mt10{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt40{margin-top: 40px !important;}
.ml5{margin-left: 5px !important;}
.ml10{margin-left: 10px !important;}
.mb0{margin-bottom: 0px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb40{margin-bottom: 40px !important;}
.p10{padding: 10px;}
.center_box{text-align: center;}
.right{float: right;}
.hidden{display: none !important;}

/* etc */
hr.line{border: 0; width: 100%; height: 1px; background: #d9d9d9; margin: 10px 0;}
.orange{color: #FF6000;}
.txt_center{text-align: center !important;}
.clear{clear: both;}

/* ie10~11 hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.pagination a.prev02, .pagination a.next02 {background-color: #f5f5f5; padding: 3px 5px 2px; border-radius: 3px; font-size: 20px; line-height: 16px; height: 26px}
}

.MultiFile-wrap input[type="file"] {
position: absolute;
width: 96px;
height: 33px;
padding: 0;
overflow: hidden;
border: 0;
opacity:0;
top:0;
left:0;
}

.MultiFile-wrap label {
position: relative;
display: inline-block;
padding: 5px 20px;
color: #fff;
vertical-align: middle;
background-color: #808080;
cursor: pointer;
border: 1px solid #808080;
border-radius: 5px;
}

/* table Header 고정 tbody scroll ====================================== */
.fixed-table-container { /*테이블 고정 container width와 height는 공용으로 사용하기 위해 html단에서 지정 */
    /*width: 800px;height: 200px;*/
    position: relative;
    padding-top: 42px; /* header-bg height값 */
}
.fixed-table-header-bg { /*헤더(타이틀 영역)*/
	border-top:2px solid #32b432;
	border-bottom:1px solid #d9d9d9;
	text-align:center;
	background:#f5f5f5;
	font-weight:bold;
    height: 42px; /* header-bg height값 */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    /*border-bottom: 1px solid #000;*/
}
.fixed-table-wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}
table.fixed-table {
    width: 100%;
    border-collapse: collapse;
}
table.fixed-table td {
    border-bottom: 1px solid #DDD;
	padding: 10px; text-align: left; vertical-align: middle;
    text-align:center;
}
table.fixed-table td.txt_r {
    text-align:right;
}
table.fixed-table td + td {
    border-left: 1px solid #d9d9d9;
}
table.fixed-table th {
    padding: 0px; /* reset */
}
table.fixed-table .th-text {
    position: absolute;
    top: 0;
    width: inherit;
    line-height: 42px; /* header-bg height값 */
    border-left: 1px solid #d9d9d9;
    font-weight: 700;
}
table.fixed-table .th-text.bg {background: #EAEAEA;border-top:2px solid #32b432;
	border-bottom:1px solid #d9d9d9;height: 42px; /* header-bg height값 */}
table.fixed-table th:first-child .th-text {
    border-left: none;
}
table.fixed-table tbody tr:last-child td{border-bottom:1px solid #d9d9d9;}
/*table.fixed-table tbody tr:nth-child(even) {background: #f6f6f6;}*/