/* 모든 스타일은 css 충돌방지를 위해 .history을 기준으로 작성 하시면 됩니다. 예) .history .box {} */
.history{}
/* 공통 */
#ctt {display: none;}
.clearboth::before, .clearboth::after {display: block; content:""; clear: both;}

/* 한선추가 */

.mb0{margin-bottom:0;padding-bottom:0 !important;}
/* 페이지타이틀 */
.pageTitle {width: 100%; height: 410px; background: url(../greeting/images/pagetitleBack.jpg) no-repeat; background-size: cover; background-position: center center; position: relative;}
.pageTitle_textWrap {width: 1300px; margin: 0 auto;}
.pageTitle .pageTitle_text {width: 100%; position: absolute; top: 55%; transform: translateY(-50%);}
.pageTitle .pageTitle_text h1 {font-size: 45px; color: #fff; letter-spacing: -3px !important; font-weight: 500;}
.pageTitle .pageTitle_text p {font-size:18px; color: #fff; font-weight: 400; letter-spacing: -1px; margin-top: 20px;}


/* 페이지탭 */
.pageTabWrap {width: 100%; height:55px; margin-top: -55px; position: relative; z-index: 1;}
.pageTabWrap .pageTab {width: 1300px; height: 100%; margin: 0 auto; position: absolute; z-index: 1; background: #dc1d1d; left: 50%; transform: translateX(-50%);}
.pageTabWrap .pageTab >li {float:left; width: 20%; }
.pageTabWrap .pageTab >li:first-child {width: 5%;}
.pageTabWrap .pageTab >li:last-child {width: 55%;}
.pageTabWrap .pageTab >li >a {width: 100%; display: block; text-align: center;line-height: 55px; color: #fff; font-size: 16px;font-weight: 500; text-align: left;border-left: 1px solid #e83434; padding-left: 30px;}
.pageTabWrap .pageTab >li:first-child >a {text-align: center; border: none; padding: 0;}
.pageTabWrap .pageTab >li >a:hover  {background: #d20010;}
.pageTab_submenu {width: 100% !important; padding: 15px 0; background: #f9f9f9; border: 1px solid #efefef; display: none;}
.active1 {background: #d20010;}
.active2 {display: block;}
.pageTab_submenu >li {width: 100%;}
.pageTab_submenu >li> a {display: block; width: 100%; font-size: 15px; padding: 10px 30px; background: #f9f9f9; box-sizing: border-box;}
.pageTab_submenu >li> a:hover {color: #d20010;}
.pageTab_arrow {padding-right:20px; float: right;}
.pageTab_arrow img {width: 14px;}


/* 페이지내용 */
.tBold4 {font-weight: 400 !important;}
.tBold5 {font-weight: 500 !important;}
.tBold6 {font-weight: 600 !important;}
.cRed {color: #dc1d1d;}
.cBlack {color: #333;}
.let-2{letter-spacing: -2px !important;}

.pageContentWrap {width: 100%; padding: 80px 0;}
.pageContent {width: 1300px; margin: 0 auto;}
.pageContent_title {padding-bottom: 120px;}
.pageContent_title h1 {position: relative; text-align: center; font-size: 35px; font-weight: 400;}
.pageContent_title h1::before {position: absolute; display: block; content:"";
  width: 2px; height: 38px; background-color: #e60012; transform: rotate(-45deg);
  top: 49px; left: 50%;}

/* index */
.pageContent_index {width: 100%; padding-bottom: 60px; }
.pageContent_index h2 {font-size: 35px; font-weight: 500; letter-spacing: -3px !important; line-height: 47px; padding-bottom: 40px; color: #c3c3c3;}
.pageContent_index p {font-size: 18px; line-height: 35px; font-weight: 400; letter-spacing: -1px !important;}

.pageContent_dummy2 {width: 50%; float: left;}
.dummy2_left {padding-right: 80px; box-sizing: border-box;}
.dummy2_right {height: 400px; overflow: hidden;}
.dummy2_right  >img {object-fit:cover; width: 100%; height: 100%;}


/* index2 */
.pageContent_index2 {position: relative; padding-top: 60px; padding-bottom: 60px;  border-top: 1px solid #c3c3c3;}
.pageContent_index2 > div {width: 30%; float: left;}
.pageContent_index2 > div > img {width: 320px;}
.pageContent_index2 > table {width: 70%; float: left; color: #222;}
.pageContent_index2 table td {font-size: 17px; letter-spacing: -1px !important; font-weight: 400; padding: 14px 0; color: #616161;}
.pageContent_index2 table tr > td:first-child {font-weight: 600 !important; padding-right: 60px; color: #222;}







/* index3 - 연혁 */
.pageContent_index3 {width: 100%; position: relative;}
.swiper {width: 100%; height: 100%; background: #000; position: relative;}
.parallax-bg {background-image: url(../history/images/history_back1.jpg);}
.swiper-slide {font-size: 18px;  color: #fff; -webkit-box-sizing: border-box;
  box-sizing: border-box;padding: 80px 80px;}
.parallax-bg {position: absolute; left: 0;  top: 0;  width: 130%; height: 100%;
  -webkit-background-size: cover; background-size: cover;  background-position: center;}
.swiper-slide .title {width: 45%; float: left; font-size: 86px; font-weight: 600; position: relative; line-height: 85px; color: #d40011;}
.swiper-slide .title::before {
  position: absolute;display: block;content: ""; width: 2px; height: 65px; background-color: #e60012; transform: rotate(-45deg);top: 86px;left: 46px;}
.swiper-slide .text:last-child {border-bottom: none; margin-bottom: 0;}
.swiper-slide .text {width: 55%; float: left; font-size: 14px; line-height: 1.3; padding: 0 0 30px; margin-bottom: 50px; border-bottom: 1px solid #d1d1d1;}
.swiper-slide .text ul {width: 100%;}
.swiper-slide .text ul li {width: 100%;overflow:hidden;}
.swiper-slide .text ul li .month-index {width: 80%; float: left; font-size: 16px; line-height: 28px; padding-bottom: 20px; color: #8a8a8a; font-weight: 400;}
.swiper-slide .text ul li .month {width: 20%; float: left; font-weight: 700;
  font-size: 18px; box-sizing: border-box; line-height: 30px; color: #000; }


.swiper-pagination {
  width: 100%;
  position: absolute;
  text-align: center;
  transition: .3s opacity;
  bottom: 100px;
}
.historyTest::before {display: block; content:""; position: absolute; width: 90%; height: 1px; background: #d40011;left: 50%; transform: translateX(-50%); bottom: 7px;}
.swiper-pagination-clickable .swiper-pagination-bullet {
  margin: 0 90px;
}
.historyTest span {position: relative;}
.yeari {    position: absolute;
  top: 35px;
  left: 50%;
  width: 100px;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: 600;
  color: #e8bdc0;
}





/* 연혁 길어지면 이것으로 교체 */
/* 
.pageContent_index3 {width: 100%; position: relative; height: 700px;}
.swiper {width: 100%; height: 100%; background: #000; position: relative;}
.parallax-bg {background-image: url(../history/images/history_back1.jpg);}
.swiper-slide {font-size: 18px;  color: #fff; -webkit-box-sizing: border-box;
box-sizing: border-box;padding: 40px 60px;}
.parallax-bg {position: absolute; left: 0;  top: 0;  width: 130%; height: 100%;
-webkit-background-size: cover; background-size: cover;  background-position: center;}
.swiper-slide .title {width: 45%; float: left; font-size: 86px; font-weight: 600; position: relative; line-height: 85px; color: #d40011;}
.swiper-slide .title::before {
position: absolute;display: block;content: ""; width: 3px; height: 65px; background-color: #e60012; transform: rotate(-45deg);top: 86px;left: 46px;}
.swiper-slide .text {width: 55%; float: left; font-size: 14px; line-height: 1.3; padding: 30px 0;}
.swiper-slide .text ul {width: 100%;}
.swiper-slide .text ul li {width: 100%;}
.swiper-slide .text ul li .month-index {width: 80%; float: left; font-size: 16px; line-height: 28px; padding-bottom: 20px; color: #8a8a8a; font-weight: 400;}
.swiper-slide .text ul li .month {width: 20%; float: left; font-weight: 700;
font-size: 18px; box-sizing: border-box; line-height: 30px; color: #000; }

.swiper-button-next {left: 60px !important; top: 68% !important; background: #d40011; width: 60px !important;
height: 60px !important;}
.swiper-button-prev {left: 0px !important; top: 68% !important; background: #d40011; width: 60px !important;
height: 60px !important;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 27px !important;}

.swiper-pagination {
width: 100%;
position: absolute;
text-align: center;
transition: .3s opacity;
bottom: 100px;
}
.historyTest::before {display: block; content:""; position: absolute; width: 90%; height: 1px; background: #d40011;left: 50%; transform: translateX(-50%); bottom: 7px;}
.swiper-pagination-clickable .swiper-pagination-bullet {
margin: 0 90px;
}
.swiper-pagination-bullet {
background:   #e8bdc0 !important;
z-index: 99;
opacity: 1 !important;
}
.swiper-pagination-bullet-active {background: #d40011 !important;}

.historyTest span {position: relative;}
.yeari {    position: absolute;
top: 35px;
left: 50%;
width: 100px;
transform: translate(-50%, -50%);
font-size: 14px;
font-weight: 600;
color: #e8bdc0;
}
.swiper-pagination-bullet-active p {color:  #d40011 !important;}
*/


.mb_br{display:none;}

@media screen and ( max-width:1300px){

  /* 서브탑 */
  .pageTitle_textWrap{width:100%;}
  .pageTitle{height:300px;}

  .pageTitle .pageTitle_text h1{font-size:28px;}
  .pageTitle .pageTitle_text {top: 45%;left: 10%;}


  .pageTabWrap .pageTab{width:100%;}
  .pageTabWrap .pageTab >li:first-child{width:80px;}
  .pageTabWrap .pageTab >li{width:30%;}

  .pageContent{width:90%;}
  .pageContentWrap{padding:50px 0;}
  .pageContent_title h1{font-size:28px;}


  /* 페이지 */

  .pageContent_index h2{font-size:24px;line-height:32px;}
  .pageContent_index p{font-size:16px;line-height:26px;}
  .pageContent_index2 table tr > td:first-child{white-space:nowrap;font-size:16px;padding-right:30px;}
  .pageContent_index2{padding:50px 0;}

  .swiper-slide .title{font-size:32px;width:30%;}
  .swiper-slide .text{width:70%;}
  .swiper-slide .title::before {
    height: 33px;
    top: 68px;
  }

}

@media screen and ( max-width:799px){
  .pageContent_title h1{font-size:22px;}

  .pageTitle .pageTitle_text p{font-size:16px;}
  .pageTitle .pageTitle_text h1{font-size:20px;font-weight:700;}
  .pageTabWrap .pageTab >li:first-child{display:none;}
  .pageTabWrap .pageTab >li{width:50%;}

  .mb_br{display:block;}

  /* 페이지 */

  .pageContent_dummy2{width:100%;float:none;}
  .dummy2_left{padding-right:0;margin-bottom:30px;}
  .pageContent_index h2{padding-bottom:30px;}
  .dummy2_right{height:300px;}
  .pageContent_index2 > table{width:100%;}
  .pageContent_index2 > div{position:absolute;top:30px;right:20px;}
  .pageContent_index2 table td{font-size:16px;}

  .swiper-slide .title, .swiper-slide .text{float:none;width:100%;}
  .swiper-slide .text{border-bottom:0;}
  .swiper-slide .title br{display:none}
  .swiper-slide .title::before {height: 33px;top: 36px;transform: rotate(90deg);height: 12px;left: 84px;}
  .swiper-slide .text ul li{overflow:hidden;}
  .swiper-slide .text{margin-bottom:0;}
  .swiper-slide{padding:30px 50px;}
  .swiper-slide .text ul li .month{width:150px;}
  .mbnone{display:none;}
}