/**
* Template Name: Frandeer - v1.0.0
* License: frandear
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
* {margin:0;padding:0;box-sizing:border-box;}
html{-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
body{ touch-action: manipulation; ms-touch-action: manipulation; margin: 0; padding: 0; box-sizing: border-box; overflow-x: hidden; overflow-wrap: break-word;width:100%; background:#fff;-webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;}
body,input,select,textarea,button {overflow-wrap: break-word; border:none;font-size:16px;font-family: 'sans-serif', 'Noto Sans KR','Malgun Gothic','Dotum','Gulim','Tahoma','Verdana'; color:#777;font-weight:400;letter-spacing:-0.8px}
input {font-family:'Noto Sans KR','Malgun Gothic','Dotum','Gulim','Tahoma','Verdana',sans-serif }
header, h1 {font-size:100%}
main,header,section,nav,footer,aside,article,figure{display:block}
div, p, span, li, table td {word-break:keep-all}
caption,legend {overflow:hidden;position:absolute;width:1px;height:1px;font-size:0;line-height:0}
img {border:none;vertical-align:top;/*width:100%;*/ }
select, input {vertical-align:middle}
hr {display:none;border:0 none}
ol, ul, ul li{list-style:none}
address,cite,code,em{font-style:normal;font-weight:normal}
label{cursor:pointer}
button{border:0;outline:0;cursor:pointer}
textarea:focus, button:focus, input:focus{outline:none}
/*test*/
img, video, iframe { max-width: 100%; height: auto; }


/* clear */
.clear{clear:both} /* 정렬 초기화 */

/* link */
a{color:#555;text-decoration:none} /*링크 기본*/
a:link, a:visited {text-decoration:none}
/* a:hover, a:active, a:focus {text-decoration:underline} */

/* table */
table {width:100%;border-collapse:collapse} /*테이블 기본*/
table, th, td {border:0px;border-spacing:0;border-style:none}

/* float */
.fl{float:left} /* Flot 왼쪽정렬*/
.fr{float:right} /* Flot 오른쪽정렬*/

/* text-align */
.txtr{text-align:right !important} /*텍스트 오른쪽정렬*/
.txtl{text-align:left !important}  /*텍스트 왼쪽정렬*/
.txtc{text-align:center !important} /*텍스트 가운데정렬*/

/* hidden */
.hidden,.hide,.blind {overflow:hidden;position:absolute;width:1px;height:1px;font-size:0;line-height:0} /*폰트, 타이틀 감추기 */

/*margin*/

.mt20 {margin-top: 20px;}
.mb200 {margin-bottom:200px;}

/*font-size*/
.f14 {font-size:14px;}

/*padding*/
.pd-l10{padding-left: 10px;}

/*bg_style*/
.bg_type1 {background: #fff;} 
.bg_type2 {background: #f2f2f2;}


/*quick menu*/
.quick_btn { position: fixed; right: 20px; bottom: 20px; border: 2px solid #D9D9D9; background: #FFFFFF; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 999; text-decoration: none; }
.quick_ico { position: relative; width: 12px; height: 12px; margin: 0; }
.quick_ico::before, .quick_ico::after { position: absolute; content: ''; width: 12px; height: 12px; margin: -4px 0 0px -6px; border-left: 2px solid #4f5966; border-bottom: 2px solid #4f5966; transform: rotate(-225deg); box-sizing: border-box; opacity: 1; transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out; left:50%; }
.quick_ico::before {top: 50%; /* 처음에 아이콘 위치 */}
.quick_ico::after { top: 150%; /* 두 번째 화살표는 처음에는 원형 밖에 위치 */ opacity: 0; /* 두 번째 화살표는 처음에 보이지 않음 */ left: 50%; }
/* 애니메이션 정의 */
@keyframes iconMoveUp {
  0% {
    top: 50%; /* 처음 위치 */
    opacity: 1;
  }
  50% {
    top: -40%; /* 위로 올라감 */
    opacity: 0; /* 사라짐 */
  }
  100% {
    top: -100%; /* 더 위로 올라가며 완전히 사라짐 */
    opacity: 0;
  }
}

@keyframes iconAppear {
  0% {
    top: 150%; /* 위에서 내려오지 않은 상태 */
    opacity: 0;
  }
  50% {
    top: -40%; /* 위에서 올라오며 나타남 */
    opacity: 1;
  }
  100% {
    top: -100%; /* 위에서 계속 올라가며 완전히 나타남 */
    opacity: 1;
  }
}
/* hover 상태에서 애니메이션 적용 */
.quick_btn:hover .quick_ico::before { animation: iconMoveUp 1s ease-in-out; /* 기존 화살표가 위로 올라가며 사라짐 */ }
.quick_btn:hover .quick_ico::after { animation: iconAppear 1s ease-in-out; /* 새로운 화살표가 위에서 올라옴 */ }


/* (quick_menu) download button style */
.quick_menu {position: fixed; left: 10px; top: 50%; transform: translateY(-50%); z-index: 99; transition: opacity 0.2s ease;}
.quick_menu:active {visibility: visible; opacity: 1;  /* 원하는 위치로 조정 가능 */ }
.quick_menu .qu_download_btn {border: 1px solid #D9D9D9; background: #ffffff; width: 60px; height: 60px; border-radius: 60px; display: flex ; align-items: center; justify-content: center; transition: all 0.5s ease;}
.quick_menu .qu_download_btn:hover {width: fit-content; border-radius: 60px; padding: 0 14px 0 20px; background: #007aff; border: none; transition: all 0.5s ease;}
.quick_menu a p {color: #ffffff; display: none;}
.quick_menu a span {display: block; width: 24px; height: 24px; background-repeat: no-repeat; background-size: cover; background-position: center; background: url(/theme/frandeer/img/sub/down_icon.svg); background-size: cover;}
.quick_menu a:hover span {background: url(/theme/frandeer/img/sub/down_icon_w.svg); background-size: cover; margin:0px 10px;}
.quick_menu a:hover p {display: block;}


/* goTop 버튼 보이기/숨기기 */ 
.quick_btn.hidden { opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; }
.quick_btn.show { opacity: 1; visibility: visible; }