/* -------------- style1.css -------------- */

body {
  font-family: "Lato", "Open Sans", sans-serif;
  color: #3e3e3e;
  /* 구글 폰트에서 찾아서 html에 link넣어주고, 여기에 이거 추가 */
}

* {
  margin: 0;
}

a {
  text-decoration: none;
  color: #3e3e3e;
}

img {
  max-width: 100%;
} /* 박스 사이즈에 최대로 */

/* //////////////////////////////////////////////////// */

/*  상단 네비게이션 바 */

header .container {
  display: flex;
  flex-direction: row;

  /* height: 5rem;  <-- 높이는 자동으로 되도록 패딩으로 높이 조정해라.
       이렇게 높이를 지정해버리면,  작은화면에 토글버튼 나올때
       높이가 자동으로 변하지못해서 문제가 발생한다.
       로고가 올라가고, 메누 첫줄도 안보이게 된다.. */

  justify-content: space-around; /* 화면작아지면, 이거변경된다 */
  flex-wrap: nowrap; /* 화면작아지면, 이거변경된다 */

  padding: 1rem 2rem; /* 화면작아지면, 이거변경된다 */

  align-items: center;
  align-content: center;

  margin-bottom: 1rem;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  z-index: 101; /* 다음에 z인덱스를 101 보다 작은 값으로 해주면, 그것들은 모두 메뉴바 밑에 나온다. */
}

header .container.sticky {
  box-shadow: 3px 3px 12px 2px #ddd;
  /* box-shadow: 수평 수직 blur 크기 색상 */
  padding: 5px;
  /* 화면작아지면, 이거변경된다 */
}

/* ==================  */
header .container.sticky .logo {
  max-width: 7rem;
} /* 이 박스의 크기를 지정했다 */

header .container.sticky .slogan {
  display: none;
}
/* ==================  */

/* ==================  */
.logo {
  max-width: 12rem;
} /* 이 박스의 크기를 지정했다 */

.slogan {
  font-size: 0.82rem;
}
/* ==================  */

.sticky {
  position: fixed;
  top: 0rem;
  right: 0;
  left: 0px;

  animation-name: slideshow;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  /* animation: slideshow 0.5s ease-in; */
  /* ease-in 느리게시작  ease-out 느리게끝*/
}

@keyframes slideshow {
  0% {
    top: -70px;
  }
  100% {
    top: 70;
  }
}

.nav-bar {
  /* border: 1px solid grey;*/
  display: flex; /* 안의 내용을 옆으로 나열 */

  list-style: none; /* 리스트 앞의 쩜을 지운다. */
  padding-left: 0rem; /* 리스트 앞의 기본여백 지운다. */

  font-weight: 700;
  letter-spacing: -0.05rem;
  line-height: 0.9;
  text-transform: uppercase;
  /* justify-content: center;   */
  /* 옆으로된거에서는 이거로  좌우정렬 */
  /* 위아래로 된거에서는 align-items: center 로 좌우정렬 */
  /* width: 100%; */
}



/* 폭이 좁은 화면에서만 나오는 메뉴임 */
.nav-bar2 {
  /* border: 1px solid grey; */

  padding: 1rem;
  display: none;
  /* 화면 작을때만 나오도록. 그기고 그때는 flex 로해서 안의 내용을 옆으로 나열 */

  flex-flow: row nowrap;
  justify-content: space-around;

  list-style: none; /* 리스트 앞의 쩜을 지운다. */
  padding-left: 0rem; /* 리스트 앞의 기본여백 지운다. */

  font-weight: 700;
  letter-spacing: -0.05rem;
  line-height: 0.9;
  text-transform: uppercase;

  text-align: center;
}

.nav-bar li,
.nav-bar2 li {
  /*메뉴안의 리스트 태그 */
  padding: 0.5rem 1rem; /* hovver때 색이 변할 패딩 넓이 */
  text-align: center; /* 메뉴글씨가 두줄로 변헀을때 가운데 정렬*/
  width: fit-content; /* 옆으로 메뉴일때, 메뉴가 두줄로 바뀌는거 동시에 되도록.. */
  /*width: min-content;  /* 옆으로 메뉴일때, 메뉴가 항상 두줄로 나오도록.. */
}

.nav-bar li:hover,
.nav-bar2 li:hover {
  background-color: #eee;
  border-radius: 0.3rem; /* 모서리 둥글게   */
}

.nav-bar a:hover,
.nav-bar2 a:hover {
  color: #000;
}

/* 토글 버튼 */

.nav-toggleBtn {
  display: none; /* 화면에 표시 안되도록 . 아레 media 부분에 다시 보이게하는거 넣을거다. */
  position: absolute; /* 흐름과 관계없이, Body 기준으로 맨 위로 */
  top: 0.6rem;
  right: 1.2rem;
}

.bar1,
.bar2,
.bar3 {
  display: none;
  width: 1.6rem;
  height: 0.3rem;
  margin: 0.1rem 0;
  background-color: #355065;
  transition: 0.3s;
}

.bar1.active {
  /* bar1 이면서 active 인거를 찾는거니까 붙여쓴다  */
  -webkit-transform: rotate(-45deg) translate(-0.37rem, 0.37rem);
  transform: rotate(-45deg) translate(-0.33rem, 0.37rem);
}

.bar2.active {
  opacity: 0;
}

.bar3.active {
  -webkit-transform: rotate(45deg) translate(-0.37rem, -0.37rem);
  transform: rotate(45deg) translate(-0.33rem, -0.37rem);
}

/* //////////////////////////////////////////////////// */
/* ====================  본 문  시 작  ================= */

section .container {
  padding: 0rem 0rem;

  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  /* align-items: center; */
  /*align-content: center;*/
}

/* ///////////////////////////////////////////// */

/* ======  메인 페이지 ============================ */

.main1 {
  padding: 2rem 1rem;

  display: flex;
  flex-flow: row wrap;
  justify-content: center; /* flex , row 에서 넘어온 것들을 가운데정렬 */
  align-items: center; /* row 에서 박스들의 높이 정렬 */
  /*align-content: center; */

  font-size: 0.8rem;
  line-height: 1.8;

  background-image: url(../img/bg-main1.jpg);
  background-repeat: no-repeat;
  background-position: 20% 20%;
  background-size: cover;
}

.m11 {
  /* border: 1px dashed; */
  padding: 1rem;
  text-align: center;
  font-weight: 700;
}

.m12 {
  width: 90%;
  padding: 1rem 2rem;
  color: #3b658a;
}
.m12 ul {
  padding: 0rem 2rem; /* 리스트 기본 점 있을때 위치에서 좌우 조절 */
  margin-top: 1.5rem;
}
.m12 li {
  list-style: none; /* 리스트 앞의 쩜을 지운다. */
}
.m12 li:before {
  display: inline-block; /* 다음에 오는 글씨와 한줄로 */

  content: ""; /* 내용없고    */
  background-color: #3b658a; /* 배경색 넣고 */
  width: 0.2rem;
  height: 0.2rem; /* 크기 설정   */
  border-radius: 50%; /* 원형으로    */

  position: relative; /* 이거써야 아래 top 과 left로  위치 조절가능해진다 */
  top: -0.15rem;
  left: -0.5rem;
}

.m13 {
  width: 90%;
  max-width: 45rem;
  padding: 1rem 0;
  margin: 1rem; /* 밑의 border 선 넓이를 글씨와 같게하려고*/
  border-bottom: 1px solid #a8ccdb;
}

.m14 {
  width: 90%;
  max-width: 45rem;
  margin: 2rem;
  font-size: 1.1rem;
  font-weight: 900;
  color: #3b658a;
}

/* =================================== */

.main2 {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;

  padding: 12.5em 1rem 2rem 1rem;

  font-size: 0.8rem;
  line-height: 1.8;

  background-image: url(../img/bg-main2.jpg);
  background-repeat: no-repeat;
  background-position: calc(50% + 2rem) -12rem;
  background-size: auto 600px; /* 넓이 높이 */

  background-color: #fafafa;
}

.m21,
.m23 {
  padding: 0rem 2rem;
  color: #5e7c92;
  width: 100%;
}

.m21 p,
.m23 p {
  padding-bottom: 1rem;
}

.m22 {
  padding: 1rem 2rem;
  max-width: 45rem;
}

/* =================================== */

.main3 {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  /* 위아래로 좌우정렬 되게하려면... */
  /* flex , row 이면, 밀려서 넘어온거를 justify-content: center; 로 해준다 */
  /* flex , column 이면,  align-items: center 로 해준다 */

  padding: 3rem 1rem;
  /* 이거를 width: 90% 로 조정하면, 배경도 줄어든다 */

  font-size: 0.8rem;
  line-height: 1.8;

  background-image: url(../img/bg-main3.jpg);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% auto;
  background-color: #ecf1f5;
}

.main3 h1 {
  text-align: center;
}

.m31 {
  width: 90%;
  color: #5e7c92;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.m311 {
  width: 30%;
  text-align: left;
  font-weight: 700;
  padding-bottom: 1rem; /* 위아래 배치될때, 각 문장 사이 간격 */
}

.m32 {
  border-top: 1px solid #a0bdd1;
  border-bottom: 1px solid #a0bdd1;

  margin: 20px auto;
  padding: 15px 0;

  width: 80%;
  color: #1a2b38;
}






/* ///////////////////////////////////////////// */

/* ======  DMZ 투어 페이지 ====================== */

.page-title {
  width: 18rem;

  font-size: 2.2rem;
  font-weight: 700;
  transform: scale(1, 0.7);
  letter-spacing: -0.2rem;
  line-height: 1;
  padding: 0 0 0 0;

  text-align: center; /* div 안의 텍스트 정렬 */
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center; /* 컬럼 플레스 안의 박스들을 가운데정렬 */
}

/* ====  필터링 ==================== */

#myBtnContainer {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0 0 1rem 0;
}

.tourtype {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem;
}

.filterDiv {
  display: none;
} /* 일단 안보이게.. */
.show {
  display: block;
} /* 필터링된 엘리먼트에 show 클라스가 생기면 보이게 */

.filter-btn {
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  color: #7dc3e6;
  background-color: #fff;

  border: none;
  outline: none;
  margin: 0.3rem; /* 버튼 밖 여백 */
  padding: 0.3rem; /* 버튼 안 글자 주변 여백 */
  border: 2px solid #fff;
}

.filter-btn:hover {
  color: #7dc3e6;
  border: 2px solid #b7cad6;
}

.filter-btn.active {
  color: #377da0;
  border: 2px solid #7cacca;
}

/* ====  필터링 ==================== */

/* ///////////////////////////////////////// */
/* =============  투 어  목 록  ============= */

/* 개별 투어들을 감싸는 박스  */
.t-lists {
  margin-top: 0rem; /* 필터 메뉴와 간격 늘린거 */
  max-width: 70rem; /* 이거 조절해서 한줄에 2개 또는 3개 나오게한다.*/

  /* box-shadow: 5px 5px 20px #ccc; */
  /* box-shadow: h-offset v-offset blur spread color */
  width: 100%;
  display: flex;
  justify-content: center; /* 개별 투어들이 한줄에 2-3개 나올때 간격조정 */
  flex-flow: row wrap;
  /* 이거 nowrap 으로 바꾸면, 투어 사진들도 모두 자동 조절된다 */

  /*align-items: center; */
  /*align-content: center;*/
}

/* --------------------- */
/* 각각의 개별 투어 박스   */
.tour {
  width: 47%; /* 위에서 박스 넓이를 100% 으로 했고, 
        각각 투어는 47%로 설정. 그래야 자동으로 크기 변한다 */
  max-width: 320px;
  /*  위의 자동으로 변하는 크기의 최대치를 설정했다. */
  /*  일단 1010 이전에 3개 투어가 나오도록 했다 */

  margin: 1rem 0.6rem 3rem 0.6rem; /* 개별투어 박스들 사이의 간격 */

  box-shadow: 2px 2px 10px #ccc;
  /* box-shadow: h-offset v-offset blur spread color */
}

/* --------------------- */
/* DMZ투어 적용되는거     */
.tour1 {
  /*  지금 내용을 위의것과 같지만, 화면 커지면 이거만 바꾸야되니까.. */
  max-width: 22rem;
  /* margin: 0.6rem 0.6rem 3rem 0.6rem; */
  box-shadow: 2px 2px 10px #ccc;
  margin: 0px auto 30px auto;
}

.dmztour1 .t-image {
  background-image: url("../img/dt-01.jpg");
}
.dmztour2 .t-image {
  background-image: url("../img/dt-02.jpg");
}
.dmztour3 .t-image {
  background-image: url("../img/dt-03.jpg");
}
.seoul01 .t-image {
  background-image: url("../img/st-01.jpg");
}
.seoul02 .t-image {
  background-image: url("../img/st-02.jpg");
}
.seoul03 .t-image {
  background-image: url("../img/st-03.jpg");
}
.seoul04 .t-image {
  background-image: url("../img/st-04.jpg");
}
.seoul05 .t-image {
  background-image: url("../img/st-05.jpg");
}
.seoul06 .t-image {
  background-image: url("../img/st-06.jpg");
}
.seoul07 .t-image {
  background-image: url("../img/st-07.jpg");
}
.seoul08 .t-image {
  background-image: url("../img/st-08.jpg");
}
.seoul09 .t-image {
  background-image: url("../img/st-09.jpg");
}
.seoul10 .t-image {
  background-image: url("../img/st-10.jpg");
}
.seoul11 .t-image {
  background-image: url("../img/st-11.jpg");
}
.seoul12 .t-image {
  background-image: url("../img/st-12.jpg");
}
.ski01 .t-image {
  background-image: url("../img/skt-01.jpg");
}
.ski02 .t-image {
  background-image: url("../img/skt-02.jpg");
}
.ski03 .t-image {
  background-image: url("../img/skt-03.jpg");
}
.ski04 .t-image {
  background-image: url("../img/skt-04.jpg");
}
.ski05 .t-image {
  background-image: url("../img/skt-05.jpg");
}
.ski06 .t-image {
  background-image: url("../img/skt-06.jpg");
}
.ski07 .t-image {
  background-image: url("../img/skt-07.jpg");
}

.t-image {
  /* 이미지크기가 아니다. 이미지를 배경으로 넣을 박스의 크기다. */
  height: 14rem;
  width: 100%;
  background-size: cover; /* 배경에 꽉채우는거 */
  background-position: center;
  position: relative; /* 이거해야 오버레이 된다*/
}

.overlay {
  background: -moz-linear-gradient
    (top, #1f5e991a 0%, #1f5e991a 50%, #1f5e99bf 100%);
  background: -webkit-linear-gradient(
    top,
    #1f5e991a 0%,
    #1f5e991a 50%,
    #1f5e99bf 100%
  );
  background: linear-gradient
    (to bottom, #22629e1a 0%, #1f5e991a 50%, #1f5e99bf 100%);
  /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1f5e99', endColorstr='#bf1f5e99',GradientType=0 ); */

  width: 100%;
  height: 100%; /* 부모의 넓이로 */
  top: 0;
  left: 0; /* 겹처질 부분을 시작점을 지정 */
  position: absolute; /* 이거해야  부모에 겹쳐진다 */
}

.t-name {
  padding: 9rem 0 0 0.1rem; /* 글씨 넣을 위치 설정 */
  /* 아래쪽 패딩은 , 위애서 padding-top 으로 네려오는거라서 */
  max-width: 15rem; /* 두줄로 만들려고, 넓이 제한했다 */

  font-size: 36px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;

  letter-spacing: -0.05rem;
  line-height: 0.9;

  position: relative; /* 이거 해줘야 바탕화면 위로 보여진다 */
}

/* ---------------------------- */

/* DMZ투어 적용되는거 */
.tour1 .t-name {
  padding: 11rem 0 0 0.7rem; /* 글씨 넣을 위치 설정 */
  /* 아래쪽 패딩은 , 위애서 padding-top 으로 네려오는거라서 */
}

/* DMZ투어 적용되는거 */
.tour1 .t-name2 {
  font-size: 0.97rem;
  font-weight: 900;
  color: #fff;
  margin: -3rem 0 0 0.7rem; /* 글씨 넣을 위치 설정 */

  position: relative;
}

/* DMZ투어에만 적용되는거 */
.t-time-price {
  font-size: 15px;
  line-height: 15px;
  padding: 0 0 13px 0px;
  margin: 0 auto;
  /* background-color: #e7fee4; */
}

/* DMZ투어에만 적용되는거 */
.t-time-price.ttt2 {
  /*  클라스 붙여써야만된다. 같은 레벨 클라스 두개 동시 선택시에.. */
  font-size: 15px;
  line-height: 15px;
  padding: 0 0 13px 0px;
  /* background-color: #f3fdce; */
}

/* DMZ투어에만 적용되는거 */
.t-time-price span {
  font-size: 15px;
  font-weight: bold;
  color: #5ab;
}

/* ---------------------------- */

.t-info {
  /* border: 1px dashed; */
  padding: 0 1rem;
  position: relative; /* 가격 오버레이를 여기 마춰서 -2로 세팅한거다*/
}

.t-info1 {
  /* DMZ투어 적용되는거 */
  padding: 0 1rem;
}

.t-title {
  font-size: 16px;
  font-weight: bold;

  transform: scale(1, 0.8);
  letter-spacing: -1px;
  padding: 35px 0 20px 0;
  text-align: center;
}


.t-price----------222222222222222 {
  padding: 10px 20px;

  display: flex;
  align-items: baseline;

  position: absolute;
  top: -22px;
  right: 0.5rem; /*오버레이 위치*/
  border: 5px solid #fff;
  background-color: #71b2b8; /* 배경색 자체를 반투명으로 했다*/
  border-radius: 15px; /* 이거 % 로 하면 타원형나온다 */

  font-size: 15px;
  font-weight: 700;
  color: #fff;
}


.t-price {
  padding: 10px 20px;

  display: flex;
  align-items: baseline;

  position: absolute;
  top: -32px;
  right: 0.5rem; /*오버레이 위치*/
  /* border: 5px solid #fff; */
  background-color: #3a8d96b2; /* 배경색 자체를 반투명으로 했다*/
  border-radius: 18px;

  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.t-price h3 {
  font-size: 0.7rem;
  font-weight: 900;
  margin-right: 0.3rem;
}

/*  === 최소인원, 가격, 시간, 코스 === */

.t-detail {
  display: flex;
  width: 97%;
  flex-flow: row nowrap;
  margin: 0 auto;
  /* background-color: #cac2b5; */
}


.t-minimum,
.t-time,
.t-condition {
  display: block;
  width: 120px;
  font-size: 15px;
  color: #3d96a9;
  line-height: 15px;
  /* border: 1px solid #fff; */
  padding: 0 0 0px 0px;

  /* background-color: #e7fee4; */
}

.t-info h3,
.t-info1 h3 {
  /* DMZ투어 적용되는거 */
  font-size: 0.7rem;
  font-weight: 900;
}

/* DMZ투어 적용되는거 */
.t-info1 h5 {
  /* 오전 오후 */
  font-weight: 700;
}

/* DMZ투어 적용되는거 */
.t-available {
  font-size: 0.8rem;

  color: #5ab;

  padding: 1rem 0 1.5rem 0;
  text-align: center;
}

.t-condition ul {
  padding-left: 0.2rem; /* 리스트앞의 여백 조절. 꼭 ul 에서 해야한다.*/
}

.t-condition li {
  list-style: none; /* 리스트 앞의 쩜을 지운다. */
  /* list-style-position: inside; /* 리스트 박스 안쪽에 쩜찍는다 */
}

.t-condition li:before {
  display: inline-block; /* 다음에 오는 글씨와 한줄로  */

  content: ""; /* 내용없고  */
  background-color: #30a5d0; /* 배경색 넣고  */
  width: 0.2rem;
  height: 0.2rem; /* 크기 설정  */
  border-radius: 50%; /* 원형으로  */

  position: relative; /* 이거써야 아래 top 과 left로  위치 조절가능해진다 */
  top: -0.2rem;
  left: -0.2rem;
}

/*리스트에 원하는 그림 넣을때 */
/*.t-condition li:before{  
    content: "";
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fb-heart.gif);
    background-size: contain;
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    position: relative;
    top: -0.2rem;
    margin-right: 0.2rem;
}*/

/*  ===  투 어 코 스  === */

.caution {
  /* 코스 맨 위 느낌표. 호텔픽업없다는 */
  margin-left: -0.5rem;
  font-style: italic;
  color: #1d7fa3;
  font-weight: 900;
  padding-left: 0.5rem;
}

.t-course {
  /* border-left:1px dashed; */
  height: fit-content;
  position: relative; /* 밑의 ul:before 에서 그려진 점선을 여기위치에 표시하도록 */
  font-size: 15px;
  margin: 0 auto;
  /* background-color: #e1e4fd; */
}

.t-course ul {
  padding-top: 0.3rem; /* course 글자와 간격 조금 준것.. */
  padding-left: 1.2rem; /* 리스트앞의 여백 조절. 꼭 ul 에서 해야한다.*/
}

.t-course ul:before {
  /* 점들 사이에 선 만들기 */
  border-left: 1px dashed #98b8cf; /* ul 박스의 왼쪽 점선 */
  content: "";
  position: absolute; /* 위의 t-course 의 relative에 붙인다. */
  top: 1.5rem;
  left: 0.6rem; /* ul 박스왼쪽 점선의 시작위치 */
  width: 1px;
  height: calc(100% - 2.7rem); /* 전체 박스 높이에서 빼준 길이 */
}

.t-course li {
  list-style: none; /* 리스트 앞의 쩜을 지운다. */
  padding-bottom: 0.5rem;
}

.t-course li:before {
  /* 점 만들기 */
  content: ""; /* 내용없고  */
  background-color: #30a5d0; /* 배경색 넣고  */
  display: inline-block; /* 다음에 오는 글씨와 한줄로  */
  width: 0.3rem;
  height: 0.3rem; /* 크기 설정  */
  border-radius: 50%; /* 원형으로  */
  position: relative; /* 이거 있어야 아래 top, left 로 위치 조정가능 */
  top: -0.1rem;
  left: -0.72rem;
}

.t-except {
  display: block;
  color: #5ad;
  font-size: 0.7rem;
  font-style: italic;
}

.t-shopping {
  text-align: center;
  padding: 0;
}

.no-shopping {
  display: inline-block; /* 뒤따라오는것을 한줄에 붙여쓴다 */
  /* inline-block 을 썼어도,  */
  /* i 에 이미지 넣고, span 으로 글써야 한줄로연결된다 */
  /* i 에 이미지 넣고,   P  로 글쓰면 다음 줄로 넘어간다 */

  vertical-align: middle; /* 뒤따라오는것과 수직 정령. 거의 필수. */
  margin-right: 0.1rem;
}

.no-shop {
  font-size: 0.8rem;
  color: #d25;
}

.reservation-btn {
  padding: 1rem 0 1.5rem 0;
  width: 100%;
  text-align: center;
}

.reservation-btn a {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  color: #30a5d0;
  border-radius: 5rem;
  border: 2px solid #30a5d0;
  padding: 0.3rem 1.2rem;
  transition: 0.3s;
}

.reservation-btn a:before {
  display: inline-block;
  content: "";
  background-image: url("../img/calendar.png");
  background-repeat: no-repeat;
  background-size: 41px auto;
  background-position: 0 50%;
  width: 18px;
  height: 21px;
  vertical-align: middle;
  margin-right: 0.5rem;
  position: relative;
  top: -2px;
  transition: 0.3s;
}

.reservation-btn a:hover {
  background-color: #30a5d0;
  color: #fff;
}

.reservation-btn a:hover:before {
  background-position: -23px 50%;
}

/* ///////////////////////////////////////// */
/* =============  안 내  사 항  ============= */

.information {
  max-width: 65rem;

  padding: 3rem 0 0 0;

  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.info1 {
  max-width: 23rem;
  padding: 1rem 1.5rem;

  display: inline-flex; /* info1과  info2가  inline으로 반응한다 */
  flex-flow: column nowrap;

  text-align: center;
}

.info1 p {
  font-size: 1rem;
  font-weight: 700;
}

.icon-time {
  display: inline-block;
  background-image: url("../img/time.png");

  width: 43px;
  height: 42px;
  background-size: 100%; /* 지정된 박스 넓이에 그림을 꽉채운다 */

  margin: 0rem 0 0.3rem 0;
}

.icon-mail {
  display: inline-block;
  background-image: url("../img/mail.png");

  width: 43px;
  height: 38px;
  background-size: 100%; /* 지정된 박스 넓이에 그림을 꽉채운다 */

  margin: 2rem 0 0.3rem 0;
}

.info2 {
  max-width: 35rem;
  padding: 0 0 2rem 1.5rem;

  display: inline-flex; /* info1과  info2가  inline으로 반응한다 */
  flex-flow: column nowrap;
}

.info2 p {
  font-weight: 900;
  color: #555;
  padding: 1rem 0 0.2rem 0;
}

.info2 li {
  font-size: 0.9rem;
  margin-left: -1rem;
  margin-top: 0.5rem;
  /* list-style-type: none;
    text-indent: -2.5rem;
    counter-increment: item; */
}

.info2 li:before {
  display: inline-block;
  width: 1rem;
  padding-right: 0.5rem;
  font-weight: 700;
  text-align: right;
  /*  content: counter(item) ".";  */
}


/* ///////////////////////////////////////// */
/* =============  F O O T E R  ============= */

footer {
  color: #516573;
  padding: 2rem 0rem;

  display: flex;
  /* flex-flow: row wrap; */
  justify-content: space-around; /* 전화번호와 카피라잇 사이 벌려놓기*/
}

.footer-main {
  width: 20rem;
  margin-bottom: 1rem; /* 화면 작을때 copyright와의 간격 넣었다 */
}

.footer-title {
  /* BOOK ONLINE or CALL 부분 */
  color: #ffffff;
  font-weight: 900;

  background-color: #777;
  padding: 0.5em 0 0.5rem 1rem;
  margin: 0 0 1rem 0;
}

.copyright {
  font-size: 0.8rem;
  font-weight: 700;
}

/* /////////////////////////////////////////////// */

/* ////////////  예 약 페 이 지  시작 /////////////// */

.page-title2 {
  font-size: 35px;
  font-weight: 700;
  text-align: center;
  transform: scale(1, 0.7);
  letter-spacing: -0.2rem;
  line-height: 1;
  padding: 0 0 0 0;
}

.res-cautions {
  border: 1px solid;
  width: 80%;
  font-size: 14px;
  line-height: 1.5rem;
  color: #336ebb;
  padding: 1rem 0rem 2rem 1.5rem;
  margin: 0 auto;
  border: 1px solid #ffe739;
  background-color: #fffdf0;
}

.res-cautions ul {
  padding-left: 1.1rem;
}
/* 리스트앞의 여백 조절. 꼭 ul 에서 해야한다.*/

.r-form {
  /* form 전체 테두리 */
  margin: 0.6rem 0.6rem 3rem 0.6rem;
  box-shadow: 2px 2px 10px #ccc;
  padding: 1rem 2rem 0 2rem; /* SEND 밑에 여백은 0 이다.*/

  font-size: 0.8rem; /* input 밖의 글자들 */
  color: #39688f;
  line-height: 1.5;

  height: fit-content;
}

.r-form.form1 {
  /* 첫번째 예약폼 넓이. 화면에따라 변하게했다 */
  max-width: 22rem;
  /* width: 800px; */
}

.r-form.form2 {
  /* 두번째 예약폼 넓이 화면에따라 변하게했다 */
  max-width: 35rem;
  /* max-width: 800px; */
}

.r-form h2 {
  font-size: 2rem;
  font-weight: 900;
}
.r-form .text-right {
  text-align: right;
}

.r-form .text-right .star {
  color: #ce2222;
  font-size: 1.1rem;
  font-weight: 700;
  position: relative;
  bottom: -6px;
  left: -5px;
}

/* input 을 태그로 선택했다.  주의~!! */
.r-form input[type="submit"]:hover {
  /* SEND 위에 마우스 올리면.. */
  background-color: #d4edff;
}

/*  SEND 버튼 꾸미기 */
/* input 을 태그로 선택했다.  주의~!! */
.r-form input[type="submit"] {
  /* SEND 모양과  메일 아이콘 넣기*/
  margin: 0 0 0 -2rem; /* 기본 박스위치를 왼쪽으로 옮겼다 */
  width: calc(100% + 4rem); /* 깅이가 짧아서 늘렸다 */

  border: 0; /* 테두리 먼저 없앤후에, */
  border-top: 1px solid #1a648a33; /* 새로 한줄 추가한다 */

  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.8rem;

  background-color: #ecfaff;
  transition: 0.2s; /* hover 하면 바뀌는 시간 */
  cursor: pointer;

  /* 배경으로  메일 아이콘 넣기 */
  background-image: url("../img/mail.png");
  background-repeat: no-repeat;
  background-position: calc(50% - 3rem) 48%;
  background-size: 1.7rem; /* 배경으로 깔린 메일 아이콘 크기 */
}

/* input, textarea 의 실제 글쓰여지는 부분은 태그로 선택해야된다 */
.r-form input,
textarea {
  border: 1px solid #b3ecec;

  display: block;
  width: 93%;
  padding: 2rem;
  margin: 2;
  padding: 0.7rem; /*  박스 내부 글씨의 패딩 */
  margin: 0.2rem; /*  박스 외부 간격 */
}

.r-form textarea {
  min-height: 9.5rem;
  line-height: 1.5;
}

.r-form input::placeholder,
textarea::placeholder {
  color: #6fabc1;
}

/* input 박스를 클릭 했을떄 나오는 테두리 색상 변경하기 */
.r-form input:focus {
  border: 1px solid #91c7c7;
}

/* input 박스를 클릭 했을떄 나오는 테두리 색상 변경하기 */
.r-form input:focus {
  outline: none;
}

/*== 여기까지는  태그로 선택한거다 ==*/

.input-unit {
  position: relative; /* 이거해줘야 after가 여기 올수있다. */
  left: -3px; /* 오니쪽으로 3px 움직였다. */
}

.input-unit.mt-10 {
  margin-top: 0.5rem;
}

/*   입력칸 뒤에 빨간 별 보이는거 */
/* 
.input-unit.required:after {
    content:'*'; 
    position:absolute;
    top:1rem; right:1.5rem;
    color: #ce2222;
    font-size: 1.1rem;
    font-weight:700;
} 
*/


.input-unit.date-wrap input {
  padding-left: 7rem; /* Tour Date 글씨가 들어갈 부분을 만들었다 */
  width: 18rem;
}

.input-unit.date-wrap span {
  /* Tour Date 글씨를 써준다 */
  left: 1rem; /* TourDate 글씨 앞으로 보내기 */
  right: auto; /* 이거 없으면 날짜에 클릭 안된다. 클락위치가 뒤로 밀린다.*/
}

/* input에 relative 해주고, 그 안에 absolute로 원하는 그림넣고 싶을때.*/
/*.그림 {
    position: absolute;
    right: 1rem; top: 0.5rem;
} */

/* ------------------------------------*/
/* 기본 달력 안보이게하고, 내가 원하는거 보이게 */
/* 이 부분 지우면, 기본 달력 모양 나온다       */
[type="date"] {
  background: #fff
    url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)
    97% 50% no-repeat;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}
/* ------------------------------------*/

.input-unit span {
  /* Persons 글씨를 써준다 */
  position: absolute;
  top: 0.7rem;
  right: 2rem;
  color: #6fabc1;
}

.checking-number {
  background-image: url("../img/checking.png");
  background-size: auto 100%;
  height: 42px;
  width: 117px;

  display: inline-block;
  vertical-align: middle; /* 뒤따라오는것과 수직 정령. 거의 필수. */
}

.checking {
  display: inline-block;
  width: calc(100% - 129px); /* 그림 넓이 + 약간... */
  margin-bottom: 1rem;
}

/* ////////////  예 약 페 이 지  끝 /////////////// */

/* /////////////////////////////////////////////// */

.thankyou {
  max-width: 70rem;

  background-color: #9cd1f13f;
  padding: 3rem;
  margin: 2.3rem;

  text-align: center;
}

.thankyou h1 {
  font-size: 2.5rem;
  font-weight: 900;
}

.thankyou .content {
  max-width: 30rem;
}

.thankyou .content h2 {
  font-size: 1.2rem;
  font-weight: 700;
  padding: 1rem;
}

.thankyou .content p {
  font-size: 0.8rem;
  font-weight: 400;
  padding: 0.5rem;
}

/* /////////////////////////////////////////////// */

/* /////////////////////////////////////////////// */

@media (min-width: 300px) and (max-width: 430px) {
  header .container {
    display: flex;
    flex-direction: row; /* 로고,메뉴,햄버거를 옆으로 나란히 */
    flex-wrap: wrap; /* 이거해야 메뉴부분이 밑줄으로 넘어간다 */
    justify-content: space-between; /* 로고를 왼쪽에 붙인다. */

    padding: 0.3rem; /* 화면이 작으니, 헤더 높이를 작게 */

    border-bottom: 1px solid #ddd;
    background-color: #fff;
    z-index: 10; /* 다음에 z인덱스를 10보다 작은 값으로 해주면, 그것들은 모두 메뉴바 밑에 나온다. */
  }

  .sticky header .mobile-nav {
    display: block;
  }

  /* ==================  */
  .logo {
    max-width: 7rem;
    padding-left: 0.5rem;
  }
  .slogan {
    display: none;
  } /* 작은화면에서는 슬로건 안보이게.. */
  /* ==================  */

  .nav-bar {
    display: none; /* 화면에 안나오도록*/
    padding-left: 0rem; /* 리스트앞의 기본 여백 지웠다 */
    flex-direction: row; /* 옆으로 메뉴 */

    width: 100%; /* 메뉴의 전체박스 넓이 설정 */
    /*  이 박스크기를 정해줘야 개별 칸칸 넓이도 조절가능하다 */
  }

  .nav-bar2 {
    padding: 0.5rem;
    display: flex;
  }

  .nav-bar.active {
    /* nav-bar 이면서 active 인거를 찾는거니까 붙여쓴다  */
    display: flex; /* none으로 안나오게한걸 flex로 해준다 */
    justify-content: space-around;
  }

  .nav-bar li,
  .nav-bar2 li {
    margin-top: 0rem; /* 위아래 메뉴 칸칸 간격 */
    padding: 0rem 0.5rem; /* 이거도 칸 높이 조절도 가능 */

    /* text-align: center;  /* 메뉴글씨가 두줄로 변헀을때 가운데 정렬*/
    /* width: fit-content;  /* 옆으로 메뉴일때, 메뉴가 두줄로 바뀌는거 동시에 되도록.. */
    /* width: 100%;   /* 위아래 메뉴의  한칸 한칸 넓이 설정  */
  }

  .nav-toggleBtn.show {
    /* 스크롤이 발생해야 .show 가 붙고, 그래야 화면에 나오로도록 */
    display: flex; /* 다시 나오게 하는데, 그거를 flex로 나오게 */
    flex-direction: column; /* 험배거가 3 줄로 나오도록.. 위아래로..*/
    top: 0.38rem;
    right: 1.2rem;
  }

  .bar1,
  .bar2,
  .bar3 {
    display: block;
  }

  /* ======================== */

  .m11 {
    padding: 0 1rem;
  }
  .m12 {
    padding-top: 3rem;
  }
  .m12 ul {
    padding: 0rem 1rem; /* 리스트 기본 점 있을때 위치에서 좌우 조절 */
  }

  .main2 {
    padding: 17rem 0 0 0;
    background-position: calc(50% + 3rem) -15rem;
    background-size: auto 720px; /* 넓이 높이 */
  }

  .m21,
  .m23 {
    padding: 1rem;
  }

  .m22 {
    padding: 0.5rem;
  }

  .m31 {
    flex-flow: column wrap;
    justify-content: space-around;
  }

  .m311 {
    width: 100%;
    font-weight: 700;
    text-align: left;
    padding-bottom: 1rem; /* 위아래 배치될때, 각 문장 사이 간격 */
  }

  /* ======================== */

  section .container {
    padding: 1rem 0rem;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
  }

  .content {
    display: block;
  }

  /* ======================== */

  .container .t-lists {
    /* 개별 투어들을 감싸는 박스  */
    margin-top: 1rem; /* 필터 메뉴와 간격 늘린거 */
    padding: 0.2rem;
    /*box-shadow: 3px 3px 10px #ccc; */
    width: 22rem;
    margin: 0 auto;
    display: block;
  }

  /* ======================== */

  .container .tour {
    /* 각각의 개별 투어 박스  */
    width: 95%;
    max-width: 22rem;
    margin: 0rem 0.6rem 2rem 0.6rem; /* 개별투어 박스들 사이의 간격 */
  }

  /* DMZ투어 적용되는거 */
  .tour1 {
    width: 95%;
    max-width: 22rem;
    margin: 0px auto 30px auto;
  }

  .t-image {
    /* 이미지크기가 아니다. 이미지를 배경으로 넣을 박스의 크기다. */
    height: 12rem;
    width: 100%;
  }

  .t-name {
    padding: 6rem 0 0 0.7rem; /* 글씨 넣을 위치 설정 */
  }

  /* DMZ투어 적용되는거 */
  .tour1 .t-name {
    padding: 9rem 0 0 0.7rem; /* 글씨 넣을 위치 설정 */
  }

  /* DMZ투어 적용되는거 */
  .tour1 .t-name2 {
    margin: -3rem 0 0 0.7rem; /* 글씨 넣을 위치 설정 */
  }

  .t-title {
    font-size: 0.75rem;
  }

  /* ======================== */

  .t-time-price {
    font-size: 15px;
    line-height: 15px;
    padding: 0 0 13px 0px;
    margin: 0 auto;
    /* background-color: #e7fee4; */
  }

  /* DMZ투어에만 적용되는거 */
  .t-time-price.ttt2 {
    /*  클라스 붙여써야만된다. 같은 레벨 클라스 두개 동시 선택시에.. */
    font-size: 15px;
    line-height: 15px;
    padding: 0 0 13px 0px;
    /* background-color: #f3fdce; */
  }

  /* DMZ투어에만 적용되는거 */
  .t-time-price span {
    font-size: 15px;
    font-weight: bold;
    color: #5ab;
  }

  /* ======================== */

  .t-course {
    width: 90%;
    height: fit-content;
    position: relative; /* 밑의 ul:before 에서 그려진 점선을 여기위치에 표시하도록 */
    font-size: 14px;
    margin: 0 auto;
    /* background-color: #e1e4fd; */
  }

  /* DMZ투어 적용되는거 */
  .tour1 .t-course {
    width: 280px;
    /* background-color: #e1e4fd; */
  }
  /* ======================== */

  .information {
    display: block;
  }

  .info1 {
    display: block;
    padding: 1rem 1rem;
    text-align: center;
  }

  .info2 {
    display: block;
    padding: 2rem 1rem;
  }

  /* ======================== */

  footer {
    padding: 2rem 1rem;
    display: block;
  }

  .footer-main {
    width: 80%;
  }

  /* ======================== */

  .page-title2 {
    /* 예약페이지 타이틀만 크기 줄였다 */
    font-size: 1.75rem;
  }
}

/* /////////////////////////////////////////////// */
/* 









 */
/* /////////////////////////////////////////////// */

@media (min-width: 431px) and (max-width: 666px) {
  header .container {
    display: flex;
    flex-direction: row; /* 로고,메뉴,햄버거를 옆으로 나란히 */
    flex-wrap: wrap; /* 이거해야 메뉴부분이 밑줄으로 넘어간다 */
    justify-content: space-between; /* 로고를 왼쪽에 붙인다. */

    padding: 0.38rem; /* 화면이 작으니, 헤더 높이를 작게 */

    border-bottom: 1px solid #ddd;
    background-color: #fff;
    z-index: 10; /* 다음에 z인덱스를 10보다 작은 값으로 해주면, 그것들은 모두 메뉴바 밑에 나온다. */
  }

  /* ==================  */
  .logo {
    max-width: 6rem;
    padding-left: 1rem;
  } /* 이 박스의 크기를 지정했다 */
  .slogan {
    display: none;
  } /* 작은화면에서는 슬로건 안보이게.. */
  /* ==================  */

  .nav-bar {
    display: none; /* 화면에 안나오도록*/
    padding-left: 0rem; /* 리스트앞의 기본 여백 지웠다 */
    flex-direction: row; /* 옆으로 메뉴 */

    width: 100%; /* 메뉴의 전체박스 넓이 설정 */
    /*  이 박스크기를 정해줘야 개별 칸칸 넓이도 조절가능하다 */
  }

  .nav-bar2 {
    padding: 1rem;
    display: flex;
  }

  .nav-bar.active {
    /* nav-bar 이면서 active 인거를 찾는거니까 붙여쓴다  */
    display: flex; /* none으로 안나오게한걸 flex로 해준다 */
    justify-content: space-around;
  }

  .nav-bar li,
  .nav-bar2 li {
    margin-top: 0rem; /* 위아래 메뉴 칸칸 간격 */
    padding: 0.5rem 0.5rem; /* 이거도 칸 높이 조절도 가능 */

    text-align: center; /* 메뉴글씨가 두줄로 변헀을때 가운데 정렬*/
    width: min-content; /* 옆으로 메뉴일때, 메뉴가 두줄로 바뀌는거 동시에 되도록.. */
    /* width: 100%;   /* 위아래 메뉴의  한칸 한칸 넓이 설정  */
  }

  .nav-toggleBtn.show {
    /* 스크롤이 발생해야 .show 가 붙고, 그래야 화면에 나오로도록 */
    display: flex; /* 다시 나오게 하는데, 그거를 flex로 나오게 */
    flex-direction: column; /* 험배거가 3 줄로 나오도록.. 위아래로..*/
    top: 0.38rem;
    right: 1.2rem;
  }

  .bar1,
  .bar2,
  .bar3 {
    display: block;
  }

  /* ======================== */

  .m31 {
    flex-flow: column wrap;
    justify-content: space-around;
  }

  .m311 {
    width: 100%;
    font-weight: 700;
    text-align: left;
    padding-bottom: 1rem; /* 위아래 배치될때, 각 문장 사이 간격 */
  }

  /* ======================== */

  .t-lists {
    /* 개별 투어들을 감싸는 박스  */
    width: 100%;
  }

  .tour {
    /* 각각의 개별 투어 박스  */
    width: 80%; /* 으아.. 이거 없으면 도저히 내용이 안커지는 이유가 뭐냐  */
    max-width: 35rem; /* 으아.. 이거 없으면 도저히 내용이 안커지는 이유가 뭐냐  */

    margin: 1.6rem 0.6rem 2rem 0.6rem;
  }

  /* DMZ투어 적용되는거 */
  .tour1 {
    width: 80%;
    max-width: 35rem;
    margin: 0px auto 30px auto;
  }

  /* DMZ투어 적용되는거 */
  .tour1 .t-detail {
    width: 320px;
    margin: 0 auto;
    /* background-color: #e1e4fd; */
  }

  /* DMZ투어 적용되는거 */
  .tour1 .t-course {
    width: 320px;
    /* background-color: #e1e4fd; */
  }

  .t-image {
    /* 이미지크기가 아니다. 이미지를 배경으로 넣을 박스의 크기다. */
    height: 17rem;
    width: 100%;
  }

  /* ======================== */

  /* DMZ투어에만 적용되는거 */
  .t-time-price {
    width: 8rem;
    font-size: 0.9rem;
    line-height: 0.8rem;
    padding: 0 0 1rem 0.7rem;
  }

  .t-time-price.ttt2 {
    /*  클라스 붙여써야만된다. 같은 레벨 클라스 두개 동시 선택시에.. */
    width: 15rem;
    font-size: 0.9rem;
    line-height: 0.8rem;
    padding: 0 0 1rem 0.7rem;
  }

  /* ======================== */

  .t-course {
    width: 90%;
    height: fit-content;
    position: relative; /* 밑의 ul:before 에서 그려진 점선을 여기위치에 표시하도록 */
    font-size: 15px;
    margin: 0 auto;
    /* background-color: #e1e4fd; */
  }

  /* ======================== */
}

/* /////////////////////////////////////////////// */
/* 









 */
/* /////////////////////////////////////////////// */

@media screen and (min-width: 667px) and (max-width: 1149px) {
  header .container {
    padding: 1rem 2rem 0.5rem 2rem;
    margin-bottom: 0rem;
  }

  /* ==================  */
  .logo {
    max-width: 11rem;
  }
  .slogan {
    font-size: 0.75rem;
  }
  /* ==================  */

  .tour1 {
    /* DMZ투어  개별 투어 박스  */
    max-width: 43rem;
    margin: 0px auto 30px auto;
  }

  .tour1 .t-image {
    /* DMZ투어 개별 투어 이미지 */
    height: 20rem;
    width: 42rem;
  }

  .tour1 .t-name {
    padding: 17rem 0 0 0.7rem; /* 글씨 넣을 위치 설정 */
  }

  .tour1 .t-info1 {
    padding: 0 1rem;
    display: flex;
    flex-flow: row nowrap;
    /* 화면 커지면, course가  가격표 옆으로 온다. */
  }

  /* DMZ투어 적용되는거 */
  .tour1 .t-detail {
    width: 330px;
    margin: 0 auto;
    /* background-color: #e1e4fd; */
  }

  /* DMZ투어 적용되는거 */
  .tour1 .t-course {
    width: 300px;
    /* background-color: #e1e4fd; */
  }

  .copyright {
    padding-top: 30px;
  }

  .page-title2 {
    width: 100%;
  }

  .m12 {
    /* border: 1px solid; */
    width: 100%;
    max-width: 42rem;
    margin: 1rem 0rem;
    color: #3b658a;
  }
}

/* /////////////////////////////////////////////// */
/* 









 */
/* /////////////////////////////////////////////// */

@media screen and (min-width: 1150px) {
  .sticky {
    position: static;
    /* 넓은 화면에서는 메뉴 고정 안한다. 그냥 위로 올라가도록.. */
  }

  .tour1 {
    /* DMZ투어  개별 투어 박스  */
    max-width: 68rem;
    display: flex;
    flex-flow: row nowrap;
    /* 화면 제일 커지면, 사진 옆으로 info1 을 올린다 */
    margin: 0px auto 30px auto;
  }

  .tour1 .t-image {
    height: 23rem;
  }

  .tour1 .t-name {
    padding: 20rem 0 0 0.7rem; /* 글씨 넣을 위치 설정 */
  }

  .tour1 .t-info1 {
    width: 37rem;
    padding: 0 1rem;
    display: flex; /* 코스 부분이 옆으로 와야된다 */
    flex-flow: row nowrap;
  }

  /* DMZ투어 적용되는거 */
  .tour1 .t-detail {
    width: 300px;
    margin: 0 auto;
    /* background-color: #e1e4fd; */
  }

  /* DMZ투어 적용되는거 */
  .tour1 .t-course {
    width: 300px;
    /* background-color: #e1e4fd; */
  }

  /* DMZ투어에만 적용되는거 */
  .t-time-price {
    width: 9rem;
    font-size: 0.9rem;
    line-height: 0.8rem;
    padding: 0 0 1rem 0.7rem;
  }

  .t-time-price.ttt2 {
    /*  클라스 붙여써야만된다. 같은 레벨 클라스 두개 동시 선택시에.. */
    width: 12rem;
    font-size: 0.9rem;
    line-height: 0.8rem;
    padding: 0 0 1rem 0.7rem;
    /* background-color: #b4daeb; */
  }

  /* DMZ투어에만 적용되는거 */
  .t-time-price span,
  .t-time-price2 span {
    font-size: 0.9rem;
    line-height: 0.9rem;
    font-weight: 900;
    color: #5ab;
  }

  /* 만약 예약 버튼 위치 변경하려면 이렇게.. */
  /*
.reservation-btn {
    border: 1px solid;
    position: relative;
    top: 0rem;
    left: -5rem;

    padding: 1rem 0 1.5rem 0;
    width: 100%;
    text-align:center;
}
*/

  .page-title2 {
    width: 100%;
  }

  .m11 {
    /* border: 1px dashed; */
    max-width: 25rem;
    padding: 1rem;
    text-align: center;
    font-weight: 700;
  }

  .m12 {
    width: 100%;
    max-width: 33rem;
    padding: 1rem 1rem;
    color: #3b658a;
  }

  .main2 {
    padding: 3rem 1rem 2rem 1rem;
    justify-content: left;
    background-position: calc(50% + 20rem) 3rem;
    background-size: auto 780px; /* 넓이 높이 */
  }

  .m21 {
    width: 52%;
  }

  .m22 {
    width: 50%;
  }
}

/* /////////////////////////////////////////////// */