@charset "utf-8";

@import url("bootstrap.css");
@import url("font-awesome.css");
@import url("v13-common-style-default.css");
@import url("v13-common-style-webtop.css");

/* 고객명 */

 /** =================================== 
 1.default-change (light-theme)
===================================*/

/* all bg*/
body,
body.webtop {
	background-color: #525252;
    background: url(/public/share/images/main.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* all logo*/
.brand,
#credentials_table_header::before,
#interaction_table_header::before,
.main_table table:before,
div#webtop_favorites_outer_container:before,
div#webtop_favorites_outer_container2:before{
    content: url(/public/share/images/yuralogo.jpg);
}

/* login-btn-color*/
table#main_table table#credentials_table input.credentials_input_submit, 
input.credentials_input_submit_disabled,
table#main_table table#credentials_table button,
.download_btn {
	color: #ffffff;
	background-color: #f58220;
	border-color: #e67a1d;
}

/* download-btn-color*/
table#main_table table#credentials_table button,
.download_btn {
	color: #ffffff;    
	background-color: #00BCD4;
	border-color: #0097A7;
}

/* color with opacity*/
table#main_table table#credentials_table, 
table#main_table table#interaction_table, 
.main_table {
	background-color: rgba(255, 255, 255, 0.88);
}

/*  webtop-width*/
@media (min-width: 1024px) {
div#webtop_favorites_outer_container,
div#webtop_favorites_outer_container2{
    width: 50%;
    }
}

  /** =================================== 
 3-3.contents add,  align-right
===================================*/
table#main_table table#credentials_table,
table#main_table table#interaction_table,
.main_table {
    height: 100%;
    position: absolute;
    left: 0;  
	border-radius: 0px;
	margin: auto;
}

/* footer */
div#page_footer {
    border-top: 1px solid transparent;
    position: fixed;
    bottom: 0px;
    text-align: center;
    height: 35px;
    width: calc(100% - 450px);
    right:0px;  
}

div#page_footer div {
    color: #ffffff;
	padding-top: 5px;
}

/* Contents add */
.info {
	margin-left: 530px;
	background: rgba(64, 64, 64, 0.7);
	text-align: left;
	padding: 20px 30px;
	margin-right: 100px;
	font-size: 15px!important;
	margin-top: 120px;
	color: #0a0a0a;
	background: rgba(243, 243, 243, 0.28);
}

/** Mobile
===================================*/
@media (min-width: 350px) {
    table#main_table table#credentials_table,
    table#main_table table#interaction_table,
    .main_table {
	width: 100%;
	margin-top: 0;
	}
	div#page_footer { width: 100%}
	.info {display: none;}
}

@media (min-width: 768px) {
    table#main_table table#credentials_table,
    table#main_table table#interaction_table,
    .main_table {
	width: 100%;
	margin-top: 0;
	}
	div#page_footer { width: calc(100% - 450px);}	
	.info {display: block;}
}

@media (min-width: 1024px) {
    table#main_table table#credentials_table,
    table#main_table table#interaction_table,
    .main_table {
	width: 450px;
	margin-top: 0;
	}    
	div#page_footer { width: calc(100% - 450px);}	
	.info {display: block;}
}