@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(//cdn.jsdelivr.net/font-nanumlight/1.0/NanumBarunGothicWeb.eot);
@import url(/reset.css);
@import url(./footer.css);
h1,
h2,
h4,
p {
  font-family: "Nanum Myeongjo", serif;
}
/* span {
  font-family: "NanumBarunGothic";
} */


section {
  height: 100vh;
  position: relative;
  background-position: center;
  background-size: cover;
}

.inner{max-width: 1400px; margin: auto;}

img{vertical-align: top;}

#sect1 {
  background-image: url(../images/v_img01_sdown.jpg);
  position: relative;
}

h2{color: #fff;
font-size: 2.2rem;}

#sect1 h3 {
    color: #fff;
    position: absolute;
    line-height: 1.5;
    font-size: 2rem;
    left: 76%;
    top: 35%;
    margin-left: -30%;
  }

#sect1 h2 {
  color: #fff;
  position: absolute;
  line-height: 1.5;
  font-size: 5rem;
  left: 61%;
  top: 46%;
  margin-left: -30%;
}

.scrollbtn {
  position: absolute;
  left: 50%;
  bottom: 5vh;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  color: #fff;
  z-index: 10;
}

@keyframes scrollbtn {
  0%{transform: translateY(0);}
  100%{transform: translateY(-10px);}
  
}
.scrollbtn img {
  width: 30px;
  margin-top: 1rem;
  animation: scrollbtn .85s alternate infinite linear;
  
}
.scrollbtn span {
  font-size: 18px;
}

/*---sect2---*/

#sect2 {
  background-image: url(../images/section01.jpg);
  position: relative;
}
#sect2 h2{
  color: #fff;
text-align: center;
font-weight: 700;

}
#sect2 ul.info{
  position: absolute;
left: 50%;
transform:translateX(-50%) ;
bottom: 0;}

#sect2 ul.info li{position: relative;}

#sect2 ul.info li a{
  display: block;
background: rgba(0, 0, 0, .5);
color: #fff;
font-size: 18px;
letter-spacing: -2px;

}

#sect2 ul.info li a::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  transition: .35s;
  

}

#sect2 ul.info li:nth-child(1) a::before{background:#22adb9 ;}
#sect2 ul.info li:nth-child(2) a::before{background: #1b5bbe;}
#sect2 ul.info li:nth-child(3) a::before{background: #d93f69;}

#sect2 ul.info li:hover a::before{height: 100%;}

#sect2 p {
    color: white;
    font-size: 22px;
    text-align: center;
    padding: 20px;
    margin-top: 20px;
  }
  
  #sect2 .btn {
    text-align: center;
  }
  #sect2 .btn > a {
    color: white;
    width: 312px;
    display: inline-block;
    font-weight: bold;
    background: rgb(0, 0, 0, 0.5);
    border-radius: 30px;
    padding: 20px;
  }

.figWrap{
  position: absolute;
width: 100%;
height: 100%;
z-index: 10;
}

/*---sect3---*/

#sect3 {
  background-image: url(../images/section02.jpg);
  position: relative;
}

#sect3 .program{width: 380px; }
#sect3 .program ul li{background-repeat: no-repeat;
background-position: 10px center;
height: 57px;
border-bottom: 1px solid #fff;}

#sect3 .program ul li:nth-child(1){background-image: url(../images/section02_icon01.png);}
#sect3 .program ul li:nth-child(2){background-image: url(../images/section02_icon02.png);
background-position-x: 4px;}
/* 2번째 아이콘만 위치 재정의 */
#sect3 .program ul li:nth-child(3){background-image: url(../images/section02_icon03.png);}

#sect3 .program ul li a{display: inline-block;
color: #fff;
text-indent: 50px;
/* 들여쓰기 */
width: 329px;
font-size: 16px;
}

#sect3 .program ul li::after{
  content: "\f105";
  display: inline-block;
  font-family: fontawesome;
  /* 폰트패밀리로 fontawesome을 지정해줘야 앞에 content에 아이콘 유니코드 입력한게 적용됨 */
  color: #fff;
  vertical-align: middle;
  line-height: 57px;
}



#sect3 h2{
  font-size:3rem;
  margin-bottom: 2rem;
  color:#fff ;

}

#sect3 .left p{margin-bottom: 2rem;
color: #fff;
font-size: 16px;
font-weight: 500;
line-height: 1.8;
font-family: "Noto Serif KR", serif;}

#sect3 .right figure img{width: 100%;}

#sect3 .right .slide{
  background: rgba(0, 0, 0, .4);
  color: #fff;
  
}

#sect3 .right .desc{
  padding-bottom: 40px;
}

#sect3 .right h3{padding-bottom: 10px;}



/*---sect4---*/

#sect4 {
  background-image: url(../images/section03.jpg);
}



#sect4 h2{
  font-size:3rem;
  margin-bottom: 2rem;
  color:#fff ;
  text-align: center;
  position: absolute;
  top: 120px;
  left: 600px;
}

#sect4 p{
  color:#fff ;
  text-align: center;
  position: absolute;
  top: 250px;
  left: 425px;
  font-size: 1.5rem;
}

#sect4 .tabmenu{
  
text-align: center;
color: #fff;
border: 1px solid #000;}


#sect4 .tabmenu li a{
  display: block;
display: flex;
flex-direction: column;
align-items: center;}


#sect4 .tabmenu figure{width: 150px;}

#sect4 .tabmenu ul li{background: rgba(0, 0, 0, .4);}
#sect4 .tabmenu ul li:hover{background: rgba(26, 160, 180, .5);}

/*---sect5---*/

#sect5 {
  background: url(../images/section04.jpg) no-repeat 90% center/cover;
}
/* 동백꽃 부분만 보여야해서 sect5만 위치 재정의 */
#sect5 ul.tabmenu{display: flex;
flex-wrap: wrap;}

#sect5 h2{text-align: center;}
#sect5 ul.tabmenu a{background: rgba(0, 0, 0, .4);
display: block;
text-align: center;
padding: 1rem 0;
color: #fff;
border: 1px solid transparent;}

#sect5 ul.tabmenu li:hover a{border: 1px solid #c71c30;}
#sect5 ul.tabmenu li.active a{background: #c71c30;}


#sect5 .tabcontents .tab li{
position: relative;
background: #fff;
border-radius: 10px 10px 0 0;
cursor: pointer;
}

#sect5 .tabcontents .tab li figure{
    border-radius: 10px 10px 0 0;
}

#sect5 .tabcontents .tab h4{
position: absolute;
bottom: 10px; left: 4px;
color: #fff;
display: none;}

#sect5 .tabcontents .tab li:hover h4{display: block;}

.tabcontents .review li figure{background-size: cover;}
.tabcontents .review li:nth-child(1) figure{
  background-image: url(../images/1e3007db02937d8b5a4fe868d8cea07f.jpg) ;
}
.tabcontents .review li:nth-child(2) figure{
  background-image: url(../images/7ec01ce9221aba0fa547a3748f5ecd78.jpg) ;
}
.tabcontents .review li:nth-child(3) figure{
  background-image: url(../images/61565333e51e103e67c21927f4995d25.jpg) ;
}
.tabcontents .review li:nth-child(4) figure{
  background-image: url(../images/a30037a2482bfd6c9531e5b8ac7d54d6.jpg) ;
}

.tab{display: none;}
.tabcontents .active{display: block;}
.tab .review figcaption{padding: 1rem;}

.tab .review p{
padding: 0 1rem 0 1rem;
line-height: 1.5;
max-height: calc(1.5 *2);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 두줄 말줄임표 해주기 */



/* -모바일-모바일-모바일-------Mobile------모바일-모바일-모바일------------ */

@media screen and (max-width: 521px) {
  body {
    font-size: 14px;
  }
  header{
    height: 60px;
  }

  
  h1 img{
    height: 25px;
  }

  nav ul{
    flex-direction: column;
  }

  
  #sect1 h3{
    left: 65%;
    top: 35%;
   
    
  }
  #sect1 h2{
    font-size: 3rem;
    left: 38%;
    top: 46%;
  }

  #sect2 h2{
    font-size: 2.5rem; 
    padding: 122px 40px 0 40px;}
  
  #sect2 ul.info{width: 100%; display: block;}

  #sect2 ul.info figure{
    display: none;}

  #sect2 ul.info li a{
    position: relative; 
    height: 60px;
  line-height: 60px;
padding-left: 32px;
}
  /* h1 {
    margin-left: 16px;
  } */


#sect3 h2{font-size: 2.5rem;}
#sect3 {text-align: center;}

#sect3 .left{padding-top: 122px;}

#sect3 .program{margin: 1rem auto;}



#sect3 .right figure{width: 35%;}

#sect3 .right .desc{
  width: 55%;
  text-align: left;
  padding: 6px 1px;
}



.slideWrap{width: 80%; margin: auto;}

#sect3 .right .slide{display: flex;
justify-content: space-between;
padding: 12px;}

#sect3 .right figure{margin: 10px;}


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

#sect4 .tabmenu ul{gap: 1rem;}

#sect4 .tabmenu ul li{
  width: 46%;
padding: 2rem 0}

#sect4 .tabmenu ul li:nth-child(3){display: block;}

#sect4 .tabmenu figure img{width: 104px;}

#sect4 .tabmenu h3{padding: 1rem 0;}


#sect5 ul.tabmenu{padding: 8px;}
#sect5 ul.tabmenu li{width: 50%;}
.tabcontents{margin-top: 1rem;}
.tabcontents .review figure{height: 270px;}
.tabcontents {padding: 1rem;}

.tabcontents{width: 86%;margin: auto;}

#sect5{padding-top: 100px;}
.tabmenu{margin-top: 24px;}

.tab li{display: none;}
.tab li:nth-child(1){display: block;}
.tab .news img{height: 420px;}
.tab .video img{height: 313px;}
.tab .photo img{height: 280px;}



}


/* --컴퓨터 컴퓨터----PC----컴퓨터-컴퓨터-컴퓨터-------------- */
@media screen and (min-width: 522px) {
  body {
    font-size: 18px;
  }
  #sect2 h2 {
    font-size: 3rem; 
    padding-top: 190px;
  }
  
  #sect2 ul.info{
    display: flex;
    max-width: 1020px; 
    width: 100%;
    height: 220px;
  align-items: center;}
  
  #sect2 ul.info li{
    position: relative;
    flex: 1;
  }
  
  #sect2 ul.info li a{height: 220px;}
  
  #sect2 ul.info li a .figWrap{
   display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  }
  
  
  #sect3 .left{width: 500px;
  position: absolute;
  left: 50%;
  transform: translateX(-140%);
  top: 183px;
 }
  
  #sect3 .right{
    position: absolute;
    left: 50%;
    top: 300px;
    margin-left: 200px;
    width: 420px;
    height: 430px;
  
  }
  
  #sect3 .right figure img{width: 100%;}
  #sect3 .right .desc{width: 338px;
  margin: auto;}
  
  #sect3 .right figure{position: relative;
  left: -89px;
  top: -84px;}
  /* 포지션 relative로 하면 그 자리는 가지고 있으면서 필요한 요소만 left top으로 움직여줄수 있다 */
  
  #sect4 .tabmenu figure img{width: 150px;
  padding: 1rem 0;}
  #sect4 .tabmenu{
    max-width: 1400px;
   
  width: 100%;
  position: absolute;
  bottom:0px;
  left: 50%;

  transform: translateX(-50%);
}

#sect4 .tabmenu ul li{
  width: 33.3333%;
   position: absolute;
   bottom: -70px;
  transition: .35s;
}

#sect4 .tabmenu ul{position: relative;}
 
#sect4 .tabmenu ul li:nth-child(1){left: 0;}
#sect4 .tabmenu ul li:nth-child(2){left: 33.3333%;}
#sect4 .tabmenu ul li:nth-child(3){left: 66.6666%;}

span.plus{padding-bottom: 3rem;}

#sect4 .tabmenu h3{padding: 2rem 0;}
#sect4 .tabmenu ul li:hover{bottom: 0;}
#sect4 .tabmenu ul li figure{display: none;} 
#sect4 .tabmenu ul li:hover figure{display: block;}


#sect5 ul.tabmenu li{width: 25%;}
#sect5 h2{padding-top: 235px ;}
#sect5 .inner{margin-top: 30px;}

#sect5 .tab ul{display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;}

#sect5 .tab ul img{width: 100%;}

#sect5 .tabcontents ul.review li,
#sect5 .tabcontents ul.photo li,
#sect5 .tabcontents ul.news li{
  width: 23%;
}

#sect5 .tabcontents ul.video li{
  width: 31%;
}
.tabcontents .review figure{height: 206px;}


.tabcontents {padding: 2rem;}
.tabcontents .review li:nth-child(4) figure{
  background-position: center;
}

.photo img, .news img{height: 100%;}


}

@media screen and (min-width: 1020px) {
  
  
}