@charset "utf-8";


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

/* 헤더 */
#header { position: fixed; left:0; z-index: 3; height: 70px; width:100%; background:rgba(40,17,43,0.8); 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: 6;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:last-child > div a {  color:#c9ff7b; letter-spacing: 1.5px; }
.menucontainer .container .gap .wrap ul li:last-child > div a 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; }

/* ---------------------------------------------------------------------------------------------------------------------------------- */
/* 섹션1 */
#main { width:100%; }
#main #section1 { width:100%; }
#main #section1 > div { position: relative; width:100%; height: 100%;  }
#main #section1 > div .content  { position: absolute; }
#main #section1 > div .content > div { position: relative; }
#main #section1 > div .content > div h2 { font-size:24px; color:#c9ff7b; }

#main #section1 > div .content > div .left { float: left; padding-top:210px; padding-right:50px; }
#main #section1 > div .content > div .left > div { text-align: center; }
#main #section1 > div .content > div .left > div h2 { font-size:24px; font-family: 'yun'; font-weight: 600; padding-bottom: 10px; }
#main #section1 > div .content > div .left > div p { color:#fff; line-height: 120%; }

#main #section1 > div .content > div .imgage { float: left;position: relative;   }
#main #section1 > div .content > div .imgage > div { text-align: center;position: relative; overflow: hidden; z-index: 2;}
#main #section1 > div .content > div .imgage > div h2 { font-size: 50px; letter-spacing: 2px;  }
#main #section1 > div .content > div .imgage > div .backirum {position: absolute; width: 100%; top:535px;  }
#main #section1 > div .content > div .imgage > div .backirum h2 {  color:#28112b;}
#main #section1 > div .content > div .imgage > div  img {  width: 416px; }
#main #section1 > div .content > div .imgage > .frontirum { position: absolute; width: 100%; top:535px; z-index: 1;  }
#main #section1 > div .content > div .imgage > .frontirum h2 { color:#c9ff7b; }

#main #section1 > div .content > div .right { float: left; }
#main #section1 > div .content > div .right > div { text-align: left; padding-left:50px;  }
#main #section1 > div .content > div .right > div .irum_age {  padding-top:80px; }
#main #section1 > div .content > div .right > div .irum_age > div { width:auto; }
#main #section1 > div .content > div .right > div .irum_age > div h3 {  padding:2px 0; color:#c9ff7b; font-size: 18px; font-family: 'yun'; letter-spacing: 1px; }
#main #section1 > div .content > div .right > div .irum_age > div h3:nth-child(2) { color:#c9ff7b; font-size: 14px; font-family: 'yun'; letter-spacing: 2px; }
#main #section1 > div .content > div .right > div .irum_age > div span {  padding:3px 0; display: block; color:#c9ff7b; font-size:16px; font-weight: 500; }
#main #section1 > div .content > div .right > div .irum_age > div span small { padding-left: 5px ; color:#fff; font-size:13px;font-weight: 500; font-family: 'yun';  }

#main #section1 > div .content > div .right > div .Abilitywrap { padding-top:80px;  }
#main #section1 > div .content > div .right > div .Abilitywrap > div { position: relative; }
#main #section1 > div .content > div .right > div .Abilitywrap > div h2 { font-size: 24px; }
#main #section1 > div .content > div .right > div .Abilitywrap > div ul { padding-top: 10px; }
#main #section1 > div .content > div .right > div .Abilitywrap > div ul li { padding: 8px 0; }
#main #section1 > div .content > div .right > div .Abilitywrap > div ul li > div { position: relative; width:100%; text-align: left; }
#main #section1 > div .content > div .right > div .Abilitywrap > div ul li > div h4 { color:#fff; font-size:14px; width:70px;  display: inline-block; }
#main #section1 > div .content > div .right > div .Abilitywrap > div ul li > div span { position: relative; top:-2.5px; width:100px;  height: 5px; background-color: #3b3b3b; display: inline-block; }
#main #section1 > div .content > div .right > div .Abilitywrap > div ul li > div span i { width:100%; height: 100%; background-color: #fff; display: block; }
#main #section1 > div .content > div .right > div .Abilitywrap > div ul li > div span i.Photoshop_i { width:0%; }
#main #section1 > div .content > div .right > div .Abilitywrap > div ul li > div span i.Illustration_i { width:0%; }
#main #section1 > div .content > div .right > div .Abilitywrap > div ul li > div span i.Premiere_i { width:0%; }
#main #section1 > div .content > div .right > div .Abilitywrap > div ul li > div span i.HTML_i { width:0%; }
#main #section1 > div .content > div .right > div .Abilitywrap > div ul li > div span i.CSS_i { width:0%; }
#main #section1 > div .content > div .right > div .Abilitywrap > div ul li > div span i.JSJQuery_i { width:0%; }

/* 섹셕2 */
#main #section2 { width:100%; position: relative; }
#main #section2 > div { width:100%; height: 100%; }
#main #section2 > div .section2_title { display: none; position: absolute; width:auto; }
#main #section2 > div .section2_title h3 { font-size: 50px; color:#fff; font-family: 'yun'; }
#main #section2 > div .clock_wrap { display: none; position: absolute; top:0; left:0; }
#main #section2 > div .clock_wrap > div { position: relative;}
#main #section2 > div .clock_wrap > div ul {position: relative; width:600px; height: 600px; }
#main #section2 > div .clock_wrap > div ul li { position: absolute; top:0; left:0; width:100%; }
#main #section2 > div .clock_wrap > div ul li img { width:100%; }
#main #section2 > div .clock_wrap > div ul li.clock_backBg { z-index: 1; }
#main #section2 > div .clock_wrap > div ul li.clock_cho { z-index: 2; }
#main #section2 > div .clock_wrap > div ul li.clock_bun { z-index: 3; }
#main #section2 > div .clock_wrap > div ul li.clock_si { z-index: 4; }
#main #section2 > div .clock_wrap > div ul li.clock_jum { z-index: 5; }