@charset "UTF-8";
/*reset*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video, button, input, select, textarea {
    margin: 0;
    padding: 0;
    font: inherit;
    vertical-align: top;
}
button,input {border-radius: 0}
fieldset,img {border: 0}
ol,ul {list-style: none}
address,em {font-style: normal}
a {text-decoration: none}
iframe {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display: block;}
h1,h2,h3,h4,h5,h6 {font-weight: normal}
.blind {position: absolute;overflow: hidden;clip: rect(0 0 0 0);margin: -1px;width: 1px;height: 1px}
button {cursor:pointer;}
button, input, select {vertical-align: middle;}

input[type="checkbox"] {opacity: 0; margin-right: 5px;}
label{cursor: pointer;}
input[type="checkbox"]+label {position: relative; margin-left: 10px;}
input[type="checkbox"]+label:before {
    content: '';
    position: absolute;
    left: -28px;
    top: 16px;
    width: 29px;
    height: 29px;
    background: url(http://dothome.co.kr/expirationinfo/404.html) no-repeat 0 0;
}
input[type="checkbox"]:checked+label:before{
    background-position: -29px 0;
}
input[type="radio"]+label {margin-left: 5px;}

/*접근성*/
#accessibilityLink {
    position: relative;
    top: 0;
    left: 0;
    z-index: 999999;
}

#accessibilityLink a {
    position: absolute;
    left: 0;
    top: -9999px;
    font-size: 12px;
    background: #333;
    color: #fff;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 100%;
}
#accessibilityLink a:focus, #accessibilityLink a:active {
    top: 0;
}

/*테이블 칸 여백빼기, 선합치기*/
table {border-spacing: 0; border-collapse:collapse;}
/*영문단어 중단점을 음절로 처리*/
/*body {word-break: break-all;}*/

@import url(../../../fonts.googleapis.com/earlyaccess/notosanskr.css);
body,input,button,textarea,select,table {
    font-size: 14px;
    
    font-family:'Nanum Pen Script','Noto Sans KR','맑은 고딕','malgun gothic','돋움',dotum,sans-serif;
}

body{
    overflow:hidden;
}
#loading{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    background-color: #fcfefc;
    display: block;
    text-align: center;
}
#loading_image{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
/*    border: 1px solid #000;*/
}
#loading_image2 {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%,-50%);
    z-index: 100;
}
#wrap{min-width: 1200px;}
/*header*/
#header {
    height: 80px;
}
#header .header_inner {
    width: 1200px;
    height: 80px;
    margin: 0 auto;
}
#header .header_inner .logo {
    float: left;
    margin: 25px 0 0 42px;
} 
/*gnb*/
#header .header_inner .gnb{
    position: relative;
}
#header .header_inner .gnb>ul {
    float: left;
    margin: 30px 0 0 562px;
}
#header .header_inner .gnb>ul>li {
    float: left;
    margin-left: 100px;
    position: relative;
}
#header .header_inner .gnb>ul>li>a em {
    font-size: 36px;
    font-weight: 600;
}
#header .header_inner .gnb>ul>.me>a em{
    color: #e67075;
}
#header .header_inner .gnb>ul>.port>a em{
    color: #d09a66;
}
#header .header_inner .gnb>ul>.exp>a em{
    color: #699ac4;
}
#header .header_inner .gnb>ul>li>a {
    font-size: 32px;
    color: #212121;
    position: relative;
}
/*hover시 bar이미지 서서히 보이기*/
@keyframes bar{
    0%{
        opacity: 0.3;
    } 50% {
        opacity: 1;
    }
}
#header .header_inner .gnb>ul>li:nth-child(1):before{
    content: '';
    position: absolute;
    left: -20px;
    top: 16px;
    width: 100px;
    height: 40px;
    background: url(../images/gnb1_1.png) no-repeat;
    animation: bar 1s ease-in-out;
    display: none;
}
#header .header_inner .gnb>ul>li:nth-child(2):before{
    content: '';
    position: absolute;
    left: -16px;
    top: 15px;
    width: 147px;
    height: 40px;
    background: url(../images/gnb2_2.png) no-repeat;
    animation: bar 1s ease-in-out;
    display: none;
}
#header .header_inner .gnb>ul>li:nth-child(3):before{
    content: '';
    position: absolute;
    left: -30px;
    top: 15px;
    width: 105px;
    height: 40px;
    background: url(../images/gnb3_3.png) no-repeat;
    animation: bar 1s ease-in-out;
    display: none;
}
/*hover*/
#header .header_inner .gnb>ul>li:hover:nth-child(1):before{
    display: block;
}
#header .header_inner .gnb>ul>li:hover:nth-child(2):before{
    display: block;
}
#header .header_inner .gnb>ul>li:hover:nth-child(3):before{
    display: block;
}
#header .header_inner .gnb>ul>li:hover .depth2{
    display: block;
}
/*depth2글씨 확대애니메이션 */
@keyframes text{
    50% {transform: scale(1.15,1.15);}
}
#header .header_inner .gnb .depth2{
    position: absolute;
    left: -27px;
    top: 5px;
    float: left;
    padding-top: 25px;
    display: none;
}

#header .header_inner .gnb .depth2>ul>li {
    float: left;
    margin-right: 5px;
    animation: text 1s ease-in-out;
}
#header .header_inner .gnb .depth2>ul>li>a {
    font-size: 30px;
    color: #212121;
    padding: 2px 0 5px;
}
#header .header_inner .gnb .depth2>ul>li.one>a{
    display: block;
    min-width: 110px;
}
#header .header_inner .gnb .depth2>ul>li.two>a{
    margin-left: 27px;
}
#header .header_inner .gnb .depth2>ul>li.three>a{
    margin-left: -6px;
}
/*main*/
#main {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
/*데스크탑 모달*/
#main .modal{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.95);
    z-index: 100;
    min-width: 1200px;
    display: none;
}
#main .modal .tit .btn_close{
    width: 32px;
    height: 32px;
    position: absolute;
    right: 50%;
    top: 60px;
    background: url(../images/bt_close.png) no-repeat;
    background-size: 32px;
    border: none;
    margin-right: -390px;
    outline: none;
}
#main .modal .tit{
    width: 1200px;
    margin: 80px auto 0;
}
#main .modal img{
    margin-left: 100px;
    width: 1000px;
    height: 100%;
}
/*모바일 모달*/
#main .modal2{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.95);
    z-index: 100;
    min-width: 1200px;
    display: none;
}
#main .modal2 .tit2 .btn_close2{
    width: 32px;
    height: 32px;
    position: absolute;
    right: 50%;
    top: 60px;
    background: url(../images/bt_close.png) no-repeat;
    background-size: 32px;
    border: none;
    margin-right: -390px;
    outline: none;
}
#main .modal2 .tit2{
    width: 1200px;
    margin: 30px auto 0;
}
#main .modal2 img{
    margin-left: 100px;
    width: 1000px;
    height: 100%;
}
/*북마크*/
#main .container {
    position: absolute;
    top: 250px;
    left: 50%;
    margin: auto;
}
#main .container .tabs {
    position: absolute;
    right: 420px;
    top: 0;
    width: 120px;
    height: 500px;
}
#main .container .tabs>a span {
    font-size: 30px;
    display: block;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 1;
    width: 103px;
    line-height: 35px;
    height: 35px;
    margin-left: 20px;
}
/*처음으로*/
#main .container .tabs .intro>span{
    margin-top: -24px;
}
#main .container .tabs .intro img {
    position: absolute;
    right: -6px;
    top:-35px;
}
/*내소개*/
#main .container .tabs .about>span{
    margin-top: 35px;
}
#main .container .tabs .about img{
    position: absolute;
    right: -6px;
    top:35px;
}
/*데스크탑*/
#main .container .tabs .desktop>span{
    margin-top: 35px;
    left:6px;
}
#main .container .tabs .desktop img{
    position: absolute;
    right: -6px;
    top: 105px;
}
/*데스크탑 디자인*/
#main .container .tabs .deskt_d img{
    position: absolute;
    right: 28px;
    top: 171px;
}
#main .container .tabs .deskt_d>span{
    font-size: 22px;
    position: relative;
    margin: 20px 0 0 26px;
    width: 64px;
    height: 30px;
    line-height: 30px;
}
/*데스크탑 코딩*/
#main .container .tabs .deskt_c img{
    position: absolute;
    right: 28px;
    top: 208px;
}
#main .container .tabs .deskt_c>span{
    font-size: 22px;
    position: relative;
    margin: 8px 0 0 20px;
    width: 64px;
    height: 30px;
    line-height: 30px;
}
/*모바일*/
#main .container .tabs .mob>span{
    margin-top: 21px;
    left: -2px;
}
#main .container .tabs .mob img{
    position: absolute;
    right: -6px;
    top: 250px;
}
/*모바일 디자인*/
#main .container .tabs .mob_d>span{
    font-size: 22px;
/*    background: red;*/
    position: relative;
    margin: 21px 0 0 26px;
    width: 64px;
    height: 30px;
    line-height: 30px;
}
#main .container .tabs .mob_d img{
    position: absolute;
    right: 26px;
    top: 316px;
}
/*모바일 코딩*/
#main .container .tabs .mob_c>span{
    font-size: 22px;
/*    background: red;*/
    position: relative;
    margin: 8px 0 0 20px;
    width: 64px;
    height: 30px;
    line-height: 30px;
}
#main .container .tabs .mob_c img{
    position: absolute;
    right: 26px;
    top: 353px;
}
/*에필로그*/
#main .container .tabs .ep>span{
    margin-top: 20px;
    left: 2px;
}
#main .container .tabs .ep img{
    position: absolute;
    right:-6px;
    top: 393px;
}
/*플립*/
#flipbook{
  transition:margin-left 0.2s ease-in-out;
/*    margin: 50px auto 0;*/
    width: 1020px;
    height: 691px;
	left:-510px;
	top:-100px;
}
#flipbook .page{
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,0.2);
    -ms-box-shadow: 0 0 20px rgba(0,0,0,0.2);
    -o-box-shadow: 0 0 20px rgba(0,0,0,0.2);
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
#flipbook .turn-page-wrapper{
    perspective:2000px;
    box-shadow: 2px 5px 10px #d4d4d4;
}
/*첫페이지*/
#flipbook .hard{
    box-shadow: inset 0 0 5px #d4d4d4;    
}
@keyframes titFade{
    0%{opacity: 0},
    100%{opacity: 1;}
}
#flipbook .hard .tit{
    text-align: center;
    position: absolute;
    left: 0;
    top: 240px;
    font-size: 60px;
    color: #fff;
    width: 510px;
    font-family: 'Noto Sans KR';
    font-weight: 100;
    animation: titFade 5s cubic-bezier(0.950, 0.050, 0.795, 0.035); ;
}
/*1*/
#flipbook .me1{
    position: absolute;
    top: 74px;
    left: 85px;
    font-size: 18px;
    color: #636363;
}
#flipbook .me2{
    position: absolute;
    top: 324px;
    left: 13px;
    font-size: 20px;
    color: #636363;
    line-height: 26px;
}
#flipbook .me2>em{
    text-decoration: underline;
}
#flipbook .me3{
    display: block;
    width: 158px;
    height: 149px;
    position: absolute;
    left: 30px;
    top: 97px;
}
#flipbook .me3>img:nth-child(1){
    position: absolute;
    left: 215px;
    top: 113px;
    display: none;
}
#flipbook .me3>img:nth-child(2){
    position: absolute;
    left: 215px;
    top: 283px;
    display: none;
}
#flipbook .me3>img:nth-child(3){
    position: absolute;
    left: 215px;
    top: 460px;
    display: none;
}
/*2*/
#flipbook .ab_me h2{
    width: 510px;
    height: 75px;
    position: absolute;
    top: 250px;
    left: 0;
    font-size: 70px;
    color: #424242;
    text-align: center;
}
#flipbook .ab_me .int{
    position: absolute;
    left: 0;
    top: 380px;
    font-size: 19px;
    color: #5d5d5d;
    padding: 0 20px;
    line-height: 28px;
}
/*페이지번호*/
#flipbook .page_num{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 510px;
    height: 40px;
    color: #424242;
    text-align: center;
    display: block;
    line-height: 40px;
}
/*3*/
#flipbook .portfolio h2{
    width: 510px;
    height: 280px;
    position: absolute;
    left: 0;
    bottom: -80px;
    font-size: 70px;
    color: #424242;
    text-align: center;
    font-weight: 600;
}
#flipbook .port_list {
    position: absolute;
    left: 0;
    top: 157px;
    width: 510px;
    height: 534px;
    text-align: center;
}
#flipbook .port_list ul>.list:nth-child(2) {
    margin-top: 112px;
}
#flipbook .port_list ul>.list>span {
    color: #424242;
    font-size: 42px;
    font-weight: 600;
}

#flipbook .port_list .list .list_inner ul>li{
    margin-left: -127px;
    color: #424242;
    font-size: 25px
}
#flipbook .port_list .list .list_inner ul>li>a{
    color: #424242;
    font-size: 25px
}
/*4*/
#flipbook .pro_dt{
    position: absolute;
    left: 0;
    top: 0;
    height: 691px;
}
#flipbook .pro_dt h2{
    width: 510px;
    text-align: center;
    font-size: 40px;
    color: #424242;
    padding-top: 50px;
}
#flipbook .pro_dt .dt_co {
    float: left;
    margin: 25px 0 0 138px;
}
#flipbook .pro_dt .dt_co li{
    float: left;
    margin-right: 106px;
}
#flipbook .pro_dt .dt_co li a {
    color: #5d5d5d;
    font-size: 18px;
}
#flipbook .pro_dt .link{
    position: absolute;
    left: 65px;
    top: 536px;
    width: 161px;
    height: 67px;
}
#flipbook .pro_dt .link.two{
    position: absolute;
    left: 305px;
    top: 536px; 
}
/*5*/
#flipbook .dt_d{
    position: absolute;
    left: 0;
    top: 0;
    width: 510px;
    height: 691px;
}
#flipbook .dt_d h3 {
    position: absolute;
    left: 0;
    top: 35px;
    width: 510px;
    height: 30px;
    font-size: 30px;
    color: #424242;
    text-align: center;
    font-weight: 600;
}
#flipbook .dt_d ul{
    padding: 90px 0 0 64px;
}
#flipbook .dt_d ul>li{
    font-size: 25px;
    color: #5d5d5d;
    font-weight: 600;
}
#flipbook .dt_d ul>li span{
    color: #5d5d5d;
    font-weight: 400;
}
#flipbook .dt_d ul>li:nth-child(2){
    padding-top: 25px;
    float: left;
}
#flipbook .dt_d ul>li:nth-child(3){
    padding: 25px 0 0 150px;
    float: left;
}
#flipbook .dt_d ul>li:nth-child(4){
    padding-top: 140px;
}
#flipbook .dt_d ul>li strong{
    font-size: 16px;
    color: #565656;
    font-weight: 400;
    padding-left: 105px;
}
#flipbook .dt_d>a{
    display: block;
    width: 225px;
    height: 223px;
    position: absolute;
    left: 152px;
    bottom: 150px;
}

/*6*/
#flipbook .dt_d .dt_d_wrap{
    padding-top: 130px;
}
#flipbook .dt_d .dt_d_inner{
    padding:20px 0 0 53px;
}
#flipbook .dt_d .dt_d_inner:first-child{
    padding-top: 0;
}
#flipbook .dt_d .dt_d_inner h4{
    font-size: 25px;
    color: #5d5d5d;
    font-weight: 600;
}
#flipbook .dt_d .dt_d_inner p{
    font-size: 22px;
    color: #5d5d5d;
    padding-top: 10px;
}
/*7*/
#flipbook .pro_mo{
    position: absolute;
    left: 0;
    top: 0;
    height: 691px;
}
#flipbook .pro_mo h2{
    width: 510px;
    text-align: center;
    font-size: 40px;
    color: #424242;
    padding-top: 40px;
}
#flipbook .pro_mo .mo_co {
    float: right;
    margin: 130px -67px 0 0;
}
#flipbook .pro_mo .mo_co li {
    margin-right: 100px;
}
#flipbook .pro_mo .mo_co li:nth-child(2){
    margin-top: 47px;
}
#flipbook .pro_mo .mo_co li a{
    color: #5d5d5d;
    font-size: 18px;
}
#flipbook .pro_mo .link{
    position: absolute;
    left: 65px;
    top: 536px;
    width: 161px;
    height: 67px;
}
#flipbook .pro_mo .link.two{
    position: absolute;
    left: 305px;
    top: 536px; 
}
/*8*/
#flipbook .mt_d{
    position: absolute;
    left: 0;
    top: 0;
    width: 510px;
    height: 691px;
}
#flipbook .mt_d h3 {
    position: absolute;
    left: 0;
    top: 35px;
    width: 510px;
    height: 30px;
    font-size: 30px;
    color: #424242;
    text-align: center;
    font-weight: 600;
}
#flipbook .mt_d ul{
    padding: 90px 0 0 64px;
}
#flipbook .mt_d ul>li{
    font-size: 25px;
    color: #5d5d5d;
    font-weight: 600;
}
#flipbook .mt_d ul>li span{
    color: #5d5d5d;
    font-weight: 400;
}
#flipbook .mt_d ul>li:nth-child(2){
    padding-top: 25px;
    float: left;
}
#flipbook .mt_d ul>li:nth-child(3){
    padding: 25px 0 0 150px;
    float: left;
}
#flipbook .mt_d ul>li:nth-child(4){
    padding-top: 140px;
}
#flipbook .mt_d ul>li strong{
    font-size: 16px;
    color: #565656;
    font-weight: 400;
    padding-left: 105px;
}
#flipbook .mt_d a{
    display: block;
    width: 250px;
    height: 300px;
    position: absolute;
    left: 138px;
    bottom: 72px;
}

/*13*/
/*2013~16*/
#flipbook .hover:hover .hov1{
    display: none;
}
#flipbook .hover{
    position: absolute;
    left: 59px;
    top: 116px;
    width: 168px;
    height: 195px;
/*    display: none;*/
}
#flipbook .hover h6 {
    font-size: 35px;
    text-align: center;
    color: #fff;
    z-index: 10;
    position: relative;
    margin-top: 35px;
}
#flipbook .hover p {
    font-size: 22px;
    text-align: center;
    color: #fff;
    z-index: 10;
    position: relative;
    margin-top: 30px;
    width: 168px;
    letter-spacing: -1px;
}
#flipbook .hover .hov1{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.90);
    width: 168px;
    height: 195px;
}
#flipbook .hover span {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #fff;
    width: 130px;
    height: 155px;
    left: 18px;
    top: 18px;
}
/*2017*/
#flipbook .hover2:hover .hov2{
    display: none;
}
#flipbook .hover2{
    position: absolute;
    left: 267px;
    top: 114px;
    width: 195px;
    height: 195px;
}
#flipbook .hover2 h6 {
    font-size: 35px;
    text-align: center;
    color: #fff;
    z-index: 10;
    position: relative;
    margin-top: 35px;
}
#flipbook .hover2 p {
    font-size: 22px;
    text-align: center;
    color: #fff;
    z-index: 10;
    position: relative;
    margin-top: 30px;
    width: 195px;
    letter-spacing: -1px;
}
#flipbook .hover2 .hov2{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.90);
    width: 195px;
    height: 195px;
}
#flipbook .hover2 span {
    position: absolute;
    left: 0;
    top: 0;
    border:1px solid #fff;
    width: 155px;
    height: 155px;
    left: 18px;
    top: 18px;
}
/*2018*/
#flipbook .hover3:hover .hov3{
    display: none;
}
#flipbook .hover3{
    position: absolute;
    left: 56px;
    top: 459px;
    width: 408px;
    height: 152px;
}
#flipbook .hover3 h6 {
    font-size: 35px;
    text-align: center;
    color: #fff;
    z-index: 10;
    position: relative;
    margin-top: 22px;
}
#flipbook .hover3 p {
    font-size: 22px;
    text-align: center;
    color: #fff;
    z-index: 10;
    position: relative;
    margin-top: 12px;
    width: 408px;
    letter-spacing: -1px;
}
#flipbook .hover3 .hov3{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.90);
    width: 408px;
    height: 152px;
}
#flipbook .hover3 span {
    position: absolute;
    border:1px solid #fff;
    width: 368px;
    height: 112px;
    left: 18px;
    top: 18px;
}
/*4번째*/
/*2020*/
#flipbook .hover4:hover .hov4{
    display: none;
}
#flipbook .hover4{
    position: absolute;
    left: 147px;
    top: 407px;
    width: 297px;
    height: 212px;
}
#flipbook .hover4 h6 {
    font-size: 35px;
    text-align: center;
    color: #fff;
    z-index: 10;
    position: relative;
    margin-top: 40px;
}
#flipbook .hover4 p {
    font-size: 22px;
    text-align: center;
    color: #fff;
    z-index: 10;
    position: relative;
    margin-top: 25px;
    width: 297px;
    letter-spacing: -1px;
}
#flipbook .hover4 .hov4{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.90);
    width: 297px;
    height: 212px;
}
#flipbook .hover4 span {
    position: absolute;
    border:1px solid #fff;
    width: 257px;
    height: 172px;
    left: 18px;
    top: 18px;
}
/*2025*/
#flipbook .hover_wrap5{

}
#flipbook .hover5:hover .hov5{
    display: none;
}
#flipbook .hover5{
    position: absolute;
    left: 146px;
    top: 94px;
    width: 297px;
    height: 190px;
}
#flipbook .hover5 h6 {
    font-size: 35px;
    text-align: center;
    color: #fff;
    z-index: 10;
    position: relative;
    margin-top: 35px;
}
#flipbook .hover5 p {
    font-size: 22px;
    text-align: center;
    color: #fff;
    z-index: 10;
    position: relative;
    margin-top: 25px;
    width: 297px;
    letter-spacing: -1px;
}
#flipbook .hover5 .hov5{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.90);
    width: 297px;
    height: 190px;
}
#flipbook .hover5 span {
    position: absolute;
    border:1px solid #fff;
    width: 257px;
    height: 150px;
    left: 18px;
    top: 18px;
}