@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Righteous);
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap');
/* font-family: 'Chelsea Market', cursive; */
/* font-family: 'Black Han Sans', sans-serif; */

html { overflow:hidden;}
body { font:12px/1.6 arial; color:#000; }

h1 { position:fixed; top:1px; left: 50px; z-index:99;}
h1 img { width:220px; 
  animation:kim 4s  infinite}
			@keyframes kim {  
				0%{ transform:rotateY(0deg) }
				50% { transform:rotateY(360deg)}
				100%{ transform:rotateY(0deg) }  
			}



.loader {
    background-color: #000;
    position: absolute; width:100%; height:100%; z-index:999999999;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  
  .loader .bar {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-color: #999;
    width: 100px;
    height: 10px;
    border: 2px solid #999;
    border-radius: 2px;
  }
  
  .loader .bar .loaded {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-color: yellow;
    height: 100%;
    max-width: 100%;
    width: 0%;
    border-radius: 2px;
    -webkit-transition: width 5s linear;
    transition: width 5s linear;
  }
  
  .loader .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    height: 200px;
    -webkit-animation: bar 5s linear infinite;
            animation: bar 5s linear infinite;
    -webkit-transition: height 1s ease-in;
    transition: height 1s ease-in;
  }
  
  .loader .spinner:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border-radius: 100px;
    background-color: yellow;
  }
  
  @-webkit-keyframes bar {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
              transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
              transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  
  @keyframes bar {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
              transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
              transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  /*# sourceMappingURL=intro.css.map */





/* 고탑메뉴 */
.gotop { position: fixed; bottom: 10px; right: 80px;
    font-size: 40px; color: rgb(99, 76, 247); z-index: 99998;
    opacity: 0; transition: all 0.5s; 
    animation:up 0.5s  infinite alternate linear
}   

@keyframes up {  
    0%{ transform: translateY(0) }
    100%{ transform:translateY(-20px)}  
}
 
.gotop.on {opacity: 1;}

.popup {
    position:fixed;
    left:100px;
    top:100px; 
    z-index:99999999;
    background-image: url(../img/pop1.jpeg);
    padding:20px;
    display: none;
    width:400px;
    height: 400px;
}
.popup .popself { color:#fff; text-align: center;  }
.popup .popself .popselfd { font-size: 35px; font-family: 'Black Han Sans', sans-serif; padding-top: 20px; -webkit-text-stroke: 1px #000
    
}
.popup .popself > p { font-size: 20px; color: #fff; font-weight: bold;
    padding:30px 10px; display: inline-block; -webkit-text-stroke: 1px #000
}

.popup .che { margin-top:6px; position:absolute; bottom: 10px; left: 10px;
        right:10px; border-top:1px solid #000 ;
             } 
.popup .che a { position:absolute; top:0; right:0; border: 1px solid #fff;
    border-radius: 5px;
    background: #fff; padding: 0px 5px;
}
.che input,label { vertical-align: middle;}
#header .open {
    position: fixed; top:30px; right:50px;
    z-index: 999;
    width: 50px; height: 50px;
    border-radius: 50%;
    background-color: rgb(99, 76, 247);
    font-size:25px; color: #fff;
    text-align: center;
    line-height: 50px;
    cursor: pointer;}
#header .open .bar {
    height:4px; background-color: #fff;
    border-radius: 2px;
    position:absolute;
    transition:all 0.5s; }

#header .open .bar1 { top:12px; width:15px; left:10px }
#header .open .bar2 { top:50%; margin-top:-2px; width:30px; left:10px }
#header .open .bar3 { bottom:12px; width:20px; right: 20px; }

#header .open.on .bar1 { transform: translateX(4px) rotate(45deg);transform-origin:0% 50%; }
#header .open.on .bar2 { transform: rotate(-45deg); transform-origin:50% 50%; }
#header .open.on .bar3 { transform: translateX(6px) rotate(45deg);transform-origin:100% 50%;
 width:15px;}


#header .openlist { position:fixed; top:0; right:0;
    width:0%; overflow: hidden; height:100%;
    background-color: darkslateblue; z-index:998;
    transition:all 0.5s; }
#header .open.on + .openlist{ width:100%; }
#header .openlist ul {
    position:absolute;
    top:50%; transform: translateY(-50%);
    width: 100%; left:0;
    text-align: center;
    color: #fff;
    line-height: 2;
    font-size: 40px;
    opacity: 0;
    transition:all 0.5s; font-family: 'Chelsea Market', cursive;
}
#header .open.on + .openlist ul {
    opacity: 1;
}

#header #menu { position:fixed; top:50%; transform:translateY(-50%); left:50px; z-index:99 }
#header #menu li {  margin:10px 0 ; font-family: 'Chelsea Market', cursive; }
#header #menu li a { display:block; height:20px;  width:20px;
    border-radius:50%; background-color:#adaba9; 
    position:relative 
}
#header #menu li.on a { background-color:#fe4657; transform:scale(1.2) ;box-shadow: 0px 0px 12px -2px rgba(255,71,86,0.9); }
#header #menu li a span { position:absolute; top:3px; left:30px; 
    width:100px; display:none; font-weight: bold; color: #000;
    
}    
#header #menu li.on a span { display:block }

#header #sns { position: fixed; top:40px; right:150px; z-index:99 }
#header #sns li { display:inline-block; font-size:25px; color:rgba(0,0,0,0.5);
    margin-left:15px; transition: all 0.5s; }
#header #sns li:hover { transform:scale(1.5); color: rgba(0,0,0,1)}

section { 
    width:100vw; 
    height:100vh; 
    position:relative;
    overflow:hidden; 
}

.slideInner { position:relative }
.slideInner .slide {
    height:100vh; 
    background-size:cover;
    background-repeat:no-repeat;
    background-position:right center;
    position:relative;
}
.slideInner .slide1 {
    background-image:url(../img/slide1.png)
}
.slideInner .slide2 { 
    background-image:url(../img/slide2.jpeg);
    background-size: contain;
    background-position: 80% center; 
}
.slideInner .slide3 {
    background-image:url(../img/slide3.jpg);
    background-size: contain;
} 
.slideInner .text { position:absolute;  top:50%;
    transform:translateY(-50%); left:300px; 
    font-size:55px; }
.slideInner .slick-slide.slick-active.slick-cloned .text { opacity:0 }
.slideInner .slick-slide.slick-cloned .text h3:nth-child(1) { 
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
.slideInner .slick-slide.slick-cloned .text h3:nth-child(2) { 
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    color: #adaba9;;
}

.slideInner .slick-slide.slick-active .text h3:nth-child(1) {
    animation:fadeInDown 0.8s both;
}
.slideInner .slick-slide.slick-active .text h3:nth-child(2) {
    animation:fadeInUp 0.8s both;
    color: darkslateblue;
}

.slideInner .slick-dots {
    position:absolute; 
    bottom:50px; 
    width:100%; 
    text-align:center; 
} 
.slideInner .slick-dots li { 
    display:inline-block;
    width:100px; height:4px; background-color:#adaba9;;
    margin:0 3px; 
    position:relative; 
}
/* .slideInner .slick-dots li:nth-child(2):before {  
    content:'홍길동 홍길동 홍길동';
    word-break:keep-all; line-height:1.2;
    color:#fff; font-size:16px;
    position:absolute; bottom:3px; left:0;
    width:100%; text-align:center; 
} */

.slideInner .slick-dots li button { 
    border:none; 
    width:0px; height:3px; background-color:#0095f6;
    text-indent:-9999px; 
    overflow:hidden; 
    position:absolute; top:0; left:0; 
    transition:all 0s;
}
.slideInner .slick-dots li.slick-active button { 
    width:100px; 
    transition:all 2s;
}
.slideOuter { position:relative }
.slideOuter .plpa {
    position:absolute; bottom:40px;
    left:50%; border:none;
    font-size:30px;
    color:#222; margin-left:230px;    
}
.slide2 .text { text-align: left;}
.slide2 .text h4 { font-size: 35px; font-weight: bold;}
.slide2 .text h4 >span { background: yellow; box-shadow: 0px 0px 12px -2px rgba(255,255,0,0.9);}
.slide2 .text p { color: darkslateblue; margin: 20px 0px; display: inline-block;
font-size: 28px; border-bottom: 1px solid #000;
}
.slide2 .text ul li{ font-size: 18px; padding-bottom: 10px;}
.slide2 .text ul li  > strong { font-weight: bold; font-size: 20px;}
.slideInner .slide1 .text { color:#000 }
.slideInner .slide3 .text { position: relative; 
}
.slide3 .text1 .self1 > h3 { font-size: 40px;
    text-align: left; margin: 50px 0;}
.slide3 .text1 .self1 .adli > li { font-size: 18px; text-align: left; padding-bottom: 10px;}
.slide3 .text1 .self1 .adli > li > strong { font-size: 20px; font-weight: bold;}


.slideInner .slide3 .text1 .self1 { text-align: center; position: absolute;
    left: 250px; top: 50%; transform: translateY(-50%); line-height: -3;
}
.slideInner .slide3 .text1 .self1 .gray {color: darkslateblue; }

/* 두번째 박스(스킬 그래프) */
.skillContainer {font-family: 'Chelsea Market', cursive; }
.skillContainer > h3 { font-size: 30px; font-weight: bold;}
.skillContainer > .line { width: 60px; display: block; background: #000; height: 3px; margin: 0 auto; margin-top: 5px;}
.skillContainer { height:100%; text-align:center; padding:8% 0 5% }
.skillContainer > div {
    height:100%; 
    width:100px; margin:0 30px; padding-bottom: 10px;
    /* border:1px solid #000; */
    display:inline-block; 
    position:relative;
    border-radius: 0 0 50px 50px;
}
.skillContainer > div > p {
    position:absolute; top:100%; 
    left:0; font-size:17px; width:100%; 
    text-align:center; font-weight: bold;
}
.skillContainer > div > .score {
    border-radius: 0 0 50px 50px;
    position:absolute; bottom:0; 
    width:100%; transition:all 0.5s; }
.skillContainer > div.html > .score { height:0%;
    background-image:linear-gradient(to top,#e54e21,#dd8368); box-shadow: 5px 5px 5px;    
    transition-delay: 0s; }
.skillContainer > div.css > .score { height:0%; box-shadow: 5px 5px 5px;
    background-image:linear-gradient(to top,#393f47,#6e798f);
    transition-delay: 0s;}
.skillContainer > div.script > .score { height:0%; box-shadow: 5px 5px 5px;
     background-image:linear-gradient(to top, #f1d258,#eedf9c);transition-delay: 0s;}
.skillContainer > div.jquery > .score {height: 0%; box-shadow: 5px 5px 5px;
    background-image:linear-gradient(to top, #1b70b5,#628daf);transition-delay: 0s;}
.skillContainer > div.react > .score {height: 0%; box-shadow: 5px 5px 5px;
    background-image:linear-gradient(to top, #0095f6,#81bae0);transition-delay: 0s;}
.skillContainer> div.html.on > .score { height:90%; transition-delay: 0s; }
.skillContainer> div.css.on > .score { height:85%;  transition-delay: 0.5s;}
.skillContainer> div.script.on > .score { height:50%; transition-delay: 1s;}
.skillContainer> div.jquery.on > .score { height:65%; transition-delay: 1.5s;}
.skillContainer> div.react.on > .score { height:50%;  transition-delay: 2s;}

.skillContainer .myscore {
    position:absolute; top:10px; 
    width:100%;
    text-align:center; 
    font-size:30px; color:#fff;
    
}
.skillContainer {
    background-image:url(../img/paper.jpeg);
    
}
/* 세번째 박스 */
#sect3 { padding:50px 150px;
    background-image:url(../img/paper.jpeg); font-family: 'Chelsea Market', cursive;  }
#sect3 .category { font-size:17px; color:#fff; margin-bottom:20px;
    text-align: center;}
#sect3 .category a { background-color:#3c3d41; padding:7px 20px; display:inline-block;  border-radius:5px;
 margin-right:10px; transition:all 0.5 s;}
 #sect3 .category a:hover {
     background: #000;
 }
#sect3 ul { overflow:hidden;  }
#sect3 ul li { float:left; width:23%; 
    margin:10px 1%; 
    /* transform:scale(0.5);
    opacity:0;
    transition:all 0.5s;
    transition-delay:0s; */
}
/* #sect3.on ul li {
    transform:scale(1);
    opacity:1;
}
#sect3.on ul li:nth-child(1) { transition-delay:0s }
#sect3.on ul li:nth-child(2) { transition-delay:0.2s }
#sect3.on ul li:nth-child(3) { transition-delay:0.4s }
#sect3.on ul li:nth-child(4) { transition-delay:0.6s }
#sect3.on ul li:nth-child(5) { transition-delay:0.8s }
#sect3.on ul li:nth-child(6) { transition-delay:1.0s }
#sect3.on ul li:nth-child(7) { transition-delay:1.2s }
#sect3.on ul li:nth-child(8) { transition-delay:1.4s } */

#sect3 ul li:nth-child(4n) { margin-right:0 }



/* 4번째 구역 */
#sect4 { padding:200px 200px 100px 300px;
    background-image:url(../img/paper.jpeg);
    position: relative; font-family: 'Chelsea Market', cursive;
}
#sect4 .exp { position: relative; bottom: 50px; left:-30px; }
#sect4 .exp > h3 { font-size: 30px; font-weight: bold; text-align: center;  }
#sect4 .exp > .line1 { width: 60px; display: block; 
                     background: #000; height:3px; 
                     margin: 0 auto; margin-top: 5px;}
.article6 { padding: 0px; margin-bottom: 50px;}

.article6 dl { padding-top: 25px;}
.article6 dt{ font-size: 25px;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    position: relative;
}
.article6 dt a {
    position: absolute; top:50%;
    transform:translateY(-50%);         

    right: 0;
}
.article6 dt + dd{
    padding: 10px;
    font-size: 20px;
    line-height: 1.5;
    display: none;
}
.article6 dt.on + dd{
    display: block;
}

#sect5 { 
    background-image: url(../img/paper.jpeg);
    
}

#sect5 .other { padding: 60px 0;}
#sect5 .other .conta { margin-top: 70px; font-family: 'Chelsea Market', cursive;}
#sect5 .other .conta > h3 { font-size: 30px; font-weight: bold; text-align: center;}
#sect5 .other .conta > .line2 { width: 60px; display: block; 
                     background: #000; height:3px; 
                     margin: 0 auto; margin-top: 5px;}
#sect5 .other .inner { overflow: hidden;}

#sect5 .other .inner > div {
    float: left; width:39%;
}
#sect5 .other .inner > div:nth-child(2) {
    width: 20%; border: 1px solid #ccc; margin:0px 1%;
 }


#sect5 .other .notice { position:relative}
#sect5 .other .notice h2{ font-size:20px; color:#333; text-align: left;
border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-bottom: 15px;
font-weight: normal;}
#sect5 .other .notice table { font-size: 14px; color: #777; table-layout: fixed;}
#sect5 .other .notice col:first-child {width:auto;}
#sect5 .other .notice col:last-child {width:80px ;}
#sect5 .other .notice td:first-child { white-space:nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 5px;}
#sect5 .other .notice td:last-child { text-align: center;}
#sect5 .other .notice td {padding: 3.5px 0px;}
/* #main .other .notice td a::before { content:' ・ '; padding-right: 3px;} */


/* 기호이미지를 사용할 경우 */
#sect5.other .notice td a:hover { color:#333}
#sect5 .other .notice td a{ background-image: url(../images/icon-top.png);
background-repeat:no-repeat; /*기호이미지가 반복되는것을 방지*/

background-size: 5px auto; /*이미지의경우 가로세로 픽셀이 다를수있으면 깨진다, 그래서 한쪽은 auto를 주는 경우가 많음*/
padding-left: 10px;
background-position:left center;
}
#sect5 .other .notice .noticemore{
    position:absolute; top:10px; right:10px; font-size:12px; color:#999
}
#sect5 .other .notice .noticemore:hover {color:#cc1b38}
#sect5 .other .qna .myqna { }
#sect5 .other .qna a {  transition:all 0.3s ;}
#sect5 .other .qna a:hover {}

#sect5 .other .cscenter {
    padding:39px 10px 39px; border: 1px solid #ccc;
    text-align: center;
}
#sect5 .other .cscenter h3 { font-size: 21px; color:#333}
#sect5 .other .cscenter a { font-size: 27px; color: #cc1b38; display: block;
 padding:10px 0;
}
#sect5 .other .cscenter p { font-size: 14px; color:#999}
#sect5 .other .cscenter p span{ display: block;}


#sect5 .copyOuter { width: 100%; background: #333853; height: 160px;
    position: absolute; left: 0; bottom: 0; 
}
#sect5 .copyOuter .copyInner { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; text-align: center;
}
#sect5 .copyOuter .copyInner .thk { font-size: 38px; padding: 5px 0px 5px;}
#sect5 .copyOuter .copyInner > p { font-size: 18px;}

#sect2,#sect3,#sect4,#sect5 {cursor: url(../img/pen.png),auto;}