@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
  display: block;
}

ul li {
  list-style: none;
}

#wrap {
  width: 1200px;
  margin: 0 auto;
}
header {
  width: 100%;
  height: 150px;
}
.h_box1 {
  width: 100%;
  height: 100px;
  display: flex;
}
.logo {
  width: 200px;
  height: 100px;
}
.logo img {
  height: 100px;
  object-fit: cover;
}
.l_menu {
  width: 1000px;
  height: 100px;
  display: flex;
  padding-left: 700px;
}
.l_menu>a {
  padding: 35px 10px;
}
.l_menu p {
  font-size: 14px;
  border-bottom: 2px solid #206624;
  color: #206624;
}
.l_menu>a:hover {
  font-weight: bold;
}
.h_box2 {
  width: 100%;
  height: 50px;
  display: flex;
}
nav {
  width: 1000px;
}
.menu {
  display: flex;
  width: 500px;
  height: 50px;
  color: #000;
  text-align: center;
}
.menu>li {
  width: 100px;
  height: 50px;
  line-height: 50px;
}
.menu>li>a{
  width: 100px;
  height: 50px;
}
.menu>li:hover {
  border-bottom: 3px solid #206624;
  color: #206624;
  font-weight: bold;
}
.submenu {
  width: 100px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  text-align: center;
  display: none;
  z-index: 9;
  position: relative;
  top: 10px;
}
.submenu>li {
  width: 100px;
  line-height: 50px;
}
.submenu>li>a{
  width: 100px;
  font-size: 12px;
}
.submenu>li:hover {
  color: #206624;
  font-weight: bold;
}
#home {
  color: #206624;
  border-bottom: 3px solid #206624;
  font-weight: bold;
}
.search_box {
  width: 200px;
  height: 50px;
}
.search_box>a{
  width: 200px;
  height: 50px;
  display: flex;
  text-align: center;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 100px;
  padding: 0 20px;
}
.search_box img {
  width: 24px;
  height: 24px;
  margin-top: 12px;
  opacity: 0.6;
}
.search_box p {
  width: 176px;
  height: 50px;
  font-size: 10px;
  padding-top: 15px;
  opacity: 0.6;
}
#slide {
  width: 100%;
  height: 400px;
  margin-top: 10px;
  overflow: hidden;
}
#slide>a {
  width: 100%;
  height: 400px;
}
#slide img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
}
#contents {
  width: 100%;
}
/* 더보기 정렬 */

#plus {
  width: 200px;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #206624;
  border-radius: 12px;
  margin-top: 30px;
  cursor: pointer;
  text-align: center;
  padding: 10px 0  0 5px;
  margin-left: 500px;
}

#plus:hover {
  background-color: #206624;
  color: #fff;
}
/* 장르별 랭킹 */

.contents1 {
  width: 100%;
  padding: 80px 0;
}
.contents1 h2 {
  text-align: center;
}
.title {
  width: 200px;
  border-radius: 12px;
  color: #206624;
  padding: 2px;
  margin-left: 500px;
}

.titlemenu {
  display: flex;
  margin-left: 200px;
  padding: 25px 5px;
  text-align: center;
  flex-wrap: wrap;
  min-width: 390px;
}
.titlemenu>a {
  width: 105px;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #206624;
  border-radius: 12px;
  margin-left: 10px;
  font-size: 14px;
  padding: 3px 0;
}
.c_box  {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  min-width: 390px;
}
.c_box>a {
  width: 275px;
}
.c_menu1 img {
  width: 275px;
  height: 415px;
  border-radius: 12px;
}
.c_menu1 span {
  font-size: 16px;
  font-weight: bold;
}
.c_menu1 p {
  font-size: 13px;
  padding: 5px 0;
}
.day {
  opacity: 0.6;
}
.titlemenu a:hover {
  background-color: #206624;
  color: #fff;
}

/* 곧 오픈하는 공연 */

.contents2 {
  width: 100%;
  padding: 80px 0;
}
.contents2 h2 {
  text-align: center;
}
.title2 {
  width: 200px;
  border-radius: 12px;
  color: #206624;
  padding: 2px;
  margin-left: 500px;
}
.c_box2  {
  display: flex;
  gap: 32px;
  margin-top: 25px;
  flex-wrap: wrap;
  min-width: 390px;
}
.c_menu2 {
  width: 275px;
}
.c_menu2 img {
  width: 275px;
  height: 415px;
  border-radius: 12px;
}
.c_menu2 span {
  font-size: 16px;
  font-weight: bold;
}
.c_menu2 p {
  font-size: 13px;
  padding: 5px 0;
}
/* 할인티켓 */

.contents3 {
  width: 100%;
  padding: 80px 0;
}
.contents3 h2 {
  text-align: center;
}
.title3 {
  width: 200px;
  border-radius: 12px;
  color: #206624;
  padding: 2px;
  margin-left: 500px;
}
.c_box3  {
  display: flex;
  gap: 32px;
  margin-top: 25px;
  flex-wrap: wrap;
  min-width: 390px;
}
.c_menu3 {
  width: 275px;
}
.c_menu3 img {
  width: 275px;
  height: 415px;
  border-radius: 12px;
}
.c_menu3 span {
  font-size: 16px;
  font-weight: bold;
}
.c_menu3 p {
  font-size: 13px;
  padding: 5px 0;
}

#p1 {
  color: red;
  font-size: 17px;
  font-weight: bold;
}
#p1 span {
  color: #000;
  padding: 0 10px;
  font-size: 13px;
}
/* 배너 */
.banner1 {
  width: 100%;
  height: 150px;
  overflow: hidden;
}
.bannerlist {
  width: 200%;
  height: 150px;
  display: flex;
}
.bannerlist img {
  width: 100%;
  height: 150px;
}
/* 공연장별 작품 */
.contents4 {
  width: 100%;
  padding: 80px 0;

}
.contents4 h2 {
  text-align: center;
}
.title4 {
  width: 200px;
  border-radius: 12px;
  color: #206624;
  padding: 2px;
  margin-left: 500px;
}
.titlemenu2 {
  display: flex;
  margin-left: 370px;
  padding: 25px 5px;
  text-align: center;
}
.titlemenu2>a {
  width: 100px;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #206624;
  border-radius: 12px;
  margin-left: 10px;
  font-size: 14px;
  padding: 3px 0;
}
#wrap4 {
  width: 100%;
  height: 100%;
  display: flex;
  padding-bottom: 25px;
  gap: 10px;
}
.leftbox {
  width: 300px;
  height: 100%; 
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.leftbox>a {
  width: 300px;
  height: 500px;
}
.leftbox img {
  width: 300px;
  height: 400px;
}
.leftbox p {
  width: 100px;
  height: 50px;
  text-align: center;
  padding-top: 10px;
  margin-left: 100px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.leftbox>a:hover {
  font-weight: bold;
}
.rightbox {
  width: 900px;
  height: 100%;
}
.rightbox-inner {
  display: flex;
}
.rightbox-inner>a {
  width: 50%;
  padding: 0 10px;
  display: flex;
}
.wrap4 {
  width: 290px;
}
.rightbox img {
  width: 160px;
  height: 200px;
  border-radius: 12px;
}
.rightbox-inner2 {
  display: flex;
  padding-top: 100px;
}
.rightbox-inner2>a {
  width: 50%;
  padding: 0 10px;
  display: flex;
}
.wrap4 {
  width: 290px;
  padding-top: 140px;
  padding-left: 10px;
  text-align: left;
}
.wrap4 span {
  font-size: 16px;
  font-weight: bold;
}
.wrap4 p {
  font-size: 13px;
}
.wrap6 {
  width: 290px;
  padding-top: 140px;
  padding-left: 10px;
  text-align: left;
}
.wrap6 span {
  font-size: 16px;
  font-weight: bold;
}
.wrap6 p {
  font-size: 13px;
}

.titlemenu2 a:hover {
  background-color: #206624;
  color: #fff;
}
/* 관람 후기 */
.contents5 {
  width: 100%;
  padding: 80px 0;
  position: relative;
}
.contents5 h2 {
  text-align: center;
}
.title5 {
  width: 200px;
  border-radius: 12px;
  color: #206624;
  padding: 2px;
  margin-left: 500px;
}
.upbox {
  width: 100%;
  display: flex;
  gap: 100px;
  padding-top: 25px;
  flex-wrap: wrap;
  min-width: 390px;
}
.upbox>a {
  display: flex;
}
.upbox img {
  width: 150px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}
.downbox {
  width: 100%;
  display: flex;
  gap: 100px;
  padding-top: 25px;
  flex-wrap: wrap;
  min-width: 390px;
}
.downbox>a {
  display: flex;
}
.downbox img {
  width: 150px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}
.wrap5 {
  width: 400px;
  height: 200px;
  padding-left: 10px;
  position: relative;
}
.p_wrap5 {
  font-size: 20px;
  font-weight: bold;
}
.wrap5 img {
  width: 15px;
  height: 15px;
  object-fit: cover;
  padding-top: 2px;
}

.wrap5 span {
  font-size: 13px;
  bottom: 0;
  position: absolute;
}
.wrap5 p {
  width: 400px;
  font-size: 15px;
  padding-top: 10px;
}


/* 두번째 배너 */
.banner2 {
  width: 100%;
  height: 150px;
}
.banner2-inner {
  width: 100%;
  height: 150px;
  display: flex;
  padding-top: 20px;
  flex-wrap: wrap;
}
.banner2-inner>a {
  width: calc(100% / 4);
  height: 80px;
  display: flex;
  padding: 7px 10px;
}
.banner2-inner img {
  width: 50px;
  height: 50px;
  margin-left: 60px;
  margin-top: 5px;
  object-fit: cover;
}
.banner2-inner p {
  font-size: 13px;
}
.banner2-inner>a:hover {
  transform: scale(0.9);
}
/* 푸터 */
footer {
  width: 100%;
  height: 200px;
  margin-top: 50px;
}
.fbox {
  width: 100%;
  height: 50px;
  display: flex;
  padding-top: 15px;
  padding-left: 250px;
  flex-wrap: wrap;
}
.fbox>a {
  font-size: 14px;
  padding: 0 10px;
}
.fbox>a:hover{
  font-weight: bold;
}
.fbox2 {
  display: flex;
  font-size: 13px;
  padding-top: 10px;
}
.fbox2-1 {
  width: calc(100% / 3);
  height: 150px;
}
.fbox2 p {
  padding-left: 20px;
}
.fbox2 span {
  padding-left: 20px;
}
.fbox2-2 {
  width: calc(100% / 3);
  height: 150px;
}
.fbox2-3 {
  width: calc(100% / 3);
  height: 150px;
}

.smartphone_menu{display: none;}
.smartphone_menu img {width: 30px;height: 30px;}
.mypage {display: none;}
.mypage img {width: 30px;height: 30px;}
.titlemenu3 {
  width: 130px;
  height: 35px;
  display: none;
  background-color: #206624;
  color: #fff;
  border-radius: 12px;
  padding: 4px;
  margin-left: 30px;
  text-align: center;
}
.titlemenu4 {
  display: none;
  width: 130px;
  height: 35px;
  display: none;
  background-color: #206624;
  color: #fff;
  border-radius: 12px;
  padding:  4px;
  margin-left: 30px;
  text-align: center;
}
#slide2 {
  display: none;
  width: 500px;
  height: 550px;
  margin-top: 10px;
  overflow: hidden;
}
#slide2>a {
  width: 100%;
  height: 100%;
}
#slide2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#menu {
  width: 100%;
  height: 100%;
  background-color: #338e37;
  position: absolute;
  top: 0;
  display: none;
}
.close {
  width: 24px;
  height: 24px;
  margin-top: 20px;
  margin-left: 20px;
  color: #fff;
  text-align: center;
}
.menu1 {
  width: 100%;
  height: 200px;
  text-align: center;
  margin-top: 20px;
}
.menu1>li {
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.menu1>li>a {
  width: 100%;
  height: 50px;
  color: #fff;
}
.menu1>li>a:hover {
  background-color: #226025;
  font-weight: bold;
}

.footerbox {display: none;}
@media only screen and (max-width: 750px){
  #wrap{
    width: 100%;
  }
  /* 헤더 영역 */
  header{width: 100%; }
   nav, .l_menu{
    display: none;
  }
  .logo{width: 100%;}
  .logo>a{width: 100px;margin: 0 auto;}
  .logo img{width: 100px;}
  .search_box{margin:0 auto;}
  .search_box>a {width: 150px;height: 30px;position: relative; left: 25px;}
  .search_box img { width: 16px;height: 16px;position: absolute;top: -6px;left:10px;}
  .search_box p { position: absolute;top: -9px;left: -5px;}
  .smartphone_menu{display: block;position: absolute;top:30px;left:10px}
  .mypage{display: block;position: absolute; top: 35px;right: 10px;}
  /* 슬라이드 영역 */
    #slide { display: none;}
    #slide2 {display: block;}
    #slide2 img {border-radius: 12px;}
 

  /* 컨텐츠 영역 */
  #plus {margin-left: 150px;}
  /* 장르별 랭킹 */
  .title { width: 100%;}
  .titlemenu { width: 100%;position: relative; left: -200px; gap: 5px;}
  .title>h2 {width: 100%; position: absolute; left: 5px; top: 750px;}
  .titlemenu>a {width: 100px; font-size: 14px; margin-top:5px;}
  .c_box {max-width: 500px; ;margin-left: 10px; gap: 75px;}
  .c_box>a{width: 200px;}
  .c_menu1 img {width: 200px;height: 315px;}
  .c_menu1 span {font-size: 12px;}
  .c_menu1 p {font-size: 10px;}
 

  /* 곧 오픈 하는 작품 */
   .title2 {width: 100%;}
  .contents2{position: relative;}
  .title2>h2 {width: 100%;position: absolute; left: 5px;top: 15px;}
  .c_box2 {max-width: 500px;;margin-left: 10px; gap: 75px;}
  .c_box2>a{width: 200px;}
  .c_menu2 {width: 200px;}
  .c_menu2 img {width: 200px;height: 315px;}
  .c_menu2 span {font-size: 12px;}
  .c_menu2 p {font-size: 10px;}

  /* 할인 티켓 */
  .title3 {width: 100%;}
  .contents3{position: relative;}
  .title3>h2 {width: 100%;position:absolute;left: 5px;top: 15px;}
  .c_box3 {max-width: 500px;margin-left: 10px; gap: 75px;}
  .c_box3>a{width: 200px;}
  .c_menu3 {width: 200px;}
  .c_menu3 img {width: 200px;height: 315px;}
  .c_menu3 span {font-size: 12px;}
  .c_menu3 p {font-size: 10px;}


  /* 배너 */
  .bannerlist img {
    width: 100%;
    object-fit: contain;
    object-position: center;
  }

 /* 공연장별 작품 */
 .title4 {width: 100%;}
 .contents4 {position: relative;}
 .title4>h2{width: 100%; position: absolute;left: 5px; top: 15px;}
 .titlemenu2 , .leftbox{display: none;}
 .titlemenu3{display: block;}
 .titlemenu4{display: block; position: relative;top: 420px;}
 .rightbox{max-width: 500px;  margin-left: 10px; gap: 75px;}
 .rightbox-inner { position: relative; gap: 45px;}
 .wrap4 {position: absolute;top: 180px;}
 .rightbox-inner2 {margin-top: 30px; position: relative;padding-bottom: 50px; gap: 45px;}
 .wrap6 {width: 200px; position: absolute; top: 280px;}
 .wrap4 span {font-size: 12px;}
 .wrap4 p {font-size: 10px;}
 .wrap6 span {font-size: 12px;}
 .wrap6 p {font-size: 12px;}
 .rightbox-inner img {width: 200px;height: 315px;}
 .rightbox-inner2 img {width: 200px;height: 315px;}


 /* 관람후기 */
  .title5 {width: 100%;}
  .contents5{position: relative;}
  .title5>h2 {width: 100%;position:absolute;left: 5px;top: 15px;}
  .upbox {max-width: 500px;margin-left: 10px;}
  .upbox>a {width: 200px; gap: 55px;}
  .upbox img {width: 200px;height: 315px;}
  .wrap5 img {width: 16px;height: 16px;}
  .downbox {max-width: 500px;margin-left: 10px;margin-top: 100px;}
  .downbox>a {width: 200px; gap: 55px;}
  .downbox img {width: 200px;height: 315px;}
  .wrap5 img {width: 16px;height: 16px;}
  .wrap5 {width: 200px;}
  .p_wrap5 { font-size: 14px;}
  .wrap5 p {width: 200px; font-size: 13px;}
  .wrap5 span {position: absolute; top: 290px; font-size: 10px;}

  /* 배너 2 */
  .banner2 {width: 500px;}
  .banner2-inner {width: 500px;}
  .banner2-inner>a{width: 220px;margin-left: 20px;margin-top: 10px;}
  .banner2-inner h3 {font-size: 12px;}
  .banner2-inner img {width: 40px; height: 40px;}
  .banner2-inner p {font-size: 10px;}


  /* 푸터 */
  .fbox, .fbox2 {display: none;}
  .footerbox {display: block; text-align: center; padding-top: 50px;}
  .footerbox p {font-size: 10px;}


  #menu {display: none; width: 100%;height: 100%;}
}