@charset "utf-8";
/* Adddon Button */
.cameron_plugin{position:fixed; width:70px; z-index:9999999}
.cameron_plugin ul{margin:0 -5px; padding:0; list-style:none}
.cameron_plugin li{position:relative; margin:0 0 1px 0; padding:0}
.cameron_plugin li a,
.cameron_plugin li a>*{text-decoration:none; -webkit-transition:background-color .1s ease, border .1s ease, color .1s ease; -moz-transition:background-color .1s ease, border .1s ease, color .1s ease; -ms-transition:background-color .1s ease, border .1s ease, color .1s ease; -o-transition:background-color .1s ease, border .1s ease, color .1s ease; transition:background-color .1s ease, border .1s ease, color .1s ease}
.cameron_plugin li a:hover{text-decoration:none}
.cameron_plugin li a.icon{display:block; width:70px; height:70px; background-repeat:no-repeat; background-position:center; background-size:70px 70px; text-align:center; color:#e7e7e7; line-height:70px; font-family:Tahoma,돋움; font-size:17px; outline:none}
.cameron_plugin li a.cameron-facebook{background-color:#4867b2; background-image:url(../img/fb.png)}
.cameron_plugin li a.cameron-twitter{background-color:#65bdf3; background-image:url(../img/tw.png)}
.cameron_plugin li a.cameron-rss{background-color:#ff8c26; background-image:url(../img/rss.png)}
.cameron_plugin li a.cameron-user{background-image:url(../img/user.png)}
.cameron_plugin li a.langToggle{background-color:#ff3366;}
.cameron_plugin li a:hover,
.cameron_plugin li a:focus{background-color:none !important}

/* Language Select */
#cameron-lang ul{display:none; position:absolute; top:0; width:100px}
#cameron-lang li{margin:0}
#cameron-lang li a{display:block; padding:8px 16px; background:#fdfdfd; border-right:1px solid #e1e1e1; border-left:1px solid #e1e1e1; line-height:1.2; font-size:12px; color:#666; white-space:nowrap; cursor:pointer; outline:none}
#cameron-lang li:first-child a{border-top:1px solid #e1e1e1}
#cameron-lang li:last-child a{border-bottom:1px solid #e1e1e1}
#cameron-lang li a:focus,
#cameron-lang li a:hover{background-color:#909090 !important; border-right:1px solid #909090; border-left:1px solid #909090; color:#fff}
#cameron-lang li:first-child a:focus,
#cameron-lang li:first-child a:hover{border-top:1px solid #909090}
#cameron-lang li:last-child a:focus,
#cameron-lang li:last-child a:hover{border-bottom:1px solid #909090}
/* Quick menu card style */
.cameron_plugin{width:100px; margin-right:14px}
.cameron_plugin ul{margin:0; padding:10px 8px; background:#fff; border-radius:20px; box-shadow:0 6px 24px rgba(0,0,0,.15)}
.cameron_plugin li{margin:0}
.cameron_plugin li + li{border-top:1px solid #eee}
.cameron_plugin li a.icon{position:relative; width:84px; height:104px; line-height:normal; background-color:transparent !important; background-size:56px 56px; background-position:center 12px; border-radius:14px; transition:transform .15s ease, background-color .15s ease}
.cameron_plugin li a.icon:hover{background-color:#f5f5f7 !important; transform:translateY(-2px)}
.cameron_plugin li a.icon::after{content:attr(title); position:absolute; left:0; right:0; bottom:10px; font-family:'Noto Sans KR','Malgun Gothic',sans-serif; font-size:15px; font-weight:700; color:#222; letter-spacing:-0.5px; white-space:nowrap}

/* Quick menu animation */
.cameron_plugin ul{animation:qm-in .8s cubic-bezier(.2,1.4,.4,1) both}
.cameron_plugin li a.icon{overflow:visible; animation:qm-bounce 3s ease-in-out infinite}
.cameron_plugin li:nth-child(2) a.icon{animation-delay:1.5s}
.cameron_plugin li a.icon::before{content:''; position:absolute; left:50%; top:40px; width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; pointer-events:none; animation:qm-ripple 2s ease-out infinite}
.cameron_plugin li:nth-child(1) a.icon::before{--qm-c:rgba(255,51,102,.6)}
.cameron_plugin li:nth-child(2) a.icon::before{--qm-c:rgba(3,199,90,.6); animation-delay:1s}
.cameron_plugin li:nth-child(1) a.icon::after{color:#ff3366}
.cameron_plugin li:nth-child(2) a.icon::after{color:#03a94d}
.cameron_plugin li a.icon:hover{animation:qm-wiggle .5s ease-in-out; background-size:62px 62px; background-position:center 9px; transform:none}
@keyframes qm-in{0%{opacity:0; transform:translateX(140px)} 100%{opacity:1; transform:translateX(0)}}
@keyframes qm-bounce{0%,70%,100%{background-position:center 12px} 78%{background-position:center 2px} 86%{background-position:center 14px} 92%{background-position:center 8px}}
@keyframes qm-ripple{0%{box-shadow:0 0 0 0 var(--qm-c,rgba(0,0,0,0))} 100%{box-shadow:0 0 0 18px rgba(255,255,255,0)}}
@keyframes qm-wiggle{0%,100%{transform:rotate(0)} 25%{transform:rotate(-6deg) scale(1.05)} 75%{transform:rotate(6deg) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.cameron_plugin ul,.cameron_plugin li a.icon,.cameron_plugin li a.icon::before{animation:none}}
