@charset "utf-8";

/* ----------------------------------------------------------

layout

---------------------------------------------------------- */
/**/
body          {font-size:90%;}
#header       {z-index:100;position:relative}
#main         {z-index:10}
#main .block1 {padding:40px 0;width:100%}
#main .block2 {padding:40px 0 60px;width:100%}
#footer       {width:100%;bottom:0;padding:50px 0;box-sizing:border-box;position:relative}
@media only screen and (max-width:991px) {
body          {overflow-x:hidden;-webkit-text-size-adjust:100%;-webkit-overflow-scrolling:touch;}
}

/*pc + sp*/
.pc           {display:block}
.sp           {display:none}
@media only screen and (max-width:991px) {
.pc           {display:none}
.sp           {display:block}
}

/**/
ul,
ul li         {padding:0;margin:0}
a,
a:hover       {text-decoration:none}
.flex         {display:flex;flex-direction:row;flex-wrap:wrap;box-sizing:border-box}

/*position*/
.left           {text-align:left}
.center         {text-align:center}
.right          {text-align:right}

/*text*/
.red            {color:#ff0000}
.large          {font-size:120%}
.xlarge         {font-size:140%}
.xxlarge        {font-size:160%}
.underline      {text-decoration:underline;}

/*alert*/
.alert    {margin:1em 0;}
.alert p  {padding:0.5em;margin:0;}

/*form*/
input[type=checkbox] {
-ms-transform:scale(2,2);
-webkit-transform:scale(2,2);
transform:scale(2,2);
}
button  {
background-color:transparent;
border:none;
cursor:pointer;
outline:none;
padding:0;
appearance:none;
}
.varchar4   {width:10%}
.varchar7,
.varchar8,
.numeric    {width:15%}
.varchar16  {width:20%}
.varchar32  {width:25%}
.varchar64  {width:40%}
.varchar128 {width:50%}
.varchar256 {width:100%}
@media only screen and (max-width:991px) {
.varchar4,
.varchar7,
.varchar8,
.numeric,
.varchar16,
.varchar32, 
.varchar64,
.varchar128,
.varchar256 {width:100%}
}

/*table*/
.table_conetent {
	border-top:1px solid #cdcdcd;
	border-right: none;
	border-bottom:1px solid #cdcdcd;
	border-left:1px solid #cdcdcd;
	}
.table_conetent table {
	box-sizing:border-box;
	width: 100%;
	min-height: 320px;
	}
.table_conetent thead th {background:#f7f7f7!important}
.table_conetent thead th {vertical-align:middle}
.table_conetent tbody th,
.table_conetent tbody td {
	vertical-align: top;
	}
.table-striped tbody tr:nth-child(odd) {background:#fff!important}
.table-striped tbody tr:nth-child(even) {background:#f7f7f7!important}

/*20210127*/
/*
.table-accordion .table-striped tbody tr.parent:nth-child(4n+1)   {background:#f7f7f7!important}
*/
.table-accordion td {position: relative;}
.table-accordion .btn-link {position: absolute;top:10px;z-index: 1111111}
.table-accordion .btn-link:focus,
.table-accordion .btn-link:hover   {text-decoration:none}
.table-accordion .btn-link[aria-expanded="false"]:after {
  content: " \f13a";
  font-family: FontAwesome;
  text-decoration:none!important;
  font-weight: 900
}
.table-accordion .btn-link[aria-expanded="true"]:after {
  content: " \f139";
  font-family: FontAwesome;
  text-decoration:none!important;
  font-weight: 900
}
/*//20210127*/

.table tbody .icon_new  {
display:inline;
color: #fff;
font-style:normal;
font-size:90%;
background:#cc0000;
text-align:center;
padding:2px 4px;
margin-right:4px;
}
.table tbody .icon_req {
display:inline;
color: #fff;
font-style:normal;
font-size:90%;
background:#cc0000;
text-align:center;
padding:2px 4px;
margin-left:4px;
}

/* ----------------------------------------------------------

Font size

---------------------------------------------------------- */
input     {font-size:95%!important;height:34px!important;line-height:1}
button    {font-size:95%!important;height:34px!important;line-height:1}
a.btn     {font-size:95%!important;height:34px!important;line-height:1.5}
select    {font-size:95%!important;height:34px!important;line-height:1;padding-right:0!important;padding-left:0!important}
textarea  {font-size:95%!important}
.table thead th,
.table tbody th,
.table tbody td   {font-size:90%!important}
.table_number,
.table_pagination {font-size:90%!important}
.gnav_menu li a   {font-size:130%!important}
.main_title       {font-size:250%!important}
@media only screen and (max-width:991px) {
.main_title       {font-size:250%!important}
}

/* ----------------------------------------------------------

Header

---------------------------------------------------------- */
/*topbar*/
.topbar   {padding:8px 0}
.topbar a {color:#000}
.topbar_user_menu {text-align:right}
.topbar_user_icon,
.topbar_user_name {display:inline-block;margin-left:10px}
.topbar_user_icon img {max-width:40px;border-radius:100px}
@media only screen and (max-width:991px) {
.topbar             {padding:0}
.topbar .logo       {display:block;width:100%;position:relative}
.topbar_logo        {flex:0 0 100%;max-width:100%;background:#fff;position:relative}
.topbar_user_menu 	{flex:0 0 100%;max-width:100%;background:#f7f7f7;position:relative}
.topbar .logo img 	{max-width:200px}
.topbar_user_icon img 	{max-width:28px;margin-right:-10px}
.topbar_user_icon,
.topbar_user_name   {font-size:80%;padding:10px;margin-left:0}
}

/*gnav 20191107*
.gnav.pc    {margin:auto;text-align:center;width:100%}
.gnav_menu  {width:100%;border-bottom-width:8px;border-bottom-style:solid}
.gnav_menu li {display:inline-block;padding-top:10px;font-weight:600}
.gnav_menu li a {display:block;color:#000;padding:24px 34px 24px;line-height:1;border-radius:10px 10px 0 0}
.gnav_menu li a:hover {text-decoration:none}
@media only screen and (min-width:992px) and (max-width:1199px) {
.gnav_menu li a {padding:24px}
}*/

/*gnav
.gnav.pc    {margin:auto;text-align:center;width:100%}
.gnav_menu  {width:100%;border-bottom-width:8px;border-bottom-style:solid}
.gnav_menu li   {display:inline-block;padding-top:10px;font-weight:600}
.gnav_menu li a {display:block;color:#000;font-size:120%!important;line-height:1;border-radius:10px 10px 0 0}
.jfe .gnav_menu li a      {padding:24px 7px 24px}
.vendor .gnav_menu li a   {padding:24px 34px 24px}
.customer .gnav_menu li a {padding:24px 34px 24px}
.gnav_menu li a:hover     {text-decoration:none}
@media only screen and (min-width:768px) and (max-width:991px) {
.jfe .gnav_menu li a      {padding:24px 1px;font-size:100%!important}
.vendor .gnav_menu li a   {padding:24px 34px 24px;font-size:100%!important}
.customer .gnav_menu li a {padding:24px 34px 24px;font-size:100%!important}
}
@media only screen and (min-width:992px) and (max-width:1280px) {
.jfe .gnav_menu li a      {padding:24px 3px;font-size:100%!important}
.vendor .gnav_menu li a   {padding:24px 34px 24px;font-size:100%!important}
.customer .gnav_menu li a {padding:24px 34px 24px;font-size:100%!important}
}*/

/*gnav*/
.gnav.pc        {margin:auto;text-align:center;width:100%}
.gnav_menu      {width:100%;border-bottom-width:8px;border-bottom-style:solid}
.gnav_menu li   {display:inline-block;padding-top:10px;font-weight:500}
.gnav_menu li a {display:block;color:#000;font-size:120%!important;line-height:1;border-radius:10px 10px 0 0}
.jfe .gnav_menu li a,
.vendor .gnav_menu li a,
.customer .gnav_menu li a {padding:24px 7px 24px}
.gnav_menu li a:hover     {text-decoration:none}
@media only screen and (min-width:768px) and (max-width:991px) {
.jfe .gnav_menu li a,
.vendor .gnav_menu li a,
.customer .gnav_menu li a {padding:24px 1px;font-size:100%!important}
}
@media only screen and (min-width:992px) and (max-width:1280px) {
.jfe .gnav_menu li a,
.vendor .gnav_menu li a,
.customer .gnav_menu li a {padding:24px 3px;font-size:100%!important}
}

@media only screen and (max-width:991px) {
.collapse-button        {top:19px;right:10px;width:30px;margin:0;position:absolute;cursor:pointer;z-index:100000}
.collapse-button a      {position:relative;display:block;height:16px;box-sizing:border-box}
.collapse-button span   { 
position:absolute;
display:inline-block;
left:0;
width:100%;
height:2px;
background-color:#212121;
border-radius:2px;
-webkit-transition:all 0.4s;
transition:all 0.4s;
box-sizing:border-box;
}
.collapse-button span:nth-of-type(1) {top:0}
.collapse-button span:nth-of-type(2) {top:7px}
.collapse-button span:nth-of-type(3) {bottom:0}
.collapse-button span:nth-of-type(2)::after {
position:absolute;
top:0;
left:0;
content:'';
width:100%;
height:2px;
background-color:#212121;
border-radius:2px;
-webkit-transition:all .4s;
transition:all .4s;
}
.collapse-button .active span:nth-of-type(2) {
  -webkit-transform:rotate(-45deg);
      -ms-transform:rotate(-45deg);
          transform:rotate(-45deg);
  }
.collapse-button .active span:nth-of-type(2)::after {
  -webkit-transform:rotate(90deg);
      -ms-transform:rotate(90deg);
          transform:rotate(90deg);
  }
.collapse-button .active span:nth-of-type(1) {
  -webkit-transform:translateY(20px) scale(0);
      -ms-transform:translateY(20px) scale(0);
          transform:translateY(20px) scale(0);
  }
.collapse-button .active span:nth-of-type(3) {
  -webkit-transform:translateY(-20px) scale(0);
      -ms-transform:translateY(-20px) scale(0);
          transform:translateY(-20px) scale(0);
  }
/*collapse-menu*/
.collapse-menu ul,
.collapse-menu li       {margin:0;padding:0;list-style:none}
.collapse-menu          {display:none}
.collapse-menu          {width:100%;text-align:left;-webkit-overflow-scrolling:touch;box-shadow:0px 6px 3px -3px rgba(0,0,0,0.25)}
.collapse-menu ul       {margin-bottom:-1px;border-bottom:1px solid #dedede}
.collapse-menu ul li    {position:relative;border-top:1px solid #dedede}
.collapse-menu ul li a  {display:block;color:#222;cursor:pointer;text-decoration:none;padding:12px 10px;font-size:100%}
.collapse-menu ul li a:hover    {color:#fff;text-decoration:none;opacity:1}
}

/*masternav*/
.masternav_menu         {text-align:center;margin:auto;}
.masternav_menu_list li {display:inline-block;vertical-align: middle;padding:10px 8px 0;font-size:96%;}
.masternav_menu_list li a {display:block;padding:10px 10px 15px;color: #000;border-bottom: 3px solid #fff}
.masternav_menu_list li.active a { font-weight:bold;border-bottom: 3px solid #1D9DCB }
@media only screen and (max-width:991px) {
.collapse-menu ul       {display:flex;flex-direction:row;flex-wrap:wrap;box-sizing:border-box}
.collapse-menu ul li    {flex-basis:50%;}
.collapse-menu ul li.chat,
.collapse-menu ul li.master    {flex-basis: 100%;display:block;padding:0}
.collapse-menu ul li.master.active    {flex-basis: 100%;display:block;padding:0}
.collapse-menu ul li.master .masternav_menu_list   {padding:0 0 20px}
.collapse-menu ul li.master li {border:none;text-align:center;}
.collapse-menu ul li.master li a {border:none;padding:6px 8px;color: #000;background:#efefef;border-radius:50px}
.collapse-menu ul li.master li a:visited {display: inline-block;}
.collapse-menu ul li.master li.active a { border-bottom: none;background:#1D9DCB;color:#fff }
}

/* ----------------------------------------------------------

Login

---------------------------------------------------------- */
.login body           {overflow-x:hidden;background:#fff}
.login #contents      {padding-top:0}
.login #main .block1,
.login #main .block2  {padding:0}
.login #main .block2  {width:100%;height:60vh;position:relative;background:#ffff00;margin:-60vh 0 0}
.login #main .block1  {background:url(../img/login/block_bg.png) top left no-repeat;background-size:cover}
.login #main .block2  {background:url(../img/login/footer_bg.png) top left no-repeat;background-size:cover}
.login_form_container {width:100%;height:100vh;position:relative;margin:auto;z-index:10000}
.login_form   {
position:absolute;
width:650px;
/*
height:520px;
*/
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
background:#fff;
padding:80px 50px;
border-radius:8px;
box-sizing:border-box;
box-shadow:0px 0px 30px rgba(100,100,100,0.35);
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
flex-wrap:wrap;
}
.login_form_block   {flex-basis:100%;margin:auto}
.login_form_logo    {margin:30px auto 59px;text-align:center}
.login_form .form-group {margin:15px auto;text-align:center}
.login_form .form-group input[type=text],
.login_form .form-group input[type=email],
.login_form .form-group input[type=password] {max-width:50%;margin:auto;padding:20px 6px}
.login_form .form-group input[type=submit]   {margin:20px auto 10px;font-size:140%!important;padding:26px 80px;line-height:0}
.login_form .form-group a.remind {text-decoration:underline;color:#666}
.login .copyright {position:absolute;bottom:0;width:100%;text-align:center}
@media only screen and (max-width:375px) {
.login_form   {width:95%;height:65%;padding:20px}
.login_form_logo      {margin:25px auto}
.login_form_logo img  {max-width:256px}
.login_form .form-group input[type=text],
.login_form .form-group input[type=email],
.login_form .form-group input[type=password] {max-width:90%}
.login_form .form-group input[type=submit]   {margin:10px auto}
}
@media only screen and (min-width:376px) and (max-width:600px) {
.login_form   {width:95%;height:65%;padding:75px 50px}
.login_form_logo      {margin:25px auto}
.login_form_logo img  {max-width:256px}
.login_form .form-group input[type=text],
.login_form .form-group input[type=email],
.login_form .form-group input[type=password] {max-width:80%}
.login_form .form-group input[type=submit]   {margin:10px auto}
}
@media screen and (orientation:landscape){
.login body         {overflow:hidden;}
.login_form   {width:95%;height:90%;padding:20px 0}
.login_form_logo      {margin:auto}
.login_form .form-group input[type=submit]   {margin:auto}
}
@media only screen and (min-device-width:768px) {
.login_form   {
	width:650px;
/*
	height:520px;
*/
	padding:100px 50px;
}
.login_form_logo      {margin:25px auto}
}

/*IE11*/
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .login_form_container .form-control {height: 50px!important;padding:10px 5px!important;}
}

/* ----------------------------------------------------------

Article

---------------------------------------------------------- */
/*form-group*/
.form-group {margin:auto 2.5px}

/*datepicker*/
.datepicker-days th.dow:first-child,
.datepicker-days td:first-child {color:#f00}
.datepicker-days th.dow:last-child,
.datepicker-days td:last-child {color:#00f}

/*table*/
.table_navigation_top   {position:relative;}
.table_navigation_top .table_btn_group 	  {flex:0 0 10%;order:1;text-align:left;}
.table_navigation_top .table_search       {flex:0 0 80%;order:2;text-align:left;}
.table_navigation_top .table_number       {flex:0 0 10%;order:3;text-align:right;position:absolute;right:0;bottom:0}
.table_pagination_grounp {order:4;text-align:right}
.table_search .form-group {display:inline-block;vertical-align: middle;margin:4px 0 0}
.table_btn_group span {display:inline-block;margin-right:5px;text-align:left;}
.table_pagination a {color:#000}
.table_pagination span.current,
.table_pagination span a  {border:1px solid #ccc;padding:8px 12px;border-radius:4px;font-size:80%}
.table_pagination span.current,
.table_pagination span a:hover    {font-weight:600;background:#6c757d;border-color:#6c757d;color:#fff}
/*.table_responsive   {
overflow: auto;
min-width: 100%
}
.table_responsive table {overflow: auto; min-width: 100%}*/
.table_conetent     {margin:10px auto} 
.table_conetent table tbody td,
.table_conetent table tbody th    {box-sizing:border-box}
.table_conetent .tb_check         {min-width:1px;width:2%;text-align:center;padding:10px 10px!important} 
.table_conetent .tb_order_no      {
	min-width:80px;
	width:7%;
	text-align:center;
	padding:10px 5px!important;
} 
.table_conetent .tb_status        {min-width:100px;width:9%;text-align:center;padding:10px 5px!important} 
.table_conetent .tb_orderer       {
	min-width:200px;
	width:10%;
	text-align:left;
	padding:10px 5px!important;
	max-width: 500px;
} 
.table_conetent .tb_item          {min-width:250px;width:7%;text-align:left;padding:10px 5px!important} 
.table_conetent .tb_purchaser     {
	min-width:120px;
	width:6%;
	text-align:left;
	padding:10px 5px!important
} 
.table_conetent .tb_number        {
	min-width:120px;
	width:6%;
	text-align:right;
	padding:10px 5px!important;
	padding-right: 16px!important;
} 
.table_conetent .tb_date1         {
	min-width:150px;
	width:8%;
	padding:10px 5px!important;
	padding-right: 8px!important;
}

.table_conetent .tb_date2         {
	min-width:150px;
	width:10%;
	padding:10px 5px!important;
	padding-right: 9px!important;
} 

.table_conetent .tb_last_date {
	text-decoration:underline;
	min-width:150px;
	width:10%;
	padding:10px 5px!important;
	padding-right: 9px!important;
}
.table_conetent .tb_last_number {
	text-decoration:underline;
	min-width:120px;
	width:6%;
	text-align:right;
	padding:10px 5px!important;
	padding-right: 16px!important;
} 

.table_conetent .tb_remarks       {
	min-width:250px;
	width:15%;
	padding:10px 0!important;
	min-width:220px;
} 
.table_conetent .tb_action        {min-width:auto;width:6%;text-align:right;padding:10px 5px!important} 

.table_conetent .tb_date_apx1         {
	min-width:100px;
	padding:10px 5px!important;
	padding-left: 16px!important;
}

.table_conetent .tb_date_apx2         {
	min-width:100px;
	padding:10px 5px!important;
	padding-left: 16px!important;
}

.table_conetent thead th          {
/*
	text-align:center!important;
*/
	border-top:none;
} 
.table_conetent .disabled         {color:#999}
.table_conetent .tb_number input  {text-align:right;} 
.table_conetent .tb_orderer span.address {display:block;color:#999;font-size:95%}
.table_navigation_top .datetimepicker-input {width:100px!important}
.table_navigation_top .table_pagination_grounp  {text-align:right;margin-top:5px;display:block}
.table_navigation_top .table_btn_group select   {
	width: 100px;
	min-width: 100px;
	max-width: 200px;
}
.table_navigation_top .input_radio_group {border:1px solid #dedede;border-radius:0 4px 4px 0;box-sizing:border-box;display:inline-flex}
.table_navigation_top .input_radio_group .form-check-inline {padding:0 10px}
.table_navigation_top .input_radio_group .form-check-inline input[type=radio] {margin-right:2px}
.table_pagination   {display: inline-block;line-height:2.5em}
.input-group-prepend span {font-size: 90%}

@media only screen and (max-width:767px) {
.table_navigation_top .table_search         {order:1;margin:0 auto  15px;flex:0 0 100%;;}
.table_navigation_top .table_btn_group      {order:2;text-align:left;}
.table_navigation_top .table_pagination     {display:none}
.table_navigation_bottom .table_btn_group   {order:1;margin:auto auto 15px}
.table_navigation_bottom .table_number      {order:2;margin:25px auto 0;text-align:center}
.table_navigation_bottom .table_pagination  {order:3;margin:10px auto 0;text-align:center}
.table_navigation_bottom .table_search      {display:none}
.table_pagination_grounp {order:3;margin:10px auto 0;text-align:center;flex:0 0 100%;max-width:100%}
}
@media only screen and (min-width:768px) and (max-width:1280px) {
.table_navigation_top .table_search         {order:1;margin:0 auto 15px;flex:0 0 100%;max-width:100%}
.table_navigation_top .table_btn_group      {order:4;text-align:left;flex:0 0 100%;max-width:100%;}
.table_navigation_top .table_pagination     {display:none}
.table_navigation_bottom .table_btn_group   {order:1;margin:auto auto 15px;flex:0 0 100%;max-width:100%}
.table_navigation_bottom .table_number      {order:2;margin:25px auto 0;text-align:center;flex:0 0 100%;max-width:100%}
.table_navigation_bottom .table_pagination  {order:3;margin:10px auto 0;text-align:center;flex:0 0 100%;max-width:100%}
.table_navigation_bottom .table_search      {display:none}
.table_pagination_grounp {order:3;margin:10px auto 0;text-align:center;flex:0 0 100%;max-width:100%}
}
@media only screen and (max-width:991px) {
.table_navigation_top .form-group {margin:2px 1px}
.table_responsive                 {padding-bottom:0;margin-bottom:0;padding-top:0;margin-top:0}
}
@media only screen and (max-width:575px) {/*
body {position:relative;}
.table_responsive {position:relative;}
.tb_remarks .modal {z-index: 10000000000!important;position:absolute;}
.tb_remarks .remarks_button {background:none;padding:0;margin:0;color:#222;border:none;box-shadow:none;outline:none;font-size:100%!important}
.tb_remarks .remarks_button:hover,
.tb_remarks .remarks_button:focus {background:none;padding:0;margin:0;color:#999;border:none;box-shadow:none;outline:none;font-size:100%!important}
.tb_remarks .modal-header   {border-bottom:none!important}
.tb_remarks .modal-header .close span {font-size:200%;margin-top: -20px!important;background:none;}
.tb_remarks .modal-body span {display: block;margin-top:20px}
.tb_remarks .modal-body span .btn {font-size:110%!important}
.table_conetent .tb_remarks {min-width:100px;width:15%;padding:10px!important} 
*/
.tb_remarks {position:relative;}
.tb_remarks .dropdown-menu {position: absolute;width: 100%}
.tb_remarks .remarks_dropdown {cursor: pointer}
.tb_remarks .dropdown-menu {padding:10px;width: 200px!important}
.tb_remarks .dropdown-menu span {font-size: 90%}
.tb_remarks .dropdown-menu input[type=submit] {margin:5px auto;text-align:center;display:block;}
}


/* ----------------------------------------------------------

Detail

---------------------------------------------------------- */
/*main_title*/
.detail .main_title {}
.detail .main_title .status_icon {display:inline-block;vertical-align: middle;}
.detail .main_title .status_icon span {
display:block;
margin-top:-4px;
margin-left: 10px;
font-size:12pt;
border:1px solid #dedede;
padding:6px 20px;
background:#fff;
border-radius:50px
}
.detail .main_title .status_icon .status1 {color:#C1272D}
@media only screen and (max-width:991px) {
.detail .main_title .status_icon span {margin-top:-2px;margin-left: 0;}
}

/*detail_table*/
.detail_table .table  td span.block {display:block;}
.detail_table_conetent tbody th.tb_option,
.detail_table_conetent tbody td.tb_field {border:2px solid #fff}
.detail_table_conetent .table {border:none}
.detail_table_conetent tbody .tb_option {vertical-align:middle;width:15%;background:#F5F5F5} 
.detail_table_conetent tbody .tb_field  {vertical-align:middle;text-align: left!important} 
@media only screen and (max-width:991px) {
.detail_table_conetent tbody .tb_option,
.detail_table_conetent tbody .tb_field  {width:100%!important;display:block;position:relative} 
.detail_table_conetent tbody .tb_option {padding-top:14px;padding-bottom: 5px;margin-top: -1px} 
.detail_table_conetent tbody .tb_field  {padding-bottom:14px;padding-top: 5px;border:none;margin-top: -1px} 
.detail_table_conetent tbody .tb_field:nth-last-child(1)  {border-bottom:1px solid #dedede;} 
.detail_table_conetent tbody .tb_option.null,
.detail_table_conetent tbody .tb_field.null  {display:none;} 
.form_button .col-md-auto {display:block;margin:auto;text-align:center;}
}

.table.border_color1,
.table.border_color2,
.table.border_color3,
.table.no_border {margin-bottom:0px}
.table.border_color1 tbody th.tb_option,  .table.border_color1 tbody td.tb_field,
.table.border_color2 tbody th.tb_option,  .table.border_color2 tbody td.tb_field,
.table.border_color3 tbody th.tb_option,  .table.border_color3 tbody td.tb_field,
.table.no_border tbody th.tb_option,  .table.no_border td.tb_field {width:16.6666666666%!important }
.table.border_color1 {border:6px solid #3ccb3e!important}
.table.border_color2 {border:6px solid #fd6cb4!important}
.table.border_color3 {border:6px solid #2cb2aa!important}
.detail .form_button   {margin-top: 25px}
@media only screen and (max-width:979px) {
.table.border_color1 tbody th.tb_option,  .table.border_color1 tbody td.tb_field,
.table.border_color2 tbody th.tb_option,  .table.border_color2 tbody td.tb_field,
.table.border_color3 tbody th.tb_option,  .table.border_color3 tbody td.tb_field,
.table.no_border tbody th.tb_option,  .table.no_border td.tb_field {width:100%!important }
}

/* ----------------------------------------------------------

Mypage

---------------------------------------------------------- */
/*mypage_block*/
.mypage_block .block1 .welcom_title {font-size:120%}
.mypage_block .block1 h2,
.mypage_block .block1 .edit_link {display:inline-block;vertical-align:middle;}   
.mypage_block .block1 .edit_link a {display:block;margin:-4px 0 0 10px;font-size: 16px!important;line-height:1.345em}   
.mypage_block .block2 .edit_link a {margin-right:10px}   
@media only screen and (max-width:991px) {
.mypage_block .col-md-9 {margin: auto;width:100%;text-align:center;}
.mypage_block .block1 .edit_link {display:none;}   
.mypage_block .block2 .edit_link {display:block;text-align: left;}   
.mypage_block .block2 .table_navigation_top  {margin-top: -25px}
.mypage_block .block2 .master_table_conetent  {margin-top: -25px;}
}

/*mypage_table*/
.table_conetent.mypage_table  {border:none;border-bottom:1px solid #cdcdcd}
.mypage_table a  {text-decoration:underline;color: #000}
.mypage_table .tb_action  {width:50px}
.mypage_table .tb_action i    {font-size:160%;color:#808080!important}
.mypage_table_conetent tbody .tb_option {width:25%!important} 
.mypage_table_conetent tbody .tb_field  {width:75%!important;text-align:left!important} 
@media only screen and (max-width:991px) {
.mypage_table_conetent .form_button {margin:auto;text-align:center}
.mypage_table_conetent tbody .tb_option,
.mypage_table_conetent tbody .tb_field  {width:100%!important;display:block;position:relative} 
.mypage_table_conetent tbody .tb_option {padding-top:14px;padding-bottom: 5px;margin-top: -1px} 
.mypage_table_conetent tbody .tb_field  {padding-bottom:14px;padding-top: 5px;border:none;margin-top: -1px} 
.mypage_table_conetent tbody .tb_field:nth-last-child(1)  {border-bottom:1px solid #dedede;} 
.form_button .col-md-auto:nth-child(odd) {display:block;margin-top:25px}
.form_button .col-md-auto:nth-child(even) {display:block;margin-top:15px}
}


/* ----------------------------------------------------------

Cart

---------------------------------------------------------- */
.cart         {padding:0;margin:0}
.cart_form,
.order_form   {flex-basis:50%}

/*select_link*/
.select_link {display:inline-block;vertical-align:middle;} 
.select_link select {font-size:16px!important;margin:-5px 0 0 ;}
@media only screen and (max-width:991px) {
.select_link  {display:block;}
.select_link select {;margin:5px 0 0;width:98%;}
}

/*order_form*/
.order_form .block2     {padding-bottom:40px!important}
.order_form_container   {padding:0 20px;box-sizing:border-box}
.order_form .main_title {padding-left:16px}
.order_table_conetent   {
	padding:15px 10px;
	box-sizing:border-box;
	border-radius:16px;
	box-shadow:0px 0px 10px rgba(100,100,100,0.5);
}
.jfe .order_table_conetent      {border:4px solid #1D9DCB;}
.customer .order_table_conetent {border:4px solid #028a00;}
.order_table_conetent tbody th.tb_option,
.order_table_conetent tbody td.tb_field  {border:3px solid #fff!important;vertical-align:middle;padding:20px}
.order_table_conetent tbody th.tb_option {width:30%!important} 
.order_table_conetent tbody td.tb_field  {width:70%!important} 
.order_table_conetent tbody th:nth-child(odd),
.order_table_conetent tbody td:nth-child(odd)   {background:#F7F7F7}
.order_table_conetent tbody th:nth-child(even),
.order_table_conetent tbody td:nth-child(even)  {background:#fff}
.order_form .form-group input[type=submit]      {margin:25px auto;font-size:140%!important;padding:26px 80px;line-height:0}

/*cart_form*/
.cart_form .block2    {background:rgba(242,242,242,0.5)!important;padding-bottom:0;min-height:100%}
.jfe .cart_title      {background:rgba(18,105,136,0.5);padding:41px 20px;margin:-40px auto}
.customer .cart_title {background:rgba(35,109,33,0.5);padding:41px 20px;margin:-40px auto}
.cart_title_icon      {position:relative;display:inline-block;margin-right:30px;vertical-align:middle}
.cart_title_icon img  {max-width:46px}
.cart_title_num       {position:absolute;top:0;left:40px}
.cart_title_num span  {background:#C1272D;width:30px;height:10px;padding:5px 10px;border-radius:200px;color:#fff;font-size:120%}
.cart_title_text      {font-size:260%;display:inline-block;vertical-align:middle;line-height:1;padding:0;margin:0}
.cart_form_container  {padding:0 20px;box-sizing:border-box}
.cart_form_conetent   {
padding:12px 0px;
background:#fff;
box-sizing:border-box;
border-radius:12px;
box-shadow:0px 0px 8px rgba(100,100,100,0.5);
margin-bottom:12px;
}
.jfe .cart_form_conetent      {border:4px solid #1D9DCB;}
.customer .cart_form_conetent {border:4px solid #028a00;}

.cart_form_field .form-group {
	display:inline;
	vertical-align:middle;
	font-size:96%;
	margin:auto;
}
.cart_form_check  {
	padding-right: 8px;
}
.cart_form_action {
	padding-left: 8px;
}

.cart_form_field {
	padding-left: 4px;
	padding-right: 4px;
}

.cart_form_field .form-group .lt_type {
	width:8%;
	text-align:left
}

.customer .autofill_order {
	background-color: #9cf;
	border-color: #36c;
	
/*
	background-color: #ffcc33;
	border-color: #999;
*/
}

.cart_form_conetent label {
	margin-bottom: 0;
}

.cart_form_field .form-group .lt_item {
	width:53%;
	text-align:left;
}
.cart_form_field .form-group .lt_number {
	width:15%;
	text-align:left;
}
.cart_form_field .form-group .lt_date {
	width:28%;
	text-align:left
}
.cart_form_field .form-group .lt_remarks {
	width:100%
}
.cart_form_action button.close span {font-size:200%!important;text-align:right}
.cart_form .form_button,
.order_form .form_button {margin:auto;text-align:center}
@media only screen and (max-width:467px) {
.cart_form,
.order_form   {flex-basis:100%}
.order_table_conetent .table tbody th.tb_option,
.order_table_conetent .table tbody td.tb_field {display:block!important;width:100%!important;position:relative;padding:10px 0}
.cart_form_check  {
	flex:0 0 7%;
	max-width:10%;
	padding-right: 8px;
}
.cart_form_field  {
	flex:0 0 83%;
	max-width:80%;
}
.cart_form_action {
	flex:0 0 7%;
	max-width:10%;
	padding-left: 8px;
}
}
@media only screen and (min-width:468px) and (max-width:991px) {
.cart_form,
.order_form       {flex-basis:100%}
.cart_form_check  {
	flex:0 0 7%;
	max-width:10%;
	padding-right: 8px;
}
.cart_form_field  {
	flex:0 0 83%;
	max-width:80%;
}
.cart_form_action {
	flex:0 0 7%;
	max-width:10%;
	padding-left: 8px;
}
}

/* ----------------------------------------------------------

Chat

---------------------------------------------------------- */
/*chat_base_structure*/
.chat ul, .chat ul li {list-style:none;padding:0;margin:0}
.chat .block2 {margin-top:-12px!important;padding-top:0!important;position:relative}
.chat_header  {border-top:1px solid #ccc;min-height:66px}
.chat_body    {border-top:1px solid #ccc; /* min-height:100% */}
.chat_footer  {border-top:1px solid #ccc;border-bottom:1px solid #ccc; /* margin-top:-66px */}
.chat_left    {float:left;width:380px;border-right:1px solid #ccc}
.chat_right   {float:left;width:100%;margin-left:-380px;padding-left:380px}
.chat_blank          {min-height:60px;border-right:1px solid #ccc;margin-right:-1px}
.chat_message_form   {min-height:60px}
.chat_action_btn  {position:relative;margin:auto;padding-top:16px;text-align:center}
.chat_user_info   {margin:0;padding:10px 10px 0;text-align:left;box-sizing:border-box}

/*chat_responsive*/
.collapse-menu2          {display:block;}
@media only screen and (max-width:991px) {
.chat .block1 .col-md-2,
.chat .block1 .col-md-10 {flex:0 0 100%;max-width:100%;}
.chat .block1 .col-md-10 {margin:50px auto 0;padding-top:10px;width:100%;text-align:center;}
.chat .block1 .col-md-10 .form-group:nth-child(1)  {width:60%!important;}
.chat .block1 .col-md-10 .form-group:nth-child(1) input[type=text]  {width:100%!important;}
.chat_left    {float:none;width:100%;border-right:none}
.chat_right   {float:none;width:100%;margin-left:auto;padding-left:0;}
.chat_blank   {border-right:none}
.chat_header  {min-height:auto;padding-bottom:12px;position:relative;background:#fff;}
.chat_body    {min-height:90%;position:relative;;background:#fff;}
.chat_body .chat_user_button        {top:-45px;right:10px;width:30px;margin:0;position:absolute;cursor:pointer;z-index:100000}
.chat_body .chat_user_button a      {position:relative;display:block;top:50%;}
.chat_body .chat_user_button span:after     {position:absolute;right:10px;color:#999;font-size:140%;line-height:normal;font-family:"fontAwesome";font-weight:900}
.chat_body .chat_user_button span::after          {content:'\f078'}
.chat_body .chat_user_button .active span::after  {content:'\f077'}
.chat_footer      {position:relative;margin-top:-63px;background:#fff;;}
.collapse-menu2   {display:none}
.collapse-menu2   {width:100%;text-align:left;-webkit-overflow-scrolling:touch;}
}

.chat_user .list-group-item {
	padding: 0.25em 0;
}

/*chat_user_icon*/
.chat_user_info {display:flex;align-items:center;}
.chat_user_icon,
.chat_user_name {
	margin-left:-4px;
}
.chat_user_icon img {max-width:40px;border-radius:100px}

/*chat_user_info*/
.chat_user_info  .chat_user_icon img  {max-width:46px}
.chat_user_info  .chat_user_name {font-size:120%;font-weight:600;line-height: 1.2345678em}

/*chat_user_list*/
.chat_user_list  {position:relative}
.chat_user_list li a {display:block;padding:30px 10px;color:#000;box-sizing:border-box}
.chat_user_list li.active a {background:#f2f2f2}
.chat_user_list li .chat_user_icon img  {max-width:30px}
.chat_user_list li .chat_user_name  {font-size:100%}

.chat_user_name {
	background-color: #eeffee;
	padding: 2px 8px;
}

.chat_member_list {
	font-size: 100%;
	padding: 0 1em;
}

.chat_product_list {
	background-color: #eeeeee;
	font-size: 100%;
	padding: 0 1em;
}

.product_name_option {
	padding: 2px 8px;
}

/*chat_message*/
.chat_content {
	padding: 15px 4px;
	box-sizing: border-box;
	}
.chat_message:after,
.chat_message:before {
	clear: both;
	content: "";
	display: block;
}
.chat_message {
	padding: 4px 8px 12px 8px;
	margin-bottom: 16px;
	border-top: 1px solid #eee;
/*	background-color: #eee;*/
}
.chat_message:after {
/*	border-top: 1px solid #eef;*/
/*	background-color: #eee;*/
}
.chat_message:nth-last-child(1) {margin-bottom:0}
.chat_message_img {margin:0;width:46px}
.chat_message_img img {max-width:46px}
.chat_message_text {position:relative;padding:20px 12px;border-radius:6px}
.chat_message_comment {margin:0 0 20px;line-height:1.789em}
.chat_message_status {display:block;margin-top:5px}
.chat_message_status span {display:block;font-size:80%}
.chat_message_status .unread  {font-weight:600;color:#000}
.chat_message_status .read    {font-weight:normal;color:#555}
@media only screen and (max-width:991px) {
.chat_content {padding:30px 20px 0;}
.chat_message_text {position:relative;padding:16px ;border-radius:6px}
.chat_message_comment {margin:auto;line-height:1.6789em}
}

/*.chat_message.r*/
.chat_message.r .chat_message_img     {float:right;margin-left:-80px;width:20vw;}
.chat_message.r .chat_message_text    {max-width:35vw;margin-right:8vw;margin-left:5vw;float:right}
.chat_message.r .chat_message_status  {margin-right:8vw;margin-left:5vw;float:right}
.chat_message.r .chat_message_text:before {
position:absolute;
content:'';
border:10px solid transparent;
top:15px;
right:-20px;
}
.chat_message.r .chat_message_text:after {
position:absolute;
content:'';
border:10px solid transparent;
border-left-width:10px;
border-left-style:solid ;
top:15px;
right:-19px;
}
@media only screen and (max-width:991px) {
.chat_message.r .chat_message_text    {max-width:60vw;margin-right:25vw;margin-left:2%;}
.chat_message.r .chat_message_status  {margin-right:15vw;margin-left:2%;}
}

.jfe .chat_message.r .chat_message_text            {background:#DEF2F7}
.jfe .chat_message.r .chat_message_text:after      {border-left-color:#DEF2F7}
.customer .chat_message.r .chat_message_text       {background:#E1FADB}
.customer .chat_message.r .chat_message_text:after {border-left-color:#E1FADB}
.vendor .chat_message.r .chat_message_text         {background:#F8E9EE}
.vendor .chat_message.r .chat_message_text:after   {border-left-color:#F8E9EE}

/*.chat_message.l*/
.chat_message.l .chat_message_img     {
	float:left;
	margin-right:-100px;
	width:20vw;
/*	text-align: right; */
}
.chat_message.l .chat_message_text    {
	max-width:35vw;
	margin-left:8vw;
	margin-right:5vw;
	float:left;
	background:#f0f0f0;
}
.chat_message.l .chat_message_status  {
	margin-left:5vw;
	margin-right:5vw;
	float:left
}
.chat_message.l .chat_message_text:before {
	position:absolute;
	content:'';
	border:10px solid transparent;
	top:15px;
	left:-20px;
}
.chat_message.l .chat_message_text:after {
	position:absolute;
	content:'';
	border:10px solid transparent;
	border-right-width:10px;
	border-right-style:solid ;
	border-right-color:#f0f0f0 ;
	top:15px;
	left:-19px;
}
@media only screen and (max-width:991px) {
.chat_message.l .chat_message_text    {max-width:60vw;margin-left:25vw;margin-right:2%;}
.chat_message.l .chat_message_status  {margin-left:15vw;margin-right:2%;}
}

/*chat_message_form*/
.chat_message_form {padding:0 20px 0 0}
.chat_message_form_group  {display:inline-block;vertical-align:middle}
.chat_message_form .text_message  {margin-top:0}
.chat_message_form .btn_submit    {padding-top:12px}
.chat_message_form label,
.chat_message_form .clip {
background:url(../img/chat/icon_file@2x.png) 50% 50% no-repeat;
background-size:30px;
cursor:pointer;
display:inline-block;
text-indent:-9999px;
width:60px;
height:60px;
outline:0
}
.chat_message_form input {outline:0}
.chat_message_form .file_upload input[type="file"] {display:none}
.chat_message_form .text_message {width:80%!important}
.chat_message_form .text_message input {padding:30px 10px;width:100%!important;border:none}
.chat_message_form .btn_submit {/* float:right */}
@media only screen and (max-width:991px) {
.chat_message_form .text_message  {margin-top:8px}
.chat_message_form .btn_submit    {padding-top:10px}
.chat_message_form .text_message {width:60%!important}
}
@media screen and (orientation:landscape){
.chat_message_form .text_message {width:80%!important}
}
@media only screen and (min-device-width:991px) {
.chat_message_form .text_message {width:80%!important}
}

/*modal-content*/
#modal-content {
width:75%;
height: 80%;
z-index:200;
position:fixed;
overflow-y:scroll;
top:0%;right:0;bottom:0;left:0;
margin:auto;
display:none;
}
#modal-overlay{
z-index:1;
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:120%;
background-color:rgba(0,0,0,0.65);
}
@media only screen and (max-width:991px) {
#modal-content  {width:100%;height:100vh;}
}

/* ----------------------------------------------------------

Master

---------------------------------------------------------- */
/*master_block*/
.master_block .block1  {z-index:11111;position:relative;}
.master_block .block1 h2,
.master_block .block1 .edit_link {display:inline-block;vertical-align:middle;}   
.master_block .block1 .edit_link a {display:block;margin:-4px 0 0 10px;}   
.master_block .block2 .edit_link a {margin-right:10px}   
@media only screen and (max-width:991px) {
.master_block .col-md-9 {margin: auto;width:100%;text-align:center;}
.master_block .block1 .edit_link {display:none;}   
.master_block .block2 .edit_link {display:block;text-align: left;}   
.master_block .block2 .table_navigation_top  {margin-top: -25px}
.master_block .block2 .master_table_conetent  {margin-top: -25px;}
}

/*master_table*/
.master_table thead th {text-align:left!important}
.master_table thead th.tb_check {text-align:center!important}
.master_table tbody td span.block {display:block;}
.master_table_conetent tbody .tb_option {width:25%!important} 
.master_table_conetent tbody .tb_field  {width:75%!important;text-align:left!important} 
@media only screen and (max-width:991px) {
.master_table_conetent .form_button {margin:auto;text-align:center}
.master_table_conetent tbody .tb_option,
.master_table_conetent tbody .tb_field  {width:100%!important;display:block;position:relative} 
.master_table_conetent tbody .tb_option {padding-top:14px;padding-bottom: 5px;margin-top: -1px} 
.master_table_conetent tbody .tb_field  {padding-bottom:14px;padding-top: 5px;border:none;margin-top: -1px} 
.master_table_conetent tbody .tb_field:nth-last-child(1)  {border-bottom:1px solid #dedede;} 
.form_button .col-md-auto:nth-child(odd) {display:block;margin-top:25px}
.form_button .col-md-auto:nth-child(even) {display:block;margin-top:15px}
}

/* ----------------------------------------------------------

Footer

---------------------------------------------------------- */
.copyright        {font-size:90%;color:#fff}
.login .copyright {color:#555}

/* ----------------------------------------------------------

Color

---------------------------------------------------------- */
/*btn*/
.btn-secondary         {background:#fff;border-color:#ccc;border-bottom:2px solid #ccc;color: #000}
.btn-secondary:hover,
.btn-secondary:focus   {background:#aaa;border-color:#aaa;border-bottom:2px solid #000;color: #fff}
.btn-default,
.table_pagination span.current,
.table_pagination a:hover,
.table_pagination a:focus   {background:#aaa!important;border-color:#aaa!important}
.login_form .form-group input[type=submit]        {background:#1D9DCB;border-color:#1D9DCB;border-bottom:2px solid #0E6177;color: #fff}
.login_form .form-group input[type=submit]:hover,
.login_form .form-group input[type=submit]:focus  {background:#0E6177;border-color:#0E6177;border-bottom:2px solid #033E4C}

/*jfe*/
.jfe .btn-primary           {background:#1D9DCB;border-color:#1D9DCB;border-bottom:2px solid #0E6177;color: #fff}
.jfe .btn-primary:hover,
.jfe .btn-primary:focus     {background:#0E6177;border-color:#0E6177;border-bottom:2px solid #033E4C}
.jfe .gnav_menu             {border-bottom-color:#1D9DCB;background:#DEF2F7}
.jfe .gnav_menu li a:hover  {background:#1D9DCB;color:#fff}
.jfe .gnav_menu li.active a,
.jfe .gnav_menu li.active a:hover,
.jfe .collapse-menu ul li a:hover  {background:#1D9DCB;color:#fff}
.jfe #main .block1  {background:url(../img/jfe/block_bg.jpg) top left no-repeat}
.jfe #main .block2  {background:#fff}
.jfe #footer        {background:url(../img/jfe/footer_bg.jpg) top left no-repeat}

/*vendor*/
.vendor .btn-primary           {background:#DA2080;border-color:#DA2080;border-bottom:2px solid #770041;color: #fff}
.vendor .btn-primary:hover,
.vendor .btn-primary:focus     {background:#770041;border-color:#770041;border-bottom:2px solid #47022B}
.vendor .gnav_menu             {border-bottom-color:#da2080;background:#f7eaef}
.vendor .gnav_menu li a:hover  {background:#da2080;color:#fff}
.vendor .gnav_menu li.active a,
.vendor .gnav_menu li.active a:hover,
.vendor .collapse-menu ul li a:hover  {background:#da2080;color:#fff}
.vendor #main .block1  {background:url(../img/vendor/block_bg.jpg) top left no-repeat}
.vendor #main .block2  {background:#fff}
.vendor #footer        {background:url(../img/vendor/footer_bg.jpg) top left no-repeat}

/*customer*/
.customer .btn-primary          {background:#028A00;border-color:#028A00;border-bottom:2px solid #024700;color: #fff}
.customer .btn-primary:hover,
.customer .btn-primary:focus    {background:#024700;border-color:#024700;border-bottom:2px solid #022101}
.customer .gnav_menu            {border-bottom-color:#028a00;background:#e6fade}
.customer .gnav_menu li a:hover {background:#028a00;color:#fff}
.customer .gnav_menu li.active a,
.customer .gnav_menu li.active a:hover,
.customer .collapse-menu ul li a:hover  {background:#028a00;color:#fff}
.customer #main .block1  {background:url(../img/customer/block_bg.jpg) top left no-repeat}
.customer #main .block2  {background:#fff}
.customer #footer        {background:url(../img/customer/footer_bg.jpg) top left no-repeat}