@charset "utf-8";

/* 로고 */
body>header {position: fixed; width: 100%; top: 0px; transition: top 0.6s !important; background: #ff701a; z-index: 9999;}
body>header>.area {display: flex; align-items: center; gap: 10px;}
body>header h1 { display:none;}
body>header .logo {font-size: 0; vertical-align: top; }
body>header .logo {display: flex; align-items: center; gap: 7px;}
body>header .logo img { margin-top: 10px; margin-bottom: 10px; height:60px; line-height: 80px;}
body>header .sub {font-size:16px; color:rgba(255,255,255,0.75); margin-top: 2px;}
/*header h1 .sub:before { display:inline-block; content:'-'; padding-left:2px; font-size:18px; color:rgba(0,0,0,0.75); line-height:23px; vertical-align:bottom;}*/

body>header.fixed {position: fixed; width: 100%; top: 0px; left: 0; z-index: 999; background-color: rgb(255, 255, 255, .8) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; backdrop-filter: saturate(180%) blur(15px) !important; border-bottom-color: rgb(0, 0, 0, .25) !important; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2); transition: top ease 0.4s !important;}
body>header.fixed .sub {color:rgba(0,0,0,0.75);}

body>header nav {font-size: 13px; }

body>header nav.member { display:block; border-top: 1px solid #ddd; margin: 0; padding: 0 0 5px 0;}
.index.story header .logo img { margin-top: 4px; width:77px; height:34px; line-height: 34px;}

header.mypage {background: #ff701a; color: #fff; padding: 60px 0 20px 0;}
header.mypage h2 {display: inline-block;}
header.mypage .total strong {color: #abff3f;}
header.mypage .sub { color: rgb(255, 255, 255, .5); margin-top: 4px;}

main section {margin: 40px 0}
main section .search {padding-bottom: 10px;}
main section .control {margin-top: 20px;}

#panel_trigger .menu_icon {background-color:#fff;}
#panel_trigger.is-clicked .menu_icon::before, #panel_trigger.is-clicked .menu_icon::after { background-color:#abff3f;}

/*마이페이지 flag*/
#flag .print_menu {}
#flag input[type="submit"] {display:block;}
#flag .row {display: inline-block; width:192px; vertical-align:top; border:none;}
#flag .row strong {font-size:15px; color:#148b00}
#flag .row li {position: relative;}
#flag .row li span {display:inline-block; width:100px; height:20px;}
#flag .row li .toggle_btn {width:auto;}
#flag .row li .tgbutton {width:54px; margin-left:100px;}
#flag .row li .tgbutton:before {width:11px; height:11px; bottom:4px;}

/* 마이페이지 설정 */
/* form */
.mypage .row .select {display: none;}
.mypage .row div.td {padding-left: 0;}
.mypage .row input[type="checkbox"] { width:0; height: 0; opacity:0; }
.mypage .row input:checked + .tgbutton { background-color:#ff0000; }
.mypage .row input:checked + .tgbutton:before { transform:translateX(32px);}
.mypage .row input[name="notice"] { position:absolute; width:1px; height:1px; padding:0; margin:-1; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.mypage .row input[name="notice"] + label { position: relative; display:block; width:100%; padding-left:30px; margin-top:10px; font-size: 14px; cursor:pointer;
		-moz-user-select:none; -ms-user-select:none; -webkit-user-select:none;}
.mypage .row input[name="notice"] + label:before { position:absolute; left:0; top:-2px; width:18px; height:18px; border:2px solid #cacece; border-radius:100%;
	 text-align:center; background-color:#fff; box-shadow:0px 1px 2px rgba(0,0,0,.05), inset 0px -15px 10px -12px rgba(0,0,0,.05); content:''; }
.mypage .row input[name="notice"] + label:active:before, input[type="notice"]:checked + label:active:before {
	box-shadow:0 1px 2px rgba(0,0,0,.05), inset 0px 1px 3px rgba(0,0,0,.1);}
.mypage .row input[name="notice"]:checked + label:before { background-color:#fff; border-color:#ff0000;}
.mypage .row input[name="notice"]:checked + label:after { position:absolute; top:3px; left:5px; width:8px; height:8px; background-color:#ff0000;
 border-radius: 100%; box-shadow: inset 0 0 10px rgba(0,0,0,.3); content: ""; }
.mypage .row label.th, .row .th {line-height: 48px}
.mypage .row .td label {display: inline-block;}
/* form 끝 */
.mypage .row {padding:10px 0; border:none; border-bottom:1px solid #ddd;}
.mypage .row .clone_box {display:inline-block; width:200px; margin:0; padding:0; border:none;}
.mypage .row .toggle_btn { position: relative; display: inline-block; width:54px; height:22px; }
.mypage .row .tgbutton { position:absolute; top:0; left:0; right:0; bottom:0; background-color:#ccc; border-radius:34px; transition:.3s; cursor:pointer;}
.mypage .row .tgbutton:before {position: absolute; height:12px; width:12px; left:4px; bottom:5px; background-color:#fff; border-radius:50%; content: ""; transition:.2s;}
.mypage .row .clone_box{ position: relative; width:280px; padding:0;}
.mypage .row .box_select { position: relative; height:28px; border:1px solid #aaa; background-color: #fff; font-size:13px; line-height:28px; text-indent:9px; color: #000; }
.mypage .row .option_box{ opacity:0; visibility:hidden; position: absolute; top:-50%; width: 100%; margin: 0; padding: 0; background-color: #ecf0f1; color: #34495e; z-index: 100;}
.mypage .row .option_box.active{ display: block; opacity: 1; visibility: visible; -webkit-animation: fadeIn 0.s; animation: fadeIn 0.5s;}


/* 쪽지 페이지 */
.mypage .tab li {border-bottom:none; }
.mypage .tab li.selected {background:#f9f9f9; border-bottom:0; z-index:100;}
.mypage .note_list li {position:relative; display:table; table-layout:fixed; width:100%; padding:20px 0; border-bottom:1px solid #ddd;}
.mypage .note_list li .memo_profile {position:relative; display:table-cell; width:50px; padding-right:65px; }
.mypage .note_list li .memo_profile .no_read {position:absolute; bottom:0; left:32px; display:inline-block; background:#ff0000; border:1px solid #22b40a; border-radius:10px; width:10px; height:10px; box-shadow:0 0 10px 3px #85f755; animation:blinker 1s linear infinite; }
.mypage .note_list li .memo_info {display:table-cell;  width:100%; vertical-align:top;}
.mypage .note_list li .sv_wrap {display:block; font-weight:bold;}
.mypage .note_list li .memo_datetime {margin-right:20px; float:right;}
.mypage .note_list li .memo_del {position:absolute; right:0; top:53%; transform:translateY(-50%);}
.mypage .pg_wrap {margin:15px 0; text-align:center;}
.mypage .btn_close {float:right; }

.mypage .note_send .row {border:none; }
.mypage .note_send .row div.td {padding:0;}
.mypage .note_send .row input[type="text"] {display:block; width:400px; text-indent:10px;}
.mypage .note_send .row textarea {width:400px; height:200px; margin-bottom:20px;}

/* 포인트 페이지 */
.mypage .point .point {width: 100px; font-size: 18px; line-height: 18px; text-align: right;}

/* scrap */
.mypage .memo ul.list li p {margin-bottom: 3px;}

.mypage nav.snb li a {padding-left: 0; line-height: 14px;}
.mypage nav.snb li i {vertical-align: bottom; margin-right: 10px;}


.point_list li {border-bottom:1px solid #ececec; background:#fff; padding:15px; list-style:none; position:relative;}
.point_list li:after {display:block ;visibility:hidden; clear:both; content:"";}
.mypage .point_list .point_use {background:#f6f6f6;}
.mypage .point_list .point_use .point_num {font-size:1.25em; color:#ff4f76; font-weight:bold; float:right;}
.mypage .point_list .point_num {position:absolute; right:15px; top:13px; font-size:15px; color:#ff0000; font-weight:bold; }
.mypage .point_list .point_top {line-height:15px; margin:0 0 5px;}
.mypage .point_list .point_top:after {display:block; visibility:hidden; clear:both; content:"";}
.mypage .point_list .point_tit {display:block; font-weight:bold; float:left; font-size:1.083em; }
.mypage .point_list .point_date1 {float:left; color:#888d92;}
.mypage .point_list .point_date {float:left; color:#888d92;}
.mypage .point_list .txt_expired {margin-left:5px; color:red; }
.mypage .point_list .point_status{background:#ff0000; border:0; color:#fff; font-weight:bold; font-size:16px; text-align:right;}

@-webkit-keyframes fadeIn {0% { opacity: 0; } 100% { opacity: 1; }}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}
@keyframes blinker {
	50% {opacity:0}
	}