/* 
������: ������
���ǻ���: yoon00@ajpark.co.kr
����: 1v
�Ϸ�����: 2021.02.

���:
html �� �±� (Ŭ���� ����)�� �ּ�ȭ 

3���� Ŭ���� ���� ���θ� ��Ÿ�� �����Ͽ�����, 
Ŭ������ font-type 7���� �� .login .common �� �ֽ��ϴ�. 
�������� ��� Ŭ������ �������� �ڽ�,����, �θ�� Ÿ�� ����Ǿ� �ֽ��ϴ�.

- 2021.02.03 �ߵ� Ŭ���� �߰�
.p-half
.date

- 2021.02.25 �ߵ� Ŭ���� �߰� 
popup �κ�
error �κ�

*/



/* ��� Device�� ���� ���� �ε� */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
*{
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0;
    padding: 0;
    cursor: default;
}

/* ���Ǵ� CI color */
.color-dark-blue  {color:#b60005;}
.color-blue       {color:#CC5F57!important;}
.color-ligth-blue {color:#CC5F57;}
.color-black      {color:#363436;}
.color-grey       {color:#727476;}

/* font color */
.font-A      {color: #ffffff ;font-weight: bold;}
.font-B      {color: #ffffff ;}
.font-C-bold {color: #b60005 ;font-weight: bold;}
.font-C-grey {color: #545558 ;}
.font-D-blue {color: #CC5F57 ;font-weight: bold;}
.font-D-grey {color: #727476 ;font-weight: bold;}
.font-D      {color: #ffffff ;}

header.common img {
    height: fit-content;
    margin: auto 1.3em;
}
header.common h2 {
    margin: auto;
}


.show{
    top: 4em!important;
}


section >h3{
    margin-top: 0em;
}
section > p, section > table.date td, section > table tr{
    border: solid 0.2em #dedede;
}

/* Ŭ�� cursor */
button, ul#menu, .b-modal, section.pop-up img, select#payMethod, input[type="checkbox"], .close-sign{
    cursor: pointer;
}

/* outline ���� */
input:focus, button:focus, select#payMethod{
    outline: none;
}
input::placeholder{
    color:#97989C;
}
.login ~ section>input, select#payMethod, .change-pw input{
    border: solid 0.2em #CC5F57;
}

/* ���� ���� ���� */
section>input, button, select#payMethod {
    margin: 1em 0;
    width: -webkit-fill-available;
    background: white;
    border-radius: 1em;
}
/* ���� padding */
section>input, select#payMethod, button, section>p, section > table td{
    padding: 1em 1em;
}


section > table.date td{
	width: 50%;
    text-align: center;
    padding: 1em;
}

section > table.date td > input[type="text"]{
	background-color: transparent!important;
}

section > table input {
	background: none;
	width: 100%;
    border: none;
}

section > table{
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

.receipt > table tr:nth-child(2th) >td:first-child{
    border-right: solid black;
}

/* �׿� Ŭ���� */
.p-half{
    padding: 0.3em 1em;
}

.w-half > p {
    width: 50%;
}

button {
    border: none;
/*     margin-top: 5em; */
	margin-top: 2em;
    background-color: #b60005;
    width:100%;
}

/* hover ���� ��ȭ */
button:hover{
    background-color: #CC5F57;
}

footer{
	color: #727476;
    text-align: center;
}

    /* login  */
header.login, .login ~ section {
    text-align: center;
}
header.login > img {
    width: 200px;
}
.bg{
	bottom: 0;
    z-index: -1;
    position: fixed;
    width: -webkit-fill-available;
}


/* ���� �˾�â ��*/
#paySelectPopup{
    width: 100%;
    background-color: rgb(255, 255, 255);
    left: 0px;
    position: fixed!important;
    bottom: 0px!important;
    top: inherit!important;
} 

select#payMethod{
    text-align-last: center;
    width: 100%;
}

section.pop-up{
	text-align : center;
}

section.pop-up h1{
	margin: 1em;
	font-size: 1.5rem;
	color: #b60005 ;
	font-weight: bold;
}

section.pop-up img {
	box-shadow: -1px 1px 6px 3px #727476;
	border-radius: 20px;
	margin: 10px;
}

.paySelected {
	box-shadow: -1px 1px 6px 3px #b60005!important;
    border-radius: 20px;
}
.close-sign-cover{
    position: absolute;
    top: -100px;
	width: 100%;
	}

.close-sign{
	margin: auto;
    width: 50px;
    height: 50px;
    background-image: url(/resources/img/close.png);
    background-size: cover;
    animation: fade-in-out 3s alternate infinite ease-in;
}

/* .close-sign �ִϸ��̼� */
@keyframes fade-in-out{
	from{
	opacity: 0;}
	to{
	opacity: 1;}
}


/* ������ �ܵ� */
.receipt{
    box-shadow: -1px 1px 6px 3px #727476;
    background: white;
    padding: 30px;
    background-size: 10% , 10%;
    background-image: url(/resources/img/receipt_L.png), url(/resources/img/receipt_R.png);
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
    min-height: 300px;
    margin: 1em auto 0;
}

.receipt > h2{
    text-align: center;
    margin-bottom: 0.5em;
}
.receipt > table {
	height: 300px;
    margin: unset;
    width: 100%;
    border-top: solid;
    border-collapse: collapse;
}
.receipt > table td {
	width: 50%;
    border-bottom: solid 0.1em #363436;
    padding: 0.5em 1em;
    font-size: 0.8rem;color: #727476 ;font-weight: bold;
}

.receipt td {
    padding-left: 5px;
    border-bottom: 1px solid lightgray;
}

.receipt td:nth-child(2){
    border-left: 1px solid lightgray;
}

.receipt .td_borR_gray{
    border-right: 1px solid lightgray;
}

.receipt .bg_gray {
    background-color : #f5f5f5
}

.receipt p:first-child{
    margin-bottom: 0;
}
.receipt p:last-child{
    margin-top: 5px;
}
.receipt .op{
    opacity: 70%;
}

.receipt ~ button {
    margin: 1.5em 0 0;
}


	/* ����� ��� */
	a {
		color:#b60005;
	}
	
	a:hover {
		color:#CC5F57;
	}
	
	.infoPopup {
	    width: 100%;
	    background-color: rgb(255, 255, 255);
	    left: 0px;
	    position: fixed;
	    bottom: 0px;
	    max-height: 300px;
        overflow: scroll;
	}
	
 	.framePopup{
	margin: auto;
	padding-top: 20px;
 	}
 		 
	 .login ~ section>input[type="checkbox"]{
	    width: 10%;
	    margin: 0!important;
	 }
	 
/* 	 error */
.error h3{
    margin: 2em 0;
}




/* ����� Device : 0 ~ 640 */
@media screen and (max-width: 640px){
	/* font-type  */
.font-A      {font-size: 1.5rem;}
.font-B      {font-size: 1.3rem;}
.font-C-bold {font-size: 1.2rem;}
.font-C-grey {font-size: 1rem;}
.font-D-blue {font-size: 1rem;}
.font-D-grey {font-size: 1rem;}
.font-D      {font-size: 1rem;}
	
	header.login{
    margin: 1em;
	}
	.logo{
	display: none;}
	
	
	.wrap-login ~ img.bg{
    top: -50px;
    height: 880px;
	}
	
	ul#menu {
	z-index: 2;
    transition: 1s;
    top: -1em;
    text-align: center;
    position: absolute;
    list-style: none;
    right: 0;
	}
	
	ul#menu li {
    padding: 0.5em;
    background-color: #b60005;
	}
 
	section{
	    margin: 1.3em 1.3em 0 1.3em;  
	    position: relative;
	} 
	body{
		min-width: 300px;
	}
	
	header.common {
    z-index: 3;
    position: relative;
    background-color: #CC5F57;
    padding: 1em 0;
    display: flex;
	}
	ul#menu li:hover{
    background-color: #CC5F57;
	}
	.receipt{
	width: 80%;
	}
	.framePopup{
		max-width: 300px;
	}
	
	 .error-wrap{
    margin-top: 2em;
	}
	
	.error-wrap img{
    width: 70%;
    margin: 0 15%;
	}
	.error button {
		margin-top: 2em;
	}
	
}
 
/* Tablet & PC  : 641 ~  */
@media screen and (min-width:641px){
	
	.receipt{
	width: 240px;
	}
	
		/* font-type  */
	.font-A      {font-size: 25px;}
	.font-B      {font-size: 23px;}
	.font-C-bold {font-size: 18px;}
	.font-C-grey {font-size: 18px;}
	.font-D-blue {font-size: 15px;}
	.font-D-grey {font-size: 15px;}
	.font-D      {font-size: 15px;}
	
    body{
    	min-height: 900px;
    	margin: auto;
	    max-width: 1100px;
	    position: relative;
	    background: #dedede;
    }
    
       	
	.wrap-login {
		background-color: white!important;
	    max-width: 300px;
	    margin: 5em auto;
	    position: unset;
	    background-color: unset;
    	box-shadow: -1px 1px 6px 3px #727476;
		border-radius: 20px;
		padding: 2em;
	}
    
    .bg{
	 	height: -webkit-fill-available;
	    width: 1100px;
	    position: fixed;
	    background: white;
    	box-shadow: 2px 7px 16px 4px #00000026;
    }
	
	
	div.wrap-login + img.bg{
	    background-color: #dadada;
	    height: -webkit-fill-available;
		width: -webkit-fill-available;
		min-width: 100%;
	    bottom: 0;
	    left: 0;
	    }
	
	.wrap-login button{
		margin-top: 2em;
		width: 100%;
	}
	
	
	header.common > img {
		display: none;
	}
	
	header.common h2 {
	    padding-left: 1em;
	}
	
	header.login ~ section {
		margin: 1em auto 0;
	}
	
	section {
	    max-width: 300px;
		margin: 5em auto 0;
	}

	
	section.section-receipt{
		margin: 1em auto 0;
	}
	
	header.common {
	    background: #CC5F57;
	    background: -webkit-linear-gradient(45deg, #b60005, #CC5F57);
	    background: -moz-linear-gradient(45deg, #b60005, #CC5F57);
	    background: -o-linear-gradient(45deg, #b60005, #CC5F57);
	    background: linear-gradient(45deg, #b60005, #CC5F57);
	    padding: 1em 0;
    	background-size: 200% 200%;
	    animation: gradient 7s ease infinite;
	}
	
	@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
	}
	
	
	ul#menu {
	    margin-right: 1em;
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    display: flex;
	    list-style: none;
	    float: right;
	}
	
	ul#menu li {
	    padding: 0.5em;
		color:#727476!important;
	}
	
	ul#menu li:hover{
	    border-bottom: solid 5px #CC5F57;
	    color: #CC5F57!important;
	}
	
	.web-top{
		margin-bottoM: 0.5em;
		padding: 2em 1em 0;
	    position: relative;
	    width: -webkit-fill-available;
   	}
/* cursor : click  */
	ul#menu li, input.font-D-blue, .logo, a{
		cursor: pointer;
	}
	
	section >h3 {
		margin-bottom: 0.5em;
	}
	
	footer{
    width: 100%;
    position: absolute;
    bottom: 0;
   	left: 0;
	}
	
	.wrap-footer{
	    width: 500px;
	    margin: auto;
    }
    
   	.framePopup{
		max-width: 500px;
	}
	
	 .login ~ section>input[type="text"], .login ~ section>input[type="password"]{
		 max-width: 260px;
	 }
	 
	 .error-wrap{
	    min-width: 800px;
	 	display: flex;
		box-shadow: 2px 7px 16px 4px #00000026;
		background: linear-gradient(0deg, rgb(61 213 255 / 67%) 0%, rgba(255,255,255,1) 23%)!important;
		background: white;
	    box-shadow: 2px 7px 16px 4px #00000026;
	    border-radius: 2em;
	    padding-bottom: 3em;
	 	margin : 5em;
	}
	
		
	section.error {
	padding: 2em;
	margin: none;
	}
	
	.error-wrap img{
	width: 300px;
    margin: auto;
	}

	.error button {
		margin-top: 7em;
	}
}

/* IE ������ ���� ���� ��� ��� */

 /* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

}
 
/* IE6,7,9,10 */
@media screen and (min-width: 640px), screen\9 {
}
 
/* IE6,7 */
@media screen\9 {
}
 
/* IE8 */
@media \0screen {
}
 
/* IE6,7,8 */
@media \0screen\,screen\9 {
}
 
/* IE9,10 */
@media screen and (min-width:0\0){

}