/***********************************************************************************
* Copyright (C)RFLOGIX since 2010.08.24 (rflogix@rflogix.com)
************************************************************************************
* ● 프로젝트 : 크로닉앱
* ○ 파일     : common.css
* ○ 생성     : 2014.11.11(화요일)
* ○ 최종변경 : 2015.06.08(금요일)
***********************************************************************************/




/***********************************************************************************
* 기본 관련
***********************************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

/* 텍스트컬러 #292F36 / 메인컬러 #79d2de / 배경컬러 #F7FFF7 / 등록보류컬러 #FF6B6B / 에러컬러 #FFE66D */
html {width:100%; height:100%; overflow:hidden; font-size:15px; color:#292F36; font-family:'Noto Sans KR', sans-serif;}
body {width:100%; height:100%; overflow:hidden; position:relative; font-size:15px; color:#292F36; font-family:'Noto Sans KR', sans-serif;}
body, iframe, div, form, img, select, input, textarea, button {border:0px; margin:0px; padding:0px; outline-style:none;}
* {-webkit-user-select:none; 
/* -ms-touch-action:none; */ 
-webkit-overflow-scrolling:touch;}

div  {position:relative; background-repeat:no-repeat; background-size:contain; background-position:center;}
a:link, a:visited, a:active, a:hover {color:#292F36; text-decoration:none;}

img {width:100%; vertical-align:middle; background-repeat:no-repeat; background-size:contain; background-position:center;}
iframe {width:100%; height:100%;}
form {width:100%;}
button {background:transparent;}

select {vertical-align:middle; outline-style:none;}
textarea {resize:none; outline-style:none; -webkit-user-select: auto;}
input {outline-style:none; -webkit-user-select: auto;}

input[type='file'] {display:none;}
input::-webkit-input-placeholder {color:#ccc;}
input:-moz-placeholder {color:#ccc;}
textarea::-webkit-input-placeholder {color:#ccc;}
textarea:-moz-placeholder {color:#ccc;}
/*
::-webkit-scrollbar {-webkit-appearance: none;}
::-webkit-scrollbar:vertical {width:4px;}
::-webkit-scrollbar-thumb {background-color:rgba(0,0,0,0.4); border-radius:2px;}
*/

.width_100 {width:100%;}
.height_100 {height:100%;}

.flex-row {display:flex; flex-direction:row; align-items:center; justify-content:center;}
.flex-row-start {display:flex; flex-direction:row; align-items:center; justify-content:flex-start;}
.flex-row-end {display:flex; flex-direction:row; align-items:center; justify-content:flex-end;}
.flex-row-between {display:flex; flex-direction:row; align-items:center; justify-content:space-between;}
.flex-row-around {display:flex; flex-direction:row; align-items:center; justify-content:space-around;}


.flex-col {display:flex; flex-direction:column; align-items:center; justify-content:center;}
.flex-col-start {display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;}
.flex-col-end {display:flex; flex-direction:column; align-items:center; justify-content:flex-end;}
.flex-col-between {display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;}
.flex-col-around {display:flex; flex-direction:column; align-items:flex-start; justify-content:space-around;}


.button {width:100%; height:50px; font-size:20px; color:white; background:#c0c0c0; display:flex; flex-direction:row; align-items:center; justify-content:center; transition:background 0.3s;}
.button.active {color:white; background-color:#79d2de;}


/***********************************************************************************
* 스와이퍼
***********************************************************************************/

/*
.swiper-container {height:100%;}
.swiper-slide {overflow:hidden;}
.swiper-button-disabled {pointer-events:auto !important; opacity:0.1 !important;}
*/



/***********************************************************************************
* page_wrap 관련
***********************************************************************************/

.page_top {width:100%; flex:1; overflow:hidden; z-index:1;}

.page_wrap {width:100%; height:100%; opacity:0; z-index:-1; transition:opacity 0.3s, z-index 0s 0.3s; overflow:hidden; position:absolute; left:0; top:0;}
.page_wrap.active {opacity:1; z-index:1; transition:opacity 0.3s, z-index 0s;}

.page_wrap .page_content {width:100%; height:100%; z-index:1; overflow-y:auto; overflow-x:hidden;}
/*.page_wrap .page_content .content_wrap {width:calc(100% - 10px); height:calc(100% - 10px); padding:5px 5px; overflow-y:scroll; overflow-x:hidden; -webkit-overflow-scrolling: touch; z-index:1;}*/

.page_wrap .page_content .logo {width:100%; height:44px; text-align:center;}
.page_wrap .page_content .logo img {width:auto; height:34px; padding:5px 0 7px 0;}

.page_bot {width:100%; height:auto; box-shadow:0px 2px 10px 0 rgba(0, 0, 0, 0.4); z-index:2;}
.page_bot > img {z-index:1;}
.page_bot .btn_wrap {width:100%; height:100%; position:absolute; left:0; bottom:0; z-index:2;}
.page_bot .btn {width:20%; height:100%; float:left;}
.page_bot img.record {width:77.45%; left:11.27%; bottom:16%; position:absolute; background:url('../image/common/btn_record.png') no-repeat; background-size:contain;}


/***********************************************************************************
* popup_wrap 관련
***********************************************************************************/

.popup_wrap {width:100%; height:100%; top:0; left:0; position:fixed; overflow:hidden; background-color:white; opacity:0; z-index:-1; transition:opacity 0.3s, z-index 0s 0.3s; display:none; flex-direction:column; align-items:center; justify-content:flex-start;}
.popup_wrap.active {opacity:1; z-index:2; transition:opacity 0.3s, z-index 0s;}

.popup_top {width:100%; height:50px; background-color:#79d2de;}
.popup_top .title {width:100%; height:100%; font-size:20px; color:#444445; letter-spacing:1px; display:flex; flex-direction:row; align-items:center; justify-content:center; left:0; top:0; z-index:1;}
.popup_top .btn_close {width:7.5%; height:100%; padding:0 6.4%; color:#2f2f2f; background-image:url('../image/common/ico_close.png'); background-size:24px 24px; position:absolute; right:0; top:0; z-index:2;}


.popup_content {width:100%; height:calc(100% - 50px); overflow-y:auto; overflow-x:hidden;}

.popup_wrap .input {width:85%; height:30px; margin:18px auto 0 auto; display:flex; flex-direction:row; align-items:center; justify-content:flex-start;}
.popup_wrap .input .title {width:30%;}
.popup_wrap .input input {width:70%; height:100%; font-size:20px; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; background-image:linear-gradient(0deg,#cacaca 1px,hsla(0,0%,82%,0) 0); transition:background 0.2s;}
.popup_wrap .input.focus input {background-image:linear-gradient(0deg,#79D2DE 1.5px,rgba(156,39,176,0) 0); background-size:100% 100%,100% 100%;}

.popup_wrap .input.Sex .container {display: block; position: relative; padding-left: 35px; cursor: pointer; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.popup_wrap .input.Sex .container input {position: absolute; opacity: 0; cursor: pointer;}
.popup_wrap .input.Sex .checkmark {position: absolute; top: 4px; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%;}
.popup_wrap .input.Sex .container:hover input ~ .checkmark {background-color: #ccc;}
.popup_wrap .input.Sex .container input:checked ~ .checkmark {background-color: #30c4c3;}
.popup_wrap .input.Sex .checkmark:after {content: ""; position: absolute; display: none;}
.popup_wrap .input.Sex .container input:checked ~ .checkmark:after {display: block;}
.popup_wrap .input.Sex .container .checkmark:after {top: 9px;left: 9px;width: 8px;height: 8px;border-radius: 50%;background: white;}


/*
.popup_content .input {width:calc(100% - 48px); height:40px; margin:5px 24px 0 24px; padding-bottom:6px; display:flex; flex-direction:row; align-items:center; justify-content:flex-start;
background-image:linear-gradient(0deg,#cacaca 1px,hsla(0,0%,82%,0) 0);
}
.popup_content .input.focus {background-image:linear-gradient(0deg,#79d2de 2px,rgba(156,39,176,0) 0)}
.popup_content .input:first-child {margin-top:13px;}
.popup_content .input .title {width:120px; color:#2f2f2f; font-size:16px; font-weight:bold; letter-spacing:1px;}
.popup_content .input input {width:calc(100% - 120px); height:100%; color:#333333; font-size:16px; text-align:left;}
*/




/***********************************************************************************
* 로그인 팝업 관련
***********************************************************************************/

.popup_main {background-color:#009ecd; background-image:url(../image/login/bg_login.png); background-size:100% auto; background-position:top center; z-index:2;}
.popup_main .btn_wrap {width:100%; height:auto; left:0; bottom:0; position:absolute; overflow:hidden;}
.popup_main .btn_join {width:calc(100% - 40px); height:60px; margin:0 20px; border-radius:8px; background:white; color:#17b3b2; font-size:18px; letter-spacing:2px; text-align:center;}
.popup_main .btn_login {width:100%; margin:10px 0 20px 0; padding:10px 0 10px 0; overflow:hidden; color:white; font-size:15px; letter-spacing:1px; text-align:center;}
.popup_main .btn_idpw 
.popup_main .btn_email {width:50%; margin:10px 0 20px 0; padding:10px 0 10px 0; overflow:hidden; color:white; font-size:15px; letter-spacing:1px; text-align:center;}
/*background-color:#009ecd; background-image:url(../image/login/bg_login.png); background-size:100% auto; background-position:top center;*/
.popup_login {width:100%; height:100%; position:fixed; overflow:hidden; z-index:-1;}
.popup_login.active {z-index:3;}

.popup_login .btn_login {
	width:85%; height:50px; margin:40px auto 0 auto;
	font-size:20px; color:white;
	border-radius:24px; background-color:#79d1dd; transition:background 0.2s;
}
.popup_login .btn_login.active {background-color:#79d2de;}
/*.popup_login .user_id {top:17.8%; left:0; position:absolute;}
.popup_login .user_pw {top:24.6%; left:0; position:absolute;}*/
.popup_login .btn_join {padding:20px 7.5% 20px 20px; font-size:17px; color:#999; letter-spacing:1px;}
/*
top:0; right:10%; position:absolute; 

.popup_login .btn_join {top:41.5%; left:18.4%; position:absolute; width:14%; height:2.5%;}
.popup_login .btn_id {top:41.5%; left:37.4%; position:absolute; width:18%; height:2.5%;}
.popup_login .btn_idpw {top:41.5%; left:60%; position:absolute; width:22%; height:2.5%;}
*/




/***********************************************************************************
* 로그아웃 팝업 관련
***********************************************************************************/

.popup_logout {justify-content:center; background-color:rgba(0,0,0,0.7);}
.popup_logout.active {z-index:2;}
.popup_logout .popup_content {width:70%; height:auto; flex:none; background-color:white; border-radius:5px; z-index:1; display:flex; display:-webkit-flex; flex-direction:column; align-items:center; justify-content:center;}
.popup_logout .popup_content input[name='UserPW_Origin'] {width:calc(80% - 2px); padding:15px 0 13px 0; margin-top:20px; text-align:center; font-size:20px; color:#292F36; border:1px solid #ddd; border-radius:3px;}
.popup_logout .btn_logout {width:80%; height:45px; margin:10px 0 20px 0; color:white; font-size:15px; letter-spacing:1px; text-align:center;}
.popup_logout .close_bg {width:100%; height:100%; left:0; top:0; position:absolute; z-index:0;}




/***********************************************************************************
* 회원가입 팝업 관련
***********************************************************************************/

.popup_join.active {z-index:3;}

.popup_join .popup_content {overflow:hidden;}
.popup_join .step_num {width:73px; height:10px; margin:32px 24px 0 24px;background-image:linear-gradient(180deg, rgba(0,0,0,0) calc(50% - 1px), #30c4c3 calc(50%), rgba(0,0,0,0) calc(50% + 1px)), linear-gradient(180deg, rgba(0,0,0,0) calc(50% - 1px), #d2d2d2 calc(50%), rgba(0,0,0,0) calc(50% + 1px)); background-size:0, 100%; background-position-x:0, 100%;}
.popup_join .step_num.step2 {background-size:50%, 50%;}/*{background-size:33.33%, 66.66%;}*/
.popup_join .step_num.step3 {background-size:100%, 0;}/*{background-size:66.66%, 33.33%;}*/
.popup_join .step_num.step4 {background-size:100%, 0;}
.popup_join .step_num > div {width:10px; height:10px; border-radius:50%; background-color:#d2d2d2;}
.popup_join .step_num > div.active {background-color:#30c4c3;}

.popup_join .step_wrap {width:100%; height:calc(100% - 32px - 10px - 23px - 50px); margin-top:23px; overflow-y:auto; overflow-x:hidden; display:none;}
.popup_join .step_wrap.active {display:block;}
.popup_join .step_wrap .notice {width:calc(100% - 48px); line-height:38px; font-size:30px; margin:0 24px;}
.popup_join .step_wrap.step1 .check_wrap {width:calc(100% - 48px); height:57px; margin:0 24px;}
.popup_join .step_wrap.step1 .check_wrap .checkbox {width:18px; height:18px; margin-right:9px; border:1px solid #979797; border-radius:4px;}
.popup_join .step_wrap.step1 .check_wrap.active .checkbox {background:#79d2de; border:1px solid #79d2de;}
.popup_join .step_wrap.step1 .check_wrap .checkbox i {font-size:12px; color:white;}
.popup_join .step_wrap.step1 .check_wrap .label {padding:15px 0; flex:1; font-size:17px; color:#2f2f2f; letter-spacing:1px;}
.popup_join .step_wrap.step1 .check_wrap .btn_show {width:66px; height:28px; line-height:28px; font-size:13px; color:#79d2de; border:1px solid #79d2de; border-radius:15px; background:white;}
.popup_join .step_wrap.step1 .check_wrap:last-child {margin-top:17px; border-top:1px solid #dfdfdf;}
.popup_join .step_wrap.step1 .check_wrap:last-child .label {font-weight:bold;}

.popup_join .step_wrap.step2 .input.Sex .container {display: block; position: relative; padding-left: 35px; cursor: pointer; font-size: 20px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.popup_join .step_wrap.step2 .input.Sex .container input {position: absolute; opacity: 0; cursor: pointer;}
.popup_join .step_wrap.step2 .input.Sex .checkmark {position: absolute; top: 4px; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%;}
.popup_join .step_wrap.step2 .input.Sex .container:hover input ~ .checkmark {background-color: #ccc;}
.popup_join .step_wrap.step2 .input.Sex .container input:checked ~ .checkmark {background-color: #30c4c3;}
.popup_join .step_wrap.step2 .input.Sex .checkmark:after {content: ""; position: absolute; display: none;}
.popup_join .step_wrap.step2 .input.Sex .container input:checked ~ .checkmark:after {display: block;}
.popup_join .step_wrap.step2 .input.Sex .container .checkmark:after {top: 9px;left: 9px;width: 8px;height: 8px;border-radius: 50%;background: white;}

.popup_join .step_wrap.step2 .input.Weight {margin-bottom:100px;}
.popup_join .input .title {width:29%;}
.popup_join .input input {width:58.2%;}

/*
.popup_join .step_wrap.step3 .license_wrap {width:calc(100% - 48px); margin:16px 24px 0 24px; padding-bottom:50px;}
.popup_join .step_wrap.step3 .license_wrap .title {width:107px; color:#2f2f2f; font-size:16px; font-weight:bold; letter-spacing:1px;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload {width:calc(100% - 2px); height:55px; margin-top:8px; border:1px solid #979797; border-radius:8px;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload .btn_file {width:100%; height:20px; padding:18px 0 17px 0; font-size:17px; color:#4a4a4a; text-align:center;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload .btn_later {height:20px; padding:18px 0 17px 15px; font-size:15px; position:absolute; right:0; bottom:-55px;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload .btn_later.check_wrap .checkbox {width:18px; height:18px; margin-right:9px; border:1px solid #979797; border-radius:4px;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload .btn_later.check_wrap.active .checkbox {background:#79d2de; border:1px solid #79d2de;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload .btn_later.check_wrap .checkbox i {font-size:12px; color:white;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload .btn_later.check_wrap .label {font-size:17px; color:#2f2f2f; letter-spacing:1px;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload .btn_file_name {height:20px; padding:18px 15px 17px 15px; flex:1; font-size:16px; color:#888888; display:none;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload .btn_file_reupload {height:20px; padding:18px 15px 17px 15px; font-size:16px; color:#00b6d5; display:none;}

.popup_join .step_wrap.step3 .license_wrap .btn_upload.upload {background:#f6f8fa; border:1px solid #f6f8fa;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload.upload .btn_file {display:none;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload.upload .btn_later {display:none;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload.upload .btn_file_name {display:inline-block;}
.popup_join .step_wrap.step3 .license_wrap .btn_upload.upload .btn_file_reupload {display:inline-block;}
*/
.popup_join .step_wrap.step3 .radio_wrap {width:calc(100% - 48px); height:47px; margin:10px 24px 0 24px; justify-content:flex-start;}
.popup_join .step_wrap.step3 .radio_wrap .radio {width:18px; height:18px; margin-right:9px; border:1px solid #979797; border-radius:4px;}
.popup_join .step_wrap.step3 .radio_wrap.active .radio {background:#79d2de; border:1px solid #79d2de;}
.popup_join .step_wrap.step3 .radio_wrap .radio i {font-size:12px; color:white;}
.popup_join .step_wrap.step3 .radio_wrap .label {padding:10px 0; flex:1; font-size:17px; color:#2f2f2f; letter-spacing:1px;}
.popup_join .step_wrap.step3 .radio_wrap:last-child .label {flex:none;}
.popup_join .step_wrap.step3 .radio_wrap input.etc {flex:1; opacity:0; font-size:15px;}
.popup_join .step_wrap.step3 .radio_wrap.active input.etc {opacity:1;}

.popup_join .btn_next {letter-spacing:2px;}




/***********************************************************************************
* 회원탈퇴 팝업 관련
***********************************************************************************/

.popup_user_delete.active {z-index:2;}

.popup_user_delete .popup_content {overflow:hidden;}
.popup_user_delete .step_num {width:41px; height:10px; margin:32px 24px 0 24px;background-image:linear-gradient(180deg, rgba(0,0,0,0) calc(50% - 1px), #30c4c3 calc(50%), rgba(0,0,0,0) calc(50% + 1px)), linear-gradient(180deg, rgba(0,0,0,0) calc(50% - 1px), #d2d2d2 calc(50%), rgba(0,0,0,0) calc(50% + 1px)); background-size:0, 100%; background-position-x:0, 100%;}
.popup_user_delete .step_num.step2 {background-size:100%, 0;}
.popup_user_delete .step_num > div {width:10px; height:10px; border-radius:50%; background-color:#d2d2d2;}
.popup_user_delete .step_num > div.active {background-color:#30c4c3;}

.popup_user_delete .step_wrap {width:100%; height:calc(100% - 32px - 10px - 23px - 60px); margin-top:23px; overflow-y:auto; overflow-x:hidden; display:none;}
.popup_user_delete .step_wrap.active {display:block;}
.popup_user_delete .step_wrap .notice {width:calc(100% - 48px); line-height:38px; font-size:30px; margin:0 24px;}

.popup_user_delete .step_wrap.step2 .radio_wrap {width:calc(100% - 48px); height:47px; margin:10px 24px 0 24px; justify-content:flex-start;}
.popup_user_delete .step_wrap.step2 .radio_wrap .radio {width:18px; height:18px; margin-right:9px; border:1px solid #979797; border-radius:4px;}
.popup_user_delete .step_wrap.step2 .radio_wrap.active .radio {background:#79d2de; border:1px solid #79d2de;}
.popup_user_delete .step_wrap.step2 .radio_wrap .radio i {font-size:12px; color:white;}
.popup_user_delete .step_wrap.step2 .radio_wrap .label {padding:10px 0; flex:1; font-size:17px; color:#2f2f2f; letter-spacing:1px;}
.popup_user_delete .step_wrap.step2 .radio_wrap:last-child .label {flex:none;}
.popup_user_delete .step_wrap.step2 .radio_wrap input.etc {flex:1; opacity:0; font-size:15px;}
.popup_user_delete .step_wrap.step2 .radio_wrap.active input.etc {opacity:1;}

.popup_user_delete .btn_next {letter-spacing:2px;}






.content_wrap > .btn_wrap {
    width: 100%;
    height: 68px;
}
.btn_wrap .btn_close {
    height: 100%;
    font-size: 18px;
    color: white;
    background-color: #444445;
}
.content_wrap .btn_close.top {
    width: auto;
    height: 55px;
    padding: 0 30px;
    right: 0;
    top: 0;
    position: absolute;
    color: #333340;
    font-size: 30px;
} 









/***********************************************************************************
* 공통 팝업 관련
***********************************************************************************/
/* popup_policy */
.popup_policy_usage {background:rgba(0,0,0,0.7);}
.popup_policy_usage.active {z-index:3;}
.popup_policy_usage .popup_content iframe {width:calc(100% - 60px); height:calc(100% - 110px); padding:10px; margin:20px; position:absolute; background:white; border-radius:5px;}
.popup_policy_usage .popup_content .btn_close {width:calc(100% - 40px); height:20px; left:20px; bottom:20px; position:absolute; padding:10px 0; border-radius:5px; font-size:15px; color:white; background-color:#79d2de;}

.popup_policy_privacy {background:rgba(0,0,0,0.7);}
.popup_policy_privacy.active {z-index:3;}
.popup_policy_privacy .popup_content iframe {width:calc(100% - 60px); height:calc(100% - 110px); padding:10px; margin:20px; position:absolute; background:white; border-radius:5px;}
.popup_policy_privacy .popup_content .btn_close {width:calc(100% - 40px); height:20px; left:20px; bottom:20px; position:absolute; padding:10px 0; border-radius:5px; font-size:15px; color:white; background-color:#79d2de;}

/* popup_select_img */
.popup_select_img {background:rgba(0,0,0,0.4);}
.popup_select_img.active {z-index:3;}
.popup_select_img .btn_wrap {width:calc(100% - 20px); margin:10px; border-radius:13px; overflow:hidden; position:absolute; bottom:67px; left:0;}
.popup_select_img .btn_wrap div {width:100%; height:57px; font-size:20px; color:#007aff; letter-spacing:1px; background:rgba(252, 252, 252, 0.8);}
.popup_select_img .btn_wrap .btn_album {border-top:1px solid #ccc;}
.popup_select_img .btn_close {width:calc(100% - 20px); height:57px; font-size:20px; color:#007aff; letter-spacing:1px; margin:10px; background:white; border-radius:13px; position:absolute; bottom:0; left:0;}

/* popup_image_upload */
.popup_image_upload .popup_top {height:56px; background:#2f2f2f; border-bottom:0; justify-content:flex-end;}
.popup_image_upload .popup_top .btn_upload {height:24px; line-height:24px; padding:16px 18px; color:#00cea7; font-size:18px; display:flex; flex-direction:row; align-items:center; justify-content:flex-end;}

.popup_image_upload .img_show_wrap {width:100%; height:calc(100% - 104px - 91px);}
.popup_image_upload .img_show_wrap .img_show {width:100%; height:100%; background-color:#e6f1ee; background-size:contain; overflow:hidden; transition:background-image 0.3s;}

.popup_image_upload .img_list_wrap {width:100%; height:104px; overflow:hidden; background:#2f2f2f;}

.popup_image_upload .img_list_wrap .swiper-slide {width:auto; height:104px;}
.popup_image_upload .img_list_wrap .swiper-slide:first-child .img_list {margin-left:10px;}
.popup_image_upload .img_list_wrap .swiper-slide:last-child .img_list {margin-right:10px;}

.popup_image_upload .img_list_wrap .img_list {width:88px; height:88px; margin:8px 4px 8px 4px; box-shadow:0 0 0 2px #555555 inset; z-index:1; transition:box-shadow 0.3s, opacity 0.3s; opacity:0.4;}
.popup_image_upload .img_list_wrap .img_list.active {box-shadow:0 0 0 2px #0dc4b8 inset;}
.popup_image_upload .img_list_wrap .swiper-slide-thumb-active .img_list {box-shadow:0 0 0 2px #0dc4b8 inset; opacity:1;}

.popup_image_upload .img_list_wrap .btn_check {width:34px; height:34px; position:absolute; right:8px; top:8px; z-index:2;}
.popup_image_upload .img_list_wrap .btn_check:after {width:18px; height:18px; box-shadow:0 0 0 2px #555555 inset; border-radius:50%; background-color:rgba(0,0,0,0.31); background-image:url(../image/common/bg_1x1.png); background-size:contain; position:absolute; right:8px; top:8px; z-index:1; content:""; transition:background-image 0.3s;}
.popup_image_upload .img_list_wrap .btn_check.active:after {box-shadow:0 0 0 0; background-image:url(../image/common/ico_img_check.png);}

.popup_image_upload .btn_wrap {width:100%; height:91px; overflow:hidden; background:#2f2f2f;}
.popup_image_upload .btn_wrap > div {float:left;}
.popup_image_upload .btn_wrap .btn_close {width:calc(50% - 32px); height:91px; line-height:91px; font-size:18px; color:#999; text-align:center; z-index:1;}
.popup_image_upload .btn_wrap .btn_camera {width:52px; height:52px; box-shadow:0 0 0 2px #f5f5f5 inset; margin:20px 6px 19px 6px; background:#2f2f2f; border-radius:50%; z-index:1;}
.popup_image_upload .btn_wrap .btn_camera:after {width:40px; height:40px; border-radius:20px; background:#f5f5f5; position:absolute; left:6px; top:6px; content:""; z-index:2;}
.popup_image_upload .btn_wrap .btn_camera i {color:#2f2f2f; font-size:20px; z-index:3;}
.popup_image_upload .btn_wrap .btn_album {width:calc(50% - 32px); height:91px; line-height:91px; font-size:18px; color:#999; text-align:center; z-index:1;}
.popup_image_upload .btn_wrap .alert {width:calc(100% - 32px); height:calc(100% - 44px); left:0; bottom:0; position:absolute; padding:22px 16px; line-height:22px; color:white; font-size:15px; background:#bf1b56; overflow:hidden; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; z-index:-1; opacity:0; transition:opacity 0.3s, z-index 0.3s 0s;}
.popup_image_upload .btn_wrap .alert.active {z-index:3; opacity:1; transition:opacity 0.3s, z-index 0s;}

/* popup_loading */
.popup_loading {background-color:rgba(0,0,0,0.7); align-items:center; justify-content:center;}
.popup_loading.active {z-index:80;}
.popup_loading #loader {
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 20px);
}
@keyframes loader {
	0% { left: -100px }
	100% { left: 110%; }
}
.popup_loading #box {
	width: 50px;
	height: 50px;
	background: white;
	animation: animate .5s linear infinite;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 3px;
}
@keyframes animate {
	17% { border-bottom-right-radius: 3px; }
	25% { transform: translateY(9px) rotate(22.5deg); }
	50% {
		transform: translateY(18px) scale(1,.9) rotate(45deg) ;
		border-bottom-right-radius: 40px;
	}
	75% { transform: translateY(9px) rotate(67.5deg); }
	100% { transform: translateY(0) rotate(90deg); }
} 
.popup_loading #shadow { 
	width: 50px;
	height: 5px;
	background: #000;
	opacity: 0.1;
	position: absolute;
	top: 59px;
	left: 0;
	border-radius: 50%;
	animation: shadow .5s linear infinite;
}
@keyframes shadow {
	50% {
		transform: scale(1.2,1);
	}
}
.popup_loading .loading_text {padding-top:100px; font-size:18px; line-height:24px; letter-spacing:2px; color:white; text-align:center; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:center;}

/* popup_alert */
.popup_alert {background-color:rgba(0,0,0,0.7); align-items:center; justify-content:center;}
.popup_alert.active {z-index:92;}
.popup_alert .content_wrap {width:80%; max-height:80%; background-color:white; border-radius:5px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.popup_alert .content_wrap .content	{width:calc(100% - 40px); padding:20px 20px 0 20px; overflow-x:hidden; overflow-y:auto; flex:1; font-size:15px; line-height:25px; color:#404040; text-align:left; word-break:break-all;}
.popup_alert .content_wrap .content img {width:48px; height:48px; padding:20px calc(50% - 24px);}
.popup_alert .content_wrap .content b {font-size:17px; padding-bottom:5px; display:inline-block;}
.popup_alert .content_wrap .btn_close {width:100%; height:60px; line-height:60px; font-size:15px; font-weight:bold; color:#79d2de; text-align:center; word-break:keep-all; white-space:nowrap; letter-spacing:1px; overflow:hidden;}

/* popup_confirm */
.popup_confirm {background-color:rgba(0,0,0,0.7); align-items:center; justify-content:center;}
.popup_confirm.active {z-index:91;}
.popup_confirm .content_wrap {width:80%; max-height:80%; background-color:white; border-radius:5px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.popup_confirm .content_wrap .content	{width:calc(100% - 40px); padding:20px 20px 0 20px; overflow-x:hidden; overflow-y:auto; flex:1; font-size:15px; line-height:25px; color:#404040; text-align:left; word-break:break-all;}
.popup_confirm .content_wrap .content b {font-size:17px; padding-bottom:5px;}
.popup_confirm .content_wrap .btn_wrap {width:80%; overflow:hidden; display:flex; flex-direction:row;}
.popup_confirm .content_wrap .btn_wrap .btn_ok {width:50%; height:60px; line-height:60px; font-size:15px; font-weight:bold; color:#79d2de; text-align:center; word-break:keep-all; white-space:nowrap; letter-spacing:1px; overflow:hidden;}
.popup_confirm .content_wrap .btn_wrap .btn_close {width:50%; height:60px; line-height:60px; font-size:15px; font-weight:bold; color:#aaa; text-align:center; word-break:keep-all; white-space:nowrap; letter-spacing:1px; overflow:hidden; background-color:white!important; }


/* popup_pg */
.popup_pg.active {z-index:10;}































































/* 회원가입 후 튜터리얼 팝업 */
.popup_join_tutorial {height:100%; top:0; left:0; position:fixed; background-color:#79d2de; opacity:0; transition:opacity 0.3s; z-index:-1;
	display:flex; display:-webkit-flex; flex-direction:row; align-content:flex-start; justify-content:center;
}
.popup_join_tutorial.active {z-index:6;}
.popup_join_tutorial.show {opacity:1;}

.popup_join_tutorial .swiper-slide {align-items:flex-start;}
.popup_join_tutorial .btn_close		{width:80%; padding:20px 0; background-color:white; text-align:center; font-size:20px; letter-spacing:2px; color:#79d2de; border-radius:5px;}

/* 문제신고 */
.popup_error_mail {height:100%; top:0; left:0; position:fixed; background-color:rgba(0,0,0,0.7); opacity:0; transition:opacity 0.3s; z-index:-1;
	display:flex; flex-direction:row; align-items:center; justify-content:center;
}
.popup_error_mail.active {z-index:6;}
.popup_error_mail.show {opacity:1;}

.popup_error_mail .email_wrap {width:90%; height:70%; background-color:white; border-radius:5px; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.popup_error_mail .email_wrap input {width:calc(100% - 20px - 20px); margin-top:20px; padding:10px; font-size:20px; border:1px solid #eee; border-radius:5px;}
.popup_error_mail .email_wrap textarea {flex:1; width:calc(100% - 20px - 20px); margin-top:10px; padding:10px; font-size:20px; border:1px solid #eee; border-radius:5px;}
.popup_error_mail .email_wrap .btn_send {width:calc(100% - 20px); margin:20px 0; padding:20px 0; border-radius:5px; font-size:16px; background-color:#aaa; color:white; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:center; transition:color 0.3s, background 0.3s;}
.popup_error_mail .btn_close {width:auto; font-size:30px; color:white; padding:5px; right:0; top:0; position:absolute;}







/***********************************************************************************
* 회원탈퇴 팝업 관련
***********************************************************************************/

.popup_userdelete {	
	width:100%; height:100%; top:0; left:0; position:fixed; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling: touch;
	opacity:0; z-index:-1; background-color:rgba(0,0,0,0.7); transition:opacity 0.3s;
	display:none;
}
.popup_userdelete.active {z-index:6;
	display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:center;
}
.popup_userdelete.show {opacity:1;}

.popup_userdelete .delete_wrap {width:70%; background-color:white; border-radius:5px; z-index:1; display:flex; display:-webkit-flex; flex-direction:column; align-items:center; justify-content:center;}
.popup_userdelete .delete_wrap input[name='UserPW_Origin'] {width:calc(80% - 2px); padding:15px 0 13px 0; margin-top:20px; text-align:center; font-size:20px; color:#292F36; border:1px solid #ddd; border-radius:3px;}
.popup_userdelete .delete_wrap .btn_delete {width:80%; height:45px; margin:10px 0 20px 0; background-color:#79d2de; border-radius:3px; color:white; font-size:17px; letter-spacing:2px; font-weight:bold; display:flex; display:-webkit-flex; align-items:center; justify-content:center; cursor:pointer;}

.popup_userdelete .close_bg {height:100%; left:0; top:0; position:absolute; z-index:0;}



/***********************************************************************************
* 아이디/비밀번호 찾기 팝업 관련
***********************************************************************************/

.popup_idpw {height:100%; top:0; left:0; position:fixed; opacity:0; z-index:-1; background-color:white; transition:opacity 0.3s; display:flex; display:-webkit-flex; flex-direction:column; align-content:space-between;}
.popup_idpw.active {z-index:6;}
.popup_idpw.show {opacity:1;}
/*
.popup_idpw .popup_top {overflow:hidden; z-index:2;}
.popup_idpw .popup_top .btn_close	{width:12%; height:100%; top:0; left:0; position:absolute; cursor:pointer; display:flex; display:-webkit-flex; align-items:center; justify-content:center;}
.popup_idpw .popup_top .btn_close i {font-size:20px; color:#292F36;}
.popup_idpw .popup_top .title		{width:76%; height:100%; top:0; left:12%; position:absolute; color:#292F36; font-size:17px; letter-spacing:1px; display:flex; display:-webkit-flex; align-items:center; justify-content:center;}
*/
.popup_idpw .popup_content {flex:1; -webkit-flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling: touch;}
.popup_idpw .popup_content input[name='MAIL_RECEIVE_EMAIL'] {width:calc(80% - 2px); padding:15px 0 13px 0; margin:20px 10% 0 10%; text-align:center; font-size:20px; color:#292F36; border:1px solid #ddd; border-radius:3px;}
.popup_idpw .popup_content .btn_find {width:80%; height:50px; overflow:hiddlen; white-space:nowrap; margin:10px 10% 20px 10%; background-color:#79d2de; border-radius:3px; color:white; font-size: 15px; letter-spacing: 1px; font-weight:bold; cursor:pointer;}


.popup_id {height:100%; top:0; left:0; position:fixed; opacity:0; z-index:-1; background-color:white; transition:opacity 0.3s; display:flex; display:-webkit-flex; flex-direction:column; align-content:space-between;}
.popup_id.active {z-index:6;}
.popup_id.show {opacity:1;}
/*
.popup_id .popup_top {overflow:hidden; z-index:2;}
.popup_id .popup_top .btn_close	{width:12%; height:100%; top:0; left:0; position:absolute; cursor:pointer; display:flex; display:-webkit-flex; align-items:center; justify-content:center;}
.popup_id .popup_top .btn_close i {font-size:20px; color:#292F36;}
.popup_id .popup_top .title		{width:76%; height:100%; top:0; left:12%; position:absolute; color:#292F36; font-size:17px; letter-spacing:1px; display:flex; display:-webkit-flex; align-items:center; justify-content:center;}
*/
.popup_id .popup_content {flex:1; -webkit-flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling: touch;}
.popup_id .popup_content input[name='CellPhoneNO'] {width:calc(80% - 2px); padding:15px 0 13px 0; margin:20px 10% 0 10%; text-align:center; font-size:20px; color:#292F36; border:1px solid #ddd; border-radius:3px;}
.popup_id .popup_content .btn_find {width:80%; height:50px; overflow:hiddlen; white-space:nowrap;  margin:10px 10% 20px 10%; background-color:#79d2de; border-radius:3px; color:white; font-size:15px; letter-spacing:1px; font-weight:bold; cursor:pointer;}


.popup_change_pw .popup_content .btn_find {width:80%; height:50px; overflow:hiddlen; white-space:nowrap; margin:10px 10% 20px 10%; background-color:#79d2de; border-radius:3px; color:white; font-size: 15px; letter-spacing: 1px; font-weight:bold; cursor:pointer;}


.popup_inquiry {height:100%; top:0; left:0; position:fixed; opacity:0; z-index:-1; background-color:white; transition:opacity 0.3s; display:flex; display:-webkit-flex; flex-direction:column; align-content:space-between;}
.popup_inquiry.active {z-index:6;}
.popup_inquiry.show {opacity:1;}
.popup_inquiry .popup_content {flex:1; -webkit-flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling: touch;}
.popup_inquiry .popup_content input[name='MAIL_RECEIVE_EMAIL'] {width:calc(80% - 2px); padding:15px 0 13px 0; margin:20px 10% 0 10%; text-align:center; font-size:20px; color:#292F36; border:1px solid #ddd; border-radius:3px;}
.popup_inquiry .popup_content .btn_find {width:80%; height:50px; overflow:hiddlen; white-space:nowrap; margin:10px 10% 20px 10%; background-color:#79d2de; border-radius:3px; color:white; font-size: 15px; letter-spacing: 1px; font-weight:bold; cursor:pointer;}

.contact_form 	{width:60%; margin:0 auto;}
.tr_line { margin:10px;}

.title_line .title{
	font-weight: 600;
	width: 40%;
	font-size: 20px;
}
.title_line .title_description{
	width: 60%;
	display:flex;
	font-size: 15px;
	color: #999999;
	justify-content:flex-start;
	align-items:center;
}

.contact_form table {width:100%;}
.contact_form table tr>td {width:50%; padding-left:20px;}
.contact_form table tr>td:first-child {width:25%; height:70px; line-height:70px; }
.contact_form .msgContent {height:50px;}
.contact_form table caption {text-align:left; font-size:14px; font-weight:bold;}
.contact_form table input {padding:10px; width:80%;}
.contact_form textarea {margin-top:10px; font-size:17px;}
.contact_form .input_border {height:50px; line-height:50px;  border:1px solid #bdbdbd; border-radius:10px;}
.contact_form .input_border input{
	font-size:17px;
}
.contact_form .btnArea 	{width:100%; height:10%; padding-top:7%; clear:both;}
.contact_form .btnArea .btnQuery	{width:261px; margin:0 auto; cursor:pointer;}

.title_line {
	margin-bottom:10px;
}

@media screen and (max-width: 630px) { 
	
	.top_menu_wrap .main_menu>a {font-size:12px;}
	
	.contact_form 	{width:100%;}
}

@media screen and (max-width: 405px) { 
	.top_menu_wrap {width:75%;}
	.top_menu_wrap .main_menu>a {font-size:12px;}
	
	.contact_form 	{width:100%; font-size:12px;}
	.contact_form table tr>td {padding:0;}
	.contact_form table tr>td:first-child {width:20%; padding-left:5%;}
	
	.page_footer .f_rule, .f_info1, .f_info2 {display:none;}
	.page_footer .footer_wrap .f_copyright  {width:90%; height:18px; left:0; right:0; margin:0 auto;}
}

/***********************************************************************************
* 회원업데이트 팝업 관련
***********************************************************************************/

.popup_user_update {height:100%; top:0; left:0; position:fixed; background-color:white; opacity:0; transition:opacity 0.3s; z-index:-1;
	display:flex; display:-webkit-flex; flex-direction:column; align-content:space-between;
}
.popup_user_update.active {z-index:10;}
.popup_user_update.show {opacity:1;}

.popup_user_update .popup_top {overflow:hidden; z-index:2; box-shadow:0px -1px 10px 0 rgba(50, 50, 50, 0.2);}
.popup_user_update .popup_top .btn_close	{width:12%; height:100%; top:0; left:0; position:absolute; cursor:pointer; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:center;}
.popup_user_update .popup_top .btn_close i {font-size:20px; color:#79d2de;}
.popup_user_update .popup_top .title		{width:76%; height:100%; top:0; left:12%; position:absolute; color:#292F36; font-size:17px; letter-spacing:1px; display:flex; display:-webkit-flex; align-items:center; justify-content:center;}
.popup_user_update .popup_top .btn_update	{width:auto; height:100%; top:0; right:0; position:absolute; padding:0 10px; color:#79d2de; font-size:17px; letter-spacing:2px; cursor:pointer; display:flex; display:-webkit-flex; align-items:center; justify-content:center;}

.popup_user_update .popup_content {flex:1; -webkit-flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling: touch; background-color:#DEF5F4;}
.popup_user_update .popup_content .step_wrap {margin-top:20px; display:none; flex-direction:column;}
.popup_user_update .popup_content .step_wrap.active {display:flex; display:-webkit-flex;}
.popup_user_update .popup_content .step_wrap.show {opacity:1;}

.popup_user_update .popup_content .input_wrap {width:calc(100% - 40px); height:45px; padding:0 20px; margin-top:5px; background-color:white; border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:center;}
.popup_user_update .popup_content .input_wrap .title {width:35%; padding:0 20px; font-size:15px;}
.popup_user_update .popup_content .input_wrap .content {height:100%; flex:1; -webkit-flex:1;}
.popup_user_update .popup_content .input_wrap .content input {width:100%; height:100%; font-size:15px;}

.popup_user_update .popup_content .info_text {margin-top:40px; color:#bbb; font-size:15px; letter-spacing:1px; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:center;}

.popup_user_update .popup_content .checkbox_wrap {width:90%; margin-left:5%; margin-top:20px; overflow:hidden;}
.popup_user_update .popup_content .checkbox_wrap .title {font-size:16px; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:center;}
.popup_user_update .popup_content .checkbox_wrap .content {width:calc(100% - 2px); height:45px; margin-top:20px; border:1px solid #666; border-radius:5px; background-color:white; flex:1; -webkit-flex:1; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:center;}
.popup_user_update .popup_content .checkbox_wrap .content.company_license {height:90px;}
.popup_user_update .popup_content .checkbox_wrap .content .title_wrap {width:55%; height:100%; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:flex-start;}
.popup_user_update .popup_content .checkbox_wrap .content .title_wrap .checkbox {width:auto; height:100%; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:flex-start;}
.popup_user_update .popup_content .checkbox_wrap .content .title_wrap .checkbox i {display:none; font-size:30px; padding:0 10px 0 15px; color:#79d2de;}
.popup_user_update .popup_content .checkbox_wrap .content .title_wrap .checkbox i.active {display:inline-block;}
.popup_user_update .popup_content .checkbox_wrap .content .title_wrap .checkbox i.uncheck {color:#eee;}
.popup_user_update .popup_content .checkbox_wrap .content .title_wrap .checkbox_label {flex:1; -webkit-flex:1; height:100%; color:#444; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:flex-start;}
.popup_user_update .popup_content .checkbox_wrap .content .btn_wrap {width:45%; height:100%; border-radius:0 5px 5px 0; display:flex; display:-webkit-flex; flex-direction:column; align-items:center; justify-content:center;}
.popup_user_update .popup_content .checkbox_wrap .content .btn_wrap .btn_camera {height:45px; background-color:#666; color:white; border-radius:0 5px 0 0; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:center;}
.popup_user_update .popup_content .checkbox_wrap .content .btn_wrap .btn_album {height:44px; border-top:1px solid #eee; background-color:#666; color:white; border-radius:0 0 5px 0; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:center;}




/***********************************************************************************
* 환경설정 팝업 관련
***********************************************************************************/

.popup_setting {/*height:100%; top:0; left:100%; position:fixed; background-color:white; opacity:1; transform:translateX(0); transition:opacity 0.3s, transform 0.3s; z-index:-1;
	display:flex; display:-webkit-flex; flex-direction:column; align-content:space-between;*/
	height:100%; top:0; left:0; position:fixed; background-color:white; opacity:0; transition:opacity 0.3s; z-index:-1; display:none; display:-webkit-flex; flex-direction:column; align-content:space-between;
}
.popup_setting.active {z-index:5; display:flex;}
.popup_setting.show {opacity:1; /*transform:translateX(-100%);*/}

.popup_setting .popup_top {overflow:hidden; z-index:2; box-shadow:0px -1px 10px 0 rgba(50, 50, 50, 0.2);}
.popup_setting .popup_top .btn_close	{width:12%; height:100%; top:0; left:0; position:absolute; cursor:pointer; display:flex; display:-webkit-flex; align-items:center; justify-content:center;}
.popup_setting .popup_top .btn_close i {font-size:20px; color:#79d2de;}
.popup_setting .popup_top .title		{width:76%; height:100%; top:0; left:12%; position:absolute; color:#292F36; font-size:17px; letter-spacing:1px; display:flex; display:-webkit-flex; align-items:center; justify-content:center;}

.popup_setting .popup_content {flex:1; -webkit-flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling: touch; background-color:#DEF5F4;} /* #CEF1EE */

.popup_setting .popup_content .btn_wrap {padding:15px 0; border-bottom:1px solid #ddd; background-color:white; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:flex-start;}
.popup_setting .popup_content .btn_wrap .title {width:45%; padding-left:20px; font-size:15px; letter-spacing:1px; color:#292F36;}
.popup_setting .popup_content .btn_wrap.caption {background-color:#DEF5F4; padding:15px 0 10px 0;}
.popup_setting .popup_content .btn_wrap.caption .title {font-size:13px; color:#999;}
.popup_setting .popup_content .btn_wrap .content {padding-right:20px; flex:1; -webkit-flex:1; font-size:16px; letter-spacing:1px; color:#999; display:flex; display:-webkit-flex; flex-direction:row; align-items:center; justify-content:flex-end;}
.popup_setting .popup_content .btn_wrap .content div {width:auto;}
.popup_setting .popup_content .btn_wrap .content i {font-size:13px;}




/***********************************************************************************
* 공통 팝업 관련
***********************************************************************************/

/* popup
.popup_wrap {height:100%; top:0; left:0; position:fixed; background-color:rgba(0,0,0,0.7); opacity:0; transition:opacity 0.3s; box-shadow:0px 1px 10px 0 rgba(50, 50, 50, 0.3); z-index:-1;
	display:flex; display:-webkit-flex; flex-direction:column; align-content:space-between;
}
.popup_wrap.active {z-index:10;}
.popup_wrap.show {opacity:1;}

.popup_wrap .popup_top {width:calc(100% - 30px); margin:20px 15px 0 15px; background-color:white; border-radius:4px 4px 0 0; box-shadow:0px 1px 10px 0 rgba(50, 50, 50, 0.2); overflow:hidden; z-index:2;}
.popup_wrap .popup_top .btn_close	{width:12%; height:100%; top:0; right:0; position:absolute; cursor:pointer; display:flex; display:-webkit-flex; align-items:center; justify-content:center;}
.popup_wrap .popup_top .btn_close i {font-size:30px;}
.popup_wrap .popup_top .title		{width:76%; height:100%; top:0; left:12%; position:absolute; display:flex; display:-webkit-flex; align-items:center; justify-content:center; font-size:17px; letter-spacing:1px;}

.popup_wrap .popup_content	{width:calc(100% - 30px); margin:0 15px 20px 15px; background-color:white; border-radius:0 0 4px 4px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling: touch; z-index:1;
	flex:1; -webkit-flex:1;
}

.popup_wrap .popup_bot {width:calc(100% - 30px); margin:0px 15px 20px 15px; background-color:white; border-radius:0 0 4px 4px; box-shadow:0px -1px 10px 0 rgba(50, 50, 50, 0.2); overflow:hidden; z-index:2;}
*/



/* popup_upgrade */
.popup_upgrade {height:100%; top:0; left:0; position:fixed; background-color:white; z-index:-1;}
.popup_upgrade.active {z-index:10;}
.popup_upgrade.show {opacity:1;}
.popup_upgrade .content {top:60%; left:0; position:absolute; font-size:15px; line-height:25px; color:#aaa; text-align:center;}

/* popup_picture */
.popup_picture {width:100%; height:100%; top:0; left:0; position:fixed; z-index:-1; opacity:0; overflow:hidden; background-color:rgba(0,0,0,0.7); transition:opacity 0.3s;
	display:none;
}
.popup_picture.active {z-index:70; display:inline-block;}
.popup_picture.show {opacity:1;}
.popup_picture .close_bg {height:100%; position:absolute; z-index:1;}
.popup_picture .picture_wrap {z-index:2;}

.popup_picture .btn_camera	{width:86%; height:6.3%; top:40.5%; left:6.8%; position:absolute; cursor:pointer;}
.popup_picture .btn_album	{width:86%; height:6.3%; top:47.2%; left:6.8%; position:absolute; cursor:pointer;}
.popup_picture .btn_delete	{width:86%; height:6.3%; top:54%; left:6.8%; position:absolute; cursor:pointer;}

.popup_picture .close_left		{width:6%; height:100%; left:0; top:0; position:absolute;}
.popup_picture .close_right		{width:6%; height:100%; right:0; top:0; position:absolute;}
.popup_picture .close_top		{width:100%; height:39%; left:0; top:0; position:absolute;}
.popup_picture .close_bottom	{width:100%; height:39%; left:0; bottom:0; position:absolute;}

/* popup_url */
.popup_url {width:100%; height:100%; top:0; left:0; position:fixed; z-index:-1; opacity:0; overflow:hidden; background-color:white; transition:opacity 0.3s;
	display:flex; flex-direction:column; align-content:space-between;
}
.popup_url.active {z-index:70;}
.popup_url.show {opacity:1;}

.popup_url .popup_top {z-index:2; box-shadow:0px 1px 10px 0 rgba(50, 50, 50, 0.2);}
.popup_url .popup_top .title {width:76%; height:100%; top:0; left:12%; position:absolute; display:flex; flex-direction:row; align-items:center; justify-content:center; font-size:17px; letter-spacing:1px;}
.popup_url .popup_top .btn_close {width:12%; height:100%; top:0; left:0; position:absolute; color:#79d2de; font-size:17px; cursor:pointer; display:flex; flex-direction:row; align-items:center; justify-content:center;}

.popup_url .popup_content {z-index:1; flex:1; overflow:scroll !important; -webkit-overflow-scrolling:touch !important;}
.popup_url .popup_content iframe {height:100%; width:0; min-width:100%; max-width:100%; left:0; top:0; position:absolute; overflow:scroll !important; -webkit-overflow-scrolling:touch !important;}



/*
.popup_loading .loading {text-align: center;}
.popup_loading .loading > div {
	background-color: #fff;
	height: 15px;
	width: 15px;
	margin-left:3px;
	border-radius: 50%;
	display: inline-block;
	
	-webkit-animation: stretchdelay 0.7s infinite ease-in-out;
	animation: stretchdelay 0.7s infinite ease-in-out;
}
.popup_loading .loading .circ2 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.popup_loading .loading .circ3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.popup_loading .loading .circ4 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.popup_loading .loading .circ5 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
@-webkit-keyframes stretchdelay {
	0%, 40%, 100% { -webkit-transform: translateY(-10px) }
	20% { -webkit-transform: translateY(-20px) }
}
@keyframes stretchdelay {
	0%, 40%, 100% { transform: translateY(-10px); -webkit-transform: translateY(-10px); }
	20% { transform: translateY(-20px); -webkit-transform: translateY(-20px); }
}
*/