@charset "utf-8";


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

/* 헤더 */
#header { position: fixed; left:0; z-index: 4; background-color:rgba(40,17,43,0.8);  height: 70px; width:100%;  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; }

/* otherMenu */
.otherMenu { position: fixed; z-index: 4; left:10px; top:0%; }
.otherMenu ul { display: block; height: auto; }
.otherMenu ul li { padding: 15px 0; }
.otherMenu ul li a   { transition: all .3s; position: relative; font-size:24px; line-height: 120%; color:#c9ff7b; opacity: .4; }
.otherMenu ul li a i { transition: all .3s; position: relative; top:-6px; left:5px; width:10px; height: 2px; background: #c9ff7b; display: none; }
.otherMenu ul li a:hover { opacity: 1; text-shadow: 2px 2px 0px rgba(0,0,0, .8); }
.otherMenu ul li a:hover i { box-shadow: 2px 2px 0px rgba(0,0,0, .8); position: relative; top:-6px; left:5px; width:10px; height: 2px; background: #c9ff7b; display: inline-block; }
.otherMenu ul li a.addOtherMenu { opacity: 1; text-shadow: 2px 2px 0 rgba(0,0,0, .8); }
.otherMenu ul li a.addOtherMenu i {box-shadow: 2px 2px 0px rgba(0,0,0, .8); position: relative; top:-6px; left:5px; width:10px; height: 2px; background: #c9ff7b; display: inline-block; }


/* section1 */

#section1 { position: relative; width: 100%; } 
#section1 > div { position: relative; top:0; left: 120px; height: 100%; }
#section1 > div ul { position: absolute; }
#section1 > div ul  li {  float: left; margin:0 65px;  }
#section1 > div ul  li  > div { position: relative; width:100%; }
#section1 > div ul  li  > div a { position: relative; width:100%;  }
#section1 > div ul  li  > div a span { position: absolute;  bottom:100px; right:-83px; width:100%; text-align: center; font-size: 70px; }
#section1 > div ul  li  > div a span.back  {  color:#c9ff7b; }
#section1 > div ul  li  > div a span.front { z-index: 3 ; color:#28112b; transition: all .3s;}
#section1 > div ul  li  > div a:hover span.front {  color:#c9ff7b}
#section1 > div ul  li  > div a .image { position: relative; overflow: hidden; width:260px; }
#section1 > div ul  li  > div a .image img { position: relative; z-index: 2; width:100%; }
#section1 > div ul  li  > div a .image img:nth-child(2) { display: none; position: absolute; top:0; left:0; z-index: 2; width:100%; }
#section1 > div ul  li  > div a  i { transition: all .3s; position: absolute; z-index: 1; top:-20px; left:-20px; display: block; width:100%; height:100%; background-color: #c9ff7b; }
#section1 > div ul  li  > div a:hover  i {  background-color: #475336; }




/* section2 */
#section2 { width:100%; position: relative; height: 100%; }
#section2 > div { width:100%; right:0; top:0; margin-left: 120px;  position: relative; height: 100%;  }
#section2 > div .section2_content {  display: block; height: 100%; width:100%; }
#section2 > div .section2_content > div { position: relative; top:23%;  max-width: 1400px; margin: 0 auto;   }
#section2 > div .section2_content > div ul {float: left; width:68%;  }
#section2 > div .section2_content > div ul li { text-align: center; position: relative; float: left; margin:10px; }
#section2 > div .section2_content > div ul li h2 { font-size: 90px; color:#c9ff7b; position: absolute; top:-80px; left:10px; }
#section2 > div .section2_content > div ul li img { width: 100%; }
#section2 > div .section2_content > div ul li.drawing01  { width: 63.0252101%; }
#section2 > div .section2_content > div ul li.drawing02  { width: 28.3613445%; }
#section2 > div .section2_content > div ul li.drawing03  {width: 73.5294118%;   padding-top:2.1008403%; }
#section2 > div .section2_content > div ul li.drawing03 img {margin-left: 28%;  }
#section2 > div .section2_content > div .drawing04 {float: left; width:32%;  }
#section2 > div .section2_content > div .drawing04 img { width:100%; }

.section2_content2 {display: none;}
.section2_content2 > div { width:100%; text-align: center; }
.section2_content2 > div h2 { font-size: 30px; color:#c9ff7b; }
.section2_content2 > div ul { margin:0 20px; }
.section2_content2 > div ul li { width:100%; padding:20px 0; }
#section2 > div .section2_content2 > div ul li.drawing01  { width:100%; margin:0 auto;}
#section2 > div .section2_content2 > div ul li.drawing02  { width:60%; margin:0 auto;}
#section2 > div .section2_content2 > div ul li.drawing03  { width:60%; margin:0 auto;}
#section2 > div .section2_content2 > div ul li.drawing04  { width:100%; margin:0 auto;}
.section2_content2 > div ul li img { width:100%; }


/* section3 */

#section3 { width:100%; position: relative; }
#section3 > div { position: absolute; right:0; height: 100%;; }
#section3 > div .contentUi { width:100%; position: relative; height: 100%; }
#section3 > div .contentUi > div { position: absolute; top:16.2337662%; width:100%; text-align: center; }
#section3 > div .contentUi > div .row1 { display: inline-block; padding-bottom: 50px;width:100%; }
#section3 > div .contentUi > div .row1 ul { width:100%;text-align: center; }
#section3 > div .contentUi > div .row1 ul li { position: relative; display: inline-block;   width:29.535865%;}
/* #section3 > div .contentUi > div .row1 ul li:hover::after { content: 'click'; position: absolute; top:50%;left:0; width:100%; text-align: center; font-size: 30px; color:#c9ff7b;} */
#section3 > div .contentUi > div .row1 ul li > div {margin:0 10px; }
#section3 > div .contentUi > div .row1 ul li > div a { width:100%; }
#section3 > div .contentUi > div .row1 ul li > div a h2 { font-size: 50px; color:#c9ff7b; padding-bottom: 15px;  }
#section3 > div .contentUi > div .row1 ul li > div a .row1-img { width:100%;overflow: hidden; }
#section3 > div .contentUi > div .row1 ul li > div a .row1-img img { width:100%; transition: all .3s;opacity: .5; }
#section3 > div .contentUi > div .row1 ul li > div a:hover .row1-img img { transform: scale(1.1); opacity: 1; }

#section3 > div .contentUi > div .row2 { display: inline-block; }
#section3 > div .contentUi > div .row2 > div { text-align: center;  }
#section3 > div .contentUi > div .row2 > div h2 {  font-size: 50px; color:#c9ff7b; padding-bottom: 15px; }
#section3 > div .contentUi > div .row2 > div ul { width:100%; }
#section3 > div .contentUi > div .row2 > div ul li {float: left; display: block;  width:31.9268636%;}
#section3 > div .contentUi > div .row2 > div ul li a { margin:0 10px; }
#section3 > div .contentUi > div .row2 > div ul li a img { width:100%; transition: all .3s;opacity: .5; z-index: 1;  position: relative; }
#section3 > div .contentUi > div .row2 > div ul li a:hover img { transform: scale(1.1); opacity: 1; position: relative; z-index: 2; }


/* section1 popup */

.section1_PopUp { position: fixed;cursor: pointer; z-index: 6; top:0; left:0; width:100%;background: #28112b;  height: 100%; overflow-y: scroll;}
.section1_PopUp01 { display: none; }
.section1_PopUp02 { display: none; }
.section1_PopUp03 { display: none; }
.section1_PopUp > div { cursor: pointer; position: relative; padding: 50px 0; width:100%;  text-align: center; }
.section1_PopUp > div h2 { cursor: default; font-size: 60px; color:#c9ff7b; padding-bottom:60px; padding-top:30px; }
.section1_PopUp > div .closewrap {display: block; position: fixed; z-index: 6; top:30px; right:60px;  }
.section1_PopUp > div .closewrap a { position: relative; left:0; top:0; display: block; font-size:14px; color:#c9ff7b;  }
.section1_PopUp > div .closewrap a strong { margin-left:-80px ; display: block; font-size:20px; color:#c9ff7b; letter-spacing: 2px; }
.section1_PopUp > div .closewrap a i { position: absolute; top:50%; margin-top:-1.5px; left:50%; margin-left:-15px; display: block; width:20px; height: 2px; background-color: #c9ff7b; }
.section1_PopUp > div .closewrap a i:nth-child(2) { transform: rotate(45deg);  }
.section1_PopUp > div .closewrap a i:last-child {transform: rotate(-45deg); }
.section1_PopUp > div .popupContent {cursor: default; width:30%; margin: 0 auto; }
.section1_PopUp > div .popupContent > div {width:100%; }
.section1_PopUp > div .popupContent > div img {width:100%; }

.section1_PopUp01 > div .popupContent {width:50%; margin: 0 auto; }

.section1_PopUp02 > div .popupContent {width:40%; margin: 0 auto; }
.section1_PopUp02 > div .popupContent > div  { position: relative;  }
.section1_PopUp02 > div .popupContent > div .eventPopup01wrap { position: absolute; top:0; left:0; }
.section1_PopUp02 > div .popupContent > div .eventPopup02wrap { position: absolute; top:0; left:0; display: none; }
.section1_PopUp02 > div .PagePopUpBnt {position: relative; display: block; width:100%; text-align: center; padding-bottom: 30px;}
.section1_PopUp02 > div .PagePopUpBnt.addevent {background:rgba(40,17,43,.5);position: fixed; z-index: 5; top:0;  display: block; width:100%; text-align: center; padding-bottom: 15px;}
.section1_PopUp02 > div .PagePopUpBnt.addevent ul { display: inline-block; padding: 15px 0; }
.section1_PopUp02 > div .PagePopUpBnt ul { display: inline-block; }
.section1_PopUp02 > div .PagePopUpBnt ul li { float: left;  margin: 0 20px; display: block; }
.section1_PopUp02 > div .PagePopUpBnt ul li a { width:30px; height: 30px;display: block; border:2px solid #c9ff7b; border-radius: 50%;}
.section1_PopUp02 > div .PagePopUpBnt ul li a i { display: block; margin-top: 2.5px; margin-left:2.5px; width:25px; height: 25px;  border-radius: 50%;  }
.section1_PopUp02 > div .PagePopUpBnt ul li a.addevent i { display: block; margin-top: 2.5px; margin-left:2.5px; width:25px; height: 25px;  border-radius: 50%; background-color: #c9ff7b; }

/* section3 popup */

.section3_popup01 { display: none; }
.section3_popup02 { display: none; }
.section3_popup03 { display: none; }
.section3_popup04 { display: none; }
.section3_popup05 { display: none; }

.section3_popup { position: fixed;cursor: pointer; z-index: 6; top:0; left:0; width:100%;background: #28112b;  height: 100%; overflow-y: scroll; } 
.section3_popup > div { position: relative; width:100%;text-align: center; } 
.section3_popup > div .closewrap {  display: block; position: fixed; z-index: 6; top:30px; right:60px;  } 
.section3_popup > div .closewrap .closeBtn01 { position: relative; left:0; top:0; display: block; font-size:14px; color:#c9ff7b;  } 
.section3_popup > div .closewrap .closeBtn01 strong {  margin-left:-80px ; display: block; font-size:20px; color:#c9ff7b; letter-spacing: 2px; } 
.section3_popup > div .closewrap .closeBtn01 i {  position: absolute; top:50%; margin-top:-1.5px; left:50%; margin-left:-15px; display: block; width:20px; height: 2px; background-color: #c9ff7b; } 
.section3_popup > div .closewrap .closeBtn01 i:nth-child(2) {  transform: rotate(45deg);  } 
.section3_popup > div .closewrap .closeBtn01 i:nth-child(3) { transform: rotate(-45deg);   } 
.section3_popup > div h2 { cursor: default; font-size: 60px; color:#c9ff7b; padding-bottom:60px; padding-top:30px;   } 

.section3_popup > div .popupContent { cursor: default;  width:60%; margin: 0 auto;}
.section3_popup > div .popupContent > div { width:100%; }
.section3_popup > div .popupContent > div img { width:100%; }