/* TABLET VERTICAL*/
@media screen and (min-width: 768px) and (max-width: 1023px){
    .content-wrap {width: 100%;}
    .content {width: 100%;}

    #home {position: relative; width: 100%; height: calc(100vh + 40px); background-image: url(../img/bg02.jpg); background-size: cover; background-repeat: no-repeat; background-position: 50% 60%;}
    .home-wrap {width: 100%; height: 100%; margin: 0 auto; background-color: #00000060;}
    .main-wrap {display: block; position: relative; width: 300px; height: 300px; background-color: transparent; border: 2px solid #ffffffcc; padding: 9px; margin-right: auto; margin-left: auto;}
    .design-box {display: block; position: relative; width: 300px; height: 230px; background-color: #ffffffcc; padding-top: 70px;}
    .design-box h1 {display: block; width: 200px; margin: 0 auto;}
    .design-box h1 img {width: 200px; margin: 0 auto;}
    .design-box .typing {text-align: center; margin-top: 60px; letter-spacing: 1pt; font-weight: 300; word-break:keep-all; padding: 10px;}

    #about {position: relative; width: 100%; height: 1040px; background-color: #99ff99;}
    .about-wrap {width: 100%; height: 700px; background-color: #000000; margin: 0 auto;}
    .img-area {float: left; width: 100%; height: 300px; background-color: #ececec; overflow: hidden;}
    .my-pic {width: 100%; height: 120%; background-image: url(../img/personal02.jpg); background-repeat: no-repeat; background-size: cover; background-position: 60% 30%; }
    .bright {width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.2);}
    .text-area {width: 100%; height: 400px; background-color: #ffffff; float: right; overflow: hidden;}
    .slide-wrap {cursor: move;width: 100%; height: 330px; margin-left: 0; }
    .speak-wrap { width: 50%; height: 330px; float: left;}
    .speak {width: 460px; margin:20px auto 0; line-height: 22px; font-size: 14px; letter-spacing: 0.1pt; text-align: center; word-break:keep-all;}
    .speak span {font-weight: 600;}
    .profile-wrap {width: 50%; height: 330px; float: left;}
    .profile {width: 400px; margin: 40px auto 0;}
    .profile li {margin: 10px 0 0 0;}
    .profile li span.title {display: inline-block; width: 68px;font-size: 14px; font-weight: 700; margin-right: 10px;}
    .profile li span.sub {font-size: 14px; margin-left: 10px;}
    .slide-dot {}
    .dot-ul {width: 52px; height: 12px; margin: 60px auto 0;}
    .dot-li {float: left; margin: 0 6px;}
    .dot-btn {display: none; width: 12px; height: 12px; border-radius: 50%; background-color: #e3e3e3; font-size: 0; color: transparent; text-indent: -9999;}
    .sel-dot {background-color: #606060;}
    .slick-dots {width: 36px; margin: 30px auto 0;}
    .slick-dots > li {float: left; width: 12px; height: 12px; font-size: 0; text-indent: -9999; color: transparent; background-color: #e3e3e3; border-radius: 6px; cursor:pointer; margin: 0 3px;}
    .slick-dots > li.slick-active {background-color: #606060;}

    .study-wrap {position: relative; width: 100%; height: 250px; padding: 50px 0 40px; background-coloR: #eeeeee;}
    .study-desc {position: relative; width: 700px; height: 300px; margin: 0 auto;}
    .study-desc h2 {text-align: right; font-size: 30px; font-weight: 700;}
    .study-desc p.iwaskaywon {font-size: 16px; font-weight: 600; text-align: right; margin: 15px 0 15px;}
    .study-desc p.iwaskaywon span.grad-day {margin-right: 8px; padding-right: 10px; border-right: 2px solid #000; height: 24px; display: inline-block; line-height: 24px;}
    .study-desc p.istudied {text-align: right; line-height: 24px; font-size: 14px; font-weight: 300; letter-spacing: 0.4pt;}



    #identity {position: relative; width: 100%; height: 400px; background-color: #f8f8f8;}
    .identity-wrap {width: 700px; height: 100%;  margin: 0 auto;}
    .identity-wrap h2 {font-size: 30px; font-weight: 700; text-transform: uppercase; text-align: center; padding-top: 46px;}
    .identity-wrap .desc {font-size: 15px; font-weight: 300; text-align: center; line-height: 24px; letter-spacing: 0.4pt; margin-top: 30px; word-break: keep-all;}
    .identity-logo {width: 100%; height: 400px;}
    .identity-logo img{position: absolute; right: 0; bottom: 0; margin-bottom: -20px; width: 450px; opacity: 0.2;}


    #work {position: relative; width: 100%; height: 1040px; background-color: #eee;}
    .work-wrap {width: 700px; height: 100%; background-color: #eee; margin: 0 auto;}
    .work-desc {position: relative; display: inline-block; width: 700px; margin-top: 60px;  vertical-align: top;}
    .work-desc h2 {font-size: 30px; font-weight: 700; text-transform: uppercase; display: inline-block; margin-right: 10px;}
    .work-desc .design-bar {display: none;}
    .work-desc p {display: inline-block;}
    .more-work {background-color: #2f2f2f; color: #fff; padding: 3px 8px 4px; position: absolute; right: 0;}
    
    .work-list {position:relative; display: inline-block; width: 100%; margin-top: 40px;}
    .work-list-ul {}
    .work-list-li {width: 100%; height: 260px; overflow: hidden; margin-bottom: 20px;}
    .work-list-li:first-child a {position:relative; display: block; width: 100%; height: 100%; background-image: url(../img/work/life_is_a_game.jpg); background-position: 50% 50%; background-repeat:no-repeat;}
    .work-list-li:nth-child(2) a {position: relative; display: block; width: 100%; height: 100%; background-image: url(../img/work/portfolio.jpg); background-position: 50% 50%; background-repeat:no-repeat;}
    .work-list-li:last-child a {position: relative; display: block; width: 100%; height: 100%; background-image: url(../img/work/boss_loop.jpg); background-position: 50% 50%; background-repeat:no-repeat;}
    .work-list-li a {
        background-size: 100% auto;
    }

    .work-list-li a{
        transition: all 1600ms ease-out;
        
    }
    .work-list-li a:hover{

        background-size: 120% auto;
    }

    .dark-box {position: relative; width: 100%; height: 100%; background-color: #00000044;}
    .work-about {position: absolute; bottom: 0; margin-bottom: -80px; display: block; width: 100%; height: 80px; background-color: rgba(0, 0, 0, 0.7);}
    .work-about h3 {position: absolute; bottom: 20px; left: 20px; font-size: 24px; font-weight: 700; color: #fff; height: 30px; line-height: 30px;}
    .work-about ul.work-sub {position: absolute; top: 10px; right: 5px;}
    .work-sub li {display: inline-block; font-size: 12px; background-color: #c3c3c3; color: #3c3c3c; padding: 2px 7px 3px; border-radius: 20px; margin-right: 4px;}

    /* #note {overflow: hidden; position: relative; width: 100%; height: 940px; background-color: #ddd;}
    .note-wrap {width: 700px;height: 100%; background-color: #ddd; margin: 0 auto;}
    .note-desc {position: absolute; z-index: 30; display: inline-block; width: 700px; margin-top: 60px;}
    .note-desc h2 {font-size: 30px; font-weight: 700; text-transform: uppercase;}
    .note-desc p{}
    .note-desc div.slide-btn{position: absolute; margin-top: 680px; width: 100%;text-align: center;}
    .note-desc div.slide-btn a.prev-btn{ display: inline-block; width: 40px; height: 24px; line-height: 20px; text-align: center; padding: 4px 8px 3px; background-color: #666; margin-right: 4px;}
    .note-desc div.slide-btn a.next-btn{ display: inline-block; width: 40px; height: 24px; line-height: 20px; text-align: center; padding: 4px 8px 3px; background-color: #666; margin-left: 4px}
    .note-desc div.slide-btn a.note-more{clear: both; display: block;}
    /* .slide-btn {position: relative; z-index: 25;} */
 
    /* .note-slide {position: absolute; z-index: 20; width: 600px; top: 200px; overflow: hidden; margin-left: 50px;}
    .note-slide-ul {width: 1000%; margin-left: 0; }
    .note-slide-li {float: left; width: 600px; height: 600px; background-color: #fff; margin-right: 40px; opacity: 0.2;}
    .note-sel {    }
    .note-slide-li a {cursor: default; display: block; width: 600px;height: 600px;}
    .note-sel a {cursor: pointer;} */


    #contact {position: relative; width: 100%; height: calc(100vh - 120px); background-color: #2f2f2f;}
    .contact-wrap {width: 100%; height: 100%;  margin: 0 auto;}
    .contact-design-box {position: relative; width: 700px; height: 400px; padding: 4px; margin-right: auto; margin-left: auto; border: 2px solid #ffffff66;}
    .contact-box {width: 700px; height: 400px; background-color: #ffffff66;}
    .contact-box h2 {position: relative; font-size: 30px; font-weight: 700; text-align: center; padding-top: 40px;}
    .contact-box p {text-align: center; font-size: 18px; margin-top: 10px;}
    .contact-list {width: 690px; height: 120px; margin-top: 30px; margin-right: auto; margin-left: auto;}
    .contact-list .contact-list-li {float: left; width: 220px; height:110px; margin: 0 5px; background-color: #ffffff;}
    .contact-list .contact-list-li dl {}
    .contact-list .contact-list-li dt {text-align: center; font-weight: 500; margin-bottom: 3px;}
    .contact-list .contact-list-li dt span {display: block; width: 20px; height: 20px;  margin: 7px auto 6px;}
    .contact-list .contact-list-li dt span.phone-icon {background-image: url(../img/phone.png); background-repeat: no-repeat; background-position: 0 0; background-size: 20px 20px;}
    .contact-list .contact-list-li dt span.address-icon {background-image: url(../img/location.png); background-repeat: no-repeat; background-position: 0 0; background-size: 20px 20px;}
    .contact-list .contact-list-li dt span.email-icon {background-image: url(../img/email.png); background-repeat: no-repeat; background-position: 0 0; background-size: 20px 20px;}
    .contact-list .contact-list-li dd {font-size: 14px; text-align: center;}

    .dl-box {clear: both; width: 250px; margin: 50px auto 0;}
    .dl-box ul {}
    .dl-box ul li {display:inline-block;}
    .dl-box ul li a {display:block; width: 246px; height: 56px; border: 2px solid #fff; text-align: center; line-height: 53px; color: #fff; font-weight: 400; letter-spacing: 1.2px;}

    .design-bar {display: block; width: 40px; height: 7px; margin-top: 6px; margin-bottom: 12px;background-color: #e2e2e2;}
}