/* BASIC css start */
/* BASIC css start */
#fullpage { position:relative; }
#wrap {width:100%; height:100%;}

/* 상단 로고, 텍스트, 하단 버튼 */
.story-logo {position:fixed;top: 18px;left: 25px;z-index:2;}
.story-logo img{width:72px}
.story-tit {position:fixed;right: 25px;top: 34px;color:#fff;font-size: 13px;z-index:99;font-family: 'Montserrat', sans-serif;}
.navi {position:absolute;right:7.7%;bottom:50px;z-index:999;}
.navi p { font-size:18px; color:#fff; }

/* 우측 네비게이션 */
#menu{position:fixed; top:38%; right:80px; z-index: 1;}
#menu li{display: block; width: 25px; height: 1px; margin: 25px 0; position: relative;}
#menu li a{  display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer;  position: absolute; z-index: 1; height: 100%; width: 100%; border: 0; background: #fff; left: 50%; top: 50%;-webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;}
#menu li a span{   font-size:0;  }
#menu li.active a span, #menu li a:hover span{   font-size:0;   color: #fff; position: absolute; left: -55px; top: -7px; font-size: 11px;}
#menu li.active  a{font-size:12px; color:#fff;}
#menu li.active  a, #menu li a:hover{width:43px; background:#fff;left:-3px;}

/* 풀페이지 공통 */
.section .section_cont {display:table-cell; vertical-align:middle; opacity:0; transition:all 1s 0s; -webkit-transform: translate3d(0,50%,0); -moz-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0);}
.section.active .section_cont {-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0);opacity: 1;transition-delay: .3s !important;}

/* 풀페이지 */
#section0 .section_cont{text-align: center;color: #fff;display: table;width: 76%;margin: 0 auto;}
#section0 .section_cont .logo {margin-bottom: 36px;}
#section0 .section_cont .logo  img{width:95px;}
#section0 .section_cont .tit p {font-size: 36px;margin-bottom: 36px;font-family: 'Noto Sans KR', sans-serif;font-weight: 600;}
#section0 .section_cont .tit span {font-size: 14px;font-family: 'Noto Sans KR', sans-serif;}

#section1 .section_cont{text-align: left;display: table;width: 76%;margin: 0 auto;} 
#section1 .section_cont .left_cont{}
#section1 .section_cont .right_cont{display: table-cell;}
#section1 .section_cont .tit{color:#fff;}
#section1 .section_cont .tit h1 {font-size: 32px;line-height: 1.4;color: #fff;margin-bottom: 58px;font-family: 'Noto Sans KR', sans-serif;font-weight: 600;}
#section1 .section_cont .tit p {font-size: 14px;margin-bottom: 15px;font-family: 'Noto Sans KR', sans-serif;line-height: 1.5;text-align: left;}
#section1 .section_cont .tit p.ect1 {font-size: 65px;color: transparent;-webkit-text-stroke: 1px white;font-weight: bold;font-family: 'Montserrat', sans-serif;line-height: 1;margin-top: 60px;}
.go-home{position:fixed;left: 7.7%;bottom: 39px;color:#fff;font-size:18px;z-index:99;}
.go-home a {display: inline-block;border: 1px solid #fff;color: #fff;padding: 10px 30px;border-radius: 33px;font-size: 13px;}


#section2 .section_cont{text-align: left;display: table;width: 76%;margin: 0 auto;} 
#section2 .section_cont .left_cont{display: table-cell;padding-right: 115px;}
#section2 .section_cont .right_cont{}
#section2 .section_cont .tit{color:#fff;}
#section2 .section_cont .tit h1 {font-size: 32px;line-height: 1.4;color: #fff;margin-bottom: 58px;font-family: 'Noto Sans KR', sans-serif;font-weight: 600;}
#section2 .section_cont .tit p {font-size: 14px;margin-bottom: 15px;font-family: 'Noto Sans KR', sans-serif;line-height: 1.5;text-align: left;}
#section2 .section_cont .tit p.ect1 {font-size: 34px;color: transparent;-webkit-text-stroke: 1px white;font-weight: bold;font-family: 'Montserrat', sans-serif;line-height: 1;margin-top: 60px;}

#section3 .section_cont {
  text-align: center;
  display: block;
}
#section3 .section_cont .tit{margin: 0;}

#section3 .section_cont .tit p {
  font-size: 32px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  margin-bottom: 15px;
}

#section3 .section_cont .tit span {
  font-size: 13px;
  color: #fff;
  font-family: 'Noto Sans KR', sans-serif;
}
#section3 .section_cont .history_wrap {
  width: 80%;
  margin: 0 auto;
  white-space: nowrap;
  /* overflow-x: auto; */
  /* overflow-y: hidden; */
  -webkit-overflow-scrolling: touch;
}
#section3 .section_cont .history_wrap .swiper-slide{
  opacity: 0 !important;
}
#section3 .section_cont .history_wrap .swiper-slide-active {
  opacity: 1 !important;
}
#section3 .section_cont .history_wrap::-webkit-scrollbar {
  width: 10px;
}
#section3 .section_cont .history_wrap::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 10px;
  background-clip: padding-box;
  border: 3px solid transparent;
}
#section3 .section_cont .history_wrap::-webkit-scrollbar-track {
  background-color: #999999;
  border-radius: 10px;
  box-shadow: inset 0px 0px 5px white;
}
#section3 .section_cont .history_wrap .history_line {
  margin-bottom: 40px;
  font-size: 0;
  float: left;
  width: 46%;
}
#section3 .section_cont .history_wrap .top:after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 50%;
  width: 1px;
  height: 54%;
  border-right: 2px solid #fff;
}
#section3 .section_cont .history_wrap .history_line:after{/* content:''; *//* display:block; *//* clear:both; */}
#section3 .section_cont .history_wrap .top{
    margin: 0 4% 0 0;
}
#section3 .section_cont .history_wrap .top li::before{
    content: '';
    position: absolute;
    border: 1px solid #fff;
    width: 5%;
    height: 0px;
    right: -6%;
    top: 50%;
    transform: translateY(-50%);
}
#section3 .section_cont .history_wrap .top li::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  right: -11%;
  top: 50%;
  transform: translateY(-50%);
  background: #3f4757;
  border: 2px solid #fff;
  z-index: 2;
  border-radius: 50%;
  bottom: -47px;
  box-sizing: border-box;
}
#section3 .section_cont .history_wrap .bottom{
    margin: 46px 0 0 4%;
}
#section3 .section_cont .history_wrap .bottom:before{/* content: ""; *//* display: block; *//* width: 100%; *//* border-bottom: 2px solid #fff; *//* margin: 40px auto; */}
#section3 .section_cont .history_wrap .bottom li::before{
  content: '';
  position: absolute;
  border: 1px solid #fff;
  width: 6%;
  height: 0px;
  left: -7%;
  top: 50%;
  transform: translateY(-50%);
}
#section3 .section_cont .history_wrap .bottom li::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  left: -13%;
  top: 50%;
  transform: translateY(-50%);
  background: #3f4757;
  border: 2px solid #fff;
  z-index: 2;
  border-radius: 50%;
  bottom: -47px;
  box-sizing: border-box;
}
#section3 .section_cont .history_wrap ul {/* clear: both; */}
#section3 .section_cont .history_wrap ul:after{content:''; clear:both; display:block;}
#section3 .section_cont .history_wrap ul li {
  /* display: inline-block; */
  position: relative;
  cursor: pointer;
  margin: 25px 0;
}
#section3 .section_cont .history_wrap ul li img{width:100%; height:135px;}
#section3 .section_cont .history_wrap ul li .history_cont {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.9);
  word-break: inherit;
  white-space: pre-line;
}


#section3 .section_cont .history_wrap ul li .history_cont b {
  font-size: 14px;
  color: #1f355e;
  font-family: 'Montserrat', sans-serif;
  padding: 0;
  display: block;
}

#section3 .section_cont .history_wrap ul li .history_cont p {
  font-size: 14px;
  color: #000;
  font-family: 'Noto Sans KR', sans-serif;
  padding: 0 1px;
}
#section3 .section_cont .history_wrap .swiper-pagination-progressbar {
  bottom: 0;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 2px;
  background: #999999;
}

#section3 .section_cont .history_wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #fff;
}

#section4 .section_cont{height: 100%;overflow: hidden;-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0);display: block;}
#section4 .section_cont .brand_cont{background-size: cover !important;height: 33.333%;position: relative;}
#section4 .section_cont .brand_cont .brand_pointer{cursor:pointer;width: 100%;height: 100%;position: absolute;top: 0;right: 0;bottom: 0;left: 0;}

/*
#section4 .section_cont .brand_cont{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
    -webkit-transition:all .3s linear;
    -moz-transition:all .3s linear;
    -ms-transition:all .3s linear;
    -o-transition:all .3s linear;
    transition:all .3s linear;
}
#section4 .section_cont .brand_cont:hover{
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);   
    -o-transform:scale(1.2);
    transform:scale(1.2);
    z-index:98;
    cursor:pointer;
}*/
#section4 .section_cont .brand_cont .view{display:none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index:99;}
#section4 .section_cont .brand_cont.brand01 .view{background: url(https://gi.esmplus.com/elcanto01/elcanto/home/25summer/m_brand_detail_bnr01.jpg) no-repeat center center; background-size: cover;}
#section4 .section_cont .brand_cont.brand02 .view{background: url(https://gi.esmplus.com/elcanto01/elcanto/home/25summer/m_brand_detail_bnr02.jpg) no-repeat center center;background-size: cover;}
#section4 .section_cont .brand_cont.brand03 .view{background: url(https://gi.esmplus.com/elcanto01/elcanto/home/25summer/m_brand_detail_bnr03.jpg) no-repeat center center; background-size: cover;}

#section4 .section_cont .brand_cont .view .img_wrap {height: 100%;}
#section4 .section_cont .brand_cont .view .img_wrap img{/* width: auto; *//* height: 100%; */}
#section4 .section_cont .brand_cont .view .go-brand{position:fixed;right: 156px;bottom: 15px;}
#section4 .section_cont .brand_cont .view .go-brand a{font-size: 13px;z-index:100;display: inline-block;border: 1px solid #fff;color: #fff;padding: 10px 30px;border-radius: 33px;font-family: 'Noto Sans KR', sans-serif;}
#section4 .section_cont .brand_cont .view .go-back{position:fixed;right: 30px;bottom: 15px;font-size: 13px;z-index:100;display: inline-block;border: 1px solid #fff;color: #fff;padding: 10px 30px;border-radius: 33px;cursor: pointer;font-family: 'Montserrat', sans-serif;}
#section4 .section_cont .brand_cont .view .txt_wrap {vertical-align: middle;color: #000;padding-left: 25px;}
#section4 .section_cont .brand_cont .view .txt_wrap .txt_cont{position: absolute;top: 50%;transform: translateY(-50%);}
#section4 .section_cont .brand_cont .view .txt_wrap .logo {margin-bottom: 15px;}
#section4 .section_cont .brand_cont .view .txt_wrap .tit p {font-size: 20px;}
#section4 .section_cont .brand_cont .view .txt_wrap .tit span {font-size: 12px;color: #fff;font-family: 'Noto Sans KR', sans-serif;line-height: 1.5;text-align: left;font-weight: 300;}

#section5 .video_wrap{position:relative;}
#section5 .video_wrap .video_bg{position: relative; width: 100%; padding-bottom: 49.25%;}
#section5 .video_wrap .video_bg iframe { position: absolute; width: 100%; height: 100%; }
#section5 h1{position: absolute;left: 30px;bottom: 140px;font-size: 24px;color: #fff;font-weight: bold;font-family: 'Noto Sans KR', sans-serif;}
#section5 .go-youtube{display:none;}
#section5.active .go-youtube{display:block; position:fixed;right: 30px;bottom: 78px;}
#section5.active .go-youtube a{font-size: 13px;z-index:100;display: inline-block;border: 1px solid #ffffff;color: #fff;background: #c00;padding: 10px 30px;border-radius: 33px;font-family: 'Noto Sans KR', sans-serif;}

.swiper-button-next, .swiper-button-prev{top:auto !important;}
.swiper-button-next {right: 40px !important;}
.swiper-button-prev {left: 40px !important;}
.swiper-button-next img, .swiper-button-prev img{width:15px;}
.swiper-button-next:after, .swiper-button-prev:after{content:unset !important;}


/* BASIC css end */