/* 기본설정시작 */
a{ 
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.hidden{ 
    width: 1px;
    height: 1px; 
    font-size: 0px;
    line-height: 0px;
    position: absolute;
}

.flexline{
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
}
/* .loading{
    width: 20%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0.9;
    display: none;
} */
/* From uiverse.io by @mobinkakei */
/* From uiverse.io by @fanishah */
  
.bar {
    width: 10px;
    height: 70px;
    background: hsl(0, 100%, 50%);
    display: inline-block;
    transform-origin: bottom center;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    animation: loader8913 1.2s linear infinite;
}

.bar1 {
animation-delay: 0.1s;
}

.bar2 {
animation-delay: 0.2s;
}

.bar3 {
animation-delay: 0.3s;
}

.bar4 {
animation-delay: 0.4s;
}

.bar5 {
animation-delay: 0.5s;
}

.bar6 {
animation-delay: 0.6s;
}

.bar7 {
animation-delay: 0.7s;
}

.bar8 {
animation-delay: 0.8s;
}
  
@keyframes loader8913 {
    0% {
        transform: scaleY(0.1);
    }

    50% {
        transform: scaleY(1);
        background: yellowgreen;
    }

    100% {
        transform: scaleY(0.1);
        background: transparent;
    }
}
  
 
.basic{
    width: 1000px; 
    height: 770px;
    margin: 0px auto;
    position: relative;
    left: 0px;
    top: 125px;
    /* padding: 40px 4.7em; */
    box-sizing: border-box;
    border-radius: 5px;
    background: rgb(248, 248, 248);
    border-radius: 10px;
}

/* 기본설정끝 */
/* 바로가기메뉴시작 */      
ul.skipmenu_list>li>a:focus{        
    width: 100%;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    background: black;
    color: white;
    text-align: center;
    z-index: 9999; 
    left: 0px;
    top:0px;
}

.none{
    display: none;
}


.grayLayer{
    display: none; 
    height:100%;
    width:100%; 
    position:fixed;
    left:0;
    top:0;      
    background:black; 
    opacity:0.5;
    z-index: 6;
    /* pointer-events : none; */
}


/* 스크롤바 막대 설정*/

body::-webkit-scrollbar {
    width: 8px;  /* 스크롤바의 너비 */
}

body::-webkit-scrollbar-thumb {
    height: 5%; /* 스크롤바의 길이 */
    background: #acb0bb; /* 스크롤바의 색상 */
    border-radius: 10px;
}

body::-webkit-scrollbar-track {
    background: rgb(229, 230, 235);  /*스크롤바 뒷 배경 색상*/
}


/* 바로가기메뉴끝 */
/* 상단영역시작 */

div#header_wrap{
    width: 100%;
    height: 78px;
    position: fixed;
    margin-top: -2px;
    z-index: 26 !important;
    background: rgb(255, 255, 255);
}
.top_menu{
    background: #eff0f3;
    /* background: #f5f5f5; */
    height: 28px;
    border-bottom: solid 1px #e3e6eb;
}
.top_menu::after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: relative;
    border-bottom: solid 1px #e0e3e7;
    top: -80px;
}

.top_menu_list{
    width: 1300px;
    height: 100%;
    margin: 0px auto;
    /* background-color: rgb(210, 210, 211); */
}
/* div#header_wrap::after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: relative;
    left: 0px;
    top:-1px;
    background-color: #cecfd1;
} */

header{
    width: 100%;
    background: rgb(255, 255, 255);
    /* border-bottom: solid 1px #cecfd1; */
}
header::after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: relative;
    left: 0px;
    top:0px;
    background-color: #cecfd1;
}
.header_wrap{
    width: 1300px;
    height: 78px;
    margin: 0px auto;
    position: relative;
    left: 0px;
    top: 0px;
    /* background: rgb(201 155 155); */
}
h1#friend_logo{       
    width: 99px;
    height: 50px;
    position: relative;
    left: -1%;
    top: 5px;
    /* background-color: darkblue; */
}
h1#friend_logo img{
    width: 100%;
    display: block;
}




nav#friend_mainmenu{ 
    width: 100%;
    display: flex;
    height: 33px;
    margin-top: -28px;
    /* background: darkgrey; */
}

/* 모바일메뉴바 제거 */
nav#friend_mainmenu_mo{ 
  display: none;
}
ul#mainmenu_list{
    width: 97%;
    height: 18px;
    position: relative;
    left: 83px;
    top: 9px;
    /* background-color: rgb(216, 216, 216); */
}
ul#mainmenu_list>li{
    width: 10%;
    height: 18px;
    /* background: darkcyan; */
    float: left;
    text-align: center;
    margin-left: 17px;
}
.submenu_list{
    float: right;
    width: 10.5%;
    z-index: 9;
    display: flex;
    margin-left: -4%;
    font: normal 0.85em 'Noto sans KR';
    /* background: #9494c1; */
    align-items: center;
    justify-content: space-evenly;
}
.submenu_list::before{
    content: "";
    display: block;
    height: 10px;
    width: 1px;
    position: relative;
    /* margin-left: 15%; */
    background-color: #9e9ea5;
    top: 1px;
    left:41%;
}
.submenu_list li{
    width: 45%;
}
.submenu_list a{
    color: #666b7a;
}


ul#mainmenu_list>li>a{
    font: bold 0.938em 'Noto sans KR';
    color: #404B69;
    
}
ul#mainmenu_list>li>a:hover{
    color: #3856aa;
    
}
.logout_container{
    display: flex;
    align-items: center;
}
.login_container{
    display: flex;
    align-items: center;
}
.boss_name{
    font-family: 'Noto sans KR';
    font-size: 14px;
    color: #767779;
    margin-right: 18px;
}
.logout_container span{
    color: #5176b3;
    font-weight: bold;
}



div.login_div{
    float: right;
    position: relative;
    height: 100%;
    /* right: -23px; */
    /* background-color: rgb(228, 228, 255); */
}
div.login_div div{
    /* display: flex; */
    height: 100%;
}
div.login_div button{
        /* width: 88px; */
    /* width: 55%; */
    height: 100%;
    border: none;
    display: flex;
    cursor: pointer;
    padding: 0 0.8rem;
    font: bold 0.8em 'Noto sans KR';
    font-weight: 500;
    /* text-align: right; */
    color: #767779;
    background: none;
    align-items: center;
    justify-content: space-evenly;
}
div.login_div button a{
    font: bold 0.8rem 'Noto sans KR';
    font-weight: 500;
    /* text-align: left; */
    color: #767779;
}
div.login_div button::before{
    content: "";
    /* display: block; */
    width: 1px;
    height: 10px;
    position: relative;
    background: #8e98ab;
    /* border-left: solid 1px #d5cdcd; */
    top: 1px;
    left: -20%;
}
div.login_div button:nth-child(1):before{
    content: "";
    /* display: block; */
    width: 0px;
  
}

div.login_div button p{
    color: #767779;
}

#snsLoginText {
    margin-top: 30px;
    text-align: center;
    font: bold 0.89em 'Noto sans KR';
    color: #545f8a;
    display: flex;
    flex-basis: 100%;
    align-items: center;
}
#snsLoginText::before,
#snsLoginText::after {
    content: "";
    flex-grow: 1;
    /* background: rgba(0, 0, 0, 0.35); */
    height: 1px;
    font-size: 0px;
    line-height: 0px;
    margin: 0px 16px;
}

/* 모바일메뉴 */
nav#mobile_menu{
    /* width: 2%;
    height: 30px;
    position: relative;
    right: -90%; 
    top:-25px; */
    display: none;
    /* background: saddlebrown; */
}
i#mobile_menu_icon{
    font-size: 27px;
    color: #414141;
}



/* 모바일 메뉴바 부분!!!*/
nav#mo_menubar{
   
    display: none;
}


 




  /* 로그인창 */

  form.signUp{
    width: 800px;
    /* background-color: firebrick; */
  }
  div#login_signup{
    display: none;
    width: 400px;
    height: 565px;
    position: fixed;
    left: 50%;
    margin-left: -250px;
    top:50%;
    margin-top: -310px;
    z-index: 99999999999 !important;
    padding-top: 60px;
    box-sizing: border-box; 
    /* border-radius: 5px; */
    background-color: rgb(255, 255, 255);
}
div#login_signup i{
    width: 4%;
    height: 20px;
    float: right;
    margin-top: -50px;
    margin-right: 2%;
    font-size: 1.2em;
    color: slategrey;
    cursor: pointer;
    /* background-color: rgb(43, 64, 83); */
}
div#login_text{
    width: 100%;
    height: 10px;
    margin: 0px auto;
    padding-bottom: 50px;
    box-sizing: border-box;
    /* background-color: rgb(131, 131, 209); */
}
h2.hello{
    text-align: left;
    padding-bottom: 8px;
    font: bold 1.55em 'Noto sans KR';
    color: #797b7f;
}
p#hello_text{
    text-align: center;
    font: normal 1em 'Noto sans KR';
    color: #aaaaaa;
   
}

form.login{
    width: 100%;
    height: 260px;
    margin: 0px auto;
    /* background: rgb(219, 219, 219); */
}
fieldset{
   width: 100%;
   height: 100px;
  
}
table#join_table{
   width: 100%;
   height: 100%;
   position: relative;
   left: 0px;
   top:0px;
   /* background-color: rgb(216, 153, 153); */
}
table#join_table th{
    width: 100%;
    height: 20px;
   font: bold 0.8em 'Noto sans KR';
   color: #989ba1;
   text-align: left;
   position: relative;
   top:10px;
   margin-top: 120px;
   /* background-color: aliceblue; */

}
table#join_table tr{
   width: 100%;
   height: 5px;
   margin-top: 100px;
   /* background-color: rgb(43, 138, 58); */
}


table#join_table td input{
   width: 100%;
   /* height: 35px; */
   box-sizing: border-box;
   border: solid 1px #cacaca;
   font-size: 0.8em;
   margin-top: 12px;
   padding: 10px;
   /* background-color: cadetblue; */
}
table#join_table td input::placeholder{
    font-size: 0.75rem;
    color: rgb(109, 109, 109);
}

table#join_table td input:focus{
    outline:none;
}


div#login_option{
    width: 100%;
    height: 19px;
    margin-top: 5px;
   /* background-color: rgb(230, 209, 209); */
}
div#login_option span{
   font:normal 0.813em 'Noto sans KR';
   color: #919497;
}
div#find_password{
  float: right;
}
div#find_password a{
    cursor: pointer;
  font:normal 0.813em 'Noto sans KR';
  text-decoration: underline;
  color: #919497;
}
div#service_use_btn{
    width: 100%;
    height: 42px;
    margin-top: 30px;
  /* margin-left: 25%; */
  background: #3a548d;
}

#service_use_btn button{
    width: 100%;
    height: 100%;
    line-height: 5;
    font: normal 0.9em 'Noto sans KR';
    font-weight: 500;
    border: none;
    color: rgb(255, 255, 255);
    cursor: pointer;
    background: #48494b;
}
div#service_use_btn a{
    width: 100%;
    height: 100%;
    line-height: 12;
    font: normal 0.9em 'Noto sans KR';
    font-weight: 500;
    color: rgb(255, 255, 255);

}
p.login_btn{
    color: rgb(255, 255, 255);
    cursor: pointer;
    text-align: center !important;
    position: relative;
    top: 0px;
    /* background-color: darkblue; */
}
#login{
    cursor: pointer !important;
}

div#service_use_btn a img{
    width: 100%;
    display: block;
}


div#sing_in_wrap{
  width: 100%;
  height: 160px;
  margin-top: 65px;
  /* background-color: #334a68; */
}

div.sing_btn{
  width: 100%;
  height: 50px;
  padding-left: 20%;
  margin-top: 25px;
  box-sizing: border-box;
  /* background-color: rgb(114, 173, 173); */
} 
.singin_btn{
  width:12.5%;
  height: 40px;
  border-radius: 100px;
  float: left;
 position: relative;
 left: 7%;
 top:0px;
 margin-left: 6%;
  /* background-color: darkblue !important; */
}

.singin_btn img{
    width: 50%;
    height: 50%;
    margin-top: 9px;
    
    margin-left: 25%;
    /* background-color: darkblue; */
}
.singin_btn img img{
   margin: 0px auto;
}
.N{
    margin-left: 31% !important;
    margin-top: 30% !important;
    /* background-color: #414141 !important; */
}



div#signup_wrap{
  width: 100%;
  height: 30px;
  padding-left: 15%;
  padding-right: 20%;
  margin-top: 25px;
  box-sizing: border-box;
  /* background-color: rgb(133, 133, 175); */
}
p#no_account{
  font: normal 0.88em 'Noto sans KR';
  color: #969696;
}
div#signup_wrap>a{
  font: normal 0.88em 'Noto sans KR';
  color: #314ba1;
  float: right;
  text-decoration: underline;
  margin-top: -20px;
}

/* 회원가입 방식 선택 */






/* <!-- 푸터 --> */
div#footer_wrap{
    width: 100%;
    height: 143px;
    position: relative;
    left: 0px;
    top:0px;
    background-color:#333333;
    /* display: none; */
}
footer{
    width: 1200px;
    height: 100%;
    box-sizing: border-box;
    margin: 0px auto;
    display: flex;
    font-size: 15.5px;
    flex-direction: column;
    justify-content: center;
}
div#contents{
    width: 100%;
    height: 30px;
    position: relative;
    left: 2%;
    padding-bottom: 2px;
    /* background-color: darkcyan; */

}
p#terms_of_service2{
    position: absolute;
    left: 0px;
    top:0px;
    margin-left: 75px;
   
    /* background-color: darkblue; */
}
p#terms_of_service a{
    font: normal 0.87em 'Noto sans KR';
    letter-spacing: 1px;
    color: white;
    
}
p#terms_of_service2 a{
    font: normal 0.87em'Noto sans KR';
    letter-spacing: 1px;
    color: white;
    /* background-color: darkblue; */
}
div#contents_other{
    width: 100%;
    margin-left: 2%;
    /* background-color: cadetblue; */
}
div#contents_other p{
    font: normal 0.87em 'Noto sans KR';
    color: white;
    letter-spacing: 1px;
    line-height: 150%;
}

div#contents_other p>a{
    color: white;
}

/* 업체변경하기 팝업 */
div#company_change_wrap{
    width: 17.5%;
    height: auto;
    /* position: relative; */
    /* left: -13%; */
    /* top: 319px; */
    /* z-index: 2; */
    background: #F7F7F7;
    box-shadow: 2px 4px 10px rgb(62 61 68 / 20%);
    display: none;
    margin-left: -105px;
    margin-top: 325px;
}

.sales_click{
    border-left: solid 5px #6976a8;
    box-sizing: border-box;
    border-radius: 0px 8px 8px 0px;
    background: #f3f4f7;
}




/* 확인/취소 알림 팝업창 */
.verification_cancel_wrap{
    position: fixed;
    left: 50%;
    margin-left: -9%;
    top: 350px;
    width: 342px;
    /* height: 186px; */
    background-color: rgb(255, 255, 255);
    display: none;
}
.verification_cancel_list{
    width: 100%;
    padding: 2rem 1rem;
    box-sizing: border-box;
    /* background-color: rgb(201, 201, 224); */
}
.verification_cancel_list .verification_cancel_icon{
    width: 10%;
    margin: 0px auto;
    padding-bottom: 1.5rem;
    box-sizing: border-box;
    /* background-color: darkblue; */
}


.verification_cancel_icon img{
    width: 100%;
    /* background-color: saddlebrown; */
}
.verification_cancel_content{
    width: 100%;
    font: normal 0.9em'Noto sans KR';
    color: #616473;
    word-break: break-all;
    line-height: 1.5;
    text-align: center;
    /* background-color: saddlebrown; */
}
.verification_cancel_button_wrap{
    width: 100%;
    height: 42px;
    /* background-color: #d0d1d8; */
    cursor: pointer;
    display: flex;
    justify-content: space-around;
}
.verification_button{
    width: 100%;
    padding: 0.6rem 4rem;
    background-color: #666D92;
    box-sizing: border-box;
}
.verification_button p{
    font: normal 0.97em 'Noto sans KR';
    color: white;
    text-align: center;
}
.cancel_button{
    width: 100%;
    padding: 0.6rem 4rem;
    box-sizing: border-box;
    background: #F5F5F5;
    border: 1px solid #BDC0CF;
}
.cancel_button p{
    font: normal 0.97em 'Noto sans KR';
    color: #4d5165;
    text-align: center;
}

/*=======================================
// 로딩화면
=======================================*/

.loader_wrap
{
	background-color: rgb(0, 0, 0);
	position: fixed;
    display: table;
    width: 100%;
    height: 100%;
	opacity: 0.7;
	z-index: 9999;
	cursor: progress;
}

.loader_wrap .middle{
    display: table-cell; 
    vertical-align: middle;
}

.loader_wrap .loader 
{
	z-index: 999999; 	
	border: 16px solid #f3f3f3; 
	border-radius: 50%; 
	border-top: 16px solid #3498db;
    margin: auto;
	width: 100px; 
	height: 100px; 
	-webkit-animation: spin 1s linear infinite; 
	animation: spin 1s linear infinite; 
} 
.loader_wrap .text
{
	z-index: 2; 
	width: 100%; 
	margin: 10px 0 0 0;
    text-align: center;
    color: seashell;
    font-size: 20px;
} 
 
@-webkit-keyframes spin 
	{ 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } 
} 
@keyframes spin 
	{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } 
}