@charset "utf-8";

@import url("common.css");

.wrap {
    position: relative;
    margin:0 auto;
    width: 100%;
    z-index: 1;
}
/* 상세 페이지 */
.sub {
    overflow-x: visible;
}
.btn-back {
    position: fixed;
}
.btn-back button {
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/img/btn_close.svg');
    background-size: 100% 100%;
}
.btn-back.wht button {
    background-image: url('/img/btn_close_wht.svg');
}
.btn-back span {
    font-size:0;
    text-indent:-999em;
}
.detail-visual {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
}
.detail-visual.hyundai {
    background-color: #F7F3F2;
}
.detail-visual.eschool {
    background-color: #CEE1F9;
}
.detail-visual.s4u {
    background-color: #D6E8FE;
}
.detail-visual.online {
    background-color: #D1E9E8;
}
.detail-visual.ondot {
    background-color: #32383D;
}
.detail-visual.hub {
    background-color: #F9F5F2;
}
.detail-visual.dream {
    background-color: #C9EFF6;
}
.detail-visual.hcc {
    background-color: #D6DFE4;
}
.detail-visual.pay {
    background-color: #E8E7E2;
}
.detail-visual.lottecard {
    background-color: #A6E6CE;
}
.detail-visual.ican {
    background-color: #E9E8E3;
}
.detail-visual.yellow {
    background-color: #649bc1;
}
.detail-visual.tmax {
    background-color: #1C1620;
}
.detail-visual.daeduck {
    background-color: #18121D;
}
.detail-visual.inss {
    background-color: #BEE1F1;
}
.detail-visual.total {
    background-color: #D3E1FB;
}
.detail-visual .project-name {
    font-weight: 700;
    color:#111;
}
.detail-visual .project-name.wht {
    color:#fff;
}
.detail-visual .project-name .brand-txt {
    display: block;
    font-weight: 400;
    color:#666;
}
.detail-visual .project-name.wht .brand-txt {
    color:#fff;
}
.detail-visual .wrap {

}
.detail-cont .wrap {
    padding:0;
}
.detail-cont .w100 {
    width: 100%;
}
.detail-info {
}
.detail-info dl {
}
.detail-info dt {
    color:rgba(0,0,0,0.6);
}
.detail-info dd {
    color:#111;
    font-weight: 700;
}
.detail-about {

}
.detail-about h3 {
    font-weight: 700;
    color:#111;
}
.detail-about .explain {
    word-break: keep-all;
    color:#666;
}
.detail-about .btn-wrap {
    text-align: left;
}
.detail-about .btn-wrap .btn {
}
.detail-about .top-view {
    overflow:hidden;
}

.detail-view {
}
.detail-view.no-p {
    padding:0;
    text-align: center;
}
.detail-view.lg {
}
.detail-view.gray {
    background:#EFEFF0;
}
.detail-view.h-theme {
    background:#ECE2DF;
}
.detail-view.s-theme {
    background:#4C629A;
}
.detail-view.s4u-theme {
    background:#3D6BAF;
}
.detail-view.on-theme {
    background:#8BB2B1;
}
.detail-view.dot-theme {
    background:#D6B798;
}
.detail-view.hub-theme {
    background:#EEDBC9;
}
.detail-view.dream-theme {
    background:#8ACADE;
}
.detail-view.hcc-theme {
    background:#5776BB;
}
.detail-view.lcard-theme {
    background:#CEE8DE;
}
.detail-view.ican-theme {
    background:#EEC9C9;
}
.detail-view.yellow-theme {
    background:#FFC72C;
}

.detail-view .shadow {
}
.detail-view .text-view {}
.detail-view .text-view dl {
    color:#111;
}
.detail-view .text-view dl:first-child {
    margin-top:0;
}
.detail-view .text-view dt,
.detail-view .text-view dd {
    display:inline-block;
    vertical-align: top;
}
.detail-view .text-view dt {
    font-weight: 700;
}
.detail-view .text-view dd {
    color:#666;
}

/* 상세 페이지 */

.detail-visual.hyundai {
    background-image: url('/img/work/top_hyundai.png');
}
.detail-visual.eschool {
    background-image: url('/img/work/top_eschool.png');
}
.detail-visual.s4u {
    background-image: url('/img/work/top_s4u.png');
}
.detail-visual.online {
    background-image: url('/img/work/top_online.png');
}
.detail-visual.ondot {
    background-image: url('/img/work/top_ondot.png');
}
.detail-visual.hub {
    background-image: url('/img/work/top_hub.png');
}
.detail-visual.dream {
    background-image: url('/img/work/top_dream.png');
}
.detail-visual.hcc {
    background-image: url('/img/work/top_hcc.png');
}
.detail-visual.pay {
    background-image: url('/img/work/top_pay.png');
}
.detail-visual.lottecard {
    background-image: url('/img/work/top_lottecard.png');
}
.detail-visual.ican {
    background-image: url('/img/work/top_ican.png');
}
.detail-visual.yellow {
    background-image: url('/img/work/top_yellow.png');
}
.detail-visual.tmax {
    background-image: url('/img/work/top_tmax.png');
}
.detail-visual.daeduck {
    background-image: url('/img/work/top_daeduck.png');
}
.detail-visual.inss {
    background-image: url('/img/work/top_inss.png');
}
.detail-visual.total {
    background-image: url('/img/work/top_total.png');
}
.sub {
    overflow-x: visible;
}
.btn-back {
    position: fixed;
    top:60px;
    right: 60px;
    z-index: 11;
}
.btn-back button {
    width:57px;
    height:57px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url('/img/btn_close.svg');
    background-size: 100% 100%;
}
.btn-back.wht button {
    background-image: url('/img/btn_close_wht.svg');
}
.btn-back span {
    font-size:0;
    text-indent:-999em;
}
.detail-visual {
    height:600px;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
}
.detail-visual .project-name {
    font-size: 64px;
    line-height:80px;
    font-weight: 700;
    color:#111;
}
.detail-visual .project-name.wht {
    color:#fff;
}
.detail-visual .project-name .brand-txt {
    display: block;
    font-size: 22px;
    line-height:40px;
    font-weight: 400;
    color:#666;
}
.detail-visual .project-name.wht .brand-txt {
    color:#fff;
}
.detail-visual .wrap {
    max-width: 1204px;
}
.detail-cont .wrap {
    padding:0;
    max-width: 1204px;
}
.detail-cont .w100 {
    width: 100%;
}
.detail-info {
    padding:86px 0 118px
}
.detail-info dl {
    display: inline-block;
    margin-right:51px;
    font-size:18px;
}
.detail-info dt {
    color:rgba(0,0,0,0.6);
    line-height: 40px;
}
.detail-info dd {
    color:#111;
    font-weight: 700;
}
.detail-about {
    margin-top:82px;
}
.detail-about h3 {
    font-size: 30px;
    line-height: 40px;
    font-weight: 700;
    color:#111;
}
.detail-about .explain {
    margin-top:34px;
    max-width: 82%;
    font-size:18px;
    line-height: 32px;
    word-break: keep-all;
    color:#666;
}
.detail-about .btn-wrap {
    margin-top:30px;
    text-align: left;
}
.detail-about .btn-wrap .btn {
    line-height: 69px;
}
.detail-about .top-view {
    margin-top:75px;
    border-radius: 20px;
    overflow:hidden;
    box-shadow: 13px 35px 70px 10px rgba(0, 0, 0, 0.15);
}

.detail-view {
    padding:160px 0 70px;
}
.detail-view.no-p {
    padding:0;
    text-align: center;
}
.detail-view.lg {
    padding:201px 0 216px;
}
.detail-view.gray {
    background:#EFEFF0;
}
.detail-view.h-theme {
    background:#ECE2DF;
}
.detail-view.s-theme {
    background:#4C629A;
}
.detail-view.s4u-theme {
    background:#3D6BAF;
}
.detail-view.on-theme {
    background:#8BB2B1;
}
.detail-view.dot-theme {
    background:#D6B798;
}
.detail-view.hub-theme {
    background:#EEDBC9;
}
.detail-view.dream-theme {
    background:#8ACADE;
}
.detail-view.hcc-theme {
    background:#5776BB;
}
.detail-view.total-theme {
    background:#003675;
}
.detail-view.lcard-theme {
    background:#CEE8DE;
}
.detail-view.ican-theme {
    background:#EEC9C9;
}
.detail-view .shadow {
    margin-left:-68px
}
.detail-view.yellow .shadow {
    margin-left:22px
}
.detail-view .text-view {}
.detail-view .text-view dl {
    margin-top:50px;
    color:#111;
}
.detail-view .text-view dl:first-child {
    margin-top:0;
}
.detail-view .text-view dt,
.detail-view .text-view dd {
    display:inline-block;
    vertical-align: top;
}
.detail-view .text-view dt {
    min-width:260px;
    font-size: 30px;
    line-height:40px;
    font-weight: 700;
}
.detail-view .text-view dd {
    font-size:18px;
    line-height: 32px;
    color:#666;
}


@media (max-width: 991px) {
    /* 상세 페이지 */
    .sub {
        overflow-x: visible;
    }
    .btn-back {
        position: fixed;
        top:16px;
        right: 16px;
    }
    .btn-back button {
        width:20px;
        height:20px;
    }
    .btn-back.wht button {
        background-image: url('/img/btn_close_wht.svg');
    }
    .btn-back span {
        font-size:0;
        text-indent:-999em;
    }
    .detail-visual {
        height:206px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        box-sizing: border-box;
    }
    .detail-visual.hyundai {
        background-image: url('/img/work/m_top_hyundai.png');
    }
    .detail-visual.eschool {
        background-image: url('/img/work/m_top_eschool.png');
    }
    .detail-visual.s4u {
        background-image: url('/img/work/m_top_s4u.png');
    }
    .detail-visual.online {
        background-image: url('/img/work/m_top_online.png');
    }
    .detail-visual.ondot {
        background-image: url('/img/work/m_top_ondot.png');
    }
    .detail-visual.hub {
        background-image: url('/img/work/m_top_hub.png');
    }
    .detail-visual.dream {
        background-image: url('/img/work/m_top_dream.png');
    }
    .detail-visual.hcc {
        background-image: url('/img/work/m_top_hcc.png');
    }
    .detail-visual.pay {
        background-image: url('/img/work/m_top_pay.png');
    }
    .detail-visual.lottecard {
        background-image: url('/img/work/m_top_lottecard.png');
    }
    .detail-visual.ican {
        background-image: url('/img/work/m_top_ican.png');
    }
    .detail-visual .project-name {
        padding:0 16px;
        font-size: 22px;
        line-height:32px;
    }
    .detail-visual .project-name.wht {
        color:#fff;
    }
    .detail-visual .project-name .brand-txt {
        font-size: 14px;
        line-height:40px;
    }
    .detail-visual .project-name.wht .brand-txt {
        color:#fff;
    }
    .detail-visual .wrap {
        max-width: 1204px;
    }
    .detail-cont .wrap {
        padding:0;
        max-width: 1204px;
    }
    .detail-cont .w100 {
        width: 100%;
    }
    .detail-info {
        padding:26px 16px 40px
    }
    .detail-info dl {
        display: flex;
        align-items: center;
    }
    .detail-info dt {
        display: block;
        line-height: 40px;
        min-width: 18%;
        font-size:14px;
    }
    .detail-info dd {
        font-size:16px; 
    }
    .detail-about {
        margin-top:38px;
    }
    .detail-about h3 {
        font-size: 22px;
        line-height: 32px;
    }
    .detail-about .explain {
        margin-top:34px;
        font-size:14px;
        line-height: 21px;
    }
    .detail-about .btn-wrap {
        margin-top:30px;
        text-align: left;
    }
    .detail-about .btn-wrap .btn {
        line-height: 44px;
    }
    .detail-about .top-view {
        margin-top:8px;
        border-radius: 20px;
        overflow:hidden;
        box-shadow: 7px 17px 35px 5px rgba(0, 0, 0, 0.15);
    }
    
    .detail-view {
        padding:37px 0 37px;
    }
    .detail-view.no-p {
        padding:0;
        text-align: center;
    }
    .detail-view.lg {
        padding:201px 0 216px;
    }
    .detail-view.gray {
        background:#EFEFF0;
    }
    .detail-view.h-theme {
        background:#ECE2DF;
    }
    .detail-view.s-theme {
        background:#4C629A;
    }
    .detail-view.s4u-theme {
        background:#3D6BAF;
    }
    .detail-view.on-theme {
        background:#8BB2B1;
    }
    .detail-view.dot-theme {
        background:#D6B798;
    }
    .detail-view.hub-theme {
        background:#EEDBC9;
    }
    .detail-view.dream-theme {
        background:#8ACADE;
    }
    .detail-view.hcc-theme {
        background:#5776BB;
    }
    .detail-view.lcard-theme {
        background:#CEE8DE;
    }
    .detail-view.ican-theme {
        background:#EEC9C9;
    }
    .detail-view .shadow {
        margin-left:0
    }
    .detail-view .text-view {}
    .detail-view .text-view dl {
        margin-top:50px;
        color:#111;
    }
    .detail-view .text-view dl:first-child {
        margin-top:0;
    }
    .detail-view .text-view dt,
    .detail-view .text-view dd {
        display:inline-block;
        vertical-align: top;
    }
    .detail-view .text-view dt {
        min-width:260px;
        font-size: 30px;
        line-height:40px;
    }
    .detail-view .text-view dd {
        font-size:18px;
        line-height: 32px;
    }
}

/* animation css */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.slow-animated {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}
.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-30%, 0, 0);
        transform: translate3d(-30%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.active .fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@keyframes shotFadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-30%, 0, 0);
        transform: translate3d(-30%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.active .shotFadeInLeft {
    -webkit-animation-name: shotFadeInLeft;
    animation-name: shotFadeInLeft;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.active .fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.active .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes shotFadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes shotFadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.active .shotFadeInUp {
    -webkit-animation-name: shotFadeInUp;
    animation-name: shotFadeInUp;
}


@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.active .fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
@-webkit-keyframes ShotfadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(30%, 0, 0);
        transform: translate3d(30%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ShotfadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(30%, 0, 0);
        transform: translate3d(30%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.active .ShotfadeInRight {
    -webkit-animation-name: ShotfadeInRight;
    animation-name: ShotfadeInRight;
}
@keyframes slideInDown {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.active .slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.active .slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}