.contents{
    transition: all .3s linear;
}
.content {
    position: relative;
    animation-name: contentani;
    animation-duration: 1s;
    margin-top:100px;
    padding-bottom: 200px;
}

@keyframes contentani { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 }
}

.visual{
    width: 50%;
    margin: 0 auto;
    margin-top: 300px;
    height: 600px;
    background-image: url(../img/graphic1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    animation-name: VisualBgWidth;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode:both;
}
@keyframes VisualBgWidth{
    0%{width: 50%;}
    100%{width: 100%;}
}
.visual .center_box{
    width: 1400px;
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
}
.visual .center_box > .outline{
    font-size: 120px;
    font-weight: bold;
    color: #dbf81f;
    font-family: 'CookieRun-Regular';
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
.visual .center_box > .outline .fill{
    position: absolute;
    color: #fff;
    top: -4px;
    left: -5px;
}

.section.simple{
    height: 200px;
    margin-top: 80px;
    opacity: 0;
}
.section.simple .center_box{
    width: 1400px;
    margin: 0 auto;
}
.section.simple h2{
    font-size: 40px;
    text-align: center;
    font-family: 'KOTRA_BOLD-Bold';
}
.section.simple p{
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
}

/* 섹션 그래픽 */
.graphic_list{
    height: 605px;
    margin-top: 100px;
}
.graphic_list > ul > li{
    width: 100%;
    height: 150px;
    float: left;
    border-top: 1px solid #949494;
}
.graphic_list > ul > li:last-child{
    border-bottom: 1px solid #949494;
}
.graphic_list .center_box{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    opacity: 0;
}
.graphic_list .preview{
    width: 150px;
    height: 150px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.graphic_list .preview ul li{
    width: 150px;
    height: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.graphic_list .detail .text{
    font-size: 80px;
    font-weight: bold;
    color: #fff;
    font-family: 'CookieRun-Regular';
}
.graphic_list .detail .text.purple{
    -webkit-text-stroke: 1px #6400ff;
}
.graphic_list .detail .text.orange{
    -webkit-text-stroke: 1px #ff7800;
}
.graphic_list .detail .text.yellow{
    -webkit-text-stroke: 1px #ffb700;
}
/* .banner_design */
.graphic_list .banner_design .preview{
    background-image: url(../img/banner1_thumbnail.jpg);
    order: 2;
}
.graphic_list .banner_design .detail{
    order: 1;
    width: 800px;
}
/* .package_design */
.graphic_list .package_design .preview{
    background-image: url(../img/package1_thumbnail.jpg);
    border-radius: 20px;
    margin-left: 100px;
    margin-right: 300px;
}
.graphic_list .package_design .detail{
    width: 500px;
}
/* .more_design */
.graphic_list .more_design .preview{
    margin-left: 450px;
    background-image: url(../img/idcard1_thumbnail.jpg);
    order: 2;
}
.graphic_list .more_design .detail{
    order: 1;
    width: 600px;
}
.graphic_list .more_design .detail .text{
    text-align: right;
}
/* .package_design */
.graphic_list .web_design .preview{
    background-image: url(../img/banner2_thumbnail.jpg);
    border-radius: 50%;
    margin-left: 500px;
    margin-right: 200px;
}
.graphic_list .web_design .detail{
    width: 100px;
}

/* 섹션 more graphic */
.section.graphic_more{
    height: 630px;
    margin-top: 200px;
    opacity: 0;
}
.section.graphic_more .center_box>h1{
    text-align: center;
    font-size: 60px;
    color: #425a73;
    font-family: 'NEXON Lv1 Gothic OTF';
}
.section.graphic_more .view{
    width: 920px;
    height: 510px;
    margin: 0 auto;
    position: relative;
    margin-top: 50px;
}
.section.graphic_more .btn button{
    width: 21px;
    height: 39px;
    border: none;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.section.graphic_more .btn button.prev{
    background-image: url(../img/prev.png);
    left: -35px;
}
.section.graphic_more .btn button.next{
    background-image: url(../img/next.png);
    right: -35px;
}
.section.graphic_more .btn button.prev:hover{
    background-image: url(../img/prev-hover.png);
}
.section.graphic_more .btn button.next:hover{
    background-image: url(../img/next-hover.png);
}

.section.graphic_more .view_box{
    /* width: 920px; */
    height: 510px;
    position: relative;
    overflow: hidden;
}
.section.graphic_more .view_inbox{
    width: 1840px;
    position: absolute;
    top: 0;
    left: 0;
}
.section.graphic_more ul{
    width: 920px;
    display: grid;
    gap: 10px;
    float: left;
}
.section.graphic_more ul li{
    border: 1px solid #949494;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    position: relative;
}

/* 마우스 오버했을때 */
.section.graphic_more ul li .view-on{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba( 255, 255, 255, 0.4 );
    backdrop-filter: blur( 10px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    font-family: 'CookieRun-Regular';
    opacity: 0;
    text-align: center;
}
.section.graphic_more ul li:hover .view-on{
    opacity: 1;
}


/* v1 */
.section.graphic_more ul.v1{
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 300px 200px;
}
.section.graphic_more ul.v1 li:first-child{
    background-image: url(../img/idcard1_thumbnail.jpg);
}
.section.graphic_more ul.v1 li:nth-child(2){
    background-image: url(../img/package1_thumbnail.jpg);
}
.section.graphic_more ul.v1 li:nth-child(3){
    background-image: url(../img/leaflet1_thumbnail.jpg);
    grid-column: 3/4;
    grid-row: 1/3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.section.graphic_more ul.v1 li:last-child{
    background-image: url(../img/banner3.jpg);
    grid-column: 1/3;
}

/* v2 */
.section.graphic_more ul.v2{
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 250px 250px;
}
.section.graphic_more ul.v2 li:first-child{
    background-image: url(../img/banner1_thumbnail.jpg);
    grid-column: 1/2;
    grid-row: 1/2;
}
.section.graphic_more ul.v2 li:nth-child(2){
    background-image: url(../img/page1_thumbnail.jpg);
    grid-column: 2/3;
    grid-row: 1/2;
}
.section.graphic_more ul.v2 li:nth-child(3){
    background-image: url(../img/banner3_thumbnail.png);
    grid-column: 3/4;
    grid-row: 1/3;
}
.section.graphic_more ul.v2 li:nth-child(4){
    background-image: url(../img/poster_thumbnail.jpg);
    grid-column: 1/2;
    grid-row: 2/3;

}
.section.graphic_more ul.v2 li:last-child{
    background-image: url(../img/illust1_thumbnail.jpg);
    grid-column: 2/3;
    grid-row: 2/3;
}

/* 마우스 오버했을때 */
.section.graphic_web ul li .view-on{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba( 255, 255, 255, 0.4 );
    backdrop-filter: blur( 10px );
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    font-family: 'CookieRun-Regular';
    opacity: 0;
    text-align: center;
}
.section.graphic_web ul li:hover .view-on{
    opacity: 1;
}


/* v3 */
.section.graphic_web ul.v3{
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 300px 200px;
}
.section.graphic_web ul.v3 li:first-child{
    background-image: url(../img/idcard1_thumbnail.jpg);
}
.section.graphic_web ul.v3 li:nth-child(2){
    background-image: url(../img/package1_thumbnail.jpg);
}
.section.graphic_web ul.v3 li:nth-child(3){
    background-image: url(../img/leaflet1_thumbnail.jpg);
    grid-column: 3/4;
    grid-row: 1/3;
}
.section.graphic_web ul.v3 li:last-child{
    background-image: url(../img/banner3.jpg);
    grid-column: 1/3;
}

/* v4 */
.section.graphic_web ul.v4{
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 250px 250px;
}
.section.graphic_web ul.v4 li:first-child{
    background-image: url(../img/banner1_thumbnail.jpg);
    grid-column: 1/2;
    grid-row: 1/2;
}
.section.graphic_web ul.v4 li:nth-child(2){
    background-image: url(../img/page1_thumbnail.jpg);
    grid-column: 2/3;
    grid-row: 1/2;
}
.section.graphic_web ul.v4 li:nth-child(3){
    background-image: url(../img/banner3_thumbnail.png);
    grid-column: 3/4;
    grid-row: 1/3;
}
.section.graphic_web ul.v4 li:nth-child(4){
    background-image: url(../img/poster_thumbnail.jpg);
    grid-column: 1/2;
    grid-row: 2/3;

}
.section.graphic_web ul.v4 li:last-child{
    background-image: url(../img/illust1_thumbnail.jpg);
    grid-column: 2/3;
    grid-row: 2/3;
}

/* 팝업 */
.popup_view{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 110;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup_view .popup_box{
    width: 1000px;
    height: 750px;
    position: relative;
}
.popup_view .popup_box > div{
    position: absolute;
}
.popup_view ul li{
    width: 1000px;
    height: 750px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
}
.popup_view ul li .header_detail{
    width: 100%;
    height: 50px;
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    padding: 0 20px;
    flex-shrink: 0;
}
.popup_view ul li .header_detail h2{
    font-size: 30px;
}
.popup_view ul li .header_detail span{
    margin-left: 10px;
    font-size: 16px;
}
.popup_view ul li .popup_detail{
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.popup_view .v1-detail ul li:first-child .popup_detail{
    background-image: url(../img/idcard1.png);
}
.popup_view .v1-detail ul li:nth-child(2) .popup_detail{
    background-image: url(../img/package1.png);
}
.popup_view .v1-detail ul li:nth-child(3) .popup_detail{
    background-image: url(../img/leaflet1.png);
}
.popup_view .v1-detail ul li:nth-child(4) .popup_detail{
    background-image: url(../img/banner3.jpg);
}

.popup_view .v2-detail ul li:first-child .popup_detail{
    background-image: url(../img/banner1.png);
}
.popup_view .v2-detail ul li:nth-child(2) .popup_detail{
    background-image: url(../img/page1.png);
}
.popup_view .v2-detail ul li:nth-child(3) .popup_detail{
    background-image: url(../img/page2.png);
}
.popup_view .v2-detail ul li:nth-child(4) .popup_detail{
    background-image: url(../img/poster1.png);
}
.popup_view .v2-detail ul li:nth-child(5) .popup_detail{
    background-image: url(../img/illust1.png);
}


/* 반응형 */
@media screen and (max-width:1600px){
    .visual .center_box{width: 1200px;}
    .graphic_list .center_box {width: 1000px;}
}

@media screen and (max-width:1440px){
    .visual {height: 500px;}
    .visual .center_box{width: 1000px;}
    .section.simple .center_box{width: 1200px;}

}

@media screen and (max-width:1280px){
    .content{padding-bottom: 150px;}
    .visual{margin-top: 250px;}
    .visual .center_box{width: 900px; top: -60px;}
    .visual .center_box > .outline {font-size: 90px;}
    
    .section.simple .center_box {width: 1000px;}
    .section.simple h2{font-size: 35px;}
    .section.simple p {font-size: 18px;}
    .graphic_list .center_box{width: 800px;}
    .graphic_list .detail .text {font-size: 60px;}
    .graphic_list > ul > li{height: 120px;}
    .graphic_list .preview{height: 120px; width: 120px;}
    .graphic_list .center_box{justify-content: space-between;}
    .graphic_list .banner_design .detail{width: auto;}
    .graphic_list .package_design .preview{margin-right: 0px;}
    .graphic_list .package_design .detail {width: 300px;}
    .graphic_list .more_design .preview{margin-left: 0px;}
    .graphic_list .more_design .detail{width: 365px;}
    .graphic_list .web_design .preview{margin-left: 200px; margin-right: 0px;}
    .graphic_list .web_design .detail {width: 220px;}

    .section.graphic_more {margin-top: 100px; height: auto;}
    .section.graphic_more .center_box>h1 {font-size: 50px;}
    .section.graphic_more .view{width: 770px; height: 410px;}
    .section.graphic_more .view_box{height: 410px;}
    .section.graphic_more ul.v1{grid-template-columns: 250px 250px 250px; grid-template-rows: 250px 150px;}
    .section.graphic_more ul.v2{grid-template-columns: 250px 250px 250px; grid-template-rows: 200px 200px;}

    .popup_view .popup_box,
    .popup_view ul li{width: 800px; height: 600px;}
}

@media screen and (max-width:1024px){
    .graphic_list .center_box{width: 700px;}

}

@media screen and (max-width:960px){
    .visual{height: 450px;}
    .visual .center_box{width: 700px;}
    .section.simple p{font-size: 16px;}
    .section.simple .center_box{width: 700px;}
    .graphic_list{height: 460px;}
    .graphic_list .center_box{width: 600px;}
    .graphic_list > ul > li {height: 100px;}
    .graphic_list .preview{width: 100px; height: 100px;}
    .graphic_list .web_design .preview{margin-left: 60px;}

    .section.graphic_more .view{height: 310px; width: 620px;}
    .section.graphic_more .view_box{height: 310px;}
    .section.graphic_more ul.v1{grid-template-columns: 200px 200px 200px; grid-template-rows: 200px 100px;}
    .section.graphic_more ul.v2{grid-template-columns: 200px 200px 200px; grid-template-rows: 150px 150px;}

    .popup_view .popup_box, .popup_view ul li{width: 100vw; height: 90vh;}

}

@media screen and (max-width:769px){
    .visual{height: 400px; margin-top: 180px;}
    .visual .center_box{width: 90%;}
    .section.simple h2 {font-size: 30px;}
    .section.simple .center_box{width: 100%; padding: 0 20px;}
    .section.simple p{text-align: left;}
    .section.simple p > br{display: none;}

    .graphic_list {margin-top: 65px; height: 380px;}
    .graphic_list .center_box{width: 100%; padding: 0 40px;}
    .graphic_list > ul > li {height: 80px;}
    .graphic_list .detail .text{font-size: 40px;}
    .graphic_list .preview{width: 80px; height: 80px;}
    .graphic_list .package_design .detail{width: 170px;}
    .graphic_list .more_design .detail{width: 270px;}
    .graphic_list .more_design .preview{margin-right: 50px;}

    .section.graphic_more .view{width: 80%; transition: all .3s linear;}
    .section.graphic_more ul,
    .section.graphic_more .view_inbox{width: 200%;}
    .section.graphic_more .view_box{height: 100%;}
    .section.graphic_more ul.v1{grid-template-columns: 1fr; grid-template-rows: repeat(4, 187px); width: 50%;}
    .section.graphic_more ul.v2{grid-template-columns: 1fr; grid-template-rows: repeat(5, 150px); width: 50%;}
    .section.graphic_more ul.v2 li:nth-child(3){grid-column: 1/2; grid-row: 3/4;}

    .section.graphic_more ul.v1 li,
    .section.graphic_more ul.v2 li{grid-column: auto !important; grid-row: auto !important;}

    .popup_view .v2-detail ul li:nth-child(3) .popup_detail,
    .popup_view .v2-detail ul li:nth-child(4) .popup_detail,
    .popup_view .v2-detail ul li:nth-child(5) .popup_detail{background-size: auto;}

}

@media screen and (max-width:560px){
    .visual{height: 300px; margin-top: 140px;}
    .visual .center_box > .outline{font-size: 60px;}
    .visual .center_box{top: -40px;}
    .graphic_list .more_design .detail{width: 180px;}
    .graphic_list .package_design .preview {margin-left: 70px;}
    .graphic_list .web_design .detail{width: 80px;}

    .popup_view ul li .header_detail h2{font-size: 24px;}
    .popup_view ul li .header_detail span{font-size: 14px;}
}

@media screen and (max-width:460px){
    .visual{height: 250px;}
    .section.simple h2{font-size: 24px;}
    .section.simple p{font-size: 14px;}

    .graphic_list .package_design .preview{margin-left: 15px;}
    .graphic_list .detail .text{font-size: 28px;}
    .graphic_list .more_design .preview {margin-right: 0;}
    .graphic_list .more_design .detail{width: 130px;}
    .graphic_list .web_design .preview{margin-left: 10px;}

    .section.graphic_more .center_box>h1{font-size: 40px;}
    .section.graphic_more ul.v1{grid-template-rows: repeat(4, 150px);}
    .section.graphic_more ul.v2{grid-template-rows: repeat(5, 120px);}

    .section.graphic_more .btn button.next{right: -28px;}
    .section.graphic_more .btn button.prev{left: -28px;}
    .section.graphic_more .btn button{width: 15px; height: 25px;}
}

@media screen and (max-width:360px){
    .visual .center_box > .outline{font-size: 50px;}
    .graphic_list .center_box {padding: 0 20px;}
    .graphic_list .package_design .detail{width: auto;}

    .section.graphic_more ul.v1{grid-template-rows: repeat(4, 125px);}
    .section.graphic_more ul.v2{grid-template-rows: repeat(5, 100px);}

}