/* html, body */
body { position: relative; height: calc(var(--vh, 1vh) * 100); visibility: collapse; opacity: 0; transition: visibility 1s ease-in, opacity 1s ease-in; } 
body.loaded { visibility: visible; opacity: 1; } 

/* main */
main { padding:55px 0 70px; } 

/* input */
input { outline: none; } 

/* select */
select { background-color: transparent; } 

.bx_input, .lb_chk { display: flex; align-items: center; } 
.lb_chk { cursor: pointer; } 
.lb_chk input { width: 14px; height: 14px; margin-right: 5px; } 

/* palette */
:root { --primary : #6E4DDC; --gray: #686868; --bg: #F5F6F9; } 

/* btn_action */
body > .btn_action { position: absolute; bottom: 20px; left: 50%; transform: translate(-50%); width: calc(100% - 40px); height: 50px; background: #6E4DDC; border-radius: 8px; font-size: 20px; color: #fff; } 

/* swal */
body.swal2-height-auto { height: calc(var(--vh, 1vh) * 100) !important; } 
.swal2-html-container { margin-top: 30px !important; } 
.swal2-actions { width: 100% !important; padding: 15px !important; } 
.swal2-styled.swal2-confirm { width: 100%; background: #6D46DB !important; } 
.swal2-styled.swal2-confirm:focus { box-shadow: none !important; } 
body.swal2-height-auto.swal2-iosfix { height: calc(var(--vh, 1vh) * 100) !important; } 

/* header */
header { position: fixed; top: 0; z-index: 999; width: 100%; display: flex; justify-content: space-between; align-items: center; height: 55px; padding: 0 20px; border-bottom: 1px solid var(--gray-gray-05, #E9E9E9); background-color: #fff; } 
header h1 { font-size: 16px; font-weight: 600; } 
header h1 img { width: 150px; } 
header > a { width: 34px; } 
header > span { width: 34px; } 

/* hr */
.wrap_text { display: flex; align-items: center; height: 24px; } 
.wrap_text hr { flex: auto; border: none; height: 1px; background-color: #e9e9e9; } 
.wrap_text span { padding: 0 10px; } 

.pg_home .top span { width: 34px; } 

/* fnb */
.fnb { position: fixed; bottom: 0; left: 0; z-index: 999; display: flex; align-items: center; width: 100%; height: 70px; padding: 0; background: #fff; box-shadow: 0 -3px 12px 3px #2222220d; } 
.fnb > a { flex: 1; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; gap: 4px 0; height: 100%; padding: 10px 0 8px; background: #fff; text-align: center; font-size: 10px; font-weight: 600; } 
.fnb > a:before { display: block; width: 25px; height: 25px; background-repeat: no-repeat; background-position: center left -1px; background-size: 53.19px 25px; content: ''; } 
.fnb > a.active { color: var(--primary); font-weight: 600; } 
.fnb > a.active:before { background-position: center right -2px; } 

.fnb > a:nth-of-type(1):before { background-image: url(/public/img/common/fnb_home.svg); } 
.fnb > a:nth-of-type(2):before { background-image: url(/public/img/common/fnb_contents.svg); } 
.fnb > a:nth-of-type(3):before { background-image: url(/public/img/common/fnb_expert.svg); } 
.fnb > a:nth-of-type(4):before { background-image: url(/public/img/common/fnb_like.svg); } 
.fnb > a:nth-of-type(5):before { background-image: url(/public/img/common/fnb_report.svg); } 

/* footer */
footer{ padding: 20px; margin-top: 80px;}
footer p:nth-of-type(1){ font-weight: 700; font-size: 14px; line-height:17.47px; color: #686868;}
footer p:nth-of-type(2){ font-weight: 400; font-size: 14px; line-height:24px; color: #999999; margin-top: 10px; white-space: pre-line;}
footer p:nth-of-type(3){ font-weight: 400; font-size: 12px; line-height:18px; color: #999999; white-space: pre-ling; word-break: break-all; margin-top: 20px;}
footer p:nth-of-type(3) a{ font-weight: 400; font-size: 12px; line-height:18px; color: #999999; display: inline;}

/* pagination */
.pagination { display: flex; justify-content: center; align-items: center; width:100%; gap: 0 16px; margin-top: 20px;}
.pagination :is(a, span){width: 35px; text-align: center}
.pagination :is(span.prev, span.next, a.prev, a.next) {height: 35px;}
.pagination .current { color: #6E4DDC; font-weight: bold;}
 
@media only screen and (min-width: 768px) { body { width:375px; margin: 0 auto; } 
 header { width:375px; left: 50%; transform: translateX(-50%); } 
 .fnb { width:375px; left: 50%; transform: translateX(-50%); } 
 .wrap_popup .popup { width:375px; left: 50%; transform: translateX(-50%); } 
 #myModal .modal-content { width:375px; } 
 }