@charset "utf-8";
@import url('./font/font.css');

/**********************************************************************************************************************************/
/**********************************************************************************************************************************/
/****************************************************    BASE   **********************************************************/
/**********************************************************************************************************************************/
/**********************************************************************************************************************************/


*{-webkit-text-size-adjust:none; margin:0; padding:0; -webkit-tap-highlight-color:rgba(0,0,0,0); box-sizing: border-box; }
strong,h1,h2,h3,h4,h5,h6	{ font-family:'NanumSquareRound',sans-serif; font-weight:800;   }
html{height:100%;}
html.popOpen {overflow:hidden; }
body{margin:0; padding:0; font-family: 'NanumSquareRound', Helvetica, sans-serif, HelveticalNeue-Light,AppleSDGothicNeo; -webkit-text-size-adjust:100%; height:100%; position:relative; font-size:15px; line-height:20px; font-weight:400; color:#1c1c1c;  }


p,h1,h2,h3,h4,h5,h6,menu,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,img{-webkit-text-size-adjust: 100%; vertical-align:top}
table,th,td{vertical-align:middle; text-align:center; }
button,select,input,label {cursor:pointer;font-size:14px; box-sizing: border-box; }
hr, legend, caption {display:none; }
/*

*/
button,select ,input[type=radio],input[type=checkbox],label,textarea {cursor:pointer;font-size:14px; border-radius:0; appearance: none; -webkit-appearance:none}

/* ---[ reset html5 element ]---------------- */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display: block;}

ul,ol {list-style:none;margin:0px;padding:0px;}
em {font-style:normal;}
fieldset,img {border:0 none;  }
.hidden {visibility:hidden;width:2px; height:2px; overflow:hidden; position:absolute;left:-1000px;}
.m_hidden {visibility:hidden; width:2px; height:2px; overflow:hidden; position:absolute;left:-10000px; margin:0 !important; }
.nohidden {visibility:visible !important; width:auto; height:auto; overflow:hidden;   position:relative; left:0;}
.nohidden2 {visibility:visible !important; width:auto; height:auto; overflow:hidden;  position:relative;left:0;}

table {border-collapse:collapse;border-spacing:0; }/*margin-top:10px;*/
table caption {width:0;height:0;font-size:0;line-height:0;overflow:hidden;visibility:hidden;}
table tr td span{white-space: normal;}
table tr td img{vertical-align:middle; }

/* ---[ links ]------------------------------- */
a  {  }
a img {border: none;}
a:link,a:visited {text-decoration: none;color:#666; font-family:inherit}
a:hover {text-decoration:underline;}

button{position:relative;margin:0;padding:0;border:0;background:#fff; cursor:pointer;vertical-align:middle;   }

.clear{clear:both;height:0;line-height:0;font-size:0;}
.mob_clear {clear: both;}

/* clear */
.clearfix{*zoom: 1;} /* for IE 6/7 */
.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}

.hide {  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  border: 0;}


/*
a	{-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;-ms-transition: all 300ms linear;transition: all 300ms linear;}
select	{-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;-ms-transition: all 300ms linear;transition: all 300ms linear;}
input	{-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;-o-transition: all 300ms linear;-ms-transition: all 300ms linear;transition: all 300ms linear;}
*/
/* intro */

.intro      {position:relative; width:100%; height:100%; background: url(../img/intro/bg-intro.png) no-repeat 0 0;  background-size:100% 100%; overflow: hidden;}
.intro .splash      {position:absolute; width:100%; height:100%; z-index:3;}
.intro .splash .star      {position:absolute; z-index:3; width:100%; height:100%; }
.intro .splash .star span      {opacity:0;position:absolute; z-index:3; width:100%; height:100%; background: url(../img/intro/img-star1_1.png) no-repeat 0 20%;   background-size:100% auto !important}
.intro .splash .star span      {animation-name: star; animation-duration:1s;  animation-fill-mode:forwards ;}
.intro .splash .star span.star_1   {animation-delay:0; background-image: url(../img/intro/img-star1_1.png) ;  }
.intro .splash .star span.star_2   {animation-delay:.3s; background-image: url(../img/intro/img-star1_2.png) ;  }
.intro .splash .star span.star_3   {animation-delay:.7s; background-image: url(../img/intro/img-star1_3.png) ;  }
.intro .splash .star span.star_4   {animation-delay:1s; background-image: url(../img/intro/img-star1_4.png) ;  }
.intro .splash .cloud      {position:absolute; width:100%; height:100%; background: url(../img/intro/img-cloud.png) no-repeat 0 20%; background-size:100% auto}
.intro .splash .cloud      {opacity:0; transform: translateX(-50px)  translateY(50px); animation-name: cloud; animation-duration:2.5s; animation-delay:1s; animation-fill-mode:forwards ;}
.intro .splash .cloud.on      {animation-name: cloud; animation-duration:1s;}
.intro .splash .fire      {animation-delay:2s; opacity:0; animation-name: fade; animation-duration:1s; animation-fill-mode:forwards ;}
.intro .splash .fire      {  position:absolute; width:100%; height:100%; background: url(../img/intro/img-fire.png) no-repeat 50% 90%; background-size:16% }


.intro .logo      {z-index:100; position:absolute; width:100%; height:100%; background: url(../img/intro/logo-big.png) no-repeat 50% 45%; background-size:50% }
.intro .logo      {animation-delay:2.5s; opacity:0; animation-name: logo; animation-duration:2s; animation-fill-mode:forwards ;}
.intro .ment      {animation-delay:4.5s; opacity:0; animation-name: fade; animation-duration:1s; animation-fill-mode:forwards ;}
.intro .ment      {z-index:100; position:absolute; width:100%; height:40px; top:42%; transform:  translateY(-40px); color:#d0d1df; text-align: center; }

.intro.day      {background: url(../img/intro/bg-sky.png) no-repeat 0 0;}
.intro .logo      {animation-delay:3s; opacity:0; animation-name: logo2; animation-duration:2s; background:none;  }
.intro .logo em   {position:absolute; width:100%; height:100%; background: url(../img/intro/kodari_sh.svg) no-repeat 50% 45% ; background-size:70%}
.intro .logo span {position:absolute; width:100%; height:100%; opacity:0; background: url(../img/intro/kodari_s.svg) no-repeat 50% 45% ; background-size:70%}
.intro .logo em   {animation-delay:5s; animation-duration:1s;  animation-name: fade2;  animation-fill-mode:forwards ;}
.intro .logo span {animation-delay:5s; animation-duration:1s; animation-name: fade;   animation-fill-mode:forwards ; }
.intro.day .ment      {display:none; }
.intro.day .splash .star      { }
.intro.day .splash .fire      {background: url(../img/intro/people.png) no-repeat 50% 100%;  background-size:100%;   }
.intro.day .splash .cloud     {animation-name: fade; transform: translateX(0); background: url(../img/intro/bg-cloud.png) no-repeat 50% 100%; background-size:100%; }
.intro.day .splash .star span      {animation-name: star2; animation-duration:1s;  animation-fill-mode:forwards ;}
.intro.day .splash .star span.star_1   {animation-delay:0;    background-image: url(../img/intro/snow_1.png) ;  }
.intro.day .splash .star span.star_2   {animation-delay:.3s;  background-image: url(../img/intro/snow_2.png) ;  }
.intro.day .splash .star span.star_3   {animation-delay:.7s;  background-image: url(../img/intro/snow_3.png) ;  }
.intro.day .splash .star span.star_4   {animation-delay:1s;   background-image: url(../img/intro/snow_4.png) ;  }
.intro .splash      {animation-delay:4.8s; animation-duration:1.2s; animation-name: scale;   animation-fill-mode:forwards ; }
.intro .splash .bg   {position:absolute; z-index:3; width:100%; height:100%; background:#fff; opacity:0; }
.intro .splash .bg   {animation-name: fade; animation-delay:5s; animation-duration:1s;  animation-fill-mode:forwards ; }


.intro .login       {animation-delay:4.8s; opacity:0; animation-name: login; animation-duration:.5s; animation-fill-mode:forwards ;  }
.intro .login       {position:absolute; bottom:0; width:100%; padding:0 5%; z-index:2;  }
.intro .login ul    { }
.intro .login ul li    {width:100%; background:#5036fc; margin-top:12px; border-radius:3px;   }
.intro .login ul li a    {display:block; line-height:42px; color:#fff; text-align: center; }
.intro .login ul li.mail a     {color:#ffffff; background:url(../img/intro/ic-mail.png) no-repeat 30% 50%; background-size:17px; }
.intro .login ul li.kakao a    {color:#262626; background:url(../img/intro/ic-kakao.png) no-repeat 30% 50% #fee500; background-size:17px; }
.intro .login ul li.naver a    {color:#ffffff; background:url(../img/intro/ic-naver.png) no-repeat 30% 50% #00ce02; background-size:17px; }
.intro .login ul li.apple a    {color:#ffffff; background:url(../img/intro/ic-apple.png) no-repeat 30% 50% #333333; background-size:17px; }
.intro .login ul li.google a   {color:#262626; background:url(../img/intro/ic-google.png) no-repeat 30% 50% #ffffff; background-size:17px; box-shadow:  0 0 1px#000; }
.intro .login .idpw  {margin:100px 0 25px; text-align: center; font-size:13px; color:#fff;  }
.intro .login .idpw a {color:#1b1b1b; }

@keyframes logo {
  0% { opacity:0; transform:  translateY(0) scale(1);  }
  33% {opacity:1;  transform:  translateY(0) scale(1); }
  66% { transform:  translateY(0) scale(1); opacity:1;  }
  100% {transform:  translateY(-130px) scale(.7);  opacity:1;   }
}
@keyframes logo2 {
  0% { opacity:0; transform:  translateY(0) scale(1);  }
  15% {opacity:1;  transform:  translateY(0) scale(1); }
  33% { transform:  translateY(0) scale(1); opacity:1;  }
  100% {transform:  translateY(-130px) scale(.8);  opacity:1;   }
}
@keyframes fade {
  0% {}
  100% { opacity:1;    }
}
@keyframes fade2 {
  0% { }
  100% { opacity:0;    }
}
@keyframes login {
  0% {z-index:102; }
  100% { opacity:1;  z-index:102;   }
}
@keyframes star {
  0% { transform: scale(1);  }
  50% { transform: scale(1.05);  opacity:.5; }
  100% { transform: scale(1); opacity:1;    }
}
@keyframes star2 {
  0% { transform: scale(1); transform: translateY(-20px);  }
  100% { transform: scale(1); opacity:1; transform: translateY(0);    }
}
@keyframes cloud {
  0% { transform:  translateX(-50px)  translateY(20px);  }
  100% { transform: translateX(0)  translateY(0); opacity:1;    }
}
@keyframes scale {
  0% { transform:  scale(1);  }
  100% { transform:  scale(1.2);   }
}




/**********************************************************************************************************************************/
/**********************************************************************************************************************************/
/****************************************************    COMMON    **********************************************************/
/**********************************************************************************************************************************/
/**********************************************************************************************************************************/

/****************************
**********  color  **********
*****************************/


/****************************
**********  button  **********
*****************************/

/****************************
**********  form  **********
*****************************/

/* radio */
input[type=radio]  {width:23px; height:23px; border:1px solid #707070; border-radius:50%; }
input[type=radio]:checked  { border:7px solid #5036fc; animation-name: radio; animation-duration:.4s;   }
input[type=radio] ~ *  {line-height:23px;   }


/* check */
input[type=checkbox]  {width:20px; height:20px; border-radius:2px; border:1px solid #707070; margin-right:3px;}
input[type=checkbox]:checked  {border:1px solid #5036fc; animation-name: radio; background:url(../img/common/bx-checked.png) no-repeat 50% 50%; background-size: 120%;}
input[type=checkbox] ~ *  {line-height:23px;   }

/* selct */
select {border:1px solid #d8d8d8; height:34px; border-radius:3px; padding:0 20px 0 10px; background:url(../img/common/arrow-select-down.png) no-repeat 97% 50%; background-size:10px;}

/* btn */

.btn-s    {min-width:70px; padding:0 7px; line-height:34px; height:34px; background:#f6f4f5; border-radius:5px; color:#626471; font-size:14px; font-family:'NanumSquareRound',sans-serif; font-weight:800;  }
.btn-s.success    {min-width:80px; background:#5036fc; border-radius:16px; color:#fff; font-size:12px;   }
.btn-l    {position:relative; display:block; width:90%; font-size:16px; line-height:34px; height:58px; margin:0 auto; background:#566aff; border-radius:3px; color:#fff; font-weight:800;  }
.btn-l.bul-arr:after    {content:""; top:25px; right:30px; width:7px; height:7px;position:absolute; border-top: 1px solid #fff;border-right: 1px solid #fff; transform: rotate(45deg); }
.btn-l.black    {background:#3e3d43;  }


@keyframes radio {
  0% { transform: scale(1);  }
  50% { transform: scale(1.1);  }
  100% { transform: scale(1);   }
}

.keyPad   {position:absolute; bottom:0; left:0; width:100%; overflow: hidden; z-index:1000; }
.keyPad img   { width:100%; height:200px; }


/* layout */

body 	{ }
.wrapper		{position:relative; z-index:99;  min-height:100%; padding-top:50px; background:#fff; }
.wrapper.bg		{ background:#f7f5f6; }

.header	{position:fixed; width:100%; z-index:99; top:0; height:50px; background:#fff; border-bottom:1px solid #eee;   }
.myDate .header	{border-bottom:0; }
.header h1.logo	{text-align: left; padding:10px 0 0 20px;   }
.header h1.logo img	{width:56px;   }
.header h2.pageTit	{text-align: center; font-size:18px; padding:17px 0 0; color:#1c1c1c   }
.header button.prev	{position:absolute; width:20px; height:100%; left:20px; background:url(../img/common/ic-back.png) no-repeat 50% 50%; background-size:10px;    }
.header button.close	{position:absolute; width:20px; height:100%; left:20px; background:url(../img/common/btn-close-page.png) no-repeat 50% 50%; background-size:10px;    }
.header button.save	{position:absolute; width:50px; height:100%; right:10px;  top:0px;  color:#5036fc;   }
.header div.utils	{position:absolute; width:132px; top:16px;right:20px;display: flex;justify-content: space-between;}
.header div.utils button.talk	{width:22px; height:22px; background:url(../img//common/ic_message.svg) no-repeat 0 0; background-size:22px auto;}
.header div.utils button.set	{width:22px; height:22px; background:url(../img//common/ic_setting.svg) no-repeat 0 0; background-size:22px auto;}
.header div.utils button.dataex	{width:22px; height:22px; background:url(../img//common/ic_dataex.svg) no-repeat 0 0; background-size:22px auto;}
.header div.utils button.export	{width:22px; height:22px; background:url(../img//common/ic_export.svg) no-repeat 0 0; background-size:22px auto;}


ul.myDateTab        {padding:20px 0 0; height:40px; border-bottom:1px solid #e6e6e6; padding:0 20px; }
ul.myDateTab li        {width:25%; float:left;}
ul.myDateTab li a       {display:block; padding:10px 0; height:40px; text-align: center; font-size:15px;}
ul.myDateTab li a:hover {text-decoration: none;}
ul.myDateTab li a.on    {color:#5036fc; border-bottom:3px solid #5036fc; }



.layer		{position:fixed; bottom:0; z-index:500; width:100%; display:none;  }
.layer.on		{display:block;  }
.layer::before		{opacity:0; content:""; position:absolute; height:100vh; bottom:0;left:0; width:100%; background:rgba(0, 0, 0, 0.4)}
.layer button.close		{position:absolute; top:13px; right:12px; width:30px; height:30px; background:url(../img/common/btn-close-layer.png) no-repeat 50% 50%; background-size:15px; }
.layer button.close		{position:absolute; top:13px; right:12px; width:30px; height:30px; background:url(../img/common/btn-close-layer.png) no-repeat 50% 50%; background-size:15px; }
.layer .layerBody	{opacity:0; position:relative; background:#fff; border-radius:15px 15px 0 0; padding:50px 19px 30px;  }
.layer.on::before	{animation-name: fade; animation-duration:.3s; animation-fill-mode:forwards ; }
.layer.on .layerBody	{animation-name: layerOpen; animation-duration:.3s; animation-delay:.1s; animation-fill-mode:forwards ; }

.imgLayer		{position:fixed; top:0; z-index:500; width:100%; height:100%; display:none;  }
.imgLayer.on		{display:flex;  }
.imgLayer::before		{opacity:0; content:""; position:absolute; height:100vh; bottom:0;left:0; width:100%; background:rgba(0, 0, 0, 0.4)}
.imgLayer.on::before	{animation-name: fade; animation-duration:.3s; animation-fill-mode:forwards ; }
.imgLayer button.close		{position:absolute; z-index:9900; top:13px; right:12px; width:30px; height:30px; background:url(../img/common/btn-close-layer.png) no-repeat 50% 50%; background-size:15px; }
.imgLayer button.close2		{position:absolute; z-index:9900; top:13px; right:12px; width:30px; height:30px; background:url(../img/common/btn-close-layer2.png) no-repeat 50% 50%; background-size:15px; }
.imgLayer .layerBody			{margin:auto;,max-width: 780px; width:100%; max-height:100%; opacity:0; position:relative; border-radius:10px; padding:50px 19px 30px; overflow: hidden;}
.imgLayer .layerBody img			{width:100%;}
.imgLayer.on .layerBody	{animation-name: alertOpen; animation-duration:.3s; animation-delay:0; animation-fill-mode:forwards ; }

.alert		{position:fixed; top:0; z-index:500; width:100%; height:100%; display:none;  }
.alert.on		{display:block;  }
.alert::before		{opacity:0; content:""; position:absolute; height:100vh; bottom:0;left:0; width:100%; background:rgba(0, 0, 0, 0.4)}
.alert button.close		{position:absolute; top:13px; right:12px; width:30px; height:30px; background:url(../img/common/btn-close-layer.png) no-repeat 50% 50%; background-size:15px; }
.alert .layerBody	{opacity:0; top:30%; width:70%; left:50%; margin-left:-35%;  position:relative; background:#fff; border-radius:10px; padding:0; overflow: hidden; }
.alert.on::before	{animation-name: fade; animation-duration:.3s; animation-fill-mode:forwards ; }
.alert.on .layerBody	{animation-name: alertOpen; animation-duration:.3s; animation-delay:0; animation-fill-mode:forwards ; }
.alert.on .layerBody .btnBox	{margin-top:0; overflow: hidden; }
.alert.on .layerBody .btnBox button	{float:left; border-top:1px solid  rgba(60, 60, 67, 0.36); }
.alert.on .layerBody .btnBox button.yes	{font-weight: 800;}
.alert.on .layerBody .btnBox button + button	{border-left:1px solid  rgba(60, 60, 67, 0.36); }
.alert.on .layerBody .btnBox .half	{width:50%; }
.alert.on .layerBody .mentBox	{ text-align: center; padding:22px 20px 18px; color:#1c1c1c;  }
.alert.on .layerBody .btnBox button	{ border-radius: 0; }


.accessLayer		{position:fixed; top:0; z-index:500; width:100%; height:100%; display:none;  }
.accessLayer.on		{display:flex;  }
.accessLayer::before		{opacity:0; content:""; position:absolute; height:100vh; bottom:0;left:0; width:100%; background:rgba(0, 0, 0, 0.4)}
.accessLayer.on::before	{animation-name: fade; animation-duration:.3s; animation-fill-mode:forwards ; }
.accessLayer button.close		{position:absolute; z-index:9900; top:13px; right:12px; width:30px; height:30px; background:url(../img/common/btn-close-layer.png) no-repeat 50% 50%; background-size:15px; }
.accessLayer .layerBody			{margin:auto; max-height:100%; width:300px; margin:auto; opacity:0; position:relative; border-radius:15px ; padding:0; overflow: scroll;}
.accessLayer .layerBody img			{width:100%;}
.accessLayer.on .layerBody	{background-image: linear-gradient(74deg, #2a2a2a, #404040 98%); animation-name: alertOpen; animation-duration:.3s; animation-delay:0; animation-fill-mode:forwards ; }


@keyframes alertOpen {
  0% { opacity:0; transform: translateY(40px);  }
  100% { opacity:1; transform: translateY(0);  }
}

@keyframes layerOpen {
  0% { opacity:0; transform: translateY(200px);  }
  100% { opacity:1; transform: translateY(0);  }
}


.wrap	{min-height:100%;  }
.bg .wrap	{ }

.footer		{position:fixed; z-index:50; width:100%; bottom:0; height:60px; border-top:1px solid #eee; background:#fff;  }
.footer	ul	{display:flex; width:80%; margin:0 auto; height:60px; }
.footer	ul li	{flex:1; display:flex; text-align: center; width:33%; margin:0;  }
.footer	ul li button	{color:#aeaeae;  height:100%; width:100%; background:#ddd; padding:20px 0 0; font-size: 10px; font-weight: 800;   }
.footer	ul li.on button	{color:#5036fc;   }
.footer	ul.gnb li button.menu_1	{background:url(../img/common/ic-home.png) no-repeat 50% 10px; background-size:18px; }
.footer	ul.gnb li button.menu_2	{background:url(../img/common/ic-diary.png) no-repeat 50% 10px; background-size:18px; }
.footer	ul.gnb li button.menu_3	{background:url(../img/common/ic-mydata.png) no-repeat 50% 10px; background-size:18px; }
.footer	ul.gnb li.on button.menu_1	{background:url(../img/common/ic-home-on.png) no-repeat 50% 10px; background-size:18px; }
.footer	ul.gnb li.on button.menu_2	{background:url(../img/common/ic-diary-on.png) no-repeat 50% 10px; background-size:18px; }
.footer	ul.gnb li.on button.menu_3	{background:url(../img/common/ic-mydata-on.png) no-repeat 50% 10px; background-size:18px; }
.footer	ul.gnb li button {}



.footer	.btn	{ }
.footer	.btn button	{ display:block; width:100%; height:60px; font-size:16px; color:#fff; text-align: center; }
.footer	.btn button.dark 	{ color:#fff; background:#3e3d43;}
.footer	.btn button.full 	{ width:100%; }




/****************************/
/* contents */
/****************************/

.btnBox     {margin-top: 30px; }
.layerBody .btnBox     {margin-top: 20px; width:100%; display:flex; justify-content: space-between; }
.btnBox.popBt     {padding:0 19px 50px; }
article.btnBox     {padding:0 19px; margin-top: 30px;;}
.btnBox button	{ display:block; width:100%; height:60px; font-size:16px; color:#fff; text-align: center; border-radius: 3px;}
.btnBox button.dark 	{ color:#fff; background:#3e3d43;}
.btnBox button.gray 	{ color:#fff; background:#aeaeae;}
.btnBox button.gray2 	{ color:#fff; background:#848484;}
.btnBox button.white 	{ color:#5036fc; background:#fff;}
.btnBox button.blue 	{ color:#fff; background:#566aff;}
.btnBox button.red 	{ color:#fff; background:#E91953;}
.btnBox button.full 	{ width:100%; }
.btnBox button.half 	{ width:48%; }
.btnBox.other_layout .half{ width:30%;}


button.btns         {width:85px; height:32px; border-radius:16px; }
button.send         {background:#5036fc; color:#fff; }
button.success         {background:#566aff; color:#fff; }

.qnaList .detail  {border:1px solid #d8d8d8; width:100%; background:#fbfbfb; padding:10px; border-radius: 3px;}


/* join */
.contents  {padding:30px 19px;  }
.bg .contents  {padding:0px 0 60px;  }
.bg .formWrap  {padding:10px 20px ;  }
ul.formBox            { }
ul.formBox li.input   {display:flex; padding:14px 0; flex:1 0; border-bottom:1px solid #d8d8d8;align-items: center; }
ul.formBox li.input2   {display:flex; padding:14px 0; flex:1 0; border-bottom:1px solid #d8d8d8; flex-wrap: wrap;  }
ul.formBox li.select2   {display:flex; margin-top:20px; padding:14px 0; flex:1 0; border-bottom:1px solid #d8d8d8; flex-wrap: wrap;  }
ul.formBox li.select2 select   {width:100%; border:0; padding-left:0;}
ul.formBox li  strong   {width:100%; padding-bottom:15px;  }
ul.formBox li input[type=text]   {width:100%; height:32px; border:0; background:transparent; font-size:14px; }
ul.formBox li input[type=text]::placeholder   {color:#8f8f8f; font-size:14px; }
ul.formBox li input[type=number]   {width:100%; height:32px; border:0; background:transparent; font-size:14px; }
ul.formBox li input[type=number]::placeholder   {color:#8f8f8f; font-size:14px; }
ul.formBox li.radio    {padding:23px 0 0;  }
ul.formBox li.input span.timer   {padding:0 10px; line-height:32px; color:#5036fc; font-size:13px;}
ul.formBox li.select    {display:flex; padding:14px 0; flex:1 0;}
ul.formBox li.select.tit    {flex-wrap: wrap;}
ul.formBox li.select  strong   {width:100%;}
ul.formBox li.select  select   {width:100%;}
.inlayout li input[type=text]{padding:0 10px;}
.inlayout li input[type=number]{padding:0 10px;}
.set_ex{display: flex; justify-content: space-between;padding-top:22px;padding-left:10px;}
.set_ex div{ width:100%;}
.set_ex div span{margin-right: 20px;}
.set_ex div span:last-child{margin-right: 0;}
.set_ex .tit{padding-bottom: 0!important;}

.agreement + .agreement		{border-top:1px solid #d8d8d8; margin-top:23px; padding:23px 0 0; }
.agreement .agreeBox		{border:1px solid #d8d8d8; background:#fbfbfb; border-radius:3px; height:150px; padding:10px;  overflow: auto;   }


.pinNumber      {padding:20px 0 0; width:100%; }
.pinNumber .ment       {font-size:15px; line-height:20px; text-align: center; }
.pinNumber ul.pinInput    {margin-top:50px;  text-align: center;}
.pinNumber ul.pinInput li    {display:inline-block; width:15px; height:15px; margin:0 10px; border:1px solid #707070; border-radius:50%; }
.pinNumber ul.pinInput li.on    { border:1px solid #5036fc; background:#5036fc;  }
.pinNumber .reset    {margin-top:15px;  color:#8f8f8f; text-decoration: underline; text-align: center;  }
.pinNumber .password  {position:absolute; width:100%; left:0; bottom:20%; color:#8f8f8f; text-decoration: underline; text-align: center;  }


.numberCount    {display:inline-block; height:34px; padding:0 10px; border:1px solid #d8d8d8; border-radius:34px; overflow:hidden}
.numberCount button     {border:0; width:30px; text-align: center; height:32px; font-size:18px; line-height:18px;}  
.numberCount input[type=text]     {border:0; width:50px; height:32px; line-height:32px; text-align: center;}  

.joinSuccess        {height:60vh; display:flex;  }
.joinSuccess .endCont        {margin:auto ; padding:70px 0 0; background:url(../img/common/ic-ok-big.png) no-repeat 50% 0; background-size:50px auto; font-size:20px; text-align: center; line-height:30px;  }
.joinSuccess .endCont button        {margin-top:50px;  }
.joinSuccess .outCont         {width:100%; font-size:20px; margin:auto ; text-align: center; line-height:30px;  }
.joinSuccess .outCont p        {margin-top:30px;  }
.joinSuccess .outCont button        {margin-top:50px;  }




/* 다이어리 */
.diaryDetail        {}
.diaryDetail article        {background:#fff; margin:8px 0 0; }
.diaryDetail article.btnBox        {margin:30px 0 0; }
.diaryDetail ul.diaryTop        {}
.diaryDetail ul.diaryTop li      {background:#fff; padding:16px 19px; line-height:1.2em; display:flex;align-items: center;}
.diaryDetail ul.diaryTop li + li  {border-top:1px solid #eee;  }
.diaryDetail ul.diaryTop li em.bookmark {float:left; width:20px; height:34px; margin-right:5px; background: url(../img/common/ic-star-off.png) no-repeat 50% 50%; background-size:20px auto; transition: .3s;flex-shrink: 0; }
.diaryDetail ul.diaryTop li em.bookmark.on {background-image: url(../img/common/ic-star-on.png)  }
.diaryDetail ul.diaryTop li strong      {float:left;font-size:14px;color:#1c1c1c; vertical-align: top;  }
.diaryDetail ul.diaryTop li button      {margin-left:auto;}

ul.diarychk-1     {padding:10px 0;}
.diaryDetail  ul.diarychk-1     {padding:10px 19px;}
ul.diarychk-1 li     {padding:10px 0; overflow: hidden;}
ul.diarychk-1 li strong    {float:left;  }
ul.diarychk-1 li strong.tit      {width:50%; }
ul.diarychk-1 li span    {float:left;  }
ul.diarychk-1 li span.radio    {width:25%; }
ul.diarychk-1 li.select select    {width:100%; }
ul.diarychk-1 li .selectedList    {margin-top:8px; }
ul.diarychk-1 li .selectedList span   {display:inline-block; font-weight: 800; position:relative;  padding:5px 7px 0 7px; font-size:12px; color:#1c1c1c; border-radius: 5px; height:30px; border:1px solid #d8d8d8; }
ul.diarychk-1 li .selectedList span   {margin:0 4px 4px 0;}
ul.diarychk-1 li .selectedList span button.del  {  width:15px; height:15px; background: url(../img/common/ico_x.png) no-repeat 0 0; background-size:100%;  }

.diaryDetail ul.diarychk-2     {padding:20px 19px;}
.diaryDetail ul.diarychk-2 select     {display:block; margin-left:25px;  margin-top:10px; }
.diaryDetail ul.diarychk-2 .select2 select     {display:block; width:100%; margin-left:0;  margin-top:10px; }
.diaryDetail ul.diarychk-2 li + li     {margin-top:20px; }


table.formBox {width:100%;   }
table.formBox th {font-weight: 800; padding:13px 0 13px 19px; border-top:1px solid #eee; text-align: left; vertical-align: top;  }
table.formBox td {text-align:right; padding:13px 19px 13px 0; border-top:1px solid #eee;  }
table.formBox tr:first-child th,
table.formBox tr:first-child td {border-top:0;  }
table.formBox td select { width:90%;  }

.memoCont   {padding:25px 19px;  }
.memoCont p   {margin-top:13px; }


/* 주소 */
.loactionSearch     {}
.loactionSearch .search     {position:relative; background:#eeeef0; height:36px; border-radius:3px;  }
.loactionSearch .search input     {padding-left:40px; border:0; width:100%; height:36px; background:url(../img/common/ic-srch.png) no-repeat 15px 50%; background-size:15px;}
.loactionSearch .search button.clear     {position:absolute; width:20px; height:20px; right:7px; top:7px;  background:url(../img/common/ic-srch-cancel.png) no-repeat 50% 50%; background-size:15px; }
.loactionSearch .map     {margin-top:5px; width:100%; height:50vh; background: url(../img/common/map-sample2.png) no-repeat 0 0; background-size:cover}
.loactionSearch .address     {border:1px solid #d8d8d8; margin-top:5px; padding:10px 0 10px 40px; background:url(../img/common/ic-pin.png) no-repeat 15px 50%; background-size:16px; }
.loactionSearch .address strong     {font-size:16px; color:#1c1c1c;  }
.loactionSearch .address p     {font-size:12px; color:#8f8f8f }
.loactionSearch .btnBox     {}

.loactionSearch .prevTit    {padding:15px 0 5px;  }
.loactionSearch .prevTit strong    { font-size:14px; color:#1c1c1c;  }
.loactionSearch ul.prevList        {border-bottom:1px solid #eee;  max-height:50vh; overflow:auto; }
.loactionSearch ul.prevList li      {background:#fff; padding:16px 19px; line-height:33px; overflow: hidden;  }
.loactionSearch ul.prevList li   {border-top:1px solid #eee;  }
.loactionSearch ul.prevList li em.bookmark {float:left; width:20px; height:34px; margin-right:5px; background: url(../img/common/ic-star-off.png) no-repeat 50% 50%; background-size:20px auto; transition: .3s; }
.loactionSearch ul.prevList li em.bookmark.on {background-image: url(../img/common/ic-star-on.png)  }
.loactionSearch ul.prevList li strong      {float:left; height:34px;font-size:14px; line-height:34px; color:#1c1c1c; vertical-align: top;  }


ul.timeSettingForm            {}
ul.timeSettingForm li            {display:flex; height:52px; justify-content: space-between;align-items: center; }
ul.timeSettingForm li + li            {margin-top:20px;  }
ul.timeSettingForm li strong            {margin-right:0px; line-height:52px; width:30%; }
ul.timeSettingForm li input.time            { width:30%;  font-size:30px; margin-left:8px; border:1px solid #d8d8d8; text-align: center;  }

span.ampmForm       {display:inline-block; height:52px; background:#f6f4f5; padding:8px; }
span.ampmForm button       {display:inline-block; width:40px; height:34px; font-weight: 800; line-height:30px; border-radius:3px; background:#f6f4f5; transition: .3s; color:#626471 }
span.ampmForm button.on       {background:#fff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); color:#1c1c1c; }

.transpo    {padding:20px 0; }
.chkList    {text-align: left;}
.chkList span  {display:inline-block; width:48%; margin-right:1%; margin-top:14px;  }
.chkList span.long  {width:100%; margin-right:0; margin-top:14px;  }
.chkList span:nth-child(-n + 2)  {margin-top:0;  }
.chkList span input[type=text]  {width:50%; border:0; margin-left:10px; font-size:12px; height:23px; border-bottom:1px solid #d8d8d8;}


/* 달력 */
article.calendar       {padding:10px 0 10px; }
article.calendar .caltitBox       {padding:0 20px; }
article.calendar .caltitBox strong {display: block;}
article.calendar .caltitBox button {position:relative; margin-top:10px; width:100%; text-align: left; padding:0 0 0 10px;}
article.calendar .caltitBox button::after {content:""; position:absolute; right:10px; top:0px; width:10px; height:20px; background:url(../img/common/arrow-select-down.png) no-repeat 100% 50%; background-size: 10px; }
article.calendar .caltitBox button.on::after {transform: rotate(180deg); }
article.calendar .calendarWrap {margin-top:10px; }
article.calendar .tit       {padding:10px 20px 10px; width:320px; margin:0 auto; }
.flatpickr-calendar     {box-shadow: none; margin:0 auto 25px; box-shadow: 3px 5px 4px 0 rgba(0, 0, 0, 0.16); border: solid 1px #e5e5e5; border-radius: 10px;}
.flatpickr-calendar *     {font-weight: 800 !important;}
.flatpickr-day.startRange      {position:relative; z-index:10;}
.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {border-radius:50px}
.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {border-radius:50px}
.flatpickr-day.inRange      {box-shadow: none; position:relative;}
.flatpickr-day.inRange::before     {content:""; position:absolute; left:0; top:5px; width:100%; height:28px; background:#7d69fb; box-shadow:-12px 0px 0 #7d69fb, 12px 0px 0 #7d69fb;}
.flatpickr-day.inRange.endRange::before     {display:none; }
.flatpickr-day.inRange em    {position: relative; z-index:2; color:#fff; }
.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus
{background:none; border:0;}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay
{background:#5036fc; border:1px solid #5036fc; }
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1))
{box-shadow:none}
.flatpickr-day.today    {border:0; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year   {font-size:14px; }


.stateChkList   {margin-top:5px; padding-bottom:20px; }
.stateChkList ul  {padding:20px 19px; overflow: hidden; overflow-x: auto; display:flex; flex-wrap: nowrap; border-top:1px solid #eee; }
.stateChkList ul li  {min-width:70px; margin-right:20px; }
.stateChkList ul li span  {display:block; text-align: center; font-weight: 800; padding:5px 0 0; font-size:10px; font-weight: 800; }
.stateChkList ul li button  {width:70px; height:70px; background-size:cover !important; transition: .2s; }
.stateChkList ul li button.state-01  {background:url(../img/state/ic-state01-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-02  {background:url(../img/state/ic-state02-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-03  {background:url(../img/state/ic-state03-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-04  {background:url(../img/state/ic-state04-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-05  {background:url(../img/state/ic-state05-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-06  {background:url(../img/state/ic-state06-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-07  {background:url(../img/state/ic-state07-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-08  {background:url(../img/state/ic-state08-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-09  {background:url(../img/state/ic-state09-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-10  {background:url(../img/state/ic-state10-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-11  {background:url(../img/state/ic-state11-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-12  {background:url(../img/state/ic-state12-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-13  {background:url(../img/state/ic-state13-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-14  {background:url(../img/state/ic-state14-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-15  {background:url(../img/state/ic-state15-off.png) no-repeat 0 0;  }
.stateChkList ul li button.state-16  {background:url(../img/state/ic-state16-off.png) no-repeat 0 0;  }

.stateChkList ul li button.state-01[value='1']  {background:url(../img/state/ic-state01-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-02[value='1']  {background:url(../img/state/ic-state02-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-03[value='1']  {background:url(../img/state/ic-state03-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-04[value='1']  {background:url(../img/state/ic-state04-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-05[value='1']  {background:url(../img/state/ic-state05-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-06[value='1']  {background:url(../img/state/ic-state06-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-07[value='1']  {background:url(../img/state/ic-state07-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-08[value='1']  {background:url(../img/state/ic-state08-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-09[value='1']  {background:url(../img/state/ic-state09-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-10[value='1']  {background:url(../img/state/ic-state10-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-11[value='1']  {background:url(../img/state/ic-state11-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-12[value='1']  {background:url(../img/state/ic-state12-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-13[value='1']  {background:url(../img/state/ic-state13-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-14[value='1']  {background:url(../img/state/ic-state14-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-15[value='1']  {background:url(../img/state/ic-state15-on.png) no-repeat 0 0;  }
.stateChkList ul li button.state-16[value='1']  {background:url(../img/state/ic-state16-on.png) no-repeat 0 0;  }


.attechFile     {margin-top:25px; }
.attechFile strong     { }
.attechFile .pictureInput     {margin-top:20px; width:90px; height:90px;  background:url(../img/common/img-file-up.png) no-repeat 0 0; background-size:100%; }
.attechFile .pictureInput input     {width:90px; height:90px;opacity:0; }

/* 설정 */
section.setting                {}
ul.comList                {margin-top:8px; background:#fff;  }
ul.comList li             {min-height:56px; display:flex; padding:16px 20px; justify-content: space-between; border-top:1px solid #d8d8d8;  }
ul.comList li:first-child             {border-top:0;  }
.setting ul.comList li a             {display:block; line-height:24px;    }
.setting ul.comList li p.left             {max-width:85%;  margin:auto 0;   }
.setting ul.comList li p.left strong           {font-size:15px; }
.setting ul.comList li p.left span             {display:block; margin-top:5px;  }
.setting ul.comList li p.left span.txt-s       {font-size:10px;  margin:0; color:#8f8f8f;   }
.setting ul.comList li .btns             {margin:auto 0;   }
.setting ul.comList li a.set-id             {padding-left:20px; background:url(../img/common/ic-set-person.svg) no-repeat 0 49%; background-size:15px auto;  }
.setting ul.comList li a.set-history        {padding-left:20px; background:url(../img/common/ic-set-export.svg) no-repeat 0 49%; background-size:15px auto;  }
.setting ul.comList li a.set-marker           {padding-left:20px; background:url(../img/common/ic_set_marker.svg) no-repeat 0 49%; background-size:15px auto;  }
.setting ul.comList li a.set-qa             {padding-left:20px; background:url(../img/common/ic_set_qa.svg) no-repeat 0 49%; background-size:15px auto;  }
.setting ul.comList li a.set-share          {padding-left:20px; background:url(../img/common/ic-set-share.svg) no-repeat 0 49%; background-size:15px auto;  }
.setting ul.comList li a.set-resrch         {padding-left:20px; background:url(../img/common/ic_set_satisfaction.svg) no-repeat 0 49%; background-size:15px auto;  }
.setting ul.comList li a.set-notice         {padding-left:20px; background:url(../img/common/ic_set_notice.svg) no-repeat 0 49%; background-size:15px auto;  }
.setting ul.comList li a.set-marker             {padding-left:20px; background:url(../img/common/ic_set_marker.svg) no-repeat 0 49%; background-size:15px auto;  }
.setting ul.comList li a.set-data            {padding-left:20px; background:url(../img/common/ic_set_data.svg) no-repeat 0 49%; background-size:15px auto;  }
.setting ul.comList li.guideBox         {display:block;    }
.setting ul.comList li.guideBox p         {margin-bottom:10px;     }

.onOffChk           {display:inline-block;  margin:auto 0; position:relative; width:40px; height:26px; padding:2px; border-radius:18px; background:rgba(120, 120, 128, 0.16); overflow:hidden; }
.onOffChk span          {content:""; position:absolute; width:100%; height:100%; top:0; left:0; z-index:0; }
.onOffChk input     {position:absolute; opacity:0; width:40px;z-index:3; width:100%;   }
.onOffChk em        {display:block; position:relative; z-index:2; width:22px; height:22px; background:#fff;  border-radius:50%;     }
.onOffChk input:checked + em        {float:right;      }
.onOffChk input:checked ~ span        { background:#7665e4      }



.qnaList            {margin-top:8px; background:#fff; }
.qnaList li         {padding:15px 20px 20px;  }
.qnaList li p         {position:relative;width:95%;word-break:break-all;}
.qnaList li p::after     {content:""; position:absolute; width:10px; height:10px; top:0px; right:-18px; background:url(../img/common/arrow-select-down.png) no-repeat 100% 50%; background-size:10px; transition: .6s; }
.qnaList li.on  p::after    {transform: rotate(180deg); }
.qnaList li .detail        {margin-top:10px;  transition: .6s;display:none}
.qnaList li.on .detail        {padding-top:10px;  display:block}

/* 만족도 */
.choiceForm             {}
.choiceForm select             {width:100%; height:50px; margin-top:15px;  }
.choiceForm ul.choice             {display:flex; padding:20px 0 0;}
.choiceForm ul.choice li          {flex:1; display:flex; text-align: center; flex-direction: column;}
.choiceForm ul.choice li label    {display:block; border-radius: 50%; margin: 0 auto;  }
.choiceForm ul.choice li label input    {width:100%; height:100%; border-color:#fff;}
.choiceForm ul.choice li label input:checked    {border-color:#5036fc;}
.choiceForm ul.choice li:nth-child(1) label input:checked    {border-color:#f297c8; border-width:12px;}
.choiceForm ul.choice li:nth-child(2) label input:checked    {border-color:#f297c8}
.choiceForm ul.choice li:nth-child(3) label input:checked    {border-color:#f297c8}
.choiceForm ul.choice li:nth-child(4) label input:checked    {border-color:#9f9fa1}
.choiceForm ul.choice li:nth-child(7) label input:checked    {border-width:12px;}
.choiceForm ul.choice li:nth-child(1) label    {width:42px; height:42px; border:1px solid #f297c8; }
.choiceForm ul.choice li:nth-child(2) label    {width:32px; height:32px; border:1px solid #f297c8; margin-top:5px; }
.choiceForm ul.choice li:nth-child(3) label    {width:26px; height:26px; border:1px solid #f297c8; margin-top:8px; }
.choiceForm ul.choice li:nth-child(4) label    {width:23px; height:23px; border:1px solid #9f9fa1; margin-top:10px; }
.choiceForm ul.choice li:nth-child(5) label    {width:26px; height:26px; border:1px solid #5036fc; margin-top:8px; }
.choiceForm ul.choice li:nth-child(6) label    {width:32px; height:32px; border:1px solid #5036fc; margin-top:5px; }
.choiceForm ul.choice li:nth-child(7) label    {width:42px; height:42px; border:1px solid #5036fc; }
.choiceForm ul.choice li span    {margin-top:auto; height:40px; padding:4px 0 0; font-size:12px; font-weight: 800; color:#1c1c1c; }

.choiceForm ul.select            {display:flex; padding:10px 0 0; flex-wrap: wrap;}
.choiceForm ul.select li         {position:relative; width:49%; padding:12px 15px 12px 15px; border:1px solid #d8d8d8; border-radius:6px; margin-top:5px;  }
.choiceForm ul.select li:nth-child(2n)         {margin-left:6px;}
.choiceForm ul.select li input[type=radio]         {border:0; margin-right:5px; background:url(../img/common/ic-ok-big_off.png) no-repeat 0 0; background-size:100%; }
.choiceForm ul.select li input[type=radio]:checked { background:url(../img/common/ic-ok-big.png) no-repeat 0 0; background-size:100%;}
.choiceForm ul.select li input[type=radio]:checked ~ em {position:absolute; left:-1px; top:-1px; width:100%; height:100%;  box-sizing: content-box;  border:1px solid #5036fc; border-radius:6px;   }
.choiceForm ul.select li span { display:inline-block; padding:2px 0 0 }


ul.resrchList       {background:#fff;}
ul.resrchList > li     {position:relative; padding:20px 20px; border-bottom:1px solid #d8d8d8}
ul.resrchList.noline > li     {border:0; }
ul.resrchList > li p     {font-size: 15px; font-weight:bold;}
ul.resrchList > li:before     {display:none; content:""; left:0; top:0; position:absolute; width:100%; height:100%; background:#fff; z-index:2; opacity: .6;}
ul.resrchList > li.off:before     {display:block;content:""; left:0; top:0; position:absolute; width:100%; height:100%; background:#fff; z-index:2; opacity: .6;}
ul.resrchList > li.prev:before ,
ul.resrchList > li.now:before     {display:none;}


/* 마이데이터 */
.mydata-main        {padding-bottom:100px}
.mydata-main h3       {font-size:21px; line-height:27px; font-weight: 700; }

ul.vaccineList      {margin-top:0; }
ul.vaccineList li      {position:relative;}
ul.vaccineList li      {width:102%; background-size:98%; }
ul.vaccineList li .cont     {position:relative; width:98%; top:0; color:#fff; padding:15px 15px 30px; }
ul.vaccineList li.vac        {width:102%; background: url(../img/common/card-vaccine.png) no-repeat 50% 50%; background-size:100% 100%; }
ul.vaccineList li.vac.else        {height:160px; margin-bottom:10px; background-image: url(../img/common/card-vaccine2.png); }
ul.vaccineList li.imm        {width:calc(100% );  margin-bottom:10px; background:#fbfbfb; border-radius: 10px; border: solid 1px #d8d8d8; box-shadow: 3px 5px 3px 0 rgba(0, 0, 0, 0.16);}
ul.vaccineList li.imm .cont  {color:#1c1c1c; padding:15px 15px 10px; }
ul.vaccineList li.pcr        {width:102%; background: url(../img/common/card-pcr.png) no-repeat 50% 50%; background-size:100% 100%; }
ul.vaccineList li.vac .cont     {background: url(../img/common/img-vaccine.png) no-repeat 50% 50%; background-size:75px auto; }
ul.vaccineList li.vac.else .cont       {background:none;}
ul.vaccineList li.imm .cont       {background:none;}
ul.vaccineList li .cont strong    {font-size: 14px; }
ul.vaccineList li .cont table   {width:100%; opacity:0.9; margin-top:10px;}
ul.vaccineList li .cont th    {text-align:left; font-size: 12px; height:27px; opacity:0.9 }
ul.vaccineList li .cont td    {text-align:right; font-size: 12px;  }
ul.vaccineList li.blank    {width:100%; }
ul.vaccineList li.blank +  li.blank   {margin-top:10px; }
ul.vaccineList li.blank .cont   {position:static; width:100%; min-height:150px;  border:1px solid #d8d8d8; border-radius: 10px; color:#757782  }
ul.vaccineList li.blank.immg .cont   {min-height:100px; padding:15px 15px 10px;  }
ul.vaccineList li.blank.immg .cont .btn  { padding:10px 0 0px;  }
ul.vaccineList li.blank .cont .btn   { text-align: center; padding:20px 0 0px; }
ul.vaccineList li.blank .cont .btn  img  { width:54px;}
ul.vaccineList li.blank .cont .btn  span  { display:block; font-size: 12px; padding:5px 0 0;}

ul.vaccineList li .cont .detailinfo {padding:10px 15px; font-size:12px; background:#fff; color:#1c1c1c; border-radius: 10px;  }
ul.vaccineList li .cont .detailinfo strong {color:#5036fc; font-size:12px;}
ul.vaccineList li .cont .detailinfo p {font-weight: bold; min-height:30px;}


.layer-myvaccine .tit        {text-align: center; font-size:17px; color:#1c1c1c; font-weight: 800;margin-bottom: 10px;}
.layer-myvaccine .pcr .cont img        {width:100px; margin-top:20px;}
.layer-myvaccine .immCont               {padding:18px 15px; margin-top:15px; border-radius:3px; border:1px solid #d8d8d8; background:#fbfbfb; }
.layer-myvaccine .immCont table          {width:100%}
.layer-myvaccine .immCont table th       {width:50%; text-align: left; line-height:27px;}
.layer-myvaccine .immCont table td       {width:50%; text-align: right;}



ul.snsSelect      {display:flex; }
ul.snsSelect li   {width:25%; text-align: center;}
ul.snsSelect li img   {width:56px; }
ul.snsSelect li span   {display:block; font-size:10px; font-weight: 800; margin-top:5px; }

/* main */
.mainCotents            {padding-bottom:50px; }
.mainCotents .date            {margin:30px 20px 0; overflow: hidden; }
.mainCotents .date span         {float:left; font-size: 14px; font-weight: 700; }
.mainCotents .date a            {float:right; font-size: 13px; }
.mainCotents .date a em            {display:inline-block; width:8px; height:8px; background: url(../img/common/arrow-map-layer.png) no-repeat 98% 0; background-size:5px auto; }
.mainCotents article            {border:1px solid #e1e5eb; border-radius: 10px; background:#fff; margin:0 20px; overflow: hidden; }
.mainCotents article + article            {margin-top:12px; }
.mainCotents .myInfo            {margin-top:5px;  }
.mainCotents .myInfo ul li      {background:#fff; padding:16px 19px; line-height:33px; overflow: hidden; display:flex; justify-content: space-between; }
.mainCotents .myInfo ul li + li  {border-top:1px solid #e1e5eb;  }
.mainCotents .myInfo ul li strong      {  font-size:14px; line-height:20px; color:#1c1c1c; vertical-align: top; overflow: hidden; white-space: nowrap; text-overflow:ellipsis ; }
.mainCotents .myInfo ul li strong em    {display:block; font-size:10px; color:#8f8f8f; font-weight: 400; line-height:14px; }
.mainCotents .myInfo ul li button      {}
.mainCotents .myInfo ul li.nodata     {}
.mainCotents .myInfo ul li.nodata strong  {line-height:34px;}

.mainCotents .placeChk        { }
.mainCotents .placeChk div       {padding:13px 15px; background:url(../img/common/illust01.png) no-repeat 100% 100%; background-size:120px auto}
.mainCotents .placeChk div em        {display:block; font-size:12px; background: url(../img/common/arrow-map-layer.png) no-repeat 98% 0; background-size:5px auto; }
.mainCotents .placeChk div strong    {display:block; margin-top:8px; line-height:24px; font-size:18px; font-weight: 700; color:#1c1c1c  }
.mainCotents .placeChk div strong em   {display:inline; font-size:18px; font-weight: 700; color:#5036fc;background: none!important;}
.mainCotents .placeChk div span      {display:block; margin-top:10px; font-size:10px; color:#8f8f8f;  }
.mainCotents .placeChk.nodata div       {padding:13px 15px; background:url(../img/common/illust01.png) no-repeat 100% 20px; background-size:120px auto}
.mainCotents .placeChk.nodata span      {margin-top:0; padding-bottom:10px; }

.mainCotents .sticker       {padding:13px 15px;}
.mainCotents .sticker .tit       {font-weight:700; background: url(../img/common/arrow-map-layer.png) no-repeat 98% 3px; background-size:5px auto;  }
.mainCotents .sticker .tit em       {font-weight:700; color:#5036fc}
.mainCotents .sticker ul.sticker-list       {display: flex;margin-top: 20px;flex-wrap: wrap;flex-direction: row;justify-content: flex-start;}
.mainCotents .sticker ul.sticker-list li      {width:33.3%;text-align:center;}
.mainCotents .sticker ul.sticker-list li img      {width:100%; width:50px;}
.mainCotents .sticker ul.sticker-list li span      {display:block; font-size: 10px; }



.topMent        {font-size:12px; color:#8f8f8f; line-height:16px; text-align: center; padding-bottom:8px; }
.addressBox     {background:#f6f4f5; border-radius: 8px; height:50px; text-align: center;}
.addressBox em     {display:block; padding-top:9px; font-weight: 700;   }
.addressBox span   {display:block; font-size: 10px; line-height:14px; color:#8f8f8f }



/* 다이어리 */
.float_btn      {position:fixed; z-index:1000; right:18px; bottom:70px; width:54px; height:54px; background:url(../img/common/btn-plus.png) no-repeat 0 0; background-size: 100% auto; overflow: hidden; text-indent: -2000px; }

.diaryMain          {padding:20px;}
.diaryMain .date    {display:flex; justify-content: space-between;  }
.diaryMain .date span    {width:calc(100% - 50px); display:inline-block; padding-left:15px; font-size: 14px; font-weight: 700; background:#fff; border-radius: 10px;  height:40px; line-height:40px; }
.diaryMain .date button  {width:40px; height:40px; background:url(../img/common/btn-location.png) no-repeat 0 0; background-size:38px auto }
.diaryMain .stateChkList  {padding:20px 15px ; border:0; }
.diaryMain .stateChkList ul {padding:0; border:0; margin-top:8px; }
.diaryMain .stateChkList .tit  { }
.diaryMain ul.diary-list  {padding:0; border:0; margin-top:8px; }
.diaryMain ul.diary-list li.place      {position:relative; background:#fff; padding:13px 15px; line-height:20px; display:flex; justify-content: space-between; border:1px solid #e1e5eb;  border-radius: 10px; }
.diaryMain ul.diary-list li.place::after      {content:""; position:absolute; right:15px; width:5px; height:10px; margin-top:-5px; top:50%; background: url(../img/common/arrow-map-layer.png) no-repeat 98% 0; background-size:5px auto;}
.diaryMain ul.diary-list li.place strong {  
  font-size: 14px;
    line-height: 20px;
    color: #1c1c1c;
    vertical-align: top;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: 
    -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width:90%;
}
.diaryMain ul.diary-list li.place strong em    {display:block; font-size:10px; color:#8f8f8f; font-weight: 400; line-height:14px; }
.diaryMain ul.diary-list li.move      {padding-left:32px; height:43px; background:url(../img/common/line-dash.png) repeat-y 15px 0 ; background-size:1px auto;}
.diaryMain ul.diary-list li.move span      {display:inline-block; line-height:43px; padding-right:10px; font-size:13px; color:#626471; background: url(../img/common/arrow-map-layer.png) no-repeat 100% 49%; background-size:5px auto; }
.diary-list     {}
.diary_del{width:60px;height:30px;background: #E91953;color:#fff;margin-right: 20px;margin-top: 2px; border-radius: 3px;}


.loactionAdd ul       {display:flex; width:90%; margin:auto; justify-content: space-between;}
.loactionAdd ul.vac li       {width:50%; text-align: center;}
.loactionAdd ul li       {width:33.3%}
.loactionAdd ul li button       {width:100%;padding-top:62px; font-size:13px; color:#1c1c1c; background:url(../img/common/btn-plus-gray.png) no-repeat 50% 0; background-size:54px auto}



.mapArea    {position:absolute; left:0; top:0; width:100%; height:calc(100vh - 110px); margin-top:48px; overflow: hidden;}
.mapArea > img   {width:100%; }
.mapArea .history   {position:absolute;  }
.mapArea .history span.bul   {display:block; margin:5px auto 0; width:16px; height:16px; border-radius: 50%; overflow: hidden; background:#5036fc}
.mapArea .history strong   {position:relative; display:block; font-size:14px; font-weight: 800; padding:7px 25px 7px 10px; border-radius: 10px;  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);  border: solid 1px #e1e5eb; background:#fff; }
.mapArea .history strong::after   {content:""; position:absolute; right:10px; top:50%; margin-top:-5px; width:5px; height:10px; display:block; background: url(../img/common/arrow-map-layer.png) no-repeat 100% 49% #fff; background-size:5px auto;}
.mapArea .history strong em  {display:block; font-size:10px; color:#8f8f8f; line-height:1.35; margin-bottom:4px; }
.mapArea .date    {position:absolute; top:30px; width:calc(100% - 40px); left:20px; display:flex; justify-content: space-between;  }
.mapArea .date span    {width:calc(100% - 50px); display:inline-block; padding-left:15px; font-size: 14px; font-weight: 700; background:#fff; border-radius: 10px;  height:40px; line-height:40px; }
.mapArea .date button  {width:40px; height:40px; background:url(../img/common/btn-list.png) no-repeat 0 0; background-size:38px auto }




.dateSelect         {}
.dateSelect  .flatpickr-calendar.inline        {height:300px;}
.dateSelect  .flatpickr-calendar.inline .flatpickr-day        {margin-top:1px;}
.dateSelect .titBox         {text-align: center;}
.dateSelect .titBox strong         {display:block; text-align: center; }
.dateSelect .titBox span.ampmForm          {border-radius: 7px; margin-top:7px; }
.dateSelect .titBox span.ampmForm button         {width:80px;}


.location     {padding:20px 0 ;}
.location.top     {padding:20px ;}



.setting_agree        {font-size:14px; line-height: 18px; padding:0 0 50px}
.setting_agree h2     {font-size:22px; line-height: 36px; margin-top:10px; color:#5036fc;  }
.setting_agree .contTxt     {margin-top:15px; margin-bottom:35px }
.setting_agree .contTxt p     {margin-top:20px; }
.setting_agree .linBox       {border:1px solid #d8d8d8; background:#fbfbfb; padding:15px; margin-top:8px }
.setting_agree .linBox strong       {font-size:14px; }
.setting_agree .linBox p       {font-size:13px; margin-top:7px; line-height:20px;  }
.setting_agree .linBox p a     {color:#566aff; }
.setting_agree .info       {text-align: center; padding:15px 0 20px; font-size:13px; line-height:18px; }


.info_guide{width:100%;height:30px;background:rgb(175, 175, 175);line-height: 30px; text-align: center;border-radius: 50px;font-size: 14px;color:#fff;font-weight: 600;margin-bottom: 20px;}

.share_area{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.share_area li {
  width:48%;
}
.share_area li a{
  display: inline-block;
  width:100%;
  border:2px solid #eee;
  color:#aeaeae;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  height:45px;
  border-radius: 3px;;
  line-height: 45px;
}
.share_area li a.on{
  border:2px solid #5036FC;
  color:#5036FC;
}
.sh_sms textarea{
  padding:20px;
  width:100%;
  height:250px;
  resize: none;
  border:1px solid #eee;
  background:#f7f5f6;
  border-radius: 15px;
  margin-top: 15px;
  font-family:"NanumSquareRound";
}
.other_pop .layerBody{
  height: 70vh;
}
.other_pop .chkList{
  margin-top: 20px;
}
.other_pop .btn-l{
  width: 100% !important;
  margin-top: 20px;
}
.mt12{
  margin-top: 12px!important;
}
.ch_del{position:absolute;bottom:0;width:50%;padding:0 5%;top:6px;right:0;}
.ch_del .btnBox	{margin-top:0; overflow: hidden;}
.ch_del .btnBox button	{float:left;border:1px solid rgba(255, 255, 255, 0.384); height:32px;border-radius: 20px!important; }
.ch_del .btnBox button.yes	{font-weight: 800;}
.ch_del .btnBox .half	{width:48%; }
.ch_del .btnBox button	{ border-radius: 0; }
.ch_del .btnBox {width: 100%;display: flex;justify-content: space-between;}
.pcr_ava .diaryDetail ul.diarychk-2{
  padding:0;
}
.pcr_ava .diaryDetail ul.diarychk-2 .select2 select{
  display: inline-block;
  width:48%;
  margin-top: 0 !important;
  background: url(../img/common/arrow-select-down.png) no-repeat 83% 50%;
  background-size: 10px;
}

.pcr_ava .select_area{
  display: flex;
  width:100%;
  justify-content: space-between;
}
.w100{
  width:100% !important;
}
.w114{
  width:114px !important
}
.p0{
  padding: 0 !important;
}

input::placeholder {
  color: #000000!important; font-weight:800;font-family: 'NanumSquareRound',sans-serif;
}

.item-list { overflow: hidden; }

.item-list .item {
  position: relative!important;
  width: 100%!important;
  background: #FFF;
}

.item-list .item > div {
  padding: 10px;
}

.item-list .item .action {
  position: absolute;
  width: 80px;
  height: 100%;
  top: 0;
  border: 0;
  color: #fff;
  outline: none;
}

.item-list .item .action:first-child::before, .item-list .item .action:last-child::before {
  position: absolute;
  top: 0;
  content: '';
  width: 2000px;
  height: 100%;
}

.item-list .item .action:last-child { right: -82px; }

.item-list .item .action:last-child::before { left: 80px; }

.item-list .item .action, .item-list .item .action::before { background: #E74C3C; }

.item-list.example-3 .action { width: 140px; }

.item-list.example-3 .item .action:first-child { left: -140px; }

.item-list.example-3 .item .action:first-child::before { right: 140px; }

.item-list.example-3 .item .action:last-child { right: -140px; }

.item-list.example-3 .item .action:last-child::before { left: 140px; }

.disease{
  display: flex;
  margin-top: 10px;
  font-weight: 900;
  justify-content: space-between;
}
.disease p:nth-child(2) span{
  padding:5px 15px;
  background:#E91953;
  color:#fff;
  border-radius: 3px;
}
.disease_text{
  padding:10px;
  background:#eee;
  width:100%;
  height:80px;
  overflow-y: scroll;
  font-size: 14px;
}
.tb{
  font-weight: 900;
  color:#5036fc;
}
.loaction_layout .map_area{
  padding:19px 19px;
}

.guide_txt{
  border:1px solid #d8d8d8; background:#fbfbfb; border-radius:3px; height:100px; padding:10px;  overflow: auto;
}
.kakao_layout li{
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.kakao_layout li:last-child{
  margin-bottom:110px;
}
.kakao_layout p{
  margin-left:8px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile_area{
  margin-left:4px;
}
.profile_area img{
  width: 60px;
  height:60px;
  object-fit:cover;
  border-radius:22px;
}
.export_btn{
  position:fixed;
  width:100%;
  bottom:60px;
  background: #ccc;
  color: #626471;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.export_btn a{
  width:40%;
  text-align: center;
  height:50px;
  line-height: 50px;
}
.export_btn a:nth-child(2){
  background:#5036fc;
  color:#fff;
  width:60%;
}














/****************************************************    ADD   **********************************************************/
.diary_manual .search     {position:relative; background:#eeeef0; height:36px; border-radius:3px;  }
.diary_manual .search input     {padding-left:40px; border:0; width:100%; height:36px; background:url(../img/common/ic-srch.png) no-repeat 15px 50%; background-size:15px;}
.diary_manual .search button.clear     {position:absolute; width:20px; height:20px; right:7px; top:7px;  background:url(../img/common/ic-srch-cancel.png) no-repeat 50% 50%; background-size:15px; }
.diary_manual .map     {margin-top:5px; width:100%; height:50vh; background: url(../img/common/map-sample2.png) no-repeat 0 0; background-size:cover}
.diary_manual .address     {border:1px solid #d8d8d8; margin-top:5px; padding:10px 0 10px 40px; background:url(../img/common/ic-pin.png) no-repeat 15px 50%; background-size:16px; }
.diary_manual .address strong     {font-size:16px; color:#1c1c1c;  }
.diary_manual .address p     {font-size:12px; color:#8f8f8f }
.diary_manual .btnBox     {}

.diary_manual .prevTit    {padding:15px 0 5px;  }
.diary_manual .prevTit strong    { font-size:14px; color:#1c1c1c;  }
.diary_manual ul.prevList        {border-bottom:1px solid #eee; }
.diary_manual ul.prevList li      {background:#fff; padding:16px 19px; display: flex;align-items: center;}
.diary_manual ul.prevList li   {border-top:1px solid #eee;  }
.diary_manual ul.prevList li em.bookmark {float:left; width:20px; height:34px; margin-right:5px; background: url(../img/common/ic-star-off.png) no-repeat 50% 50%; background-size:20px auto; transition: .3s;flex-shrink: 0; }
.diary_manual ul.prevList li em.bookmark.on {background-image: url(../img/common/ic-star-on.png)  }
.diary_manual ul.prevList li strong      {float:left;font-size:14px;color:#1c1c1c; vertical-align: top;  }

ul.formBox li input[type=number]   {width:100%; height:32px; border:0; background:transparent; font-size:14px; }
ul.formBox li input[type=number]::placeholder   {color:#8f8f8f; font-size:14px; }

/* 1102 */
#postcode_layer{border:1px solid #ccc!important;border-radius: 4px!important;}