@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lobster&family=Varela+Round&display=swap|Material+Icons');
@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp);
.material-icons-outlined,
.material-icons{
  font-size: 1.3rem;
  vertical-align: middle;
  margin-inline: 0.5rem ;
}
/* Light mode */
@media (prefers-color-scheme: light) {
    :root{
        --color1 : rgb(112, 249, 215); --color1_2 :rgb(192, 237, 95); --color1_dark: #6beecd;
        --color2 : #81d5d4;
        --color3 : #e35252; 
        --color4 : rgb(141, 68, 164);
        --color_TblockBG : #f4f5f2;
        --color_TblockLine : #304d62;
        /* --color1: rgb(178 229 216);
        --color1_2: rgb(192, 237, 95);
        --color1_dark: #a4c7be;
        --color2: rgb(219 212 179); */

        /* --color1: rgb(5 207 157);
        --color1_2: rgb(192, 237, 95);
        --color1_dark: #2db391;
        --color2: rgb(184 221 64); */

        /* --color1: rgb(219 212 179);
        --color1_2: rgb(192, 237, 95);
        --color1_dark: #cdc28d;
        --color2: #d3c670; */

        --color_F0 : #000;
        --color_F1 : #111; 
        --color_F3 : #333;
        --color_F6 : #666;    
        --color_Fd : #ddd;  
        --color_Fdone : #ddd;
        --color_Fef : #efefef; 
        --color_Ff5 : #f5f5f5;  
        --color_F_c : #ccc;  
        --color_Ff: #fff;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root{
      --color1 : #0ac9c5; --color1_2 :rgb(165, 205, 3); --color1_dark: #0d6a87;
      --color2 : #9acf27;
      --color3 : #d74c14; 
      --color4 : rgb(141, 68, 164);
      --color_TblockBG : #333333;
      --color_TblockLine : #f4f5f2;
      --color_F0 : #fff; 
      --color_F1 : #f5f5f5;
      --color_F3 : #efefef;
      --color_F6 : #ccc;    
      --color_Fd : #2a2a2a; 
      --color_Fdone : #242526;  
      --color_Fef : #222;
      --color_Ff5 : #111;    
      --color_F_c : #999;  
      --color_Ff: #333;
  }
}
  :root{
      --sortW: 10rem;
      --font-face1 : 'Varela Round', sans-serif;
      --font-face2 : 'Lobster', cursive;
      --font-face3 : 'Archivo Black', "Arial Black", sans-serif;
      --font-face4 : Microsoft JhengHei, "微軟正黑體", Arial, Helvetica, sans-serif;
  }
html,body{
	margin:0;
	padding:0; 
	font-family:var(--font-face1); 
	font-size:18px;
	line-height:110%;
	color:var(--color_F3);
	font-weight:300;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
	background: var(--color_Fd);
}

*{ outline:0; border:0; }
h1, h2, h3, h4, h5{ margin:0; padding:0;  color:var(--color_F0); line-height:120%; font-weight: 700; font-family: var(--font-face1)}
h1{ font-size:2.3rem; letter-spacing:-0.1rem; text-transform: uppercase;}
h2{ font-size:2rem; font-weight:300; letter-spacing:-0.1rem;}
h3{ font-size:1.5rem; font-weight:100; letter-spacing:-0.08rem;}
h4{ font-size: 0.9rem;}
h5, p, span, font{ font-size: 1rem;}

@media only screen and (max-width:800px){
    h1{ font-size:2rem;}
    h2{ font-size:1.6rem; }
    h3{ font-size:1.3rem;}
    h4{ font-size: 0.7rem;}
    h5, p, span, font{ font-size: 0.8rem;}
}
ul,ol,li{ margin:0; padding:0;}
ul ol{ list-style:lower-alpha;}
li{ margin-left:20px;}
a{ text-decoration:none; color: var(--color5);}
a:hover{ color:var(--color1); }

.fs1{font-size: 1rem;}
.fs2{font-size: 2rem;}
.fs3{font-size: 3rem;}
.fs4{font-size: 4rem;}
.mar-inline0{margin: 0;}
.mar-inline1{margin: 0.5rem;}
.mar-inline2{margin: 0.8rem;}



.closeCTA{
    position: absolute;
    top: -3rem;
    right: 0;
    background: var(--color_F3);
    color: var(--color_Ff);
    padding:0.5rem 1rem;
    border-radius: 1.5rem;
    cursor: pointer;
}
.closeCTA:hover{
    background: var(--color_Ff);
    color: var(--color_F3);
}
.closeCTA span{margin: 0;}




.tremsPop{
    position: fixed;
    display: none;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(54, 54, 54, 0.8);
}
.tremsPop > div{
    position: absolute;
    width: 600px;
    height: 700px;
    overflow-y: auto;
    border-radius: 1rem;
    background-color: var(--color_Ff5);
    padding: 1.5rem;
    font-size: 14px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}
.close-trems{
    display: inline-block;
    padding: 0.8rem 1rem;
    border-radius: 0.8rem;
    margin-bottom: 5rem;
    background: var(--color1);
    color: var(--color_F3);
}

@media only screen and (max-width: 800px){
    .tremsPop{top:100px}
    .tremsPop > div{
        width: 80%;
        height: 80%;
    }
}





#WelcomeSay{font-size: 1rem; font-weight: bold; font-family: var(--font-face4);}
#WelcomeSay font{
    display: inline-block;
    padding: 0.2rem 0.8rem 0.2rem 0.5rem;
    border-radius: 2rem;
    font-size: 0.6rem ; 
    color: var(--color_Ff);
    background: var(--color_F0);
    top: -0.2rem;
    position: relative;
}
#WelcomeSay font span{font-size: 0.8rem; margin:0 0.3rem 0 0;}

.menuWrap{height:5rem; }
#warpper, #Preview, header, .postAds div{
  width: 88rem; 
  display: block;
  margin:0 auto;
}
#warpper,
.warpper-head{
  background: var(--color_Ff);
  padding:0;
  overflow: hidden;
  position: relative;
}
.warpper-head{ border-radius: 1rem 1rem 0 0; height: 1rem;}
#warpper{padding-bottom: 2rem;}
header{
  min-height:6rem; 
  position: relative;
}

#Login_first {padding: 2rem; text-align: center;}
#Login_first label{font-size: 1rem; line-height: 100% ;}

#FirstPage .boxinline{ margin: 0 0.5rem;}
.menuWrap label{
  display: inline-block; 
  text-align: center;
  width: 3rem; 
  line-height: 3.5rem; 
  font-size: 1.8rem;
  transform: rotate(90deg) translateX(5px);
  cursor: pointer;
}
.menuWrap > i:hover{cursor: pointer; color: var(--color1);}
.menuWrap label:hover{color: var(--color_Ff);}
.menu{
  display: none;
  position: fixed; 
  background: rgba(1,1,1,0.5); 
  top:0; right: 0; bottom:0; left: 0;
  z-index: 100;
}
 .menu > div{
  position: fixed;
  border-radius: 1rem 1rem 0 0;
  top: 5.5rem;  bottom: 0;  left: 4%;  right: 4%;
  z-index: 110;
  padding:2rem 0; margin: 0;
  background: var(--color_Ff);
  font-size: 1.5rem;
}

@media only screen and (max-width:800px){
  .menu > div{top: 4.5rem; overflow-y: auto;}
}
 .menu > div ul{ list-style:none;}
 .menu > div ul li{margin-left: 0;}
 .menu > div ul li a{
  display: block;
  line-height: 2.5rem;
  padding:0.4rem 2rem;
}
 .menu > div ul li a:hover{
  color:var(--color_Ff); 
  background: var(--color1); 
}

.menuWrap .member{padding:1rem 2rem; margin-top: 1rem;}
.menuWrap .member h3{
  background: linear-gradient(transparent 60%, var(--color3) 60%); 
  display: inline-block;
  padding-inline:0.5rem;
}
.menuWrap .member input{
  display: block;
  width:calc(100% - 1rem);
  padding-inline:0.5rem;
  margin-top: 1rem;
  background-color: var(--color_Ff);
  color: var(--color_F3);
  font-size: 1.1rem;
  line-height: 3rem;
  border: 1px solid var(--color_Fd);
  border-radius: 0;
  font-family: var(--font-face1);
}


.logo{
  height: 3rem; 
  position: absolute; 
  z-index: 100; 
  top:0.5rem; 
  right:0.8rem;
  margin-top: 0.3rem;
  /* text-indent: -99999px;
  background: url(../images/logo_full.gif) no-repeat;
  background-size: 100% auto; */
}
.logo h2{
  display:block;
  position:relative; 
  line-height: 70% !important; 
  font-weight: 700; 
  height: 3.1rem;
}
.logo h2 div{
  display: block;
  position: absolute;
  right: -0.1rem;
}
.logo span{ display: block; color: var(--color_F3); text-shadow: 1px 1px 1px var(--color_Ff); font-size: 0.8rem}
.logo dl{display: inline-block; color: rgb(112, 249, 215); margin: 0; padding: 0; transform: rotate(-15deg);}
.logo a:hover h2 dl{color: var(--color_F0);}
.logo a:hover h2{color: var(--color_F6);}
.logo a:hover span{color: var(--color_F0); }

@media only screen and (max-width:800px){
  .logo{ height: 2rem; top:0.5rem; right:2rem;}
  .logo h2{  font-size: 2rem;}
  .logo h2 div{display: block; position: absolute; right: -1.5rem;}
  .logo span{ display: none;}
}

.textContent{
  margin: 2rem 4rem;
}
@media only screen and (max-width:800px){
  .textContent{
    margin: 2rem 2rem;
  }
}
.textContent p{
  font-size: 14px;
  line-height: 20px;
}
.textContent a{
  display: inline-block;
  background: linear-gradient(transparent 60%, var(--color1_dark) 60%);
}

.textContent a:hover{background: linear-gradient(transparent 60%, var(--color_Fef) 60%);}

/* ---------------- blocks ---------------*/

#block .align{
  display: inline-table; 
  text-align: center;
  width: 16.66%;
  margin: 0.5rem 0;
  padding: 0;
}
#block .align > div,
.TopIntro{
  display: block;
  font-size: 0.8rem;
  text-align: left;
  width: 10rem;
  height: 10rem;
  vertical-align: top;
  border-radius: 1rem;
  padding: 1rem;
  margin: 0 auto;
  box-shadow: 0.3rem 0.3rem 0.3rem var(--color_Fef);
  position: relative;
}
.TopIntro{
  width: 80%; 
  height: inherit; 
  margin: 1rem 0.5rem 2rem 0.5rem;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.TopIntro .adsContent{
  font-size: 0.8rem;
  line-height: 1.2rem;
  letter-spacing: 0.1rem;
  font-weight: 400;
  color: var(--color_F3);
}
@media only screen and (max-width:800px){
  .TopIntro{
    width: calc(100% - 3rem); 
    height: 10rem; 
    background: linear-gradient( var(--color1_2) 10%, var(--color1) 100%);
    color: #024f17;

    border-radius: 0.6rem;
    padding: 1rem;
    margin: 0.5rem;
    margin-top: 0; 
  }
  #block .align > div, .TopIntro{ }/*padding: 0.5rem;*/
  .TopIntro .adsContent{font-size: 1rem; line-height: 1.5rem;}
  #block .align > div{width: 10rem; height: 10rem; vertical-align: top;}
  #block .align > div{animation: none !important;}
}

#block .align > div:hover{
  cursor: pointer;
  position: relative;
  animation: popevent 0.2s normal forwards ease-in-out;
}
@keyframes popevent{
  from{transform: translate(0, 0); box-shadow: 0.3rem 0.3rem 0.3rem var(--color_Fef);}
  to{transform: translate(-0.2rem, -0.2rem); box-shadow: 0.8rem 0.8rem 0.5rem var(--color_Fd);}
}

#block .align > div:not(:hover){
  animation: popeventOut 0.5s normal forwards ease-in-out;
}
@keyframes popeventOut{
  from{transform: translate(-0.2rem, -0.2rem); box-shadow: 0.8rem 0.8rem 0.5rem var(--color_Fd);}
  to{transform: translate(0, 0); box-shadow: 0.3rem 0.3rem 0.3rem var(--color_Fef);}
}


#block{ 
  display: inline-block; 
  width: calc(100% - var(--sortW));
}

#WarpMoble #block{  width: 100%;}
#WarpMoble #block .align > div{
  padding: 1.5rem;
}

@media only screen and (max-width:1800px){
  #warpper, #Preview, header, .postAds div, .postAds{ width: 80%;}
  #block .align{width: 20%;}
}
@media only screen and (max-width:1600px){
  #block .align{width: 25%;}
  #warpper, #Preview, header, .postAds div{ width: 980px;}/*none*/
  html{font-size:16px;}
}
@media only screen and (max-width:1200px){
  #warpper, #Preview, header, .postAds div{ width: 800;}/*85%*/
  #block .align{width: 33.333%;}
}
@media only screen and (max-width:1100px){/*90%*/
}
@media only screen and (max-width:1000px){
  #WarpMoble{ width: 100% !important; position: relative; overflow-x: auto;}
  #WarpMoble > #block {width:calc(10rem * 6) !important;}
  #WarpMoble > #block .align{width: 12rem !important;}
  #WarpMoble > #block .align > div{white-space: nowrap; padding: 0.7rem;}
  #block .align > div *{white-space: normal;}
}
@media only screen and (max-width:800px){
  #warpper, .postAds div{ width: 95%;}
  html,body{font-size:14px;}
  #block{ width: 100%;}
  
  header{
    min-height: 5rem;
    position: fixed;
    z-index: 999;
    top:0;
    background: var(--color_Fd);
    width: 100%
  } 
  .menuWrap{height: 4rem;}
  .warpper-head{ margin: 0 auto; width: 95%}
  .mobileTOPmargin{width: 100%;}
  .mobileTOPmargin > div{
    padding-block:2.5rem; 
    margin-inline: auto;
    background: var(--color_Ff);
    background: var(--color_Ff);
    background: linear-gradient(180deg, var(--color1) 0%, var(--color_Ff) 50%, var(--color_Ff) 100%);
  }
  .mobileTOPmargin > div div.supBlockForPreview{height: 13.5rem; display: none;} /*for post.php preview*/
}

@media only screen and (max-width:1800px){
  .mobileTOPmargin > div{ width: 80%;}
}
@media only screen and (max-width:1200px){
  .mobileTOPmargin > div{ width: 85%;}
}
@media only screen and (max-width:1100px){
  .mobileTOPmargin > div{ width: 90%;}
}
@media only screen and (max-width:800px){
  .mobileTOPmargin > div{ width: 95%;}
}
@media only screen and (max-width:600px){
  #block .align{width: 50%;}
}
.btn_line{
	display: inline-block;
	float: right;
  font-size: 1.1rem;
  font-weight: 700;
	padding: 3px 0px 2px 10px;
  margin-top: 0.5rem ;
	height: 110%;
	line-height: 18px;
	color: var(--color_F0);
  background: linear-gradient(transparent 60%, var(--color2) 60%); 
	vertical-align: middle;
}
.btn_line:hover{color: var(--color_F0); background: linear-gradient(transparent 50%, var(--color3) 50%); }
.btn{
	display: inline-block;
	float: right;
	padding: 8px 15px;
  margin-top: 1rem ;
  border-radius: 20px;
	height: 18px;
	line-height: 18px;
	color: var(--color_Fef);
	background-color: var(--color_F0);
	vertical-align: middle;
}
.btn:hover{color: var(--color_F0); background-color: var(--color3);}


.Tregular{
  background: var(--color_TblockBG);
  border: 1px dotted var(--color_TblockLine);
}
.Tplus{
  background: var(--color_TblockBG);
  border: 1px solid var(--color2); }

.bgcDone{
    background: var(--color_Fdone);
    opacity: 0.5;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
  
}
.bgcDone:hover, .bgcDone:not(:hover){animation: none !important; cursor:not-allowed !important;}
.CHI{
    font-weight: 400; font-family:  var(--font-face4);
    font-size: 0.8rem !important;
}

.location{display: block;}
.location h2{ font-size: 1.5rem;}
.location h3{
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02rem;
  color: var(--color_F3);
  background: var(--color_Ff5);
  border:1px solid var(--color1);
  border-radius:0.5rem;
  padding: 0.2rem;
  max-width: calc(100% - 0.5rem);
  overflow-x: hidden;
  white-space: nowrap;
}
.wayToT{
    display: block; 
    padding-top:0.2rem; 
    height:calc(10rem/2);
}
.wayToT > div{
    display: inline-block;
    width: calc(50% - 0.2rem * 4);
    height: 84%;
    margin-inline: 0.2rem;
    border-radius: 50%;
    border: 0.2rem solid #70f9d7;
}
.wayToT > div.F,
.wayToT > div.M,
.wayToT > div.X{
    background-color: var(--color_F_c); 
    background-size: 95%;
    background-position: 50% 50%;
    position: relative;
    background-repeat: no-repeat;
}
.wayToT > div::before {
  content: attr(data-match);
  position: absolute;
  background-color: var(--color1);
  color: var(--color_Ff);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: -0.1rem;
  font-family: var(--font-face4);
  width:inherit;
  border-radius: 50%;
  text-align: center;
  top: 0rem; 
}
.wayToT > div::after {
  content: attr(name);
  position: absolute;
  color: var(--color_F0);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: -0.1rem;
  font-family: var(--font-face4);
  width:100%;
  text-align: center;
  top: 0rem;
  
}
.wayToT > div:nth-child(1).F{background-image: url(../images/img_WT.png);}
.wayToT > div:nth-child(1).M{background-image: url(../images/img_MT.png);}
.wayToT > div:nth-child(2).F{background-image: url(../images/img_WS.png);}
.wayToT > div:nth-child(2).M{background-image: url(../images/img_MS.png);}
.wayToT > div:nth-child(2).X{background-image: url(../images/img_XS.png);}

.adsHR{
  right: 0.5rem; 
  top: 1rem; 
  opacity: 0.5;
  position: absolute;
}
#block .align > div:hover .adsHR{opacity: 1;}
.adsHR label{color: var(--color3);}
.adsdate{
  right: 0.5rem; 
  bottom: 0.2rem; 
  position: absolute; 
  color: var(--color_F6);
  opacity: 0.5;
  font-size: 10px;
}
.adsContent{
  margin-top: 0.1rem; 
  font-size: 0.8rem;
  line-height: 1rem;
  white-space: nowrap !important;
  display: block;
  overflow-x: hidden;
}




/* ---------------- sortKeye ---------------*/
#sortKey{ 
	border-left: 0;
	border-right: 0;
	display:inline-block;
	padding:1rem 0 1.5rem 0; 
	width: calc(var(--sortW) - 0.5rem);
	vertical-align: top;
	/*border-right:1px solid #ddd;*/
}
#sortKey.pop{ margin-top:300px; }
#sortKey h4{
	margin: 0; 
  text-align:right;
}
#sortKey h4 label{
  display: inline-block;
  position: relative;
  font-size: 1rem;
  line-height: 2rem;
  transform: rotate(90deg);
}
#sortKey h4 font{ 
	margin: 0 auto; 
  font-size: 1rem;
	letter-spacing: 0; 
	position: relative;
    z-index: 2;
    display: inline-block;
    padding: 0.5em 1em;
    text-transform: uppercase;
    background-color: var(--color1);
    background: linear-gradient(to left, var(--color1_dark) 1%, var(--color1) 5%);
}

#sortKey ul{
  padding: 5px 0 15px 1rem; 
  margin-bottom: 5px; 
  color: var(--color_F3);
}
#sortKey ul,
#sortKey ul li{display:inline-block; line-height: 28px; vertical-align: top; }
#sortKey ul li{ 
	width:calc(100% - 6px);
	text-align: left; 
	padding: 0; 
	margin: 0 3px;
}
#sortKey ul li:hover strong{color: var(--color1);}
#sortKey ul li strong{
	margin: 0.3rem 0 0 0;
	display: block;
  font-weight: 700;
  font-family: var(--font-face1);
  font-size: 1rem;
  letter-spacing: -0.03rem;
}
#sortKey ul li div{display: none;}
#sortKey ul li div label{
	width:calc(100%-10px);
	display: block;
	padding: 3px 0px; 
  line-height: 120%;
	font-size: 0.7rem;
	cursor: pointer;
	letter-spacing: 0;
  position: relative;
	/*background:#efefef; 
	border-top:1px solid #ddd; */
}
#sortKey ul li div label:hover{ background: var(--color_F3); color: var(--color_F_c); }
#sortKey ul li div label.on{ background:var(--color_Fd); color: var(--color_F3); }
#sortKey ul li div label b{
  position: absolute;
  display: none;
  margin: -0.3rem 0 0 0.3rem;
  right: -0.1rem;
  text-align: center;
  font-size: 12px;
  width: 1.5rem;
  line-height: 1.5rem;
  border-radius: 50%;
  color:var(--color_F3);
  background: var(--color_Fd);
  transform:scale(0.7) ;
}
#sortKey ul li div label:hover b,
#sortKey ul li div label.on b{display: inline-block;}
#sortKey span{ display: none; }/*======all fill hind======*/

#sortKey a.btn{ line-height: 28px!important; 
	width: 70px!important; 
	background-image: none!important; 
	background-color:#999!important;  
	padding-right:0!important; 
	vertical-align: middle;
}
#sortKey a.btn:hover{background-color:#555!important;}
#sortKey a.clear{
	display: inline-block;
	float: right;
	padding: 8px 15px;
  border-radius: 20px;
	height: 18px;
	line-height: 18px;
	color: var(--color_F0);
	background-color: var(--color1);
	vertical-align: middle;
}

@media only screen and (max-width:1200px){
	#sortKey{width: 150px;}
}
@media only screen and (max-width:800px){
	#sortKey{width: 100%; border:0; background: none;}
	#sortKey ul{display: block;}
	#sortKey ul li{width: calc(33.33% - 16px);}
}




#BackTop{
  position: fixed;
  display: none;
  right: 0;
  bottom: 8rem;
  width: 2rem;
  line-height: 2rem;
  border-radius:0.5rem 0.5rem 0 0;
  color: var(--color1);
  background-color: var(--color_F6);
  transform:rotate(-90deg);
}
#BackTop::after{
  display: block;
  margin-left: 0.8rem;
  content: '>';
  transform: scale(1, 1.5);
}
#BackTop:hover{
  background: var(--color1_dark); 
  color: var(--color_Ff);
  cursor: pointer;
}

/*===================================form===================================*/

.loading-ring {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background: var(--color_F3) !important;
  }
  .loading-ring:after {
  content: " ";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  margin:0.3rem 0.3rem 0.3rem 0;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
  }
  @keyframes lds-dual-ring {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
  }
  #DetailForm{ width:800px;}
  #DetailForm td{ padding:0.5rem;}
  span.error{ color:red; display: none; }
  @media only screen and (max-width:800px){
      #DetailForm{ padding:1rem; width:calc(95% - 1rem); }
      #DetailForm td{ padding:0.2rem 0.1rem 1rem 0.1rem;}
      #DetailForm tbody > tr > td[valign="top"]{display:block !important; width: 100%;}
  }
  #signup_done::first-line{font-size: 1.5rem;}
  #signup_done{
      display:none;
      position: fixed;
      z-index: 999;
      width:20rem;
      margin-left: -11.5rem;
      padding:1.5rem;
      left:50%;
      top:1rem;
      background: #000;
      border-radius: 1.5rem;
      font-size: 0.8rem;
      line-height: 1.3rem;
      color: #fff;
      vertical-align: top;
  }
  #signup_done span strong{
      color: var(--color1);
      text-align: center;
      font-size: 55px;
      display: inline-block;
      float: left;
      width: 5rem;
      height: 5rem;
      line-height: 5rem;
      margin-right: 1rem;
      background: #fff;
      border-radius: 50%;
  }
  #signup_done a{color:var(--color1);}

  .DonePOP{
    opacity: 0;
    animation: fadeOut 5s ease;
  }
  @keyframes fadeOut{
      0% { opacity: 0; top: -100%; }
      5% { opacity: 1; top: 10%;}
      80% { opacity: 1; top: 10%; }
      100% { opacity: 0; top: -100%; }
  }

  .ApplyNow{ width: 20rem; display: inline-table; margin: 1rem;}
  .ApplyNow a {
    display: inline-block; 
    text-align:center;
    width:calc(50% - 0.3rem); 
    vertical-align: top;
    background: var(--color_F0);
    color:var(--color_Ff);
    line-height:3rem;
    border-radius: 0 2rem 2rem 0;
    cursor: pointer;
}
.ApplyNow a:first-child{
    border-radius: 2rem 0 0 2rem;
    border-right: 1px solid var(--color_Ff);
}

  .half{width:20rem;}
  @media only screen and (max-width:800px){
      .ApplyNow, .half{width:100%;}
  }
  .half label{
  }
  .half input[type="radio"]{
  display: none;
  }
  .half input[type="radio"] + label {
      display: inline-block; 
      text-align:center;
      width:calc(50% - 0.3rem); 
      vertical-align: top;
      background: var(--color_Ff5);
      color:var(--color_F0);
      line-height:2rem;
      border-radius: 0 1rem 1rem 0;
      cursor: pointer;
  }
  .half input[type="radio"]:first-child + label{
      border-radius: 1rem 0 0 1rem;
      background: var(--color_Ff5);
      color:var(--color_F0);
  }
  .half input[type="radio"] + label:before {
      content: "";
      display: inline-block;
      position: relative;
  }
  .half input[type="radio"]:checked + label:before {
      content: "✔";
      font-family: 'lucida grande';
      font-size: 0.5rem;
      margin-left:-0.5rem;
      line-height: 2rem;
      text-align: center;
  }
  .half input[type="radio"]:checked + label{
      background: var(--color_F0);
      color:var(--color_Ff);
  }
  
 .tickBoxWrap{display:flex; flex-wrap:wrap; gap:0.5rem;}
 dd.tickBox{ display: block; flex-grow:1; flex-shrink:1; margin:0;}
  /*
      display: block; flex-grow:1; flex-shrink:1;
  dd.tickBox.long{ width:12rem;}
  dd.tickBox{ display: inline-block; width:20%; margin-inline-start:0;}
  
  @media only screen and (max-width:800px){
      dd.tickBox{width: 25%;}
  }
  @media only screen and (max-width:600px){
      dd.tickBox{width: 33.33%;}
  }
  */
  dd.tickBox input{display: none;}
  .tickBox input[type="checkbox"] + label{
      position: relative;
      display: block;
      text-align:center;
      line-height: 1.5rem;
      margin:0.5rem 0;
      padding: 0.2rem 1.5rem 0.2rem 1rem;
      border: 1px solid transparent;
      background:var(--color_Ff5);
      border-radius:0.3rem;
      cursor: pointer;
  }
  .tickBox input[type="checkbox"] + label:hover{border: 1px solid var(--color_Fd);}
  .tickBox input[type="checkbox"]:checked + label{
      border: 1px solid var(--color1);
      background:var(--color_Fef);
      border-radius:0.3rem;
  }
  .tickBox input[type="checkbox"]:checked + label:before {
      position:absolute;
      display: block;
      border-radius:0.3rem;
      width: 1.5rem;
      right: 0;
      bottom: 0;
      content: "✔";
      font-family: 'lucida grande';
      color: var(--color_Ff);
      background:var(--color1);
      font-size: 0.3rem;
      text-align: center;
  }
  input[type="text"],
  input[type="password"]{
      line-height:2rem;
      width: 100%;
      margin-bottom:10px;
      border-bottom: 2px dotted var(--color_F3);
      background: var(--color_Ff);
      color: var(--color_F3);
      border-radius: 0;
  }
  .err{border:1px solid red;}
  .switch{
       display: inline-block;
       position: relative;
       float: right;
       background-color: var(--color_F3);
       color: var(--color_Ff);
       overflow: hidden;
       border-radius: 1.5rem;
       border: 4px solid var(--color_F3);
       line-height: 2.2rem;
       height: 2.2rem;
       width: 6.6rem;
       padding: 0 0.3rem;
       white-space: nowrap;
  }
  
  .switch a{
      display: inline-block;
      position: relative;
      padding: 0 0.6rem;
      z-index:1;
      cursor: pointer;
      font-weight:bold;
  }
  @media only screen and (max-width:800px){
  .switch{width: 6.4rem;}
  }
  .switch::before{
      display: block;
      content: ' ';
      position: absolute;
      z-index:0;
      top:0%;
      width: 53%;
      height: 2.2rem;
      background-color: var(--color1);
      border-radius: 1rem;
  }
  .switch.C::before{
      left: 0.1rem;
  }
  .switch.T::before{
      left: 46%;
  }
  .switch.C a:first-child{
      cursor: auto;
      color: var(--color_F3);
  }
  .switch.T a:last-child{
      cursor:auto;
      color: var(--color_F3);
  }
  #create,
  #signOut,
  .IMstudy{
      float: right;
      display: inline-block;
      background-color: var(--color1);            
      color: var(--color_F3);
      border-radius: 2rem;
      line-height: 3rem;
      height: 3rem;
      font-size: 1rem;
      padding: 0 2rem;
      cursor: pointer;
      font-weight:bold;
  }
  #create:hover,
  #signOut:hover,
  .IMstudy:hover{
      background-color: var(--color_F3);
      color: var(--color_Ff);
  }

  
  
form#DetailForm .material-icons-outlined,
form#DetailForm .material-icons{ vertical-align: bottom; }
/*===================================form===================================*/





#footer{
  clear:both;
  display:block;
  background: var(--color_F3);
  color: var(--color_Fd);
  padding: 2rem;
  margin: 0 ;
  border-radius:1.5rem 1.5rem 0 0;
}