@font-face { font-family: 'pp'; font-weight: 100; font-style: normal; src: url('../fonts/Paperlogy1.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'pp'; font-weight: 200; font-style: normal; src: url('../fonts/Paperlogy2.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'pp'; font-weight: 300; font-style: normal; src: url('../fonts/Paperlogy3.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'pp'; font-weight: 400; font-style: normal; src: url('../fonts/Paperlogy4.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'pp'; font-weight: 500; font-style: normal; src: url('../fonts/Paperlogy5.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'pp'; font-weight: 600; font-style: normal; src: url('../fonts/Paperlogy6.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'pp'; font-weight: 700; font-style: normal; src: url('../fonts/Paperlogy7.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'pp'; font-weight: 800; font-style: normal; src: url('../fonts/Paperlogy8.ttf') format('woff'); font-display: swap; } 
@font-face { font-family: 'pp'; font-weight: 900; font-style: normal; src: url('../fonts/Paperlogy9.ttf') format('woff'); font-display: swap; } 
body {font-family: 'pp';}
/* #quickMenu #quickMenuTop{background-color: #034EA2; height: 100px; border-radius: 20px 20px 0 0 ;} */
/* #quickMenu .qMenu_hd div a{position: relative; display: block; width: 50px; height: 50px; text-indent: -9999px;}
#quickMenu .qMenu_hd h1{font-size: 32px; font-weight: 600; display: inline;margin: 0 0 0 30px;line-height: 98px;color: #fff;text-shadow: 1px 4px 2px #020202;}
#quickMenu .qMenu_hd div{cursor: pointer;float: right;width: 50px;height: 50px;background-color: #5DBBAA;border-radius:50px;box-shadow: 0px 0px 1px 8px #5dbbaa5b;margin: 24px 40px;}
#quickMenu .qMenu_hd div{background-image:url("../images/2024/popup/tbtn.png");background-size:20px;background-repeat: no-repeat;background-position: center; }
#quickMenu .qMenu_hd div:hover{box-shadow: 0px 0px 1px 10px #5dbbaa5b;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s;}
#quickMenu ul{list-style: none;padding: 0;} */


.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;}
.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;}
.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;}
.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 .userTabCon li div a.ex span{padding-right: 10px;}
.menuContain .userTabCon li div a.ex span:after{content: ""; position: absolute;    width: 12px;
    height: 12px;
    top: 50%;
    right: -4px;
    opacity: 0.5;
transform: translateY(-50%);background:url("../images/2024/popup/exlink.svg")  no-repeat center center;
    background-size: contain;line-height: normal;} */



/* .menuContain .userContain{position: relative;width: 90%;margin: 40px auto 0 auto;z-index: 0;}
.menuContain .userContain::after{position: absolute;bottom: 0px;right: -20px;content: "CSU";font-size: 176px;font-weight: 800;color: #e6e6e6;z-index: -1;}
.menuContain .userTab{ display: inline-block;width: 100%;margin-top: 0;}
.menuContain .userTab li{cursor: pointer;position: relative;float: left; font-weight: 600; width: 33%; border-bottom: 1px solid #034EA2;border-top: 2px solid #ffffff;text-align: center;line-height: 56px;}
.menuContain .userTab li:hover a{color: #034EA2;display: inline;}
.menuContain .userTab li a{color: #020202;text-decoration: none;}
.menuContain .userTab li.active a{box-shadow: inset 0 -10px 0px #5DBBAA;}
.menuContain .userTab li.active{ border: solid #034EA2;border-width: 3px 1px 0 1px;text-shadow: 0 2px 6px #cecece;}
.menuContain .userCon{position: relative;display: inline-block;width: 100%;margin: 20px 0 0 0;}
.menuContain .userTabCon{display: inline-block;margin: 0;}
.menuContain .userTabCon li{display: inline-block;width: 19%;text-align: center;font-size: 12px;font-weight: 500; margin: 0 0 40px 0;}
.menuContain .userTabCon li div{cursor: pointer; width: 75%;margin: auto;}
.menuContain .userTabCon li div a{color: #0C0C0C; text-decoration: none;}
.menuContain .userTabCon li div img{width: 48px;display: block;margin: 0 auto 4px auto;filter: drop-shadow(2px 2px 1px #9e9e9e);}
.menuContain .userTabCon li div:hover{background-size:70px 60px;background-repeat: no-repeat;background-position: center;background-image: url("../images/2024/popup/hover.png");}
.menuContain .userTabCon li div:hover a{color: #034EA2;} */

/*지울것*/
.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: 793px){
    /* .menuContain .serv1 ul li{font-size: 12px;}
    .menuContain .serv2 ul li div{font-size: 12px;}
    .menuContain .serv2 ul li ul li{font-size: 12px;} */
}
@media (max-width: 768px){.menuContain .userContain::after {bottom: -50px;}}
@media (max-width: 772px){
    /* .menuContain .serv1 ul li{width: 18.8%;}
    .menuContain .serv2 .a li{width: 23.7%;}
    .menuContain .serv2 .d li{width: 31.7%;}
    .menuContain .serv2 .c li{width: 18.9%;}
    .menuContain .serv2 .e li {width: 47%;}     */
}
@media (max-width: 703px){
    .menuContain .menuContainBottom ul span {font-size: 12px;}
    /* .menuContain .serv2 .a{width: 100%;}
    .menuContain .serv2 .b{width: 100%;}
    .menuContain .serv2 .d{width: 100%;}
    .menuContain .serv2 .e{width: 100%;}
    .menuContain .serv2 .a li{width: 48%;}
    .menuContain .serv2 .c li {width: 48%;}
    .menuContain .serv2 .d li {width: 48%;}
    .menuContain .serv2 .b li {width: 48%;}
    .menuContain .serv1 ul li{width: 32%;font-size: 13px;}
    .menuContain .serv2 ul li div{font-size: 13px;}
    .menuContain .serv2 ul li ul li{font-size: 13px;} */
}
@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 .serv1 ul li {width: 31.7%;}
    .menuContain .menuContainTop div{margin: 24px 30px;}
    .menuContain .menuContainTop h1{line-height: 99px;} */
    .menuContain .userContain{margin: 20px auto 0 auto;}
}
@media (max-width: 445px){
    /* .menuContain .menuContainBottom ul .btm3::before{display: none;}
    .menuContain .menuContainBottom ul .btm2::before{display: none;}
    .menuContain .menuContainBottom ul .btm1::before{display: none;}
    .menuContain .menuContainBottom ul .dot::after{right: 0;width: 3px;height: 3px;}
    .menuContain .menuContainTop{height: 80px;}
    .menuContain .menuContainTop h1{margin: 0 0 0 16px;line-height: 80px;font-size: 28px;}
    .menuContain .menuContainBottom{height: 60px;}
    .menuContain .menuContainBottom ul li{line-height: 60px;}
    .menuContain .menuContainBottom ul .dot::after{bottom: 30px;}
    .menuContain .menuContainTop div{margin: 22px 16px 0 0;} */
}
@media (max-width: 436px){
    /* .menuContain .menuContainTop div {background-size: 14px; width: 35px; height: 35px; }
    .menuContain .serv1 ul li {width: 48%;} */
    .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){
    /* #linkService .servContain{height: 470px;} */
    /* .menuContain .userTabCon li div img {width: 40px;} */
    .menuContain .userTabCon li {font-size: 11px;}
    .menuContain .userTabCon li div:hover{background-size:60px 50px;}     
    /* .menuContain .menuContainTop div {background-size: 14px;width: 35px;height: 35px;margin: 22px 22px 0 0;} */
}
/* @media (max-width: 390px){#linkService .servContain{height: 410px;}} */
@media (max-width: 375px){
    /* #linkService .servContain{overflow-y: auto; height: 260px;} */
    /* .menuContain .menuContainTop div {margin: 22px 16px 0 0;} */
    .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;}
    /* #linkService .servContain{height: 190px;}
    .menuContain .serv2 ul li ul li{font-size: 12px;}
    .menuContain .serv1 ul li{font-size: 12px;} 
    .menuContain .menuContainBottom ul span{font-size: 11px;}
    .menuContain .menuContainTop {height: 60px;}
    .menuContain .menuContainTop h1{margin: 0 0 0 16px;line-height: 60px;font-size: 20px;}
    .menuContain .menuContainTop div {box-shadow: 0px 0px 1px 5px #5dbbaa5b;background-size: 10px;width: 25px;height: 25px;}
    .menuContain .menuContainTop div{margin: 18px 16px 0 0;} 
    .menuContain .menuContainBottom{height: 50px;}
    .menuContain .menuContainBottom ul li{line-height: 45px;}
    .menuContain .menuContainBottom ul .dot::after{bottom: 22px;}     */
}
@media (max-width: 320px) and (max-height: 480px){
    .menuContain {min-height: 130px;}
    .menuContain .userContain {max-height: 200px;}
    .menuContain .userTabCon.active {max-height: 130px;}  
    /* .menuContain .menuContainTop {height: 45px;}
    .menuContain .menuContainTop h1 {line-height: 45px;}
    .menuContain .menuContainTop div { margin: 10px 16px 0 0;} 
     #linkService .servContain{height: 110px;}     */
     /* .menuContain .menuContainBottom { height: 45px; } */
}