@charset "UTF-8";

/* login */
#page_login .bx_login{ 
    position: absolute; top: 0; left: 0;
    display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;
    width: 100%; height: 100vh;
    background: var(--primary);
}
#page_login h3{ 
    margin: 14px 0 40px; padding-bottom: 4px; border-bottom: 4px solid #FFF; 
    font-size: 34px; font-weight: 700; color:#fff;}

#page_login .bx_login label{ display: flex; align-items: center; padding: 8px 0;}
#page_login .bx_login label:before{ display: inline-block; width: 120px; content: attr(title); font-size: 20px; font-weight: 600; color: #fff;}
#page_login .bx_login label input{ width: 360px; height: 60px; font-size: 16px; }

#page_login .btn_login{
    position: relative;
    width: 480px; height: 60px;
    max-width: 480px;
    margin: 18px auto 36px;
    background: #fff;
    font-weight: 700;
    font-size: 20px;
    color:var(--primary);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
#page_login .btn_login:hover{ left: 2px; top: 2px;}
#page_login .btn_login:hover:after{ box-shadow: 3px 3px 0 var(--point);}
#page_login .btn_login:active{ left: 5px; top: 5px; }
#page_login .btn_login:active:after{ box-shadow: none; }

#page_login .btn_login + p{
    color: #fff;
}


/* mypage */
#page_mypage .myinfo{
    padding: 20px;
}

#page_mypage .myinfo .top{
    padding: 10px;
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 23px; 
    background-color: #A5A5A5;
}

#page_mypage .myinfo .bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 100px;
    padding: 20px;
    padding-left: 100px;
    border: 1px solid #333;
}


#page_mypage .myinfo .bottom .box_profile_photo{
    padding: 10px;
    border: 2px solid #333333;
}

#page_mypage .myinfo .bottom .box_profile_photo img{
    width: 200px;
}

#page_mypage .myinfo .bottom .right{
    flex: 1;
}

#page_mypage .myinfo .bottom .right ul{
    border: 1px solid #333;
    border-bottom: none;
}

#page_mypage .myinfo .bottom .right ul li{
    display: flex;
    width: 100%;
    border-bottom: 1px solid #333;
}
#page_mypage .myinfo .bottom .right ul li span{
    display: flex;
    align-items: center;
    width: 200px;
    height: 50px;
    padding-left: 20px;
}
#page_mypage .myinfo .bottom .right ul li span:nth-of-type(1){
    background-color: #E6E6E6;
    
}

#page_mypage .advertiser{
    padding: 20px;
    /* border: 1px solid #333; */
}

#page_mypage .advertiser .top{
    padding: 10px;
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 23px; 
    background-color: #A5A5A5;
}

#page_mypage .advertiser .bottom{
    padding: 20px;
    border: 1px solid #333;
}

#page_mypage .advertiser .bottom details summary{
    line-height: 50px;
    height: 50px;
    padding-left: 10px;
    background: #E6E6E6;
    font-size: 18px;
    border: 1px solid #333;
}

#page_mypage .advertiser .bottom details ul{
    border: 1px solid #333;
    border-top: 0;
    border-bottom: 0;
}

#page_mypage .advertiser .bottom details ul li{
    display: flex;
    align-items: center;
    gap: 0 200px;
    height: 50px;
    padding-left: 20px;
    border-bottom: 1px solid #333;
}

#page_mypage .advertiser .bottom details ul li span:nth-of-type(1){
    width: 300px;
    font-size: 16px;
}

/* #page_list */
#page_list .wrap_contents{
    width: 1680px;
    padding: 20px;
}
#page_list .wrap_filter{
    display: flex;
    align-items: center;
    gap: 0 15px;
}
#page_list .wrap_filter label{
    display: flex;
    align-items: center;
}

#page_list .wrap_filter .wrap_calendar01{
    margin-left: auto;
}

#page_list .wrap_filter label span:nth-of-type(1){
    width: 80px;
    height: 42px;
    line-height: 40px;
    padding: 0 10px;
    margin-right: 5px;
    background-color: var(--primary);
    border-radius: 10px;
    text-align: center;
    color: #fff;
} 

#page_list .wrap_filter label :is(input,select){
    width: 150px;
    padding: 0 40px;
    border: 1px solid rgba(51, 51, 51, 0.33); outline: none; padding-left: 20px;
    border-radius: 10px;
}

#page_list .wrap_filter label select option{
    font-size: 18px;
}

#page_list .wrap_filter label input[type="search"]{
    width: 200px;
    padding: 10px;
}

#page_list .wrap_filter .wrap_calendar01 img{
    position: relative;
    left: 10px;
}
#page_list .wrap_filter .wrap_calendar02 img{
    position: relative;
    right: 10px;
}

#page_list .wrap_filter01 button{
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    color: #fff;
    border-radius: 10px;
    background: #44546A;
}

#page_list .wrap_button{
    display: flex;
    gap: 0 5px;
}

#page_list .wrap_filter02{
    min-width: 1640px;
    margin-top: 10px;
    gap: 0 25px;
    flex-shrink: 0;
}

#page_list .wrap_filter02 label{
    flex-shrink: 0;
}
#page_list .wrap_filter02 label input{
    flex-shrink: 0;
}

#page_list .wrap_filter02 button{
    width: 184px;
    height: 42px;
    border-radius: 10px;
    color: #fff;
    background-color: var(--primary);
}

#page_list .wrap_filter02 button:nth-of-type(1){
    margin-left: auto;
}

#page_list .wrap_indicator{
    min-width: 1640px;
}

#page_list .wrap_indicator table{
    margin-top: 10px;
}

#page_list .wrap_indicator .wrap_action{
    display: flex;
    justify-content: flex-end;
    gap: 0 10px;
    margin-top: 10px;
}

#page_list .wrap_indicator .wrap_action button{
    width: 180px;
    height: 40px;
    color: #fff;
    border-radius: 10px;
    background: #BDBDBD;
}

#page_list .wrap_list {
    min-width: 1640px;
}

#page_list .wrap_list table{
    margin-top: 20px;
}

#page_list .wrap_list .wrap_action{
    display: flex;
    justify-content: space-between;
    gap: 0 10px;
    margin-top: 15px;
}

#page_list .wrap_list .wrap_action > button{
    width: 180px;
    height: 40px;
    color: #fff;
    border-radius: 10px;
    background: #024F39;
}

#page_list .wrap_list .wrap_action > button:nth-of-type(1){
    width: 100px;
    background-color: #C91416;
}

#page_list .wrap_list td select{
    width: 90%;
    border: 1px solid rgba(51, 51, 51, 0.33);
    border-radius: 10px;
    outline: none;
}

#page_list .wrap_list td textarea{
    width: 90%;
    height: 40px;
    padding: 5px;
    margin: 5px;
    border: 1px solid rgba(51, 51, 51, 0.33);
    border-radius: 10px;
    display: block;
}

#page_list .wrap_list td button{
    color: #fff;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 13px;
}

#page_list .wrap_list td :is(.save,.modify){
    background-color: #44546A;
}

#page_list .wrap_list td .clone{
    background-color: var(--primary);
}

#page_list .wrap_list td .copy_url{
    background-color: #A5A5A5;
}

#page_list .wrap_list td .update_info{
    background-color: #333F50;
}

#page_list .swal2-styled.swal2-confirm{
    background-color: #C91416;
}


/* #page_list.page_manage_advertiser */
#page_list.page_manage_advertiser .wrap_contents{
    display: flex;
    align-items: flex-start;
    padding: 0;
}

#page_list.page_manage_advertiser .wrap_contents .advertiser{
    flex-shrink: 0;
    width: 500px;
    border: 1px solid #A5A5A5;
}

#page_list.page_manage_advertiser .wrap_contents .advertiser .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    line-height: 45px;
    padding:0 10px;
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    background-color: #A5A5A5;
}

#page_list.page_manage_advertiser .wrap_contents .advertiser .top input{
    height: 30px;
    border-radius: 10px;
}


#page_list.page_manage_advertiser .wrap_contents .advertiser .top button{
    width: 120px;
    height: 30px;
    border-radius: 10px;
    background-color: #44546A;
    color: #fff;
}

#page_list.page_manage_advertiser .wrap_contents .advertiser .bottom summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid rgba(51, 51, 51, 0.33);
}

#page_list.page_manage_advertiser .wrap_contents .advertiser .bottom summary:nth-of-type(1){
    border-bottom: 0;
}

summary::before {
    content: '▶'; 
    margin-right: 5px;
}

details[open] > summary::before {
    content: '▼';
}

#page_list.page_manage_advertiser .wrap_contents .advertiser .bottom summary span{
    margin-right: auto;
}

#page_list.page_manage_advertiser .wrap_contents .advertiser .bottom summary button:nth-of-type(3){
    width: 40px;
    height: 30px;
    border-radius: 10px;
    background-color: #C91416;
    color: #fff;
    margin-left: 4px;
    font-size: 13px;
}

#page_list.page_manage_advertiser .wrap_contents .advertiser .bottom summary button:nth-of-type(2){
    width: 40px;
    height: 30px;
    border-radius: 10px;
    background-color: #222A35;
    color: #fff;
    margin-left: 4px;
    font-size: 13px;
}
#page_list.page_manage_advertiser .wrap_contents .advertiser .bottom summary button:nth-of-type(1){
    width: 60px;
    height: 30px;
    border-radius: 10px;
    background-color: #44546A;
    color: #fff;
    margin-left: 4px;
    font-size: 13px;
}

#page_list.page_manage_advertiser .wrap_contents .advertiser .bottom details summary{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    line-height: 35px;
    padding: 0 10px;
    background: #E6E6E6;
    font-size: 18px;
}

#page_list.page_manage_advertiser .wrap_contents .advertiser .bottom details ul li{
    display: flex;
    align-items: center;
    gap: 0 200px;
    height: 50px;
    padding:0 20px;
}

#page_list.page_manage_advertiser .wrap_contents .advertiser .bottom details ul li:hover{
    background-color: #EDEDED;
    cursor: pointer;
}

#page_list.page_manage_advertiser .wrap_contents .advertiser .bottom details ul li span:nth-of-type(1){
    width: 300px;
    font-size: 16px;
}

#page_list.page_manage_advertiser .wrap_contents .advertiser .bottom details ul li span:nth-of-type(2){
    flex-shrink: 0;
    color: #808080;
}
#page_list.page_manage_advertiser .wrap_contents .advertiser .bottom details ul li span:nth-of-type(3){
    flex-shrink: 0;
    color: #808080;
}

#page_list.page_manage_advertiser .wrap_contents .list{
    min-width: 1180px;
}

#page_list.page_manage_advertiser .wrap_contents .list :is(.wrap_filter02,.wrap_list){
    min-width: auto;
    padding:0 20px;
}

#page_list.page_manage_advertiser .wrap_contents  .wrap_filter02{
    margin-top: 30px;
}

#page_list.page_manage_advertiser .wrap_contents  .wrap_filter02 > p{
    color: #808080;
    font-size: 16px;
}

#page_list.page_manage_advertiser .wrap_contents  .wrap_filter02 > button{
    width: 120px;
    height: 30px;
    background-color: #44546A;
}

#page_list.page_manage_advertiser .wrap_contents .list h3{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    line-height: 45px;
    padding:0 20px;
    background-color: #808080;
    font-size: 18px;
    color: #fff;
}

#page_list.page_manage_advertiser .wrap_contents .list h3 span{
    margin-right: auto;
    margin-left: 20px;
}

#page_list.page_manage_advertiser .wrap_contents .list h3 button{
    width: 120px;
    height: 30px;
    border-radius: 10px;
    background-color: #44546A;
    color: #fff;
}

#page_list.page_manage_advertiser .wrap_action > button:nth-of-type(1){
    height: 30px;
}



@media screen and (max-width: 1024px){
    
    #page_login .btn_login{
        width: 100%;
    }

}




/**************************************************/
/* === page_info_farming_list & page_info_enterprise_list === */


























/**************************************************/
/* ================================= responsive */
@media screen and (min-width: 1025px){
    
}
@media screen and (max-width: 1680px){

}
@media screen and (max-width: 1024px){

}