@charset "UTF-8";

/* ========== SUB5-COMMON-S ========== */
.visual {background-image: url(/img/sub-visual5.jpg);}
.franchise-tit {
  font-size: 30px; font-weight: 600; line-height: 50px;
}
.franchise-more {text-align: center;}
.franchise-more-btn {
  display: inline-block;
  height: 50px; padding: 0 20px 0; margin: 55px 20px 0;
  border: 3px solid #d9212d; border-radius: 10px;
  background-color: #d9212d;
  font-size: 19px; font-weight: 600; line-height: 44px;
  text-align: center; color: #fff;
  transition: all 0.4s;
}
.franchise-more-btn:hover {
  background-color: #fff; box-shadow: 0 0 5px #d9212d;
  color: #333;
}
/* ========== SUB5-COMMON-E ========== */


/* ========== SUB5-COMPETITION-S ========== */
.competition-item {margin-bottom: 100px;}
.competition-item .inner {position: relative;}
.competition-box {position: relative;}
.competition-num {
  position: absolute; left: 0; top: 0;
  font: 900 300px/1 Gantari, Poppins, "Pretendard Variable", Pretendard, "돋움", Dotum, sans-serif;
  color: transparent;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #f5f2f3;
}
.competition .franchise-tit {margin-bottom: 10px; position: relative; z-index: 5;}
.competition .franchise-tit::after {
  content: ""; display: block;
  width: 50px; height: 6px; margin-top: 2px;
  border-radius: 0 0 5px 0;
  background-color: #d9212d;
}
.competition-txt {position: relative; z-index: 5;}
.competition-txt p {margin-bottom: 25px;}

.district {height: 450px;}
.district .inner {padding: 145px 0 0 720px;}
.district .inner::before {
  content: "";
  position: absolute; top: 0; left: -320px;
  width: 800px; height: 450px;
  border-radius: 0 75px 75px 0;
  background-color: #f5f2f3;
}
.district .competition-num {top: -80px; left: -30px;}
.district-img {
  position: absolute; top: 75px; left: 70px;
  width: 600px; height: 300px;
  background-image: url(/img/sub5-1-district.jpg);
}
.district-img figcaption {font-size: 16px; margin-top: 5px;}
.district-img span {font-weight: 600; color:#d9212d}

.training {text-align: center;}
.training .competition-num {top: -92px; left: 50%; transform: translateX(-50%);}
.training .franchise-tit::after {
  margin: 2px auto;
  border-radius: 0 0 5px 5px;
}
.training-item {
  float: left; position: relative;
  width: 360px;
  margin: 70px 0 120px 0;
}
.training-item:nth-child(1) {margin-left: 49px;}
.training-item:nth-child(2) {margin: 70px 51px 120px 51px;}
.training-item::before {
  content: ""; display: block;
  width: 128px; height: 128px;
  margin: 0 auto 25px;
  background-image: url(/img/sub5-ico.png);
}
.training-item:nth-child(1)::before {background-position: -192px 0;}
.training-item:nth-child(2)::before {background-position: -320px 0;}
.training-item:nth-child(3)::before {background-position: -448px 0;}
.training-item::after {
  content: "";
  position: absolute; top: 0; right: -26px;
  width: 1px; height: 241px;
  background-color: #ccc;
}
.training-item:last-child::after {display: none;}
.training-tit {
  margin-bottom: 10px;
  font-size: 24px; font-weight: 600;
}
.training-desc {margin-bottom: 35px; font-size: 16px;}

.quality {
  height: 350px; margin-bottom: 150px;
  background-color: #f5f2f3;
}
.quality .inner {padding: 75px 0 0 70px;}
.quality .competition-num {
  top: -55px; left: -30px;
  -webkit-text-stroke-color: #fff;
}
.quality-inno {
  position: absolute; top: 50px; right: 370px; z-index: 5;
  width: 350px; height: 350px;
}
.quality-inno img {border-radius: 0 0 0 50px;}
.quality-safe {
  position: absolute; top: -50px; right: 70px;
  width: 350px; height: 350px;
}
.quality-safe::after {
  content: "";
  position: absolute; top: 90px; left: 0;
  width: 60px; height: 260px;
  background-color: #f5f2f3;
}
.quality-safe img {  border-radius: 0 50px 0 0;}

.community {margin-bottom: 0;}
.community .inner {padding: 0 100px;}
.community .competition-num {top: -80px; left: 50%; transform: translateX(-50%);}
.community .franchise-tit {text-align: center;}
.community .franchise-tit::after {margin: 2px auto 0; border-radius: 0 0 5px 5px;}
.community .competition-txt {text-align: center; margin-bottom: 50px;}
.community-item {position: relative; height: 300px; margin-bottom: 50px;}
.community-txt {
  width: 400px; height: 100px; padding: 18px 0 0 30px; 
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.community-item:nth-child(1) .community-txt,
.community-item:nth-child(3) .community-txt {
  position: absolute; top: 180px; left: 430px;
}
.community-tit {font-size: 24px; font-weight: 600;}
.community-desc {font-size: 16px;}
.community-img {width: 480px; height: 300px;}
.community-item:nth-child(1) img{border-radius: 60px 60px 0 60px;}
.community-item:nth-child(2) .community-txt {position: absolute; top: 180px; left: 250px;}
.community-item:nth-child(2) .community-img {float: right;}
.community-item:nth-child(2) img{border-radius: 60px 60px 60px 0;}
/* ========== SUB5-COMPETITION-E ========== */


/* ========== SUB5-GUIDE-S ========== */
.step {text-align: center;}
.step .franchise-tit {margin-bottom: 20px;}
.step-wrap li {
  float: left; position: relative;
  width: 200px; height: 180px;
  padding-top: 18px; margin: 0 0 80px 170px;
  border: 5px solid #f5f2f3; border-radius: 36px;
}
.step-wrap li:nth-child(4),
.step-wrap li:nth-child(5),
.step-wrap li:nth-child(6) {float: right; margin: 0 170px 80px 0;}
.step-wrap li::before {
  content: ""; display: block;
  width: 64px; height: 64px; margin: 0 auto 24px;
  background-image: url(/img/sub5-ico.png);
}
.step-wrap li:nth-child(2):before {background-position: -64px 0;}
.step-wrap li:nth-child(3):before {background-position: -128px 0;}
.step-wrap li:nth-child(4):before {background-position: 0 -64px;}
.step-wrap li:nth-child(5):before {background-position: -64px -64px;}
.step-wrap li:nth-child(6):before {background-position: -128px -64px;}
.step-wrap li:nth-child(7):before {background-position: 0 -128px;}
.step-wrap li:nth-child(8):before {background-position: -64px -128px;}
.step-wrap li:nth-child(9):before {background-position: -128px -128px;}
.step-wrap li:nth-child(1)::after,
.step-wrap li:nth-child(2)::after,
.step-wrap li:nth-child(5)::after,
.step-wrap li:nth-child(6)::after,
.step-wrap li:nth-child(7)::after,
.step-wrap li:nth-child(8)::after {
  content: ""; 
  position: absolute; top: 73px; left: 195px;
  width: 170px; height: 24px;
  background-color: #f5f2f3;
}
.step-wrap li:nth-child(3)::after {
  content: ""; 
  position: absolute; top: 73px; left: 195px;
  width: 85px; height: 284px;
  border: 24px solid #f5f2f3; border-radius: 0 55px 55px 0;
  border-left: none;
}
.step-wrap li:nth-child(9)::after {
  content: ""; 
  position: absolute; bottom: 73px; left: -830px;
  width: 85px; height: 284px;
  border: 24px solid #f5f2f3; border-radius: 55px 0 0 55px;
  border-right: none;
}
.step-num {
  font: 700 20px Gantari, Poppins, "Pretendard Variable", Pretendard, "돋움", Dotum, sans-serif;
  color: #d9212d;
}
.step-tit {font-size: 20px; font-weight: 600; line-height: 20px;}
.step-tit::before {
  content: "";
  position: absolute; top: 97px; left: 35px; 
  width: 120px; height: 2px;
  background-color: #f5f2f3;
}
.step-wrap li:last-child .step-tit {
  font: 800 26px/2 Gantari, Poppins, "Pretendard Variable", Pretendard, "돋움", Dotum, sans-serif;
  color: #d9212d;
}

.cost .franchise-tit {text-align: center;}
.cost-info {float: right; font-size: 15px; color: #d9212d}
.cost-table {width: 100%; border-collapse: collapse; line-height: 25px;}
.cost-col1 {width: 20%;}
.cost-col2 {width: 20%; border: 1px solid #ccc;}
.cost td, .cost th {border-top: 1px solid #ccc; padding: 15px;}
.cost td:last-child {padding-left: 25px;}
.cost thead {
  border-top: 2px solid #ccc;
  background-color: #eee;
  font-size: 18px; font-weight: 600; color: #333;
}
.cost tbody th {font-weight: 500; color: #333;}
.cost td:nth-child(2) {font-weight: 500; text-align: center; color: #d9212d;}
.cost tfoot {border-bottom: 2px solid #ccc;}
.cost tfoot th,
.cost tfoot td {font-size: 18px; font-weight: 600; color: #d9212d;}
.cost tfoot td:last-child {font-size: 17px;}
/* ========== SUB5-GUIDE-E ========== */




/* ========== SUB5-DESIGN-S ========== */
.design .franchise-tit {margin-bottom: 13px; text-align: center;}
.design .franchise-desc {
  margin-bottom: 60px;
  font-size: 18px; text-align: center; color: #777;
}

.space {margin-bottom: 100px;}
.space .franchise-tit {margin-bottom: 60px;}
.space-swiper {position: relative; height: 520px; width: 1160px;}
.space-swiper .swiper-slide {
  height: 500px; width: 1150px;
  padding: 25px 0 0 70px;
  background-color: #fff;
}
.space-swiper .swiper-slide::before {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 800px; height: 400px;
}
.space-swiper .swiper-slide::after {
  content: "";
  position: absolute; bottom: -10px; left: 0;
  width: 400px; height: 300px; box-sizing: content-box;
  border: 10px solid #fff; border-radius: 0 0 60px 60px;
}
.space1::before {background-image: url(/img/sub5-4-space1.jpg);}
.space1::after {background-image: url(/img/sub5-4-space2.jpg);}
.space2::before {background-image: url(/img/sub5-4-space3.jpg);}
.space2::after {background-image: url(/img/sub5-4-space4.jpg);}
.space3::before {background-image: url(/img/sub5-4-space5.jpg);}
.space3::after {background-image: url(/img/sub5-4-space6.jpg);}

.design-eng {
  font: 600 17px Gantari, Poppins, "Pretendard Variable", Pretendard, "돋움", Dotum, sans-serif;
  color: #d9212d;
}
.design-tit {font-size: 24px; font-weight: 600; margin-bottom: 10px;}
.space-nav {
  position: absolute; top: 275px; left:365px; z-index: 10;
  width: 100px; height: 50px;
}
.space-nav div {
  float: left;
  width: 50px; height: 50px;
  background-color: #fff;
  font-family: fontello; line-height: 50px;
  text-align: center; color: #bbb;
  transition: all 0.4s;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.space-prev {border-radius: 10px 0 0 10px; padding-right: 2px;}
.space-next {border-radius: 0 10px 10px 0; padding-left: 2px;}
.space-prev::before {content: "\e807";}
.space-next::before {content: "\e806";}
.space-nav div:hover {background-color: #d9212d; color: #fff;}

.drive-item {position: relative; height: 470px;}
.drive-item::before {
  content: "";
  position: absolute; top: 0;
  width: 800px; height: 400px;
  border-radius: 60px 0 0 60px;
  background-image: url(/img/sub5-4-drive1.jpg);
}
.drive-item::after {
  content: "";
  position: absolute; right: 120px; bottom: -30px;
  width: 400px; height: 300px; box-sizing: content-box;
  border: 10px solid #fff; 
  background-image: url(/img/sub5-4-drive2.jpg);  
}
.in {padding: 20px 0 0 850px; margin-bottom: 80px;}
.in::before {left: 0}
.thru {padding-left: 170px;}
.thru::before {
  right: 0;
  border-radius: 0 60px 60px 0;
  background-image: url(/img/sub5-4-drive3.jpg);
}
.thru::after {
  position: absolute; left: 120px;
  background-image: url(/img/sub5-4-drive4.jpg);
}
/* ========== SUB5-DESIGN-E ========== */

/* ========== SUB5-SEMINAR-S ========== */
.seminar-table {width: 100%; border-collapse: collapse; line-height: 25px;}
.seminar-col1 {width: 20%; border-right: 1px solid #ccc;}
.seminar td, .seminar th {border-top: 1px solid #ccc; padding: 20px;}
.seminar td {padding-left: 25px; font-size: 18px;}
.seminar thead {
  border-top: 2px solid #aaa;
  border-bottom: 1px solid #aaa;
  background-color: #eee;
  font-size: 20px; font-weight: 600; color: #333;
}
.seminar tbody {border-bottom: 2px solid #aaa;}
.seminar tbody th {
  vertical-align: middle;
  font-size: 19px; font-weight: 500; color: #333;
}
/* ========== SUB5-SEMINAR-E ========== */