@font-face { font-family: 'SCoreDream'; font-weight: 100; font-style: normal; src: url('../fonts/S-CoreDream-1Thin.woff') format('woff'); font-display: swap; } 
@font-face { font-family: 'SCoreDream'; font-weight: 200; font-style: normal; src: url('../fonts/S-CoreDream-2ExtraLight.woff') format('woff'); font-display: swap; } 
@font-face { font-family: 'SCoreDream'; font-weight: 300; font-style: normal; src: url('../fonts/S-CoreDream-3Light.woff') format('woff'); font-display: swap; } 
@font-face { font-family: 'SCoreDream'; font-weight: 400; font-style: normal; src: url('../fonts/S-CoreDream-4Regular.woff') format('woff'); font-display: swap; } 
@font-face { font-family: 'SCoreDream'; font-weight: 500; font-style: normal; src: url('../fonts/S-CoreDream-5Medium.woff') format('woff'); font-display: swap; } 
@font-face { font-family: 'SCoreDream'; font-weight: 600; font-style: normal; src: url('../fonts/S-CoreDream-6Bold.woff') format('woff'); font-display: swap; } 
@font-face { font-family: 'SCoreDream'; font-weight: 700; font-style: normal; src: url('../fonts/S-CoreDream-7ExtraBold.woff') format('woff'); font-display: swap; } 
@font-face { font-family: 'SCoreDream'; font-weight: 800; font-style: normal; src: url('../fonts/S-CoreDream-8Heavy.woff') format('woff'); font-display: swap; } 
@font-face { font-family: 'SCoreDream'; font-weight: 900; font-style: normal; src: url('../fonts/S-CoreDream-9Black.woff') format('woff'); font-display: swap; } 
body {font-family : 'SCoreDream'}

.menuContain{margin: auto;width: 889px;border-radius: 20px;background-color: #fff;min-height: 300px;position: fixed;z-index: 9999;overflow: hidden;transform: translate(-50%, -50%);top: 50%;left: 50%;}
.menuContain .menuContainTop{background-color: #034EA2; height: 100px; border-radius: 20px 20px 0 0 ;}
.menuContain .menuContainTop div a{position: relative; display: block; width: 50px; height: 50px; text-indent: -9999px;}
.menuContain .menuContainTop 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;}
.menuContain .menuContainTop 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;}
.menuContain .menuContainTop div{background-image:url("../images/2024/popup/tbtn.png");background-size:20px;background-repeat: no-repeat;background-position: center; }
.menuContain .menuContainTop div:hover{box-shadow: 0px 0px 1px 10px #5dbbaa5b;transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s;}
.menuContain ul{list-style: none;padding: 0;}
/*Link service*/
#linkService .servContain{margin: 20px 0;height: 410px; overflow-y: scroll;}
.menuContain .serv {font-weight: bold;margin: 0 30px;font-size: 16px;}
.menuContain .serv::before{display: inline-block; margin: 0 6px 3px 0px;content:'';width:20px;height:20px; background-size:15px;background-repeat: no-repeat;background-position: center;background-image: url("../images/2024/popup/serv.png");vertical-align:middle;}
.menuContain .serv ul li{font-weight: 300;display: inline-block;margin: 10px 0;}
.menuContain .serv1 ul{margin: 8px 0 26px 0;}
.menuContain .serv2{ margin-bottom:30px;}
.menuContain .serv1 ul li{cursor: pointer;border: 1px solid #bbb;border-radius: 25px;line-height: 30px;text-align: center; width: 19%;font-size: 13px;margin: 7px 0 0 0;}
.menuContain .serv1 ul li a{color: #0C0C0C;text-decoration: none;}
.menuContain .serv1 ul li:hover{box-shadow: 0px 0px 8px -3px #034EA2;border: 1px solid #034EA2;font-weight: 500;}
.menuContain .serv1 ul li:hover a{color: #034EA2;}
.menuContain .serv2 ul li div{cursor: pointer; border-radius: 10px;line-height: 30px; color: #fff; background-color: #5DBBAA;font-size: 14px;font-weight: 500;text-align: center; text-shadow: 1px 2px 3px #999999;}
.menuContain .serv2 ul li div a{color: #ffffff;text-decoration: none;}
.menuContain .serv2 ul li div:hover{text-decoration: underline; box-shadow: 0px 0px 10px -3px #4c9b8c;background-color: #65c5b3;}
.menuContain .serv2 ul li ul li{cursor: pointer; border: 1px solid #bbb;border-radius: 25px;line-height: 30px;text-align: center; font-size: 13px;margin: 7px 0 0 0;}
.menuContain .serv2 ul li ul li a{color: #0C0C0C;text-decoration: none;}
.menuContain .serv2 ul li ul li:hover{box-shadow: 0px 0px 8px -3px #034EA2; border: 1px solid #034EA2;font-weight: 500;}
.menuContain .serv2 ul li ul li:hover a{color: #034EA2;}
.menuContain .serv2 .a{width: 80%;} .menuContain .serv2 .a li{width: 24%;}
.menuContain .serv2 .b{width: 19%;} .menuContain .serv2 .b li{width: 100%;}
.menuContain .serv2 .c{width: 100%;} .menuContain .serv2 .c li{width: 19%;}
.menuContain .serv2 .d{width: 60%;} .menuContain .serv2 .d li{width: 32%;}
.menuContain .serv2 .e{width: 39%;} .menuContain .serv2 .e li{width: 48%;}
.menuContain .serv2 .f{width: 100%;} 
.menuContain .menuContainBottom{background-color: #034EA2; height: 80px;border-radius:0 0 20px 20px;font-size: 14px;}
.menuContain .menuContainBottom ul{text-align: center;}
.menuContain .menuContainBottom ul li{position: relative;line-height: 80px; display: inline-block;width: 30%;}
.menuContain .menuContainBottom ul .dot::after{position: absolute;right: -10px;bottom: 38px;content:'';width:5px;height:5px;border-radius: 50px; background: #ffffff;}
.menuContain .menuContainBottom ul .btm1::before{display: inline-block; margin: 0 6px 3px 0px;content:'';width:20px;height:20px; background-size:16px 16px;background-repeat: no-repeat;background-position: center;background-image: url("../images/2024/popup/btm1.png");vertical-align:middle;}
.menuContain .menuContainBottom ul .btm2::before{display: inline-block; margin: 0 6px 3px 0px;content:'';width:20px;height:20px; background-size:13px 17px;background-repeat: no-repeat;background-position: center;background-image: url("../images/2024/popup/btm2.png");vertical-align:middle;}
.menuContain .menuContainBottom ul .btm3::before{display: inline-block; margin: 0 8px 3px 0px;content:'';width:20px;height:20px; background-size:20px 17px;background-repeat: no-repeat;background-position: center;background-image: url("../images/2024/popup/btm3.png");vertical-align:middle;}
.menuContain .menuContainBottom ul span{padding: 10px;cursor: pointer;}
.menuContain .menuContainBottom ul li span a{color: #fff; text-decoration: none;}
.menuContain .menuContainBottom ul span:hover{text-decoration: underline;color: #fff; }
/*User service*/
.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;}

@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 .userTabCon li{width: 22.9%;margin: 0 0 25px 0;}
    .menuContain .userCon {margin: 0px 0 20px 10px;}
}
@media (max-width: 553px){.menuContain .userTabCon li{width: 31%;margin: 0 0 20px 0;}}
@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 .userTab li {line-height: 36px;}
    .menuContain .userContain::after {font-size: 100px; bottom: 0px; 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){
    #linkService .servContain{height: 190px;}
    .menuContain .serv2 ul li ul li{font-size: 12px;}
    .menuContain .serv1 ul li{font-size: 12px;}
    .menuContain .userTabCon li {font-size: 10px;}
    .menuContain .userTabCon li div:hover{background-size:50px 40px;} 
    .menuContain .userContain{max-height: 300px;}
    .menuContain .userCon{margin: 0px 0 20px 0px;}
    .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 .menuContainTop {height: 45px;}
    .menuContain .menuContainTop h1 {line-height: 45px;}
    .menuContain .menuContainTop div { margin: 10px 16px 0 0;}
    .menuContain {min-height: 130px;}
    #linkService .servContain{height: 110px;}    
    .menuContain .userContain {max-height: 200px;}
    .menuContain .userTabCon.active {max-height: 130px;}   
    .menuContain .menuContainBottom { height: 45px; }
}