#container.mobile_wrap {
}

.mobile_wrap {
  /* header */
  #header {
    height: 76px;
    border-bottom: 1px solid rgba(210, 210, 210, 0.20);
    box-sizing: border-box;
  }

  .header_wrap > .reverse,
  .header_wrap > .forward {
    display: none;
  }

  .header_wrap > .header_logo {
    width: 80px;
    height: 100%;
    background-size: 80px auto;
  }

  #header.white .header_wrap > .header_logo {
    width: 80px;
    height: 100%;
    background-size: 80px auto;
  }

  .header_wrap > .btn_menu {
    display: block;
    width: 32px;
    height: 32px;
    margin: auto 20px auto auto;
    background: url('../assets/header/bg_menu.svg') no-repeat;
    text-indent: -9999em;
  }

  #header.white .header_wrap > .btn_menu {
    background: url('../assets/header/bg_menu_green.svg') no-repeat;
  }

  #header.white .header_wrap > .btn_menu.open {
    background: url('../assets/header/bg_menu_close.svg') no-repeat;
  }

  .floating_menu {
    position: absolute;
    top: 76px;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #FFFFFF;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
  }

  .floating_menu.open {
    opacity: 1;
    visibility: visible;
  }

  .floating_menu > .floating_menu_item {
    height: 53px;
    padding: 0 32px;
    color: #91909A;
    font-family: 'NanumMyeongjo-YetHangul', serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 53px;
    text-decoration: none;
  }

  .floating_menu > .floating_menu_item:hover,
  .floating_menu > .floating_menu_item:focus,
  .floating_menu > .floating_menu_item:active,
  .floating_menu > .floating_menu_item.active {
    color: #62A286;
    background: #E8F0EC;
    appearance: none;
    outline: none;
  }

  /* intro */
  .intro_1 {
    overflow: hidden;
  }

  .intro_1 .cont_wrap > .cont_1 {
    width: 234px;
    max-height: 14px;
    margin: auto auto 0;
    font-size: 14px;
    line-height: 14px;
  }

  .intro_1 .cont_wrap > .cont_2 {
    width: 236px;
    max-height: 32px;
    margin: 29px auto 0;
    font-size: 32px;
    line-height: 32px;
  }

  .intro_1 .cont_wrap > .cont_3 {
    width: 240px;
    max-height: 60px;
    margin: 16px auto 0;
    font-size: 60px;
    line-height: 60px;
  }

  .intro_1 .cont_wrap > .cont_4 {
    width: 220px;
    max-height: 7px;
    margin: 10px auto auto;
    font-size: 7px;
    line-height: 7px;
  }

  .intro_1 .cont_wrap > .btn_scroll {
    display: none;
  }

  .intro_1 > .btn_left {
    left: 5%;
  }

  .intro_1 > .btn_right {
    right: 5%;
  }

  .intro_2 {
    height: calc(100vh - 76px);
    overflow: hidden;
  }

  .intro_2 > div {
    display: flex;
    flex-direction: column;
  }

  .intro_2 .top_wrap {
    height: auto;
    margin: auto;
  }

  .intro_2 .top_wrap > .subject {
    padding-top: 27px;
    background-size: 109px 18px;
    font-size: 8px;
    line-height: 1;
    letter-spacing: 1px;
    text-indent: 1px;
  }

  .intro_2 .top_wrap > .cont {
    margin: 26px auto;
    font-size: 26px;
    line-height: 30px;
    letter-spacing: 0;
    text-indent: 0;
  }

  .intro_2 .top_wrap > .logo {
    width: 139px;
    height: 53px;
    background-size: 139px 53px;
  }

  .intro_2 .bottom_wrap {
    flex-shrink: 0;
    height: auto;
    padding-bottom: 50px;
  }

  .intro_2 .bottom_wrap > .cont {
    padding: 46px 24px 0;
    font-size: 14px;
    word-break: keep-all;
  }

  .intro_2 .bottom_wrap > .btn_more {
    background-size: auto 18px;
    font-size: 14px;
  }

  .intro_3 {
    height: calc(100vh - 76px);
    overflow: hidden;
  }

  .intro_3 > div {
    flex-direction: column;
  }

  .intro_3 .left_wrap {
    width: 100%;
    height: auto;
  }

  .intro_3 .left_wrap > div {
    margin: 50px auto 0;
  }

  .intro_3 .left_wrap .subject {
    padding-top: 25px;
    background-size: auto 18px;
    font-size: 12px;
    letter-spacing: 1px;
    text-indent: 1px;
  }

  .intro_3 .left_wrap .cont_1 {
    font-size: 26px;
    line-height: 30px;
    letter-spacing: 0;
    text-indent: 0;
  }

  .intro_3 .left_wrap .cont_2 {
    margin-top: 20px;
    font-size: 14px;
  }

  .intro_3 .left_wrap .btn_more {
    background-size: auto 18px;
    font-size: 14px;
  }

  .intro_3 .right_wrap {
    width: 100%;
    height: auto;
    padding-top: 10px;
    margin: 30px 0 0;
  }

  .intro_3 .right_wrap .bg {
    bottom: 40%;
    left: 22px;
    background-size: auto 30px;
  }

  .intro_3 .right_wrap .image {
    position: unset;
    width: calc(100% - 64px);
    height: auto;
    margin: auto;
    background-size: 80% auto;
  }

  .intro_3 .right_wrap .image > img {
    width: 100%;
    height: auto;
  }

  .intro_4 {
    height: calc(100vh - 76px);
    padding-top: 76px;
    overflow: hidden;
  }

  .intro_4 > .bg {
    display: none;
    height: 464px;
    padding-top: 76px;
  }

  .intro_4 > .cont {
    flex-direction: column;
  }

  .intro_4 .right_wrap {
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .intro_4 .right_wrap > div {
    width: 100%;
  }

  .intro_4 .right_wrap > div:nth-child(1),
  .intro_4 .right_wrap > div:nth-child(2) {
    padding: 24px 24px 0;
    gap: 10px;
    background: #330802;
    box-sizing: border-box;
  }

  .intro_4 .right_wrap > div:nth-child(1) {

  }

  .intro_4 .right_wrap > div:nth-child(2) {
    padding-bottom: 24px;
    margin: 0;
  }

  .intro_4 .right_wrap > div:nth-child(3) {
    padding: 24px 24px 0;
    margin: 0;
    box-sizing: border-box;
  }

  .intro_4 .right_wrap .inner_left_wrap {
    width: 100%;
  }

  .intro_4 .right_wrap .inner_right_wrap {
    flex-shrink: 0;
    width: auto;
  }

  .intro_4 .right_wrap > div:nth-child(3) > .inner_left_wrap {
    position: relative;
    width: 100%;
  }

  .intro_4 .right_wrap > div:nth-child(3) > .inner_left_wrap > div:nth-child(3) {
    position: absolute;
    right: -50%;
    bottom: -25px;
    left: 0;
    word-break: keep-all;
  }

  .intro_4 .inner_left_wrap > div,
  .intro_4 .inner_right_wrap > div {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .intro_4 .right_wrap .btn {
    gap: 10px;
    width: 100%;
  }

  .intro_4 .left_wrap {
    width: 100%;
    height: auto;
    padding-top: 10px;
    margin: 30px 0 0;
  }

  .intro_4 .left_wrap:nth-child(1) {
    display: none;
  }

  .intro_4 .left_wrap:nth-child(3) {
    display: flex;
  }

  .intro_4 .left_wrap > .bg {
    top: 0;
    bottom: 40%;
    right: 22px;
    background-size: auto 30px;
  }

  .intro_4 .left_wrap > .image {
    position: unset;
    width: calc(100% - 64px);
    height: auto;
    margin: auto;
  }

  .intro_4 .left_wrap > .image > img {
    width: 100%;
    height: auto;
  }

  .intro_5 {
    height: calc(100vh - 76px);
    padding-top: 76px;
  }

  .intro_5 .bg {
    height: calc(100vh - 76px);
  }

  .intro_5 .floating_box {
    right: 24px;
    bottom: 24px;
    left: 24px;
    transform: none;
    flex-direction: column;
    width: auto;
    height: auto;
  }

  .intro_5 .floating_box > .image {
    width: 100%;
    height: 140px;
  }

  .intro_5 .floating_box > .cont {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    font-size: 14px;
  }

  .intro_5 .floating_box > .cont > .left > div > div:first-child,
  .intro_5 .floating_box > .cont > .right > div > div:first-child {
    width: 80px;
  }

  .intro_5 .floating_box > .cont > div > div > div {
    font-size: 13px;
    /*word-break: keep-all;*/
  }

  /* brand */
  .brand_1 .cont_wrap > .subject,
  .brand_2 .cont_wrap > .subject,
  .brand_3 .cont_wrap > .subject {
    padding-top: 25px;
    background-size: auto 18px;
    font-size: 11px;
    letter-spacing: 1px;
    text-indent: 1px;
  }

  .brand_1 .cont_wrap > .cont_1,
  .brand_2 .cont_wrap > .cont_1,
  .brand_3 .cont_wrap > .cont_1 {
    font-size: 26px;
    line-height: 30px;
    letter-spacing: 0;
    text-indent: 0;
  }

  .brand_1 .cont_wrap > .cont_2,
  .brand_2 .cont_wrap > .cont_2,
  .brand_3 .cont_wrap > .cont_2 {
    margin: 52px 16px auto;
    font-size: 14px;
    word-break: keep-all;
  }

  .brand_1 .cont_wrap > .cont_2 > br,
  .brand_2 .cont_wrap > .cont_2 > br,
  .brand_3 .cont_wrap > .cont_2 > br {
    display: none;
  }

  .brand_1 .cont_wrap > .cont_2 > br.keep,
  .brand_2 .cont_wrap > .cont_2 > br.keep,
  .brand_3 .cont_wrap > .cont_2 > br.keep {
    display: block;
  }

  /* menu */
  .menu_wrap {
    padding-top: 76px;
  }

  .menu_wrap > .top_wrap {
    height: 266px;
    background-position: 30% top;
    background-size: auto 266px;
  }

  .top_wrap > .cont_1 {
    margin-top: auto;
    font-size: 30px;
    letter-spacing: 4.8px;
    text-indent: 4.8px;
  }

  .top_wrap > .cont_2 {
    margin-top: 15px;
  }

  .top_wrap > .tab_wrap {
    width: 100%;
  }

  .tab_wrap > .tab_item {
    width: 25%;
    height: 47px;
    font-size: 14px;
  }

  .tab_wrap > .tab_item.active {
    background-color: #E8F0EC;
    background-size: 49px 12px;
  }

  .content_wrap > .content {
    width: 100%;
  }

  .content > .subject {
    padding-top: 29px;
    margin-top: 34px;
    background-size: 135px 22px;
    font-size: 14px;
    letter-spacing: 2.1px;
    text-indent: 2.1px;
  }

  .content > .cont_1 {
    margin-top: 7px;
    font-size: 24px;
  }

  .content > .big_menu {
    flex-direction: column;
    width: calc(100% - 40px);
    height: auto;
    padding: 24px;
    margin: 30px auto 0;
  }

  .big_menu > .image {
    width: 100%;
    height: auto;
  }

  .big_menu > .image > img {
    width: 100%;
    height: auto;
  }

  .big_menu > .image > div {
    margin-top: 10px;
    font-size: 10px;
    line-height: normal;
  }

  .big_menu .course_title > div:nth-child(1) {
    font-size: 30px;
  }

  .big_menu .course_title > div:nth-child(2) {
    font-size: 14px;
    letter-spacing: 2px;
    text-indent: 2px;
  }

  .big_menu .course_title > div:nth-child(3) {
    font-size: 24px;
    letter-spacing: 1px;
    text-indent: 1px;
  }

  .big_menu .course_title > div:nth-child(3) > span {
    width: 100px;
    font-size: 14px;
  }

  .big_menu .course_list {
    margin-top: 20px;
  }

  .big_menu .course_list > .course_item {
    width: 100%;
    padding-left: 0;
  }

  .big_menu .course_list > .course_item:nth-child(2n) {
    padding-left: 0;
  }

  .big_menu .course_item > div {
    text-align: center;
  }

  .big_menu .course_item > div:nth-child(1) {
    font-size: 18px;
  }

  .big_menu .course_item > div:nth-child(2) {
    font-size: 14px;
  }

  .big_menu > .btn_view {
    display: none;
  }

  .content > .menu_list {
    width: calc(100% - 40px);
    margin: 30px auto 50px;
    gap: 30px;
  }

  .menu_list > .menu_item {
    width: 100%;
    padding: 24px;
  }

  .menu_item > .image {
    width: 100%;
    height: auto;
  }

  .menu_item > .image > img {
    width: 100%;
    height: auto;
  }

  .menu_item > .image > .btn_view {
    display: none;
  }

  .menu_item > .title {
    margin: 14px auto;
  }

  .menu_item > .title > div:nth-child(1) {
    font-size: 20px;
  }

  .menu_item > .title > div:nth-child(2) {
    font-size: 14px;
  }

  .menu_item > .desc {
    padding-top: 14px;
    font-size: 12px;
  }

  .menu_item > .price {
    margin-top: 14px;
    font-size: 24px;
  }

  .big_menu .course_line {
    margin: 14px auto 0;
  }

  .content > .beverage_menu {
    flex-direction: column;
    width: calc(100% - 40px);
    margin-top: 30px;
  }

  .content > .beverage_menu.beverage_1,
  .content > .beverage_menu.beverage_2,
  .content > .beverage_menu.beverage_4,
  .content > .beverage_menu.beverage_3 {
    height: auto;
  }

  .beverage_menu > .beverage_title {
    position: unset;
    padding: 28px 16px 0 110px;
    gap: 11px;
  }

  .beverage_menu > .beverage_title > div:nth-child(1) {
    margin-left: 0;
    font-size: 18px;
  }

  .beverage_menu > .beverage_title > div:nth-child(2) {
    margin-left: 0;
    font-size: 14px;
    letter-spacing: 2.1px;
  }

  .beverage_menu > .beverage_list {
    position: unset;
    padding: 0 16px 0 110px;
    margin-top: 38px;
  }

  .beverage_menu > .beverage_list:last-child {
    padding-bottom: 70px;
  }

  .beverage_list > .beverage_item {
    flex-wrap: wrap;
    gap: 18px;
  }

  .beverage_list > .beverage_item > .title {
    gap: 18px;
  }

  .beverage_item > .title > div:nth-child(1) {
    font-size: 16px;
  }

  .beverage_item > .title > div:nth-child(1) > span {
    margin-left: 15px;
    font-size: 16px;
  }

  .beverage_item > .title > div.desc {
    word-break: break-all;
  }

  .beverage_item > .title > div.desc > br {
    display: none;
  }

  .beverage_list > .beverage_item > .capacity {
    position: unset;
    font-size: 16px;
    line-height: normal;
  }

  .beverage_list > .beverage_item > .price {
    position: unset;
    font-size: 16px;
    line-height: normal;
  }

  .beverage_2 .beverage_item > .title > div:nth-child(1) {
    font-size: 20px;
    line-height: 30px;
  }

  .beverage_2 .beverage_item > .title > div:nth-child(1) > span {

  }

  .beverage_2 .beverage_item > .title > div:nth-child(1) > span.web {
    display: none;
  }

  .beverage_2 .beverage_item > .title > div:nth-child(1) > span.mobile {
    display: block;
    margin: 0;
  }

  .beverage_2 .beverage_item > .title > div:nth-child(1) > span.other {
    display: block;
    margin-left: 0;
  }

  .beverage_2 .beverage_item > .title > div:nth-child(2) {
    font-size: 14px;
  }
  
  .beverage_4 .beverage_item > .title > div:nth-child(1) {
    font-size: 20px;
    line-height: 30px;
  }

  .beverage_4 .beverage_item > .title > div:nth-child(1) > span {

  }

  .beverage_4 .beverage_item > .title > div:nth-child(1) > span.web {
    display: none;
  }

  .beverage_4 .beverage_item > .title > div:nth-child(1) > span.mobile {
    display: block;
    margin: 0;
  }

  .beverage_4 .beverage_item > .title > div:nth-child(1) > span.other {
    display: block;
    margin-left: 0;
  }

  .beverage_4 .beverage_item > .title > div:nth-child(2) {
    font-size: 14px;
  }

  .beverage_3 .beverage_list > .beverage_item > .title {
    width: 100%;
  }

  .beverage_3 .beverage_item > .title > div:nth-child(1) > span {
    margin-left: 0;
  }

  /* footer */
  #footer {
    height: auto;
    padding: 16px;
    box-sizing: border-box;
  }

  .footer_wrap {
    position: relative;
    flex-direction: column;
    height: auto;
  }

  .footer_wrap > .logo {
    width: auto;
    height: 60px;
    margin: auto auto 16px;
  }

  .footer_wrap > .logo > img {
    width: auto;
    height: 100%;
  }

  .footer_wrap > .sns {
    display: none;
  }

  .footer_wrap > .cont {
    margin: auto;
  }

  .footer_wrap > .cont > .web {
    display: none;
  }

  .footer_wrap > .cont > .mobile {
    display: block;
  }
}