@charset "utf-8";
header.top h1 .sub {display: inline-block; font-size:16px; letter-spacing: -1px; margin-left: 10px; margin-bottom: 13px;}

/*
ul {display: inline-table;}
li a {display: table-cell;}
*/
header .sub {margin-bottom: 13px;}

main {margin-top: 0;}
main header {margin-top: 72px; padding: 0;}
main header h2 {position: relative; display:inline-block; width:100%; height: 60px; padding: 10px; background:#333; color: #fff; border-bottom:1px solid #000;}
main header h2 .title {display: inline-block; margin-top: 10px;}
main header h2 .area { position:relative;}
main header h2 .area:after { display:block; clear:both; content:'';}
main header .sub {color: #999; margin-bottom: 0;}

main header.mng h2 .title { margin-top:50px;}
main header.mng h2 { font-size: 32px; height: auto;}
main header.mng h2 .sub {font-size: 32px; line-height: inherit;}
main header.mng h2 .area { height: auto; padding-bottom: 60px;}
main header.mng h2 .msg {font-size: 13px; margin-top: 10px;}
main header.mng h2 .msg a {color: #ccc}
main header.mng h2 .cnt {font-size: 14px; color: #ccc; margin-top: 20px;}

section.memo ul.tab {position: absolute; bottom:-2px; right: -1px;}
section.memo .fmemoform .row {margin-top: 10px;}

.total_count { display: inline-block; margin-top: 5px; font-size: 12px; color: #aaa;}
.blind {display: none;}
.button span.blind {display: none;}

#fsearch {display:inline-block; position: relative; margin: 20px 0 10px 0; font-size:0;} 
#fsearch legend { display:none}
#fsearch input[type="text"] { height:30px; font-size:14px; line-height:18px; color:#222; border-top-left-radius: 4px; border-bottom-left-radius:4px;}
#fsearch input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: rgba(0,0,0,0.4);}
#fsearch input[type="text"]::-moz-placeholder { /* Firefox 19+ */color: rgba(0,0,0,0.4);}
#fsearch input[type="text"]:-ms-input-placeholder { /* IE 10+ */color: rgba(0,0,0,0.4);}
#fsearch input[type="text"]:-moz-placeholder { /* Firefox 18- */color: rgba(0,0,0,0.4);}

#fsearch input[type="submit"] {width:35px; height:30px; border-top-left-radius: 0; border-bottom-left-radius: 0;}
#fsearch select { margin-right:1px; border-radius:3px;}
main header h2 .button.btn_add {margin-top: 14px;}

main header h2 .tab {position: absolute; right: 0px; bottom:-9px; font-size: 14px;}
.tab li a {display: block; text-decoration: none; width: auto; padding: 8px 20px 10px 20px; border: solid 1px #666; border-bottom: 1px solid #555; margin-left: -1px; background: #444; color: #eee;}
.tab li a.active {background: #fff; position: relative; padding: 8px 20px 10px 20px; border: 1px solid #555; border-bottom: 1px solid #fefefe; margin: 0 0 0 -1px; color: #000;
}
.tab li a:hover {color: #333}

main header.mng  h2 .tab {bottom: -12px; right: 0;}
main header.mng  h2 .tab.user {bottom: -12px; left:0;}

.paging {text-align: center; margin-top: 9px;}

h3 {margin-top: 30px; font-weight: bold;}
h3 .sub { font-size: 14px;}
table.basic td { background-color: #fff;}
.btn_confirm { width:100%; text-align:center; padding:20px 0;}

table.basic .pay div {display: inline-block; text-align: center; padding: 8px 12px; background: #f8f8f8; border: 1px solid #eee; margin-right: 1px;}


.button.left.print { margin-left: 4px;}

#fboardform input[type="checkbox"] { width:0; height: 0; opacity:0; }
#fboardform input:checked + .tgbutton { background-color:#ff0000; }
#fboardform input:checked + .tgbutton:before { transform:translateX(32px);}
#fboardform .toggle_btn { position: relative; display: inline-block; width:54px; height:22px; }
#fboardform .tgbutton { position:absolute; top:0; left:0; right:0; bottom:0; background-color:#ccc; border-radius:34px; transition:.3s; cursor:pointer;}
#fboardform .tgbutton:before {position: absolute; height:12px; width:12px; left:4px; bottom:5px; background-color:#fff; border-radius:50%; content: ""; transition:.2s;}

.wrap.adm header {position: relative; padding: 20px 0 10px; border-bottom: 1px solid #ddd; top: 0;}
.wrap.adm header h1 { display: none;}
.wrap.adm header .sub {color: #333;}

.area.key {width: 600px; padding: 20px; margin: 150px auto 100px auto; text-align: center;}
.area.key form { margin-top: 50px;}
.area.key form input[type="text"] {font-size: 20px; height: 50px; padding: 20px;}
.area.key form .key {width: 300px;}
.area.key h3 {margin-bottom: 10px; font-weight: bold}
.area.key hr { border-top: 1px solid #ccc; margin: 90px 0 0 0;}
.area.key .info { line-height: 200%;}
.area.key .red {font-size: 14px; font-weight: bold; color: #ff7f00;}
.area.key .btn_set {margin-top: 0;}
.area.key .btn_set i {margin-bottom: 0;}
/*라디오박스 
	다른페이지에서는 사용하지 않기때문에 5개 2개로 고정하면됨
	.row .td.radios-container .radios {width: 500px;} 넓이따라 라디오사이즈 변함
*/

.row .td.radios-container .radios {position: relative; display: flex; align-items: center;}
.row .td.radios-container .radios input[type="radio"] { position: absolute; right: 9999px; z-index: -1;}
.row .td.radios-container .radios label {float: left; width: 16%; padding-bottom: 16%; margin: 0 2%; background: #eee; border-radius: 50%; cursor: pointer;text-indent: -9999px; font-size: 0; line-height: 0;}
.row .td.radios-container .radios .slider {position: absolute; left: 0%; top: 0; width: 12%; padding-bottom: 12%; margin: 2% 0 0 4%; background: #00b4bf; transition:transform 1s; border-radius: 50%; animation-duration: 0.3s; animation-fill-mode: forwards; transition: 0.2s left 0.05s ease-in-out;}
.row>.td.radios-container .radios>input[type="radio"]:nth-of-type(1):checked  ~ .slider{ animation-name: rtype1; left:0!important; }
.row>.td.radios-container .radios>input[type="radio"]:nth-of-type(2):checked  ~ .slider{ animation-name: rtype2; left:20%!important; }
.row>.td.radios-container .radios>input[type="radio"]:nth-of-type(3):checked  ~ .slider{ animation-name: rtype3; left:40%!important; }
.row>.td.radios-container .radios>input[type="radio"]:nth-of-type(4):checked  ~ .slider{ animation-name: rtype4; left:60%!important; }
.row>.td.radios-container .radios>input[type="radio"]:nth-of-type(5):checked  ~ .slider{ animation-name: rtype5; left:80%!important; }
.row>.td.radios-container .hr {position: absolute; top: 50%; left: 5%; display: none; width: 40%; height: 5px; background: #eee; z-index: -1}
	

.row .td.radios-container .radios2 {position: relative; display: flex; align-items: center;}
.row .td.radios-container .radios2 input[type="radio"] { position: absolute; right: 9999px; z-index: -1;}
.row .td.radios-container .radios2 label {float: left; width: 40%; padding-bottom: 40%; margin: 0 5%; background: #eee; border-radius: 50%; cursor: pointer;text-indent: -9999px; font-size: 0; line-height: 0;}
.row .td.radios-container .radios2 .slider {position: absolute; left: 0%; top: 0; width: 30%; padding-bottom: 30%; margin: 5% 0 0 10%; background: #333; transition:transform 1s; border-radius: 50%; animation-duration: 0.3s; animation-fill-mode: forwards; transition: 0.2s left 0.05s ease-in-out;}
.row>.td.radios-container .radios2>input[type="radio"]:nth-of-type(1):checked  ~ .slider{ animation-name: rtype1; left:0!important; }
.row>.td.radios-container .radios2>input[type="radio"]:nth-of-type(2):checked  ~ .slider{ animation-name: rtype2; left:50%!important; }

	
.row .td.radios-container .radioset {position: relative; display: flex; align-items: center; gap: 10px;}
.row .td.radios-container .radioset label { display: block; margin: 0; padding: 10px 0;}
.row .td.radios-container .radioset input[type="radio"] {position: absolute; z-index: -1; visibility: hidden; width: auto; height: auto;}
.row .td.radios-container .radioset input[type="radio"] + span {display: inline-block; position: relative; font-weight: bold;}
.row .td.radios-container .radioset input[type="radio"] + span:before {border-radius: 50%;}
.row .td.radios-container .radioset input[type="radio"] + span:before {content: ""; display: inline-block; width: 60px; height: 60px; vertical-align: middle; background: #f6f6f6; border: 1px solid #e0e0ce;}
.row .td.radios-container .radioset input[type="radio"] + span:after {position: absolute; display: inline-block; font-size: 22px; color: #ff6e17; text-align: center; line-height: 30px; opacity: 0; transform: scale(1.5); transition: all 0.3s ease;}
.row .td.radios-container .radioset input[type="radio"] + span:after {content: ""; width: 44px; height: 44px; background: #ff6e17; border-radius: 50%; top:8px; left: 8px; }
.row .td.radios-container .radioset input[type="radio"]:checked + span:after {opacity: 1; transform: scale(1);}
	
.row .td .check1 {position: relative; display: flex; align-items: center; gap: 10px;}
.row .td .check1 label {display: block; margin: 0; padding: 10px 0;}
.row .td .check1 input[type="checkbox"] {position: absolute; width: 100%; height: 100%; opacity: 0; z-index: 100; cursor: pointer; vertical-align: middle;}
.row .td .check1 input[type="checkbox"] + span {display: inline-block; position: relative; font-weight: bold;}
.row .td .check1 input[type="checkbox"] + span:before {border-radius: 50%;}
.row .td .check1 input[type="checkbox"] + span:before {content: ""; display: inline-block; width: 60px; height: 60px; vertical-align: middle; background: #f6f6f6; border: 1px solid #e0e0ce;}
.row .td .check1 input[type="checkbox"] + span:after {content: ""; width: 44px; height: 44px; background: #000; border-radius: 50%; top:8px; left: 8px; }
.row .td .check1 input[type="checkbox"] + span:after {position: absolute; display: inline-block; font-size: 22px; color: #000; text-align: center; line-height: 30px; opacity: 0; transform: scale(1.5); transition: all 0.3s ease;}
.row .td .check1 input[type="checkbox"]:checked + span:after {opacity: 1; transform: scale(1);}



.row .td.radios-container .radioset4 input[type="radio"] { position: absolute; right: 9999px; z-index: -1;}
.row .td.radios-container .radioset4 label {display: inline-block; margin: 0 5px 15px 0; text-transform: none;}
.row .td.radios-container .radioset4 input[type="radio"] + span {display: inline-block; padding: 5px 20px; width: auto; background: #f6f6f6; color: #333; font-size: 16px; line-height: 20px;  border: 1px solid #e0e0ce; text-align: center; cursor: pointer; transition: all 0.3s ease; border-radius: 4px; font-weight: bold;}
.row .td.radios-container .radioset4 input[type="radio"]:checked + span {background: #ff7f00; border: 1px solid #ff7f00; color: #fff;}


.row .td .check2 label {display: inline-block; margin: 0 5px 15px 0; text-transform: none;}
.row .td .check2 input[type="checkbox"] {position: absolute; width: 100%; height: 100%; opacity: 0; z-index: 100; cursor: pointer; vertical-align: middle;}
.row .td .check2 input[type="checkbox"] + span {display: inline-block; padding: 5px 20px; width: auto; background: #f6f6f6; color: #333; font-size: 16px; line-height: 20px;  border: 1px solid #e0e0ce; text-align: center; cursor: pointer; transition: all 0.3s ease; border-radius: 4px; font-weight: bold;}
.row .td .check2 input[type="checkbox"]:checked + span {background: #ff7f00; border: 1px solid #ff7f00; color: #fff;}


.modal {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0, 0.5); backdrop-filter: blur(10px);}
.modal .wd {position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: space-between;  padding: 20px; top: 50%; left: 50%; width: 500px; height: 400px; transform: translate(-50%, -50%); background-color: #fff; border-radius: 10px; box-shadow: 0 2px 7px rgba(0,0,0,0.5);}
.modal .wd .tit { font-size: 16px;}
.modal .wd p {}
.modal .wd button { width: 100%;}

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

.area.key {width: auto; }
.row .td.radios-container .radioset input[type="radio"] + span:before , .row .td.radios-container .check1 input[type="checkbox"] + span:before { width: 50px; height: 50px;}
.row .td.radios-container .radioset input[type="radio"] + span:after , .row .td.radios-container .check1 input[type="checkbox"] + span:after { width: 34px; height: 34px;}
}

@keyframes rtype{ 30%, 70% { transform:scale(0.5); } }