@charset "utf-8";

/* 공통속성 */
.container{width: 1440px; margin: 0 auto; height: inherit}
.left{float: left}
.right{float: right}
h2{margin-bottom: 80px; padding: 0 0 18px 27px; color: #111; font-size: 21px; font-weight: 600; letter-spacing: -1px; background: url(../images/h2_bg.jpg) no-repeat left bottom}
h3{color: #151515; font-size: 26px; font-weight: 900}

/* 레이아웃 */
#wrap{width: 100%}
#header{position: absolute; width: 100%; height: 80px; top: 0; left: 0; z-index: 3}
#contents{width: 100%;}
#banner{position: relative; width: 100%; height: 100vh; /* 962px; */ /* margin-bottom: 160px; */  background: url(../images/main_bg_3.jpg) no-repeat center; background-size: cover; overflow: hidden}
#work_ex{width: 100%; height: 100vh; padding-top: 160px; margin-bottom: 160px}
#skills{width: 100%; height: 100vh; padding: 120px 0 80px; background: #f3f3f3}
#pofol{width: 100%; height: 1000px; /* margin-bottom: 160px; */ background: url(../images/worksmenu_bg.jpg) no-repeat center}
#anc{width: 100%; height: 100vh; margin-bottom: 160px; padding-top: 160px}
#contact{width: 100%; height: 85vh; background: url(../images/m_contact_bg.jpg) no-repeat center}
#footer{width: 100%; height: 15vh}

/* header */
#header h1 a{display: block; margin-top: 34px; color: #fff; font-size: 30px; font-weight: 200; letter-spacing: -1px}
#header h1 a span{font-weight: 600}
#header .nav li{float: left; margin: 0 42px 0 42px;}
#header .nav li a{display: block; margin-top: 34px; padding-bottom: 10px; color: #fff; font-size: 21px; font-weight: 500; letter-spacing: -0.5px}
#header .nav li:last-child{margin-right: 0}
#header .nav li:hover a{border-bottom: 4px solid #ffef38}

/* banner */
#banner .banner_bg{position: relative; width: 100%; height: inherit; background: rgba(0,0,0,.1); z-index: 2}
#banner .banner_bg p.typed{position: relative; padding-top: 300px; color: #fff; font-size: 78px; font-weight: 100; letter-spacing: -4px; text-align: left; line-height: 98px; text-shadow: 0 0 6px #353535;}
#banner .banner_bg p.typed::after {
	content: '|'; 
	display: inline;
    position: absolute;
    bottom: 5px;
    font-size: 63px;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}
/*Custom cursor animation*/
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
.typed-cursor{opacity: 0;}
#banner .banner_bg p.typed span{color: #ffef38; font-size: 70px; font-weight: 500}
#banner .banner_bg p.small{position: absolute; bottom: 150px; color: #fff; font-size: 18px; font-weight: 300; line-height: 28px; text-shadow: 0 0 6px #353535;
    opacity: 0;
    animation: fadein 1.5s ease-in-out;
    -webkit-animation: fadein 1.5s ease-in-out;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;}
#banner .banner_bg p.small span{padding: 0 5px 2px 5px; color: #000; font-weight: 600; background-color: #ffef38; text-shadow: none}

@keyframes fadein{
    0% {opacity: 0;}
    100% {opacity:1;}
}

#banner video{display: block; position: absolute; top: 0; left: 0; z-index: 1}
#banner object{position: absolute; left: 50%; bottom: 50px; transform: translate(-50%, 0); z-index: 5;}
#banner p.mouse{position: absolute; bottom: 25px; width: 100%; color: #fff; font-weight: 300; text-align: center; z-index: 6;}

/* work_ex */
#work_ex .work_ex_move{position: relative; width: 1150px; height: 437px; margin: 200px auto 0 auto; opacity: 0}
#work_ex table{width: 1150px; margin: 0 auto}

#work_ex table tr{border-bottom: 1px solid #ccc;}
#work_ex table tr:first-child{border-top: 1px solid #555;}
#work_ex table td{padding: 22px 0}
#work_ex table td.date{color: #aaa; font-size: 21px; font-weight: 600; letter-spacing: -0.5px}
#work_ex table td.co, #work_ex table td.position{color: #333; font-size: 26px; letter-spacing: -0.5px}
#work_ex table td.co span{font-weight: 700}
#work_ex table td.co{padding-left: 30px}
#work_ex table td.tag{color: #666; font-size: 18px; letter-spacing: -0.5px}
#work_ex table .col_1{width: 236px}
#work_ex table .col_2{width: 472px}
#work_ex table .col_3{width: 206px}
#work_ex table .col_4{width: 236px}
#work_ex .career_btn{position: absolute; bottom: -100px; right: 0; width: 180px; height: 50px; /*margin: 30px 0 0 1115px;*/ text-align: center;  background: #666}
#work_ex .career_btn a{display: block; width: 180px; height: 50px; color: #fff; font-size: 18px; line-height: 50px}
#work_ex .career_btn:hover a{background: url(../images/btn_bg.jpg) no-repeat left center;}

/* skill */
#skills .skill_wrap{width: 1268px; margin-left: 145px}
#skills .w_445{width: 445px}
#skills .w_260{width: 260px}
#skills .skill{position: relative; height: 260px}
#skills .skill h3{position: absolute; display: inline-block; top: 23px; left: 0; padding: 0 20px 15px 0; letter-spacing: -1px; background: url(../images/h3_bg.png) no-repeat right bottom; z-index: 5}
#skills .skill .icon_wrap{display: inline-block; position: relative; width: 260px; height: 260px; background: #fff; border-radius: 50%}
#skills .skill .icon_wrap img{position: absolute;}
/* #skills .skill .design_1{top: 85px; left: 52px}
#skills .skill .design_2{top: 85px; left: 150px}
#skills .skill .design_3{top: 160px; left: 99px}
#skills .skill .ux_1{top: 110px; left: 52px}
#skills .skill .ux_2{top: 110px; left: 160px}
#skills .skill .markup_1{top: 90px; left: 72px}
#skills .skill .markup_2{top: 90px; left: 148px}
#skills .skill .markup_3{top: 178px; left: 70px}
#skills .skill .cms_1{top: 65px; left: 105px}
#skills .skill .cms_2{top: 140px; left: 79px}
#skills .skill .cms_3{top: 178px; left: 70px} */
#skills .skill .design_1{top: 50%; left: 50%; transform: translate(-50%, -50%)}
#skills .skill .design_2{top: 50%; left: 50%; transform: translate(-50%, -50%)}
#skills .skill .design_3{top: 50%; left: 50%; transform: translate(-50%, -50%)}
#skills .skill .ux_1{top: 50%; left: 50%; transform: translate(-50%, -50%)}
#skills .skill .ux_2{top: 50%; left: 50%; transform: translate(-50%, -50%)}
#skills .skill .markup_1{top: 50%; left: 50%; transform: translate(-50%, -50%)}
#skills .skill .markup_2{top: 50%; left: 50%; transform: translate(-50%, -50%)}
#skills .skill .markup_3{top: 50%; left: 50%; transform: translate(-50%, -50%)}
/* #skills .skill .cms_1{top: 50%; left: 50%; transform: translate(-50%, -50%)}
#skills .skill .cms_2{top: 50%; left: 50%; transform: translate(-50%, -50%)}
#skills .skill .cms_3{top: 50%; left: 50%; transform: translate(-50%, -50%)} */
#skills .skill .cms_2{top: 50%; left: 50%; transform: translate(-50%, -50%)}
#skills .skill .cms_3{top: 50%; left: 50%; transform: translate(-50%, -50%)}
#skills .skill .list{position: absolute; height: auto; top: 300px}
#skills .skill .design{left: 42px}
#skills .skill .ux{left: 95px}
#skills .skill .markup{left: 55px}
/* #skills .skill .cms{top: 80px}
#skills .skill .cms{top: 98px} */
#skills .skill .list li{color: #555; font-size: 21px; line-height: 160%; letter-spacing: -1px}
#skills .skill .list li:before{content: "- "}

/* pofol */
#pofol .design{width: 50%; height: 499px; /* padding-top: 145px; */ text-align: center; border-right: 2px solid #fff; border-bottom: 2px solid #fff; box-sizing: border-box;}
#pofol .design:hover{background: rgba(0,0,0,.5); transition: all 0.3s;}
#pofol li:nth-child(2n){border-right: 0;}
#pofol li:nth-child(3), #pofol li:nth-child(4){border-bottom: 0;}
#pofol .design a{display: block; width: 100%; height: 354px; padding-top: 145px;}
#pofol .design img{display: block; margin: 0 auto;}
#pofol .design p{display: inline-block; margin-top: 40px; padding-bottom: 15px; color: #fff; font-size: 34px; font-weight: 600; letter-spacing: -1px}
#pofol .design:hover p{border-bottom: 1px solid #ffef38; transition: all 0.3s ease-in-out;}

/* Awards & Certificate */
#anc .anc_move{width: 1440px; height: 387px; margin: 200px auto 0 auto; opacity: 0}
#anc .awards, #anc  .certificate{position: relative; width: 560px;}
#anc .awards{margin-left: 145px;}
#anc .certificate{margin-right: 145px;}
#anc h3{display: inline-block;  margin-bottom: 16px}
#anc .h3_bg{position: absolute; width: 36px; height: 36px; top: -15px; background: #ffef38; border-radius: 50%; z-index: -1}
#anc .awards .h3_bg{left: 78px}
#anc .certificate .h3_bg{left: 119px}
#anc li{padding: 32px 0 32px 8px; color: #333; font-size: 26px; border-bottom: 1px solid #ccc}
#anc li:first-child{border-top: 1px solid #555}
#anc .gray{color: #aaa}
#anc .bold{font-weight: 900}

/* contact */
#contact .container{padding-top: 160px;}
#contact h2{padding: 0 0 35px 0; color: #fff; font-size: 38px; font-weight: 600; text-align: center; letter-spacing: -0.5px; background: url(../images/h2_bg.jpg) no-repeat center bottom}
#contact .contact_move{width: 415px; margin: 120px auto 0; opacity: 0}
#contact .contact_move>div{padding: 40px 0}
#contact .contact_move .phone{border-bottom: 1px solid #fff}
#contact .contact_move .phone img{padding: 0 7px}
#contact .contact_move img{display: block;}
#contact .contact_move .email{margin-top: 6px}
#contact .contact_move p{margin-left: 24px; color: #fff; font-size: 32px}
#contact .phone p{margin-top: 18px}
#contact .email p{margin-top: 12px;}

/* top btn */
.top_btn{display: none; position: fixed; right: 70px; bottom: 130px; width: 60px; height: 60px; font-size: 13px; font-weight: 500; text-align: center; line-height: 80px; border: 1px solid #333; border-radius: 50%; background: url(../images/top_btn_bg.png) no-repeat center 10px rgba(255,255,255,.8); cursor: pointer; z-index: 99}
.top_btn:hover{color: #fff; background: url(../images/top_btn_bg_on.png) no-repeat center 10px #333;}

/* footer */
#footer .container{padding-top: 40px}
#footer .w3c{height: 15px}
#footer .w3c div{width: 80px; height: 15px; padding: 0 15px}
#footer .w3c div:last-child{padding-right: 0}
#footer .w3c div a{display: block; width: 80px; height: 15px}
/* #footer .w3c img{display: block; width: 50px; height: 24px} 
#footer .w3c p{margin: 3px 0 0 8px; color: #333; font-size: 18px; font-weight: 500}*/
#footer .copy{margin: 38px 0 60px; color: #aaa; font-size: 16px; font-weight: 300; text-align: center}

@media screen and (max-width:1439px) {
	.container{width: 100%}
}