@charset "utf-8";
@font-face {
    font-family: 'Baloo Bhai';
    font-style: normal;
    font-weight: 300;
    src: url('https://fonts.googleapis.com/css?family=Baloo+Bhai&display=swap');
    unicode-range:U+0041-005A, U+0061-007A;
}
@font-face {
    font-family: 'Do Hyeon';
    font-style: normal;
    font-weight: 300;
    src: url('https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap');
    unicode-range:U+AC00-U+D7A3;
}

.mob_caution{display:none;padding:10px;background:#ffb000;text-align:center;font-size:17px;color:#fff;}
.scroll_hidden{min-height:100%;height:100%;overflow:hidden !important;touch-action:none;}

/* common */
main{padding-bottom:60px;}
.sp_img{display:inline-block;overflow:hidden;line-height:100em;vertical-align:top;background:url(../images/sprite.png) 0 0 no-repeat;}
.sp_img.icon_mail{width:18px;height:14px;background-position:-24px 0;}
.sp_img.icon_phone{width:14px;height:19px;background-position:0 0;}
.graytxt{color:#b1adad;}
.caution{color:#de5757;}
.last_modified{color:#2e50fc;}
.button_up_box{display:inline-block;position:fixed;right:20px;bottom:5%;z-index:1;}
.button_up{display:inline-block;}
.heart{position:relative;width:60px;height:50px;}
.button_up.heart > span{position:absolute;top:11px;left:0;right:0;z-index:1;text-align:center;font-family:'Baloo Bhai', cursive;font-size:14px;letter-spacing:.1px;color:#fff;}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 30px;
    top: 0;
    width: 30px;
    height: 47px;
    background: #84d608;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin :100% 100%;
    box-shadow:5px 3px 7px rgba(0,0,0,.2);
}

h3.section__title{margin-bottom:30px;text-align:center;font-family:'Baloo Bhai', cursive;font-size:35px;}
.section_info{margin-bottom:30px;text-align:center;font-family:'Do Hyeon';font-size:20px;color:#bbb;}
.section_info em{padding:0 3px;box-shadow:inset 0 -13px 0 #fffb75;}
.infoList .row + .row{margin-top:5px;}
.infoList .row:after{content:'';display:block;clear:both;}
.infoList dt{float:left;position:relative;padding-left:10px;min-width:90px;font-size:14px;font-weight:600;line-height:21px;color:#555;}
.infoList dt:before{content:'';display:block;position:absolute;top:6px;left:-6px;width:14px;height:7px;background:#7ecd06;border-radius:50%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
.infoList dd{overflow:hidden;margin-left:10px;font-size:14px;line-height:21px;color:#555;}
.infoList.type2 .row dt{float:inherit;}
.basicTab{border-bottom: 1px solid #ddd;}
.basicTab:after{content:'';display:block;clear:both;}
.basicTab li{position:relative;float:left;}
.basicTab .basicTab__button{display:block;padding:0 6px;font-family:'Varela Round',sans-serif;font-size:14px;line-height:30px;color:#888;}
.basicTab li.active .basicTab__button{color:#333;}
.basicTab li:before {content:''; display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background: #ffb100; transition: all ease .1s; transform: scaleX(0);}
.basicTab li:hover:before,
.basicTab li:focus:before,
.basicTab li.active:before{transform: scaleX(1);}
.buttonTab:after{content:'';display:block;clear:both;}
.buttonTab li{position:relative;float:left;}
.buttonTab li + li{margin-left:5px;}
.buttonTab .buttonTab__button{display:block;padding:0 6px;box-sizing:border-box;height:30px;border:1px solid #ddd;background:#fff;border-radius:5px;font-family:'Varela Round',sans-serif;font-size:14px;color:#333;}
.buttonTab .buttonTab__button:hover,
.buttonTab .buttonTab__button:focus{border-color:#8ad231;box-shadow:1px 1px 3px rgba(0,0,0,.1);}
.buttonTab li.active .buttonTab__button{border-color:#8ad231;background:#8ad231;color:#fff;}

@media only screen and (min-width:768px){
    h3.section__title{margin-bottom:35px;font-size:50px;line-height:51px;}
    .infoList dt{min-width:85px;font-size:18px;line-height:23px;}
    .infoList dd{font-size:16px;line-height:22px;}
    .basicTab li .basicTab__button{padding:0 10px;font-size:20px;line-height:39px;}
}
/* //common */

/* header */
.headerWrap{margin:0 auto;padding:0 20px;box-sizing:border-box;height:60px;background:rgba(255,255,255,.9);box-shadow:0 2px 5px rgba(0,0,0,.15);}
.headerWrap.fixed{position:fixed;top:0;left:0;right:0;z-index:2;}
.headerWrap__box{margin:0 auto;max-width:1200px;}
.headerWrap h1{display:inline-block;padding:13px 5px 0;}
.headerWrap h1 a{display:inline-block;font-family:'Baloo Bhai', cursive;font-size:25px;white-space:nowrap;color:#333;}
.navWrap{position:fixed;z-index:2;top:-200%;left:0;right:0;padding:100px 0;height:100vh;box-sizing:border-box;background: #ffbe29;transition:all ease .3s;}
.navWrap.mob_active{top:0;}
.button_nav{display:block;position:absolute;top:18px;right:20px;width:27px;height:23px;z-index:3;cursor:pointer;}
.button_nav span{display:block;position:absolute;left:50%;margin-left:-14px;width:27px;height:3px;background:#ffb100;transition:all ease .3s;-webkit-transition:all ease .3s;-ms-transition:all ease .3s;-o-transition:all ease .3s;}
.button_nav span:nth-of-type(1){top:0;}
.button_nav span:nth-of-type(2){top:10px;}
.button_nav span:nth-of-type(3){top:20px;}
.button_nav.close{position:fixed;}
.button_nav.close span{background:#fff;}
.button_nav.close span:nth-of-type(1){top:50%;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
.button_nav.close span:nth-of-type(2){margin-left:0;width:0;}
.button_nav.close span:nth-of-type(3){top:50%;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);}
.navigation .nav_item + .nav_item{margin-top:50px;}
.navigation .nav_item a{display:block;padding:0 10px;box-sizing:border-box;font-family:'Baloo Bhai', cursive;text-align:center;font-size:5vh;color:#fff;}
.navigation .nav_item a:hover,
.navigation .nav_item a:focus{color:#19ab25;}

@media only screen and (min-width:768px){
    .headerWrap h1{float:left;padding-top:8px;}
    .headerWrap h1 a{font-size:30px;}
    .button_nav{display:none;}
    .navWrap{position:relative;top:0;overflow:hidden;margin-left:auto;padding:0;width:auto;height:auto;background:none;text-align:right;}
    .navigation .nav_item{position:relative;display:inline-block;margin:0 15px 0;}
    .navigation .nav_item + .nav_item{margin-top:0;}
    .navigation .nav_item a{font-size:23px;line-height:60px;color:#222;}
    .navigation .nav_item a:hover,
    .navigation .nav_item a:focus{color:#ff7412;}
    .navigation .nav_item a:before{content:'';position:absolute;display:block;bottom:10px;left:0;width:100%;height:2px;background:#ffb200;transition:all ease .2s;-webkit-transition:all ease .2s;-ms-transition:all ease .2s;-o-transition:all ease .2s;transform:scaleX(0);-webkit-transform:scaleX(0);-ms-transform:scaleX(0);-o-transform:scaleX(0);}
    .navigation .nav_item:hover a:before,
    .navigation .nav_item.active a:before{transform:scaleX(1);}
}
/* //header */

/* window box style */
.window_box{border:5px solid #434343;background:#fff;border-radius:5px;}
.window_box .deco_box{height:30px;border-bottom:5px solid #434343;background-color:#ddd;background-image:radial-gradient(#555 15%, transparent 16%), radial-gradient(#555 15%, transparent 16%);background-size:20px 16px;background-position:0 0, 10px 24px;}
.window_box .deco_item{float:right;}
.window_box .item{float:left;position:relative;display:block;width:30px;height:25px;border-left:5px solid #434343;}
.window_box .item.mode1{background:#81a5e7;}
.window_box .item.mode1:before{content:'';display:block;position:absolute;top:14px;left:50%;margin-left:-7px;width:14px;height:5px;background:#434343;border-radius:5px;}
.window_box .item.mode2{background:#f6c964;}
.window_box .item.mode2:before{content:'';display:block;position:absolute;top:4px;left:50%;margin-left:-9px;width:12px;height:9px;border:3px solid #434343;border-top: 5px solid #434343;border-radius:2px;}
.window_box .item.mode3{padding-top:2px;background:#fe97bd;}
.window_box .item.mode3 .con_x{display:inline-block;margin:0 0 0 11px;width:4px;height:20px;background:#434343;border-radius:5px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
.window_box .item.mode3 .con_x:before{content:'';display:block;position:absolute;top:50%;left:-8px;margin-top:-2px;width:20px;height:4px;background:#434343;border-radius:4px;}
/* //window box style */

/* about */
.aboutWrap{position:relative;padding:8% 30px;box-sizing:border-box;width:100%;background:#ffda6a;}
.aboutArea{margin:0 auto;padding:30px;box-sizing:border-box;max-width:1000px;background:#fff;border-radius:10px;}
.infoArea .infoArea__top{margin-bottom:20px;text-align:center;}
.aboutArea .profileImage{position:relative;margin:0 auto 20px;width:230px;height:260px;border:5px solid #ffbd00;background:url(../images/mypic.jpg) center bottom / cover no-repeat;border-radius:8px;}
.aboutArea .profileImage:before{content:'';position:absolute;top:-40px;right:-45px;width:100px;height:100px;background:#aef554;border-radius:50%;}
.aboutArea .name{font-family:'Do Hyeon', sans-serif;font-size:30px;font-weight:600;letter-spacing:3px;}
.aboutArea .job{display:block;margin-bottom:10px;font-size:16px;letter-spacing:.6px;}
.aboutArea .contact{display:inline-block;text-align:left;}
.aboutArea .contact .contact__item + .contact__item{margin-top:5px;}
.aboutArea .contact .contact__item dt{float:left;margin-right:4px;color:#72be00;}
.aboutArea .contact .contact__item dd{overflow:hidden;}
.aboutArea .contact .contact__item dd a{font-size:13px;line-height:22px;letter-spacing:-.3px;}
.aboutArea .infoArea__bottom{padding:20px 0; border-top: 3px dashed #ffb100;}
.infoArea{display:flex;display:-webkit-flex;display:-ms-flex;display:-o-flex;flex-direction:column;}
.aboutArea .section__title{position:relative;text-align:left;font-size:80px;color:#ffb200;}
.aboutArea .section__title:before{content:"About";position:absolute;top:-0.35rem;left:-0.35rem;color:transparent;-webkit-text-stroke:0.1rem #ff7412;}
@media all and (min-width:768px) {
    .aboutArea{padding:80px 50px;}
    .aboutArea h3.section__title {margin: 0 auto 30px; text-align: left;}
    .aboutArea .window_box{max-width:900px;}
    .aboutArea .profileImage{margin:0 0 20px;}
    .infoArea{flex-direction:row;align-items:center;margin:60px auto 0;}
    .infoArea .infoArea__top{padding-right:20px;text-align:left;}
    .infoArea .infoArea__bottom{flex:1;padding: 20px 0 20px 40px;border-top:none;border-left:3px dashed #ffb100;}
}
@media all and (min-width:1024px) {
    .aboutArea{padding:100px 90px 80px;}
    .infoArea .infoArea__top{padding-right:70px;}
    .infoArea .infoArea__bottom{padding-left:50px;}
}
/* //about */

/* skill */
.skillWrap{margin-top:60px;text-align:center;}
.skillArea{margin: 0 auto;padding:0 20px;max-width:940px;}
.skillArea__item + .skillArea__item{margin-top:50px;}
.skillArea__item h4{font-size:20px;font-weight:400;letter-spacing:.3px;}
.skillArea__item h4 + p{margin:10px auto 20px;font-size:16px;letter-spacing:.1px;color:#999;}
.skillArea__list{display:flex;flex-flow:row wrap;width:100%;}
.skillArea__list > li{flex:1 1 150px;position:relative;margin:5px;box-sizing:border-box;height:70px;background:#a4dc5e;border-radius:50px;overflow:hidden;}
.skillArea__list > li:after{content:'';display:block;position:absolute;top:0;left:-150px;width:100px;height:100%;background-image:linear-gradient(to right, transparent, rgba(255,255,255,.5), transparent);transition:all .35s;transform:skewX(-42deg);}
.skillArea__list > li:hover:after{left:calc(100% + 50px)}
.skillArea__list > li > span{position:absolute;top:50%;left:0;right:0;transform:translate(0, -50%);text-align:center;font-family: 'Baloo Bhai', 'Do Hyeon';font-size:23px;line-height:23px;word-break:break-all;letter-spacing:.1px;color:#fff;}
/* //skill */

/* career */
.careerWrap{margin-top:60px;padding:100px 20px;box-sizing:border-box;background:url(../images/fixed_bg_orangee.jpg) 0 0 / cover  no-repeat;background-attachment:fixed;}
.careerArea{margin:0 auto;max-width:1200px;}
.careerBox{margin: 0 auto;padding:50px 30px;max-width:700px;background:#fff;}
.careerBox__item{display:none;margin-top:15px;padding:0 10px;}
.careerBox__item.active{display:block;}
.careerDetail__notice{font-size:12px;color:#999;}
.careerDetail__notice + .careerDetail__notice{margin-bottom:10px;}
.careerDetail__notice em{letter-spacing:.7px;color:#d05aec;}
.projectList + .projectList{margin-top:20px;}
.projectList__item + .projectList__item{margin-top:20px;}
.projectList dt{font-size:15px;font-weight:normal;letter-spacing:normal;line-height:20px;}
.projectList dt .num{display:inline-block;margin-right:5px;vertical-align:middle;width:10px;height:10px;background:#ffb000;border-radius:3px;text-align:center;font-size:12px;font-weight:bold;line-height:19px;color:#fff;}
.projectList dt > strong{padding:0 3px;box-shadow:inset 0 -9px 0 #ffd96d;}
.projectList dd{margin-top:10px;}
.projectList dd > ul{margin-left:15px;}
.projectList dd > ul > li{position:relative;padding-left:10px;font-size:14px;letter-spacing:normal;line-height:17px;list-style:none;}
.projectList dd > ul > li:before{content:'';position:absolute;top:6px;left:0;width:4px;height:4px;background:#ffaf00;}
.projectList dd > ul > li + li{margin-top:3px;}
.projectList dd > ul > li > ul > li{position:relative;padding-left:10px;list-style:none;}
.projectList dd > ul > li > ul > li:before{content:'-';position:absolute;top:0;left:0;}
.projectList .emphasis{display:block;}
.projectList.gov dt .num{background-color:#8bd230;}
.projectList.gov dt > strong{box-shadow:inset 0 -9px 0 #b9eccb;}
.projectList.gov dd > ul > li:before{background-color:#8cd230;}
.careerDetail__item{display:none;margin-top:15px;}
.careerDetail__item.active{display:block;}

@media all and (min-width:768px) {
    .careerBox{margin:0 0 0 auto;}
    .careerBox__item{margin-top:20px;}
    .careerBox .infoList .row + .row{margin-top:10px;}
    .careerBox .infoList dt{font-size:17px;line-height:24px;}
    .careerBox .infoList dt:before{top:8px;}
    .careerBox .infoList dd{font-size:16px;line-height:25px;}
}
/* //career */

/* works */
.worksWrap{padding-top:60px;text-align:center;}
.worksWrap h4{font-size:16px;font-weight:600;}
.worksBox{display:flex;display:-webkit-flex;display:-ms-flex;display:-o-flex;flex-wrap:wrap;margin:-10px auto;padding:0 20px;max-width:1200px;}
.worksArea__item{position:relative;flex:1 1 337px;margin:10px;}
.worksArea__item img{max-width:100%;}
.worksArea__item .inbox .desc_box{position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.8);opacity:0;text-align:center;color:#fff;transition:all ease .5s;-webkit-transition:all ease .5s;-ms-transition:all ease .5s;-o-transition:all ease .5s;}
.worksArea__item .inbox:hover .desc_box{opacity:1;}
.worksArea__item .inbox .desc_box .desc{position:absolute;top:50%;left:0;right:0;transform:translate(0,-50%);-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);}
.worksArea__item .inbox .desc_box .tit{font-size:18px;font-weight:600;margin-bottom:30px;}
.worksArea__item .inbox .desc_box .button_more{display:inline-block;position:relative;top:0;left:0;padding:7px 30px;background:#ffaf00;border-radius:18px;font-family:'Baloo Bhai', cursive;font-size:15px;letter-spacing:4px;color:#fff;transition:all ease 0.3s;-webkit-transition:all ease 0.3s;-ms-transition:all ease 0.3s;-o-transition:all ease 0.3s;}
.worksArea__item .inbox .desc_box .button_more:hover{top:-3px;left:-3px;box-shadow:2px 3px 1px #70eb00;}

@media only screen and (min-width:768px){
    .works_item{max-width:calc(50% - 20px);}
    .works_item .inbox .desc_box .tit{font-size:25px;}
}

@media only screen and (min-width:1024px){
    .works_item{max-width:calc(33.3333% - 20px);}
}
/* //works */

/* lab */
.lab_wrap{padding-top:60px;}
.lab_area{margin:0 auto 50px;}
.lab_area .section__title{position:relative;color:#3660ff;}
.lab_area .section__title:before{content:'';display:block;position:absolute;top:22px;left:50%;margin-left:-30px;width:60px;height:22px;background:#eee;border-radius:50%;animation-name:shadow;animation-duration:.5s;animation-iteration-count:infinite;animation-direction:alternate;}
.lab_box{display:flex;display:-webkit-flex;display:-ms-flex;display:-o-flex;flex-wrap:wrap;margin:0 auto;padding:0 20px;max-width:1200px;}
.lab_item{display:flex;align-items:center;justify-content:center;flex:1 1 100px;margin:5px;padding:10px;height:50px;background:#8ad231;text-decoration:none;font-size:16px;font-weight:bold;color:#fff;}
.lab_item.disable{background:#ddd;cursor:default;}
@media only screen and (min-width:768px){
    .lab_area .section__title:before{top:30px;margin-left:-40px;width:80px;height:25px;}
    .lab_box{padding:0 20px;}
    .lab_item{font-size:20px;}
}
/* //lab */

/* popup */
.popup_area{display:none;position:fixed;top:0;bottom:0;left:0;right:0;padding:20px;background:rgba(0,0,0,.5);z-index:3;}
.popup_area.active{display:block;}
.popup_area .popup_box{display:flex;display:-webkit-flex;display:-ms-flex;display:-o-flex;flex-direction:column;position:relative;margin:0 auto;padding:40px 20px 30px;width:100%;max-width:800px;height:100%;background:#fff;border-radius:12px;overflow:hidden;}
.popup_area .popup_box .inbox{height:100%;overflow:hidden;}
.popup_area .popup_box .button_close{position:absolute;top:10px;right:10px;width:30px;height:30px;}
.popup_area .popup_box .button_close [class^='bar']{position:absolute;top:50%;left:50%;margin-left:-10px;width:20px;height:2px;background:#666;}
.popup_area .popup_box .button_close .bar_lft{transform:rotate(45deg);}
.popup_area .popup_box .button_close .bar_rgt{transform:rotate(-45deg);}
.popup_area .popup_box h4{padding-bottom:10px;border-bottom:1px solid #ddd;font-size:15px;font-weight:600;color:#333;}
.popup_area .popup_box .content{padding:30px 0 0;box-sizing:border-box;height:100%;overflow-y:auto;}
.popup_area .popup_box figure + figure{margin-top:30px;}
.popup_area .popup_box figure img{border:1px solid #4a4a4a;}
.popup_area .popup_box figcaption{margin-top:5px;font-size:15px;font-weight:bold;color:#4a4a4a;}
@media only screen and (min-width:768px){
    .popup_area .popup_box h4{font-size:20px;}
}
    @media only screen and (min-width:1024px){
    .popup_area .popup_box h4{font-size:24px;}
}
/* //popup */
/* //works */

/* footer */
.footer_wrap{background:#ffcc54;}
.footer_box{margin:0 auto;padding:30px 20px;max-width:1200px;color:#fff;}
.footer_box a{color:#fff;}
/* //footer */

/* animation */
.box_bounce{position:relative;min-height:50px;}
.bounce{
    position:absolute;
    top:0;
    left:0;
    right:0;
    text-align:center;
    animation-name:bounce;
    animation-duration:.5s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
.colortxt{
    animation-name:colorTxt;
    animation-duration:.5s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}
@keyframes bounce {
    0%{
        top:0;
    }
    100%{
        top:-25px;
    }
}
@keyframes colorTxt{
    0%{
        color:#2e50fc;
    }
    50%{
        color:#2ecbfc;
    }
    100%{
        color:#7ce4db;
    }
}
@keyframes shadow{
    0%{
        transform:scaleX(1);
    }
    100%{
        transform:scaleX(.76);
    }
}
/* //animation */