@charset "utf-8";

/***************************
  Contents
***************************/

#wrapper {
    position:relative; width:100%; height:100%;
    background-size: cover;
    background-attachment: fixed;
    background-position:center center;
    background-image: url();
    background-color:#fff;
font-smooth: always; -webkit-font-smoothing: antialiased;}



/* Backgrounds will cover all the section
* --------------------------------------- */

#section1,
#section2,
#section3,
#section4,
#section5,
#section6 {
	background-size: cover;
	background-attachment: fixed;
	background-position:center center;
}

/* Defining each sectino background and styles
* --------------------------------------- */
section { position: relative; min-width:100%; overflow: hidden}
section .cont { position: relative; width: 1400px; margin:0 auto; }

/* 폰트 */
.section .box .txt { font-size:1rem; color:#fff; text-align:center; letter-spacing:-1px; font-family: 'Play', sans-serif; }
.section .box .txt.tt { font-size:3rem; line-height:3rem; margin-bottom:20px; }
.section .box .txt.tt b { font-size:3.6rem; color:#77BBFF; }

/* 배경 */
#section2, #section3, #section4, #section5 {
  position:relative; width:100%; height:100%;
  background-size: cover;
  background-position:center center;
}

#section2 { background-image: url(../img/section2_bg.jpg); }
#section3 { background-color: #f5f8fa; }
#section4 { background-color: #f8f9f5; }
#section5 { background-image: url(../img/section5_bg.jpg); }

/* 배경위 명암 */
/*.sect01_bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.4); border:1px solid red }
.sect02_bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.6); animation: sect02_bg 0.5s 0.3s both; display: none; }
.sect03_bg { position: absolute; width: 100%; height: 100%; right: 0; top: 0; background-color: rgba(0,0,0,0.6); animation: sect03_bg 0.5s 0.3s both; display: none; }
.sect04_bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.4); animation: sect04_bg 0.5s 0.3s both; display: none; }
.sect05_bg { position: absolute; width: 100%; height: 100%; right: 0; top: 0; background-color: rgba(0,0,0,0.4); animation: sect05_bg 0.5s 0.3s both; display: none; }
*/

/* 섹션1 */


#section2 .box .tt b { color: #E9702B; }
#section3 .box .tt b { color: #007AF4; }
#section4 .box .tt b { color: #FF5B5B; }

.section .box02, .section .box03, .section .box04 {position: absolute; width: calc(100% - 200px); height: 100%; margin-left: 200px; color: #fff; }
.section .box { position: absolute; width: 100%; height: 100%; max-width: 1920px; max-height: 1080px; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; }

/* 섹션2 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;1,100&family=Nanum+Myeongjo:wght@700&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Poiret+One&display=swap');

#section2 .txt { position:absolute; display:inline-block; }
#section2 .tt {
  top:15%; left:0% ; font-family: 'Montserrat', sans-serif; animation: sect02_tt 1.6s 0.5s both;  display: none;
  font-size: 25px; color: #4e4238; letter-spacing: -.5px; font-weight: 100;
  bordre: 1px solid red;
}
#section2 .tt .line {
  position: relative; display:inline-block; width: 150px; height: 1px; margin-right: 20px; border-top:1px solid rgba(18, 39, 63, 0.5);
  animation: sect02_line 3s 1.6s both; vertical-align: middle;
}

#section2 .box .wrap-text { width: 500px; text-align:center; left: 50%; transform: translateX(-50%); bottom: 7%;  }
#section2 .box .wrap-text .txt1 { animation: sect02_txt1 1.0s ease-out 1s both; display: none }
#section2 .box .wrap-text .txt2 { animation: sect02_txt2 1.0s ease-out 1.3s both; display: none; margin-top:12px }
#section2 .box .wrap-text .txt3 { animation: sect02_txt3 1.0s ease-out 1.8s both; display: none; margin-top: 20px;}
#section2 .box .wrap-text .txt4 { animation: sect02_txt4 1.0s ease-out 2.0s both; display: none; margin-top: 50px; }


/* 섹션2 keyframes */
@keyframes sect02_bg { from { left: -100%; } to {  } }
@keyframes sect02_line { from { width: 0px; } to {  } }
@keyframes sect02_tt { from { transform: translateX(100px); opacity: 0; } to {  } }
@keyframes sect02_txt1 { from { transform: translateY(100px); opacity: 0; } to {  } }
@keyframes sect02_txt2 { from { transform: translateY(100px); opacity: 0; } to {  } }
@keyframes sect02_txt3 { from { transform: translateY(50px); opacity: 0; } to {  } }
@keyframes sect02_txt4 { from { transform: translateY(50px); opacity: 0; } to {  } }



/* 섹션3 */
#section3 .txt { position:absolute; display: inline-block; }

#section3 .box .tt { top:15%; left:5%; animation: sect03_tt 1s 0.7s both;  display: none; }
#section3 .txt.txt1 { top: 32%; left: 10%; animation: sect03_txt1 1s ease-out 0.7s both; display: none;  }
#section3 .txt.txt2 { bottom: 10%; right: 10%;  animation: sect03_txt2 1s ease-out 0.9s both; display: none;}

/* 섹션3 keyframes */
@keyframes sect03_bg { from { right: -100%; } to {  } }
@keyframes sect03_tt { from { transform: translateX(-100px); opacity: 0; } to {  } }
@keyframes sect03_txt1 { from { transform: translateX(100px); opacity: 0; } to {  } }
@keyframes sect03_txt2 { from { transform: translateX(-100px); opacity: 0; } to {  } }



/* 섹션4 */
#section4 .txt { position:absolute; display: inline-block; }
#section4 .box .tt { top: 15%; right: 5%; animation: sect04_tt 1s 0.7s both;  display: none;}
#section4 .txt.txt1 { top: 25%; left: 7%; animation: sect04_txt1 .7s ease-out 0.7s both; display: none;}
#section4 .txt.txt2 { bottom: 13%; right: 10%; animation: sect04_txt2 .7s ease-out 0.9s both; display: none;}


/* 섹션4 keyframes */
@keyframes sect04_bg { from { left: -100%; } to {  } }
@keyframes sect04_tt { from { transform: translateY(-100px); opacity: 0; } to {  } }
@keyframes sect04_txt1 { from { transform: translateX(-100px); opacity: 0; } to {  } }
@keyframes sect04_txt2 { from { transform: translateX(100px); opacity: 0; } to {  } }






@media all and ( max-width: 1100px ) {
}







/* 동영상 */
#MainMovie { position: relative; width: 1400px; margin: 0 auto; padding:70px 5px; }
#MainMovie .title { position: relative; width: 1400px; margin: 0 auto; font-size:20px; padding-bottom: 5px; font-family: Noto Sans KR; }