/* 모든 스타일은 css 충돌방지를 위해 .value을 기준으로 작성 하시면 됩니다. 예) .value .box {} */

html {
  scroll-behavior: smooth;
}

/* 공통 */
#ctt {display: none;}
.clearboth::before, .clearboth::after {display: block; content:""; clear: both;}

/* 페이지타이틀 */
.pageTitle {width: 100%; height: 410px; background: url(../value/images/sub-6.png) 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;}


/* 페이지내용 */
.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: 34px; font-weight: 400;}
.pageContent_title h1::before {position: absolute; display: block; content:"";
  width: 2px; height: 35px; background-color: #e60012; transform: rotate(-45deg);
  top: 58px; left: 50%;}

.pageContent_index {width: 100%; position: relative; padding-bottom: 60px; }
.pageContent_index > div >div > img {width: 100%;}
.pageContent_index h2 {font-size: 35px; font-weight: 500 !important; letter-spacing: -3px !important; line-height: 56px; padding-top: 30px; color: #222;}
.pageContent_index >div>p {font-size: 18px; line-height: 36px; font-weight: 400; letter-spacing: -1px !important; margin-top: 50px; text-align: justify; padding-bottom: 40px; }

/*index1*/
.pageContent_index1 .index1_box {box-sizing: border-box; margin: 30px auto; padding: 0 200px;}
.pageContent_index1 .index1_box div {width: 300px; height: 350px; float: left; position: relative; background: url(../value/images/v_circle2.png); background-size: cover; padding-top: 43px;}
.index1_box >div img {display: block; margin: 3px auto;}
.index1_box >div>p {font-size: 23px; font-weight: 600; text-align: center; }
.index1_box >div>p:nth-of-type(2) {font-size: 16px; font-weight: 400; padding-top: 7px; }
.pageContent_index1 .index1_box div::after {position: absolute; display: block; content:""; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; width: 250px; height: 250px; color: #fff;}
.pageContent_index1 .index1_box div:nth-of-type(1) {background: url(../value/images/v_circle1.png);}
.pageContent_index1 .index1_box div:nth-of-type(2) {background: url(../value/images/v_circle.png);}


/*index2*/
.pageContent_index2 {position: relative; padding: 60px 0; margin: 0px 0 20px; }
.pageContent_index2::after {position: absolute; top: 0; left:50%; transform: translateX(-50%); display: block; content:""; width: 200%; height: 80%; background: #333; z-index: -1;}
.pageContent_index2 h2 {color: #222;}
.pageContent_index2 ul {padding: 40px 0;
  margin-top: 60px;
  padding-right: 0px;
  position: relative;}
.pageContent_index2 ul::before {position: absolute;
  display: block;
  content: "";
  background: #292929;
  border-radius: 14px;
  width: 200%;
  height: 280px;
  top: -10px;
}
.pageContent_index2 ul li {position: relative; width: 25%; float: left;
  color: #fff; font-size: 40px; padding-left: 40px; font-weight: 600; text-align: right;}
.pageContent_index2 ul li::before {position: absolute;
  display: block;
  content: "";
  width: 3px;
  height: 65px;
  background-color: #e60012;
  transform: rotate(-45deg);
  top: 0;
  right: 110px;}
.pageContent_index2 ul li p {font-size: 17px;
  line-height: 25px;
  font-weight: 300;
  letter-spacing: -1px !important;
  margin-top: 14px;
  color: #fff;;}
.pageContent_index2 ul li h1 {font-size: 20px; color: #555; padding-top: 10px;}


/*index3*/
.pageContent_index3 {margin-bottom: 40px;}
.pageContent_index3 ul {width: 100%; padding: 40px 0;}
.pageContent_index3 ul li {width: 32%; float: left; margin-right: 2%;}
.pageContent_index3 ul li:last-child {margin-right: 0;}
.pageContent_index3 ul li div {background: #e9e9e9; border-radius: 10px; width:100%; height: 150px; overflow: hidden;}
.pageContent_index3 ul li div img {width: 100%; object-fit: cover;}
.pageContent_index3 ul li h1 {width: 45%; float: left; font-size: 22px; font-weight: 600; padding: 20px 20px 10px;}
.pageContent_index3 ul li p {width: 55%;  float: left; font-size: 17px; padding: 20px 0 10px;}


/*index4*/
.pageContent_index4wrap {position: relative; margin-bottom: 92px;}
.pageContent_index4 {width: 100%;padding: 40px 0 0; overflow: hidden;}
.pageContent_index4wrap::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  content: "";
  width: 200%;
  height: 960px;
  background: #f1f1f1;
  z-index: -1;
}
.pageContent_index4 > h2 {width: 19.7%; margin-right: 0.3%; float: left; border: 1px solid #c1c1c1;
  box-sizing: border-box; color: #fff; background: #b5b5b5; height: 758px;
  border-radius: 10px 0 0 10px; text-align: center; line-height: 700px;}
.pageContent_index4 > div {width: 80%; float: left;}
.pageContent_index4 ul li {width: 35%; float: left; background: #fff; box-sizing: border-box; border: 1px solid #e4e4e4; height: 250px;
  margin-bottom: 4px; text-align: center; padding: 40px;}
.pageContent_index4 ul li:nth-of-type(1),.pageContent_index4 ul li:nth-of-type(2) {
  margin-right: 0.5%;}
.pageContent_index4 ul:nth-of-type(1) li:nth-of-type(3) {border-radius: 0 10px 0 0;}
.pageContent_index4 ul:nth-of-type(3) li:nth-of-type(3) {border-radius: 0 0 10px 0;}
.pageContent_index4 ul li.title {width: 29% !important;}
.pageContent_index4 ul li h1 {font-size: 22px; font-weight: 500; padding: 10px 0;     }
.pageContent_index4 ul li p {font-size: 17px; color: #929292;}
.pageContent_index4 ul li img {width: 60px;}
.bgRed {background: #dc1d1d !important;}
.h1Big {font-size: 28px !important;
  color: #fff;
  line-height: 36px;
  margin-top: 8px;}
.bgRed {width: inherit !important;}
.title img {width: 72px !important;}


/*index5*/
.pageContent_index5 {overflow: hidden;}
.pageContent_index5 ul {padding: 40px 0;}
.pageContent_index5 ul li {width: 20%; float: left;}
.pageContent_index5 ul li div {width: 240px; height: 240px; border-radius: 50%; position: relative;}
.pageContent_index5 ul li:nth-child(odd) div {background: rgb(181 181 181);}
.pageContent_index5 ul li:nth-child(even) div {background: rgb(220 29 29);}
.pageContent_index5 ul li span {font-size: 15px; display: block; text-align: center;
  color: #fff; letter-spacing: 1px; padding-top: 25px; font-weight: 400;}
.pageContent_index5 ul li img {width: 55px; margin: 0 auto; display: block; padding: 10px 0;}
.pageContent_index5 ul li h1 {color: #fff; text-align: center; font-size: 20px; margin-bottom: 8px;}
.pageContent_index5 ul li p {color: #fff; text-align: center; font-size: 17px;}
.pageContent_index5 ul li div::after {display: block; content:""; position: absolute; top: 50%; left: -10px; transform: translate(-50%, -50%); width: 30px; height: 30px; background: url(../value/images/arrow3.png); z-index: 1; border-radius: 50%;}
.pageContent_index5 ul li:first-child div::after  {display: none;}

.index1_mb_box{display:none;}
.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:28px;line-height:38px;}
  .pageContent_index >div>p{font-size:16px;line-height:28px;margin-top:30px;}
  .pageContent_index1 .index1_box{padding:0;}
  .pageContent_index1 .index1_box div{width:31.3%;margin:1%;    background-repeat: no-repeat !important;background-size:100% !important;}
  .index1_box >div img{margin-top:10%;}
  .index1_box >div>p{font-size:18px;}

  .pageContent_index2{padding:50px 0;}
  .pageContent_index2 ul li{font-size:24px;padding-left:20px;text-align:left;}
  .pageContent_index2 ul li::before{width:20px;height:5px;left:0;top:0;transform:rotate(0deg);left: 20px;
    top: -10px;}
  .pageContent_index2 ul::before{height:250px;}
  .pageContent_index2 ul li p{font-size:16px;}

  .pageContent_index3 ul li h1{font-size:20px;}
  .pageContent_index3 ul li div img{height:100%;}
  .pageContent_index3 ul li h1{float:none;width:100%;padding-left:0;}
  .pageContent_index3 ul li p{float:none;width:100%;border-top:1px solid #e4e4e4;padding-top:15px;}

  .pageContent_index h2{font-size:22px;}
  .pageContent_index4 ul li h1{font-size:18px !important;}

  .pageContent_index4 ul li{float:none;}
  .pageContent_index4 ul li.title{display:flex;align-items:center;}
  .title img {
    width: 50px !important;
    height: 50px !important;}
  .pageContent_index4 ul li.title h1{padding-left:10px;}
  .pageContent_index4 ul li.title{width:100% !Important;}
  .pageContent_index4 ul li{height:auto;padding:25px 40px;width:100% !Important;overflow:hidden;display:flex;align-items:center;}
  .page_index4_txtbox{padding-left:15px;text-align:left;}
  .pageContent_index4 ul:nth-of-type(1) li:nth-of-type(3){border-radius:0;}
  .pageContent_index4 > h2{width:100%;float:none;height:auto;padding-top:0;padding:15px 0;border-radius:0;}
  .pageContent_index4 > div{width:100%;}
  .pageContent_index h2{line-height:normal;}

  .pageContent_index5 ul li{width:48%;margin:1%;}
  .pageContent_index5 ul li span{padding-top:0;}
  .pageContent_index5 ul li > div{width:100%;height:100%;border-radius:30px;padding:20px 0;}
  .pageContent_index5 ul li div::after{display:none;}
  .pageContent_index5 ul li:nth-child(even) div{background:#e4e4e4;}
  .pageContent_index5 ul li:nth-child(2n) div{background:rgb(220 29 29);} 
  .index5_box{text-align:left;}

}

@media screen and ( max-width: 1024px){
  .index1_box{display:none;}
  .index1_mb_box{display:block;}
  .index1_mb_box li{border-bottom:1px solid #e4e4e4;padding:20px 0;}
  .index1_mb_box li:first-child{border-top:0;} 
  .index1_mb_box li:last-child{border-bottom:0;} 
  .index1_mb_box li img{width:70%;}

  .pageContent_index1 .index1_box div p:nth-child(1){margin-top:50px;}
  .pageContent_index2 ul{background:#333;padding-top:50px;border-radius:30px;margin-top:30px;}
  .pageContent_index2 ul li{width:50%;text-align:left;padding-bottom:50px;}
  .pageContent_index2 ul::before{display:none;}
}

@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;}

  /* 페이지*/


  .index1_mb_box li img{width:100%;}

  .pageContent_index2 ul li{font-size:18px;}
  .pageContent_index2 ul li{width:100%;}

  .pageContent_index3 ul li{width:100%;}

  .pageContent_index4{padding:0;}
  .pageContent_index h2{font-size:18px !important;font-weight:700 !important;letter-spacing:-1px !important}
  .pageContent_index4 ul li h1{font-size:16px !Important;}
  .pageContent_index4 ul li p{font-size:14px;}
  
  .pageContent_index5 ul li{width:100%;margin:1% 0;}
  .pageContent_index{padding-bottom:0;}
  .pageContent_index5 ul li h1{font-size:16px;}
  .pageContent_index5 ul li p{font-size:14px;}

}