@charset "utf-8";
/* version 1.0 | 2020-08-19 */
/*------------------------------------------------
   Reset Override
------------------------------------------------*/
body { margin: 0; }
.cloud_frame { font-family: 'Apple Gothic', 'malgun gothic', 'sans-serif', 'Dotum', '돋움'; font-size: 14px; color: #303030; line-height: initial; letter-spacing: -1px;  }
.cloud_frame p { margin: 0; }


.box_sckeypad_wrap.bgNavy .inner_keypad_wrap{background:#000046;}
.box_sckeypad_wrap.bgNavy .inner_keypad_wrap .text_title{background:#000046;color:#fff}

/*==========================================================
   Common
==========================================================*/
/* Title */
.cloud_frame .title_pack { line-height: 29px; }
.cloud_frame .title_pack .order_title { text-align: center; font-size: 24px; font-weight: normal; color: #303030; }
.cloud_frame .title_pack .object_title { text-align: center; font-size: 16px; font-weight: normal; color: #303030; }
.cloud_frame .title_pack .object_title + .order_title { margin-top: 2px; }

/* Text */
.cloud_frame .text_msg_pack { text-align: center; font-size: 16px; font-weight: normal; color: #707070; }
.cloud_frame .text_error_pack { line-height: 1.3; text-align: center; font-size: 14px; font-weight: normal; color: #ed0000; }
.cloud_frame .text_error_pack p { line-height: 1.5; }
.cloud_frame .text_notice_pack { line-height: 21px; text-align: center; font-size: 16px; font-weight: normal; color: #707070; }
.cloud_frame .text_confirm_pack { position: relative; display: inline-block; padding: 0 0 0 11px; line-height: 1.3; font-size: 15px; font-weight: normal; color: #303030; }
.cloud_frame .text_confirm_pack:before { content: ''; position: absolute; top: 7px; left: 0; width: 4px; height: 4px; border-radius: 50%; vertical-align: middle; background: #c8c8c8; }

/*------------------------------------------------
   Buttons
------------------------------------------------*/
/* Default */
.cloud_frame .btn_pack { display: inline-block; padding: 0; border: none; box-sizing: border-box; -webkit-box-sizing: border-box; outline: none; font-size: 16px; appearance: none; -webkit-appearance: none; text-decoration: none; background: transparent; cursor: pointer; min-width: auto; outline: 0; }
.cloud_frame .btn_pack:disabled, .btn_pack.disabled { border: none !important; color: #dedede !important; background: #c8c8c8 !important; cursor: default; }

/* Define : text button  */
.cloud_frame .btn_pack.btn_text { line-height: 1.4; font-size: 14px; font-weight: normal; color: #303030; box-sizing: border-box; }
.cloud_frame .btn_pack.btn_text .text_underline { font-size: 14px; border-bottom:1px solid #303030; text-decoration: none; }

/*==========================================================
   클라우드프레임
==========================================================*/
.cloud_frame_wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
.cloud_frame_wrap:after { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6)}


/*------------------------------------------------
   레이아웃
------------------------------------------------*/
.cloud_frame { overflow: hidden; z-index: 1000; position: relative; width: 100%; height: 100%; top: 0; left: 0;  min-width: 320px; box-sizing: border-box; background: #ffffff; word-wrap: break-word; word-break: keep-all;  }
.cloud_frame.for_pc { position: absolute; }

/*==========================================================
   레이어컨텐츠 (얼럿, 팝업) 
==========================================================*/
/*------------------------------------------------
   레이어팝업
------------------------------------------------*/
/* 공통 */
.cloud_frame .cf_layer_pagepop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; }
.cloud_frame .cf_layer_pagepop { transition: 600ms cubic-bezier(0.16, 1, 0.3, 1); }

/* 공통 - 딤 */
.cloud_frame .cf_layer_pagepop:after { display: none; z-index: -1; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba( 0, 0, 0, 0); }
.cloud_frame .cf_layer_pagepop:after { transition: 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.cloud_frame .cf_layer_pagepop.active:after { background: rgba( 0, 0, 0, .3); }
.cloud_frame .cf_layer_pagepop.type_slide:after { display: block; }



/*------------------------------------------------
   페이지팝업
------------------------------------------------*/
.cloud_frame .lp_layout { overflow-y: auto; width: 100%; height: 100%; min-height: 660px;box-sizing: border-box; background: #ffffff; }
.cloud_frame .lp_layout { transition: 600ms cubic-bezier(0.16, 1, 0.3, 1); }

.cloud_frame .lp_layout .lp_header { z-index: 100; position: absolute; top: 0; left: 0; width: 100%; height: 55px; border-bottom: 1px solid transparent; box-sizing: border-box; text-align: center; background: #fff; }
.cloud_frame .lp_layout .lp_header .logo_area { display: inline-block; height: 100%; box-sizing: border-box; }
.cloud_frame .lp_layout .lp_header .logo_area:after { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.cloud_frame .lp_layout .lp_header .logo_area .logo_img { display: inline-block; transform: scale(1.205); vertical-align: middle; }
.cloud_frame .lp_layout .lp_header .btn_cf_totlmenu { position: absolute; top: 0; left: 0; }
.cloud_frame .lp_layout .lp_header .btn_cf_goback { position: absolute; top: 0; left: 0; }
.cloud_frame .lp_layout .lp_header .btn_cf_goback.for_pc { display: none; }
.cloud_frame .lp_layout .lp_header .btn_cf_exit { position: absolute; top: 0; right: 0; }
.cloud_frame .lp_layout .lp_container { position: relative; width: 100%; height: 100%; padding-top: 55px; box-sizing: border-box; }
.cloud_frame .lp_layout .lp_container .lp_contents { height: 100%; padding: 38px 30px 14px; box-sizing: border-box; }
.cloud_frame .lp_layout .lp_container .lp_bottom { position: absolute; left: 0; bottom: 0; width: 100%; padding: 18px 30px; box-sizing: border-box; }
.cloud_frame .lp_layout .title_area { padding-bottom: 30px; }



/*------------------------------------------------
   페이지팝업(슬라이딩)
------------------------------------------------*/
.cloud_frame .cf_layer_pagepop.type_slide .lp_layout { position: absolute; top: 100%; left: 0; width: 100%; height: calc(100% - 44px); border-radius: 20px 20px 0 0; background: #ffffff; }



/*------------------------------------------------
   레이어컨텐츠 - 팝업모션
------------------------------------------------*/
/* 페이지팝업 */
.cloud_frame .cf_layer_pagepop .lp_layout { opacity: 0; margin-top: 20px; }
.cloud_frame .cf_layer_pagepop.active .lp_layout { opacity: 1; margin-top: 0; }

/* 페이지팝업(슬라이드팝업) */
.cloud_frame .cf_layer_pagepop.type_slide .lp_layout { margin-top: 44px; }
.cloud_frame .cf_layer_pagepop.type_slide.active .lp_layout { top: 0; }



/*==========================================================
   클라우드인증서 - PC View
==========================================================*/
.cloud_frame.for_pc { width: 555px; height: 660px; min-width: 555px; padding-left: 160px; border-radius: 7px;  overflow: hidden; } 
.cloud_frame.for_pc { top: 50%; left: 50%; transform: translate(-50%, -50%) }



/*------------------------------------------------
   페이지팝업(슬라이딩)
------------------------------------------------*/
.cloud_frame.for_pc .cf_layer_pagepop { overflow: hidden; margin-left: 160px; width: calc(100% - 160px); }
.cloud_frame.for_pc .cf_layer_pagepop .lp_layout { background: transparent; height: 100%; border-radius: 0; }
.cloud_frame.for_pc .cf_layer_pagepop .lp_layout .lp_header { width: 100%; height: 1px; background: transparent;}
.cloud_frame.for_pc .cf_layer_pagepop .lp_layout .lp_header .btn_cf_goback { display: none; }
.cloud_frame.for_pc .cf_layer_pagepop .lp_layout .lp_header .btn_cf_goback.for_pc { display: block; position: absolute; top: 41px; left: 0px; width: 64px; height: 35px; padding-left: 27px; font-size: 13px; color: #303030; background-size: 8px; background-position: 15px; text-indent: 0;}
.cloud_frame.for_pc .cf_layer_pagepop .lp_layout .lp_header .btn_cf_exit { display: none; }
.cloud_frame.for_pc .cf_layer_pagepop .lp_layout .lp_container { margin-top: 35px; height: calc(100% - 35px); padding-top: 0px; background: #ffffff;  }
.cloud_frame.for_pc .cf_layer_pagepop.type_slide:after { display: block; margin-top: 35px; height: calc(100% - 35px); }
.cloud_frame.for_pc .cf_layer_pagepop.type_slide .lp_layout { margin-top: 0px; background: transparent; height: 100%; border-radius: 0; }


/*==========================================================
   Contents
==========================================================*/
.cloud_frame .password_title_area .title_pack { min-height: 99px; }
.cloud_frame .password_input_area { margin-top: 63px; text-align: center; }
.cloud_frame .password_input_area .password_input_group { font-size: 0; }
.cloud_frame .password_input_area .password_input_group .pw_box { position: relative; margin: 0 0 0 12px; }
.cloud_frame .password_input_area .password_input_group .pw_box:first-child { margin: 0; }
.cloud_frame .password_input_area .password_input_group .pw_box { display: inline-block; width: 33px; height: 33px; border-radius: 8px; box-sizing: border-box; background: #eeeeee; }
.cloud_frame .password_input_area .password_input_group .pw_box.ready { background: rgba(60, 132, 229, .4); }
.cloud_frame .password_input_area .password_input_group .pw_box.active { position: relative; background: #3c84e5; }
.cloud_frame .password_discord_area { text-align: center; }
.cloud_frame .password_discord_area .text_error_pack { margin: 50px 0 0 0; }
.cloud_frame .password_discord_area .btn_pack.btn_text { margin: 50px 0 0 0; }
.cloud_frame .keypad_area { display: flex; justify-content: center; }

.lysckeypadbox{position:fixed; top:inherit; left:0; right:0; bottom:0; height:auto;}
.box_sckeypad_wrap{position:fixed; z-index:1; left:0; top:0; width:0%; height:0%; transition:width height 0s;}
.box_sckeypad_wrap.active{width:100%; height:100%; transition:width height 0;}
.box_sckeypad_wrap:after{content:''; display:block; z-index:1003; position:fixed; left:0; top:-100%; width:100%; height:100%; background-color:rgba(0,0,0,0.6); opacity: 0; transition:opacity 0.8s; /* transition:top 0.9s; */}
.box_sckeypad_wrap.active:after{top:0; transition:top 0s; transition:opacity 0.5s;  opacity: 1;}
.box_sckeypad_wrap .inner_keypad_wrap{position:fixed; z-index:1004; left:0; bottom:-100%; width:100%; height:auto; padding:20px 20px 0px 20px; box-sizing:border-box; background-color:#000046; /* border-radius:15px 15px 0 0; */ transition:bottom 0.7s;}
.box_sckeypad_wrap.active .inner_keypad_wrap{bottom:0; transition:bottom 0.5s;}

.text_title{padding:0; margin:0; color: #ffffff;font-size: 17px;font-weight: 600;line-height: 1.2;text-align: center;background: #000046;z-index: 9;}
.box_keyinput{display:inline-block; width:100%; height:auto; margin-top:20px; text-align:center; letter-spacing: -5px;}
.box_keyinput > input{position:absolute; left:0; top:0; visibility:hidden;}
.box_keyinput .keybox{position:relative; display:inline-block; width:20px; height:20px; text-align:center;}
.box_keyinput .keybox ~ .keybox{margin-left:15px;}    
.box_keyinput .keybox:after{content:''; display:inline-block; width:20px; height:20px; background-color:#cccccc; border-radius:20px;}
.box_keyinput .keybox.on:after{background-color:#ffffff;}
.box_keyinput .dashbox{position:relative; display:inline-block; width:20px; height:20px; text-align:center;}
.box_sckeypad{height:auto; /*margin-top:50px;*/  letter-spacing: -6px; text-align:center; display: flex; justify-content: center; }
.button_sckeypad{width:33.3%; height:54px; padding:0; margin:0; border:0; background-color:#fff; letter-spacing: 0; vertical-align: top; font-size:25px; line-height:54px; color:#000; font-weight:700;}
.button_sckeypad:active{color:#145e6f;}
/* .button_sckeypad:hover{color:#145e6f;} */
.button_sckeypad.key_reset, 
.button_sckeypad.key_delete{position:absolute; bottom:0;}
.button_sckeypad.key_reset{left:0; font-size:19px;}
.button_sckeypad.key_delete{right:0; font-size:28px;}
.button_sckeypad.key_delete{background:url(images/button_icon_delarrow.jpg) center center no-repeat; background-size:22px auto; font-size:0;}
/* .cdLayerOpen{position:absolute; left:0; top:0; z-index:2000;} */