/*# sourceURL=/css/ttFriendship/main_teacher.css */
/*@ sourceURL=/css/ttFriendship/main_teacher.css */
@charset "utf-8";

/* config */
.border-box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
.after {
  content: "";
  height: 0;
  line-height: 0;
  clear: both;
  display: block;
  *zoom: 1;
}
.hidden {
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -999;
}
.blind {
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -999;
}
.list {
  list-style: none;
}
.border-all {
  border: 1px solid #e6e6e6;
}
.border-top {
  border-top: 1px solid #e6e6e6;
}
.border-bottom {
  border-bottom: 1px solid #e6e6e6;
}
.border-left {
  border-left: 1px solid #e6e6e6;
}
.border-right {
  border-right: 1px solid #e6e6e6;
}
.input-border {
  border: 1px solid #e0e0e0;
}
.poR {
  position: relative;
}
.poA {
  position: absolute;
}
.poF {
  position: fixed;
}
.poS {
  position: static;
}
.eng {
  font-family: 'Roboto', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica";
}
.pointer {
  cursor: pointer;
}
.vaM {
  vertical-align: middle;
}
.vaT {
  vertical-align: top;
}
.taL {
  text-align: left;
}
.taC {
  text-align: center;
}
.taR {
  text-align: right;
}
.bold {
  font-weight: bold;
}
.thin {
  font-weight: 400;
}
.m0auto {
  margin: 0 auto;
}
.underline {
  text-decoration: underline;
}
.clear5 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 5px;
}
.clear20 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 10px;
}
.clear20 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 20px;
}
.clear30 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 30px;
}
.clear50 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 50px;
}
.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}
.clamp {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.button {
  border: 0;
  outline: 0;
  cursor: pointer;
}
.letter-spacing {
  letter-spacing: -0.34px;
}
.fL {
  float: left;
}
.fR {
  float: right;
}
.vertical-top {
  position: relative;
  top: 0%;
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  -o-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}
.vertical_mid {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.vertical_bottom {
  position: relative;
  top: 100%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.tdnone {
  text-decoration: none;
}
.oh {
  overflow: hidden;
}
/* Parametic Mixins */
.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1s;
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.duration {
  transition-duration: 0.5s;
}
.pp_color {
  color: #4a65f6;
}
/***** config *****/
/* Variables */
/* 단위사이트 color */
/* Mixins */
.bg-white {
  background-color: #ffffff;
}
.bg-black {
  background-color: #000000;
}
.bg-trans {
  background: transparent;
}
.bg-navy {
  background-color: #172d56;
}
.bg-orange {
  background-color: #f68b33;
}
.bg-dark-navy {
  background-color: #101d35;
}
.bg-blue {
  background-color: #2763bb;
}
.bg-dark-blue {
  background-color: #00377a;
}
.bg-f1 {
  background-color: #f1f1f1;
}
.bg-f5 {
  background-color: #f5f5f5;
}
.bg-f7 {
  background-color: #f7f7f7;
}
.bg-f9 {
  background-color: #f9f9f9;
}
.bg-dd {
  background-color: #dddddd;
}
.bg-cc {
  background-color: #cccccc;
}
.bg-ee {
  background-color: #eeeeee;
}
.bg-33 {
  background-color: #333333;
}
.bg-44 {
  background-color: #444444;
}
.bg-55 {
  background-color: #555555;
}
.bg-cafe-clr {
  background-color: #7b4cb6;
}
.bg-entinfo-clr {
  background-color: #2763bb;
}
.bdrT {
  border-top: 1px solid #e1e1e1;
}
.bdrB {
  border-bottom: 1px solid #e1e1e1;
}
.bdrL {
  border-left: 1px solid #e1e1e1;
}
.bdrR {
  border-right: 1px solid #e1e1e1;
}
.bdrA {
  border: 1px solid #e1e1e1;
}
.bdrT2 {
  border-top: 1px solid #dddddd;
}
.bdrB2 {
  border-bottom: 1px solid #dddddd;
}
.bdrL2 {
  border-left: 1px solid #dddddd;
}
.bdrR2 {
  border-right: 1px solid #dddddd;
}
.bdrA2 {
  border: 1px solid #dddddd;
}
.bdr0 {
  border: none;
}
.w100p {
  width: 100%;
  clear: both;
}
.h100p {
  height: 100%;
}
.w1200 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.w1160 {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}
.w1100 {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.fL {
  float: left;
}
.fR {
  float: right;
}
.hidden {
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -9999px;
}
.oh {
  overflow: hidden;
}
.oh-x {
  overflow-x: hidden;
}
.oa {
  overflow: auto;
}
.overauto {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.bgrn {
  background-repeat: no-repeat;
}
.taC {
  text-align: center;
}
.taL {
  text-align: left;
}
.taR {
  text-align: right;
}
.vaM {
  vertical-align: middle;
}
.vaT {
  vertical-align: top;
}
.poR {
  position: relative;
}
.poA {
  position: absolute;
}
.poF {
  position: fixed;
}
.dpblock {
  display: block;
}
.dpinblock {
  display: inline-block;
}
.bgnone {
  background-image: none;
}
.tdnone {
  text-decoration: none;
}
.dpnone {
  display: none;
}
.bdrn {
  border: none;
}
.tdunder {
  text-decoration: underline;
}
.pointer {
  cursor: pointer;
}
.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}
.clamp {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nowrap {
  white-space: nowrap;
}
.border-box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.tbl {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
.after {
  content: "";
  height: 0;
  line-height: 0;
  clear: both;
  display: block;
  *zoom: 1;
}
.z0 {
  z-index: 0;
}
.z1 {
  z-index: 1;
}
.z5 {
  z-index: 5;
}
.z10 {
  z-index: 10;
}
.z20 {
  z-index: 20;
}
.z30 {
  z-index: 30;
}
.z50 {
  z-index: 50;
}
.z100 {
  z-index: 100;
}
.z200 {
  z-index: 200;
}
.z300 {
  z-index: 300;
}
.z400 {
  z-index: 400;
}
.z500 {
  z-index: 500;
}
.z1000 {
  z-index: 1000;
}
.z2000 {
  z-index: 2000;
}
.bgcover {
  background-size: cover;
}
.underline {
  text-decoration: underline;
}
.flexwrap {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.dpflex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flexCV {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.flexV {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.fdrow {
  flex-direction: row;
}
.fdcol {
  flex-direction: column;
}
.hauto {
  height: auto;
}
.breakall {
  word-break: break-all;
}
.lsnone {
  list-style: none;
}
.img-responsive {
  width: 100%;
  height: auto;
}
/* Mixins - transition */
.trans {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
/* Parametic Mixins */
/* fonts */
.f11 {
  font-size: 11px;
}
.f12 {
  font-size: 12px;
}
.f13 {
  font-size: 13px;
}
.f14 {
  font-size: 14px;
}
.f15 {
  font-size: 15px;
}
.f16 {
  font-size: 16px;
}
.f17 {
  font-size: 17px;
}
.f18 {
  font-size: 18px;
}
.f19 {
  font-size: 19px;
}
.f20 {
  font-size: 20px;
}
.f21 {
  font-size: 21px;
}
.f22 {
  font-size: 22px;
}
.f24 {
  font-size: 24px;
}
.f30 {
  font-size: 30px;
}
.f36 {
  font-size: 36px;
}
.f40 {
  font-size: 40px;
}
.f48 {
  font-size: 48px;
}
.f50 {
  font-size: 50px;
}
.f60 {
  font-size: 60px;
}
.lh16 {
  line-height: 16px;
}
.lh19 {
  line-height: 19px;
}
.lh20 {
  line-height: 20px;
}
.lh21 {
  line-height: 21px;
}
.lh22 {
  line-height: 22px;
}
.lh24 {
  line-height: 24px;
}
.lh25 {
  line-height: 25px;
}
.lh30 {
  line-height: 30px;
}
.lh36 {
  line-height: 36px;
}
.lh39 {
  line-height: 39px;
}
.lh40 {
  line-height: 40px;
}
.lh42 {
  line-height: 42px;
}
.lh50 {
  line-height: 50px;
}
.lh60 {
  line-height: 60px;
}
.lh12em {
  line-height: 1.2em;
}
.lh13em {
  line-height: 1.3em;
}
.lh14em {
  line-height: 1.4em;
}
.lh15em {
  line-height: 1.5em;
}
.lh16em {
  line-height: 1.6em;
}
.lh17em {
  line-height: 1.7em;
}
.lh18em {
  line-height: 1.8em;
}
.ls-1 {
  letter-spacing: -1px;
}
.fw100 {
  font-weight: 100;
}
.fw300 {
  font-weight: 300;
}
.fw400 {
  font-weight: 400;
}
.fw500 {
  font-weight: 500;
}
.fw600 {
  font-weight: 600;
}
.fw700 {
  font-weight: 700;
}
.fw900 {
  font-weight: 900;
}
.eng {
  font-family: 'Saira Semi Condensed', "sans-serif", "AppleGothic", "Arial", "verdana", "Helvetica";
}
/* margin.padding */
.clfix {
  *zoom: 1;
}
.clfix:before,
.clfix:after {
  display: block;
  line-height: 0;
  content: "";
}
.clfix:after {
  clear: both;
  height: 0;
}
.clearfix {
  display: inline-block;
}
.clr {
  clear: both;
}
.clr05 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 5px;
}
.clr10 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 10px;
}
.clr15 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 15px;
}
.clr20 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 20px;
}
.clr30 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 30px;
}
.clr40 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 40px;
}
.clr50 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 50px;
}
.clr100 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 100px;
}
.mp00 {
  margin: 0;
  padding: 0;
}
.m0auto {
  margin: 0 auto;
}
.mT-1 {
  margin-top: -1px;
}
.mT05 {
  margin-top: 5px;
}
.mT10 {
  margin-top: 10px;
}
.mT12 {
  margin-top: 12px;
}
.mT15 {
  margin-top: 15px;
}
.mT20 {
  margin-top: 20px;
}
.mT30 {
  margin-top: 30px;
}
.mT40 {
  margin-top: 40px;
}
.mT50 {
  margin-top: 50px;
}
.mT60 {
  margin-top: 60px;
}
.mR00 {
  margin-right: 0 !important;
}
.mR05 {
  margin-right: 5px;
}
.mR10 {
  margin-right: 10px;
}
.mR15 {
  margin-right: 10px;
}
.mR20 {
  margin-right: 20px;
}
.mR30 {
  margin-right: 30px;
}
.mB00 {
  margin-bottom: 0;
}
.mB01 {
  margin-bottom: 1px;
}
.mB03 {
  margin-bottom: 3px;
}
.mB05 {
  margin-bottom: 5px;
}
.mB08 {
  margin-bottom: 8px;
}
.mB10 {
  margin-bottom: 10px;
}
.mB15 {
  margin-bottom: 15px;
}
.mB20 {
  margin-bottom: 20px;
}
.mB30 {
  margin-bottom: 30px;
}
.mB35 {
  margin-bottom: 35px;
}
.mB40 {
  margin-bottom: 40px;
}
.mB50 {
  margin-bottom: 50px;
}
.mL00 {
  margin-left: 0;
}
.mL05 {
  margin-left: 5px;
}
.mL07 {
  margin-left: 7px;
}
.mL10 {
  margin-left: 10px;
}
.mL15 {
  margin-left: 15px;
}
.mL20 {
  margin-left: 20px;
}
.mL30 {
  margin-left: 30px;
}
.mL40 {
  margin-left: 40px;
}
.mL50 {
  margin-left: 50px;
}
.mL60 {
  margin-left: 60px;
}
.pT05 {
  padding-top: 5px;
}
.pT10 {
  padding-top: 10px;
}
.pT12 {
  padding-top: 12px;
}
.pT15 {
  padding-top: 15px;
}
.pT20 {
  padding-top: 20px;
}
.pT25 {
  padding-top: 25px;
}
.pT30 {
  padding-top: 35px;
}
.pT35 {
  padding-top: 35px;
}
.pT40 {
  padding-top: 40px;
}
.pT50 {
  padding-top: 50px;
}
.pT80 {
  padding-top: 80px;
}
.pR0 {
  padding-right: 0;
}
.pR10 {
  padding-right: 10px;
}
.pR20 {
  padding-right: 20px;
}
.pB08 {
  padding-bottom: 8px;
}
.pB10 {
  padding-bottom: 10px;
}
.pB20 {
  padding-bottom: 20px;
}
.pB30 {
  padding-bottom: 30px;
}
.pB40 {
  padding-bottom: 40px;
}
.pB50 {
  padding-bottom: 50px;
}
.pL10 {
  padding-left: 10px;
}
.pL15 {
  padding-left: 15px;
}
.pL20 {
  padding-left: 20px;
}
.pL30 {
  padding-left: 30px;
}
.pTB50 {
  padding: 50px 0;
}
.hs10 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 10px;
}
.hs20 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 20px;
}
.hs30 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 30px;
}
.hs40 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 40px;
}
.hs50 {
  clear: both;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: 50px;
}
/* shadow */
.shadow {
  box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.2);
}
/* Mixins - transition */
.trans {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.trans2 {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.trans3 {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/* gradation */
.bg-gradation {
  background: #ffffff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=0);
  /* IE6-9 */
}
.table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
html,
body {
  height: 100%;
}
.top_wrap {
  min-height: calc(100% - 20px);
}
.top_inner {
  padding-bottom: 7.5em;
  height: 100%;
}
footer {
  text-align: center;
  width: 100%;
  font-size: 1.3rem;
  padding: 20px 10px;
  border-top: 1px solid #f7f7f7;
  height: 11.1em;
  background-color: #f9f9f9;
  margin-top: 0 !important;
}
footer ul {
  text-align: center;
  overflow: hidden;
  display: inline-block;
}
footer ul li {
  float: left;
  padding: 0 5px;
  font-size: 1.3rem;
  font-weight: 300;
}
footer ul li:after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 15px;
  vertical-align: middle;
  background: #ccc;
  margin-left: 10px;
}
footer ul li:last-child:after {
  display: none;
}
footer ul li strong {
  color: #3d3d3d;
}
footer img {
  width: 85px;
  vertical-align: middle;
  margin-right: 10px;
}
footer.white {
  border-top: 1px solid #45465f;
}
footer.white ul li {
  color: #fff;
}
footer.white ul li strong {
  color: #fff;
  font-weight: 300;
}
footer.white .copyright {
  color: #fff;
  font-weight: 300;
}
@media (max-width: 725px) {
  .top_inner {
    padding-bottom: 0;
  }
  footer {
    margin-top: 0;
  }
}
@media (max-width: 599px) {
  .top_wrap {
    height: 750px;
  }
  .top_wrap .top_inner {
    margin-top: 0px;
  }
  .top_wrap .top_inner span.t_info {
    font-size: 1.3rem;
  }
  .main .top_wrap {
    height: auto;
    min-height: auto;
  }
  footer {
    font-size: 1.3rem;
    padding: 20px;
    margin-top: 0;
    height: auto;
    text-align: left;
  }
  footer ul {
    text-align: left;
  }
  footer ul li {
    float: left;
    padding: 3px;
    font-size: 1.3rem;
    letter-spacing: -0.04rem;
  }
  footer ul li:after {
    height: 10px;
    margin-left: 2px;
  }
  footer ul li:last-child:after {
    display: none;
  }
  footer img {
    width: 85px;
    vertical-align: middle;
    margin: 20px 0 10px 0px;
    display: block;
  }
  footer span.copyright {
    font-size: 1.3rem;
    display: block;
  }
}
body.login {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 30px 25px 10px 25px;
  position: relative;
}
.tip {
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 25px;
  background: #32334f;
  color: #fff;
  font-size: 1.5rem;
  padding: 13px 25px;
  box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.3);
}
.tip i {
  margin-right: 10px;
}
.login_wrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 45px auto;
  position: relative;
}
.login_wrap .bg_purple {
  position: absolute;
  top: -25%;
  right: -85%;
  width: 349px;
  height: 377px;
  background-image: url("/images/ttFriendship/main_t/purple.png");
  background-repeat: no-repeat;
  background-position: 90% top;
}
.login_wrap .bg_yellow {
  position: absolute;
  top: 30%;
  left: -170%;
  width: 450px;
  height: 292px;
  background-image: url("/images/ttFriendship/main_t/yellow.png");
  background-repeat: no-repeat;
  background-position: 90% top;
}
.login_wrap .bg_green {
  position: absolute;
  bottom: -22%;
  right: -150%;
  width: 447px;
  height: 384px;
  background-image: url("/images/ttFriendship/main_t/green.png");
  background-repeat: no-repeat;
  background-position: 90% top;
}
.login_wrap .bg_left_pp {
  position: absolute;
  top: 30%;
  left: -153%;
  width: 648px;
  height: 505px;
  background-image: url("/images/ttFriendship/main_t/left_pp.png");
  background-repeat: no-repeat;
  background-position: 90% top;
}
.login_wrap .bg_right_pp {
  position: absolute;
  bottom: -20%;
  right: -135%;
  width: 600px;
  height: 478px;
  background-image: url("/images/ttFriendship/main_t/right_pp.png");
  background-repeat: no-repeat;
  background-position: 90% top;
}
.login_wrap h1 {
  text-align: center;
  margin: 70px 0 40px;
}
.login_wrap h1 .h1_ani {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  width: 300px;
  min-height: 200px;
}
.login_wrap h1 .h1_ani .face {
  width: 132px;
  height: 73px;
  position: absolute;
  left: 50%;
  margin-left: -66px;
  padding: 0;
}
.login_wrap h1 .h1_ani .face .face_ani {
  width: 132px;
  height: 73px;
  position: relative;
}
.login_wrap h1 .h1_ani .face .face_ani .yellow_face {
  width: 73px;
  height: 73px;
  background-image: url("/images/ttFriendship/face_yellow.png");
  background-repeat: no-repeat;
  background-size: 73px auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
}
.login_wrap h1 .h1_ani .face .face_ani .blue_face {
  width: 73px;
  height: 73px;
  background-image: url("/images/ttFriendship/face_blue.png");
  background-repeat: no-repeat;
  background-size: 73px auto;
  position: absolute;
  left: 59px;
  top: 0;
  z-index: 10;
}
.login_wrap h1 .h1_ani .t1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  text-align: center;
  letter-spacing: -1px;
}
.login_wrap h1 .h1_ani .t2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  position: absolute;
  top: 132px;
  left: 0;
  width: 100%;
  text-align: center;
  letter-spacing: -1px;
}
.login_wrap h1 .h1_ani .t2 b {
  color: #643fed;
}
.login_wrap p {
  font-size: 2rem;
  color: #111;
  letter-spacing: -0.1rem;
  text-align: center;
  line-height: 23px;
  margin-bottom: 30px;
}
.login_wrap form {
  z-index: 2;
  position: relative;
}
.login_wrap form fieldset input[type="text"],
.login_wrap form fieldset input[type="password"] {
  width: 100%;
  display: block;
  height: 50px;
  background-color: #ececec;
  margin: 3px 0;
  border: 0!important;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 20px 10px 60px;
  font-size: 1.6rem;
}
.login_wrap form fieldset .btn_login {
  text-decoration: none;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 50px;
  text-align: center;
  display: block;
  background: #4a65f6;
  color: #fff;
  padding: 20px 0px;
  font-size: 2rem;
  margin: 20px 0;
  box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.3);
}
.login_wrap form fieldset input[type="text"] {
  background-image: url("/images/ttFriendship/main_t/login.png");
  background-repeat: no-repeat;
  background-position: 20px center;
}
.login_wrap form fieldset input[type="password"] {
  background-image: url("/images/ttFriendship/main_t/password.png");
  background-repeat: no-repeat;
  background-position: 20px center;
}
.login_wrap form fieldset .idsave_wrap {
  float: left;
}
.login_wrap form fieldset .idsave_wrap label.m_control {
  text-align: right;
  color: #333;
  font-size: 1.5rem;
  font-weight: 400;
  position: relative;
  line-height: 0px !important;
  padding-top: 0!important;
}
.login_wrap form fieldset .idsave_wrap label.m_control input:checked ~ .control-indicator.check {
  background-image: url("/images/ttFriendship/member/ico_check.png");
  background-repeat: no-repeat;
  background-position: 0 -20px;
  background-size: 20px auto;
}
.login_wrap form fieldset .idsave_wrap div.control-indicator {
  width: 25px;
  height: 20px;
  margin-top: 0px;
  background-size: 20px auto;
  position: static;
  display: inline-block;
  vertical-align: middle;
}
.login_wrap form fieldset .idfind_wrap {
  text-align: right;
}
.login_wrap form fieldset .idfind_wrap span {
  color: #333;
  font-size: 1.5rem;
  padding: 0 3px;
}
.login_wrap form fieldset .idfind_wrap span:nth-child(1):after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 15px;
  vertical-align: middle;
  background: #ccc;
  margin-left: 10px;
}
.login_wrap form fieldset .login_sns {
  width: 100%;
}
.login_wrap form fieldset .login_sns:after {
  content: "";
  height: 0;
  line-height: 0;
  clear: both;
  display: block;
  *zoom: 1;
}
.login_wrap form fieldset .login_sns li {
  width: 49%;
  float: left;
}
.login_wrap form fieldset .login_sns li:last-child {
  float: right;
}
.login_wrap form fieldset .login_sns button {
  position: relative;
  display: block;
  width: 100%;
  padding: 12px 0;
  font-size: 1.5rem;
  color: #000;
  line-height: 30px;
  border: 1px solid #d9d9d9;
  border-radius: 56px;
  text-align: center;
  text-decoration: none !important;
}
.login_wrap form fieldset .login_sns button.naver span {
  background-color: #1ec800;
}
.login_wrap form fieldset .login_sns button.naver b {
  color: #1ec800;
}
.login_wrap form fieldset .login_sns button.naver:hover {
  background-color: #1ec800;
  color: #fff;
  border: 1px solid #1ec800;
}
.login_wrap form fieldset .login_sns button.naver:hover b {
  color: #fff;
}
.login_wrap form fieldset .login_sns button.kakao i {
  background-position: 0 -20px;
}
.login_wrap form fieldset .login_sns button.kakao span {
  background-color: #FEE500;
}
.login_wrap form fieldset .login_sns button.kakao b {
  color: #4f2a25;
}
.login_wrap form fieldset .login_sns button.kakao:hover {
  background-color: #FEE500;
  color: #4f2a25;
  border: 1px solid #FEE500;
}
.login_wrap form fieldset .login_sns button.kakao:hover b {
  color: #4f2a25;
}
.login_wrap form fieldset .login_sns button span {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
  top: -1px;
  margin-right: 5px;
}
.login_wrap form fieldset .login_sns button b {
  font-weight: 500;
}
.login_wrap form fieldset .login_sns button i {
  position: absolute;
  top: 50%;
  left: 5px;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background-image: url("/images/ttFriendship/icon_sns.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.login_wrap form fieldset .login_sns button:hover {
  text-decoration: underline;
}
.login_wrap form fieldset .btn_join {
  float: right;
  display: inline-block;
  border-radius: 25px;
  font-size: 1.7rem;
  background-color: #32334f;
  color: #fff;
  padding: 13px 70px 13px 40px;
  background-image: url("/images/ttFriendship/main_t/w_arrow.png");
  background-repeat: no-repeat;
  background-position: 85% center;
  box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.3);
}
@media (max-width: 599px) {
  body.login {
    padding: 30px 0px 10px 0px;
  }
  .top_inner {
    padding-bottom: 0em;
  }
  .tip {
    font-size: 1.3rem;
    padding: 10px;
    margin-left: 10px;
  }
  .login_wrap {
    width: 300px;
    min-width: 300px;
    margin: 0 auto 0px auto;
    position: relative;
    height: auto;
  }
  .login_wrap .bg_purple {
    position: absolute;
    top: -67%;
    right: -95%;
    width: 349px;
    height: 377px;
    background-size: 100%;
  }
  .login_wrap .bg_yellow {
    position: absolute;
    top: -52%;
    left: -120%;
    width: 450px;
    height: 292px;
    background-size: 100%;
  }
  .login_wrap .bg_green {
    position: absolute;
    bottom: -45%;
    left: 68%;
    width: 247px;
    height: 215px;
    background-size: 100%;
  }
  .login_wrap .bg_left_pp {
    position: absolute;
    top: 88%;
    left: -6%;
    width: 340px;
    height: 280px;
    background-size: 100%;
  }
  .login_wrap .bg_right_pp {
    display: none;
  }
  .login_wrap h1 .h1_ani {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    width: 300px;
    min-height: 90px;
  }
  .login_wrap h1 .h1_ani .face {
    width: 66px;
    height: 36px;
    position: absolute;
    left: 50%;
    margin-left: -33px;
    padding: 0;
  }
  .login_wrap h1 .h1_ani .face .face_ani {
    width: 66px;
    height: 36px;
    position: relative;
  }
  .login_wrap h1 .h1_ani .face .face_ani .yellow_face {
    width: 36px;
    height: 36px;
    background-image: url("/images/ttFriendship/face_yellow.png");
    background-repeat: no-repeat;
    background-size: 36px auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
  }
  .login_wrap h1 .h1_ani .face .face_ani .blue_face {
    width: 36px;
    height: 36px;
    background-image: url("/images/ttFriendship/face_blue.png");
    background-repeat: no-repeat;
    background-size: 36px auto;
    position: absolute;
    left: 27px;
    top: 0;
    z-index: 10;
  }
  .login_wrap h1 .h1_ani .t1 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    text-align: center;
    letter-spacing: -1px;
  }
  .login_wrap h1 .h1_ani .t2 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    position: absolute;
    top: 68px;
    left: 0;
    width: 100%;
    text-align: center;
    letter-spacing: -1px;
  }
  .login_wrap h1 .h1_ani .t2 b {
    color: #643fed;
  }
  .login_wrap p {
    font-size: 1.3rem;
    line-height: 23px;
    margin: 0px auto 10px auto;
  }
  .login_wrap form fieldset input[type="text"],
  .login_wrap form fieldset input[type="password"] {
    width: 100%;
    display: block;
    height: 45px;
    background-color: #ececec;
    margin: 5px 0 0 0;
    border: 0!important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 10px 10px 60px;
    font-size: 1.4rem;
  }
  .login_wrap form fieldset .btn_login {
    padding: 15px 0px;
    font-size: 1.6rem;
  }
  .login_wrap form fieldset .idsave_wrap {
    float: left;
  }
  .login_wrap form fieldset .idsave_wrap label.m_control {
    font-size: 1.3rem;
  }
  .login_wrap form fieldset .idsave_wrap label.m_control input:checked ~ .control-indicator.check {
    background-position: 0 -15px;
    background-size: 15px auto;
  }
  .login_wrap form fieldset .idsave_wrap div.control-indicator {
    width: 15px;
    height: 15px;
    background-size: 15px auto;
  }
  .login_wrap form fieldset .idfind_wrap span {
    font-size: 1.3rem;
    padding: 0 2px;
  }
  .login_wrap form fieldset .idfind_wrap span:nth-child(1):after {
    height: 10px;
    margin-left: 7px;
  }
  .login_wrap form fieldset .login_sns li {
    width: 100%;
    float: none !important;
  }
  .login_wrap form fieldset .login_sns li:last-child {
    margin-top: 5px;
  }
  .login_wrap form fieldset .login_sns li button {
    font-size: 1.3rem;
    padding: 5px 0;
  }
  .login_wrap form fieldset .btn_join {
    font-size: 1.4rem;
    margin-top: 15px;
    padding: 10px 60px 10px 30px;
  }
}
body.main {
  background-color: #32334f;
  height:auto;
}
.top_div {
  background-color: #fff;
  height: 50%;
  min-height: 550px;
  position: relative;
  padding-top: 50px;
  background-image: url("/images/ttFriendship/main_t/line.png");
  background-repeat: no-repeat;
  background-size: 330px;
  background-position: top right;
  overflow:hidden;
}
.top_div h1 {
  text-align: center;
  padding:10px 0 5px;
}
.top_div h1 img{width:165px;}
.top_div h1 .sub-tt{font-size:22px;text-align:center;letter-spacing: -1px;padding-top:18px;font-weight:500;}
.top_div h1 .sub-tt b{color:#3EA2FF;font-weight:700;}
.top_div h1 .h1_ani {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  width: 300px;
  min-height: 170px;
}
.top_div h1 .h1_ani .face {
  width: 132px;
  height: 73px;
  position: absolute;
  left: 50%;
  margin-left: -66px;
  padding: 0;
}
.top_div h1 .h1_ani .face .face_ani {
  width: 132px;
  height: 73px;
  position: relative;
}
.top_div h1 .h1_ani .face .face_ani .yellow_face {
  width: 73px;
  height: 73px;
  background-image: url("/images/ttFriendship/face_yellow.png");
  background-repeat: no-repeat;
  background-size: 73px auto;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
}
.top_div h1 .h1_ani .face .face_ani .blue_face {
  width: 73px;
  height: 73px;
  background-image: url("/images/ttFriendship/face_blue.png");
  background-repeat: no-repeat;
  background-size: 73px auto;
  position: absolute;
  left: 59px;
  top: 0;
  z-index: 10;
}
.top_div h1 .h1_ani .t1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  text-align: center;
  letter-spacing: -1px;
}
.top_div h1 .h1_ani .t2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  position: absolute;
  top: 132px;
  left: 0;
  width: 100%;
  text-align: center;
  letter-spacing: -1px;
}
.top_div h1 .h1_ani .t2 b {
  color: #643fed;
}
.top_div p {
  font-size: 2rem;
  color: #111;
  letter-spacing: -0.1rem;
  text-align: center;
  line-height:1.4;
  transition-duration: 400ms;
  position:relative;
  z-index:1;
}
.top_div p .pp_color {
  font-weight: 700;
}
.top_div .bgline {
  position: absolute;
}
.top_div .bgline.line2 {
  bottom: -30px;
  left: 0;
  width: 100%;
  height: 185px;
  background-image: url("/images/ttFriendship/main_t/line2.png");
  background-repeat: no-repeat;
  background-position: center;
  transition-duration: 400ms;
}
.bottom_div {
  position: relative;
  text-align: center;
  padding-bottom:40px;
  z-index:1;
}
.bottom_div:before {content:'';position:relative;width:100%;height:100%;top:140px;left:0;background: #32334f;z-index:-1;}

/* KSH 250210 flex 적용 */
.bottom_div div.menu_wrap {
  width: 1500px;
  margin: -100px auto 0 auto;
  display:flex;
  flex-wrap: wrap;
  gap:16px;justify-content: center;
}
.bottom_div div.menu_wrap .menu {
 /*  width:16.66% !important;flex:0 1 15.55%;
 */ 
  /* flex:0 1 290px;  */
  display: flex;
  height: 295px;
  overflow: hidden;
  color: #fff;
  font-size: 2.2rem;
  padding: 54px 40px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-position: 80% 220%;
  cursor: pointer;
  transition-duration: 400ms;
  border-radius: 86px;
  font-weight: 600;
  flex-direction: column;
  text-align: left;
  gap: 24px;
  word-break:keep-all;
  line-height:1.4;
}

@media (max-width: 1500px) {

  .bottom_div div.menu_wrap {width:100%;}f.bottom_div div.menu_wrap .menu
  .bottom_div div.menu_wrap .menu{flex:0 1 20%;}

}

@media (max-width: 600px) {

  .bottom_div div.menu_wrap .menu{flex:0 1 40%; }

}


@media (max-width: 380px) {

  .bottom_div div.menu_wrap .menu{flex:0 1 95%; }

}

.bottom_div div.menu_wrap .menu:after {
  content: '';
  display: inline-block;
  width: 51px;
  height: 9px;
  background-image: url("/images/ttFriendship/main_t/long_arrow.png");
  background-repeat: no-repeat;
  background-position: center;
}

.bottom_div div.menu_wrap .menu:hover:after {
  background-image: url("/images/ttFriendship/main_t/long_arrow_f.png");
  background-repeat: no-repeat;
}
.bottom_div div.menu_wrap .menu.class {
  border: 3px solid transparent;
  background-color: #6c4ee4;
  background-image: url("/images/ttFriendship/main_t/menu1.png");
  background-repeat: no-repeat;
  background-position: 106% 246%;
}
.bottom_div div.menu_wrap .menu.class:hover {
  background-color: #fff;
  border: 3px solid #6c4ee4;
  color: #111;
  background-image: url("/images/ttFriendship/main_t/menu1_f.png");
  background-repeat: no-repeat;
}
.bottom_div div.menu_wrap .menu.year {
  border: 3px solid transparent;
  background-color: #29cf8e;
  background-image: url("/images/ttFriendship/main_t/menu2.png");
  background-repeat: no-repeat;
  background-position: 80% 218%;
}
.bottom_div div.menu_wrap .menu.year:hover {
  background-color: #fff;
  border: 3px solid #29cf8e;
  color: #111;
  background-image: url("/images/ttFriendship/main_t/menu2_f.png");
  background-repeat: no-repeat;
}
.bottom_div div.menu_wrap .menu.ai {
  border: 3px solid transparent;
  background-color: #4b8ff0;
  background-image: url("/images/ttFriendship/main_t/menu3.png");
  background-repeat: no-repeat;
  background-position: 80% 406%;
}
.bottom_div div.menu_wrap .menu.ai:hover {
  background-color: #fff;
  border: 3px solid #5f77f7;
  color: #111;
  background-image: url("/images/ttFriendship/main_t/menu3_f.png");
  background-repeat: no-repeat;
}
.bottom_div div.menu_wrap .menu.comm {
  border: 3px solid transparent;
  background-color: #0eb5b7;
  background-image: url("/images/ttFriendship/main_t/menu5.png");
  background-repeat: no-repeat;
  background-position: 50% 350%;
}
.bottom_div div.menu_wrap .menu.comm:hover {
  background-color: #fff;
  border: 3px solid #0eb5b7;
  color: #111;
  background-image: url("/images/ttFriendship/main_t/menu5_f.png");
  background-repeat: no-repeat;
}
.bottom_div div.menu_wrap .menu.member {
  border: 3px solid transparent;
  background-color: #ff54aa;
  background-image: url("/images/ttFriendship/main_t/menu_member.png");
  background-repeat: no-repeat;
  margin-right: 0;
  background-position: 82% 114%;
  background-size: 230px;
}
.bottom_div div.menu_wrap .menu.member:hover {
  background-color: #fff;
  border: 3px solid #ff54aa;
  color: #111;
  background-image: url("/images/ttFriendship/main_t/menu_member.png");
  background-repeat: no-repeat;
}
.bottom_div div.menu_wrap .menu.member h2 {
  margin: 0;
}

.bottom_div div.menu_wrap .menu.data {
  border: 3px solid transparent;
  background-color: #ff8454;
  background-image: url("/images/ttFriendship/main_t/menu_data.png");
  background-repeat: no-repeat;
  background-position: 45px 144px;
  background-size: 180px;
}
.bottom_div div.menu_wrap .menu.data:hover {
  background-color: #fff;
  border: 3px solid #ff8454;
  color: #111;
  background-image: url("/images/ttFriendship/main_t/menu_data.png");
  background-repeat: no-repeat;
}
.bottom_div div.menu_wrap .menu.data h2 {
  margin: 0;
}
.bottom_div div.menu_wrap .menu.diary {
  border: 3px solid transparent;
  background-color: #FF8793;
  background-image: url("/images/ttFriendship/main_t/menu6.png");
  background-repeat: no-repeat;
  background-position: 25px 104%;
  background-size: 210px;
}
.bottom_div div.menu_wrap .menu.diary:hover {
  background-color: #fff;
  border: 3px solid #FF8793;
  color: #111;
  background-image: url("/images/ttFriendship/main_t/menu6_f.png");
  background-repeat: no-repeat;
}
@media (max-width: 1200px) {
  .bottom_div {
    background: transparent;
  }
  .bottom_div div.menu_wrap {
    width: 100%;
    text-align: center;
  }
  .bottom_div div.menu_wrap .menu {
    float: none;
    display: inline-block;
    flex: 0 1 200px;
    padding: 48px 35px;
  }
  .bottom_div div.menu_wrap .menu.class{background-position:106% 274%;}
  .bottom_div div.menu_wrap .menu.data{background-position:16px 160px;background-size:166px;}
  .bottom_div div.menu_wrap .menu.diary {background-position: -17px 107%;}
  .bottom_div div.menu_wrap .menu.comm{background-position: 82% 149%; background-size: 140px;}
}

@media (max-width: 899px) {
  .top_inner {
    padding-bottom: 0;
  }
  .top_div {
    min-height: 400px;
    height: 40%;
    background-size: 230px;
    padding-top: 42px;
  }
  .top_div h1 img{width:150px;}
  .top_div .bgline {
    position: absolute;
  }
  .top_div .bgline.line2 {
    background-size: cover;
    height: 100px;
  }
  .bottom_div{
    padding: 60px 32px;
  }
  .bottom_div div.menu_wrap {
    width: 100%;
    padding:0;
    margin:0;
  }
  .bottom_div div.menu_wrap .menu:after{margin-top:14px;}
  .bottom_div div.menu_wrap .menu {
    float: none;
    display: block;
    height: 195px;
    padding: 35px 25px;
    border-radius:50px;
    word-break: keep-all;
    text-align: left;
    line-height: 1.3;
    flex-grow:1;
  }
  .bottom_div div.menu_wrap .menu.class {
    background-position: right -4px bottom -32px;
    background-size: 102px;
  }
  .bottom_div div.menu_wrap .menu.year {
    background-position: right 1px bottom -38px;
    background-size: 130px;
  }
  .bottom_div div.menu_wrap .menu.ai {
    background-position: right -6px bottom -72px;
    background-size: 120px;
  }
  .bottom_div div.menu_wrap .menu.diary {
    background-position: right 10px bottom -7px;
    background-size: 140px;
  }
  .bottom_div div.menu_wrap .menu.comm {
    background-position: right 12px bottom -45px;
    background-size: 108px;
  }
  .bottom_div div.menu_wrap .menu.member {
    background-position: right -8px bottom 6px;
    background-size: 140px;
  }
  .bottom_div div.menu_wrap .menu.data{
    background-position: right 33px bottom -73px;
    background-size: 140px;  
  }
  .bottom_div div.menu_wrap .menu h2 {
    text-align: left;
  }
  .bottom_div div.menu_wrap .menu:after {
    display: block;
    background-position: left center;
  }
}
@media (max-width: 599px) {
  .top_div {
    min-height:360px;
    background-image: url("/images/ttFriendship/main_t/line.png");
    background-repeat: no-repeat;
    background-size: 140px;
    padding-top:90px;
  }
  .top_div h1 img{width:85px;}
  .top_div h1 .sub-tt{font-size:16px;padding-top:10px;}
  .top_div h1 .h1_ani {
    position: relative;
    display: inline-block;
    margin: 70px auto 0 auto;
    width: 300px;
    min-height: 90px;
  }
  .top_div h1 .h1_ani .face {
    width: 66px;
    height: 36px;
    position: absolute;
    left: 50%;
    margin-left: -33px;
    padding: 0;
  }
  .top_div h1 .h1_ani .face .face_ani {
    width: 66px;
    height: 36px;
    position: relative;
  }
  .top_div h1 .h1_ani .face .face_ani .yellow_face {
    width: 36px;
    height: 36px;
    background-image: url("/images/ttFriendship/face_yellow.png");
    background-repeat: no-repeat;
    background-size: 36px auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
  }
  .top_div h1 .h1_ani .face .face_ani .blue_face {
    width: 36px;
    height: 36px;
    background-image: url("/images/ttFriendship/face_blue.png");
    background-repeat: no-repeat;
    background-size: 36px auto;
    position: absolute;
    left: 27px;
    top: 0;
    z-index: 10;
  }
  .top_div h1 .h1_ani .t1 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    text-align: center;
    letter-spacing: -1px;
  }
  .top_div h1 .h1_ani .t2 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    position: absolute;
    top: 68px;
    left: 0;
    width: 100%;
    text-align: center;
    letter-spacing: -1px;
  }
  .top_div h1 .h1_ani .t2 b {
    color: #643fed;
  }
  .top_div p {
    font-size: 1.3rem;
  }
  .top_div .bgline.line2 {
    background-position: bottom center;
  }
  .bottom_div div.menu_wrap .menu {
    font-size: 2rem;
  }
}
@media (max-width: 480px) {
  .top_div{min-height:300px;}
  .top_div h1{padding:0;}
  .top_div h1 .h1_ani{margin:40px auto 0 auto;}
  .bottom_div{padding: 28px 16px;}
  .bottom_div div.menu_wrap{gap:14px;}
  .bottom_div div.menu_wrap .menu{flex:0 1 100%;height:120px;font-size:1.8rem;border-radius:30px;padding:26px 24px;}
  .bottom_div div.menu_wrap .menu:after{background-size:32px;width:32px;}
  .bottom_div div.menu_wrap .menu.year{background-position: right -6px bottom -42px;background-size: 128px;}
  .top_div .bgline.line2{background-size: auto 60px;height: 60px;bottom:-15px;}
}
@media (max-width: 399px) {
  .top_div p {
    font-size: 1.3rem;
  }
}

/* 신규가입시 교유관계진단관리, 교우관계분석리포트 메뉴 잠금 css */
.newUserYn {
/* 	background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,20,20,0.5),rgba(0,10,20,0.7)), url(https://localhost:8443/images/ttFriendship/main_t/menu2.png); */
	background-blend-mode: luminosity;
	pointer-events: none;
    background-color: #eee !important;
    color : black !important;
}

/*개인정보 재동의 팝업*/
.wrap.popup3 {max-width:600px;min-width:360px;height:auto;text-align:center;background-color:#edf0ff;box-shadow:8.0px 10px 16.0px hsl(0deg 0% 0% / 0.15);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:1;}
.wrap.popup3 .ttl{width:100%;background-color:#4a65f6;background-image:url("/images/ttFriendship/popup/img_popup.png");background-repeat:no-repeat;position:relative;}
.wrap.popup3 .ttl h1{color:#fff;font-weight:500;text-align:left;letter-spacing:-2px;position:absolute;} 
.wrap.popup3 .ttl h1 span{color:#ffb023;}
.wrap.popup3 .txt{text-align:left;letter-spacing:-1px;}
.wrap.popup3 .txt p{font-weight:500;line-height: 1.3;}
.wrap.popup3 .txt p span{color:#4760e1;}
.wrap.popup3 .txt .wrn{text-align:center;}
.wrap.popup3 .txt .wrn p{font-weight:600;margin:10px 0;}
.wrap.popup3 .txt .wrn p span{color:#ed4040;}
.wrap.popup3 .stp{margin:0 auto;max-width:560px;width:91%;background-color:#fff;border:1px solid #d0d7f5;border-radius:20px;margin-bottom:25px;padding:20px;}
.wrap.popup3 .stp .stp_ttl{color:#fff;border-radius:15px;background-color:#4a65f6;text-align:center;margin:0 0 18px 0;letter-spacing:-1px;}
.wrap.popup3 .stp ul{text-align:left;letter-spacing:-1px;}
.wrap.popup3 .stp ul li{font-size:1.5rem;display: inline-block;text-align:left;position:relative;}
.wrap.popup3 .stp ul li ul li{padding-right:24px;}
.wrap.popup3 .stp ul li ul li::after{display:block;content:'';width:16px;height:16px;background-image:url("/images/ttFriendship/popup/ico_arrow.png");position:absolute;right:2px;top:0;}
.wrap.popup3 .stp ul li ul li:last-of-type:after{display:none;}
.wrap.popup3 .stp ul li:last-of-type ul li{margin-bottom:0;}
.wrap.popup3 .btn03{width:70%;margin:0 auto 20px;}
.wrap.popup3 .btn03 a{text-align:center;display:block;width:100%;border-radius:30px;background-color:#414141;color:#fff;font-weight:500;letter-spacing:-1px;}
.wrap.popup3 .btn04{width:100%;font-size:1.4rem;line-height:1.5;padding:0 25px 16px;}
.wrap.popup3 .btn04::after{display:block;content:'';clear:both;}
.wrap.popup3 .btn04 .btn_today_close{float:left;line-height:25px;}
.wrap.popup3 .btn04 .btn_today_close span{padding-left:5px;letter-spacing:-0.5px;color:#4e4e4e;}
.wrap.popup3 .btn04 .btn_close{float:right;color:#4e4e4e;width:50px;height:25px;background-color:#e3e3e3;border-radius:4px;}
@media (min-width:600px){
  .wrap.popup3 .ttl{height:145px;background-size:28%;background-position:right 42px bottom 6px;}
  .wrap.popup3 .ttl h1{font-size:3.5rem;bottom:10px;left:48px;}
  .wrap.popup3 .txt{padding:10px 48px 0 48px;}
  .wrap.popup3 .txt p{font-size:1.8rem;}
  .wrap.popup3 .txt .wrn p{font-size:2.4rem;}
  .wrap.popup3 .txt .wrn{margin:30px 0;}
  .wrap.popup3 .stp{padding:20px;} 
  .wrap.popup3 .stp .stp_ttl{font-size:1.8rem;width:110px;height:30px;line-height:1.6;}
  .wrap.popup3 .stp ul li:first-of-type{margin-bottom:6px;}
  .wrap.popup3 .stp ul li ul li::after{top:0;}
  .wrap.popup3 .btn03{height:60px;}
  .wrap.popup3 .btn03 a{height:60px;font-size:2.3rem;line-height:60px;}
}
@media (max-width:599px){
  .wrap.popup3 .ttl{height:90px;background-size:100px;background-position:right 30px bottom 3px;}
  .wrap.popup3 .ttl h1{font-size:2.2rem;left:30px;bottom:0;}
  .wrap.popup3 .txt{padding:10px 25px 0 25px;}
  .wrap.popup3 .txt p{font-size:1.5rem;}
  .wrap.popup3 .txt .wrn p{font-size:1.8rem;}
  .wrap.popup3 .txt .wrn{margin:20px 0;}
  .wrap.popup3 .stp .stp_ttl{font-size:1.6rem;width:100px;height:30px;line-height:1.8;}
  .wrap.popup3 .stp ul li ul:first-of-type{margin-bottom:10px;}
  .wrap.popup3 .stp ul li ul li{line-height:1.4;}
  .wrap.popup3 .stp ul li ul li:last-of-type{padding:0;}
  .wrap.popup3 .stp ul li:last-of-type ul{margin-bottom:0;}
  .wrap.popup3 .stp ul li ul li::after{top:3px;}
  .wrap.popup3 .btn03{height:50px;}
  .wrap.popup3 .btn03 a{height:50px;font-size:2rem;line-height:50px;}
}