@font-face { font-family: 'Paperlogy'; font-weight: 100; font-style: normal; src: url('../fonts/Paperlogy1.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'Paperlogy'; font-weight: 200; font-style: normal; src: url('../fonts/Paperlogy2.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'Paperlogy'; font-weight: 300; font-style: normal; src: url('../fonts/Paperlogy3.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'Paperlogy'; font-weight: 400; font-style: normal; src: url('../fonts/Paperlogy4.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'Paperlogy'; font-weight: 500; font-style: normal; src: url('../fonts/Paperlogy5.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'Paperlogy'; font-weight: 600; font-style: normal; src: url('../fonts/Paperlogy6.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'Paperlogy'; font-weight: 700; font-style: normal; src: url('../fonts/Paperlogy7.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'Paperlogy'; font-weight: 800; font-style: normal; src: url('../fonts/Paperlogy8.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'Paperlogy'; font-weight: 900; font-style: normal; src: url('../fonts/Paperlogy9.ttf') format('woff'); font-display: swap; } 
body {font-family: 'Paperlogy';}

/* #external-qMenuBtn{background:linear-gradient(to bottom, #0669db, #023672 ) ;box-shadow: 0px 0px 1px 8px #034ea200;}
#external-qMenuBtn:hover {box-shadow: 0px 0px 1px 6px rgba(3, 78, 162, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } 
#external-qMenuBtn::after {animation: icoMoveUpDown 5s ease-in-out infinite; position: relative; display: inline-block; content: ''; background: url('../images/2024/qmenu_ico.png'); width: 90px; height: 155px;top: -98px;left: 14px;z-index: 1;} 
#external-qMenuBtn span {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;} */
/*퀵메뉴*/
.qMenu {position: fixed; right: 20px; top: 84%; transform: translateY(-50%); z-index: 997; font-family: 'Paperlogy';pointer-events: none;transition: opacity 0.4s ease;pointer-events: auto;}
.qMenu .qMenuWrap { float: right; } 
.qMenu .qMenuWrap .comm { position: relative; width: 75px;   height: 75px; line-height: 85px; font-size: 16px; border-radius: 50px; text-align: center; } 
.qMenu .qMenuWrap .comm span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;} 
.qMenu .qMenuWrap .comm span a { color: #FFFFFF; position: relative; display: block; line-height: normal;font-weight: 600;} 
.qMenu .qMenuWrap .qMenuTit{background:linear-gradient(to bottom, #0669db, #023672 ) ;box-shadow: 0px 0px 1px 8px #034ea200;}
.qMenu .qMenuWrap .qMenuTit:hover {box-shadow: 0px 0px 1px 6px rgba(3, 78, 162, 0.5); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } 
.qMenu .qMenuWrap .qMenuTit::after {animation: icoMoveUpDown 5s ease-in-out infinite; position: relative; display: inline-block; content: ''; background: url('../images/2024/qmenu_ico.png'); width: 90px; height: 155px;top: -98px;left: 14px;z-index: 1;} 
.qMenu .qMenuWrap .qMenuFund{position: relative;padding-top: 40px;background:linear-gradient(to bottom, #f3788f, #e04662) ;box-shadow: 0px 0px 1px 8px #ED607900;margin-top: 5px;}
.qMenu .qMenuWrap .qMenuFund:hover {box-shadow: 0px 0px 1px 6px #ED607980; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } 
.qMenu .qMenuWrap .qMenuFund::before{position: absolute;content: "";width: 66px;height: 66px;top: -16px;left: 50%;transform: translateX(-50%);background-image: url("../images/2024/fund_ico.png");background-repeat: no-repeat;background-position: center;background-size: contain;}
.qMenu .qMenuWrap .qMenuFund span { top: 64%;width: 100%;} 
.qMenu .qMenuWrap .qMenuFund span a {font-weight: 500;} 
.qMenu .qMenuWrap .qMenuFund span a p{display: inline-block;}
/* 상단 바로가기 */
.quickM { z-index:9; text-align:center; border-radius: 100%;opacity: 0; } 
.quickM > a { display: block;position: relative;width: 50px;height: 50px;margin: auto;border-radius: 50%;background: #00254e; margin-top: 20px;} 
.quickM > a img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } 
.quickM > a:hover {transform: translateY(-8px); transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; }
.quickM.show {opacity: 1;pointer-events: auto;}
@keyframes icoMoveUpDown {
    0%   { top: -98px; }
    10%  { top: -108px; }
    20%  { top: -98px; }
    100% { top: -98px; }
}


 @media screen and (max-width:1440px) { 
	/*--@@*/
	.qMenu{right: 24px;top: auto;bottom: -7%;}
	.qMenu .qMenuWrap .comm{width: 62px;height: 62px;font-size: 14px;line-height: normal;}
	.qMenu .qMenuWrap .qMenuFund::before{display: none;}
	.qMenu .qMenuWrap .qMenuFund span {top: 50%;}
	.qMenu .qMenuWrap .qMenuFund span a {font-size: 16px;}
	.qMenu .qMenuWrap .qMenuFund span a p{display: block;}
	.qMenu .qMenuWrap .qMenuTit::after{background-size: contain;background-repeat: no-repeat;width: 50px; height: 115px;    left: 32px;}
	.quickM > a{width: 40px;height: 40px;}
	@keyframes icoMoveUpDown {
		0%   { top: -38px; }
		10%  { top: -48px; }
		20%  { top: -38px; }
		100% { top: -38px; }
	}
	/*@@--*/

 }

 @media screen and (max-width:550px) { 
	/*--@@*/
	.qMenu {right: 0;bottom: -4%;}
	.qMenu .qMenuWrap .qMenuTit{border-radius: 12px 0 0;box-shadow:none;background: #034ea299;}
	.qMenu .qMenuWrap .qMenuTit:hover{background: #034ea2;}
	.qMenu .qMenuWrap .qMenuTit::after{display: none;}
    .qMenu .qMenuWrap .qMenuFund {box-shadow:none;margin-top:0px;border-radius:0;background: #e0466299;}
    .qMenu .qMenuWrap .qMenuFund:hover {background: #e04662;}
	.qMenu .qMenuWrap .comm {width: 54px;height: 50px;font-size: 12px;}
	.qMenu .qMenuWrap .qMenuFund:hover, .qMenu .qMenuWrap .qMenuTit:hover{box-shadow:none;}
	.qMenu .qMenuWrap .qMenuFund span a {font-size: 14px;}
	.quickM > a{    background: #00254e99;}
	.quickM > a:hover{    background: #00254e;}
	.quickM > a{margin-top: 0px;width: 100%;height: 40px;border-radius: 0 0 0 12px;}
	.quickM > a:hover { transform: translateY(0px);}
	.quickM > a img{max-width: 86%;}
 }

 /* @media screen and (max-width:1440px) { 
	#external-qMenuBtn::after{background-size: contain;background-repeat: no-repeat;width: 50px; height: 115px;    left: 32px;}
    @keyframes icoMoveUpDown {
		0%   { top: -38px; }
		10%  { top: -48px; }
		20%  { top: -38px; }
		100% { top: -38px; }
	}
 }
 @media screen and (max-width:550px) { 
	#external-qMenuBtn{border-radius: 12px 0 0;box-shadow:none;background: #034ea299;}
	#external-qMenuBtn:hover{background: #034ea2;}
	#external-qMenuBtn::after{display: none;}
    #external-qMenuBtn:hover{box-shadow:none;}
 } */



.menuContain{padding: 46px 0;margin: auto;width: 889px;border-radius: 20px;background: linear-gradient(115deg, #0080ff, #034EA2);min-height: 300px;position: fixed;z-index: 9999;overflow: hidden;transform: translate(-50%, -50%);top: 50%;left: 50%;}
.menuContain .qMenu_hd{position: relative;width: 90%;margin: auto;line-height: normal;}
.menuContain .qMenu_hd h1{width: 240px;color:#fff;font-weight: 500;font-size: 34px;text-align: left;}
.menuContain .qMenu_hd h1 p.cs{font-weight: 700;font-size: 44px;}
.menuContain .qMenu_hd:before{content: "";position: absolute;width: calc(100% - 250px);height: 1px;border-bottom: 1px solid #ffffff80;right: 0;bottom: 18px;}
.menuContain .qMenu_hd div{position: absolute;width: 20px;height: 20px;right: 0;top:2px}
.menuContain .qMenu_hd div a{height: 100%;display: block;background-image:url("../images/2024/popup/tbtn.png");background-size: contain;background-repeat: no-repeat;background-position: center;}
.menuContain .qMenu_hd div:hover{animation: closeUpDown 1s ease-in-out infinite; }
@keyframes closeUpDown{
    0% {top:2px;}
	50% {top:-2px;}
    100% {top:2px;}
}
/*User service*/
.menuContainbk{position: fixed;width: 100vw;height: 100vh;background: #11111157;transform: translate(-50%, -50%);top: 50%;left: 50%;z-index: 999;}
.menuContain{box-shadow: rgb(0 0 0 / 50%) 0 0 0 9999px;}
.menuContain .userContain{position: relative;width: 90%;margin: 48px auto 0 auto;z-index: 0;}
.menuContain .userTab{ display: inline-block;width: 100%;margin-top: 0;}
.menuContain .userTab li{width: auto;font-size: 24px;font-weight: 600;margin-right: 18px;padding-right: 20px;margin-left: 22px;float: left;}
.menuContain .userTab li:hover a{color: #034EA2;}
.menuContain .userTab li a{position: relative;color: #ffffff91;display: block;text-align: left;}
.menuContain .userTab li:hover a{color: #fff;}
.menuContain .userTab li a span{position: relative;padding-left: 35px;}
.menuContain .userTab li.active a{font-weight: 700;display: block;color: #fff;}
.menuContain .userTab li a span::before{position: absolute;content: "";top:50%;left: 4px;transform: translateY(-50%);background-image:url("../images/2024/popup/usertab.png");width: 26px;height: 26px;background-size: contain;background-repeat: no-repeat;background-position: center;}
.menuContain .userTab li a span::before{opacity: 0.4;}
.menuContain .userTab li.active a span::before{opacity: 1;}

.menuContain .userCon{position: relative;display: inline-block; width: 100%;margin-top: 30px;text-align: left;}
.menuContain .userTabCon {background: #fff;padding: 20px 15px;border-radius: 15px;min-height: 202px;}
.menuContain .userTabCon li{display: inline-block;width: 19.5%;text-align: center;font-size: 12px;font-weight: 500;}
.menuContain .userTabCon li div {width: 94%;font-size: 14px;margin: 5px auto;box-shadow: 0 0 0 1px #bdbdbd; border-radius: 5px;}
.menuContain .userTabCon li div a{position: relative;display: block;color: #0C0C0C;height: 42px;}
.menuContain .userTabCon li div a span{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: normal;width: 100%;}
.menuContain .userTabCon li div:hover{box-shadow: 0 0 0 1px #0080ff;}
.menuContain .userTabCon li div:hover a{color: #0080ff;}
.menuContain .userTabCon li div img {display: inline-block;margin:0;filter: unset;   width: 12px;margin-left: 2px;opacity: 0.5;}

/*지울것*/
.menuContain .userContain::after{display: none;font-size: 24px;}
.menuContain .userTab li.active  { border: 0px;border-width: 0px;text-shadow: none} 
.menuContain .userTab li{ line-height: normal;border-top: 0;border-bottom: 0;}
.menuContain .userTab li.active a {box-shadow: none;}
.menuContain .userTab li:hover a{color: #fff;}
.menuContain .userTabCon li {margin: 0 0 0 0;}



@media (max-width: 895px){.menuContain{width: 90%;}}
@media (max-width: 826px){.menuContain .serv2 .a li{width: 23.8%;}}
@media (max-width: 803px){.menuContain .userTabCon li div{width: 90%;}}

@media (max-width: 768px){.menuContain .userContain::after {bottom: -50px;}}

@media (max-width: 703px){
    .menuContain .menuContainBottom ul span {font-size: 12px;}
   
}
@media (max-width: 667px){
    .menuContain .userTab li{margin-right: 0px;    margin-left: 12px;font-size: 20px;}
    .menuContain .userTab li a span::before{width: 22px;height: 22px;}
    .menuContain .userTab li a span{padding-left: 32px;}
    .menuContain .userTabCon li{width: 24.5%;margin: 0;}
    .menuContain .userCon {margin: 0;margin-top: 18px;}
}
@media (max-width: 620px){.menuContain .userTabCon li{width: 32.5%;margin: 0;}}
@media (max-width: 600px){
    .menuContain {padding: 28px 0;}
    .menuContain .userContain{margin: 34px auto 0 auto;}
    .menuContain .userTab li{padding-right: 8px;margin-left: 8px;font-size: 18px;}
    .menuContain .userTab li a span {padding-left: 26px;}
    .menuContain .userTab li a span::before {width: 20px;height: 20px;}
    .menuContain .userTabCon li div{font-size: 12px;}
    .menuContain .userTabCon li div a{height: 36px;}
    .menuContain .userTabCon li div{    margin: 2px auto;}
    .menuContain .qMenu_hd h1 p.cs{font-size: 32px;}
    .menuContain .qMenu_hd h1{font-size: 24px;width: 166px;}
    .menuContain .qMenu_hd:before{width: calc(100% - 180px);}
    .menuContain .userTabCon li div img {width: 10px;transform: translateY(-2px);}
}
@media (max-width: 515px){
    
    .menuContain .userContain{margin: 20px auto 0 auto;}
}

@media (max-width: 436px){
    
    .menuContain .userTabCon li div:hover{background-size:60px 50px;}
    .menuContain .userContain::after {font-size: 100px; bottom: 0px; right: 0px;}
    .menuContain .userTab li{font-size: 16px;line-height: normal;}
    .menuContain .userTab li a span::before {width: 16px;height: 16px;}
    .menuContain .userTab li a span {padding-left: 23px;}
    .menuContain .userTab li{margin-left: 5px;padding-right: 0px;}
}
@media (max-width: 414px){
    
    .menuContain .userTabCon li {font-size: 11px;}
    .menuContain .userTabCon li div:hover{background-size:60px 50px;}     
}

@media (max-width: 375px){

    .menuContain .userTabCon li div:hover{background-size:55px 45px;} 
    .menuContain .userTabCon.active {max-height: 200px;overflow-y: scroll;}
    .menuContain .userTabCon li div {width: 94%;}
}
@media (max-width: 344px){
    .menuContain .userTabCon li div{width: 98%;}
    .menuContain .userContain::after {font-size: 70px;}
}
@media (max-width: 320px){
    .menuContain .userTabCon li {font-size: 10px;width: 49%;}
    .menuContain .userTabCon li div:hover{background-size:50px 40px;} 
    .menuContain .userContain{max-height: 300px;}
    .menuContain .userCon{margin: 0px 0 20px 0px;}
    
}
@media (max-width: 320px) and (max-height: 480px){
    .menuContain {min-height: 130px;}
    .menuContain .userContain {max-height: 200px;}
    .menuContain .userTabCon.active {max-height: 130px;}  
    
}