/*-------------------------------------------------------------------------------
  1. General  영문 Inter
-------------------------------------------------------------------------------*/
html{ height:100%; font-size: 10px; -webkit-font-smoothing: antialiased;  -webkit-font-smoothing: antialiased; }
body{ font-size:1.8rem; line-height:1.8rem;  font-family: 'pretendard', sans-serif; font-weight: 300; color:#002829; word-break: keep-all; background-color: #f7f7f7; letter-spacing: .6px}
section{ }


/* 스크롤바 설정 */
::-webkit-scrollbar{width: 3px;  height: 8px;}
::-webkit-scrollbar-thumb {cursor: pointer;  background: #63d0d3;}
::selection{background-color:#63d0d3;color:#002829;}
-webkit-::selection{background-color:#63d0d3;color:#002829;}
::-moz-selection{background-color:#63d0d3;color:#002829;}

/* 사이트 컬러 설정 */
.color-main{color:#63d0d3 !important;}
.color-point{color:#f4cc2d !important;}
.color-black{color:#002829 !important;}
.color-sub-1{color:#ff9600 !important;}
.color-sub-2{color:#e86a36 !important;}
.color-sub-3{color:#58574a !important;}
.bg-main{background-color:#63d0d3 !important;}
.bg-point{background-color:#f4cc2d !important;}
.bg-black{background-color:#002829 !important;}
.bg-sub-1{background-color:#ff9600 !important;}
.bg-sub-2{background-color:#e86a36 !important;}
.bg-sub-3{background-color:#58574a !important;}
.border-main{border-color:#63d0d3  !important;}
.border-point{border-color:#e6c749 !important;}
.border-black{border-color:#002829 !important;}
.border-sub-1{border-color:#ff9600 !important;}
.border-sub-2{border-color:#e86a36 !important;}
.border-sub-3{border-color:#58574a !important;}


/*링크 */
a{color:#002829;  -webkit-transition: color .2s ease-out; -o-transition: color .3s ease-out;  transition: color .3s ease-out; cursor:pointer; }
a:hover,a:focus {color:#63d0d3;outline: none;}

/*기본버튼/인풋/셀렉트 */
button{  background-color: #63d0d3; color:#fff; text-align: center; padding:1.5rem 1.5rem; margin:0; font-size:18px; font-weight:400; border-radius: 3em; transition: 0.5;}
/*button:hover{ color:#fff; background-color: #002829; transition: 0.5s;}*/

button.login{ width: 100%; background-color: #002829; color:#fff; text-align: center; padding:1.5rem 1.5rem; margin:0; font-size:18px; font-weight:400; border-radius: 3em; transition: 0.5;}
/*button.login:hover{ color:#fff; background-color: #63d0d3; transition: 0.5s;}*/

button.form{ padding:1rem 1rem; margin:0; font-size:15px; font-weight:400;border-radius: 3em; transition: 0.5; background-color: #63d0d3; color:#fff;}
/*button.form:hover{ color:#fff; background-color: #002829; transition: 0.5s;}*/

button.form-2{ padding:1rem 1rem; margin:0; font-size:15px; font-weight:400;border-radius: 3em; transition: 0.5; background-color: #002829; color:#fff;}
/*button.form-2:hover{ color:#fff; background-color: #63d0d3; transition: 0.5s;}*/

button.cancle{ width: 100%; background-color: #999; color:#fff; text-align: center; padding:1.5rem 1.5rem; margin:0; font-size:18px; font-weight:400; border-radius: 3em; transition: 0.5;}
/*button.cancle:hover{ color:#fff; background-color: #63d0d3; transition: 0.5s;}*/

button.counselor{ background-color: #fff; color:#555; text-align: center; letter-spacing: -1px; padding:0.2rem 0.7rem; margin:1px 0; font-size:1.2rem; font-weight:400; border-radius: 1.2em; transition: 0.5; border:1px solid #ddd;}
/*button.counselor:hover{ color:#fff; background-color: #63d0d3; transition: 0.5s;}*/
button.counselor2{  background-color: #63d0d3; color:#fff; text-align: center; letter-spacing: -1px; padding:0.2rem 0.7rem; margin:1px 0; font-size:1.2rem; font-weight:400; border-radius: 1.2em; transition: 0.5;}
/*button.counselor2:hover{ color:#555; background-color: #fff; transition: 0.5s; border:1px solid #ddd;}*/




input{ width:100%; border:1px solid #eee; background-color:#fff; color:#002829;  padding:1.5rem 3rem; margin:0; font-size:18px; font-weight:400;  border-radius: 3em; transition: 0.5;}
input:focus {outline: none;}
input::placeholder{  color:#63d0d3; opacity: 0.5;}

input.form{ padding:1rem 1.5rem; margin:0; font-size:16px; font-weight:400;  border-radius: 3em; transition: 0.5; box-shadow: none;}
input.form:focus {outline: none;}
input.form::placeholder{  color:#63d0d3;}

input.profile, select.profile{ padding:1rem 1.5rem; margin:0; font-size:16px; font-weight:400;  border-radius:  0.5rem 2.5rem 2.5rem 0.5rem ; border: none; transition: 0.5;}
input.profile:focus, select.profile:focus {outline: none;}
input.profile::placeholder, select.profile::placeholder{  color:#555;}

select{width:100%;  color:#999;  padding:1rem 1.5rem; margin:0; font-size:16px; font-weight:400;  border-radius: 3em; transition: 0.5;   background:url('../images/select-arrow.png') no-repeat 97% 50%/15px auto; background-color:#fff; }
select:focus {outline: none;}
select::placeholder{  color:#63d0d3;}
select option::selection{ background-color: #63d0d3;}
select option:checked,
select option:hover{ background-color: #eee;}

/*탑*/
.top-nav{ position: fixed; width:100%; height:5rem; left:0; top:0; display: flex; justify-content: space-between; align-items: center; z-index: 9; }
.top-nav-move{ background-color: #fff; transition: 0.5; }
.nav-arrow{ flex-grow: 0; padding: 0 2rem; cursor: pointer; color:#999;}
.nav-arrow:hover{ color:#333;}
.nav-title{ flex-grow: 1; font-size: 2rem; font-weight: 500; text-align: center; color:#333;}
.nav-icon{ flex-grow: 0; padding: 0 1rem; cursor: pointer; color:#999;}
.nav-icon:hover{ color:#333;}
.nav-notifi{position: relative;float: left}

.nav-arrow-main{ flex-grow: 0; padding: 0 1rem; cursor: pointer; color:#fff;}
.nav-arrow-main:hover{ color:#eee;}
.nav-title-main{ flex-grow: 1; font-size: 2rem; font-weight: 500; text-align: center; color:#fff;}
.nav-icon-main{ flex-grow: 0; padding: 0 1rem; cursor: pointer; color:#fff;}
.nav-icon-main:hover{ color:#eee;}

.nav-arrow-main-move{ color:#999;}
.nav-arrow-main-move:hover{ color:#333;}
.nav-title-main-move{color:#333;}
.nav-icon-main-move{ color:#999;}
.nav-icon-main-move:hover{ color:#333;}

/*바텀*/
.bottom-nav{ position: fixed; width:100%; height:5rem; left:0; bottom:0; display: flex; justify-content: center;  align-items: center; background-color: #fff; z-index: 999;}
.bottom-nav .item{ position: relative; text-align: center; flex-grow: 1; cursor: pointer;}
.bottom-nav .item:hover{ color:#63d0d3;}
.bottom-space{ height:70px;}

/*전체박스 */
.basic-wrap{ justify-content: center; background-color: #f7f7f7; }
.main-wrap{  justify-content: center;  background-color: #63d0d3; }
.intro-wrap{ justify-content: center; align-items: center; background: rgb(99,208,211);
    background: linear-gradient(175deg, rgba(99,208,211,1) 0%, rgba(99,181,211,1) 100%); color:#fff; }
.login-wrap{position:relative; display:flex; justify-content: center; align-items: center;  height:100vh; background: rgb(99,208,211);
    background: linear-gradient(175deg, rgba(99,208,211,1) 0%, rgba(99,181,211,1) 100%); color:#fff; padding:10%;}

.member-wrap{ display:flex; justify-content: center;  background-color: #f7f7f7; color:#002829; padding:10%; background-image: url('../images/bg-pattern-dot.png');}

.box-center{ display: flex; flex-direction: column; align-items: center; }
.page-con-main{ width: 100%; padding-top:70px;}
.page-con{ width: 100%; padding:15px; padding-top:70px;}

.color-box{ background-color:#63d0d3; padding:15px; color:#fff; border-radius: 2.5rem;}
.white-box{ background-color:#fff; padding:15px;  border-radius: 2.5rem;}

/*인트로*/
.intro-logo{width: 100%; height: 100vh; background-image: url('../images/intro.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;}
.intro-logo img{ width: 100%; }
.intro-text{ font-size: 4rem; line-height: 4rem; font-weight: 100; letter-spacing: -1px;}
.intro-text span{ font-weight: 600;}
.intro-line{ width:1px; height: 200px; background: rgba(255,255,255,0.3);}
.intro-dot{ width: 23px; height:23px; border-radius: 50%; background: rgba(255,255,255,1); }

/*로그인*/
.login-logo{ width:90%;}
.login-logo img{ width: 100%; }
.login-text{ font-size: 5.5rem; line-height: 5.5rem; font-weight: 100; letter-spacing: -1px; text-align: center;}
.login-text span{ font-weight: 600;}
.login-content{width: 100%; text-align: center;}
.login-content a{ color:#fff; font-size: 1.7rem; letter-spacing:-1px;}
.login-content a:hover{ color:#002829; }
.login-content a::after{ content: '|'; font-size: 1.3rem; opacity: 0.3; margin: 0 0.5rem; }
.login-content a:last-child::after{content: '';}

/*회원가입*/
.member-guide-bar{ display: flex; justify-content: center; margin-top: 4rem; margin-bottom: 5rem;}
.member-guide-line{ width:4rem; height:1rem; margin:0 0.7rem; background-color: #eee; border-radius: 5px;}
.line-point{background-color: #63d0d3;}
.member-title{ font-size: 4rem; line-height: 4rem; font-weight: 100; letter-spacing: -2px; text-align: center; border-bottom:1px solid #ddd; padding-bottom: 20px; margin-bottom: 20px;}
.member-title span{ font-weight: 600; color:#63d0d3;}
.member-text{ font-size: 1.8rem; line-height: 2.1rem; text-align: center; margin-bottom: 5rem; color:#555;}
.member-agree{ width:100%; }
.agree-total{ display: flex;  justify-content: space-between; background-color: #63d0d3; padding:1.5rem; color:#fff; border-radius: 1rem;}
.agree-item{ display: flex;  justify-content: space-between;  padding:1.5rem; border-bottom: 1px solid #ddd; }
.member-text-small{ font-size: 1.4rem; padding:1rem; text-align: center; color: #999;}
.member-content{width: 100%; text-align: center;}
.form-text{font-size: 1.4rem; text-align: start; color:#999; padding:0.2rem 2rem; }
.form-line{ width:100%; height:1px; border-top:1px dotted #ddd;   }

/*팝업*/
.popup-btn{position: absolute; border-radius: 0px; bottom: 48px; left: 36%; width: 105px; height: 36px; font-size: 17px; padding: 0; background-color: #373E4E;}
.popup-close{position: absolute; bottom: 20px; left: 122px; width: 126px; background: none;}

/* 인덱스 */
.main-bg{ min-height:60%; background-color: #f7f7f7; border-radius: 25px 25px 0 0; padding:1rem; padding:20px; padding-bottom:70px;}
.main-title{ font-size: 5.5rem; line-height: 6rem; font-weight: 100; letter-spacing: -2px; text-align: center; padding-top:10px; padding-bottom:30px; color:#fff;}
.main-title span{ font-weight: 600; color:#fff;}
.main-point{ width:100%; background-color: #63d0d3; color:#fff; padding: 10px 15px;  border-radius: 2.5rem; display: flex; justify-content: space-between; align-items: center;}
.main-point > .item-0{ flex-grow: 0; font-weight: 400;}
.main-point > .item-1{ flex-grow: 0; font-weight: 400;}
.main-point > .item-2{ flex-grow: 1; text-align: end; font-size: 2rem; font-weight: 600;}

.main-seal-box{ padding:5px 0; }
.main-seal-basic{ width:100%; min-height:230px;  background-image: url('../images/seal.png'); background-repeat: no-repeat; background-size: 70%; background-position: top 0 left -10px;}
.main-seal-01{ width:100%; min-height:230px;  background-image: url('../images/seal-01.png'); background-repeat: no-repeat; background-size: 70%;background-position: top 0 left -5px;}
.main-seal-02{ width:100%; min-height:230px;  background-image: url('../images/seal-02.png'); background-repeat: no-repeat; background-size: 70%;background-position: top 0 left -5px;}
.main-seal-03{ width:100%; min-height:230px;  background-image: url('../images/seal-03.png'); background-repeat: no-repeat; background-size: 70%;background-position: top 0 left -5px;}
.main-seal-04{ width:100%; min-height:230px;  background-image: url('../images/seal-04.png'); background-repeat: no-repeat; background-size: 70%;background-position: top 0 left -5px;}
.main-seal-05{ width:100%; min-height:230px;  background-image: url('../images/seal-05.png'); background-repeat: no-repeat; background-size: 70%;background-position: top 0 left -5px;}
.main-seal-06{ width:100%; min-height:230px;  background-image: url('../images/seal-06.png'); background-repeat: no-repeat; background-size: 70%;background-position: top 0 left -5px;}
.main-seal-07{ width:100%; min-height:230px;  background-image: url('../images/seal-07.png'); background-repeat: no-repeat; background-size: 70%;background-position: top 0 left -5px;}
.main-seal-08{ width:100%; min-height:230px;  background-image: url('../images/seal-08.png'); background-repeat: no-repeat; background-size: 70%;background-position: top 0 left -5px;}
.main-seal-09{ width:100%; min-height:230px;  background-image: url('../images/seal-08.png'); background-repeat: no-repeat; background-size: 70%;background-position: top 0 left -5px;}
.main-seal-10{ width:100%; min-height:230px;  background-image: url('../images/seal-08.png'); background-repeat: no-repeat; background-size: 70%;background-position: top 0 left -5px;}
.main-seal-11{ width:100%; min-height:230px;  background-image: url('../images/seal-08.png'); background-repeat: no-repeat; background-size: 70%;background-position: top 0 left -5px;}
.seal-circle{ width: 130px; height:130px; background-color: #63d0d3; border-radius: 50%; border:10px solid #caebec; color:#fff; display: flex; justify-content: center; align-items: center; font-size: 3.5rem; font-weight: 400; text-align: center;}

.main-choice{ padding: 10px;  }
.main-choice-box{ width:80px; height:80px; background-color: #fff; border-radius: 50%;}
.main-seal-btn{  text-align: center;}
.main-seal-btn img{ width: 95%;  border-radius: 50%;
    background: linear-gradient(145deg, #f1f1f1, #ffffff);
    border: 1px solid #fff;
    transition: .2s ease-in-out;
    box-shadow: -2px -2px 14px rgba(255, 255, 255, .7),
    -2px -2px 10px rgba(255, 255, 255, .5),
    2px 2px 8px rgba(255, 255, 255, .075),
    2px 2px 10px rgba(0, 0, 0, .15); }
.main-seal-btn p{ padding-top:5px; padding-bottom:10px; font-size: 1.5rem; font-weight: 400; color:#777 }
.main-choice-title{ font-weight: 200; font-size: 1.6rem; text-align: center; border-bottom: 1px dashed #ddd; padding:15px; margin-bottom: 10px;}


/*페이지*/
/*칭찬하기*/
.point-info{ width:65%; display: flex; justify-content: space-between;  align-items: center; background-color: #fff; color:#63d0d3; padding: 5px 15px;  border-radius: 2.5rem; }
.point-info >.item-1{ flex-grow: 0; padding-top: 4px; color:#ffdd1c; font-weight: 500;}
.point-info >.item-2{ flex-grow: 0;}
.point-info >.item-3{ flex-grow: 1; text-align: right;}

.point-text{ margin-top: 10px; font-size: 1.6rem;}
.group-choice{ display: flex; justify-content: space-between; align-items: center;}
.group-search-input{flex-grow: 1;}
.group-select{flex-grow: 1;}
.group-search{flex-grow: 0;}

.people-list-box{}
.one-people{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding:10px 0;}
.people-left{ display: flex;  align-items: center; }
.people-right{display: flex;  align-items: center;}
.people-photo{}
.people-photo img{ width:55px; height: 55px; border-radius: 50%}
.people-name{ padding-left:10px; font-size: 1.7rem; font-weight: 500; line-height: 2rem;}
.people-name p{ font-size: 1.4rem; font-weight: 100; letter-spacing: -1px;}
button.people-btn{ padding:0.7rem 1.1rem; margin:0; font-size:15px; font-weight:400;border-radius: 3em; transition: 0.5; background-color: #fff; color:#333; border:1px solid #63d0d3;}
button.people-btn:hover{ color:#fff; background-color: #63d0d3; transition: 0.5s;}
.btn-box{width: 100%; padding: 30px 0; text-align: center;}

.people-photo-modal{ text-align: center;  }
.people-photo-modal img{  width:79px; }
.people-name-modal{ text-align: center; font-size: 2rem; font-weight: 500; line-height: 2.3rem; padding-top:15px;}
.people-name-modal p{ font-size:1.6rem; font-weight:200 ; letter-spacing: -1px;}
.choice-title-modal{ font-weight: 200; font-size: 2.3rem; text-align: center; border-bottom: 1px dashed #ddd; padding:15px; margin-bottom: 10px; margin-top: 20px;}
.btn-box-modal{ }


/*챗*/
.chat-seal{ text-align: center; padding:30px 0;}
.chat-seal img{ width:70%;}
.chat-seal-title{ font-size: 3.5rem; line-height: 4rem; font-weight: 100; letter-spacing: -1px; text-align: center;  padding-bottom: 30px; margin-bottom: 20px;}
.chat-seal-title span{ font-weight: 600; color:#000;}
.chat-seal-title p{ font-size: 3rem; }

.chat-wrapper{ position: relative; height: calc(100vh - 50px - 120px); }
.message-item{font-size: 1.5rem;}
.chat-footer{ width: 100%;; position:fixed; left:0; bottom:50px; display: flex; justify-content: space-between; align-items: center; padding:0 15px; background-color: #f7f7f7; border-bottom: 1px solid #fff;}
.chat-input{ flex-grow: 1; padding: 5px 0;}
.chat-send{ flex-grow: 0; padding:10px; color: #63d0d3;}

.chat-out-img{ text-align: center;}
.chat-out-img img{ width:40%;}
.chat-out-title{font-size: 3.5rem; line-height: 4rem; font-weight: 100; letter-spacing: -1px; text-align: center;  padding-bottom: 30px; margin-bottom: 20px;}
.chat-out-title span{ font-weight: 600; color:#63d0d3; }

.chat-aside{position: absolute; bottom: 10px; left: 0; width: 100%; min-height: 40px; text-align: center; padding: 12px; background: #c5d8d8d4; border-radius: 19px; font-size: 0.9em;}
.chat-date{ width: 40%; min-height: 18px; text-align: center; padding: 3px; background: #c5d8d880; border-radius: 19px; font-size: 0.7em; display: block; margin: auto;}
.chat-new{ background-color: red; width: 14px; height: 14px; border-radius: 50%; margin: 0 5px; display: inline-block; color: #fff; font-size: 0.5em; text-align: center;vertical-align: top}
.bottom-nav .chat-new{position: absolute; right: 17px; top: -3px;}
.nav-notifi .chat-new{position:absolute;top: -5px;left: 7px}


/*메인*/
.page-tab{ display: flex; justify-content: space-between; background-color: #63d0d3; color:#fff; border-radius: 25px; padding:2px;}
.page-tab-item{ flex-grow: 1;  border-radius: 25px; padding:1rem; text-align: center; font-size: 1.6rem; letter-spacing: 1px; font-weight: 500; cursor: pointer; }
.page-tab-item.choise{ background-color: #fff; color:#63d0d3;  }

.page-title{ font-size: 3.5rem; line-height: 3.7rem; font-weight: 100; letter-spacing: -1px; text-align: center;  padding:30px; margin-bottom: 20px;}
.page-title span{ font-weight: 600; color:#63d0d3;}
.page-title p{ font-size: 3rem; }

.day-choise{ display: flex; justify-content: center; align-items: center; padding:2px; margin:2rem 0;  border-radius: 25px; }
.day-choise-btn{ color: #ccc;}
.day-choise-year{ padding:0.7rem 1rem; margin: 0 2px; background-color: #fff; border-radius: 15px; color:#002829;}
.day-choise-week{ padding:0.7rem 1rem; margin: 0 2px; background-color: #fff; border-radius: 15px; color:#002829;}


.day-title{ padding:10px 15px; margin-bottom: 5px; display:flex;background:#fff;color:#333; border: 1px solid #fff; border-radius: 20px 20px 10px 10px; }
.day-title .item-space{ flex-grow: 0; text-align:center; font-size: 1rem; }
.day-title .item{ flex-grow: 1; text-align:center; }
.day-title .item:first-child{ color:#e77946;}
.day-title .item:last-child{ color:#36b3e4;}

.day-title2{ padding:10px 15px; margin-bottom: 5px; display:flex; justify-content: space-between;  background:#fff;color:#333; border: 1px solid #eee; border-radius: 20px 20px 10px 10px; }
.day-title2 .item{ width: 14%; text-align:center; }
.day-title2 .item:first-child{ color:#e77946;}
.day-title2 .item:last-child{ color:#36b3e4;}

.week-graph{ position: relative; display: flex; height:350px; padding:15px; border:1px solid #fff; border-radius: 10px; justify-content: space-between;background: rgb(112,228,231);
    background: linear-gradient(180deg, rgba(112,228,231,1) 0%, rgba(99,208,211,1) 46%, rgba(38,19,125,1) 95%);color:#fff;}
.week-graph .graph-bg{ background-image: url('../images/graph-bg.png'); display: flex; height:100%; justify-content: space-between; background:}
.week-graph .item{ flex-grow: 1; text-align:center; display: flex; justify-content: center; align-items: end;}
.week-graph .item .item-box .bar-box{ display: flex; justify-content: center;}
.week-graph .item .item-box .bar-box .bar-line{ width:13px; background-color:#fff ; border-radius: 5px;  opacity: 0.3;}
.week-graph .item .bar-img img{ width:70%; padding-bottom:10px;}
.graph-line{ position: absolute; top:161px; left:32px; width:88%; height:1px; border-bottom:1px dashed #fff; opacity: 0.5;}
.bar-h-1{ height:30px;}
.bar-h-2{ height:60px;}
.bar-h-3{ height:90px;}
.bar-h-4{ height:120px;}
.bar-h-5{ height:150px;}
.bar-h-6{ height:180px;}
.bar-h-7{ height:210px;}
.bar-h-8{ height:240px;}

.week-graph2{ position: relative; display: flex; height:350px; padding:15px; border:1px solid #fff; border-radius: 10px; justify-content: space-between;background:#363b4e;}
.week-graph2 .item-space{ flex-grow: 0; font-size: 1rem;}
.week-graph2 .item-space .item-number{ height:90%; }
.week-graph2 .item-space .item-number li{ height:12%; color: #FFFFFF}
.week-graph2 .item{position: relative; flex-grow: 1; text-align:center; display: flex; justify-content: center; align-items: end;}
.week-graph2 .item .bar-bg{ position: absolute; left: 49%; top:0; width: 2px; height: 92.8%; background-color: rgba(255, 255, 255, .3); }
.week-graph2 .item .bar-box{ text-align:center;}
.week-graph2 .item .bar-box .bar-icon{ text-align: center;}
.week-graph2 .item .bar-box .bar-icon img{ width: 30px;}
.week-graph2 .item .bar-box .bar {display: flex; justify-content: center;}
.week-graph2 .item .bar-box .bar .bar-line{ width: 2px; background-color:#3fa087; margin-left: 1px}
.week-graph2 .item .bar-box .bar .bar-line.gh-0{ height: 0;}
.week-graph2 .item .bar-box .bar .bar-line.gh-1{ height: 27px;}
.week-graph2 .item .bar-box .bar .bar-line.gh-2{ height: 65px;}
.week-graph2 .item .bar-box .bar .bar-line.gh-3{ height: 97px;}
.week-graph2 .item .bar-box .bar .bar-line.gh-4{ height: 132px;}
.week-graph2 .item .bar-box .bar .bar-line.gh-5{ height: 170px;}
.week-graph2 .item .bar-box .bar .bar-line.gh-6{ height: 203px;}
.week-graph2 .item .bar-box .bar .bar-line.gh-7{ height: 238px;}
.week-graph2 .item .bar-box .bar .bar-line.gh-8{ height: 273px;}
.week-graph2 .item .bar-box .bar-name{ font-size: 1.6rem; margin-top: 0.5rem; color: #FFFFFF}

.status-message{  text-align: center; padding:30px 0; font-weight: 100;}
.status-title{ display: flex; justify-content: center; align-items: center; font-size: 1.7rem;}
.message-box{ display: flex; justify-content: space-between; align-items: center;}
.message-text{ flex-grow: 1;  padding:1rem 2rem; font-weight: 400; overflow: hidden; white-space: wrap;}
.message-input{ flex-grow: 1;}
.message-input input{ padding:1rem 2rem;}
.message-btn{ flex-grow: 0; color:#63d0d3; padding:0 3px;}

.calendar-box{padding:10px; border:1px solid #eee; border-radius: 20px; background-color: #fff;}
.mon-calendar{ padding:5px 0;  display:flex; justify-content: space-between; border-bottom: 1px solid #eee;; }
.mon-calendar .item{ width:14%; text-align:center; }
.mon-mood{font-size: 1.5rem; font-weight: 400; padding-bottom: 5px;}
.mon-num{font-size: 1.5rem; font-weight: 700; color:#63d0d3;}
.mon-day{ text-align: center; font-size: 1.3rem; color:#999;}
.mon-img{ text-align: center;  padding-bottom: 5px;}
.mon-img img{ width:80%; }


.help-title{ font-size: 2.3rem; letter-spacing: -1px; padding:15px; padding-top:30px; line-height: 2.6rem; font-weight: 100; min-height:150px; background-image: url('../images/seal-05.png'); background-repeat: no-repeat; background-position: right center; background-size: 40%;}
.help-title span{font-weight: 600; color: #63d0d3;}

.counselor-search{  margin-top: 25px; padding: 10px 5px;background:#63d0d3;border-radius: 2.5rem;}
.counselor-box{ margin:5px;}
.counselor-title{ padding:10px; margin-bottom: 10px; font-weight: 600; border-bottom: 1px solid #ddd;}
.counselor-list{ display: flex; justify-content: center; padding:5px 0;  border-bottom: 1px solid #ddd;}
.counselor-img{ flex-grow: 0; padding:5px;}
.counselor-img img{ width:70px; height:70px; border-radius: 50%;}
.counselor-info{ flex-grow: 1; padding:5px; padding-left:10px;}
.counselor-info .name{ line-height: 2.5rem; padding-top:3px;}
.counselor-info .name span{ font-weight: 600; }
.counselor-info .organ{ font-size: 1.4rem; color: #999; padding-top: 2px;}
.counselor-info .text{ font-size: 1.2rem; line-height: 1.5rem; letter-spacing: -1px; color: #999; }
.counselor-info .text2{ padding-top:7px; font-size: 1.5rem; line-height: 1.5rem; color: #555; }
.counselor-info .btn{ padding: 0; padding-top: 7px; padding-bottom: 7px; text-align: left; }
.counselor-info .link{ font-size: 1.5rem; display: flex; justify-content: start; align-items: center;}
.counselor-out{ display: flex; justify-content: center; align-items: center; padding: 10px; color:#aaa; }

.counselor-box2{ margin:1px;}
.counselor-list2{ display: flex; justify-content: center; padding:5px 0;  border: 1px solid #eee; background-color: #fff; border-radius: 2.5rem; margin:5px 0;}

.counselor-list3{ display: flex; justify-content: center; padding:5px 0;  border: 1px solid #eee; background-color: #eee; border-radius: 2.5rem; margin:2px 0;}


.my-profile-box{position: relative; display: flex; justify-content: center; align-items: center; padding:5px 0; background-color:#63d0d3; border: 1px solid #eee; border-radius: 2.5rem;}
.my-profile-img{position: relative; flex-grow: 0; padding:5px; min-width: 100px}
.my-profile-img img{ width:70px; height:70px; border-radius: 50%;}
.my-profile-img .profiel-pic{bottom: 10px; left: 60px; background: #002829;}
.my-profile-info{ flex-grow: 1; padding:5px; padding-left:10px; color: #fff;}
.my-profile-info .name{ font-weight: 600;}
.my-profile-info .text{ padding-top:5px; font-size: 1.6rem; color: #fff; }
.my-profile-btn{ padding:10px; color: #fff;}

.mypage-list{ display: flex; align-items: center; margin-top: 5px;}
.mypage-list .icon{ padding:5px; padding-top:8px; padding-right:10px; color: #999;}
.mypage-list .name{ font-size: 1.7rem; font-weight: 500; }
.mypage-list .ver{flex-grow:1; text-align: right; font-weight:300; font-size: 1.5rem; color: #63d0d3;}

.mypage-list-line{margin-top: 20px; margin-bottom: 20px; border-bottom: 1px solid #ddd;}

.profile-box{ position: relative; display: flex; justify-content: center; align-items: center;  min-height: 155px;}
.profile-img{ position: absolute; left: 50%; transform: translateX(-50%); top: 0; padding: 10px; text-align: center;}
.profile-img img{ width:144px; height: 144px; border-radius: 50%;}
.profiel-pic{ position: absolute; bottom:30px; left:75%; background-color: #63d0d3; width: 40px; height:40px; border-radius: 50%; display: flex; justify-content: center; align-items: center;}

.profile-form{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.profile-form .name{ flex-wrap: 0; width: 35%; font-size: 1.5rem; font-weight: 400; letter-spacing: -1px; padding:1rem 0; text-align: right; text-align: center; border-radius: 2.5rem 0.5rem 0.5rem 2.5rem; background-color: #eee;}
.profile-form .input{ flex-grow: 1; width: 65%;}
.profile-btn-box{}

.page-info{ display: flex; justify-content: space-between; align-items: center; background-color: #fff; border-radius: 2.5rem; padding:5px 10px; }
.page-info > .item{ flex-grow: 0; color:#63d0d3; padding-top: 4px; padding-right: 5px;}
.page-info > .page-info-title{ font-weight: 400; color:#63d0d3; flex-grow: 0; }
.page-info > .page-info-num{ color:#63d0d3; flex-grow: 1; text-align: end;}
.page-info > .page-info-num span{ font-size: 2rem; font-weight: 600;}
.page-info-text{ font-size: 1.5rem; line-height: 1.7rem; padding:0.5rem 1rem;}
.page-info-text span{ font-weight: 500;}

.comp-top{ text-align: center;}
.comp-top .img{text-align: center;}
.comp-top .img img{ width:60%; text-align: center; margin-top: 30px;}
.comp-top .title{ font-size: 2rem; font-weight: 500; margin-top: 30px;}
.comp-top .num {font-size: 7rem; line-height: 7rem; font-weight: 600; color: #63d0d3; margin-top: 10px;}

.comp-box{ background-color: #fff; border: 1px solid #eee; border-radius: 2.5rem; padding-bottom: 15px; margin-top: 30px; }
.comp-box .img{ text-align: center;}
.comp-box .img img{ width:80%; text-align:center;}
.comp-box .title{ font-size: 2rem; font-weight: 500; margin-top: 5px; text-align: center;}
.comp-box .num {font-size: 3rem; line-height: 3rem; font-weight: 600; color: #63d0d3; margin-top: 5px; text-align: center;}


.about-img{ text-align: center; margin-top: 30px;}
.about-img img{ width:60%;}
.about-info{ display: flex; justify-content: center; }
.about-list{}
.about-list tr td{ font-size: 1.5rem; border-bottom: 1px solid #ddd; padding: 0.7rem;}
.about-list tr td.title{ font-weight: 600; }

.notice-list{ padding:1rem 0; font-size: 1.6rem;  font-weight: 400; letter-spacing: -1px; border-bottom: 1px solid #eee;}
.notice-list .chk{ font-weight: 500;}
.notice-list p{ font-size: 1.4rem; color:#999; line-height: 3rem;}
.notice-con{ font-size: 1.5rem; border-bottom: 1px solid #eee;  color:#999; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}
.notice-inner-con{padding: 1rem;  padding-bottom: 2rem;}


.bell-box{ display: flex; justify-content: space-between;}

.n-search-left{ background-color: #fff;  border-radius: 2.5rem 0 0 2.5rem;}
.n-search-left input{}
.n-search-right{ background-color: #fff;  border-radius: 0 2.5rem 2.5rem 0; color: #aaa; }


/* 체크박스 */
.checkbox-wrapper-2 .ikxBAC {
    appearance: none;
    background-color: #eee;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin: 0;
    position: relative;
    width: 30px;
}

.checkbox-wrapper-2 .ikxBAC::before {
    bottom: -6px;
    content: "";
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
}

.checkbox-wrapper-2 .ikxBAC,
.checkbox-wrapper-2 .ikxBAC::after {
    transition: all 100ms ease-out;
}

.checkbox-wrapper-2 .ikxBAC::after {
    background-color: #63d0d3;
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
}

.checkbox-wrapper-2 input[type=checkbox] {
    cursor: default;
}

.checkbox-wrapper-2 .ikxBAC:hover {
    background-color: #eee;
    transition-duration: 0s;
}

.checkbox-wrapper-2 .ikxBAC:checked {
    background-color: #002829;
}

.checkbox-wrapper-2 .ikxBAC:checked::after {
    background-color: #eee;
    left: 13px;
}

.checkbox-wrapper-2 :focus:not(.focus-visible) {
    outline: 0;
}

.checkbox-wrapper-2 .ikxBAC:checked:hover {
    background-color: #002829;
}
.modal-dialog{
    position: absolute;
    bottom: 0;
}

.box-white {
    border-radius: 2.5rem;
    background: linear-gradient(145deg, #f1f1f1, #ffffff);
    border: 1px solid #fff;
    transition: .2s ease-in-out;
    box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
    -6px -6px 10px rgba(255, 255, 255, .5),
    6px 6px 8px rgba(255, 255, 255, .075),
    6px 6px 10px rgba(0, 0, 0, .15);
}
.box-white2 {
    border-radius:  2.5rem;
    background: linear-gradient(145deg, #f1f1f1,#ffffff,#f1f1f1);
    border: 1px solid #fff;
    transition: .2s ease-in-out;
    box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
    -6px -6px 10px rgba(255, 255, 255, .5),
    6px 6px 8px rgba(255, 255, 255, .075),
    6px 6px 10px rgba(0, 0, 0, .15);
}

.box-white3 {
    border-radius: 2.5rem;
    background: linear-gradient(145deg, #f7f7f7,#ffffff,#f9f9f9);
    border: 0px solid #fff;
    transition: .2s ease-in-out;
    box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
    -6px -6px 10px rgba(50, 50, 50, .1),
    6px 6px 8px rgba(255, 255, 255, .075),
    6px 6px 10px rgba(0, 0, 0, .15);
}

.box-white4 {
    border-radius:  2.5rem;
    background: linear-gradient(145deg, #f7f7f7,#ffffff,#f9f9f9);
    border: 1px solid #fff;
    transition: .2s ease-in-out;
    box-shadow: inset 4px 4px 9px #ddd,
    inset -4px -4px 9px #eee;
}

.box-white5 {
    border-radius:  2.5rem;
    background: linear-gradient(145deg, #f7f7f7,#ffffff,#f9f9f9);
    border: 1px solid #fff;
    transition: .2s ease-in-out;
    box-shadow:  6px 6px 8px rgba(255, 255, 255, .075),
    6px 6px 10px rgba(0, 0, 0, .15);
}

.box-white6 {
    border-radius:  2.5rem;
    background: linear-gradient(145deg, #f1f1f1,#ffffff,#f1f1f1);
    border: 1px solid #fff;
    transition: .2s ease-in-out;
    box-shadow:  2px 2px 3px rgba(255, 255, 255, .075),
    2px 2px 3px rgba(0, 0, 0, .15);
}

.box-white7 {
    border-radius:  2.5rem;
    background: linear-gradient(145deg, #eee,#ffffff,#ddd);
    border: 1px solid #fff;
    transition: .2s ease-in-out;
    box-shadow:  2px 2px 3px rgba(255, 255, 255, .075),
    2px 2px 3px rgba(0, 0, 0, .15);
}

/*점심 메뉴 선택 박스*/
.lunch-bt{
    color: #000;
    border-radius: 10px;
    height: 163px;
    background-color: #fff;
    border: 1px solid #63ccd3;
}

.lunch-bt img{
    margin: 10px 1px;
}

.lunch-bt div{
    width: 67px;
    height: 28px;
    color: #fff;
    background-color: #63ccd3;
    margin: auto;
    padding: 5px;
    border-radius: 10px;
}

.lunch-bt-a{
    color: #fff;
    background-color: #63ccd3;
}

.lunch-bt-a div{
    color: #63ccd3;
    background-color: #fff;
}

.detail-box{
    min-width: 50%;
    max-width: 375px;
    /* margin-left: 2%; */
    text-align: center;
    /* margin-bottom: 20px; */
    margin: 20px auto;
    display: none;
}

.detail-box div{
    width: 0px;
    height: 0px;
    border-bottom: 8px solid #63ccd3;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    margin-left: 15%;
}

.detail-box p{
    /* width: 360px;
    height: 48px; */
    border-radius: 50px;
    border: 1px solid #63ccd3;
    padding: 10px 5px;
}

.detail-box p button{
    margin-left: 5px;
}

.text-box{
    min-width: 50%;
    max-width: 375px;
    /* margin-left: 2%; */
    text-align: center;
    /* margin-bottom: 20px; */
    margin: 20px auto;
    display: none;
}

.text-box div{
    width: 0px;
    height: 0px;
    border-bottom: 8px solid #63ccd3;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    margin-left: 15%;
}

.text-box p{
    /* width: 360px;
    height: 48px; */
    border-radius: 50px;
    border: 1px solid #63ccd3;
    padding: 10px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-box p input{
    padding: 1px 10px;
    min-width: 72%;
    max-width: 0;
    border: 1px solid;
    margin: 0 10px
}

.chlick{
    background-image: url(../images/lunch-st-06.png);
    background-repeat: no-repeat;
    background-position: 5px;
}

.complete{
    background-color: #000;
    border-radius: 10px;
}

.another button{
    padding: 0.5rem;
    border-radius: 10px;
}

#floatingCirclesG{
	position:relative;
    bottom: 198px;
    left: 55px;
	width:58px;
	height:58px;
	margin:auto;
	transform:scale(0.6);
		-o-transform:scale(0.6);
		-ms-transform:scale(0.6);
		-webkit-transform:scale(0.6);
		-moz-transform:scale(0.6);
}

.f_circleG{
	position:absolute;
	background-color:rgb(255,255,255);
	height:10px;
	width:10px;
	border-radius:5px;
		-o-border-radius:5px;
		-ms-border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
	animation-name:f_fadeG;
		-o-animation-name:f_fadeG;
		-ms-animation-name:f_fadeG;
		-webkit-animation-name:f_fadeG;
		-moz-animation-name:f_fadeG;
	animation-duration:1.2s;
		-o-animation-duration:1.2s;
		-ms-animation-duration:1.2s;
		-webkit-animation-duration:1.2s;
		-moz-animation-duration:1.2s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#frotateG_01{
	left:0;
	top:23px;
	animation-delay:0.45s;
		-o-animation-delay:0.45s;
		-ms-animation-delay:0.45s;
		-webkit-animation-delay:0.45s;
		-moz-animation-delay:0.45s;
}

#frotateG_02{
	left:7px;
	top:7px;
	animation-delay:0.6s;
		-o-animation-delay:0.6s;
		-ms-animation-delay:0.6s;
		-webkit-animation-delay:0.6s;
		-moz-animation-delay:0.6s;
}

#frotateG_03{
	left:23px;
	top:0;
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
}

#frotateG_04{
	right:7px;
	top:7px;
	animation-delay:0.9s;
		-o-animation-delay:0.9s;
		-ms-animation-delay:0.9s;
		-webkit-animation-delay:0.9s;
		-moz-animation-delay:0.9s;
}

#frotateG_05{
	right:0;
	top:23px;
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
}

#frotateG_06{
	right:7px;
	bottom:7px;
	animation-delay:1.2s;
		-o-animation-delay:1.2s;
		-ms-animation-delay:1.2s;
		-webkit-animation-delay:1.2s;
		-moz-animation-delay:1.2s;
}

#frotateG_07{
	left:23px;
	bottom:0;
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
}

#frotateG_08{
	left:7px;
	bottom:7px;
	animation-delay:1.5s;
		-o-animation-delay:1.5s;
		-ms-animation-delay:1.5s;
		-webkit-animation-delay:1.5s;
		-moz-animation-delay:1.5s;
}



@keyframes f_fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes f_fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes f_fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes f_fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes f_fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');
body{
  font-family: 'Noto Sans JP';
}
/* 자동로그인 체크박스 */
.checkbox-wrapper-2 .ikxBAC{
    background: transparent !important;
    border: 1px solid #fff;
}
.checkbox-wrapper-2 .ikxBAC::after{
    background-color: #fff;
    top: 2px;
}
.checkbox-wrapper-2 .ikxBAC:checked{
    background-color: #000 !important;
    border: 0;
}
.checkbox-wrapper-2 .ikxBAC:checked::after{
    top: 3px;
}
@media screen and (max-height:600px) {
    .login-wrap{
        height: auto;
    }
}
/* v1-snow */
section.v1-snow{
    background-color: #6cbbe7;
    background-image:url("/resources/user/images/login/v1-snow-bg.png"), url("/resources/user/images/login/v1-snow-bg-bottom.png");
    background-repeat: no-repeat;
    background-position: center -400px, center bottom;
    background-size: auto, 110%;
    position: relative;
}
section.v1-snow .box-center{
    margin-top: -20px;
}
section.type1 input{
    height: 48px;
    background-repeat: no-repeat;
    background-position: 20px center;
    padding-left: 50px;
}
section.type1 .login-content input#uid{
    background-image: url("/resources/user/images/login/icon-user-blue.png");
}
section.type1 .login-content input#psw{
    background-image: url("/resources/user/images/login/icon-lock-blue.png");
}
section.type1 button.login{
    background-color: transparent;
    border: 2px solid #fff;
    height: 48px;
    margin-top: -50px;
    line-height: 0px;
}
section.v1-snow .bottom{
    height: 200px;
}
section.v1-snow .bottom img{
    margin-top: 50px;
}
/* 아이폰 se */
@media screen and (max-height:740px) {
    section.v1-snow{
        background-size: auto, 110% 20%;
    }
    section.v1-snow .bottom img {
        width: 100px;
    }
    section.v1-snow .login-logo img{
        margin-top: 80px;
        margin-bottom: -50px;
    }
}
@media screen and (max-height:670px) {
    section.v1-snow .box-center{
        max-height: 660px;
    }
    section.v1-snow .login-logo img{
        margin-top: 0;
    }
    section.v1-snow .bottom img {
        margin-top: 0px;
    }
}
/* 태블릿 */
@media screen and (min-width:500px) and (max-width:1024px) {
    section.v1-snow{
        background-image: url("/resources/user/images/login/v1-snow-bg.png"), url("/resources/user/images/login/v1-snow-bg-bottom-pc.png");
        background-repeat: repeat-x, no-repeat;
    }
    section.v1-snow .bottom img {
        margin-top: 50px;
        position: absolute;
        bottom: 50px;
        left: 40%;
    }
}
/* PC */
@media screen and (min-width:1025px) {
    section.v1-snow{
        background-image: url("/resources/user/images/login/v1-snow-bg.png"), url("/resources/user/images/login/v1-snow-bg-bottom-pc.png");
        background-repeat: repeat-x, no-repeat;
        background-size: auto, 110% 30%;
    }
}

/* v2-shark */
section.v2-shark{
    background:linear-gradient(#7ABDE4,#A4CDE4), url("/resources/user/images/login/v2-shark-bg.png");
    background-repeat: no-repeat;
    background-position: center, center -100px;
    background-blend-mode: multiply;
}
section.v2-shark .box-center{
    margin-top: -200px;
}
section.v2-shark .modal-group{
    position: relative;
    z-index: 2;
}
section.v2-shark .bottom{
    height: 250px;
    width: 100%;
    position: absolute;
    bottom: 0;
    background-image: url("/resources/user/images/login/v2-shark-bg-bottom.png");
    background-position: center 50px;
    background-repeat: no-repeat;        
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
section.v2-shark .bottom img:first-child{
    width: 150px;
    margin-top: -150px;
}
section.v2-shark .bottom img:last-child{
    width: 240px;
    margin-top: -120px;
    margin-left: -30px;
}
@media screen and (max-width:350px) {
    section.v2-shark .bottom img:first-child{
        width: 130px;
    }
    section.v2-shark .bottom img:last-child{
        width: 210px;
    }
}
/* 아이폰se */
@media screen and (max-height:740px) {
    section.v2-shark .login-logo img{
        margin-top: 70px;
        margin-bottom: -50px;
    }
    section.v2-shark button.login{
        margin-top: -80px;
    }
    section.v2-shark .bottom img:first-child{
        width: 120px;
        margin-top: -130px;
    }
    section.v2-shark .bottom img:last-child{
        width: 200px;
        margin-top: -50px;
    }
}

/* 태블릿 */
@media screen and (min-width:500px) and (max-width:1024px) {
    section.v2-shark{
        background-repeat: repeat-x;
    }
    section.v2-shark .bottom{
        background-image: url("/resources/user/images/login/v2-shark-bg-bottom-pc.png");
        background-size: cover;
    }
    section.v2-shark .modal-group{
        bottom: 0;
    }
}
/* PC */
@media screen and (min-width:1025px) {
    section.v2-shark{
        background-repeat: repeat-x;
    }
    section.v2-shark .bottom{
        background-image: url("/resources/user/images/login/v2-shark-bg-bottom-pc.png");
        background-size: 105%;
    }
    section.v2-shark .modal-group{
        bottom: 0;
    }
    section.v2-shark .bottom img:first-child{
        width: auto;
    }
    section.v2-shark .bottom img:last-child{
        width: auto;
        margin-top: -80px;
    }
}
@media screen and (max-height:430px) {
    section.v2-shark .login-logo img{
        margin-top: 100px;
    }
    section.v2-shark .bottom{
        background-position-y: 100px;
    }
    section.v2-shark .bottom img:first-child{
        margin-top: 0;
    }
    section.v2-shark .bottom img:last-child{
        margin-top: 30px;
    }
    section.v2-shark .modal-group{
        padding-bottom: 100px;
    }
}
/* 태블릿가로, 아이폰se */
@media screen and (max-height:820px){
    section.v2-shark .bottom{
        height: 150px;
    }
    section.v2-shark .bottom img:first-child{
        margin-top: -70px;
    }
    section.v2-shark .bottom img:last-child{
        margin-top: -60px;
    }
}
 /* v3-sea */
section.v3-sea{
    background:url("/resources/user/images/login/v3-sea-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
section.v3-sea form input{ 
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid #fff;
    border-radius: 0;
    color: #fff;
}
section.v3-sea form input[type=checkbox]{
    border: 1px solid #fff;
    border-radius: 72px;
}
section.v3-sea input#uid{
    background-image: url("/resources/user/images/login/icon-user-w.png") !important;

}
section.v3-sea input#psw{
    background-image: url("/resources/user/images/login/icon-lock-w.png") !important;
}
section.v3-sea input::placeholder{
    color: #fff !important;
}
section.v3-sea .d-flex{
    margin-top: 10px;
}
section.v3-sea .modal-group{
    margin-top: 60px;
}
section.v3-sea .bottom img{
    width: 110px;
}
/* 태블릿가로, 아이폰se */
@media screen and (max-height:820px) {
    section.v3-sea .login-logo img{
        margin-bottom: -30px;
    }
    section.v3-sea .modal-group{
        margin-top: 0;
    }
    section.v3-sea .bottom{
        margin-top: -50px;
    } 
    section.v3-sea .bottom img{
        width: 80px;
    }
}

 /* v4-beach */
section.v4-beach{
    background:url("/resources/user/images/login/v4-beach-bg.png");
    background-position: center;
    background-size: cover;
}
section.v4-beach .login-logo img{
    filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.1));
}
section.type2 .login-top{
    position: relative;
    z-index: 2;
    margin-top: -50px;
}
section.type2 form{
    background-color: rgba(255, 255, 255,0.2);
    position: relative;
    z-index: 1;
    margin-top: -60px;
    border-radius: 30px;
    width: 100%;
    color:#000;        
}
section.type2 form:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    z-index:-1;
    border-radius: 30px;
}
section.type2 form input{
    background-repeat: no-repeat;
    background-position: 0px center;
    height: 50px;
}
section.type2 form input[type=text]{
    width: 80%;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #000;
    border-radius: 0;
    color: #000;
    margin-top: 50px;
}
section.type2 form input[type=password]{
    width: 80%;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #000;
    border-radius: 0;
    color: #000;
}
section.type2 input#uid{
    background-image: url("/resources/user/images/login/icon-user-black.png");

}
section.type2 input#psw{
    background-image: url("/resources/user/images/login/icon-lock-black.png");
}
section.type2 .d-flex{
    margin-left: 5%;
    margin-top: 10px;
}
section.type2 form button.login{
    width: 80%;
    border: 1px solid #000;
    background-color: transparent;
    color: #000;
    margin-top: -50px;
}
section.type2 form a{
    color: #000;
}
section.type2 form input::placeholder{
    color: #000;
}
section.v4-beach .checkbox-wrapper-2 .ikxBAC {
    border: 1px solid #000;
}
section.v4-beach .checkbox-wrapper-2 .ikxBAC::after {
    background-color: #000;
}
section.v4-beach .checkbox-wrapper-2 .ikxBAC:checked::after{
    background-color: #fff;
    top: 2px;
}
section.v4-beach .bottom{
    width: 100%;
    height: 150px;
    background-image: url("/resources/user/images/login/v4-beach-cont2.png");
    background-size: contain;
    background-repeat: no-repeat;
}
/* 아이폰se, 태블릿가로 */
@media screen and (max-height:820px) {
    section.v4-beach .login-logo img{
        margin-bottom: -30px;
    }
    section.type2 form input[type=text]{
        margin-top: 30px;
    }
    section.type2 .modal-group{
        width: 90%;
        margin: 0 auto;
        margin-bottom: -30px;
    }
    section.v4-beach .bottom{
        height: 100px;
    }
}
@media screen and (max-height:720px) {
    section.v4-beach .bottom{
        height: 80px;
        margin-top: -50px;
    }
}
/* v5-beach */
section.v5-underwater{
    background-image:url("/resources/user/images/login/v5-underwater-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
section.v5-underwater .box-center{
    margin-top: -100px;
}
section.v5-underwater form{
    background-color: rgba(255,255,255,0.1);
    color: #fff;
    max-height: 380px;
}
section.v5-underwater input#uid{
    background-image: url(/resources/user/images/login/icon-user-w.png);
}
section.v5-underwater input#psw{
    background-image: url(/resources/user/images/login/icon-lock-w.png);
}
section.v5-underwater input{
    border-bottom: 1px solid #fff !important;
}
section.v5-underwater input::placeholder{
    color: #fff !important;
}
section.v5-underwater button.login{
    border: 1px solid #fff !important;
    color: #fff !important;
}
section.v5-underwater .modal-group{
    position: relative;
    bottom: -100px;
}
section.v5-underwater .modal-group a{
    color: #fff;
}
@media screen and (max-height:768px) {
    section.v5-underwater .modal-group{
        width: 100%;
        bottom: -80px;
    }
    section.v5-underwater .login-top{
        margin-top: -80px;
    }
}

/* 회원가입 모달 줄바꿈 설정 */
@media screen and (max-width:280px) {
    #exampleModal-2 .modal-content {
    word-break: break-word;
    }
}