@charset "utf-8";


#wrap {width:100%; overflow:hidden; position: relative;   }

/* 헤더 */
#header { position: fixed; left:0; z-index: 3; height: 70px; width:100%; background-color:transparent; border-bottom:1px solid rgba(165,207,100,0.5); box-sizing: border-box; }
#header .container { width:100%; }
#header .container .gap { width:100%; }
#header .container .gap .wrap { width:100%; }
#header .container .gap .wrap .Mainheader { width:100%; }
#header .container .gap .wrap .Mainheader > div { width:100%; }
#header .container .gap .wrap .Mainheader > div .homeBtnwrap {position: absolute;top:0; left:15px; }
#header .container .gap .wrap .Mainheader > div .homeBtnwrap a { line-height:70px;display: block; font-size:24px; color:#c9ff7b; }
#header .container .gap .wrap .Mainheader > div .profilewrap { text-align: center; }
#header .container .gap .wrap .Mainheader > div .profilewrap a {line-height:70px; font-size:24px; color:#c9ff7b; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon {  position: absolute; right:15px; top:20px;width:30px; height:30px;  }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a { position: relative; width:100%; height: 100%; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a i { transition:all 0.6s; position: absolute;  background:#c9ff7b; width:8px; height: 8px; margin: 1px;  display: inline-block; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a i.box1 { top:0; left:0; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a i.box2 { top:0px; left:10px; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a i.box3 { top:0; left:20px; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a i.box4 { top:10px; left:0; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a i.box5 { top:10px; left:10px; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a i.box6 { top:10px; left:20px; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a i.box7 { top:20px; left:0; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a i.box8 { top:20px; left:10px; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a i.box9 { top:20px; left:20px; }

/* -클릭 */
#header .container .gap .wrap .Mainheader > div .menuBoxicon a.addMenuClick i.box1 { opacity:0; left:80px;}
#header .container .gap .wrap .Mainheader > div .menuBoxicon a.addMenuClick i.box2 {width:60%; height: 4px; transform:rotate(-45deg); top:5px; left:-7px;}
#header .container .gap .wrap .Mainheader > div .menuBoxicon a.addMenuClick i.box3 { opacity:0; left:100px;}
#header .container .gap .wrap .Mainheader > div .menuBoxicon a.addMenuClick i.box4 { opacity:0; left:120px;}
#header .container .gap .wrap .Mainheader > div .menuBoxicon a.addMenuClick i.box5 { top:10px; left:0;width:100%; height: 4px; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a.addMenuClick i.box6 { opacity:0;left:110px; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a.addMenuClick i.box7 { opacity:0;left:160px; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a.addMenuClick i.box8 { width:60%; height: 4px; transform:rotate(45deg); top:15px; left:-7px; }
#header .container .gap .wrap .Mainheader > div .menuBoxicon a.addMenuClick i.box9 { opacity:0;left:120px; }

/* 메뉴 */
.menucontainer {position: fixed; z-index: 5;top: 70px; right:100%; width:100%; height:100%; background:#28112b; box-sizing: border-box; border-left:1px solid #c9ff7b;}
.menucontainer .container { position: relative;   width:100%; height:100%; }
.menucontainer .container .gap {  }
.menucontainer .container .gap .wrap { position: relative;  margin:50px 15px; }
.menucontainer .container .gap .wrap ul { position: absolute; z-index: 2; left:0; top:0;  }
.menucontainer .container .gap .wrap ul li { margin:20px 0; }
.menucontainer .container .gap .wrap ul li > div {  }
.menucontainer .container .gap .wrap ul li > div a { font-size:24px; color: rgba(165,207,100,0.5); }
.menucontainer .container .gap .wrap ul li > div a:hover { color:#c9ff7b; }
.menucontainer .container .gap .wrap ul li > div a.addPick {  color:#c9ff7b; letter-spacing: 1.5px; }
.menucontainer .container .gap .wrap ul li > div a.addPick i {display: block; left:20%; width:100%; height: 2px; background:#c9ff7b;}
.menucontainer .container .gap .wrap ul li > div a i { transition: all .6s; position: relative; left:0; display: block; width:100%; height: 2px; background:transparent; }
.menucontainer .container .gap .wrap ul li > div a:hover i { display: block; left:20%; width:100%; height: 2px; background:#c9ff7b; }

/* section */
.section {position: relative; width:100%; height: 100%; overflow: hidden; }
.section > div .bg0 { transform:scale(2); position: absolute; top:0; left:0;  width:100%; height: 100%; transition: all 8s; }
.section > div { position: relative; width: 100%; height: 100%; }
.section > div .content { position: relative; width: 100%; height: 100%;}
.section > div .content .image {position: absolute; top:50%;  left:50%; width:85.7648151%;   margin-left: -42.8824076%; margin-top:-20.9088704%;  }
.section > div .content .image img { width: 100%; }
.section > div .titleBtn { position: absolute; width: 100%; display: block;  text-align: center;}
.section > div .content .titleBtn > div {  display: inline-block; }
.section > div .content .titleBtn > div strong {font-family: 'yun'; font-weight: 500; font-size: 20px; color:#fff; }
.section > div .content .titleBtn > div h2 { padding:5px 0; font-size: 100px; color: #fff; }
.section > div .content .titleBtn > div small { font-size: 20px; color:#fff; font-family: 'yun'; font-weight: 500;}
.section > div .content .titleBtn > div span.plusIcon {  display: block; padding: 10px 0;}
.section > div .content .titleBtn > div span.plusIcon img { display: inline-block; width:16px; }


.section > div .content .titleBtn > div .moreBtn { padding-top:20px; }
.section > div .content .titleBtn > div .moreBtn span { font-size: 20px; color:#fff; padding:8px 35px; border: 1px solid #fff; border-radius: 8px; transition: all .6s; }
.section > div .content .titleBtn > div .moreBtn:hover span { color:#000; background: #fff; }


#section1 > div .bg0 {  background:url(../img/section1Bg.png) no-repeat 50% 50%; background-size: cover; }
#section2 > div .bg0 {  background:url(../img/section2Bg.png) no-repeat 50% 50%; background-size: cover; }
#section3 > div .bg0 {  background:url(../img/section3Bg.png) no-repeat 50% 50%; background-size: cover; }
#section4 > div .bg0 {  background:url(../img/section4Bg.png) no-repeat 50% 50%; background-size: cover; }

.pageBox{ position: absolute; z-index: 2; top:150%; opacity: 0; height: 250px; margin-top: -125px;  width:100%; display: block; background-color:rgba(0,0,0,.8); }
.pageBox > div  { position: relative; width: 100%;  text-align: center; }
.pageBox > div .downBtn_wrpa { width:100%; }
.pageBox > div .downBtn_wrpa a.downBtn { width:100%; padding: 20px 0; }
/* .pageBox > div .downBtn_wrpa a.downBtn:hover { background-color: rgba(255,255,255,.3); width:100%; padding: 20px 0; } */
.pageBox > div .downBtn_wrpa a.downBtn img { display: inline-block; width:20px; }
.pageBox > div  h2 { font-size: 26px; color:#fff; padding: 20px 0;  }
.pageBox > div  h3 { font-size: 14px; color:#fff;  padding-bottom: 30px; }
.pageBox > div  span:last-child { display: inline-block; padding: 3px;}
#section2 .pageBox > div  span { display: inline-block; padding: 0px 10px;}
.pageBox > div  a.mainPageGo { transition: all .6s; display: inline-block; font-size: 18px; color:#fff; padding: 10px 35px; border:1px solid #fff; background-color: #000;}
.pageBox > div  a.mainPageGo:hover {  color:#000; padding: 10px 35px; border:1px solid #fff; background-color: #fff;}