html {overflow:auto;height:100%; min-width:340px;  }
body {margin:0;padding:0;font-size:0.75em; height:100%;font-family:'Pretendard'; -webkit-font-smoothing: antialiased;overflow:auto; -moz-osx-font-smoothing: grayscale;  position: relative; width: 100%; letter-spacing:.2px; min-width:340px;margin:0 auto; background:linear-gradient(90deg, rgba(243,246,251,1) 0%, rgba(243,247,252,1) 100%);} 
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Pretendard';}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle; font-family:'Pretendard';}
input, button {margin:0;padding:0;font-size:1em;font-family:'Pretendard';;}
button {cursor:pointer}
input[type=text], input[type=password], input[type=submit], input[type=image], button {font-size:1em; -webkit-appearance:none}
textarea, select {font-size:1em;font-family:'Pretendard';}
textarea {border-radius:0;-webkit-appearance:none;font-family:'Pretendard';;}
select {margin:0;background:none;font-family:'Pretendard';}
p {margin:0;padding:0;word-break:break-all; font-family:'Pretendard';}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none; font-weight:400; font-family:'Pretendard'; !important;}
ul,li,dl,dt,dd {padding:0;margin:0; font-family:'Pretendard';}
ul {list-style:none}
*,:after,:before {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
input[type="text"]:focus {outline: none;}
input[type="password"]:focus {outline: none;}
textarea:focus {outline: none;}
input[type="text"]::placeholder {color:#bbb;  letter-spacing: 0px;}
input[type="password"]::placeholder {color:#bbb;  letter-spacing: 0px;}
textarea::placeholder {color:#bbb;  letter-spacing: 0px;}

.swiper {z-index: 0 !important;}

body::-webkit-scrollbar {display: none;}

.bg {position: fixed; left:30px; top:-20px; z-index: -1;}
nav {position: fixed; left:0; top:0px; height:100%;  width:300px; padding:33px 35px 75px 40px;  z-index: 8;overflow: hidden;}
nav .scroll {height:calc(100% - 395px); width:100%; padding-bottom:0px; overflow-y:scroll;}
nav .scroll::-webkit-scrollbar {display: none;}
nav .scroll ul.list{overflow-x: hidden;  overflow-y: scroll; height:auto; max-height:175px; display: none;}
nav .scroll ul.list::-webkit-scrollbar {display: none;}
nav .logo {margin-bottom:20px; display: inline-block;}
/*nav::-webkit-scrollbar {
    width: 6px;
 }
nav::-webkit-scrollbar-thumb {
    background-color: #eee;
    border-radius: 10px;
 }
nav::-webkit-scrollbar-track {
    background-color: #fafafa;
    border-radius: 10px;
 }*/

nav ul.menu li {margin-top:13px; }
nav ul.menu li a {font-size:14px; color:#84888f; display: inline-block; width:100%; position: relative; font-weight:500;}
nav ul.menu li a span {font-size:11.5px; display: inline-block; padding:2px 5px; border-radius:3px; margin-left:1px; color:#8dbfcf; background:#deedf9;}
nav ul.menu li a img {margin:-2px 9px 0 0; filter:grayscale(.8) invert(0.3); width:19px;}
nav ul.menu li.shop_open a .arrow_img {position: absolute; right:0; top:7px; margin:0; width:10px; transition: .3s;}
nav ul.menu li ul {display: none;}
nav ul.menu li ul {padding-left:33px;}
nav ul.menu li ul li {margin-top:10px; }
nav ul.menu li ul li a {color:#757B86; font-size:14px;}

nav ul.menu li.on a {color:#ADD8E6; font-weight:600;}
nav ul.menu li.on a img {filter:initial;}
nav ul.menu li.on.shop_open a .arrow_img {transform: rotate(180deg);}
nav ul.menu li.on.shop_open a {color:#A2A8B0; font-weight:400;}
nav ul.menu li.on.shop_open a img {filter:grayscale(.8);}
nav ul.menu li.on ul {display: block;}
nav ul.menu li.on ul li a {color:#cbced2; font-weight:400;}
nav ul.menu li.on ul li.on a {color:#ADD8E6; font-weight:500;}

nav .p_tit {font-size:14px; color:#575b61; margin-top:25px; font-weight:600;}
nav .p_tit:after {content:''; clear:both; display: table;}
nav .p_tit button {float:right; border:none; margin-top:-1px; background:none;}

nav .none_creation {width:100%; height:140px; border-radius:15px; padding:19px 15px 15px 15px; position: relative; background:url('../img/none_creation.jpg')no-repeat center; background-size:cover; margin-top:13px;}
nav .none_creation h3 {font-size:18px; color:#fff; font-weight:600; line-height:1.2em; padding-left:7px;text-shadow: 1px 1px 3px rgba(0,0,0,.05);}
nav .none_creation button {height:35px; position: absolute; left:15px; width:Calc(100% - 30px); bottom:15px; background:#fff; border-radius:50px; border:none; color:#ABD2E2; font-size:14px; font-weight:500; letter-spacing: .3px;}
/*nav .none_list {margin-top:15px; height:46px; border-radius:10px; background:linear-gradient(110deg, rgba(173,216,230,1) 0%, rgba(255,192,203,1) 100%);border:none; color:#fff; font-size:15px; width:100%; letter-spacing: .5px;}*/
/*nav .none_list img {filter:brightness(0) invert(1); width:23px; margin:-3px 6px 0 -6px ;}*/

nav .list li {margin-top:15px; }
nav .list li:after{content:''; clear:both; display: table;}
nav .list li .img {float:left;width:40px; height:40px; border-radius:4px; background:#eee; position: relative; box-shadow: 3px 3px 10px rgba(0,0,0,.20);}
nav .list li .img .play {position: absolute; left:0; top:0; width:100%; height:100%; border:none; background:none; opacity: 0; transition: .3s; z-index: 1; }
nav .list li .img .play img  {width:23px;}
nav .list li .img .play .play2 {display: none;}
nav .list li .img .play.on .play1 {display: none;}
nav .list li .img .play.on .play2 {display: inline-block;}
nav .list li .img:hover .play {opacity: 1;}
nav .list li .img .play.on:after {content:''; z-index: -1; position: absolute; left:0; top:0; width:100%; height:100%; background:#000080; opacity: .65; border-radius:4px;}
nav .list li .img .play.on {opacity: 1;}

nav .list li .txt {float:right; width:calc(100% - 53px); position: relative; padding-right:17px;}
nav .list li .txt p {font-size:13px; color:#757B86; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; font-weight:500; margin-top:5px;}
nav .list li .txt span {display: inline-block; width:100%; font-size:12px; color:#cbced2; margin-top:2px; }
nav .list li .txt span img {margin:-2px 3px 0 0;}

nav .list li .txt .list_more {display:none; position: absolute; right:-7px; top:22px; width:170px; border-radius:10px; background:#fff; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%); padding:10px; z-index: 3; height:auto;}
nav .list li .txt .list_more.on {display:block;}
nav .list li .txt .list_more li {display: inline-block; width:100%; font-size:12px; color:#cbced2; margin-top:0px; cursor:pointer;}
nav .list li .txt .list_more li a {display: inline-block; width:100%; font-size:13px; color:#77797b; padding:5px 3px; font-weight:500;}
nav .list li .txt .list_more li a img {margin:-2px 5px 0 0;}
nav .list li .txt .list_more li:first-child {padding:1px 0 5px 0;}
nav .list li .txt .list_more li:last-child {padding:8px 0 0 0; margin-top:10px;border-top:1px solid #f2f2f2;}

nav .list li .txt .more {position: absolute; right:-2px; top:50%; transform: translate(0,-50%); border:none; background:none; }

nav .mo_profile {width:100%; padding:8px 10px; border-radius:50px; box-shadow: inset 1px 1px 5px rgba(0,0,0,.1); position: relative; margin-top:30px; background:#fff; display: none;}
nav .mo_profile:after {content:''; clear:both; display: table;}
nav .mo_profile .bt_box {position: absolute; right:20px; top:50%; transform: translate(0,-50%);}
nav .mo_profile .bt_box button {border:none; background:none; margin-left:7px;}
nav .mo_profile .img {width:55px; height:55px; border-radius:50%; float:left;}
nav .mo_profile .txt {float:right; width:calc(100% - 68px); padding-top:10px;}
nav .mo_profile .txt p {font-size:15px; color:#616469; font-weight:500;}
nav .mo_profile .txt span {display: inline-block; width:100%; font-size:13px; color:#caced2; margin-top:2px; font-weight:300;}
nav .mo_profile .txt a {display: inline-block; width:100%; font-size:15px; color:#A2A8B0; margin-top:7px;}
nav .mo_profile .txt a:after {content:''; clear:both ;display: table;}
nav .mo_profile .txt a img {float:right; margin:-2px 10px 0 0;}


nav .footer {position: absolute; left:40px; bottom:125px; width:250px; padding-left:5px;}
nav .footer a {display: inline-block; margin:5px 0; font-size:13.5px; color:#A2A8B0}
nav .footer .sns {margin-top:0px; padding-left:116px}
nav .footer .sns button {border:none; background:none; margin-right:15px;}

nav .tester {width:calc(100% + 4px); padding:8px 10px 8px 34px; background:linear-gradient(110deg, rgb(173 216 230 / 24%) 0%, rgb(255 192 203 / 27%) 100%); color:#b0b9c1; font-weight:500; border-radius:8px; margin:5px 0 4px 0; font-size:13px; margin-left:-2px; /*box-shadow: inset 2px 2px 4px #e0e9f1, inset -1px -1px 3px #e0e9f1;*/ position:relative; text-align: center;}
nav .tester:after {content:''; clear:both; display: table}
nav .tester span {float:right; color:#cbbfca;font-size:12.5px}
nav .tester b {display: inline-block; font-size:11px; font-weight:600; border-radius:4px; background:#fff; width:19px; height:19px; text-align: center; line-height:20px; position: absolute; left:9px; top:6px; color:#c5d7dd}

nav .tester_mobile {display:none; margin:6px 0 6px 0; width:100%;}
nav .tester_mobile {width:calc(100% + 4px); padding:8px 10px 8px 34px; background:linear-gradient(110deg, rgb(173 216 230 / 24%) 0%, rgb(255 192 203 / 27%) 100%); color:#b0b9c1; font-weight:500; border-radius:8px; margin:5px 0 4px 0; font-size:13px; margin-left:-2px; /*box-shadow: inset 2px 2px 4px #e0e9f1, inset -1px -1px 3px #e0e9f1;*/ position:relative;}
nav .tester_mobile:after {content:''; clear:both; display: table}
nav .tester_mobile span {float:right; color:#cbbfca;font-size:12.5px}
nav .tester_mobile b {display: inline-block; font-size:11px; font-weight:600; border-radius:4px; background:#FFF; width:19px; height:19px; text-align: center; line-height:20px; position: absolute; left:9px; top:6px; color:#c5d7dd}


nav .footer .credit_box {padding:10px 15px 10px 15px; border-radius:15px;  background:#fff; /*border:1px solid #fff; box-shadow: inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%); */ position: relative; margin-left:-10px; width:Calc(100% - 20px); margin-bottom:10px;}
nav .footer .credit_box .credit {font-size:13px; color:#757B86; margin-top:14px;  font-weight:500;}
nav .footer .credit_box .credit:after {content:''; clear:both; display: table}
nav .footer .credit_box .credit span {float:right; background:#EFF3F8; border-radius:4px; padding:3px 7px 3px 5px; position: relative; top:-4px; font-size:12px;}
nav .footer .credit_box .credit span img {margin:-2px 4px 0 0; width:13px;}
nav .footer .credit_box button.more {width:100%; margin-top:5px; padding:6px 0; border-radius:45px; font-size:12px; color:#fff; background:#000080; border:none;}
nav .footer .credit_box button.more img {width:13px; margin:-2px 5px 0 0;}
nav .footer .credit_box button.more2 {color:#000080; font-size:12px; font-weight:500; position: absolute; right:16px; top:13px; border:none; background:none;}
nav .footer .credit_box button.more2 img {width:12px; margin:-2px 3px 0 0;}
nav .footer .credit_box button.view_more {width:calc(100% + 10px); height:26px; background:#ADD8E6; color:#fff; font-weight:500; border:none; border-radius:50px;  margin-top:6px; font-size:14px; margin-left:-5px;}
nav .footer .credit_box .detail_view {margin-top:8px; margin-bottom:0px; background:#f3f6fb; padding:7px 15px 10px 15px; border-radius:10px; display: none; margin-left:-5px; width:calc(100% + 10px);}
nav .footer .credit_box .detail_view.on {display: block;}
nav .footer .credit_box .detail_view li {margin-top:4px; font-size:12px; font-weight:500; color:#94a3b8;}
nav .footer .credit_box .detail_view li:after {content:''; clear:both; display: table}
nav .footer .credit_box .detail_view li b {float:right; color:#86bccd; font-weight:600;}

nav .footer .credit_box .credit_help_pop {position: absolute; width:170px; padding:29px 36px 0 36px; height:154px; background:url('../img/guide.svg')no-repeat center top; left:2px; top:-140px; z-index: 1; display: none;}
nav .footer .credit_box .credit_help_pop.on {display: block;}
nav .footer .credit_box .credit_help_pop p {font-size:13px; color:#575b61;font-weight:500;}
nav .footer .credit_box .credit_help_pop ul:after {content:''; clear:both; display: table}
nav .footer .credit_box .credit_help_pop ul li {margin-top:8px; font-size:13px; font-weight:600; color:#77797b;}
nav .footer .credit_box .credit_help_pop ul li span {width:18px; height:18px; border-radius:50%; FONT-SIZE:12PX; line-height:18px; text-align: center; color:#fff; background:#77797b; margin-right:5px; display: inline-block;}

nav .footer .credit_box .main_txt {font-size:13px; color:#222 ;font-weight:600; position: relative; top:4px;}
nav .footer .credit_box .main_txt button {border:none; background:none;}
nav .footer .credit_box .main_txt button img {margin:-4px 0 0 1px; width:14px;}
nav .footer .credit_box .add {position: absolute; right:19px; top:14px; border:none; background:none;}
nav .footer .credit_box .add img {width:14px;}
nav .footer .credit_box .exp {margin-top:7px; font-size:10px; color:#A2A8B0;}
nav .footer .credit_box .gauge_box {position: relative; width:100%;height:12px; background:#EFF3F8; border-radius:20px; margin-top:12px; overflow: hidden;}
nav .footer .credit_box .gauge_box .num {position: absolute; right:2px; top:2px; font-size:10px; color:#C4CCDA; font-weight:300; }
nav .footer .credit_box .gauge_box .col {position: absolute; left:0; top:0; width:auto; background:#ADD8E6; min-width:24px; height:100%; border-radius:0 20px 20px 0;}
nav .footer .credit_box .gauge_box .col span {position: absolute; right:5px; top:0px; color:#fff; font-size:10px; font-weight:300; z-index: 1;}

nav .footer .invite_box {margin-top:10px; border-radius:15px; width:Calc(100% - 20px); margin-left:-10px; background:linear-gradient(-90deg, #c6e5ed, #a3d2df); padding:8px 10px 10px 10px;}
nav .footer .invite_box p {font-size:16px; color:#fff; font-weight:700; padding:6px 10px 0 10px }
nav .footer .invite_box p img {margin:-4px 5px 0 0; width:15px;}
nav .footer .invite_box span {display: inline-block; width:100%; margin-top:3px; font-size:12px; color:#fff; font-weight:500; letter-spacing: -.2px; padding:0 10px;}
nav .footer .invite_box button {margin-top:12px; height:26px; border-radius:25px; background:#fff; color:#ABD2E2; font-size:14px; font-weight:500; border:none; width:100%;}


nav .footer .login_banner {padding:25px 30px; border-radius:15px;  background:#fff; box-shadow: 4px 4px 40px rgb(118 141 149 / 10%); position: relative; margin-left:-10px; width:Calc(100% - 20px); margin-bottom:10px; height:150px; z-index: 1;}
nav .footer .login_banner .img {background:url('../img/login_banner.jpg')no-repeat center; background-size:cover; position: absolute; left:10px; top:10px; width:calc(100% - 20px); height:calc(100% - 20px); border-radius:12px; z-index: -1; filter: hue-rotate(349deg)}
nav .footer .login_banner span {color:#fff; font-weight:500; font-size:11px; display: inline-block; padding-left:1px;}
nav .footer .login_banner p {font-size:18px; color:#fff; font-weight:600; margin-top:2px; line-height:1.1em;}
nav .footer .login_banner button {height:23px; padding:0 10px 0 13px; background:#fff; border-radius:25px; font-size:12px; color:#85A8BB; border:none; font-weight:600; margin:18px 0 0 -2px;
}
nav .footer .login_banner button img {margin:-2px 0 0 10px;}


.mo_nav {display: none;}


.content .hd .right .bt_box .noti_pop {position:fixed; right:40px; top:-105%; width:450px; border:1px solid #fff; background:#fff; border-radius:10px; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%); z-index: 100; transition: .5s;}
.content .hd .right .bt_box .noti_pop.on {top:95px;}
.content .hd .right .bt_box .noti_pop ul.tab_ul2 {width:100%; padding:0 30px; border-bottom:1px solid #e4e4e4;}
.content .hd .right .bt_box .noti_pop ul.tab_ul2 li { margin-right:25px; display:inline-block;}
.content .hd .right .bt_box .noti_pop ul.tab_ul2 li:last-child {margin-right:0;}
.content .hd .right .bt_box .noti_pop ul.tab_ul2 li button {border:none; background:none; font-size:16px; font-weight:600; width:auto; height:auto; color:#bbb; letter-spacing: -.1px; position: relative;padding:23px 0;}
.content .hd .right .bt_box .noti_pop ul.tab_ul2 li button:nth-child(1) {margin-right:0;}
.content .hd .right .bt_box .noti_pop ul.tab_ul2 li.on button {color:#222; font-weight:700;}
.content .hd .right .bt_box .noti_pop ul.tab_ul2 li.on button:after {content:''; position: absolute; left:-2px; bottom:0; width:calc(100% + 4px); height:2px; background:#222;}

.content .hd .right .bt_box .noti_pop ul.new_box {padding:23px 30px; max-height:calc(100vh - 400px); overflow-y: scroll; display: none;}
.content .hd .right .bt_box .noti_pop ul.new_box.on {display:block;}
.content .hd .right .bt_box .noti_pop ul.new_box::-webkit-scrollbar {display: none;}
.content .hd .right .bt_box .noti_pop ul.new_box li {display: inline-block; width:100%; border-bottom:1px solid #e4e4e4; padding:20px 0;}
.content .hd .right .bt_box .noti_pop ul.new_box li:first-child {padding-top:0;}
.content .hd .right .bt_box .noti_pop ul.new_box li:last-child {border-bottom:none;}
.content .hd .right .bt_box .noti_pop ul.new_box li:after {content:''; clear:both; display: table;}
.content .hd .right .bt_box .noti_pop ul.new_box li p {font-size:15px;  font-weight:600; margin-top:7px;}
.content .hd .right .bt_box .noti_pop ul.new_box li span {display: inline-block; width:100%; margin-top:6px; font-size:13px; color:#777; line-height:1.3em; font-weight:300;}
.content .hd .right .bt_box .noti_pop ul.new_box li b.new {display: inline-block; padding:3px 8px; font-size:12px; color:#fff; background:#000080; border-radius:30px; font-weight:400;}
.content .hd .right .bt_box .noti_pop ul.new_box li b.date {float:right; font-size:12px; color:#b6b6b6; font-weight:400; margin-top:3px;}
.content .hd .right .bt_box .noti_pop ul.new_box li b.alarm {display: inline-block; padding:3px 8px; font-size:13px; color:#92cbde; background:#e2f8ff; border-radius:30px; font-weight:400;}
.content .hd .right .bt_box .noti_pop ul.new_box li:last-child button {width:100%; border:none; background:none; font-size:14px; color:#CACED2; height:auto;}
.content .hd .right .bt_box .noti_pop ul.new_box li:last-child button img {margin:0 0 0 10px;}



.content .hd .right .bt_box .noti_pop ul.noti_box {padding:23px 30px; max-height:calc(100vh - 400px); overflow-y: scroll; display: none;}
.content .hd .right .bt_box .noti_pop ul.noti_box.on {display:block;}
.content .hd .right .bt_box .noti_pop ul.noti_box::-webkit-scrollbar {display: none;}
.content .hd .right .bt_box .noti_pop ul.noti_box li {display: inline-block; width:100%; border-bottom:1px solid #e4e4e4; padding:15px 0 50px 0px; cursor: pointer; position: relative}
.content .hd .right .bt_box .noti_pop ul.noti_box li:first-child {padding-top:0;}
.content .hd .right .bt_box .noti_pop ul.noti_box li:last-child {border-bottom:none;}
.content .hd .right .bt_box .noti_pop ul.noti_box li:after {content:''; clear:both; display: table;}
.content .hd .right .bt_box .noti_pop ul.noti_box li p {font-size:15px;  font-weight:600; margin-top:7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.content .hd .right .bt_box .noti_pop ul.noti_box li span {display: inline-block; width:100%; margin-top:6px; font-size:13px; color:#777; line-height:1.3em; font-weight:300; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
/*.content .hd .right .bt_box .noti_pop ul.noti_box li b.new {display: inline-block; padding:3px 8px; font-size:12px; color:#fff; background:#000080; border-radius:30px; font-weight:400;}*/
.content .hd .right .bt_box .noti_pop ul.noti_box li b.date {position:absolute; left:0; bottom:25px; font-size:12px; color:#b6b6b6; font-weight:400; margin-top:3px; padding:0;}
.content .hd .right .bt_box .noti_pop ul.noti_box li p strong.new {width: auto; display: inline-block; position: relative; bottom: 0; font-size: 15px; font-weight: 800; color: #ff5858; margin-right: 4px;}

.content .hd .right .bt_box .noti_pop ul.noti_box li b {display: inline-block; padding:4px 8px; font-size:13px; border-radius:5px; font-weight:600; margin-right:7px;}
.content .hd .right .bt_box .noti_pop ul.noti_box li b.new {display: inline-block; padding:3px 8px; font-size:12px; color:#fff; background:#000080; border-radius:30px; font-weight:400;}

.content .hd .right .bt_box .noti_pop ul.noti_box li b.col1 {color:#D66868; background:#F6E3E3}
.content .hd .right .bt_box .noti_pop ul.noti_box li b.col2 {color:#707070; background:#E1E1E1}
.content .hd .right .bt_box .noti_pop ul.noti_box li b.col3 {color:#5CA2B9; background:#D6EBF1}
.content .hd .right .bt_box .noti_pop ul.noti_box li b.col4 {color:#000080; background:#DCE0ED}
.content .hd .right .bt_box .noti_pop ul.noti_box li strong {position: absolute; right:0PX; BOTTOM:25PX; font-size:13px; font-weight:500;}
.content .hd .right .bt_box .noti_pop ul.noti_box li strong.s_col1 {color:#758cf1;}
.content .hd .right .bt_box .noti_pop ul.noti_box li strong.s_col2 {color:#84bdcf;}



.music_play {position: fixed; left:0; bottom:0; height:90px; background:#ADD8E6; border-radius:40px 40px 0 0; width:100%; z-index: 103; padding:0 40px; transition: .5s;}
.music_play .info {float:left; width:320px;}
.music_play .info:after {content:''; clear:both; display: table;}
.music_play .info .img {width:100px; height:100px; border-radius:15px; float:left; margin-top:-25px;box-shadow: 3px 3px 10px rgba(0,0,0,.20); position: relative; margin-left:-5px;}
.music_play .info .img .open_video {position: absolute; left:5px; bottom:5px; width:calc(100% - 10px); border-radius:30px; background:rgba(0,0,0,.5); color:#fff; font-size:11px; letter-spacing: .1px; font-weight:300; padding:3.5px 0; text-align: center;}
.music_play .info .img .button {
    display: inline-block;
    position: relative;
    transform: scale(.35);
    margin-top:-3px;
}
.music_play .info .img .button.is-play {
    background-color: #fff;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}
.music_play .info .img .button.is-play .button-outer-circle {
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}
.music_play .info .img .button.is-play .button-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
}
.music_play .info .img .button.is-play .button-icon .triangle {
    -webkit-animation: fadeIn 7s ease;
    animation: fadeIn 7s ease;
}
.music_play .info .img .button.is-play .button-icon .path {
    stroke-dasharray: 90;
    stroke-dashoffset: 0;
    -webkit-animation: triangleStroke 3s;
    animation: triangleStroke 3s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
}
.music_play .info .img .has-scale-animation {
    -webkit-animation: smallScale 3s infinite;
    animation: smallScale 3s infinite;
}
.music_play .info .img .has-delay-short {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes triangleStroke {
    from {
        stroke-dashoffset: 90;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes triangleStroke {
    from {
        stroke-dashoffset: 90;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@-webkit-keyframes smallScale {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.5);
        opacity: 0;
    }
}
@keyframes smallScale {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.5);
        opacity: 0;
    }
}

.music_play .info .txt {float:right; width:calc(100% - 120px); padding-top:23px;}
.music_play .info .txt p {font-size:18px; color:#fff; font-weight:600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.music_play .info .txt span {display: inline-block; width:100%; font-size:15px; color:rgba(255,255,255,.75); margin-top:5px; font-weight:300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.music_play .player {float:left; width:150px; margin-top:33px;}
.music_play .player button {border:none; background:none;float:left;}
.music_play .player button:nth-child(2){margin:-10px 29px 0 29px;}
.music_play .player button:nth-child(3) {float:right;}
.music_play .player .play .play2 {display: none;}
.music_play .player .play.on .play1 {display: none;}
.music_play .player .play.on .play2 {display: inline-block;}

.music_play .control {float:right; margin-top:35px; width:290px;}
.music_play .control:after {content:''; clear:both; display: table;}
.music_play .control button {float:left; margin-right:20px; border:none; background:none; height:22px; width:22px;}
.music_play .control button:last-child {margin-right:0;} 

.music_play .control .volume .vol2 {display: none;}
.music_play .control .volume.on .vol1 {display: none;}
.music_play .control .volume.on .vol2 {display: inline-block;}

.music_play .control .heart {margin-right:40px;}
.music_play .control .heart .heart2 {display: none;}
.music_play .control .heart.on .heart1 {display: none;}
.music_play .control .heart.on .heart2 {display: inline-block;}

.music_play .control .loop {margin-left:80px;}
.music_play .control .loop .loop2, .music_play .control .loop .loop3 {display: none;}

.music_play .control .time {position: relative; width:70px; margin-left:27px; top:9px;}
.music_play .control .time  span {color:rgba(255,255,255,.3); font-size:11px; font-weight: 300;}
.music_play .control .time .gauge_bar {position: absolute;  width:70px; left:4px;}

.music_play .gauge_box {float:left; width:calc(100vw - 1100px); margin-left:115px; margin-top:45px;}
.music_play .gauge_box .time {position: relative; padding-bottom:40px; text-align: center; max-width:calc(100% - 10px); margin:0 auto;}
.range-slider {height:3px !important;}
.music_play .gauge_box .time  span {color:#fff; font-size:12px; font-weight: 300; font-weight:300;}
.music_play .gauge_box .time .t_l{position: absolute; left:-33px; top:-5px;} 
.music_play .gauge_box .time .t_r{position: absolute; right:-33px; top:-5px;}
.music_play .gauge_box .time .gauge_bar {position: absolute;  width:calc(100% - 8px); left:4px;}

.music_play .type {position: absolute; left:50%; top:20px; width:350px; transform: translate(-50%,0); display: none;}
.music_play .type ul {background:#fff; border-radius:50px; overflow: hidden;border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0;  padding:5px;}
.music_play .type ul:after {content:''; clear:both; display:table;}
.music_play .type ul li {float:left; width:calc(100% / 2); text-align: center; cursor: pointer;}
.music_play .type ul li input[type="radio"] {display: none;}
.music_play .type ul li input[type="radio"] + label {display: inline-block; width:100%; height:35px; line-height:34px; color:#A2A8B0; font-size:15px;  cursor: pointer; border-radius:8px;}
.music_play .type ul li input[type="radio"]:checked + label {background:#ADD8E6; border-radius:50px; color:#fff;}

.music_play .playlist_close {position: absolute; right:23px; top:23px;border:none; background:none; width:40px; height:40px; background:rgba(0,0,0,.3); border-radius:6px;}
.music_play .playlist_close img {width:13px;}

.music_play .open_view {max-width:1200px; margin:175px auto 0 auto; display:none;}
.music_play.on .open_view {display:block;}
.music_play .open_view:after {content:''; clear:both; display: table}
.music_play .open_view .thumb {float:left; width:500px; border-radius:35px; padding:25px; background:rgb(0 0 0 / 3%);}
.music_play .open_view .thumb .img {width:100%; padding-top:100%; background:#fff; border-radius:30px; position: relative}
.music_play .open_view .thumb .img .bt_box {position: absolute; right:27px; top:22px;}
.music_play .open_view .thumb .img .bt_box button {border:none; background:rgb(0 0 0 / 15%); margin-left:5px; width:35px; height:35px; border-radius:50%;}
.music_play .open_view .thumb .img .bt_box button img {height:16px; }



.music_play .open_view .thumb p {font-size:16px; color:#616469; font-weight:700; margin-top:20px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.music_play .open_view .thumb span {display: inline-block; width:100%; margin-top:7px; color:#A2A8B0; font-size:14px; text-align: center;}

.music_play .open_view .list_box {float:right; width:calc(100% - 600px);}
.music_play .open_view .list_box h2 {font-size:42px; color:#222; margin-top:-4px; letter-spacing: -.3px; font-weight:800;}
.music_play .open_view .list_box .follow_box {width:100%; margin-top:20px;}
.music_play .open_view .list_box .follow_box.no {display:none;}
.music_play .open_view .list_box .follow_box ul {height:auto; margin-top:0;}
.music_play .open_view .list_box .follow_box ul:after {content:''; clear: both; display: table;}
.music_play .open_view .list_box .follow_box ul li {float:left; margin-right:25px; font-size:13px; color:#b6b6b6; padding:0;}
.music_play .open_view .list_box .follow_box ul li img {margin:-2px 4px 0 0; filter: grayscale(1);}
.music_play .open_view .list_box ul.music {height:450px; overflow-y: scroll; margin-top:30px; margin-left:-17px; width:calc(100% + 17px); padding-right:10px;}
.music_play .open_view .list_box ul.music::-webkit-scrollbar {
    width: 6px;
}
.music_play .open_view .list_box ul.music::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.1);
    border-radius: 10px;
}
.music_play .open_view .list_box ul.music::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,.02);
    border-radius: 10px;
}

.music_play .open_view .list_box ul.music li {padding:20px 88px 19px 117px; border-radius:10px; font-size:16px; color:#616469; position: relative;  font-weight:400; transition: .5s; cursor: pointer;}
.music_play .open_view .list_box ul.music li .m_img {position: absolute; left:50px; top:48%; transform: translate(0,-50%); width:50px; height:50px; border-radius:5px;}
.music_play .open_view .list_box ul.music li:first-child {margin-top:0;}
.music_play .open_view .list_box ul.music li:hover {background:rgb(180 178 178 / 11%);}
.music_play .open_view .list_box ul.music li p {width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music_play .open_view .list_box ul.music li span {display: inline-block; width:100%; margin-top:7px; color:#A2A8B0; font-size:13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left:1px;}
.music_play .open_view .list_box ul.music li span.num {position: absolute; left:18px; top:50%; transform: translate(0,-50%); font-size:14px; font-weight:300; color:#A2A8B0; width:auto; margin-top:0;}
.music_play .open_view .list_box ul.music li b {position: absolute; right:39px; top:50%; transform: translate(0,-50%); font-weight:300; font-size:14px; letter-spacing:.5px; color:#A2A8B0}
.music_play .open_view .list_box ul.music li button {position: absolute; right:21px; border:none; background:none; transform: translate(0,-50%); top:49%;}
.music_play .open_view .list_box ul.music li button img {width:3px; filter: brightness(1);}
.music_play .open_view .list_box ul.music li.on {background:#000080; color:#fff; font-weight:400; margin-bottom:5px;}
.music_play .open_view .list_box ul.music li.on b, .music_play .open_view .list_box ul.music li.on span.num {color:#fff;}


.music_play .open_view.no .thumb {display: none;}
.music_play .open_view.no .list_box {width:100%;}
.music_play .open_view.no .list_box ul.music {display: none;}

.music_play .open_view .list_box2 {display:none; height:450px; overflow-y: scroll; margin-top:30px; margin-left:0px; width:100%; padding-right:25px; padding-top:0px;}
.music_play .open_view .list_box.no .list_box2 {display:block;}
.music_play .open_view .list_box2::-webkit-scrollbar {
    width: 6px;
}
.music_play .open_view .list_box2::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.1);
    border-radius: 10px;
}
.music_play .open_view .list_box2::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,.02);
    border-radius: 10px;
}
.music_play .open_view .list_box2:after {content:''; clear:both; display: table;;}
.music_play .open_view .list_box2 .swiper-slide {width:calc((100% - 125px) / 6); float:left; margin-right:25px; margin-bottom:30px; height:auto;}
.music_play .open_view .list_box2 .swiper-slide:nth-child(6n) {margin-right:0;}
.music_play .open_view .list_box2 .swiper-slide button {border:none; background:none; width:100%; text-align: left;}
.music_play .open_view .list_box2 .swiper-slide .img {width:100%; padding-top:100%; border-radius:20px; box-shadow:4px 4px 10px rgb(118 141 149 / 27%); border:1px solid #F4F7FC; position: relative; background:#f9fbfe;}
.music_play .open_view .list_box2 .swiper-slide .img img {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:33px;}
.music_play .open_view .list_box2 .swiper-slide p {font-size:15px; color:#616469; font-weight:600; margin-top:12px;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.music_play .open_view .list_box2 .swiper-slide span {display: inline-block; width:100%; margin-top:4px; color:#A2A8B0; font-size:13px; font-weight:300;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .3px;}
.music_play .open_view .list_box2 .swiper-slide span b {color:#8F8F8F; font-weight:500;}

.music_play .open_view .list_box2 .swiper-slide button.add {padding-top:100%; border-radius:20px; border:1px dashed #A2A8B0; position: relative;}
.music_play .open_view .list_box2 .swiper-slide button.add div {position: absolute; left:0; width:100%; text-align:center; top:50%; transform: translate(0,-50%); }
.music_play .open_view .list_box2 .swiper-slide button.add span {display: inline-block; width:100%; font-size:16px; color:#A2A8B0; margin-top:10px; font-weight:400;}
.music_play .open_view .list_box2 .swiper-slide button.add img {width:24px; opacity: .8;}

.music_play .open_view .list_box2 .swiper-slide .more_bt {position: absolute; right:16px; top:16px; border:none; background:none; width:auto; z-index: 1;}
.music_play .open_view .list_box2 .swiper-slide .list_more {display:none; position: absolute; right:16px; top:40px; width:140px; border-radius:10px; background:#fff; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%); padding:10px; z-index: 3; height:auto;}
.music_play .open_view .list_box2 .swiper-slide .list_more.on {display:block;}
.music_play .open_view .list_box2 .swiper-slide .list_more li {display: inline-block; width:100%; font-size:12px; color:#cbced2; background:none; box-shadow: none; border-radius:0; border:none; padding:0; margin-top:0;}
.music_play .open_view .list_box2 .swiper-slide .list_more li a {display: inline-block; width:100%; font-size:13px; color:#77797b; padding:5px 3px; font-weight:500;}
.music_play .open_view .list_box2 .swiper-slide .list_more li a img {margin:-2px 5px 0 0;}
.music_play .open_view .list_box2 .swiper-slide .list_more li:first-child {padding:1px 0 5px 0;}
.music_play .open_view .list_box2 .swiper-slide .list_more li:last-child {padding:8px 0 0 0; margin-top:10px;border-top:1px solid #f2f2f2;}



.music_play.on {height:100vh; border-radius:0; background:rgba(255,255,255,.8); backdrop-filter: blur(15px);}
.music_play.on .type {display: block;}
.music_play.on .posi {position: absolute; left:40px; bottom:5px; width:calc(100% - 80px);}
.music_play.on .info .txt p {color:#616469; font-weight:700;}
.music_play.on .info .txt span {color:#999;}
.music_play.on .player {filter:invert(.3)}
.music_play.on .gauge_box {filter:invert(.35);}
.music_play.on .control {filter:invert(.3);}



.content {width:calc(100% - 300px);  max-width:100%; min-height: calc(100vh - 100px); left:300px; /*height:100%;*/  float:left; position: relative; overflow-x:hidden; overflow: hidden; transition: .3s; padding-top:105px;}
.content:after {content:''; clear:both; display: table;}

.content .hd {width:calc(100% - 300px); padding:30px 40px 20px 45px; height:105px; position: fixed; right:0; top:0; /*z-index: 99;*/ z-index: 100; background:#f3f6fb}
.content .hd:after {content:''; clear:both; display: table;}

.content .hd .create_box {width:calc(100% - 400px); position: relative; float:left; height:55px;}
.content .hd .search {float:left; width:100%; position: absolute; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; border-radius:10px; background:rgba(255,255,255,.3); backdrop-filter: blur(4px); z-index: 10; max-height:735px;transition:.3s; }
.content .hd .search .icon {position: absolute; left:19px; top:14px;z-index: 1;}
.content .hd .search input[type="text"] {cursor:pointer; height:53px; width:100%;  font-size:15px; padding-left:60px; background:none; border:none;}
.content .hd .search input[type="text"]::placeholder {color:#C5CAD0; font-weight:300;}
.content .hd .search .open_creat {height:0; overflow: auto; transition: .7s;}
.content .hd .search .open_creat::-webkit-scrollbar {display: none;}
.content .hd .search .open_creat:after {content:''; clear:both ;display: table;}
.content .hd .search .create_bt {height:45px; position: absolute; top:4px; right:5px; width:105px; border-radius:10px; background:#000080; color:#fff; border:none; font-size:16px;}
.content .hd .search .close_bt {display: none;}

.content .hd .search_bt {width:55px; height:55px; border-radius:10px; background:rgba(255,255,255,.3); border:1px solid #fff; margin-left:10px; float:left; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%);}

.content .hd .search.on {background:rgba(255,255,255,.85); backdrop-filter: blur(25px);padding-bottom:20px; }
.content .hd .search.on .open_creat {display: block; padding:0 20px; height:600px;}

.content .hd .search .open_creat .input_cont1 {width:calc((100% - 20px) / 2); margin-right:20px; float:left;}
.content .hd .search .open_creat .input_cont2 {width:calc((100% - 20px) / 2); float:right;}

.content .hd .search .open_creat .input_box {width:100%; margin-top:15px; position: relative; }
.content .hd .search .open_creat .input_box_fir {margin-top:0;}
.content .hd .search .open_creat .input_box.hide {display:none;}
.content .hd .search .open_creat .input_box.gender_box.hide {display:none;}
.content .hd .search .open_creat .input_box3 {margin-top:10px; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0; background:#fff; height:auto; border-radius:5px; padding-bottom:36px;}
.content .hd .search .open_creat .input_box:after {content:''; clear:both; display: table;}
.content .hd .search .open_creat .input_box .tit {display: inline-block; width:100%; font-size:13px; color:#A2A8B0; font-weight:400; }
.content .hd .search .open_creat .input_box .tit .template_open {border:none; background:none; color:#ADD8E6; font-size:14px; float:right; margin-top:-1px;}
.content .hd .search .open_creat .input_box .tit .template_open img {margin:-1px 0 0 7px;}

.content .hd .search .open_creat .input_box .tit .ex_open {border:none; background:none; color:#ADD8E6; font-size:14px; float:right; margin-top:-1px;}
.content .hd .search .open_creat .input_box .tit .ex_open img {margin:-1px 0 0 7px;}

.content .hd .search .open_creat .input_box input[type="text"] {Width:100%; height:42px; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0; background:#fff; padding:0 15px; border-radius:5px; margin-top:6px; font-size:14px; color:#626262;}
.content .hd .search .open_creat .input_box input[type="text"].hide {display:none;}
.content .hd .search .open_creat .input_box input[type="text"]::placeholder {color:#D8DDE7}

.content .hd .search .open_creat .input_box textarea {display:none; width:100%; height:237px; border:none; background:none; padding:0 15px; border-radius:5px;  padding:12px 15px; font-size:14px; resize: none; color:#626262;}
.content .hd .search .open_creat .input_box textarea.on {display:block;}
.content .hd .search .open_creat .input_box textarea::placeholder {color:#D8DDE7}

.content .hd .search .open_creat .input_box ul.custom {background:#fff; border-radius:5px; overflow: hidden;margin-top:6px;  border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0;}
.content .hd .search .open_creat .input_box ul.custom:after {content:''; clear:both; display:table;}
.content .hd .search .open_creat .input_box ul.custom li {float:left; width:calc(100% / 2); text-align: center; cursor: pointer;}
.content .hd .search .open_creat .input_box ul.custom li input[type="radio"] {display: none;}
.content .hd .search .open_creat .input_box ul.custom li input[type="radio"] + label {display: inline-block; width:100%; height:40px; line-height:39px; color:#A2A8B0; font-size:14px;  cursor: pointer;}
.content .hd .search .open_creat .input_box ul.custom li input[type="radio"]:checked + label {background:#ADD8E6; border-radius:5px; color:#fff;}
.content .hd .search .open_creat .input_box ul.custom2 li {float:left; width:calc(100% / 2);}

.content .hd .search .open_creat .border_box:after {content:''; clear:both; display: table;}
.content .hd .search .open_creat .border_box {border:1px solid #fff; padding:15px 18px; background:rgba(255,255,255,.1); margin-top:8px; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0; border-radius:6px;}
.content .hd .search .open_creat .border_box .box {width:100%;  position: relative;}
.content .hd .search .open_creat .border_box .box input[type="text"] {padding-right:40px;}
.content .hd .search .open_creat .border_box .box .add {position: absolute; right:0px; top:22px; border:none; background:none; width:40px; height:40px;}
.content .hd .search .open_creat .border_box .box .add img {width:16px; opacity: .6;}
.content .hd .search .open_creat .border_box .box .mood_view {position: absolute; left:0; top:68px; z-index: 3; background:#fff; border:1px solid #fff; padding:12px 15px; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0; border-radius:6px; display: none;}
.content .hd .search .open_creat .border_box .box .mood_view.on {display: block;}
.content .hd .search .open_creat .border_box .box .mood_view button {display:inline-block;color:#A2A8B0; border:1px solid #bfc5cd; border-radius:4px; font-size:13px; padding:4px 8px; background:none; cursor: pointer; margin:2px 1px 2px 0;}
.content .hd .search .open_creat .border_box .box .mood_view button.on {background:#bfc5cd; color:#fff}

.content .hd .search .open_creat .border_box .box .genre_view {position: absolute; left:0; top:68px; z-index: 3; background:#fff; border:1px solid #fff; padding:12px 15px; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0; border-radius:6px; display: none;}
.content .hd .search .open_creat .border_box .box .genre_view button {display:inline-block;color:#A2A8B0; border:1px solid #bfc5cd; border-radius:4px; font-size:13px; padding:4px 8px; background:none; cursor: pointer; margin:2px 1px 2px 0;}
.content .hd .search .open_creat .border_box .box .genre_view button.on {background:#bfc5cd; color:#fff}
.content .hd .search .open_creat .border_box .box .genre_view.on {display: block;}


.content .hd .search .open_creat .mySwiper5 {margin-top:10px; padding-right:40px;}
.content .hd .search .open_creat .mySwiper5:before {content:''; position: absolute; right:0; bottom:0; height:25px; background:linear-gradient(90deg,rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); width:40px; z-index: 2;}
.content .hd .search .open_creat .mySwiper5 .swiper-slide {width:auto !important;}
.content .hd .search .open_creat .mySwiper5 .swiper-slide span {display:inline-block;color:#A2A8B0; border:1px solid #bfc5cd; border-radius:4px; font-size:14px; padding:4px 8px; background:none; cursor: pointer;}
.content .hd .search .open_creat .mySwiper5 .swiper-slide span.on {background:#bfc5cd; color:#fff;}
.content .hd .search .open_creat .border_box .box .mySwiper5 .swiper-slide span {background:#bfc5cd; color:#fff;}
.content .hd .search .open_creat .mySwiper5 .swiper-slide span button {border:none; background:none; margin:-4px 0 0 3px;}

.content .hd .search .open_creat .tag_cont {margin-top:0px;}
.content .hd .search .open_creat .tag_box {display: inline-block}
.content .hd .search .open_creat .tag_box span {display:inline-block;color:#A2A8B0; border:1px solid #bfc5cd; border-radius:4px; font-size:14px; padding:4px 8px; background:none; cursor: pointer; margin:0 1px 4px 0;user-select: none;}
.content .hd .search .open_creat .tag_box span.on {background:#bfc5cd; color:#fff;}
.content .hd .search .open_creat .tag_box_plus span {padding:4px 11px; }
.content .hd .search .open_creat .tag_box span img {margin:-3px 2px 0 -2px; transition: .3s;}
.content .hd .search .open_creat .tag_box_plus span.on img {filter:brightness(100)}
.content .hd .search .open_creat .tag_cont textarea {margin-top:6px; height:80px; display: block; box-shadow: inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0; border:1px solid #fff; background:#fff; padding:12px 15px; font-size:14px;color:#626262; width:100%;}
.content .hd .search .open_creat .tag_cont .select { float:left; position: relative; width: 100%; cursor: pointer;margin-top:6px;}
.content .hd .search .open_creat .tag_cont .select .label {width:100%; text-align:left; border:none; height:40px; padding-left: 15px; background: transparent; cursor: pointer; font-size:14px; padding-bottom:1px; color:#626262; background:url('../img/open_arrow.svg')no-repeat center right 12px #fff; border-radius:8px; background-size:12px ;  font-weight:400; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0;}
.content .hd .search .open_creat .tag_cont .select .optionList {position: absolute; top: 45px; left: 0; width: 100%;  max-height: 0; transition: .3s ease-in;  z-index: 1; background:rgba(255,255,255,0); border:1px solid rgba(255,255,255,0); box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0; overflow:hidden; border-radius:8px; font-weight:400;  z-index: 10; }
.content .hd .search .open_creat .tag_cont .select.active .optionList {max-height: 160px; overflow:auto; background:#fff; border:1px solid #fff;}
.content .hd .search .open_creat .tag_cont .select .optionItem { padding:14px 17px 0 15px; font-size:14px; color:#A2A8B0; }
.content .hd .search .open_creat .tag_cont .select .optionItem:last-child {padding-bottom:13px;}
.content .hd .search .open_creat .tag_cont .select .optionList::-webkit-scrollbar {width: 6px;}
.creation_list .creation .cont .select .optionList::-webkit-scrollbar-thumb {background: #f4f4f4; border-radius: 45px;}

.content .hd .search .open_creat .input_box3 .tip {margin-left:15px; width:calc(100% - 35px); position: relative; border-top:1px solid #EEF3F9; padding-top:12px;}
.content .hd .search .open_creat .input_box3 .tip_wid {width:calc(100% - 140px); overflow: hidden; position: relative;}
.content .hd .search .open_creat .input_box3 .tip .mySwiper4 {width:100%; margin:10px 0 0 0; overflow:visible;}
.content .hd .search .open_creat .input_box3 .tip .mySwiper4 .swiper-slide {color:#C9CBCF; font-weight:300;}
.content .hd .search .open_creat .input_box3 .tip p {width:calc(100% + 130px); color:#C9CBCF; font-size:12px;  }
.content .hd .search .open_creat .input_box3 .tip p img {margin:-2px 5px 0 0;}
.content .hd .search .open_creat .input_box3 .gpt_bt {position: absolute; right:20px; bottom:16px; width:130px; height:53px; border-radius:6px; color:#fff; border:none; font-size:14px; background:linear-gradient(110deg, rgba(173,216,230,1) 0%, rgba(255,192,203,1) 100%); line-height:1.2em;}
.content .hd .search .open_creat .input_box3 .gpt_bt.hide {display:none;}

.content .hd .search .open_creat .input_box3 .swiper-button-next:after, .content .hd .search .open_creat .input_box3 .swiper-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {content:none !important;}
.content .hd .search .open_creat .input_box3 .arrow_box {position: absolute; right:0; top:0; width:60px;}
.swiper-button-next, .swiper-button-prev {width:17px !important; height:17px !important}



.content .hd .search .open_creat .input_box4 {padding:8px 0 13px 12px; border-radius:5px; border:none; margin:12px 0 5px 0; background:none; box-shadow: inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0;}
.content .hd .search .open_creat .input_box4 .tip { width:100%; margin:0; padding:0; border:none;}
.content .hd .search .open_creat .input_box4 .tip p {width:100%;}
.content .hd .search .open_creat .input_box4 .tip .mySwiper4 .swiper-slide {color:#b3b5b9;}
.content .hd .search .open_creat .input_box4 .arrow_box {right:0;}

.content .hd .search .open_creat .input_box4 .tip_wid {width:100%;}
.content .hd .search .open_creat .input_box4 .tip { width:100%; margin:0; padding:0; border:none;}
.content .hd .search .open_creat .input_box4 .tip p {width:100%;}
.content .hd .search .open_creat .input_box4 .tip .mySwiper8 .swiper-slide {user-select:none; color:#b3b5b9;}
.content .hd .search .open_creat .input_box4 .tip .mySwiper8 {width:100%; margin:10px 0 0 0; overflow:visible;}

.content .hd .search .open_creat .input_box4 .arrow_box {right:0;}

.content .hd .search .open_creat .input_box5 {border-top:1px solid #eeefef; margin-top:13px;padding:11px 5px 6px 5px;}
.content .hd .search .open_creat .input_box5 b {font-weight:400; color:#A2A8B0; display: inline-block; width:100%; font-size:13px;}
.content .hd .search .open_creat .input_box5 .comment {margin-top:5px; color:#C9CBCF; font-size:13px; position: relative; padding-left:10px;}
.content .hd .search .open_creat .input_box5 .comment:after {content:'-'; position: absolute; left:0; top:0;}



.content .hd .search2.on .open_creat {display: none;}


.content .hd .right {float:right; width:275px;}


.content .hd .right .profile {float:left; width:190px; cursor: pointer; position: relative;}
.content .hd .right .profile .img {width:55px; height:55px; border-radius:50%; float:left;}
.content .hd .right .profile .txt {float:right; width:calc(100% - 68px); padding-top:11px;}
.content .hd .right .profile .txt p {font-size:14px; color:#616469; font-weight:500;}
.content .hd .right .profile .txt span {display: inline-block; width:100%; font-size:12.5px; color:#caced2; margin-top:3px; font-weight:300;}

.content .hd .right .profile .open_profile {position: absolute; left:-20px; top:-10px; background:rgba(255,255,255,0); width:calc(100% + 20px); border-radius:30px;  z-index: 3; height:0; overflow: hidden; transition: .5s; border:1px solid rgba(255,255,255,0);}
.content .hd .right .profile.on .open_profile {padding-bottom:0; height:241px; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0; background:#fff;}
.content .hd .right .profile .open_profile .txt {width:100%; float:initial; padding:21px 10px 0px 25px;}
.content .hd .right .profile .open_profile .txt span {display: inline-block; width:100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.content .hd .right .profile .open_profile ul li {display: inline-block; width:100%;}
.content .hd .right .profile .open_profile ul li a {display: inline-block; width:100%; padding:15px 10px 0 25px; font-size:13px; color:#A2A8B0; position: relative;}
.content .hd .right .profile .open_profile ul li a img {margin:-2px 10px 0 0;}
.content .hd .right .profile .open_profile ul li a.a2 {margin-top:12px; padding-top:20px;}
.content .hd .right .profile .open_profile ul li a.a2:after {content:''; position: absolute; left:0; top:0px; width:100%; height:1px; background:#fff; box-shadow:1px 1px 3px rgba(0,0,0,.17);}


.content .hd .right .bt_box {float:right; height:29px; position: relative; }
.content .hd .right .bt_box button {border:none; background:none;  position: relative; height:55px;}
.content .hd .right .bt_box button.sign {border-radius:10px; background:#ADD8E6; color:#fff; font-size:16px; width:110px; margin-right:23px; letter-spacing: .3px;}
.content .hd .right .bt_box button.bt_margin {margin-right:12px;}
.content .hd .right .bt_box button  span {position: absolute; right:-3px; top:12px; width:13px; height:13px; border-radius:50%; text-align: center; font-size:8px; color:#fff; background:#000080; line-height:13px; font-weight:200;}

.content .hd .mo_hd {display: none;}










.sign_pop {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); z-index: 1000000; display: none;}
.sign_pop.on {display: block;}
.sign_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:500px; border-radius:10px; background:rgba(255,255,255,.83); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; backdrop-filter: blur(8px); text-align: center;}
.sign_pop .view .sign_close {border:none; background:none; position: absolute; right:30px ;top:30px; z-index: 1;}
.sign_pop .view h2 {font-size:30px; color:#222; margin-top:40px;}
.sign_pop .view h3 {margin-top:10px; font-size:16px; color:#a2a8b0; font-weight:400;}
.sign_pop .view .bt {margin-top:30px; padding:0 45px;}
.sign_pop .view .bt:after {content:''; clear:both; display: table;}
.sign_pop .view .bt button {float:left; width:calc((100% - 30px) / 3); border:1px solid #fff; height:99px; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); background:rgba(255,255,255,.8); border-radius:10px; font-size:15px; color:#a2a8b0; letter-spacing: .3px; margin-right:15px;}
.sign_pop .view .bt button:nth-child(3n) {margin-right:0;}
.sign_pop .view .bt button:nth-child(-n + 3) {margin-bottom:15px;}
.sign_pop .view .bt button img {margin-bottom:10px;}
.sign_pop .view .bt button:nth-child(1) img {position: relative; top:2px;}

.sign_pop .view p {margin-top:40px; border-top:1px solid #CBCED2; padding:30px 0 30px 0; font-size:14px; color:#A2A8B0; font-weight:300;}
.sign_pop .view p a {display: inline-block; color:#464646; font-weight:500; border-bottom:1px solid #464646; padding-bottom:1px;}






.contact_pop {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); z-index: 1000000; display: none;}
.contact_pop.on {display: block;}
.contact_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); max-width:560px; width:90%; border-radius:10px; background:rgba(255,255,255,.83); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; backdrop-filter: blur(8px); text-align: center;}
.contact_pop .view .contact_close {border:none; background:none; position: absolute; right:30px ;top:30px; z-index: 1;}
.contact_pop .view h2 {font-size:30px; color:#222; margin-top:39px;}
.contact_pop .view h3 {margin-top:10px; font-size:16px; color:#a2a8b0; font-weight:400;}
.contact_pop .view .bt {margin-top:30px; padding:0 45px 10px 45px; margin-bottom:33px;}
.contact_pop .view .bt:after {content:''; clear:both; display: table;}
.contact_pop .view .bt button {float:left; width:calc((100% - 30px) / 3); border:1px solid #fff; height:120px; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); background:rgba(255,255,255,.8); border-radius:10px; font-size:15px; color:#a2a8b0; letter-spacing: .3px; margin-right:15px;}
.contact_pop .view .bt button:last-child {margin-right:0;}
.contact_pop .view .bt button .mo {display:none;}
.contact_pop .view .bt button img {margin-bottom:10px; height:39px;}
.contact_pop .view .bt button:nth-child(1) img {position: relative; top:2px;}

.contact_pop .view2 {max-width:630px;}
.contact_pop .view2 .bt button {width:calc((100% - 30px) / 3);}


.contact_pop .view .guide_open {display: inline-block; margin-bottom:45px; font-size:14px; color:#A2A8B0; border-bottom:1px solid #c3c6ca; padding-bottom:3px;}
.contact_pop .view .guide_open img {margin:-2px 0 0 10px;}



.share_pop {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); z-index: 1000; display: none;}
.share_pop.on {display: block;}
.share_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:520px; border-radius:10px; background:rgba(255,255,255,.83); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; backdrop-filter: blur(8px); text-align: center;  padding:0 45px 45px 45px;}
.share_pop .view .share_close {border:none; background:none; position: absolute; right:30px ;top:30px; z-index: 1;}
.share_pop .view h2 {font-size:28px; color:#222; margin-top:42px;}
.share_pop .view h3 {margin-top:10px; font-size:16px; color:#a2a8b0; font-weight:400;}
.share_pop .view .bt {margin-top:30px;}
.share_pop .view .bt:after {content:''; clear:both; display: table;}
.share_pop .view .bt button {float:left; width:calc((100% - 30px) / 3); border:1px solid #fff; height:102px; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); background:rgba(255,255,255,.8); border-radius:10px; font-size:15px; color:#a2a8b0; letter-spacing: .3px;}
.share_pop .view .bt button img {margin-bottom:8px; height:42px;}
.share_pop .view .bt button:nth-child(2) {margin:0 15px;}
.share_pop .view .link {margin-top:30px; position: relative; border-top:1px solid #d5d5d5; padding-top:30px;}
.share_pop .view .link p {font-size:15px; color:#A2A8B0; font-weight:600; text-align: left;}
.share_pop .view .link input[type="text"] {width:100%; border-radius:0 6px 6px 0; height:40px; font-size:14px; border:none;padding:0 15px; margin-top:9px;}
.share_pop .view .link input[type="text"]:disabled {background:rgba(255,255,255,.5); color:#A2A8B0; }
.share_pop .view .link button {position: absolute; right:0; bottom:0; width:40px; height:40px; background:rgba(255,255,255,.5);; border:none; border-radius:6px; }
.share_pop .view .link button img {width:17px;}






.kakao_pop {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); z-index: 1000; display: none;}
.kakao_pop.on {display: block;}
.kakao_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); max-width:450px; width:90%; border-radius:10px; background:rgba(255,255,255,.83); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; backdrop-filter: blur(8px);  padding:0 45px 40px 45px; overflow: hidden;}
.kakao_pop .view .share_close {border:none; background:none; position: absolute; right:30px ;top:30px; z-index: 1;}
.kakao_pop .view h2 {font-size:22px; color:#222; margin-top:35px;}

.kakao_pop .view .link {margin-top:25px; position: relative; }
.kakao_pop .view .link p {font-size:15px; color:#A2A8B0; font-weight:600; text-align: left;}
.kakao_pop .view .link input[type="text"] {width:100%; border-radius:6px; height:40px; font-size:14px; border:none;padding:0 15px; margin-top:9px; background:rgba(255,255,255,.5); color:#A2A8B0;}
.kakao_pop .view .link textarea {width:100%; border-radius:6px; height:80px; font-size:14px; border:none;padding:0 15px; margin-top:9px; background:rgba(255,255,255,.5); color:#A2A8B0; resize: none;}

.kakao_pop .view .bt {margin-top:30px;}
.kakao_pop .view .bt:after {content:''; clear:both; display: table}
.kakao_pop .view .bt button {float:left; width:50%; height:50px; font-size:15px; color:#A2A8B0; border:none; background:rgba(255,255,255,.5); border-radius:6px 0 0 6px; letter-spacing: .4px; }
.kakao_pop .view .bt button.on {background:#ADD8E6; color:#fff; border-radius:0 6px 6px 0;}






.add_playlist {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); z-index: 1000; display: none;}
.add_playlist.on {display: block;}
.add_playlist .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); max-width:400px; width:90%; border-radius:10px; background:rgba(255,255,255,.83); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; backdrop-filter: blur(8px); text-align: center; padding:0 30px 30px 30px; min-height:154px;}
.add_playlist .view .add_playlist_close {border:none; background:none; position: absolute; right:30px ;top:30px; z-index: 1;}
.add_playlist .view .add_playlist_close img {width:18px;}
.add_playlist .view h2 {font-size:22px; color:#222; margin-top:27px;}
.add_playlist .view ul {margin-top:9px; max-height:404px;  overflow-y: scroll; }
.add_playlist .view ul::-webkit-scrollbar {display: none;}
.add_playlist .view ul li:after {content:''; clear:both; display: table}
.add_playlist .view ul li {margin:6px 0; text-align:left; transition: .5s; background:rgba(255,255,255,0); border-radius:10px; padding:6px; cursor: pointer}
.add_playlist .view ul li:hover { background:rgba(255,255,255,.5)}
.add_playlist .view ul li:first-child {margin-top:0;  }
.add_playlist .view ul li:last-child {margin-bottom:0;}
.add_playlist .view ul li .img {float:left; width:50px; height:50px; border-radius:10px;}
.add_playlist .view ul li .txt {float:right; width:calc(100% - 65px); }
.add_playlist .view ul li .txt p {font-size:15px; color:#616469; font-weight:500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top:8px;}
.add_playlist .view ul li .txt span {display: inline-block; width:100%; font-size:13px; color:#a2a8b0; margin-top:4px;}
.add_playlist .view .playlist_add_bt {border:1px dashed #616469; background:none; color:#838487; width:100%; height:40px; border-radius:10px; font-size:15px; font-weight:400; margin-top:20px;}
.add_playlist .view .playlist_add_bt img {margin:-2px 0 0 10px;}

.add_playlist_view2 {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); z-index: 1001; display: none;}
.add_playlist_view2.on {display: block;}
.add_playlist_view2 .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); max-width:400px; width:90%; border-radius:10px; background:rgba(255,255,255,.83); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; backdrop-filter: blur(8px); text-align: left; padding:0 30px 30px 30px; min-height:154px; z-index: 1;}
.add_playlist_view2 .view h2 {font-size:22px; color:#222; margin-top:27px; text-align: center;}
.add_playlist_view2 .view .add_playlist_close2 {border:none; background:none; position: absolute; right:30px ;top:30px; z-index: 1;}
.add_playlist_view2 .view .add_playlist_close2 img {width:18px;}
.add_playlist_view2 .view .input_box {margin-top:26px;}
.add_playlist_view2 .view .input_box span {display: inline-block; width:100%; font-size:14px; color:#a2a8b0;}
.add_playlist_view2 .view .input_box input[type="text"] {width:100%; margin-top:8px; height:40px; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0; background:#ffffff8f; padding:0 15px; border-radius:7px; font-size:14px; color:#616469}
.add_playlist_view2 .view .input_box textarea {width:100%; margin-top:8px; height:120px; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0; background:#ffffff8f; padding:15px; border-radius:7px; font-size:14px; color:#616469}
.add_playlist_view2 .view .confirm {width:100%; height:44px; border-radius:7px; font-size:15px; color:#fff; background:#000080; border:none; margin-top:25px;}



.rename_pop {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); z-index: 1000; display: none;}
.rename_pop.on {display: block;}
.rename_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:400px; border-radius:10px; background:rgba(255,255,255,.83); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; backdrop-filter: blur(8px); text-align: center; padding:0 35px 35px 35px;}
.rename_pop .view .rename_close {border:none; background:none; position: absolute; right:30px ;top:30px; z-index: 1;}
.rename_pop .view h2 {font-size:22px; color:#222; margin-top:30px;}
.rename_pop .view h3 {margin-top:7px; font-size:15px; color:#a2a8b0; font-weight:400;}

.rename_pop .view .scroll{margin-top:25px; text-align: left;}
.rename_pop .view .input_box {margin-top:10px;}
.rename_pop .view .input_box span {display: inline-block; width:100%; font-size:14px; color:#A2A8B0;}
.rename_pop .view .input_box input[type="text"] {width:100%; height:40px; border-radius:5px; background:rgba(255,255,255,.3); border:1px solid #fff; margin-top:8px; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); padding:0 12px; color:#616469; font-size:14px;}
.rename_pop .view .input_box textarea {width:100%; height:85px; border-radius:5px; background:rgba(255,255,255,.3); border:1px solid #fff; margin-top:8px; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); padding:10px 12px; color:#616469; resize: vertical; font-size:14px;}

.rename_pop .view .save {height:40px; width:100%; border-radius:5px; background:#000080; font-size:15px; font-weight:400; border:none; color:#fff; margin-top:30px;}




.profile_pop {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); z-index: 1000; display: none;}
.profile_pop.on {display: block;}
.profile_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width: calc(100% - 20px); max-width: 400px; border-radius:10px; background:rgba(255,255,255,.83); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; backdrop-filter: blur(8px); text-align: center; padding:0 35px 35px 35px;}
.profile_pop .view .profile_close {border:none; background:none; position: absolute; right:30px ;top:30px; z-index: 1;}
.profile_pop .view h2 {font-size:22px; color:#222; margin-top:30px;}
.profile_pop .view h3 {margin-top:7px; font-size:15px; color:#a2a8b0; font-weight:400;}

.profile_pop .view .scroll{margin-top:20px; text-align: left;}
.profile_pop .view .img_posi {width:150px; height:150px; margin:0 auto; position: relative; margin-bottom:20px;}
.profile_pop .view .img_posi .pro_img {width:100%; height:100%; border-radius:10px; background:rgba(255,255,255,.83); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; font-size:14px; color:#C7CBD0;}
.profile_pop .view .img_posi .reset {position: absolute;; right:10px; top:10px; border:none; background:none; z-index: 1;}
.profile_pop .view .img_posi .pro_img .none {display: none;}
.profile_pop .view .img_posi .pro_img span {display: inline-block;; width:100%;}
.profile_pop .view .img_posi .pro_img img {margin-bottom:7px; width:20px;}
.profile_pop .view .img_posi.no .pro_img {background:rgba(255,255,255,.3) !important;}
.profile_pop .view .img_posi.no .pro_img .none {display: block;}
/*.profile_pop .view .img_posi.no .reset {display: none;}*/

.profile_pop .view .input_box {margin-top:15px;}
.profile_pop .view .input_box span {display: inline-block; width:100%; font-size:14px; color:#A2A8B0;}
.profile_pop .view .input_box input[type="text"] {width:100%; height:35px; border-radius:5px; background:rgba(255,255,255,.3); border:1px solid #fff; margin-top:8px; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); padding:0 12px; color:#616469; font-size:14px;}
.profile_pop .view .input_box textarea {width:100%; height:85px; border-radius:5px; background:rgba(255,255,255,.3); border:1px solid #fff; margin-top:8px; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); padding:10px 12px; color:#616469; resize: vertical; font-size:14px;}

.profile_pop .view .save {height:40px; width:100%; border-radius:5px; background:#000080; font-size:15px; font-weight:400; border:none; color:#fff; margin-top:30px;}





.notice_pop {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); z-index: 1000; display: none;}
.notice_pop.on {display: block;}
.notice_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); max-width:650px; width:90%; border-radius:10px; background:rgba(255,255,255,.83); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; backdrop-filter: blur(8px); padding:0 35px 35px 35px;}
.notice_pop .view .notice_close {border:none; background:none; position: absolute; right:30px ;top:30px; z-index: 1;}
.notice_pop .view h2 {font-size:20px; color:#222; margin-top:30px; padding-right:30px;}
.notice_pop .view p {margin-top:20px; font-size:14px; color:#616469; font-weight:300; line-height:1.4em; max-height:calc(100vh - 200px); overflow-y: scroll;}
.notice_pop .view p::-webkit-scrollbar {display: none;}




.coming {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); z-index: 1000; display: none;}
.coming.on {display: block;}
.coming .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); max-width:450px; height:450px; width:90%; border-radius:20px; background:rgba(255,255,255,1); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; backdrop-filter: blur(8px); text-align: center; padding:0 30px 30px 30px; min-height:154px; overflow: hidden;}
.coming .view .img1 {margin-top:63px;}
.coming .view .img2 {margin-top:21px;}
.coming .view .img3 {margin-top:10px; position: relative; z-index: -1;}
.coming .view .img4 {position: absolute; right:0; top:0; z-index: -1;}
.coming .view p {font-size:15px; margin-top:23px; color:#949699; font-weight:300; line-height:1.5em;}




@media screen and (max-width:1600px) {
    .content .hd .create_box {width:calc(100% - 360px);}
    .content .hd {padding-left:0;}
}

@media screen and (max-width:1500px) {
    .content .hd {padding-left:30px;}

    .music_play .gauge_box {width:calc(100vw - 1008px); margin-left:77px;}

    .content .hd .search.on .open_creat {max-height:650px; height:100%; overflow-y:scroll}
    .content .hd .search.on .open_creat::-webkit-scrollbar {display: none;}

    .content .hd .search .open_creat .input_cont1 {width:100%; margin-right:0;}
    .content .hd .search .open_creat .input_cont2 {width:100%;}
}


@media screen and (max-height:860px) {
    .content .hd .search.on .open_creat {max-height:70vh; overflow-y:scroll;}
}

@media screen and (max-width:1200px) {
    nav {background:rgb(243 246 251); position: fixed; left:-100%; top:0; width:100%; height:100%; z-index: 100001; padding:42px 20px 75px 20px; backdrop-filter: blur(10px); transition: .5s;}
    nav.on {left:0;}
    nav .menu1 {display: none;}
    /*nav .menu2 li:first-child {display: none;}*/
    nav .p_tit {margin-top:25px;}
    nav .p_tit2 {display: block; margin-top:30px;}
    nav .logo {display: none;}
    nav .list li {margin-top:17px;}
    nav .scroll {height: calc(100vh - 540px); padding:0 10px 25px 10px; overflow-y:scroll}
    nav .mo_profile {display: block;}
    nav .list li .txt p {color:#A2A8B0;}
    nav .scroll .list {height:calc(100% - 292px); overflow-y: scroll; margin-top:10px !important;}
    nav .scroll .list::-webkit-scrollbar {display: none;}

    .creation_list .list .banner button.guide_open {width:40PX;}

    nav .none_creation {background:none; height:auto; padding:0; }
    nav .none_creation h3 {display: none;}
    nav .none_creation button {position: relative; left:0; bottom:initial; width:100%; background:#ADD8E6; color:#fff;}

    .music_play {z-index: 100004}
    .music_play .info .img .open_video {display: none;}
    .music_play .info .img .button.is-play {width:55px; height:55px;}
    .music_play .info .img .button {transform: scale(.55); margin-top:0;}
    .music_play .info .img .button svg {transform: scale(.7);}

    .content {left:0; width:100%; float:initial; padding-top:70px;}
    
    .content .hd {padding:20px 20px 20px 20px;  z-index: 100002; height:70px; width:100%;}
    .content .hd .search {width:calc(100% - 363px);}
    .content .hd .create_box {width:auto;}
    .content .hd .right {width:auto;}
    .content .hd .right .bt_box .sign {display:none;}
    .content .hd .right .profile, .content .hd .search, .content .hd .search_bt {display: none;}
    .content .hd .right .bt_box button {height:auto;}
    .content .hd .right .bt_box button:nth-child(1) {height:48px;}
    .content .hd .right .bt_box {height:auto;}
    .content .hd .right .bt_box button:nth-child(2) span {top:-2px;}
    .content .hd .right .bt_box button:nth-child(3) span {top:0px;}

    .content .hd .mo_hd {display: inline-block;}
    .content .hd .mo_hd .mo_menu {border:none; background:none; margin-top:5px;}
    .content .hd .mo_hd .mo_menu {
      display: block;
      cursor: pointer; transition: .3s;
    }
    .content .hd .mo_hd .mo_menu span {
      display: block;
      background: #C4CCDA;
      width: 23px;
      height: 2px;
      border-radius: 3px;
      transition: 0.25s margin 0.25s, 0.25s transform;
    }
    .content .hd .mo_hd .mo_menu span:nth-child(1) {
        margin-bottom: 7px;
    }
    .content .hd .mo_hd .mo_menu span:nth-child(3) {
        margin-top: 7px;
    }
    .content .hd .mo_hd .mo_menu.active {margin-top:0px; position: relative;}
    .content .hd .mo_hd .mo_menu.active span {
        transition: 0.25s margin, 0.25s transform 0.25s;
    }
    .content .hd .mo_hd .mo_menu.active span:nth-child(1) {
      margin-top: 8px;
      margin-bottom: -2px;
        transform: rotate(45deg);
    }
    .content .hd .mo_hd .mo_menu.active span:nth-child(2) {
        transform: rotate(45deg);
        opacity: 0;
    }
    .content .hd .mo_hd .mo_menu.active span:nth-child(3) {
      margin-top: -2px;
        transform: rotate(135deg);
    }

    .content .hd .mo_hd .logo {position: absolute; left:50%; top:18px; transform: translate(-50%,0);}
    .content .hd .mo_hd .logo img {width:110px;}

    .music_play {bottom:65px; padding:0 50px 0 25px;}
    .music_play.on {height:calc(100vh - 65px);}
    .music_play .info {width:calc(100% - 230px);}
    .music_play .info .txt {width:calc(100% - 72px);}
    .music_play .player {float:right; margin-right:80px;}
    .music_play .control {width:auto; position: absolute; right:25px;}
    .music_play .control button, .music_play .control .time {display: none;}
    .music_play .control button:last-child {display: block;}

    .music_play .gauge_box {display: none;}
    .music_play .type {top:85px;}
    .music_play .playlist_close {top:85px;}
    .music_play .info .img {width:55px; height:55px; border-radius:10px; margin-top:17px;}
    .music_play .open_view {margin-top:175px; height:calc(100% - 248px); overflow-y: scroll; }
    .music_play .open_view::-webkit-scrollbar {display: none;}
    .music_play .open_view .thumb {float:initial; margin:0 auto; max-width:500px; width:100%;}
    .music_play .open_view .list_box {float:initial; margin:0 auto; max-width:500px; margin-top:20px; width:100%;}

    .music_play.on .posi {left:25px; width:calc(100% - 50px); bottom:21px;}
    .music_play .open_view .list_box ul.music {padding-right:0; overflow: visible; height:auto; margin-top:24px; margin-left:0; width:100%;}
    .music_play .open_view .list_box ul.music li span.num {left:15px;}
    .music_play .open_view .list_box h2 {font-size:25px; padding-left:14px; margin-top:5px;}
    .music_play .open_view .list_box .follow_box {margin-top:13px; padding-left:13px;}
    .music_play .open_view .list_box ul.music li {padding:15px 80px 14px 98px; font-size:15px;}
    .music_play .open_view .list_box ul.music li .m_img {left:46px; width:40px; height:40px;}
    .music_play .open_view .list_box ul.music li b {right:36px;}
    .music_play .open_view .list_box ul.music li span {margin-top:4px;}


    .music_play .open_view .list_box2 {float:initial; margin:0 auto; max-width:500px; margin-top:20px; width:100%;}
    .music_play .open_view .list_box2 .swiper-slide {width:calc((100% - 30px) / 2); margin-right:30px;}
    .music_play .open_view .list_box2 .swiper-slide:nth-child(3n){margin-right:30px;}
    .music_play .open_view .list_box2 .swiper-slide:nth-child(2n){margin-right:0;}


    .music_play .info .img .button.is-play {width:50px; height:50px;}
    .music_play .info .img .button {transform: scale(.55); margin-top:0;}
    .music_play .info .img .button svg {transform: scale(.6);}



    .mo_nav {display: block; position: fixed; left:0; width:100%; bottom:0; height:65px; background:#fff; z-index: 100005; box-shadow: -1px 0 8px rgba(0,0,0,.08);}
    .mo_nav ul:after {content:''; clear:both; display: table;}
    .mo_nav ul {height:100%; padding:0 8px; width:100%;}
    .mo_nav ul li {height:100%; float:left; width:20%; position: relative;}
    .mo_nav ul li button {border:none; background:none; height:100%; width:100%; font-weight:600; padding-bottom:2px;}
    .mo_nav ul li button img {filter:grayscale(0.9);}
    .mo_nav ul li button span {display: inline-block; width:100%; color:#C5CAD0; margin-top:3px; font-weight:300; letter-spacing: .2px;}

    .mo_nav ul li:nth-child(3) button img{position: absolute; left:50%; top:-35px; transform: translate(-50%,0); filter:initial;}

    .mo_nav ul li button.on span {color:#ADD8E6; font-weight:700;}
    .mo_nav ul li button.on img {filter:initial;}



    .content .hd .search {display: block; position: fixed; left:0; top:200%; width:100%; height:calc(100svh - 90px); max-height:100vh; transition: .8s; border-radius:0;}
    .content .hd .search.on {top:0; background:#fff; z-index: -1; padding-top:57px;}
    /*.content .hd .search input[type="text"] {display: none;}*/
    /*.content .hd .search .icon {display: none;}*/
    .content .hd .search .icon {top:71px;}
    .content .hd .search .create_bt {width:calc(100% - 60px); left:30px; bottom:80px; top:initial; }
    .content .hd .search.on .open_creat {height:calc(100% - 160px); overflow-y: scroll; padding-bottom:30px;}
    .content .hd .search.on .open_creat::-webkit-scrollbar {display: none;}
    .content .hd .search .open_creat .input_box1 {width:100%; margin-right:0;}
    .content .hd .search .open_creat .input_box2 {width:100%;}
    .content .hd .search .open_creat .border_box .box {width:100%; margin-right:0;}
    .content .hd .search .open_creat .border_box .box:last-child {margin-top:0px;}
    .content .hd .search .open_creat .input_box3 {height:auto; padding-bottom:15px;}
    .content .hd .search .open_creat .input_box3 .tip_wid {width:100%;}
    .content .hd .search .open_creat .input_box3 .gpt_bt {position: relative; width:calc(100% - 30px); right:0; bottom:0; height:40px; margin-left:15px; margin-top:20px;}
    .content .hd .search .open_creat .input_box3 .gpt_bt br {display: none;}
    .content .hd .search .open_creat .input_box ul.custom li input[type="radio"] + label {font-size:13px;}
    .content .hd .search .close_bt {position: absolute; right:20px; bottom:20px; height:45px; width:45px; border-radius:10px; background:rgba(255,255,255,.3); border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%), 0px 0px 4px rgba(0,0,0,.15); display: block;}
    .content .hd .search .close_bt img {width:15px;}

    .content .hd .search.on .open_creat {max-height:100%;}

    nav .tester {margin:6px 0 6px 0; width:100%;}
    nav .tester b {background:#FFF;}

    nav .tester {display:none;}
    nav .tester_mobile {display:block;}

    nav .footer {width:100%;}
    nav .footer .credit_box {width:calc(100% - 41px); }
    nav .footer .invite_box {width:calc(100% - 41px);}
    nav .footer .login_banner {width:calc(100% - 41px);}

    .plan_pop {display:none !important;}
    .guide_open {display:none !important;}

    .footer.setting_hide .subscribe_btn {display:none;}


}




@media screen and (max-width:768px) {
    .music_play.on {bottom:64px; height:calc(100% - 65px);}
    .music_play {padding:0 15px; height:70px; border-radius:20px 20px 0 0;}
    .music_play .info {width:calc(100% - 149px);}
    .music_play .info .txt {width:calc(100% - 62px); padding-top:17px;}
    .music_play .info .txt p {font-size:14px;}
    .music_play .info .txt span {font-size:12px; margin-top:5px;}


    .music_play .player {float:right; margin-right:39px; width:89px; margin-top:26px;}
    .music_play .player img {width:18px;}
    .music_play .player .play img {width:33px;}
    .music_play .player button:nth-child(2) {margin:-8px 10px 0 10px}



    .music_play .control {width:auto; position: absolute; right:0px; margin-top:25px;}
    .music_play .control button, .music_play .control .time {display: none;}
    .music_play .control button:last-child {display: block; margin-right:15px;}
    .music_play .control button:last-child img {width:24px;}
    .music_play .open_view {margin-top:105px; height:calc(100% - 180px);}
    .music_play .gauge_box {display: none;}
    .music_play .info .img {width:50px; height:50px; border-radius:10px; margin-top:10px;}
    .music_play .type {width:Calc(100% - 40px); top:57px;}
    .music_play .playlist_close {top:14px; right:initial; left:50%; transform: translate(-50%,0); width:30px; height:30px; border-radius:30px; }
    .music_play .playlist_close img {width:12px;}
    .music_play.on .posi {left:-15px; width:calc(100% + 30px); bottom:0px; position:relative; box-shadow: -2px -2px 5px rgba(0,0,0,0.2); padding:0 15px 15px 15px}
    .music_play.on .posi:after {content:''; clear:both; display: table}

    .content .hd .right .bt_box button:nth-child(3) span {font-weight:600;}

    .content .hd .search .create_bt {bottom:60px;}
    .content .hd .search {}
    nav .footer {bottom:150px; left:26px;}
    nav .footer .sns {padding-left:0;}


    .sign_pop .view {width:90%;}
    .sign_pop .view .sign_close {top:20px; right:20px}
    .sign_pop .view .sign_close img {width:16px;}
    .sign_pop .view h2 {font-size:25px; margin-top:40px;}
    .sign_pop .view h3 {margin-top:7px; font-size:14px;}
    .sign_pop .view .bt {padding:0 25px;}
    .sign_pop .view .bt button {height:85px; font-size:14px; width:calc((100% - 20px) / 3); margin-right:10px;}
    .sign_pop .view .bt button:nth-child(-n + 3) {margin-bottom:10px;}
    .sign_pop .view .bt button img {height:28px; margin-bottom:7px;}
    .sign_pop .view p {margin-top:37px; font-size:12px; padding:25px 5px 25px 5px;}


    .contact_pop .view .sign_close {top:20px; right:20px}
    .contact_pop .view .sign_close img {width:16px;}
    .contact_pop .view h2 {font-size:25px; margin-top:29px;}
    .contact_pop .view h3 {margin-top:7px; font-size:14px;}
    .contact_pop .view .bt {padding:0 25px 0px 25px; margin-top:25px}
    .contact_pop .view .bt button {height:110px; font-size:14px; width:calc((100% - 20px) / 3); margin-right:10px;}
    .contact_pop .view .bt button .mo {display:block;}
    .contact_pop .view .bt button img {height:32px; margin-bottom:12px;}
    .contact_pop .view2 .bt button:last-child {margin-right:0;}
    /*.contact_pop .view2 .bt button:last-child {width:100%; margin-top:10px; height:44px;}*/
    /*.contact_pop .view2 .bt button:last-child br {display: none;}*/
    .contact_pop .view2 .bt button:last-child img {width:30px; filter:grayscale(.7); height:30px; margin-bottom:6px; margin-top:9px; margin-right:0px;}
    .contact_pop .view2 .bt button:last-child {}

    .share_pop .view {width:90%; padding:0 25px 35px 25px}
    .share_pop .view .share_close {top:20px; right:20px}
    .share_pop .view .share_close img {width:16px;}
    .share_pop .view h2 {font-size:22px; margin-top:33px;}
    .share_pop .view h3 {margin-top:7px; font-size:14px;}
    .share_pop .view .bt button {height:85px; font-size:14px;}
    .share_pop .view .bt button img {height:28px; margin-bottom:7px;}


    .kakao_pop .view {padding:0 25px 25px 25px;}
    .kakao_pop .view h2 {font-size:20px; margin-top:24px;}
    .kakao_pop .view .link p {font-size:14px;}
    .kakao_pop .view .link {margin-top:19px;}
    .kakao_pop .view .bt button {height:45px;}


    .coming .view .img2 {width:90%;}

    .content .hd .right .bt_box .noti_pop {width:calc(100% - 40px); left:20px; }
    .content .hd .right .bt_box .noti_pop.on {top:70px;}
    .content .hd .right .bt_box .noti_pop ul.new_box, .content .hd .right .bt_box .noti_pop ul.noti_box {max-height:calc(100vh - 282px);}

    .music_play .open_view .list_box2 {height:auto; overflow:visible; padding:0 10px}
    .music_play .open_view .list_box2 .swiper-slide {margin-bottom:20px;}
}


@media screen and (max-height:600px) {
    .add_playlist .view ul {max-height:258px}
}

@-webkit-keyframes stroke {
    0% {
        opacity: 0;
    }
    25%, 75% {
        opacity: 1;
    }
    95%, 100% {
        stroke-dashoffset: 6;
        opacity: 0;
    }
}

@keyframes stroke {
    0% {
        opacity: 0;
    }
    25%, 75% {
        opacity: 1;
    }
    95%, 100% {
        stroke-dashoffset: 6;
        opacity: 0;
    }
}

body .twitter {
    position: fixed;
    display: block;
    right: 12px;
    bottom: 12px;
}
body .twitter svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}


/** mypage  **/
.my_creation .music_info_detail .txt .more .list_more {display:none; cursor:pointer; position: absolute; left:91px; top:135px; width:170px; border-radius:10px; background:#fff; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0, 4px 4px 40px rgb(118 141 149 / 10%); padding:10px; z-index: 3; height:auto;}
.my_creation .music_info_detail .txt .more .list_more.on {display:block;}
.my_creation .music_info_detail .txt .more .list_more li {display: inline-block; width:100%; font-size:12px; color:#cbced2;}
.my_creation .music_info_detail .txt .more .list_more li a {display: inline-block; width:100%; font-size:13px; color:#77797b; padding:5px 3px; font-weight:500;}
.my_creation .music_info_detail .txt .more .list_more li a img {margin:-2px 7px 0 0;}
.my_creation .music_info_detail .txt .more .list_more li:first-child {padding:1px 0 5px 0;}
.my_creation .music_info_detail .txt .more .list_more li.small_title {padding:13px 0 3px 0; margin-top:10px;border-top:1px solid #f2f2f2;}
/*.my_creation .music_info_detail .txt .more .list_more li:last-child {padding:8px 0 0 0; margin-top:10px;border-top:1px solid #f2f2f2;}*/
.my_creation .music_info_detail .txt .more .list_more li:nth-last-child(2) {padding:8px 0 0 0; margin-top:10px;border-top:1px solid #f2f2f2;}

.my_creation .music_info_detail .txt .more .list_more li a .spinner-box {width:15px; height:15px; float:left; margin-right:7px;}
.my_creation .music_info_detail .txt .more .list_more li a .three-quarter-spinner {width:15px; height:15px; border:2px solid #A2A8B0; border-top: 2px solid transparent}








#lyrics_create_loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 10;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(5px);
    display: none;
}
#lyrics_create_loading.on {display: block;}

.cube-folding {
    width: 51px;
    height: 51px;
    display: inline-block;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    font-size: 0;
}
.cube-folding span {
    position: relative;
    width: 25px;
    height: 25px;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    display: inline-block;
}
.cube-folding span::before {
    content: "";
    background-color: #dbf1f8;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 25px;
    height: 25px;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-animation: folding 2.5s infinite linear both;
    -moz-animation: folding 2.5s infinite linear both;
    animation: folding 2.5s infinite linear both;
}
.cube-folding .leaf2 {
    -webkit-transform: rotateZ(90deg) scale(1.1);
    -moz-transform: rotateZ(90deg) scale(1.1);
    transform: rotateZ(90deg) scale(1.1);
}
.cube-folding .leaf2::before {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    background-color: #c0e7f4;
}
.cube-folding .leaf3 {
    -webkit-transform: rotateZ(270deg) scale(1.1);
    -moz-transform: rotateZ(270deg) scale(1.1);
    transform: rotateZ(270deg) scale(1.1);
}
.cube-folding .leaf3::before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    background-color: #c0e7f4;
}
.cube-folding .leaf4 {
    -webkit-transform: rotateZ(180deg) scale(1.1);
    -moz-transform: rotateZ(180deg) scale(1.1);
    transform: rotateZ(180deg) scale(1.1);
}
.cube-folding .leaf4::before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    background-color: #a5dbed;
}

@-webkit-keyframes folding {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        -moz-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
    }
    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        -moz-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
    }
    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        -moz-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
    }
}
@-moz-keyframes folding {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        -moz-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
    }
    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        -moz-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
    }
    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        -moz-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
    }
}
@-ms-keyframes folding {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        -moz-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
    }
    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        -moz-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
    }
    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        -moz-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
    }
}
@keyframes folding {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        -moz-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
    }
    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        -moz-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        -webkit-opacity: 1;
        -moz-opacity: 1;
        opacity: 1;
    }
    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        -moz-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        -webkit-opacity: 0;
        -moz-opacity: 0;
        opacity: 0;
    }
}
.cube-wrapper {position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
    text-align: center;}
.cube-wrapper:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    margin: auto;
    width: 90px;
    height: 6px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-filter: blur(2px);
    filter: blur(2px);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-animation: shadow 0.5s ease infinite alternate;
    -moz-animation: shadow 0.5s ease infinite alternate;
    animation: shadow 0.5s ease infinite alternate;
}
.cube-wrapper .loading {
    font-size: 13px;
    display: block;
    color: #92cfe4;
    position: relative;
    top: 25px;
    z-index: 2;
    -webkit-animation: text 0.5s ease infinite alternate;
    -moz-animation: text 0.5s ease infinite alternate;
    animation: text 0.5s ease infinite alternate;
    margin-left:-10px;
    width:calc(100% + 20px);
}

@-webkit-keyframes text {
    100% {
        top: 35px;
    }
}
@-moz-keyframes text {
    100% {
        top: 35px;
    }
}
@-ms-keyframes text {
    100% {
        top: 35px;
    }
}
@keyframes text {
    100% {
        top: 35px;
    }
}
@-webkit-keyframes shadow {
    100% {
        bottom: -18px;
        width: 100px;
    }
}
@-moz-keyframes shadow {
    100% {
        bottom: -18px;
        width: 100px;
    }
}
@-ms-keyframes shadow {
    100% {
        bottom: -18px;
        width: 100px;
    }
}
@keyframes shadow {
    100% {
        bottom: -18px;
        width: 100px;
    }
}






.gift_pop {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); z-index: 1000; display: none;}
.gift_pop.on {display: block;}
.gift_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); max-width:900px; width:95%; border-radius:10px; background:rgba(255,255,255,.83); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; backdrop-filter: blur(8px); text-align: center;  padding:0 40px 35px 40px; max-height:90%;}
.gift_pop .view .scroll {max-height:calc(100vh - 300px); overflow-y: scroll}
.gift_pop .view .scroll::-webkit-scrollbar {display: none;}
.gift_pop .view .gift_close {border:none; background:none; position: absolute; right:30px ;top:30px; z-index: 1;}
.gift_pop .view h2 {font-size:26px; color:#222; margin-top:28px; margin-bottom:20px;}
.gift_pop .view .bt {margin-top:0px;}
.gift_pop .view .bt:after {content:''; clear:both; display: table;}
/*.gift_pop .view .bt button {float:left; width:calc((100% - 30px) / 3); border:1px solid #fff; height:82px; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); background:rgba(255,255,255,.8); border-radius:50px; font-size:14px; color:#a2a8b0; letter-spacing: .3px; padding-top:2px;}*/
.gift_pop .view .bt button {float:left; width:100%; border:1px solid #fff; height:52px; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); background:rgba(255,255,255,.8); border-radius:50px; font-size:14px; color:#a2a8b0; letter-spacing: .3px; padding-top:2px;}
.gift_pop .view .bt button.on {border:1px solid #fff;}
/*.gift_pop .view .bt button.on {border:1px solid #000080;}*/
/*.gift_pop .view .bt button img {margin-bottom:6px; height:35px;}*/
.gift_pop .view .bt button img {margin-right:6px; height:35px;}
.gift_pop .view .bt button:nth-child(2) {margin:0 15px;}

.gift_pop .view .box {width:100%; margin-top:20px; border-top:1px solid rgba(255,255,255,.9); padding:17px 0px 0 0px; overflow-y: scroll; max-height:calc(100vh - 360px);}
.gift_pop .view .box::-webkit-scrollbar {display: none;}
.gift_pop .view .box .temp:after {content:''; clear:both; display: table}
.gift_pop .view .box .temp button {float:left; width:calc((100% - 30px) / 2); border:none; background:none;}
.gift_pop .view .box .temp button .img {width:100%; height:140px; border:2px solid #fff; border-radius:10px; margin-bottom:8px;}
.gift_pop .view .box .temp button p {font-size:15px; color:#A2A8B0;}
.gift_pop .view .box .temp button:last-child {margin-left:30px;}
.gift_pop .view .box .temp button.on .img {border:2px solid #000080; }
.gift_pop .view .box .temp button.on p {color:#222;}

.gift_pop .view .box .preview_bt {margin-top:9px;}
.gift_pop .view .box .preview_bt:after {content:''; clear:both; display: table}
.gift_pop .view .box .preview_bt button {float:left; width:calc((100% - 30px) / 2); padding:5px 0; font-size:13px; border:none; color:#99a0a9; background:#dbdbdd; border-radius:50px;}
.gift_pop .view .box .preview_bt button:last-child {float:right;}

.gift_pop .view .box textarea {height:100px; width:100%; border:1px solid #fff; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); background:#ffffff8f; color:#616469; padding:13px 17px; border-radius:10px; margin-top:20px; font-size:14px; resize: vertical;}
.gift_pop .view .box textarea::placeholder {color:#C8CDD3}

.gift_pop .view .box .kakao {margin-top:26px; text-align: left;}
.gift_pop .view h3 {font-size:18px; color:#222; font-weight:700; margin-bottom:10px;text-align: left;}
.gift_pop .view .box .kakao .k_box:after {content:''; clear:both; display: table}
.gift_pop .view .box .kakao .k_box .k_img {float:left; width:155px; height:155px; border-radius:10px; border:1px solid #fff; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); background:rgba(255,255,255,.8); }
.gift_pop .view .box .kakao .k_box .k_txt {float:right; width:calc(100% - 175px); }
.gift_pop .view .box .kakao .k_box .k_txt span {display: inline-block; font-size:14px; color:#a2a8b0; }
.gift_pop .view .box .kakao .k_box .k_txt input[type="text"] {padding-left: 17px; width:100%; height:35px; border-radius:5px; border:1px solid #fff; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); background:#ffffff8f; font-size:14px; color:#616469; margin-top:6px; margin-bottom:15px;}
.gift_pop .view .box .kakao .k_box .k_txt textarea {height:60px; border-radius:5px; margin-top:6px;}

.gift_pop .cont1 {float:left; width:50%; border-right:1px solid #fff; padding-right:30px;}
.gift_pop .cont2 {float:left; width:50%; padding-left:30px; text-align: left;}
.gift_pop .cont2 h3 {margin-top:0px; margin-bottom:-5px;}
.gift_pop .cont2 .input_box {float:left; width:100%;  margin-top:20px;}
.gift_pop .cont2 .input_box2 {width:calc((100% - 20px) / 2);}
.gift_pop .cont2 .input_box3 {margin-right:20px;}
.gift_pop .cont2 .input_box span {display: inline-block; width:100%; font-size:14px; color:#a2a8b0;}
.gift_pop .cont2 .input_box input[type="text"] {padding-left: 17px; width:100%; height:35px; border-radius:5px; border:1px solid #fff; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); background:#ffffff8f; font-size:14px; color:#616469; margin-top:6px;}
.gift_pop .cont2 .input_box textarea {resize: vertical; padding:10px 17px; width:100%; height:105px; border-radius:5px; border:1px solid #fff; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); background:#ffffff8f; font-size:14px; color:#616469; margin-top:6px; height:calc(100vh - 637px); max-height:340px;}

.gift_pop .view .confirm {width:100%; height:44px; border-radius:7px; font-size:15px; color:#fff; background:#000080; border:none; margin-top:25px;}

.gift_pop.no .view .box .kakao {display: none;}
.gift_pop.no .view {width:520px;}
.gift_pop.no .cont1 {width:100%; border-right:0; padding-right:0;}
.gift_pop.no .cont2 {width:100%; padding-left:0; margin-top:30px;}
.gift_pop.no .cont2 .input_box textarea {height:300px;}

@media screen and (max-width:1000px) {
    .gift_pop .cont1 {width:100%; border-right:0; padding-right:0;}
    .gift_pop .cont2 {width:100%; padding-left:0; margin-top:30px;}

    .gift_pop .cont2 .input_box textarea {height:300px;}
}

@media screen and (max-width:767px) {
    .gift_pop .view h2 {font-size:22px; margin-top:25px;}
    .gift_pop .view .bt {margin-top:15px;}
    .gift_pop .view .bt button img {height:30px;}
    .gift_pop .view .bt button {height:78px; border-radius:10px;}
    .gift_pop .view .share_close {top:27px;}
    .gift_pop .view .box .temp button .img {height:100px;}
    .gift_pop .view {padding:0 25px 25px 25px}
    .gift_pop .view .box {margin-left:-25px; width:calc(100% + 50px); padding:20px 25px 0px 25px; margin-top:20px;}

    .gift_pop .view .box .kakao h3 {font-size:16px;}
    .gift_pop .view .box .kakao .k_box .k_img {width:100%; height:130px;}
    .gift_pop .view .box .kakao .k_box .k_txt {width:100%; margin-top:15px;}
}





.custom_pop1 {position: fixed; left:0; top:0; width:100%; height:100%; z-index: 1000000; background:rgba(0,0,0,.8); display: none;}
.custom_pop1.on {display:block;}
.custom_pop1 .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); background:#dcedf2; border-radius:25px; text-align: center; padding:45px 35px 35px 35px; max-width:650px; width:90%;}
.custom_pop1 .view h2 {font-size:45px; color:#222; font-family: 'JalnanGothic'; font-weight:400;}
.custom_pop1 .view h2 span {display: inline-block; width:100%; font-size:23px; color:#333; font-family: 'GmarketSansMedium'; font-weight:400; margin-bottom:10px;}
.custom_pop1 .view h2 b {font-weight:400; color:#7CBED3}
.custom_pop1 .view img {margin-top:20px;}

.custom_pop1 .view .box {background:#fff; border-radius:20px; padding:30PX 25PX;}
.custom_pop1 .view .box p {font-size:15.5px; color:#333; line-height:1.5em;}
.custom_pop1 .view .box p b {font-weight:700; color:#111;}

.custom_pop1 .view .box .day {border-radius:60px; font-size:18px; color:#fff; text-shadow: 1px 1px 5px rgba(0,0,0,.1); background:linear-gradient(to right,#ADD8E6, #FFC0CB);; padding:15px 20px; max-width:450px; width:100%; margin:22px auto ;}
.custom_pop1 .view .box .day b {font-family: 'JalnanGothic'; font-weight:400; font-size:20PX;   position: relative; top:1px;}
.custom_pop1 .view .week_no {position: absolute; left:5px; bottom:-25px; font-size:13px; color:#ddd; font-weight:300; border:none; background:none;}
.custom_pop1 .view .pop1_close {position: absolute; right:5px; bottom:-25px; font-size:13px; color:#ddd; font-weight:300; border:none; background:none;}
.custom_pop1 .view .pop1_close img {filter:brightness(100); margin:-2px 0 0 7px; width:10px; opacity: .8;}


@media screen and (max-width:767px) {
    .custom_pop1 .view {transform: initial; left:0; bottom:0; width:100%; max-height:calc(100vh - 130px); top:initial; border-radius:25px 25px 0 0; padding:22px 15px 15px 15px; }
    .custom_pop1 .view::-webkit-scrollbar {display: none;}
    .custom_pop1 .view h2 {font-size:27px;}
    .custom_pop1 .view h2 span {font-size:16px; margin-bottom:7px;}
    .custom_pop1 .view img {width:70%;}
    .custom_pop1 .view .box {padding:20px;}
    .custom_pop1 .view .box p {font-size:14px;}
    /*    .custom_pop1 .view .box p br {display: none;}*/
    .custom_pop1 .view .box .day {font-size:13px;}
    .custom_pop1 .view .box .day b {font-size:14px; top:0;}


    .custom_pop1 .view .week_no {left:15px; bottom:initial; top:-28px;}
    .custom_pop1 .view .pop1_close {right:15px; bottom:initial; top:-28px;}
}













.custom_pop2 {position: fixed; left:0; top:0; width:100%; height:100%; z-index: 1000000; background:rgba(0,0,0,.8); display: none;}
.custom_pop2.on {display:block;}
.custom_pop2 .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); background:#fff; border-radius:25px; text-align: center; padding:45px 35px 45px 35px; max-width:650px; width:100%; border:10px solid #add8e6; }
.custom_pop2 .view .noti_link {position: absolute; right:23px; top:20px; border:1px solid #5caac3; background:#fff; font-size:14px; color:#5caac3; font-weight:600; padding:8px 10px 9px 13px; border-radius:6px;}
.custom_pop2 .view .noti_link img {margin:-1px 0 0 9px; width:auto;}
.custom_pop2 .view h2 {font-size:40px; color:#333; font-family: 'JalnanGothic'; font-weight:400; margin-top:-18px; margin-bottom:12px; line-height:1.28em;}
.custom_pop2 .view h2 b {font-weight:400; color:#7CBED3}
.custom_pop2 .view img {width:95%; margin-top:-45px;}
.custom_pop2 .view .box {}
.custom_pop2 .view .box p {font-size:15.5px; color:#666; line-height:1.5em;}
.custom_pop2 .view .box p b {font-weight:700; color:#111;}

.custom_pop2 .view .box .gray_box {background:#f6f6f6; border-radius:10px; margin:15px auto; max-width:500px; width:95%; padding:17px 22px; text-align: left;}
.custom_pop2 .view .box .gray_box b {display: inline-block; width:100%; font-size:15px; color:#333;}
.custom_pop2 .view .box .gray_box span {position: relative; font-size:14px; color:#555 ;margin-top:5px; line-height:1.3em; padding-left:10px; width:100%; display: inline-block; }
.custom_pop2 .view .box .gray_box span:after {content:'-'; position: absolute; left:0; top:0;}

.custom_pop2 .view .box .day {border-radius:60px; font-size:18px; color:#fff; text-shadow: 1px 1px 5px rgba(0,0,0,.1); background:linear-gradient(to right,#ADD8E6, #FFC0CB);; padding:15px 20px 14px 20px; max-width:500px; width:100%; margin:19px auto ;}
.custom_pop2 .view .box .day b {font-family: 'JalnanGothic'; font-weight:400; font-size:22PX;   position: relative; top:1px;}


.custom_pop2 .view .week_no {position: absolute; left:-5px; bottom:-35px; font-size:13px; color:#ddd; font-weight:300; border:none; background:none;}
.custom_pop2 .view .pop2_close {position: absolute; right:-5px; bottom:-35px; font-size:13px; color:#ddd; font-weight:300; border:none; background:none;}
.custom_pop2 .view .pop2_close img {filter:brightness(100); margin:-2px 0 0 7px; width:10px; opacity: .8;}
@media screen and (max-width:767px) {
    .custom_pop2 .view {transform: initial; left:0; bottom:0; width:100%; max-height:calc(100vh - 130px); top:initial; border-radius:25px 25px 0 0; padding:22px 20px 25px 20px; }
    .custom_pop2 .view::-webkit-scrollbar {display: none;}
    .custom_pop2 .view h2 {font-size:22px; margin-top:-15px; line-height:1.35em; margin-bottom:10px;}
    .custom_pop2 .view h2 span {font-size:16px; margin-bottom:7px;}
    .custom_pop2 .view img {margin-top:-25px}
    .custom_pop2 .view .box p {font-size:14px;}
    /*    .custom_pop1 .view .box p br {display: none;}*/
    .custom_pop2 .view .box .day {font-size:13px;}
    .custom_pop2 .view .box .day b {font-size:14px; top:0;}

    .custom_pop2 .view .week_no {left:5px; bottom:initial; top:-35px;}
    .custom_pop2 .view .pop2_close {right:5px; bottom:initial; top:-35px;}
}













.custom_pop3 {position: fixed; left:0; top:0; width:100%; height:100%; z-index: 1000000; background:rgba(0,0,0,.8); display: none;}
.custom_pop3.on {display:block;}
.custom_pop3 .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);  background-size:105%; border-radius:25px; text-align: center; padding:0; width:550px; height:540px;}

.custom_pop3 .view .box {width:100%; height:100%; background:url('../img/custom_img4.svg')no-repeat center top; background-size:cover; box-shadow: 1px 2px 12px rgba(0,0,0,.15); border-radius:25px;}
.custom_pop3 .view h2 {font-size:30px; color:#111; font-family: 'JalnanGothic'; font-weight:400; margin-top:7px; margin-bottom:13px; line-height:1.35em;}
.custom_pop3 .view p {font-size:15.5px; color:#666; line-height:1.55em;}
.custom_pop3 .view p b {font-weight:700; color:#111;}
.custom_pop3 .view .img1 {width:115px; margin-top:-35px;}
.custom_pop3 .view .bt {border-radius:60px; font-size:18px; color:#fff; text-shadow: 1px 1px 5px rgba(0,0,0,.1); background:linear-gradient(to right,#ADD8E6, #FFC0CB);; padding:15px 34px 14px 34px; margin:30px auto 0 auto; font-family: 'JalnanGothic'; border:none;}

.custom_pop3 .view .img2 {position: absolute; left:0; bottom:-5px;}
.custom_pop3 .view .img3 {position: absolute; right:0; bottom:-5px;}

.custom_pop3 .view span {display: inline-block; width:auto; padding:9px 15px 8px 15px; font-size:13px; color:#5e7781; border-top:1px solid #5e7781; border-bottom:1px solid #5e7781; font-family: 'JalnanGothic'; width:100%; max-width:380px; margin-top:30px;}
.custom_pop3 .view span br {display: none;}


.custom_pop3 .view .week_no {position: absolute; left:5px; bottom:-25px; font-size:13px; color:#ddd; font-weight:300; border:none; background:none;}
.custom_pop3 .view .pop3_close {position: absolute; right:5px; bottom:-25px; font-size:13px; color:#ddd; font-weight:300; border:none; background:none;}
.custom_pop3 .view .pop3_close img {filter:brightness(100); margin:-2px 0 0 7px; width:10px; opacity: .8;}
@media screen and (max-width:767px) {
    .custom_pop3 .view {transform: initial; left:0; bottom:0; width:100%; max-height:calc(100vh - 130px); top:initial; border-radius:25px 25px 0 0; padding:0; overflow: initial; height:auto;}
    .custom_pop3 .view .box {border-radius:25px 25px 0 0;}
    .custom_pop3 .view::-webkit-scrollbar {display: none;}
    .custom_pop3 .view h2 {font-size:22px; line-height:1.35em; margin-bottom:10px;}
    .custom_pop3 .view p {font-size:14px; padding:0 20px;}
    .custom_pop3 .view .bt {margin-bottom:64px; font-size:15px; margin-top:20px;}
    .custom_pop3 .view span {width:90%; bottom:42px; line-height:1.4em;}
    .custom_pop3 .view .img1 {margin-top:-35px;}

    .custom_pop3 .view span br {display: block;}


    .custom_pop3 .view .week_no {left:15px; bottom:initial; top:-28px;}
    .custom_pop3 .view .pop3_close {right:15px; bottom:initial; top:-28px;}
}




.custom_pop4 {position: fixed; left:0; top:0; width:100%; height:100%; z-index: 1000000; background:rgba(0,0,0,.8); display: none;}
.custom_pop4.on {display:block;}
.custom_pop4 .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); background:#C1E0E9; border-radius:25px;max-width:1000px; width:100%; height:600px;}
.custom_pop4 .view .scroll {height:100%; }
.custom_pop4 .view .box1 {float:left; width:50%; height:100%; background:url('../img/beta_img.svg')no-repeat center; background-size:cover; border-radius:25px 0 0 25px;}
.custom_pop4 .view .box1_2 {background:url('../img/service_img.svg')no-repeat center; background-size:cover;}
.custom_pop4 .view .box2 {float:right; width:50%; padding:20px; height:100%;}
.custom_pop4 .view .box2 .col {background:#fff; height:100%; width:100%; border-radius:10px; padding:35px 32px; overflow-y: scroll}
.custom_pop4 .view .box2 .col::-webkit-scrollbar {display: none;}
.custom_pop4 .view .noti_link {position: absolute; right:50px; bottom:40px; border:1px solid #5caac3; background:#fff; font-size:14px; color:#5caac3; font-weight:600; padding:8px 10px 9px 13px; border-radius:6px;}
.custom_pop4 .view .noti_link img {margin:-1px 0 0 9px; width:auto;}
.custom_pop4 .view .box2 .col h2 {font-size:25px;  font-weight:200; line-height:1.25em;}
.custom_pop4 .view .box2 .col p {font-size:14px; margin-top:15px; color:#444; line-height:1.5em;}
.custom_pop4 .view .box2 .col span.col_sp {margin:20px 0 0 0; width:100%; padding:16px 20px; border-radius:5px; background:#f6f6f6; font-size:13px; color:#555; line-height:1.45em; font-weight:300; display: inline-block; }

.custom_pop4 .view .box2 .col .list_box {margin-top:18px; padding-top:21px;border-top:1px solid #ececec;}
.custom_pop4 .view .box2 .col .list_box b {display: inline-block; width:100%; font-size:15px; color:#333;}
.custom_pop4 .view .box2 .col .list_box span {position: relative; font-size:14px; color:#555 ;margin-top:5px; line-height:1.3em; padding-left:10px; width:100%; display: inline-block; }
.custom_pop4 .view .box2 .col .list_box span:after {content:'-'; position: absolute; left:0; top:0;}

.custom_pop4 .view .week_no {position: absolute; left:5px; bottom:-25px; font-size:13px; color:#ddd; font-weight:300; border:none; background:none;}
.custom_pop4 .view .pop4_close {position: absolute; right:5px; bottom:-25px; font-size:13px; color:#ddd; font-weight:300; border:none; background:none;}
.custom_pop4 .view .pop4_close img {filter:brightness(100); margin:-2px 0 0 7px; width:10px; opacity: .8;}
@media screen and (max-width:767px) {
    .custom_pop4 .view {transform: initial; left:0; bottom:0; width:100%; max-height:calc(100vh - 130px); top:initial; border-radius:25px 25px 0 0; padding:0; overflow: initial; height:auto; }
    .custom_pop4 .view .scroll {overflow-y: scroll; max-height:calc(100vh - 130px); height:auto; }
    .custom_pop4 .view .scroll::-webkit-scrollbar {display: none;}
    .custom_pop4 .view .box1 {width:100%; height:350px; background-position: center bottom -15px; border-radius:25px 25px 0 0;}
    .custom_pop4 .view .box1_2 {background-size:center top; height:500px;}
    .custom_pop4 .view .box2 {width:100%; height:auto; padding:15px;}
    .custom_pop4 .view .box2 .col {height:auto ; overflow:initial; padding:30px}
    .custom_pop4 .view .week_no {left:15px; bottom:initial; top:-28px;}
    .custom_pop4 .view .pop4_close {right:15px; bottom:initial; top:-28px;}

    .custom_pop4 .view .noti_link {position: initial;margin-top:15px;  width:100%;}
}






.sanction_pop {position: fixed; left:0; top:0; width:100%; height:100%; z-index: 1000000; background:rgba(0,0,0,.8); display: none;}
.sanction_pop.on {display:block;}
.sanction_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);  border-radius:10px;  padding:0 0 20px 0; max-width:450px;width:100%; max-height:90%; background:#fff;}
.sanction_pop .view .scroll {padding:30px 30px 60px 30px; overflow-y:scroll; max-height:80vh;}
.sanction_pop .view .scroll::-webkit-scrollbar {display: none;}
.sanction_pop .view .img1 {display: block; margin:0 auto;}
.sanction_pop .view h3 {font-size:20px; color:#111; font-weight:300; line-height:1.3em; text-align: center; margin-top:15px;}
.sanction_pop .view p {border-top:1px solid #e4e4e4; padding-top:20px; margin-top:20px; font-size:14px; color:#888; line-height:1.45em;}
.sanction_pop .view .box {background:#f8f8f8; margin:25px 0; width:100%; border-radius:5px; padding:15px 20px;}
.sanction_pop .view .box h4 {font-size:14px; color:#333;}
.sanction_pop .view .box ul {margin-top:7px;}
.sanction_pop .view .box ul li {position: relative; display: inline-block; width:100%; padding-left:12px; font-size:14px ;color:#888; line-height:1.4em; margin-top:4px;}
.sanction_pop .view .box ul li:after {content:'-'; position: absolute; left:0; top:0;}

.sanction_pop .view .bt {position: absolute; left:0; bottom:0; width:100%; }
.sanction_pop .view .bt:after {content:''; clear:both; display: table}
.sanction_pop .view .bt button {float:left; width:50%; height:50px; font-size:15px; color:#fff; background:#94cadb; border:none; border-radius:0 0 0 10px;}
.sanction_pop .view .bt button.discord {background:#5662f6; border-radius:0 0 10px 0;}
.sanction_pop .view .bt button.discord img {margin:-2px 5px 0 0}

.sanction_pop .view .week_no {position: absolute; left:5px; bottom:-25px; font-size:13px; color:#ddd; font-weight:300; border:none; background:none;}
.sanction_pop .view .pop3_close {position: absolute; right:5px; bottom:-25px; font-size:13px; color:#ddd; font-weight:300; border:none; background:none;}
.sanction_pop .view .pop3_close img {filter:brightness(100); margin:-2px 0 0 7px; width:10px; opacity: .8;}

@media screen and (max-width:767px) {
    .sanction_pop .view {transform: initial; left:0; bottom:0; width:100%; max-height:90vh; top:initial; border-radius:10px 10px 0 0; padding:0; overflow: initial; height:auto; max-width:100%;}

    .sanction_pop .view .bt button {border-radius:0px !important;}

    .sanction_pop .view .week_no {left:15px; bottom:initial; top:-28px;}
    .sanction_pop .view .pop3_close {right:15px; bottom:initial; top:-28px;}
}


.block_pop2 {position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.55); z-index: 1000; display: none;}
.block_pop2.on {display: block;}
.block_pop2 .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:500px; border-radius:10px; background:rgba(255,255,255,.90); box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; backdrop-filter: blur(8px); padding:40px 40px 28px 40px; text-align: center;}
.block_pop2 .view h3 {font-size:20px; color:#222; font-weight:600;}
.block_pop2 .view textarea {width:100%; height:230px; border-radius:10px; margin-top:13px; padding:15px 20px; font-size:15px; color:#A4A4A4; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff;}

.block_pop2 .view .box {margin-top:15px;}
.block_pop2 .view .box:after {content:''; clear:both; display: table}
.block_pop2 .view .box span {display: inline-block; width:100%; text-align:left; font-size:14px; padding-left:2px; color:#A2A8B0;}
.block_pop2 .view .box input[type="text"] {float:left; width:calc((100% - 25px) / 2); border-radius:10px; margin-top:6px; padding:0px 20px; font-size:15px; color:#A4A4A4; box-shadow:inset 1px 1px 5px rgba(0,0,0,.1), 4px 4px 40px rgb(118 141 149 / 10%); border:1px solid #fff; height:40px;}
.block_pop2 .view .box p {float:left; width:25px; text-align: center; font-size:13px; color:#a2a8B0; margin-top:19px;}

.block_pop2 .view .block_pop2_close {height:45px; border-radius:7px; color:#fff; font-size:15px; background:#c0c0c0; border:none; width:calc((100% - 7px) / 2); float:right; margin-top:28px; margin-right:7px;}
.block_pop2 .view .confirm {height:45px; border-radius:7px; color:#fff; font-size:15px; background:#000080; border:none; width:calc((100% - 7px) / 2); float:right; margin-top:28px;}

.block_pop2 .view .select { float:left; position: relative; width: 100%; cursor: pointer;margin-top:6px;}
.block_pop2 .view .select .label {width:100%; text-align:left; border:none; height:40px; padding-left: 15px; background: transparent; cursor: pointer; font-size:14px; padding-bottom:1px; color:#626262; background:url('../img/open_arrow.svg')no-repeat center right 12px #fff; border-radius:8px; background-size:12px ;  font-weight:400; border:1px solid #fff; box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0;}
.block_pop2 .view .select .optionList {position: absolute; top: 45px; left: 0; width: 100%;  max-height: 0; transition: .3s ease-in;  z-index: 1; background:rgba(255,255,255,0); border:1px solid rgba(255,255,255,0); box-shadow:inset 2px 2px 4px #f0f0f0, inset -1px -1px 3px #f0f0f0; overflow:hidden; border-radius:8px; font-weight:400;  z-index: 10; }
.block_pop2 .view .select.active .optionList {max-height: 160px; overflow:auto; background:#fff; border:1px solid #fff;}
.block_pop2 .view .select .optionItem { padding:14px 17px 0 15px; font-size:14px; color:#A2A8B0; text-align: left;}
.block_pop2 .view .select .optionItem:last-child {padding-bottom:13px;}
.block_pop2 .view .select .optionList::-webkit-scrollbar {width: 6px;}
.block_pop2 .view .select .optionList::-webkit-scrollbar-thumb {background: #f4f4f4; border-radius: 45px;}










.m_video_pop {position: fixed; left:0; top:0; width:100%; height:100%; background:#111; z-index: 100010; display: none;}
.m_video_pop.on {display: block;}
.m_video_pop .view {width:100%; height:100%; top:0; left:0; position: absolute; }
.m_video_pop .view .video_close {position: absolute; right:20px; top:20px; border:none; background:rgba(0,0,0,.4); width:40px; height:40px; z-index: 2;
transition: .3s;}
.m_video_pop .view .video_close img {width:11px;}
.m_video_pop .play_box {width:100%; position: absolute; padding-top:100%; background:#fff; top:50%; transform: translate(0,-50%)}
.m_video_pop .play_box img {max-width:100%; max-height:100%; width:auto; height:auto; margin:0 auto;}
.m_video_pop .play_box video {width: 100%; height: 100%; object-fit: fill; position: absolute; top: 0; left: 0;}

.m_video_pop .view .cc_editor {position: absolute; left:20px; top:20px; border:none; background:rgba(0,0,0,.4); width:127px; height:40px; z-index: 2; opacity: 1; transition: .3s;}
.m_video_pop .view .cc_editor button {border:none; background:none; font-size:14px; color:#fff; height:40px; float:left; padding:0 0 0 15px}
.m_video_pop .view .cc_editor button.cc_hide {padding:0 10px 3px 13px;}
.m_video_pop .view .cc_editor button.cc_hide img {transform:rotate(90deg); transition: .5s; filter:invert(1) brightness(100); width:12px;}
.m_video_pop .view .cc_editor.on button.cc_hide img {transform:rotate(-90deg); }
.m_video_pop .view .cc_editor.on {left:-92px; opacity:0;}
.m_video_pop .view:hover .cc_editor.on {opacity: 1;}

.m_video_pop .control_box {position: absolute; left:0px; width:100%; bottom:0px; background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.7)); padding:15px 20px; transition: .3s; z-index: 1;}
.m_video_pop .control_box button {float:left; border:none; background:none; margin:0 1px;}
.m_video_pop .control_box button.play {margin-top:3px;}
.m_video_pop .control_box button.play .play2 {display: none;}
.m_video_pop .control_box button.play.on .play2 {display: block;}
.m_video_pop .control_box button.play.on .play1 {display: none;}

.m_video_pop .control_box .time {float:left; margin:0 15px 0 25px; position: relative; width:calc(100% - 112px); padding-right:70px; margin-top:10px;}

.m_video_pop .control_box .time span {font-size:11px; color:#fff; font-weight:200; position: absolute; right:0px; top:-4px;}
.m_video_pop .control_box .time span p {display:inline-block;}

.m_video_pop .control_box .volume {float:left; position: relative;}
.m_video_pop .control_box .volume .volume_he {height:90px; position: absolute; bottom:-150px; right:16px; transition: .5s;}
.m_video_pop .control_box .volume .volume_he.on {bottom:39px}
.m_video_pop .control_box .volume .gauge_bar {width:14px;}

.m_video_pop .control_box button.cog {margin-top:4px;}
.m_video_pop .control_box button.big {margin-top:4px; margin-left:12px;}





.refund_reasons_pop {position: fixed; left:0; top:0; width:100%; height:100%; z-index: 1000000; background:rgba(0,0,0,.6); display: none;}
.refund_reasons_pop.on {display:block;}
.refund_reasons_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);  border-radius:10px;  padding:0 0 20px 0; max-width:450px;width:100%; max-height:90%; background:#fff;}
.refund_reasons_pop .view .scroll {padding:30px 30px 40px 30px; overflow-y:scroll; max-height:80vh;}
.refund_reasons_pop .view .scroll::-webkit-scrollbar {display: none;}
.refund_reasons_pop .view h2 {font-size:20px; color:#111; font-weight:400; line-height:1.3em; text-align: center; margin-top:5px;}
.refund_reasons_pop .view .box {background:#f8f8f8; margin:20px 0; width:100%; border-radius:5px; padding:20px 25px;}
.refund_reasons_pop .view .box p {font-size:14px; color:#666; line-height:1.35em;}

.refund_reasons_pop .view .bt {position: absolute; left:0; bottom:0; width:100%; }
.refund_reasons_pop .view .bt:after {content:''; clear:both; display: table}
.refund_reasons_pop .view .bt button {float:left; width:50%; height:50px; font-size:15px; color:#fff; background:#94cadb; border:none; border-radius:0 0 0 10px;}
.refund_reasons_pop .view .bt button.on {background:#bdbdbd; border-radius:0 0 10px 0;}

@media screen and (max-width:767px) {
    .refund_reasons_pop .view {width:90%;}
}














.plan_pop {display:none; position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.8); z-index: 1000000}
.plan_pop.on {display:block;}
.plan_pop .view {position: absolute; left:50%; top:50%; max-width:1125px; height:700px; background:#fff; border-radius:0 20px 20px 20px; width:100%; transform: translate(-50%,-50%);}
/*.plan_pop .view .plan_close {position: absolute; right:30px; top:30px; border:none; background:none;}*/
.plan_pop .view .box1 {float:left; width:402px; border-right:1px solid #e4e4e4; height:100%; padding:32px 30px 35px 40px;}
.plan_pop .view .box1 .open_home {position: absolute; right:30px; top:30px; border:none; background:none; filter:grayscale(100)}
.plan_pop .view .box1 .open_home.on {filter:initial;}
.plan_pop .view .box1 .guide_sel {position: absolute; left:0; top:-50px; border-radius:10px 10px 0 0; overflow: hidden;}
.plan_pop .view .box1 .guide_sel:after {content:''; clear:both; display: table}
.plan_pop .view .box1 .guide_sel input[type="radio"] + label {float:left; font-size:17px; font-weight:400; letter-spacing: -.2px; color:#aaa; cursor:pointer; position: relative; height:50px; background:#f4f4f4; padding:14px 20px 0px 20px; transition: .3s; margin-right:-1px;}
.plan_pop .view .box1 .guide_sel input[type="radio"] + label:last-child {margin-right:0;}
.plan_pop .view .box1 .guide_sel input[type="radio"] {display: none;}
.plan_pop .view .box1 .guide_sel input[type="radio"]:checked + label {color:#111; font-weight:700; background:#fff;}
.plan_pop .view .box1 h1 {font-size:25px; color:#222; font-weight:700; letter-spacing: -.3px;}
.plan_pop .view .box1 h2 {font-size:22px; color:#222; font-weight:700; margin-top:30px; padding-top:30px; border-top:1px solid #eee; letter-spacing: -.3px;}
.plan_pop .view .box1 ul {margin-top:17px;}
.plan_pop .view .box1 ul li {display: inline-block; width:100%; margin-top:15px;}
.plan_pop .view .box1 ul li>a {font-size:17px; color:#777; font-weight:600; padding:8px 2px; width:100%; display: inline-block; position: relative; transition: .4s;}
.plan_pop .view .box1 ul li>a img {margin:-1px 6px 0 0;opacity: .6;}
.plan_pop .view .box1 ul li>a img.arrow { position: absolute; right:10px; top:51%; transform: translate(0,-50%) rotate(180deg); width:auto;}
.plan_pop .view .box1 ul li:first-child {margin-top:0;}
.plan_pop .view .box1 ul li .open_menu a {display: inline-block; padding:7px 0; width:calc(100% - 32px); margin-left:20px;  font-size:15px; font-weight:400; color:#777; transition: .3s;}
.plan_pop .view .box1 ul li .open_menu a.on {color:#222; font-weight:600; }
.plan_pop .view .box1 ul li .open_menu a img {margin:-2px 8px 0 2px;
    opacity: .5;}
.plan_pop .view .box1 ul li.on>a {color:#222; background:#f6f6f6; padding:10px 15px 10px 17px; border-radius:6px; font-weight:700; margin-bottom:4px;}
/*.plan_pop .view .box1 ul li.on>a img {filter:initial; opacity: 1;}*/
.plan_pop .view .box1 ul li.on .open_menu {display: block}
.plan_pop .view .box1 ul li.on .open_menu a {margin-left:32px;}
.plan_pop .view .box1 ul li .open_menu a.on img {
    opacity: 1;}

.plan_pop .view .box2 {float:right; width:calc(100% - 402px); height:100%; padding:40px 40px 35px 35px; text-align: center;}
.plan_pop .view .box2 h3 {font-size:18px; color:#222; font-weight:700; line-height:1.35em; margin-top:15px;}
.plan_pop .view .box2 h3 b {color:#A1D2E2; font-weight:700;}
.plan_pop .view .box2 h4 {margin-top:13px; font-size:14px; color:#888; font-weight:300;}

.plan_pop .view .box2 svg {
    width: 100%; transform: scale(1.05); margin-top:-5px;
}
.plan_pop .view .box2 .home-parent {
    position: relative;
    left: 50%;
    transform: translate(-50%, 8%);
}
.plan_pop .view .box2 .border {
    stroke-width: 1;
    stroke: #A1D2E2;
    stroke-width: 2;
    stroke-dashoffset: 6100;
    stroke-dasharray: 500;
    animation: border 2s 1 linear forwards;
}

/* girl one */
.plan_pop .view .box2 #girl-one {
    transform-box: fill-box;
    transform-origin: center;
    animation: girlOneHand 2s infinite alternate-reverse linear;
}
.plan_pop .view .box2 #girl-one-leg {
    transform-origin: top;
    transform-box: fill-box;
    animation: girlOneLeg 1s infinite alternate linear;
}

@keyframes girlOneLeg {
    0% {
        transform: scaleY(1.04);
    }
    50% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(1.06);
    }
}
.plan_pop .view .box2 #girl-one-hand {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: girlOneHand 2s infinite alternate linear;
}
@keyframes girlOneHand {
    0% {
        transform: rotate(3deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(3deg);
    }
}

/* girl two */
.plan_pop .view .box2 #girl-two {
    transform-origin: bottom;
    transform-box: fill-box;
    animation: girlTwo 1s infinite alternate linear;
}
@keyframes girlTwo {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(1);
    }
}
.plan_pop .view .box2 #girl-two-leg {
    transform-origin: top;
    transform-box: fill-box;
    animation: girlTwoLeg 2s infinite alternate linear;
}
@keyframes girlTwoLeg {
    0% {
        transform: skew(5deg);
        transform: skewX(5deg);
    }
    50% {
        transform: skew(-8deg);
        transform: skewX(-8deg);
    }
    100% {
        transform: skew(5deg);
        transform: skewX(5deg);
    }
}
.plan_pop .view .box2 #girl-two-hand {
    transform-origin: right;
    transform-box: fill-box;
    animation: girlTwoHand 2s infinite alternate linear;
}
@keyframes girlTwoHand {
    0% {
        transform: rotate(-2deg);
    }
    50% {
        transform: rotate(2deg);
    }
    100% {
        transform: rotate(4deg);
    }
}

/* music */
.plan_pop .view .box2 .music {
    transform: scaleY(0);
    transform-origin: center;
}
.plan_pop .view .box2 #music-one,
.plan_pop .view .box2 #music-two,
.plan_pop .view .box2 #music-three {
    animation: music 1s infinite alternate linear;
}
.plan_pop .view .box2 #music-two,
.plan_pop .view .box2 #music-three {
    animation: music 1s infinite alternate linear;
}
.plan_pop .view .box2 #music-two,
.plan_pop .view .box2 #music-three {
    animation: music 1s infinite alternate linear;
}
@keyframes music {
    0% {
        transform: scaleY(-0.2);
    }
    25% {
        transform: scaleY(1.07);
    }
    60% {
        transform: scaleY(0.05);
    }
    75% {
        transform: scaleY(1.05);
    }
    100% {
        transform: scaleY(0.5);
    }
}

.plan_pop .view .box2 #plant-one,
.plan_pop .view .box2 #plant-two {
    transform-origin: bottom;
    transform-box: fill-box;
    animation: plant 1s 1 alternate linear;
}
.plan_pop .view .box2 #plant-two {
    transform-origin: bottom;
    transform-box: fill-box;
    animation: plant 1.5s 1 alternate linear;
}
@keyframes plant {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}

.plan_pop .view .box2 #bg-plant-one {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: girlOneHand 3s infinite alternate linear;
}
.plan_pop .view .box2 #bg-plant-two {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: girlOneHand 3s infinite alternate-reverse linear;
}
/* plants */
.plan_pop .view .box2 #music-circle circle {
    stroke-dashoffset: 2;
    stroke-dasharray: 200;
    animation: musicCircle 5s 0s infinite alternate;
    /* animation-delay: 5s; */
}

@keyframes musicCircle {
    0% {
        stroke-dashoffset: 500;
        stroke-dasharray: 600;
        stroke: #A1D2E2;
    }
    25% {
        stroke-dashoffset: 700;
        stroke-dasharray: 1000;
        stroke: #A1D2E2;
    }
    75% {
        stroke-dashoffset: 600;
        stroke-dasharray: 2000;
        stroke: none;
        fill: #f8f8f8;
        stroke: #A1D2E2;
    }

    100% {
        stroke-dashoffset: 500;
        stroke-dasharray: 5000;
        fill: #f8f8f8;
        stroke: #f8f8f8;
    }
}
.plan_pop .view .box2 .page1 { transition: opacity 0.3s ease-in-out;}
.plan_pop .view .box2 .page3 .overview_box:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page3 .overview_box .img1 {width:260px; float:left; margin-top:15px; box-shadow: 1px 1px 15px rgba(0,0,0,.15); border-radius:10px;}
.plan_pop .view .box2 .page3 .overview_box .txt_box {float:right; width:calc(100% - 260px); padding-left:33PX; margin-top:72px;}
.plan_pop .view .box2 .page3 .overview_box .txt_box ul li {display: inline-block; width:100%; font-size:15px; font-weight:700; color:#222; position: relative}
.plan_pop .view .box2 .page3 .overview_box .txt_box ul li:after {content:url('../img/plan_arrow2.svg'); position: absolute; left:-45px; top:1px;}
.plan_pop .view .box2 .page3 .overview_box .txt_box ul li span {display: inline-block; width:100%; margin-top:5px; font-weight:300; font-size:14px; color:#555; line-height:1.4em;}
.plan_pop .view .box2 .page3 .overview_box .txt_box ul li:nth-child(2) {margin-top:144px;}
.plan_pop .view .box2 .page3 .overview_box .txt_box ul li:nth-child(3) {margin-top:158px;}
.plan_pop .view .box2 .page3 .overview_box .txt_box ul li:nth-child(4) {margin-top:50px;}
.plan_pop .view .box2 .page3 .overview_box .txt_box ul li:nth-child(5) {margin-top:29px;}

.plan_pop .view .box2 .page3 {text-align: left; overflow-y: scroll; height:calc(100% + 75px); margin-top:-40px; padding:0 0 40PX 0;transition: opacity 0.3s ease-in-out;}
.plan_pop .view .box2 .page3::-webkit-scrollbar {display: none;}
.plan_pop .view .box2 .page3 h3 {margin-top:-5px; font-size:20px;padding-top:40px;}
.plan_pop .view .box2 .page3 h3.h3_2 {margin-top:40px; border-top:1px solid #eee; }
.plan_pop .view .box2 .page3 h4 {font-size:15px; color:#222; line-height:1.4em; margin-top:10px;}
.plan_pop .view .box2 .page3 h4.h4_bt {line-height:2em; margin-top:5px;}
.plan_pop .view .box2 .page3 h4 button {background:#000080; border:none; height:34px; font-size:13.5px; border-radius:6px; padding:0px 15px 1px 16px; color:#fff; margin-right:8px; width:200px;}
.plan_pop .view .box2 .page3 h4 button img {margin:-2px 5px 0 0; width:18px; }

.plan_pop .view .box2 .page3 table {width:100%; border-collapse: collapse; margin-top:18px;}
.plan_pop .view .box2 .page3 table th {padding:10px 0; font-weight:500; background:#f6f6f6; color:#222; border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; border-right:1px solid #e4e4e4; font-size:14.5px; text-align: center;}
.plan_pop .view .box2 .page3 table th:last-child {border-right:none;}
.plan_pop .view .box2 .page3 table td {padding:12px 15px; text-align:center; font-size:14px; color:#555; line-height :1.4em; border-right:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
.plan_pop .view .box2 .page3 table td:last-child {border-right:none;}
.plan_pop .view .box2 .page3 .col_box {background:#f6f6f6; margin-top:20px; border-radius:10px; padding:15px 20px 17px 20px;}
.plan_pop .view .box2 .page3 .col_box b {display: inline-block; width:100%; font-size:14.5px; color:#222; margin-bottom:2px;}
.plan_pop .view .box2 .page3 .col_box ul li {display: inline-block; width:100%; margin-top:4px; padding-left:12px; position: relative; font-size:14px ;color:#555; line-height:1.35em;}
.plan_pop .view .box2 .page3 .col_box ul li:after {content:'-'; position: absolute; left:0; top:0; }
.plan_pop .view .box2 .page3 .col_box p {margin-top:0;}
.plan_pop .view .box2 .page3 .col_box2 {background:#ffeff5; margin-top:15px;}
.plan_pop .view .box2 .page3 .col_box2 p {color:#ed8592}
.plan_pop .view .box2 .page3 .col_box2 p b {color:#d55969;}
.plan_pop .view .box2 .page3 .content1:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page3 .content1 {position: relative; border:1px solid #e4e4e4; border-radius:10px; padding:12px 20px 12px 131px; margin-top:15px;}
.plan_pop .view .box2 .page3 .content1 {position: relative; border:1px solid #e4e4e4; border-radius:10px; padding:12px 20px 12px 131px; margin-top:16px;}
.plan_pop .view .box2 .page3 .content1 b {position: absolute; left:20px; font-size:14px; color:#222; top:50%; transform: translate(0,-50%); font-weight:600;}
.plan_pop .view .box2 .page3 .content1 b:after {content:''; position: absolute; right:-14px; top:1px; height:14px; width:1px ; background:#e4e4e4;}
.plan_pop .view .box2 .page3 .content1 span {font-size:13.5px; color:#8ac7db; background:#eafaff; padding:3px 7px; border-radius:4px; margin:0 2px; display: inline-block;}
.plan_pop .view .box2 .page3 .content2 {padding-left:18px;}
.plan_pop .view .box2 .page3 .content2 b {position: relative; width:100%; left:0; top:0; transform: initial; display: inline-block; margin-bottom:3px; margin-left:2px;}
.plan_pop .view .box2 .page3 .content2 b:after {content:none;}
.plan_pop .view .box2 .page3 .content2 span {margin:5px 6px 0 0; float:left;}
.plan_pop .view .box2 .page3 .content2 span:last-child {margin-right:0;}
.plan_pop .view .box2 .page3 .content2 p {margin-top:2px; margin-left:1px; margin-bottom:3px;}


/*.plan_pop .view .box2 .page3 .content1 table {float:left; width:280px;}
.plan_pop .view .box2 .page3 .content1 table th {padding:12px 0;}
.plan_pop .view .box2 .page3 .content1 table td {padding:13px 0;}
.plan_pop .view .box2 .page3 .content1 table td span {font-size:14px; color:#8ac7db; background:#eafaff; padding:3px 9px; border-radius:4px; margin:0 2px; display: inline-block;}
.plan_pop .view .box2 .page3 .content1 .right{ float:right; width:calc(100% - 280px); padding-left:20px;}*/
.plan_pop .view .box2 .page3 p {font-size:14px; color:#555; line-height:1.35em; margin-top:18px; }
.plan_pop .view .box2 .page3 p b {font-size:14.5px; display: inline-block; width:100%; margin-bottom:5px; color:#222;}

.plan_pop .view .box2 .page3 table.tb1 td {text-align: left; vertical-align: top}
.plan_pop .view .box2 .page3 table.tb1 td button {background:linear-gradient(110deg, rgba(173,216,230,1) 0%, rgba(255,192,203,1) 100%); border:none; height:34px; font-size:13.5px; border-radius:6px; padding:0px 15px 1px 16px; color:#fff; margin-right:5px; width:100%; margin-bottom:0px; position: relative; top:-6px;}

.plan_pop .view .box2 .page3 table.tb3 th {padding:7px 0;}

.plan_pop .view .box2 .page3 .list {margin:3px 0 20px 0;}
.plan_pop .view .box2 .page3 .list li {display: inline-block; width:100%; margin-top:6px; padding-left:10px; position: relative; font-size:14px ;color:#555; line-height:1.35em;}
.plan_pop .view .box2 .page3 .list li b {position: absolute; left:0; top:0; font-weight:900;}
.plan_pop .view .box2 .page3 .list li strong {color:#444;}
.plan_pop .view .box2 .page3 .list li img {margin:-2px 5px 0 0;}
.plan_pop .view .box2 .page3 .list li:nth-child(2) img {margin-left:4px;}


.plan_pop .view .box2 .page4 {text-align: left; overflow-y: scroll; height:calc(100% + 75px); margin-top:-40px; padding:0 0 40PX 0;transition: opacity 0.3s ease-in-out;}
.plan_pop .view .box2 .page4::-webkit-scrollbar {display: none;}
.plan_pop .view .box2 .page4 p {font-size:14px; color:#555; line-height:1.35em; margin-top:18px; }
.plan_pop .view .box2 .page4 p b {font-size:14.5px; display: inline-block; width:100%; margin-bottom:5px; color:#222;}
.plan_pop .view .box2 .page4 h3 {margin-top:-5px; font-size:20px;padding-top:40px;}
.plan_pop .view .box2 .page4 h3.h3_2 {margin-top:40px; border-top:1px solid #eee; }
.plan_pop .view .box2 .page4 h4 {font-size:15px; color:#222; line-height:1.4em; margin-top:10px;}
.plan_pop .view .box2 .page4 h4.h4_bt {line-height:2em; margin-top:5px;}
.plan_pop .view .box2 .page4 h4 button {background:#000080; border:none; height:34px; font-size:13.5px; border-radius:6px; padding:0px 15px 1px 16px; color:#fff; margin-right:8px; width:200px;}
.plan_pop .view .box2 .page4 h4 button img {margin:-2px 5px 0 0; width:18px; }

.plan_pop .view .box2 .page4 table {width:100%; border-collapse: collapse; margin-top:18px;}
.plan_pop .view .box2 .page4 table th {padding:10px 0; font-weight:500; background:#f6f6f6; color:#222; border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; border-right:1px solid #e4e4e4; font-size:14.5px; text-align: center;}
/*.plan_pop .view .box2 .page4 table th:last-child {border-right:none;}*/
.plan_pop .view .box2 .page4 table td {padding:12px 15px; text-align:center; font-size:14px; color:#555; line-height :1.4em; border-right:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
.plan_pop .view .box2 .page4 table td:last-child {border-right:none;}
.plan_pop .view .box2 .page4 table.tb1 td:nth-child(1) {padding:12px 5px;}
.plan_pop .view .box2 .page4 table.tb1 td:nth-child(2) {text-align: left;}
.plan_pop .view .box2 .page4 table.tb1 td:nth-child(3) {text-align: left;}
.plan_pop .view .box2 .page4 span {font-size:13.5px; color:#999; line-height:1.35em; margin-top:6px; display: inline-block}
.plan_pop .view .box2 .page4 table.tb2 td {text-align: left; padding:12px 10px;}
.plan_pop .view .box2 .page4 table.tb2 td button {background:linear-gradient(110deg, rgba(173,216,230,1) 0%, rgba(255,192,203,1) 100%); border:none; height:34px; font-size:13.5px; border-radius:6px; padding:0px 15px 1px 16px; color:#fff; margin-right:5px; width:100%; margin-bottom:0px; position: relative; top:-6px;}
.plan_pop .view .box2 .page4 p {font-size:14px; color:#555; line-height:1.35em; margin-top:15px; }

.plan_pop .view .box2 .page4 .list {margin:0;}
.plan_pop .view .box2 .page4 .list li {display: inline-block; width:100%; margin-top:6px; padding-left:10px; position: relative; font-size:14px ;color:#555; line-height:1.35em;}
.plan_pop .view .box2 .page4 .list li:first-child {margin-top:0;}
.plan_pop .view .box2 .page4 .list li b {position: absolute; left:0; top:0; font-weight:900;}
.plan_pop .view .box2 .page4 .list li strong {color:#444;}
.plan_pop .view .box2 .page4 .list li img {margin:-2px 5px 0 0;}
.plan_pop .view .box2 .page4 .list li:nth-child(2) img {margin-left:4px;}


.plan_pop .view .box2 .page5 {text-align: left; overflow-y: scroll; height:calc(100% + 75px); margin-top:-40px; padding:0 0 40PX 0;transition: opacity 0.3s ease-in-out;}
.plan_pop .view .box2 .page5::-webkit-scrollbar {display: none;}
.plan_pop .view .box2 .page5 h3 {margin-top:-5px; font-size:20px;padding-top:40px;}
.plan_pop .view .box2 .page5 h3.h3_2 {margin-top:40px; border-top:1px solid #eee; }
.plan_pop .view .box2 .page5 h4 {font-size:15px; color:#222; line-height:1.4em; margin-top:10px;}
.plan_pop .view .box2 .page5 h4.h4_bt {line-height:2em; margin-top:5px;}
.plan_pop .view .box2 .page5 h4 button {background:#222; border:none; height:30px; font-size:13px; border-radius:0px; padding:0px 0px 1px 4px; color:#fff; margin-right:8px; width:110px;}
.plan_pop .view .box2 .page5 h4 button img {margin:-3px 0px 0 4px; filter:brightness(100); width:10px; transform: rotate(90deg)}
.plan_pop .view .box2 .page5 h4 .menu_img {box-shadow: 1px 1px 5px rgba(0,0,0,.1); border-radius:50%; margin:-2px 4px 0 5px;}

.plan_pop .view .box2 .page5 table {width:100%; border-collapse: collapse; margin-top:15px;}
.plan_pop .view .box2 .page5 table th {padding:10px 0; font-weight:500; background:#f6f6f6; color:#222; border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; border-right:1px solid #e4e4e4; font-size:14.5px; text-align: center;}
.plan_pop .view .box2 .page5 table th:last-child {border-right:none;}
.plan_pop .view .box2 .page5 table td {padding:12px 15px; text-align:center; font-size:14px; color:#555; line-height :1.4em; border-right:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
.plan_pop .view .box2 .page5 table td:last-child {border-right:none;}
.plan_pop .view .box2 .page5 table.tb1 td:nth-child(1) {padding:12px 5px;}
.plan_pop .view .box2 .page5 table.tb1 td:nth-child(2) {text-align: left;}
.plan_pop .view .box2 .page5 span {font-size:13.5px; color:#999; line-height:1.35em; margin-top:6px; display: inline-block}
.plan_pop .view .box2 .page5 table.tb2 td {text-align: left; padding:12px 10px;}
.plan_pop .view .box2 .page5 table.tb2 td button {background:linear-gradient(110deg, rgba(173,216,230,1) 0%, rgba(255,192,203,1) 100%); border:none; height:34px; font-size:13.5px; border-radius:6px; padding:0px 15px 1px 16px; color:#fff; margin-right:5px; width:100%; margin-bottom:10px;}
.plan_pop .view .box2 .page5 p {font-size:14px; color:#555; line-height:1.35em; margin-top:15px; }


.plan_pop .view .box2 .page5 .col_box {background:#f6f6f6; margin-top:10px; border-radius:10px; padding:10px 20px 17px 20px;}
.plan_pop .view .box2 .page5 .col_box b {display: inline-block; width:100%; font-size:14.5px; color:#222; margin-bottom:2px;}
.plan_pop .view .box2 .page5 .col_box ul li {display: inline-block; width:100%; margin-top:6px; padding-left:12px; position: relative; font-size:14px ;color:#555; line-height:1.35em;}
.plan_pop .view .box2 .page5 .col_box ul li:after {content:'-'; position: absolute; left:0; top:0; }
.plan_pop .view .box2 .page5 .col_box p {margin-top:6px;}
.plan_pop .view .box2 .page5 .col_box2 {background:#ffeff5; margin-top:15px;}
.plan_pop .view .box2 .page5 .col_box2 p {color:#ed8592}


.plan_pop .view .box2 .page5 .content1:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page5 .content1 {position: relative; border:1px solid #e4e4e4; border-radius:10px; padding:12px 20px 12px 20px; margin-top:15px; font-size:14px; color:#444}

.plan_pop .view .box2 .page5 .step3_box:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page5 .step3_box img {float:left; width:350px;}
.plan_pop .view .box2 .page5 .step3_box .txt {float:right; width:calc(100% - 350px); padding-left:40px;}
.plan_pop .view .box2 .page5 p button.bt2 {height:42px; border:4px solid #CECEF8; color:#fff;background:#000080; font-size:13px; border-radius:10px; width:97px; margin:0 9px 5px 0;}
.plan_pop .view .box2 .page5 p button.bt2 img {margin:-2px 0 0 7px; width:11px; float:initial;}


.plan_pop .view .box2 .page5 .img_box:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page5 .img_box {margin-top:15px;}
.plan_pop .view .box2 .page5 .img_box img {width:100%; border-radius:10px; margin-bottom:10px;}
.plan_pop .view .box2 .page5 .img_box .img3 {float:left; width:calc((100% - 15px) / 2); border:1px solid #e4e4e4;}
.plan_pop .view .box2 .page5 .img_box .img4 {float:right; width:calc((100% - 15px) / 2); border:1px solid #e4e4e4;}

.plan_pop .view .box2 .page5 .list {margin:10px 0 20px 0;}
.plan_pop .view .box2 .page5 .list li {display: inline-block; width:100%; margin-top:6px; padding-left:15px; position: relative; font-size:14px ;color:#555; line-height:1.35em;}
.plan_pop .view .box2 .page5 .list li b {position: absolute; left:0; top:0; font-weight:400;}
.plan_pop .view .box2 .page5 .list li img {margin:-2px 5px 0 0;}
.plan_pop .view .box2 .page5 .list li:nth-child(2) img {margin-left:4px;}
.plan_pop .view .box2 .page5 .img5 {width:100%; border-radius:10px; margin-top:10px; border:1px solid #f0f0f0}



.plan_pop .view .box2 .page6 {text-align: left; overflow-y: scroll; height:calc(100% + 75px); margin-top:-40px; padding:0 0 40PX 0;transition: opacity 0.3s ease-in-out;}
.plan_pop .view .box2 .page6::-webkit-scrollbar {display: none;}
.plan_pop .view .box2 .page6 h3 {margin-top:-5px; font-size:20px;padding-top:40px;}
.plan_pop .view .box2 .page6 h3.h3_2 {margin-top:40px; border-top:1px solid #e4e4e4; }
.plan_pop .view .box2 .page6 h4 {font-size:15px; color:#222; line-height:1.4em; margin-top:10px;}
.plan_pop .view .box2 .page6 h4.h4_bt {line-height:2em; margin-top:5px;}
.plan_pop .view .box2 .page6 h4 button {background:#222; border:none; height:30px; font-size:13px; border-radius:0px; padding:0px 0px 1px 4px; color:#fff; margin-right:8px; width:110px;}
.plan_pop .view .box2 .page6 h4 button img {margin:-3px 0px 0 4px; filter:brightness(100); width:10px; transform: rotate(90deg)}

.plan_pop .view .box2 .page6 table {width:100%; border-collapse: collapse; margin-top:15px;}
.plan_pop .view .box2 .page6 table th {padding:10px 0; font-weight:500; background:#f6f6f6; color:#222; border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; border-right:1px solid #e4e4e4; font-size:14.5px; text-align: center;}
.plan_pop .view .box2 .page6 table th:last-child {border-right:none;}
.plan_pop .view .box2 .page6 table td {padding:12px 15px; text-align:center; font-size:14px; color:#555; line-height :1.4em; border-right:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
.plan_pop .view .box2 .page6 table td:last-child {border-right:none;}
.plan_pop .view .box2 .page6 table.tb1 td:nth-child(1) {padding:12px 5px;}
.plan_pop .view .box2 .page6 table.tb1 td:nth-child(2) {text-align: left;}
.plan_pop .view .box2 .page6 span {font-size:13.5px; color:#999; line-height:1.35em; margin-top:6px; display: inline-block}
.plan_pop .view .box2 .page6 table.tb2 td {text-align: left; padding:12px 10px;}
.plan_pop .view .box2 .page6 table td img {width:100%; border-radius:10px; margin:0;}
.plan_pop .view .box2 .page6 table.tb2 td button {background:linear-gradient(110deg, rgba(173,216,230,1) 0%, rgba(255,192,203,1) 100%); border:none; height:34px; font-size:13.5px; border-radius:6px; padding:0px 15px 1px 16px; color:#fff; margin-right:5px; width:100%; margin-bottom:10px;}
.plan_pop .view .box2 .page6 p {font-size:14px; color:#555; line-height:1.35em; margin-top:15px; }

.plan_pop .view .box2 .page6 table.tb3 th {border:1px solid #e4e4e4;}
.plan_pop .view .box2 .page6 table.tb3 td {border-right:1px solid #e4e4e4; border-left:1px solid #e4e4e4;}


.plan_pop .view .box2 .page6 .col_box {background:#f6f6f6; margin-top:10px; border-radius:10px; padding:10px 20px 17px 20px;}
.plan_pop .view .box2 .page6 .col_box b {display: inline-block; width:100%; font-size:14.5px; color:#222; margin-bottom:2px;}
.plan_pop .view .box2 .page6 .col_box ul li {display: inline-block; width:100%; margin-top:6px; padding-left:12px; position: relative; font-size:14px ;color:#555; line-height:1.35em;}
.plan_pop .view .box2 .page6 .col_box ul li:after {content:'-'; position: absolute; left:0; top:0; }
.plan_pop .view .box2 .page6 .col_box p {margin-top:6px;}
.plan_pop .view .box2 .page6 .col_box2 {background:#ffeff5; margin-top:15px;}
.plan_pop .view .box2 .page6 .col_box2 p {color:#ed8592}


.plan_pop .view .box2 .page6 .content1:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page6 .content1 {position: relative; border:1px solid #e4e4e4; border-radius:10px; padding:12px 20px 12px 20px; margin-top:15px; font-size:14px; color:#444}

.plan_pop .view .box2 .page6 .step3_box:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page6 .step3_box {margin-top:12px;}
.plan_pop .view .box2 .page6 .step3_box img {float:left; width:300px; border-radius:10px;}
.plan_pop .view .box2 .page6 .step3_box .txt {float:right; width:calc(100% - 300px); padding-left:15px;}
.plan_pop .view .box2 .page6 .step3_box .col_box {margin-top:235px;}

.plan_pop .view .box2 .page6 p button.bt2 {height:42px; border:4px solid #CECEF8; color:#fff;background:#000080; font-size:13px; border-radius:10px; width:97px; margin:0 9px 5px 0;}
.plan_pop .view .box2 .page6 p button.bt2 img {margin:-2px 0 0 7px; width:11px; float:initial;}


.plan_pop .view .box2 .page6 .img_box:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page6 .img_box {margin-top:15px;}
.plan_pop .view .box2 .page6 .img_box img {width:100%; border-radius:10px; margin-bottom:10px;}
.plan_pop .view .box2 .page6 .img_box .img3 {float:left; width:calc((100% - 15px) / 2); border:1px solid #e4e4e4;}
.plan_pop .view .box2 .page6 .img_box .img4 {float:right; width:calc((100% - 15px) / 2); border:1px solid #e4e4e4;}

.plan_pop .view .box2 .page6 .list {margin:10px 0 20px 0;}
.plan_pop .view .box2 .page6 .list li {display: inline-block; width:100%; margin-top:6px; padding-left:15px; position: relative; font-size:14px ;color:#555; line-height:1.35em;}
.plan_pop .view .box2 .page6 .list li b {position: absolute; left:0; top:0; font-weight:400;}
.plan_pop .view .box2 .page6 .list li img {margin:-2px 5px 0 0;}
.plan_pop .view .box2 .page6 .list li:nth-child(2) img {margin-left:4px;}
.plan_pop .view .box2 .page6 .img5 {width:100%; border-radius:10px; margin-top:10px; border:1px solid #f0f0f0}
.plan_pop .view .box2 .page6 .img6 {width:60%; border-radius:10px; margin:10px auto; display: block; border:1px solid #f0f0f0}




.plan_pop .view .box2 .page7 .overview_box:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page7 p {font-size:14px; color:#555; line-height:1.35em; margin-top:25px; }
.plan_pop .view .box2 .page7 p b {font-size:14.5px; display: inline-block; width:100%; margin-bottom:5px; color:#222;}
.plan_pop .view .box2 .page7 p b span {display: inline-block; font-size:20px; font-weight:400; position: relative; top:3px;}
.plan_pop .view .box2 .page7 .overview_box .img1 {width:260px; float:left; margin-top:15px; box-shadow: 1px 1px 15px rgba(0,0,0,.15); border-radius:10px;}
.plan_pop .view .box2 .page7 .overview_box .txt_box {float:right; width:calc(100% - 260px); padding-left:35PX; margin-top:59px;}
.plan_pop .view .box2 .page7 .overview_box .txt_box ul li {display: inline-block; width:100%; font-size:15px; font-weight:700; color:#222; position: relative}
.plan_pop .view .box2 .page7 .overview_box .txt_box ul li:after {content:url('../img/plan_arrow2.svg'); position: absolute; left:-44px; top:1px;}
.plan_pop .view .box2 .page7 .overview_box .txt_box ul li span {display: inline-block; width:100%; margin-top:5px; font-weight:300; font-size:14px; color:#555; line-height:1.4em;}
.plan_pop .view .box2 .page7 .overview_box .txt_box ul li:nth-child(2) {margin-top:13px;}
.plan_pop .view .box2 .page7 .overview_box .txt_box ul li:nth-child(3) {margin-top:37px;}
.plan_pop .view .box2 .page7 .overview_box .txt_box ul li:nth-child(4) {margin-top:50px;}
.plan_pop .view .box2 .page7 .overview_box .txt_box ul li:nth-child(5) {margin-top:39px;}

.plan_pop .view .box2 .page7 {text-align: left; overflow-y: scroll; height:calc(100% + 75px); margin-top:-40px; padding:0 0 40PX 0;transition: opacity 0.3s ease-in-out;}
.plan_pop .view .box2 .page7::-webkit-scrollbar {display: none;}
.plan_pop .view .box2 .page7 h3 {margin-top:-5px; font-size:20px;padding-top:40px;}
.plan_pop .view .box2 .page7 h3.h3_2 {margin-top:40px; border-top:1px solid #eee; }
.plan_pop .view .box2 .page7 h4 {font-size:15px; color:#222; line-height:1.4em; margin-top:10px;}
.plan_pop .view .box2 .page7 h4.h4_bt {line-height:2em; margin-top:5px;}
.plan_pop .view .box2 .page7 h4 button {background:#000080; border:none; height:34px; font-size:13.5px; border-radius:6px; padding:0px 15px 1px 16px; color:#fff; margin-right:8px; width:200px;}
.plan_pop .view .box2 .page7 h4 button img {margin:-2px 5px 0 0; width:18px; }
.plan_pop .view .box2 .page7 h5 {margin-top:15px; font-size:16px; color:#222; }
.plan_pop .view .box2 .page7 h5.h5_2 {margin-top:30px; border-top:1px dashed #efefef; padding-top:25px;}
.plan_pop .view .box2 .page7 .img1 {width:100%; margin-top:15px; border-radius:10px; border:1px solid #efefef}
.plan_pop .view .box2 .page7 .img2 {margin-top:8px; border-radius:10px; border:1px solid #efefef}

.plan_pop .view .box2 .page7 table {width:100%; border-collapse: collapse; margin-top:15px;}
.plan_pop .view .box2 .page7 table th {padding:10px 0; font-weight:500; background:#f6f6f6; color:#222; border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; border-right:1px solid #e4e4e4; font-size:14.5px; text-align: center;}
.plan_pop .view .box2 .page7 table th:last-child {border-right:none;}
.plan_pop .view .box2 .page7 table td {padding:12px 15px; text-align:center; font-size:14px; color:#555; line-height :1.4em; border-right:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
.plan_pop .view .box2 .page7 table td:last-child {border-right:none;}
.plan_pop .view .box2 .page7 .col_box {background:#f6f6f6; margin-top:15px; border-radius:10px; padding:15px 20px 17px 20px;}
.plan_pop .view .box2 .page7 .col_box b {display: inline-block; width:100%; font-size:14.5px; color:#222; margin-bottom:2px;}
.plan_pop .view .box2 .page7 .col_box ul li {display: inline-block; width:100%; margin-top:4px; padding-left:12px; position: relative; font-size:14px ;color:#555; line-height:1.35em; letter-spacing: 0;}
.plan_pop .view .box2 .page7 .col_box ul li:after {content:'-'; position: absolute; left:0; top:0; }
.plan_pop .view .box2 .page7 .col_box ul li img {border:1px solid #efefef; border-radius:10px; margin-top:10px;}
.plan_pop .view .box2 .page7 .col_box p {margin-top:0;}
.plan_pop .view .box2 .page7 .col_box2 {background:#ffeff5; margin-top:15px;}
.plan_pop .view .box2 .page7 .col_box2 p {color:#ed8592}
.plan_pop .view .box2 .page7 .col_box2 p b {color:#d55969;}
.plan_pop .view .box2 .page7 .content1:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page7 .content1 {position: relative; border:1px solid #e4e4e4; border-radius:10px; padding:12px 20px 12px 131px; margin-top:15px;}
.plan_pop .view .box2 .page7 .content1 {position: relative; border:1px solid #e4e4e4; border-radius:10px; padding:12px 20px 12px 131px; margin-top:16px;}
.plan_pop .view .box2 .page7 .content1 b {position: absolute; left:20px; font-size:14px; color:#222; top:50%; transform: translate(0,-50%); font-weight:600;}
.plan_pop .view .box2 .page7 .content1 b:after {content:''; position: absolute; right:-14px; top:1px; height:14px; width:1px ; background:#e4e4e4;}
.plan_pop .view .box2 .page7 .content1 span {font-size:13.5px; color:#8ac7db; background:#eafaff; padding:3px 7px; border-radius:4px; margin:0 2px; display: inline-block;}
.plan_pop .view .box2 .page7 .content2 {padding-left:18px;}
.plan_pop .view .box2 .page7 .content2 b {position: relative; width:100%; left:0; top:0; transform: initial; display: inline-block; margin-bottom:3px; margin-left:2px;}
.plan_pop .view .box2 .page7 .content2 b:after {content:none;}
.plan_pop .view .box2 .page7 .content2 span {margin:5px 6px 0 0; float:left;}
.plan_pop .view .box2 .page7 .content2 span:last-child {margin-right:0;}
.plan_pop .view .box2 .page7 .content2 p {margin-top:2px; margin-left:1px; margin-bottom:3px;}


.plan_pop .view .box2 .page7 .content3:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page7 .content3 {position: relative; border:1px solid #e4e4e4; border-radius:10px; padding:15px 20px 15px 136px; margin-top:10px;}
.plan_pop .view .box2 .page7 .content3_2 {padding-left:122px;}
.plan_pop .view .box2 .page7 .content3 b {position: absolute; left:20px; font-size:14px; color:#222; top:50%; transform: translate(0,-50%); font-weight:600;}
.plan_pop .view .box2 .page7 .content3 b:after {content:''; position: absolute; right:-14px; top:1px; height:14px; width:1px ; background:#e4e4e4;}
.plan_pop .view .box2 .page7 .content3 span {font-size:14px; display: inline-block; color:#777}
.plan_pop .view .box2 .page7 .list {margin:6px 0 0 0;}
.plan_pop .view .box2 .page7 .list li {display: inline-block; width:100%; margin-top:6px; padding-left:10px; position: relative; font-size:14.5px ;color:#222; line-height:1.35em; font-weight:500;}
.plan_pop .view .box2 .page7 .list li:first-child {margin-top:0;}
.plan_pop .view .box2 .page7 .list li b {position: absolute; left:0; top:0; font-weight:900;}
.plan_pop .view .box2 .page7 .list li strong {color:#e32f2f; font-weight:600;}

.plan_pop .view .box2 .page7 .step3_box {margin-top:15px;}
.plan_pop .view .box2 .page7 .step3_box:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page7 .step3_box img {float:left; width:340px; border-radius:10px; border:1px solid #efefef;}
.plan_pop .view .box2 .page7 .step3_box .txt {float:right; width:calc(100% - 340px); padding-left:15px;}
.plan_pop .view .box2 .page7 .step3_box .txt .col_box {margin-top:0; height:333px; padding-top:108px;}
.plan_pop .view .box2 .page7 .step3_box .txt .col_box p {line-height:1.5em;}

.plan_pop .view .box2 .page7 .step3_box .txt .col_box2 {height:auto; padding:10px 15px 15px 15px; background:#f6f6f6; margin-top:10px;}

.plan_pop .view .box2 .page7 .step3_box2 img {width:280px}
.plan_pop .view .box2 .page7 .step3_box2 .txt {width:calc(100% - 280px); padding-left:25px;}
.plan_pop .view .box2 .page7 .step3_box2 table {margin-top:30px;}
.plan_pop .view .box2 .page7 .step3_box2 table td {padding:17px 0}

.plan_pop .view .box2 .page7 .step3_box3 .txt .col_box {height:177px; padding-top:46px;}
.plan_pop .view .box2 .page7 .step3_box4 {margin-top:6px;}
.plan_pop .view .box2 .page7 .step3_box4 .txt .col_box {height:155px; padding-top:33px;}




.plan_pop .view .box2 .page_style .link2 {text-align: center; margin:0px 0 25px 0; padding:15px 0; border-radius:8px; background:#eaf7ff;}
.plan_pop .view .box2 .page_style .link2 a {display: inline-block; margin:0 20px; font-size:15px; font-weight:600; color:#238ecd;}
.plan_pop .view .box2 .page_style p {font-size:14px; color:#555; line-height:1.35em; margin-top:25px; }
.plan_pop .view .box2 .page_style p b {font-size:14.5px; display: inline-block; width:100%; margin-bottom:5px; color:#222;}
.plan_pop .view .box2 .page_style p b span {display: inline-block; font-size:20px; font-weight:400; position: relative; top:3px;}
.plan_pop .view .box2 .page_style p addr {text-decoration: underline; font-weight:600; color:#111; text-underline-position: under;}
.plan_pop .view .box2 .page_style p span.stxt {display: inline-block; width:100%; color:#999; font-size:13px; margin-top:15px;}
.plan_pop .view .box2 .page_style p.border {padding:20px 0; margin:20px 0; border-top:1px solid #e4e4e4;}
.plan_pop .view .box2 .page_style p span.color1 {color:#e14747; font-weight:600;}
.plan_pop .view .box2 .page_style .overview_box:after {content:''; clear:both; display:table;}
.plan_pop .view .box2 .page_style .overview_box .img1 {width:260px; float:left; margin-top:15px; box-shadow: 1px 1px 15px rgba(0,0,0,.15); border-radius:10px;}
.plan_pop .view .box2 .page_style .overview_box .txt_box {float:right; width:calc(100% - 260px); padding-left:33PX; margin-top:379px;}
.plan_pop .view .box2 .page_style .overview_box .txt_box ul li {display: inline-block; width:100%; font-size:15px; font-weight:700; color:#222; position: relative}
.plan_pop .view .box2 .page_style .overview_box .txt_box ul li:after {content:url('../img/plan_arrow2.svg'); position: absolute; left:-44px; top:1px;}
.plan_pop .view .box2 .page_style .overview_box .txt_box ul li span {display: inline-block; width:100%; margin-top:5px; font-weight:300; font-size:14px; color:#555; line-height:1.4em;}
.plan_pop .view .box2 .page_style .overview_box .txt_box ul li:nth-child(2) {margin-top:143px;}
.plan_pop .view .box2 .page_style .overview_box .txt_box ul li:nth-child(3) {margin-top:51px;}
.plan_pop .view .box2 .page_style .overview_box .txt_box ul li:nth-child(4) {margin-top:24px;}
.plan_pop .view .box2 .page_style .overview_box .txt_box ul li:nth-child(5) {margin-top:182px;}

.plan_pop .view .box2 .page_style {text-align: left; overflow-y: scroll; height:calc(100% + 75px); margin-top:-40px; padding:0 0 40PX 0;transition: opacity 0.3s ease-in-out;}
.plan_pop .view .box2 .page_style::-webkit-scrollbar {display: none;}
.plan_pop .view .box2 .page_style h3 {margin-top:-5px; font-size:20px;padding-top:40px;}
.plan_pop .view .box2 .page_style h3.h3_2 {margin-top:40px; border-top:1px solid #eee; }
.plan_pop .view .box2 .page_style h3 img {margin:-2px 3px 0 0;}
.plan_pop .view .box2 .page_style video {display: block; margin:10px auto 0 auto; width:337px; height:600px;}
.plan_pop .view .box2 .page_style h4 {font-size:15px; color:#222; line-height:1.4em; margin-top:10px;}
.plan_pop .view .box2 .page_style h4 b {font-weight:700; color:#222; font-size:17px; display: inline-block; margin-bottom:-4px; position: relative; top:6px;}
.plan_pop .view .box2 .page_style h4.h4_bt {line-height:2em; margin-top:5px;}
.plan_pop .view .box2 .page_style h4 button {background:#000080; border:none; height:34px; font-size:13.5px; border-radius:6px; padding:0px 15px 1px 16px; color:#fff; margin-right:8px; width:200px;}
.plan_pop .view .box2 .page_style h4 button img {margin:-2px 5px 0 0; width:18px; }
.plan_pop .view .box2 .page_style h4 button.creative {background:#ADD8E6; margin:3px 8px 3px 0;}
.plan_pop .view .box2 .page_style h4 strong {font-weight:600; color:#111;}
.plan_pop .view .box2 .page_style h5 {margin-top:15px; font-size:16px; color:#222; }
.plan_pop .view .box2 .page_style h5.h5_2 {margin-top:30px; border-top:1px dashed #efefef; padding-top:25px;}
.plan_pop .view .box2 .page_style .img1 {width:100%; margin-top:15px; border-radius:10px; border:1px solid #efefef}
.plan_pop .view .box2 .page_style .img2 {margin-top:8px; border-radius:10px; border:1px solid #efefef}

.plan_pop .view .box2 .page_style table {width:100%; border-collapse: collapse; margin-top:15px;}
.plan_pop .view .box2 .page_style table th {padding:10px 0; font-weight:500; background:#f6f6f6; color:#222; border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; border-right:1px solid #e4e4e4; font-size:14.5px; text-align: center;}
.plan_pop .view .box2 .page_style table th:last-child {border-right:none;}
.plan_pop .view .box2 .page_style table td {padding:12px 15px; text-align:center; font-size:14px; color:#555; line-height :1.4em; border-right:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
.plan_pop .view .box2 .page_style table td:last-child {border-right:none;}

.plan_pop .view .box2 .page_style table.tb1 th {padding:14px 15px; text-align: left;}
.plan_pop .view .box2 .page_style table.tb1 td {padding:14px 15px; text-align: left; border-top:1px solid #e4e4e4;}
.plan_pop .view .box2 .page_style table.tb2 {margin-top:12px;}

.plan_pop .view .box2 .page_style .col_box {background:#f6f6f6; margin-top:15px; border-radius:10px; padding:15px 20px 17px 20px;}
.plan_pop .view .box2 .page_style .col_box b {display: inline-block; width:100%; font-size:14.5px; color:#222; margin-bottom:2px;}
.plan_pop .view .box2 .page_style .col_box ul li {display: inline-block; width:100%; margin-top:4px; padding-left:12px; position: relative; font-size:14px ;color:#555; line-height:1.35em; letter-spacing: 0;}
.plan_pop .view .box2 .page_style .col_box ul li:after {content:'-'; position: absolute; left:0; top:0; }
.plan_pop .view .box2 .page_style .col_box ul li img {border:1px solid #efefef; border-radius:10px; margin-top:10px;}
.plan_pop .view .box2 .page_style .col_box p {margin-top:0;}
.plan_pop .view .box2 .page_style .col_box2 {background:#ffeff5; margin-top:15px;}
.plan_pop .view .box2 .page_style .col_box2 p {color:#ed8592}
.plan_pop .view .box2 .page_style .col_box2 p b {color:#d55969;}
.plan_pop .view .box2 .page_style .content1:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page_style .content1 {position: relative; border:1px solid #e4e4e4; border-radius:10px; padding:12px 20px 12px 131px; margin-top:15px;}
.plan_pop .view .box2 .page_style .content1 {position: relative; border:1px solid #e4e4e4; border-radius:10px; padding:12px 20px 12px 131px; margin-top:16px;}
.plan_pop .view .box2 .page_style .content1 b {position: absolute; left:20px; font-size:14px; color:#222; top:50%; transform: translate(0,-50%); font-weight:600;}
.plan_pop .view .box2 .page_style .content1 b:after {content:''; position: absolute; right:-14px; top:1px; height:14px; width:1px ; background:#e4e4e4;}
.plan_pop .view .box2 .page_style .content1 span {font-size:13.5px; color:#8ac7db; background:#eafaff; padding:3px 7px; border-radius:4px; margin:0 2px; display: inline-block;}
.plan_pop .view .box2 .page_style .content2 {padding-left:18px;}
.plan_pop .view .box2 .page_style .content2 b {position: relative; width:100%; left:0; top:0; transform: initial; display: inline-block; margin-bottom:3px; margin-left:2px;}
.plan_pop .view .box2 .page_style .content2 b:after {content:none;}
.plan_pop .view .box2 .page_style .content2 span {margin:5px 6px 0 0; float:left;}
.plan_pop .view .box2 .page_style .content2 span:last-child {margin-right:0;}
.plan_pop .view .box2 .page_style .content2 p {margin-top:2px; margin-left:1px; margin-bottom:3px;}


.plan_pop .view .box2 .page_style .content3:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page_style .content3 {position: relative; border:1px solid #e4e4e4; border-radius:10px; padding:15px 20px 15px 136px; margin-top:10px;}
.plan_pop .view .box2 .page_style .content3_2 {padding-left:122px;}
.plan_pop .view .box2 .page_style .content3 b {position: absolute; left:20px; font-size:14px; color:#222; top:50%; transform: translate(0,-50%); font-weight:600;}
.plan_pop .view .box2 .page_style .content3 b:after {content:''; position: absolute; right:-14px; top:1px; height:14px; width:1px ; background:#e4e4e4;}
.plan_pop .view .box2 .page_style .content3 span {font-size:14px; display: inline-block; color:#777}
.plan_pop .view .box2 .page_style .list {margin:6px 0 0 0;}
.plan_pop .view .box2 .page_style .list li {display: inline-block; width:100%; margin-top:6px; padding-left:10px; position: relative; font-size:14.5px ;color:#222; line-height:1.35em; font-weight:500;}
.plan_pop .view .box2 .page_style .list li:first-child {margin-top:0;}
.plan_pop .view .box2 .page_style .list li b {position: absolute; left:0; top:0; font-weight:900;}
.plan_pop .view .box2 .page_style .list li strong {color:#e32f2f; font-weight:600;}

.plan_pop .view .box2 .page_style .step3_box {margin-top:15px;}
.plan_pop .view .box2 .page_style .step3_box:after {content:''; clear:both; display: table}
.plan_pop .view .box2 .page_style .step3_box img {float:left; width:340px; border-radius:10px; border:1px solid #efefef;}
.plan_pop .view .box2 .page_style .step3_box .txt {float:right; width:calc(100% - 340px); padding-left:15px;}
.plan_pop .view .box2 .page_style .step3_box .txt .col_box {margin-top:0; height:211px; padding-top:72px;}
.plan_pop .view .box2 .page_style .step3_box .txt .col_box p {line-height:1.5em;}

.plan_pop .view .box2 .page_style .step3_box .txt .col_box2 {height:auto; padding:54px 15px 57px 15px; background:#f6f6f6; margin-top:10px;}
.plan_pop .view .box2 .page_style .step3_box .txt .col_box3 {padding:34px 15px 40px 15px}
.plan_pop .view .box2 .page_style .step3_box .txt .col_box4 {height:203px; padding-top:38px}
.plan_pop .view .box2 .page_style .step3_box .txt .col_box4 p {letter-spacing: -.1px;}
.plan_pop .view .box2 .page_style .step3_box2 img {width:320px}
.plan_pop .view .box2 .page_style .step3_box3 img {width:308px;}
.plan_pop .view .box2 .page_style .step3_box2 .txt {width:calc(100% - 320px); padding-left:25px; margin-top:-10px;}
.plan_pop .view .box2 .page_style .step3_box3 .txt {padding-left:10px;}
.plan_pop .view .box2 .page_style .step3_box2 .txt3 p {margin-top:50px;}
.plan_pop .view .box2 .page_style .step3_box2 .txt3 .col_box {height:116px; margin-top:19px; padding-top:13px;}
.plan_pop .view .box2 .page_style .step3_box2 .txt3 .col_box p {margin-top:0;}
.plan_pop .view .box2 .page_style .step3_box2 table {margin-top:30px;}
.plan_pop .view .box2 .page_style .step3_box2 table.tb2 {margin-top:11px;}
.plan_pop .view .box2 .page_style .step3_box2 table td {padding:17px 0 30px 17px;}
.plan_pop .view .box2 .page_style .step3_box2 table td .reset {padding:8px 12px; border-radius:6px; color:#ADD8E6; border:1px solid #ADD8E6; background:none; font-size:14px; width:160px; margin:0 8px 5px 0}
.plan_pop .view .box2 .page_style .step3_box2 table td .save {padding:8px 12px; border-radius:6px; color:#fff; border:none; background:#ADD8E6; font-size:14px; width:160px;  margin:0 8px 5px 0}

.plan_pop .view .box2 .page_style .step3_box3 .txt .col_box {height:177px; padding-top:46px;}
.plan_pop .view .box2 .page_style .step3_box4 {margin-top:6px;}
.plan_pop .view .box2 .page_style .step3_box4 .txt .col_box {height:155px; padding-top:33px;}


.plan_pop .view .week_no {position: absolute; left:5px; bottom:-25px; font-size:13px; color:#ddd; font-weight:300; border:none; background:none;}
.plan_pop .view .plan_close {position: absolute; right:5px; bottom:-25px; font-size:13px; color:#ddd; font-weight:300; border:none; background:none;}
.plan_pop .view .plan_close img {filter:brightness(100); margin:-2px 0 0 7px; width:10px; opacity: .8;}

.plan_pop .view .scroll_down {
    width: 50px;
    height:60px;
    position: absolute;
    right:10px; bottom:50px;
    display: none;
}

.plan_pop .view .chevron {
    position: absolute;
    width: calc(0.6rem * 3.5);
    height: calc(0.6rem * 0.8);
    opacity: 0;
    transform: scale(0.3);
    animation: move-chevron 3s ease-out infinite;
}

.plan_pop .view .chevron:first-child {
    animation: move-chevron 3s ease-out 1s infinite;
}

.plan_pop .view .chevron:nth-child(2) {
    animation: move-chevron 3s ease-out 2s infinite;
}

.plan_pop .view .chevron:before,
.plan_pop .view .chevron:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: #ccc;
}

.plan_pop .view .chevron:before {
    left: 0;
    transform: skewY(30deg);
}

.plan_pop .view .chevron:after {
    right: 0;
    width: 50%;
    transform: skewY(-30deg);
}

@keyframes move-chevron {
    25% {
        opacity: 1;
    }
    33.3% {
        opacity: 1;
        transform: translateY(calc(0.6rem * 3.8));
    }
    66.6% {
        opacity: 1;
        transform: translateY(calc(0.6rem * 5.2));
    }
    100% {
        opacity: 0;
        transform: translateY(calc(0.6rem * 8)) scale(0.5);
    }
}



@media screen and (max-width:1000px) {
    .plan_pop .view {border-radius:20px; max-width:95%;}
    .plan_pop .view .box1 {display: none;}
    .plan_pop .view .box2 {width:100%;}
}

@media screen and (max-width:767px) {
    .plan_pop .view {max-width:91%;}

    .plan_pop .view .box2 {padding:30px 25px 35px 25px;}
    .plan_pop .view .box2 .page3 .overview_box .img1 {width:160px;}
}










.template_pop {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:Rgba(0,0,0,.7); z-index: 100003;}
.template_pop.on {display:block;}
.template_pop .view {position: absolute; left:50%; top:50%; max-width:1200px; width:95%; transform: translate(-50%,-50%); height:750px; }
.template_pop .view .template_close {position: absolute; top:25px; right:30px; border:none; background:none; z-index: 1;}
.template_pop .view .tem_box {float:left; width:120px; background:#fff; height:100%; border-radius:10px; padding:20px 15px; text-align: center;}
.template_pop .view .tem_box h2 {font-size:17px; color:#222;}
.template_pop .view .tem_box .bt_box {margin-top:15px;}
.template_pop .view .tem_box .bt_box button {border:none; background:none; width:100%; height:70px; margin-bottom:15px; border-radius:6px; transition: .3s;position: relative}
.template_pop .view .tem_box .bt_box button img {margin-bottom:4px; width:30px; }
.template_pop .view .tem_box .bt_box button span {display: inline-block; width:100%; font-size:14.5px; color:#777; font-weight:400; }
.template_pop .view .tem_box .bt_box button:hover {background:#f6f6f6}
.template_pop .view .tem_box .bt_box button.on {background:#ADD8E6;}
.template_pop .view .tem_box .bt_box button.on img {filter:brightness(100)}
.template_pop .view .tem_box .bt_box button.on span {color:#fff; font-weight:400;}

.template_pop .view .lyrics_box {display:none; float:right; width:calc(100% - 135px); height:100%; background:#fff; border-radius:10px;}
.template_pop .view .lyrics_box.on {display:block;}
.template_pop .view .lyrics_box .box {float:left; width:calc(100% / 3); padding:30px 35px; position: relative; height:100%;}
.template_pop .view .lyrics_box .box:after {content:''; position: absolute; width:1px; height:calc(100% - 60px); top:30px; right:0; border-right:1px dashed #e5e5e5;}
.template_pop .view .lyrics_box .box h3 {font-size:20px; color:#000; font-weight:400;}
.template_pop .view .lyrics_box .box .txt {margin-top:17px; height:calc(100% - 237px); overflow-y: scroll; padding-right:15px;}
.template_pop .view .lyrics_box .box .txt::-webkit-scrollbar {
    width: 6px;
}
.template_pop .view .lyrics_box .box .txt::-webkit-scrollbar-thumb {
    background-color: #e4e4e4;
    border-radius: 10px;
}
.template_pop .view .lyrics_box .box .txt::-webkit-scrollbar-track {
    background-color: #f7f7f7;
    border-radius: 10px;
}

.template_pop .view .lyrics_box .box .txt p {color:#444; font-weight:300; line-height:1.5em; font-size:14px; }
.template_pop .view .lyrics_box .box .txt p b {display: inline-block; width:100%; margin:0px 0 1px 0; font-weight:600; }
.template_pop .view .lyrics_box .box .txt p b:first-child {margin-top:0;}
.template_pop .view .lyrics_box .box .des_box {margin-top:15px; background:#f8f8f8; padding:15px 20px;  border-radius:8px; height:122px; overflow-y: scroll}
.template_pop .view .lyrics_box .box .des_box::-webkit-scrollbar {display: none;}
.template_pop .view .lyrics_box .box .des_box p {font-size:13px; color:#777; line-height:1.4em; font-weight:300;}
.template_pop .view .lyrics_box .box .ctrl_bt {margin-top:15px;}
.template_pop .view .lyrics_box .box .ctrl_bt:after {content:''; clear:both; display: table}
.template_pop .view .lyrics_box .box .ctrl_bt button {float:left; border:none; height:45px; border-raidus:8px; font-size:15px; border-radius:8px;}
.template_pop .view .lyrics_box .box .ctrl_bt button.apply {background:linear-gradient(110deg, rgba(173,216,230,1) 0%, rgba(255,192,203,1) 100%); color:#fff; float:left; width:calc(100% - 52px);}
.template_pop .view .lyrics_box .box .ctrl_bt button.copy {background:#f3f3f3; float:right; width:45px;}

.template_pop .view .lyrics_box.tem_2,
.template_pop .view .lyrics_box.tem_3,
.template_pop .view .lyrics_box.tem_4,
.template_pop .view .lyrics_box.tem_5,
.template_pop .view .lyrics_box.tem_6,
.template_pop .view .lyrics_box.tem_7,
.template_pop .view .lyrics_box.tem_8 {display: none;}


@media screen and (max-width:1200px) {
    .template_pop .view .tem_box {width:100%; height:140px;}
    .template_pop .view .tem_box .bt_box {display: flex;  width:100%; justify-content: center;}
    .template_pop .view .tem_box .bt_box::-webkit-scrollbar {display: none;}
    .template_pop .view .tem_box .bt_box button {flex:0 0 auto;width:90px; margin-right:5px;}

    .template_pop .view .lyrics_box {width:100%; height:calc(100% - 150px); margin-top:10px;}
}
@media screen and (max-width:1024px) {
    .template_pop .view {width:90%;}
    .template_pop .view .template_close {top:15px; right:15px;}
    .template_pop .view .template_close img {width:21px;}
    .template_pop .view .tem_box {height:120px; padding:15px 15px;}
    .template_pop .view .tem_box h2 {text-align: left;}
    .template_pop .view .tem_box .bt_box { overflow-y: scroll; justify-content:initial; width:calc(100% + 14px); padding-right:10px; margin-top:12px;}
    .template_pop .view .tem_box .bt_box button {margin-right:6px; height:60px; width:80px; background:#f8f8f8}
    .template_pop .view .tem_box .bt_box button img {width:26px; margin-bottom:2px; margin-top:-2px;}
    .template_pop .view .tem_box .bt_box button span {font-size:14px; }

    .template_pop .view .lyrics_box {overflow-y: scroll; }
    .template_pop .view .lyrics_box::-webkit-scrollbar {display: none;}
    .template_pop .view .lyrics_box .box {width:100%; height:auto; padding:22px 25px;}
    .template_pop .view .lyrics_box .box .txt {height:auto; overflow:initial; margin-top:14px;}
    .template_pop .view .lyrics_box .box .des_box {height:auto; overflow: initial}
}


@media screen and (max-width:1200px) and (max-height:760px) {
    .template_pop .view .template_close {top:31px; right:15px;}
    .template_pop .view .template_close img {width:21px;}
    .template_pop .view {height:100vh; padding-top:20px;}
    .template_pop .view .lyrics_box {height:calc(100vh - 180px)}
}









.lyrics_pop {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:Rgba(0,0,0,.7); z-index: 100003;}
.lyrics_pop.on {display:block;}
.lyrics_pop .view {position: absolute; left:50%; top:50%; max-width:750px; width:95%; transform: translate(-50%,-50%); height:650px; background:#fff; border-radius:10px;}
.lyrics_pop .view .template_close {position: absolute; top:25px; right:30px; border:none; background:none; z-index: 1;}
.lyrics_pop .view .tem_box {float:left; width:120px; background:#fff; height:100%; border-radius:10px; padding:20px 15px; text-align: center;}
.lyrics_pop .view h2 {font-size:20px; color:#222; margin-top:25px; font-weight:600; text-align: center;}
.lyrics_pop .view .tem_box .bt_box {margin-top:15px;}
.lyrics_pop .view .tem_box .bt_box button {border:none; background:none; width:100%; height:70px; margin-bottom:15px; border-radius:6px; transition: .3s;position: relative}
.lyrics_pop .view .tem_box .bt_box button img {margin-bottom:4px; width:30px; }
.lyrics_pop .view .tem_box .bt_box button span {display: inline-block; width:100%; font-size:14.5px; color:#777; font-weight:400; }
.lyrics_pop .view .tem_box .bt_box button:hover {background:#f6f6f6}
.lyrics_pop .view .tem_box .bt_box button.on {background:#ADD8E6;}
.lyrics_pop .view .tem_box .bt_box button.on img {filter:brightness(100)}
.lyrics_pop .view .tem_box .bt_box button.on span {color:#fff; font-weight:400;}

.lyrics_pop .view .lyrics_box {display:none; float:right; width:100%; height:calc(100% - 49px); border-radius:10px;}
.lyrics_pop .view .lyrics_box.on {display:block;}
.lyrics_pop .view .lyrics_box .box {float:left; width:calc(100% / 2); padding:13px 35px; position: relative; height:100%}
.lyrics_pop .view .lyrics_box .box:after {content:''; position: absolute; width:1px; height:calc(100% - 60px); top:30px; right:0; border-right:1px dashed #e5e5e5;}
.lyrics_pop .view .lyrics_box .box:last-child:after {content:none;}
.lyrics_pop .view .lyrics_box .box h3 {font-size:20px; color:#000; font-weight:400;}
.lyrics_pop .view .lyrics_box .box .txt {margin-top:17px; height:calc(100% - 97px); overflow-y: scroll; padding-right:15px;}
.lyrics_pop .view .lyrics_box .box .txt::-webkit-scrollbar {
    width: 6px;
}
.lyrics_pop .view .lyrics_box .box .txt::-webkit-scrollbar-thumb {
    background-color: #e4e4e4;
    border-radius: 10px;
}
.lyrics_pop .view .lyrics_box .box .txt::-webkit-scrollbar-track {
    background-color: #f7f7f7;
    border-radius: 10px;
}

.lyrics_pop .view .lyrics_box .box .txt p {color:#444; font-weight:300; line-height:1.5em; font-size:14px; }
.lyrics_pop .view .lyrics_box .box .txt p b {display: inline-block; width:100%; margin:0px 0 1px 0; font-weight:600; }
.lyrics_pop .view .lyrics_box .box .txt p b:first-child {margin-top:0;}
.lyrics_pop .view .lyrics_box .box .des_box {margin-top:15px; background:#f8f8f8; padding:15px 20px;  border-radius:8px; height:122px; overflow-y: scroll}
.lyrics_pop .view .lyrics_box .box .des_box::-webkit-scrollbar {display: none;}
.lyrics_pop .view .lyrics_box .box .des_box p {font-size:13px; color:#777; line-height:1.4em; font-weight:300;}
.lyrics_pop .view .lyrics_box .box .ctrl_bt {margin-top:15px;}
.lyrics_pop .view .lyrics_box .box .ctrl_bt:after {content:''; clear:both; display: table}
.lyrics_pop .view .lyrics_box .box .ctrl_bt button {float:left; border:none; height:45px; border-raidus:8px; font-size:15px; border-radius:8px;}
.lyrics_pop .view .lyrics_box .box .ctrl_bt button.apply {background:linear-gradient(110deg, rgba(173,216,230,1) 0%, rgba(255,192,203,1) 100%); color:#fff; float:left; width:calc(100% - 52px);}
.lyrics_pop .view .lyrics_box .box .ctrl_bt button.copy {background:#f3f3f3; float:right; width:45px;}

.lyrics_pop .view .lyrics_box.tem_2,
.lyrics_pop .view .lyrics_box.tem_3,
.lyrics_pop .view .lyrics_box.tem_4,
.lyrics_pop .view .lyrics_box.tem_5,
.lyrics_pop .view .lyrics_box.tem_6,
.lyrics_pop .view .lyrics_box.tem_7,
.lyrics_pop .view .lyrics_box.tem_8 {display: none;}

.lyrics_pop .view.one {width:375px;}
.lyrics_pop .view.one .lyrics_box .box {width:100%;}
.lyrics_pop .view.one .lyrics_box .box:last-child:after {content:none;}
.lyrics_pop .view.one .lyrics_box .box2 {display: none;}


@media screen and (max-width:1200px) {
    .lyrics_pop .view .tem_box {width:100%; height:140px;}
    .lyrics_pop .view .tem_box .bt_box {display: flex;  width:100%; justify-content: center;}
    .lyrics_pop .view .tem_box .bt_box::-webkit-scrollbar {display: none;}
    .lyrics_pop .view .tem_box .bt_box button {flex:0 0 auto;width:90px; margin-right:5px;}

    .lyrics_pop .view .lyrics_box {width:100%; height:calc(100% - 59px); margin-top:10px;}
}
@media screen and (max-width:1024px) {
    .lyrics_pop .view {width:90%; height:80%;}
    .lyrics_pop .view.one {width:90%}
    .lyrics_pop .view .template_close {top:15px; right:15px;}
    .lyrics_pop .view .template_close img {width:21px;}
    .lyrics_pop .view .tem_box {height:120px; padding:15px 15px;}
    .lyrics_pop .view .tem_box h2 {text-align: left;}
    .lyrics_pop .view .tem_box .bt_box { overflow-y: scroll; justify-content:initial; width:calc(100% + 14px); padding-right:10px; margin-top:12px;}
    .lyrics_pop .view .tem_box .bt_box button {margin-right:6px; height:60px; width:80px; background:#f8f8f8}
    .lyrics_pop .view .tem_box .bt_box button img {width:26px; margin-bottom:2px; margin-top:-2px;}
    .lyrics_pop .view .tem_box .bt_box button span {font-size:14px; }

    .lyrics_pop .view .lyrics_box {overflow-y: scroll; }
    .lyrics_pop .view .lyrics_box::-webkit-scrollbar {display: none;}
    .lyrics_pop .view .lyrics_box .box {width:100%; height:auto; padding:22px 25px; border-bottom:1px dashed #e5e5e5}
    .lyrics_pop .view .lyrics_box .box:last-child {border-bottom:none;}
    .lyrics_pop .view .lyrics_box .box .txt {height:auto; overflow:initial; margin-top:14px;}
    .lyrics_pop .view .lyrics_box .box .des_box {height:auto; overflow: initial}
}


@media screen and (max-width:1200px) and (max-height:760px) {
    .lyrics_pop .view .template_close {top:31px; right:15px;}
    .lyrics_pop .view .template_close img {width:21px;}
    .lyrics_pop .view {height:100vh; padding-top:20px;}
    .lyrics_pop .view .lyrics_box {height:calc(100vh - 180px)}
}



















.domain_pop {position: absolute; left:0; top:0; width:100%; height:100%; display: none; z-index: 1000; background:rgba(0,0,0,.7)}
.domain_pop.on {display:block;}
.domain_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); background:#fff; border-radius:25px; text-align: center; padding:30px 15px 20px 15px; max-width:670px; width:100%; border:10px solid #add8e6; height:auto; overflow:hidden;}
.domain_pop .view .noti_link {background:#fff; font-size:20px; color:#b8c8cd; font-weight:400; padding:13px 25px 13px 25px;  margin:15px 0;  border: 2px solid #b8c8cd; border-left:none; border-right:none; font-family: 'JalnanGothic';}
.domain_pop .view .noti_link img {margin:-1px 0 0 9px; width:auto;}
.domain_pop .view h2 {font-size:40px; color:#333; font-family: 'JalnanGothic'; font-weight:400; margin-top:-178px; margin-bottom:12px; line-height:1.28em;}
.domain_pop .view h2 b {font-weight:400; color:#7CBED3}
.domain_pop .view img {width:100%; margin-top:-45px;}
.domain_pop .view .box {}
.domain_pop .view .box p {font-size:15.5px; color:#666; line-height:1.5em;}
.domain_pop .view .box p b {font-weight:700; color:#111;}

.domain_pop .view .box .gray_box {background:#f6f6f6; border-radius:10px; margin:15px auto; max-width:570px; width:95%; padding:13px 22px 17px 22px;}
.domain_pop .view .box .gray_box b {display: inline-block; width:100%; font-size:15px; color:#333;}
.domain_pop .view .box .gray_box span {position: relative; font-size:14px; color:#999 ;margin-top:5px; line-height:1.3em; padding-left:10px; width:100%; display: inline-block; }

.domain_pop .view .box .day {border-radius:60px; font-size:18px; color:#fff; text-shadow: 1px 1px 5px rgba(0,0,0,.1); background:linear-gradient(to right,#ADD8E6, #FFC0CB);; padding:15px 20px 14px 20px; max-width:570px; width:100%; margin:19px auto ;}
.domain_pop .view .box .day b {font-family: 'JalnanGothic'; font-weight:400; font-size:21PX;   position: relative; top:1px;}


@media screen and (max-width:768px) {
    .domain_pop .view {width:90%;}
    .domain_pop .view img {width:620px; margin:0 auto;}
    .domain_pop .view h2 {margin-top:-245px; font-size:28px;}
    .domain_pop .view .box p {font-size:14px;}
    .domain_pop .view .box .day {padding:10px 20px 10px 20px}
    .domain_pop .view .box .day span {display:inline-block; width:100%;}
    .domain_pop .view .box .day strong {display:none;}
    .domain_pop .view .box .day b {font-size:18px; line-height:1.5em;}

    .domain_pop .view .noti_link {margin:5px 0; font-size:18px;}
    .domain_pop .view .box .gray_box span br {display: none;}
    .domain_pop .view .box .gray_box span {font-size:13px;}
}








footer {float:right;width:calc(100% - 345px); position: relative;  padding:30px 0 125px 0px; border-top:1px solid #E4EAF2; margin-top:40px;}
footer:before {content:''; clear:both; display: table}
footer b {display: inline-block; width:100%; font-size:16px; color:#616469; font-weight:600; margin-bottom:12px;}
footer span {display: inline-block; margin-right:12px; font-size:13px; color:#A2A8B0; margin-top:3px;}
footer p {margin-top:15px; font-size:13px; color:#a2a8b0; }


@media screen and (max-width:1200px) {
    footer {width:100% !important; padding:30px 25px 175px 25px;}
    footer b {font-size:14px;}
    footer span {font-size:12px;}
    footer p {font-size:12px;}
}








.account_pop {position: fixed; left:0; top:0; width:100%; height:100%; z-index: 1000000; background:rgba(0,0,0,0.7); display: none; text-align: center;}
.account_pop.on {display: block;}
.account_pop .view {position: absolute; left:50%; top:50%; max-width:635px;width:90%;  border-radius:15px; background:#fff; padding:50px 30px 30px 30px; transform: translate(-50%,-50%)}
.account_pop .view img {width:48px;}
.account_pop .view h2 {margin-top:12px; font-size:24px; color:#111; font-weight:800;}
.account_pop .view ul {padding:0 30px;}
.account_pop .view ul li {margin-top:35px; display: inline-block; width:100%;}
.account_pop .view ul li input[type="checkbox"] {display: none;}
.account_pop .view ul li input[type="checkbox"] + label {display: inline-block; width:100%; padding-left:30px; position: relative; font-size:15px; color:#616469; text-align: left; line-height:1.5em; cursor: pointer}
.account_pop .view ul li input[type="checkbox"] + label abbr {text-decoration: underline; text-underline-position: under; color:#83b8c9}
.account_pop .view ul li input[type="checkbox"]:checked + label
{color:#111; font-weight:500;}
.account_pop .view ul li input[type="checkbox"] + label span {position:absolute; left:0; top:2px; width:19px; height:19px; border:1px solid #e4e4e4; border-radius:3px; background:#fff;}
.account_pop .view ul li input[type="checkbox"]:checked + label span {border:1px solid #111; background:url('../img/check_icon.svg')no-repeat center #111; background-size:12px;}

.account_pop .view .create_bt {width:100%; height:45px; border-radius:10px; background:#ADD8E6; border:none; color:#fff; font-size:18px; font-weight:500; margin-top:50px;}

@media screen and (max-width:767px) {
    .account_pop .view {padding:40px 10px 10px 10px;}
    .account_pop .view img {width:43px;}
    .account_pop .view h2 {font-size:20px;}
    .account_pop .view ul {padding:0 10px;}
    .account_pop .view ul li {margin-top:25px;}
    .account_pop .view ul li input[type="checkbox"] + label span {width:17px; height:17px;}
    .account_pop .view ul li input[type="checkbox"] + label {font-size:14px; padding-left:26px; line-height:1.35em;}

    .account_pop .view .create_bt {height:40px; font-size:16px; margin-top:40px;}
}







.cer_pop {position: fixed; left:0; top:0; width:100%; height:100%; z-index: 100003; background:rgba(0,0,0,.7); display: none;}
.cer_pop.on {display: block;}
.cer_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); max-width:575px; width:90%; height:678px; }
.cer_pop .view .main_box {background:linear-gradient(180deg,rgba(230, 247, 252, 1) 0%, rgba(243, 246, 247, 1) 100%); border-radius:15px; padding:35px 25px 25px 30px; text-align: center; z-index: 1; width:100%; height:100%;}
.cer_pop .view .main_box.auth_on {border-radius:15px 0 0 15px;}
.cer_pop .view .main_box:after {content:''; clear:both; display: table;}
.cer_pop .view h2 {font-size:18px; color:#111; font-weight:600; margin-top:14px;}
.cer_pop .view h3 {font-size:14px; color:#626262; line-height:1.4em; margin-top:8px; font-weight:400;}

.cer_pop .view .col {background:#fff; text-align: left; margin-top:30px; border-radius:10px; padding:20px 20px;}
.cer_pop .view .col p {position: relative; padding-left:15px; font-size:14px; color:#808080; line-height:1.35em; margin-top:25px;}
.cer_pop .view .col p:first-child {margin-top:0;}
.cer_pop .view .col p b {position: absolute; left:0; top:0; font-weight:400; }
.cer_pop .view .col p span {display: inline-block; text-decoration: underline; text-underline-position: under; color:#83b8c9; cursor: pointer; font-weight:500;}
.cer_pop .view input[type="checkbox"] {display: none;}
.cer_pop .view input[type="checkbox"] + label {display: inline-block; width:100%; font-size:13px;color:#666; position: relative; padding-left:25px; text-align: left; margin-top:19px; cursor: pointer}
.cer_pop .view input[type="checkbox"] + label span {position: absolute; left:0; top:0px; width:17px; height:17px; border-radius:3px; border:1px solid #e4e4e4; background:#fff;}
.cer_pop .view input[type="checkbox"]:checked + label {color:#222;}
.cer_pop .view input[type="checkbox"]:checked + label span {background:url('../img/check_icon.svg')no-repeat center #ADD8E6; background-size:10px; border:1px solid #add8e6;}
.cer_pop .view .bt {float:left; width:calc(100% - 112px); height:45px; font-size:16px; color:#fff; font-weight:500; background:#ADD8E6; border-radius:10px; border:none; margin-top:21px;}
.cer_pop .view .bt2 {float:right; width:105px; height:45px; font-size:16px; color:#fff; font-weight:500; background:#CFD1D4; border-radius:10px; border:none; margin-top:21px; padding-bottom:1px;}
.cer_pop .view .box1 {position: absolute; right:0px; width:300px; height:100%; border-radius:0 15px 15px 0; background:#fff; z-index: -1; bottom:0; padding:23px 20px 25px 20px; transition: .3s; padding-bottom:1px;}
/*.cer_pop .view .box1.auth_on {height:460px;}*/
.cer_pop .view .box1.on {right:-299px;}
.cer_pop .view .box1 h3 {font-size:18px; color:#111; font-weight:500; margin-top:0;}
.cer_pop .view .box1 .input_box {margin-top:20px; position: relative; text-align: left;}
.cer_pop .view .box1 .input_box.hide {display:none;}
.cer_pop .view .box1 .input_box .tit {display: inline-block; width:100%; font-size:14px; color:#999; margin-bottom:6px;}
.cer_pop .view .box1 .input_box input[type="text"] {width:100%; height:40px; border:1px solid #e4e4e4; padding:0 13px; font-size:14px; border-radius:5px; color:#111;}
.cer_pop .view .box1 .input_box b {position: absolute; right:14px; bottom:12px; font-size:13px; color:#ADD8E6; font-weight:500;}
.cer_pop .view .box1 .num_bt {width:calc(100% - 40px); height:45px; font-size:16px; color:#fff; background:#ADD8E6; font-weight:500; border-radius:10px;border:none; margin-top:21px; position: absolute; left:20px; bottom:25px;}

.cer_pop .view .box2 {display: none; padding:110px 20px 15px 20px; background:#fff; border-radius:15px;}
.cer_pop .view .box2 img {width:100%;}
.cer_pop .view .box2.on {display: block;}
.cer_pop .view .box2 {position: absolute; left:0; top:0; width:100%; height:100%; z-index: 1;}
.cer_pop .view .box2 p {font-size:16px; color:#3b3b3b; font-weight:400; line-height:1.35em; margin-top:30px; text-align: center;}
.cer_pop .view .box2 .go_bt {width:calc(100% - 40px); height:45px; font-size:16px; color:#fff; background:#ADD8E6; font-weight:500; border-radius:10px;border:none; margin-top:110px; position: absolute; left:20px; bottom:25px;}

@media screen and (max-width:767px) {
    .cer_pop .view {height:auto; max-height:95vh;}
    .cer_pop .view .main_box { padding:25px 15px 15px 15px}
    .cer_pop .view .scroll {height:calc(100vh - 150px); overflow-y: scroll;}
    .cer_pop .view .scroll::-webkit-scrollbar{display: none;}

    .cer_pop .view .box1 {display: none; height:auto; padding-bottom:95px; border-radius:15px !important;}
    .cer_pop .view .box1.on {right:initial; left:50%; top:50%; transform: translate(-50%,-50%); bottom:initial; z-index: 2; display: block; box-shadow: 0px 0px 25px rgba(0,0,0,.25);}
}













.event_pop {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index: 100004; display:none;}
.event_pop.on {display:block;}
.event_pop .view {position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align: center;}
.event_pop .view img.gif {height:100vh !important; width: auto !important; position: relative; z-index: 1;}
.event_pop .view img.img {height:100vh !important; width: auto !important; position: relative; z-index: 1; display: none;}
.event_pop img.bg {position: absolute; left:0; top:0; width:100%; height:100%; object-fit: cover; z-index: 0;}
.event_pop .view .event_close {position: absolute; right:0px; top:90px; border:none; background:none; z-index: 2;}
.event_pop .view .event_close img {width:50px; }

@media screen and (max-width:1200px) {
    .event_pop .view {width:100%; left:0;top:0; transform: initial; bottom:0;}
    .event_pop .view .event_close {right:20px; top:20px; }
    .event_pop .view img.gif {position: absolute; bottom:0; left:50%; transform: translate(-50%,0);}
    .event_pop .view img.img {position: absolute; bottom:0; left:50%; transform: translate(-50%,0);}
}

@media screen and (max-width:767px) {
    .event_pop .view img.gif {width:calc(100vw + 130px) !important; height:auto !important; position: absolute; bottom:0; left:-65px; transform: initial;}
    .event_pop .view img.img {width:calc(100vw + 130px) !important; height:auto !important; position: absolute; bottom:0; left:-65px; transform: initial;}
}














.ex_pop {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index: 100005; display: none;}
.ex_pop.on {display: block;}
.ex_pop .view {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); background:#fff; border-radius:20px; padding:30px 35px; max-width:1000px; width:90%;}
.ex_pop .view .ex_close {position: absolute; right:25px; top:24px; border:none; background:none;}
.ex_pop .view h2 {font-size:20px; color:#000;}
.ex_pop .view ul {margin-top:20px;}
.ex_pop .view ul:after {content:''; clear:both; display: table;}
.ex_pop .view ul li {float:left; width:calc((100% + 15PX) / 3); padding:15px; border-right:1px dashed #dcdcdc; border-bottom:1px dashed #dcdcdc; }
.ex_pop .view ul li:nth-child(3n + 1) {padding-left:0; width:calc((100% - 15px) / 3);}
.ex_pop .view ul li:nth-child(3n) {border-right:none; padding-right:0; width:calc((100% - 15px) / 3);}
.ex_pop .view ul li:nth-child(10),.ex_pop .view ul li:nth-child(11),.ex_pop .view ul li:nth-child(12) {border-bottom:none; padding-bottom:0;}
.ex_pop .view ul li:nth-child(-n + 3) {padding-top:0;}
.ex_pop .view ul li:nth-child(9) {letter-spacing: -.3px;}
.ex_pop .view ul li p {font-size:15px; color:#333; margin-top:3px; line-height:1.35em;}
.ex_pop .view ul li button {width:35px; height:35px; border-radius:6px; border:none ;background:#f2f2f2; float:right; margin-top:15px;}
.ex_pop .view ul li button img {width:22px;}
.ex_pop .view ul li button.apply {float:left; width:calc(100% - 40px); font-size:15px; color:#fff;background:linear-gradient(110deg, rgb(173, 216, 230) 0%, rgb(255, 192, 203) 100%); font-weight:500;}


@media screen and (max-width:1200px) {
    .ex_pop .view ul {height:calc(100vh - 200px); overflow-y: scroll; margin-top:5px;}
    .ex_pop .view ul::-webkit-scrollbar {display: none;}
    .ex_pop .view ul li {width:100% !important; padding:15px 0 !important; border:none !important; border-bottom:1px dashed #dcdcdc !important; }
    .ex_pop .view ul li:last-child {border-bottom:none !important;}
    .ex_pop .view ul li p br {display: none;}

}

















.friends_pop {position: fixed; left:0; top:0; width:100%; height:100%; background:Rgba(0,0,0,0.7); z-index: 100004; display: none;}
.friends_pop.on {display: block;}
.friends_pop .friends_close {position: absolute; right:39px; top:30px; border:none; background:none; z-index: 2;}
.friends_pop .view {position: absolute; left:50%; top:43%; transform: translate(-50%,-50%); max-width:630px; width:90%; text-align: center;}
.friends_pop .view img {position: relative; z-index: 1; margin-left:-2%; width:105%;}

.friends_pop .view .box {background:#fff; border-radius:40px; width:100%; padding:85px 35px 120px 35px; margin-top:-75px; position: relative}
.friends_pop .view .box h3 {font-size:14px ;color:#fff; font-size:14px; font-weight:600; background:linear-gradient(to RIGHT, #F6B3E6, #60B9F0); display: inline-block; padding:10px 18px; border-radius:8px;}
.friends_pop .view .box h2 {font-size:30px; color:#000; font-weight:700; margin-top:10px; line-height:1.25em;}
.friends_pop .view .box p {font-size:15px; color:#333; font-weight:400; margin-top:17px; line-height:1.4em;}
.friends_pop .view .box span {display: inline-block; font-size:14px; color:#9BC6E8; background:#EEF8FF; padding:10px 30px 12px 30px; border-radius:10px; margin-top:17px;}
.friends_pop .view .box .bt {position: absolute; left:35px; bottom:30px; width:calc(100% - 70px); }
.friends_pop .view .box .bt:after {content:''; clear:both; display: table;}
.friends_pop .view .box .bt button {width:calc((100% - 10px) / 2); float:left; height:50px; border-radius:50px; border:none; background:#f7b8c5; color:#fff; font-size:18px; font-weight:500; }
.friends_pop .view .box .bt button.on {float:right; background:#9dd1f1}


@media screen and (max-width:767px) {
    .friends_pop .view .box {padding:45px 25px 125px 25px; margin-top:-40px;}
    .friends_pop .view .box h2 {font-size:20px;}
    .friends_pop .view .box h3 {font-size:13px; padding:8px 15px;}
    .friends_pop .view .box p {font-size:14px; margin-top:12px;}
    .friends_pop .view .box p br {display: none;}
    .friends_pop .view .box span {padding:8px 20px 10px 20px; font-size:13px; margin-top:13px;}
    .friends_pop .view .box .bt button {width:100%; height:40px; font-size:16px;}
    .friends_pop .view .box .bt button.on {margin-top:7px;}
    .friends_pop .view .box .bt {left:25px; width:calc(100% - 50px); bottom:23px;}

    .friends_pop .friends_close {right:25px; top:23px;}
}