@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@font-face {
    font-family: 'Cafe24Ssurround';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 폰트 */
.ff-dc {font-family: 'Dancing Script', cursive;}
.ff-ns {font-family: 'NanumSquare', sans-serif;}
.ff-cfs {font-family: 'Cafe24Ssurround', sans-serif;}
.ff-gm {font-family: 'Gmarket Sans', sans-serif;}
.ff-gm-bold {font-family: 'Gmarket Sans Bold', sans-serif;}
.ff-gm-right {font-family: 'Gmarket Sans Light', sans-serif;}
.font-loading {width:0; height:0; display:block; overflow:hidden;}

@media (max-width:1440px){
    .fs-24 {font-size:20px;}
}

@media (max-width:768px){
    .fs-30 {font-size:20px;}
    .fs-60 {font-size:30px; letter-spacing: -0.08em;}
    .fs-90 {font-size:40px;}
}

@media (max-width:425px){
    .fs-100 {font-size:75px;}
    .fs-90 {font-size:35px; letter-spacing: -0.08em;}
}

/**/
body {background:#f1f2f5; user-select:none; overflow-x:hidden; width:100%; max-width:100%;}
header {position:relative; margin:auto; top:0; bottom:0; left:0; height:0; z-index:1000;}
.container-section {
    margin:0 auto; position:relative; height:100%; min-height:100vh;
}
header,
.container-section {width:100%; max-width:1920px;}
.container-section {opacity:0;}

/* 왼쪽 메인 메뉴 */
#tnb {
    /*display:none;*/
    position:absolute; background:#fff; margin:auto; height:90vh; max-height:900px; top:5vh; left:60px;
    border-radius:40px; width:auto; z-index:1300; max-width:450px;
    box-shadow:0 0 15px rgba(0,0,0,0.1); /*transition:all 100ms;*/
}
#tnb .tnb-toggle-btn {position:absolute; width:40px; height:40px; top:21px; left:20px; display:none; z-index:100;}
#tnb .tnb-toggle-btn .rect {height:18px; position:absolute; margin:auto; width:100%; top:0; bottom:0;}
#tnb .tnb-toggle-btn .rect span {display:block; height:5px; background:#fed502; /* background:rgba(23, 27, 71, 0.7); */ margin-bottom:6px; transition:all 300ms;}
#tnb .tnb-toggle-btn .rect span:last-child {margin-bottom:0;}
#tnb.active .tnb-toggle-btn .rect span {}
#tnb.active .tnb-toggle-btn .rect span:nth-child(1) {transform:rotate(45deg) translateY(3px) translateX(4px); /*background:red;*/}
#tnb.active .tnb-toggle-btn .rect span:nth-child(2) {transform:rotate(-45deg) translateY(-4px) translateX(5px); /*background:blue;*/}
#tnb > .rect {
    overflow:auto; width:100%; height:100%; padding:50px 60px;
}
#tnb .head {margin-bottom:20px; opacity:1; transition:all 500ms 100ms; position:relative;}
#tnb .head .logo img {width:100%; height:auto;}
#tnb .body {}
#tnb .body .wrap {height:100%;}
#tnb .body ul.m1 {height:100%; display:flex; flex-direction:column;}
#tnb .body li.m1 {
    height:65px; margin-bottom:30px; position:relative;
    transition:all 500ms; opacity:1;
}
#tnb .body li.m1:nth-child(1) {transition-delay:100ms;}
#tnb .body li.m1:nth-child(2) {transition-delay:150ms;}
#tnb .body li.m1:nth-child(3) {transition-delay:200ms;}
#tnb .body li.m1:nth-child(4) {transition-delay:250ms;}
#tnb .body li.m1:nth-child(5) {transition-delay:300ms;}
#tnb .body a.m1 {
    position:relative; display:block; width:100%; height:100%; text-align:left; color:#333;
    background:url(/images/djec/layout/arr.png) no-repeat right 18px center #f2f3f7;  border-bottom: 4px solid rgba(41 42 53 / 40%);
    box-shadow: 1px 3px 3px rgb(41 42 53 / 30%); transition: all .3s ease;
}
#tnb .body a.m1:hover{background: url(/images/djec/layout/arr.png) no-repeat right 40px center #fff; box-shadow: 1px 3px 20px rgb(41 42 53 / 20%);}
#tnb .body li.m1.active a.m1 {background-image:url(/images/djec/layout/arr_on.png); transition:all 500ms;}
#tnb .body li.m1.active:nth-child(1) a.m1 {background-color:#fef383;}
#tnb .body li.m1.active:nth-child(2) a.m1 {background-color:#bce4e4;}
#tnb .body li.m1.active:nth-child(3) a.m1 {background-color:#fbd6e2;}
#tnb .body li.m1.active:nth-child(4) a.m1 {background-color:#d9d8ed;}
#tnb .body li.m1.active:nth-child(5) a.m1 {background-color:#bce4e4;}
#tnb .body li.m1.active .num {}
#tnb .body li.m1.active:hover a.m1 {}
#tnb .body li.m1 .num {
    position:absolute; top:0; left:0; display:block; z-index:10; width:68px; height:64px;
    transform:translateY(-40%) translateX(-40%); text-align:center;
}
#tnb .body li.m1 .num > span {
    position:absolute; display:flex; align-content: center; align-items: center; justify-content: center; top:0;
    width:100%; height:100%; color:#fff; padding-top:5px;
}
#tnb .body li.m1 .num:before {
    content:''; display:block; width:100%; height:100%; transition:all 500ms;
    background-size:contain; background-repeat:no-repeat; background-position:center center;
}

#tnb .body li.m1:nth-child(1) .num:before {background-image:url(/images/djec/layout/num_01.png);}
#tnb .body li.m1:nth-child(2) .num:before {background-image:url(/images/djec/layout/num_02.png);}
#tnb .body li.m1:nth-child(3) .num:before {background-image:url(/images/djec/layout/num_03.png);}
#tnb .body li.m1:nth-child(4) .num:before {background-image:url(/images/djec/layout/num_04.png);}
#tnb .body li.m1:nth-child(5) .num:before {background-image:url(/images/djec/layout/num_05.png);}
#tnb .body li.m1.active:nth-child(1) .num:before {background-image:url(/images/djec/layout/num_01_on.png);}
#tnb .body li.m1.active:nth-child(2) .num:before {background-image:url(/images/djec/layout/num_02_on.png);}
#tnb .body li.m1.active:nth-child(3) .num:before {background-image:url(/images/djec/layout/num_03_on.png);}
#tnb .body li.m1.active:nth-child(4) .num:before {background-image:url(/images/djec/layout/num_04_on.png);}
#tnb .body li.m1.active:nth-child(5) .num:before {background-image:url(/images/djec/layout/num_05_on.png);}
#tnb .body a.m1 span.m1 {position: relative; display:block; top:50%; transform:translateY(-50%) translateX(16%); width:100%;}
#tnb .foot {position:relative; height:70px; opacity:1; transition:all 500ms 300ms;}
#tnb .foot .main {
    display:flex; justify-content:center; align-items:center;
    position:absolute; background:#fed502; border-radius:10px 18px; text-align:center; line-height:66px;
    box-shadow:1px 2px 14px 0 rgba(0, 0, 0, 0.25); width:66px; height:66px; margin:auto; top:0; right:auto; bottom:0; left:0; transition:all .3s ease;
}
#tnb .foot .main:hover{background:#374c9e;}
#tnb .foot .main img {display:inline-block;}
#tnb .foot .language-change {
    position:absolute; height:24px; margin:auto; top:0; right:90px; bottom:0; left:auto; color:#a3a3a5; font-family: 'Gmarket Sans', sans-serif; font-weight:500;
}
#tnb .foot .language-change:hover{color: #cdcdcd;}
#tnb .foot .home {
    position:absolute; height:24px; margin:auto; top:0; right:0; bottom:0; left:auto; color:#a3a3a5; font-family: 'Gmarket Sans', sans-serif; font-weight:500;
}
#tnb .foot .home:hover{color: #cdcdcd;}
@media (max-width:1645px){
    #tnb {max-height:800px;}
    #tnb .body li.m1 {height:65px;}
}

@media (max-width:1440px){
    #tnb .tnb-toggle-btn {display:block;}
}

@media (max-width:500px){
    #tnb {max-width:90%; left:5%; max-height:690px;}
    #tnb .logo {padding-left:30px;}
    #tnb.active {margin:auto; transition:none;}
    #tnb.mini {}
    #tnb > .rect {padding:20px 30px;}
    #tnb .body li.m1 {margin-bottom:20px;}
    #tnb .body li.m1 .num {transform:none; width:45px; height:45px; margin:auto; top:0; bottom:0; left:10px;}
    #tnb .body li.m1 .num > span{font-size:19px;}
    #tnb .body a.m1 span.m1{transform:translateY(-50%) translateX(24%); font-size:17px;}
}

/**/
#tnb.mini {
    overflow:hidden; width:80px; height:80px; border-radius:100%;
}
#tnb.mini > .rect {overflow:hidden;}
#tnb.mini .head {opacity:0;}
#tnb.mini .body li.m1 {opacity:0;}
#tnb.mini .foot {opacity:0;}

@media(max-width:768px){
    #tnb {left:30px;}
}

@media(max-width:480px){
    #tnb {width:100%; max-width:92%; left:4%;}
}

/**/
#site-map-toggle {display:none;}

/**/
#next-section-btn {
    width:78px; height:78px; border-radius:100%; background:rgba(255,255,255,0.3);
    display:flex; position:absolute; z-index:999; justify-content:center; align-items:center;
    margin:auto; top:0; right:20px; bottom:0; left:auto; transition:all .3s ease;
}
#next-section-btn:hover{ background:none;}
#next-section-btn img {object-fit:cover; width:36px; height:26px; filter:drop-shadow(0 0 3px rgba(0,0,0,0.15));}
#next-section-btn:hover img{filter:drop-shadow(0 0 3px rgba(0,0,0,0.3));}

@media(max-width:800px){
    #next-section-btn img{filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));}
}

@media(max-width:432px){
    #next-section-btn img{filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.4));}
}



/* 메인페이지 */
#main-content {background:linear-gradient(to left, #fef281 1645px, #f1f2f5 1645px); position:relative;}
#main-content.eng-ver {background:#c7e4f8;}
#main-content,
#main-content .wrap {height:100vh;}
#main-content > .rect {max-width:1645px; width:100%; position:absolute; right:0; height:100%;}
#main-content[data-page='1'] {background:linear-gradient(to left, #fef281 1645px, #f1f2f5 1645px);}
#main-content[data-page='2'] {background:linear-gradient(to left, #bce4e4 1645px, #f1f2f5 1645px);}
#main-content[data-page='3'] {background:linear-gradient(to left, #f8ceda 1645px, #f1f2f5 1645px);}
#main-content[data-page='4'] {background:linear-gradient(to left, #d5e9c6 1645px, #f1f2f5 1645px);}
#main-page {background:url(/images/djec/content/main_bg_4.png) no-repeat left bottom; z-index:100;}
.main-title {
    text-align:center; line-height:87px; letter-spacing:2px; color:#171b47;
    position:absolute; z-index:10; margin:auto; top:6vh; right:0; bottom:auto; left:0;
}
.main-title > div:nth-child(1) {animation:main-content-text both 1s, opacity both 1s; opacity:0;}
.main-title > div:nth-child(2) {position:relative; top:-15px; animation:main-content-text both 1s 200ms, opacity both 1s 200ms; opacity:0;}

@keyframes main-content-text {
    0% {transform:rotate3d(1,0,0,90deg);}
    100% {transform: rotate3d(1,0,0,0deg);}
}

/**
 * 인물 오브젝트
 * PC는 좌하단을 기준점으로.
 */
#main-page .item {position:absolute; opacity:1; z-index:10;}
#main-page .item-01 {
    background:url(/images/djec/content/main_item_01.png) no-repeat center center;
    background-size:cover;
    width:65px; height:77px;
    bottom:181px; left:1300px;
    /*bottom:325px; left:670px;*/
    animation:opacity both 0.1s, main-item-01 infinite 7s;
}
#main-page .item-02 {
    background:url(/images/djec/content/main_item_02.png) no-repeat center center;
    width:39px; height:56px; bottom:282px; left:400px;
    animation:opacity both 0.1s 200ms, main-item-02 infinite linear 3s;
}
#main-page .item-03 {
    background:url(/images/djec/content/main_item_03.png) no-repeat center center;
    width:40px; height:75px; bottom:180px; left:600px;
    animation:opacity both 0.1s 300ms, main-item-02 infinite linear 3s;
}
#main-page .item-04 {
    background:url(/images/djec/content/main_item_04.png) no-repeat center center;
    width:47px; height:124px; bottom:110px; left:653px;
    animation:opacity both 0.1s 400ms, main-item-02 infinite linear 3s 300ms;
}
#main-page .item-05 {
    background:url(/images/djec/content/main_item_05.png) no-repeat center center;
    width:55px; height:69px; bottom:250px; left:185px;
    animation:opacity both 0.1s 500ms, main-item-02 infinite linear 3s 300ms;
}
#main-page .item-06 {
    background:url(/images/djec/content/main_item_06.png) no-repeat center center;
    width:53px; height:54px; bottom:160px; left:987px;
    animation:opacity both 0.3s 600ms, main-item-02 infinite linear 1.5s;
}
#main-page .item-07 {
    background:url(/images/djec/content/main_item_07.png) no-repeat center center;
    width:37px; height:58px; bottom:140px; left:528px;
    animation:opacity both 0.1s 200ms, main-item-02 infinite linear 1.2s;
}
#main-page .item-08 {
    background:url(/images/djec/content/main_item_08.png) no-repeat center center;
    width:257px; height:107px; bottom:290px; left:350px; z-index:1;
}
#main-page .item-08-01 {
    z-index:20; background:url(/images/djec/content/fountain_water01.png) no-repeat;
    width:72px; height:16px; top:60px; left:95px;
    animation:spray-1 1s infinite linear;
}
#main-page .item-08-02 {
    z-index:20; background:url(/images/djec/content/fountain_water02.png) no-repeat;
    width:132px; height:32px; top:53px; left:65px;
    animation:spray-2 1s infinite linear; opacity:1;
}
#main-page .tree-01 {
    background:url(/images/djec/content/main_tree_01.png) no-repeat center center;
    width:100%; max-width:1121px; height:234px; bottom:0; right:0; z-index:50; opacity:1;
}
#main-page .tree-02 {
    background:url(/images/djec/content/main_tree_02.png) no-repeat;
    z-index:99; width:198px; height:149px; bottom:290px; left:80px;
    animation:tree infinite 3s;
}
#main-page .tree-03 {
    background:url(/images/djec/content/main_tree_03.png) no-repeat;
    z-index:98; width:227px; height:175px; bottom:330px; left:-40px;
    animation:tree infinite 4s;
}

@keyframes tree {
    0% {transform:scaleY(1.0);}
    50% {transform: scaleY(0.98) translateY(2%);}
    100% {transform: scaleY(1.0);}
}

@keyframes spray-1 {
    0% {}
    33% {transform:translateY(-3px);}
    66% {transform:translateY(3px);}
    100% {}
}

@keyframes spray-2 {
    0% {opacity:1;}
    50% {opacity:0.1;}
    100% {opacity:1;}
}

@keyframes main-item-01 {
    /*100% {bottom:253px; left:980px;}*/
    0% {opacity:0;}
    10% {opacity:1;}
    50% {opacity:1;}
    100%{bottom:340px; left:600px; opacity:0;}
}

@keyframes main-item-02 {
    0% {transform:rotate(0);}
    33% {transform:rotate(3deg);}
    66% {transform:rotate(-3deg);}
    100% {transform:rotate(0);}
}

@keyframes main-item-03 {
    0% {transform:rotate(0) translateX(0);}
    33% {transform:rotate(0) translateX(0);}
    66% {transform:rotate(0) translateX(0);}
    100% {transform:rotate(0) translateX(0);}
}

@media (max-width:1800px){
    .main-title {margin-left:340px;}
}

@media (max-width:1440px){
    #main-page {background-position:left -200px bottom;}
    /*#main-page .tree-01 {display:none;}*/
    .main-title {top:150px; margin-left:0;}
}

@media (max-width:1024px){
    #main-page {background-position:left -450px bottom;}
    #main-page .item-01 {transform:translateX(-250px);}
    #main-page .item-02 {left:160px;}
    #main-page .item-03 {left:400px;}
    #main-page .item-04 {left:460px;}
    #main-page .item-05 {display:none;}
    #main-page .item-06 {left:700px;}
    #main-page .item-07 {left:340px;}
    #main-page .item-08 {left:110px;}
    #main-page .tree-02,
    #main-page .tree-03 {display:none;}
}

@media (max-width:768px){
    .main-title {text-shadow:0 0 10px rgb(225 212 123 / 80%);} /*#fed502*/

}


/* 오른쪽 상단 배너 */
#mpgb {position:absolute; top:0; right:0; bottom:auto; left:auto;}
#mpgb .bnr {margin-top:15px;}
#mpgb .bnr ul {display:flex; justify-content:flex-end; align-items:center; margin-top:5px;}
#mpgb .bnr ul li {margin-right:20px;}
#mpgb .bnr ul li img {display:block;}
.flag {
    text-align:right; padding:10px 30px 10px 80px; color:#fff; transition:all 500ms;
    background:linear-gradient(60deg, transparent 10%, #fed502 10%); letter-spacing:0.1em;
}
.flag.eng-ver {background:linear-gradient(60deg, transparent 10%, #62b0e3 10%); }
.flag[data-page='1'] {color:#fff; background:linear-gradient(60deg, transparent 10%, #fed502 10%);}
.flag[data-page='2'] {color:#fff; background:linear-gradient(60deg, transparent 10%, #93d3c8 10%);}
.flag[data-page='3'] {color:#fff; background:linear-gradient(60deg, transparent 10%, #f7b1cb 10%);}
.flag[data-page='4'] {color:#fff; background:linear-gradient(60deg, transparent 10%, #b4b2e9 10%);}
.flag[data-page='5'] {color:#fff; background:linear-gradient(60deg, transparent 10%, #bedda1 10%);}

@media (max-width:1360px){
   .flag{letter-spacing:0;} 
}

@media (max-width:768px){
    #mpgb .flag {padding:5px 15px 5px 80px;}
    #mpgb img {max-width:60px;}
    #mpgb .fs-20,
    #mpgb .fs-22 {font-size:13px;}
}

@media (max-width:500px){
    
    #mpgb .fs-20,
    #mpgb .fs-22 {font-size:11px;}
}

/* 컨텐츠 공통 */
section {opacity:0; display:none;}
section.active {opacity: 1; display:block;}
.pages-main {position:absolute; z-index:0; top:0; left:0; width:100%; height:100vh; opacity:0;}
.pages h1 {
    position:relative; display:inline-block; color:#192250;
    letter-spacing:-5px; z-index:100; margin-top:130px;
    opacity:0;
}
#main-page .wrap,
.pages .wrap {margin-left:200px; padding-left:140px; width:auto; position:relative; max-width:1450px; }
.pages .wrap {overflow-y:hidden;}
.content-menu-group {display:block; position:relative; margin-top:30px; z-index:200;}
.content-menu-group li {margin-bottom:55px; opacity:0;}
.content-menu-group li:last-child {margin-bottom:0;}
.content-menu-group a {color:#192250; display:inline-block; height:38px; border-bottom:2px solid #192250; font-weight:bold; transition: all .3s ease;}
.content-menu-group a:hover{color:#fec802; border-bottom:2px solid #fec802;}
#page-2 .content-menu-group a:hover{color:#00aaad; border-bottom:2px solid #00aaad;}
#page-3 .content-menu-group a:hover{color:#9c70b0; border-bottom:2px solid #9c70b0;}
#page-4 .content-menu-group a:hover{color:#C4C1E5; border-bottom:2px solid #C4C1E5;}
#page-5 .content-menu-group a:hover{color:#00a194; border-bottom:2px solid #00a194;}

@media (max-width:1800px){
    .pages .wrap {margin:0; padding-left:500px; max-width:100%;}
}
@media (max-width:1660px){
    .pages .wrap {padding-left:550px;}
}

@media (max-width:1440px){
    body {overflow-x:hidden;}
    #main-content {overflow-x:hidden;}
    #main-page .wrap,
    .pages .wrap {margin-left:0; padding-left:200px; overflow-x:hidden;}
}

@media (max-width:768px){
    #main-page .wrap {overflow-x:hidden;}
    .pages .wrap {overflow:auto;}
    .pages .wrap {padding:0 30px;}
    .pages h1 {margin-top:140px;}
    .content-menu-group li {margin-bottom:25px;}
}

/* section.active animation */
section.active h1 {animation:opacity both 1s; z-index:500;}
section.active .content-menu-group {}
section.active .content-menu-group li {animation:opacity both 1s 100ms;}
section.active .content-menu-group li:nth-child(1) {animation:opacity both 1s 100ms;}
section.active .content-menu-group li:nth-child(2) {animation:opacity both 1s 200ms;}
section.active .content-menu-group li:nth-child(3) {animation:opacity both 1s 300ms;}
section.active .content-menu-group li:nth-child(4) {animation:opacity both 1s 400ms;}

/* Why Daejeon? */
#page-1 {background:url(/images/djec/content/page_bg_1.png) no-repeat right bottom; background-size:cover;}
#page-1 h1 {width:100%; max-width:680px;}
#page-1 .map {
    background:url(/images/djec/content/page_1_02.png) no-repeat; background-size:100% auto;
    width:463px; height:585px; position:absolute; opacity:0;
    margin:auto; top:290px; right:0; bottom:auto; left:0;
}
#page-1 .people {
    background:url(/images/djec/content/page_1_01.png) no-repeat;
    background-size:contain;
    position:absolute; width:364px; height:587px;
    left:120px; top:410px; opacity:0;
}
#page-1 .blocks {
    position:absolute; right:100px; top:300px;
    width:460px; height:520px;
}
#page-1 .blocks .rect {width:100%; height:100%; position:relative;}
#page-1 .blocks .item {
    position:absolute; opacity:0; background-size:contain;
    background-repeat:no-repeat;
}
#page-1 .blocks .item-1 {
    width:235px; height:215px; background-image:url(/images/djec/content/page_1_03.png); z-index:90;
    top:0; left:190px;
}
#page-1 .blocks .item-2 {
    width:232px; height:213px; background-image:url(/images/djec/content/page_1_04.png); z-index:89;
    top:80px; left:0;
}
#page-1 .blocks .item-3 {
    width:232px; height:214px; background-image:url(/images/djec/content/page_1_05.png); z-index:88;
    top:190px; left:220px;
}
#page-1 .blocks .item-4 {
    width:232px; height:215px; background-image:url(/images/djec/content/page_1_06.png); z-index:87;
    top:300px; left:10px;
}
.eng-ver #page-1 .blocks .item-1 {
    background-image:url(/images/djec/content/page_1_03_eng.png);
}
.eng-ver #page-1 .blocks .item-2 {
    background-image:url(/images/djec/content/page_1_04_eng.png);
}
.eng-ver #page-1 .blocks .item-3 {
    background-image:url(/images/djec/content/page_1_05_eng.png);
}
.eng-ver #page-1 .blocks .item-4 {
    background-image:url(/images/djec/content/page_1_06_eng.png);
}
#page-1 .blocks .arr-1 {
    background-image:url(/images/djec/content/page_1_arr_01.png);
    width:173px; height:243px;
    transform:translateY(-75%) translateX(100%);
}
#page-1 .blocks .arr-2 {
    background-image:url(/images/djec/content/page_1_arr_02.png);
    width:159px; height:262px; bottom:0; right:0;
    transform:translateY(65%);
}
#page-1 .blocks .arr-3 {
    background-image:url(/images/djec/content/page_1_arr_03.png);
    width:137px; height:28px; bottom:0; left:0;
    transform:translateY(100%) translateX(-100%);
}
section.active #page-1 .blocks .item-1 {animation:opacity both 1000ms 100ms, flipInX both 1s 100ms;}
section.active #page-1 .blocks .item-2 {animation:opacity both 1000ms 200ms, flipInX both 1s 200ms;}
section.active #page-1 .blocks .item-3 {animation:opacity both 1000ms 300ms, flipInX both 1s 300ms;}
section.active #page-1 .blocks .item-4 {animation:opacity both 1000ms 400ms, flipInX both 1s 400ms;}
section.active #page-1 .blocks .arr-1 {animation:opacity both 1000ms 200ms;}
section.active #page-1 .blocks .arr-2 {animation:opacity both 1000ms 300ms;}
section.active #page-1 .blocks .arr-3 {animation:opacity both 1000ms 400ms;}
section.active #page-1 .map {animation:opacity both 1000ms 0ms;}
section.active #page-1 .people {animation:opacity both 1000ms 500ms, p1_people infinite linear 3s;}

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

@keyframes p1_people {
    0% {transform:translateY(0) translateX(0) rotate(0);}
    25% {transform:translateY(-10px) translateX(0) rotate(-1deg);}
    50% {transform:translateY(-20px) translateX(0) rotate(-3deg);}
    75% {transform:translateY(-10px) translateX(0) rotate(-1deg);}
    100% {transform:translateY(0) translateX(0) rotate(0);}
}

@keyframes flipInX {
    0% {transform:rotate3D(1, 0, 0, 90deg);}
    100% {transform:rotate3D(1, 0, 0, 0deg);}
}

@media(max-width:1440px){
    #page-1 .map {
        width:300px; height:385px; top:360px; right:80px;
    }
    #page-1 .people {width:318px; height:418px;}
    #page-1 .blocks .arr-2 {display:none;}
    #page-1 .blocks .arr-3 {display:none;}
}

@media(max-width:1024px){
    #page-1 .map {display:none;}
    #page-1 .people {left:20px; width:300px; height:420px; display:none;}
    #page-1 .blocks {top:auto; height:395px; margin:auto; left:0; right:0; width:337px;}
    #page-1 .blocks .item-1 {width:175px; height:160px; left:140px;}
    #page-1 .blocks .item-2 {width:175px; height:162px; left:0;}
    #page-1 .blocks .item-3 {width:175px; height:162px; top:146px; left:160px;}
    #page-1 .blocks .item-4 {width:175px; height:162px; left:0; top:232px;}
    #page-1 .blocks .arr-1 {width:162px; height:220px; transform:translateY(-70%) translateX(70%);}
}
@media(max-width:768px){
    #main-page .item-01 {display:none;}
}

/*  대전 MICE 지원제도 */
#page-2 {background:url(/images/djec/content/page_bg_2.png) no-repeat right bottom; background-size:cover;}
#page-2 .mice-step,
#page-5 .mice-step {margin-top:80px; max-width:850px; position:relative; z-index:110;}
#page-2 .mice-step ul {display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between;}
#page-2 .mice-step li {width:31%; text-align:center; color:#4c4c4d; font-weight:bold; opacity:0;}
#page-2 .bar-white {
    text-align:center; padding:10px; font-weight:bold; color:#4c4c4d; background:#fff; border-radius:40px;
    position:relative; z-index:110; opacity:0;
}
#page-2 .item-01 {
    position:absolute; right:0; bottom:0; width:407px; height:391px; z-index:100;
    background:url(/images/djec/content/page_2_04.png) no-repeat; opacity:0;
}
.eng-ver #page-2 .mice-step {margin-top: 50px;}
.eng-ver #page-2 .mice-step li {
    line-height: 1.4;
    font-size: 14px;
}

.btn-download {
    display:inline-block; margin-top:50px; color:#fff; font-size:21px; font-weight: 700;
    background:#00aaad; padding:14px 15px 10px 15px; line-height:21px; border-radius:6px;
    box-shadow:2px 6px 5px rgba(0,0,0,0.6); transition:all 300ms; opacity:0;
}
.btn-download:hover {background:#009597; color:#fff;}
.btn-download:focus,
.btn-download:active {color:#fff;}
.btn-download:active {
    transform:translateY(2px); box-shadow:2px 4px 5px rgba(0,0,0,1);
}

section.active #page-2 {}
section.active #page-2 .mice-step li:nth-child(1) {animation:mice-step-li both 1s 100ms, opacity both 1s 100ms;}
section.active #page-2 .mice-step li:nth-child(2) {animation:mice-step-li both 1s 200ms, opacity both 1s 200ms;}
section.active #page-2 .mice-step li:nth-child(3) {animation:mice-step-li both 1s 300ms, opacity both 1s 300ms;}
section.active #page-2 .bar-white {animation:bar-white both 1s 400ms, opacity both 1s 400ms;}
section.active #page-2 .btn-download {animation:bar-white both 1s 500ms, opacity both 1s 500ms;}
section.active #page-2 .item-01 {animation:p2-item-02 infinite linear 3s 500ms, opacity both 1s 800ms;}

.eng-ver section.active #page-2 .bar-white {font-size: 14px;}
.eng-ver section.active #page-2 .btn-download {font-size: 16px;}

@keyframes mice-step-li {
    0% {transform:rotate3d(0,1,0,90deg);}
    100% {transform: rotate3d(0, 1, 0, 0deg)}
}

@keyframes bar-white {
    0% {transform:rotate3d(1,0,0,90deg);}
    100% {transform: rotate3d(1,0,0,0deg)}
}

@keyframes p2-item-02 {
    0% {transform:translateY(0) translateX(0);}
    25% {transform:translateY(-15px) translateX(-10px);}
    50% {transform:translateY(-20px) translateX(-15px);}
    75% {transform:translateY(-10px) translateX(-5px);}
    100% {transform:translateY(0) translateX(0);}
}

@media (max-width:1800px){
    #page-2 .item-01 {display:none;}
}

@media (max-width:1024px){
    #page-2 .wrap {padding-bottom:100px;}
    #page-2 .mice-step {max-width:90%; margin:auto; padding-top:20px;}
}
@media (max-width:768px){
    #page-2 {}
    #page-2 .wrap {padding-bottom:100px;}
    #page-2 .mice-step ul {flex-direction:column; align-items:center;}
    #page-2 .mice-step li {margin-bottom:30px; width:100%;}
    #page-2 .btn-download {position:relative; top:-20px; width:100%; text-align:center;}
}
@media(max-width:425px){
    #page-2 .bar-white br {display:none;}
}

/*  대전 MICE 인프라 */
#page-3 {background:url(/images/djec/content/page_bg_3.png) no-repeat right bottom; background-size:cover;}
#page-3 .circle-group {
    width:313px; height:313px; position:absolute; margin:auto; top:0; right:280px; bottom:0; left:auto;
}
#page-3 .circle-group .rect {position:relative; width:100%; height:100%;}
#page-3 .circle-group .item.circle {border-radius:100%;}
#page-3 .item {
    position:absolute; overflow:hidden; opacity:0;
    background-position:center center; background-repeat:no-repeat; background-size:contain;
}
#page-3 .item.item-01 {
    background-image:url(/images/djec/content/page_3_01.png); width:313px; height:313px;  z-index:95;
}
#page-3 .item.item-02 {
    background-image:url(/images/djec/content/page_3_02.png); width:329px; height:329px; z-index:94;
    top:115px; left:-230px;
}
#page-3 .item.item-03 {
    background-image:url(/images/djec/content/page_3_03.png); width:281px; height:281px; z-index:96;
    top:281px; left:98px;
}
.eng-ver #page-3 .item.item-01 {
    background-image:url(/images/djec/content/page_3_01_eng.png);
}
.eng-ver #page-3 .item.item-02 {
    background-image:url(/images/djec/content/page_3_02_eng.png);
}
.eng-ver #page-3 .item.item-03 {
    background-image:url(/images/djec/content/page_3_03_eng.png);
}
#page-3 .item.item-04 {
    background-image:url(/images/djec/content/page_3_04.png); width:516px; height:332px; top:260px; right:450px;
}

section.active #page-3 .item {}
section.active #page-3 .item-01 {animation:p3-circle both 1s 800ms, opacity both 1s 800ms;}
section.active #page-3 .item-02 {animation:p3-circle both 1s 900ms, opacity both 1s 900ms;}
section.active #page-3 .item-03 {animation:p3-circle both 1s 1000ms, opacity both 1s 1000ms;}
section.active #page-3 .item-04 {animation:p3-item-04 linear both 1s 200ms, p3-item-04-loop infinite linear 4s 1200ms, opacity both 2s 200ms;}

@keyframes p3-circle {
    0% {transform:rotate3d(1,0,0,90deg) rotate(45deg);}
    100% {transform:rotate3d(1,0,0,0deg) rotate(0);}
}
@keyframes p3-item-04 {
    0% {transform:translateY(-10px) translateX(-40px);}
    25% {transform:translateY(-6px) translateX(-30px);}
    50% {transform:translateY(-4px) translateX(-20px);}
    75% {transform:translateY(-2px) translateX(-10px);}
    90% {transform:translateY(-1px) translateX(-5px);}
    100% {transform:translateY(0) translateX(0);}
}
@keyframes p3-item-04-loop {
    0% {transform:translateY(0) translateX(0) rotate(0);}
    25% {transform:translateY(-1px) translateX(0) rotate(-2deg);}
    50% {transform:translateY(-3px) translateX(0) rotate(-1deg);}
    75% {transform:translateY(-1px) translateX(0) rotate(-2deg);}
    100% {transform:translateY(0) translateX(0) rotate(0);}
}

@media(max-width:1800px){
    #page-3 .circle-group {right:50px;}
    /*#page-3 .item.item-04 {right:250px; left:auto;}*/
    #page-3 .item.item-04 {right:470px; left:auto;}
}

@media(max-width:1024px){
    #page-3 .circle-group {width:200px; height:200px; right:180px;}
    #page-3 .item.item-01 {width:200px; height:200px;}
    #page-3 .item.item-02 {width:240px; height:240px; left:-125px;}
    #page-3 .item.item-03 {width:230px; height:230px; top:180px;}
    #page-3 .item.item-04 {width:330px; height:280px; top:207px; right:290px;}
}

@media(max-width:768px){
    #page-3 .wrap {overflow-x:hidden;}
}

@media(max-width:600px){
    #page-3 .item.item-04 {display:none;}
    #page-3 .circle-group {top:280px; bottom:auto; right:6%;}
    #page-3 .item.item-01 {}
    #page-3 .item.item-02 {}
    #page-3 .item.item-03 {top:300px; left:0;}
}

/*  대전·충청 MICE 얼라이언스 */
#page-4 {background:url(/images/djec/content/page_bg_4.png) no-repeat right bottom; background-size:cover;}
#page-4 .item {
    position:absolute; z-index:100;
    background-size:contain; background-repeat:no-repeat;
}
#page-4 .item.item-01 {
    background-image:url(/images/djec/content/page_4_01.png); width:551px; height:412px;
    right:58%; bottom:10%; opacity:0; z-index:100;
}
#page-4 .item.item-02 {
    background-image:url(/images/djec/content/page_4_02.png); width:449px; height:448px;
    right:3%; bottom:-8%; opacity:0; z-index:100;
}
#page-4 .item.item-03 {
    background-image:url(/images/djec/content/page_4_tree1.png); width:102px; height:115px;
    right:45%; bottom:13%; opacity:0; z-index:90;
}
#page-4 .item.item-04 {
    background-image:url(/images/djec/content/page_4_tree2.png); width:51px; height:90px;
    right:25%; bottom:13%; opacity:0; z-index:90;
}

section.active #page-4 {}
section.active #page-4 .item-01 {animation:p4-item-01 infinite 1s 1000ms, p4-item-01-2 infinite 3s 2000ms, opacity both 1s 400ms;}
section.active #page-4 .item-02 {animation:p4-item-02 both 1s 500ms, p4-item-02-2 infinite linear 3s 500ms, opacity both 1s 500ms;}
section.active #page-4 .item-03 {animation:p4-item-03 infinite linear 3s, opacity both 1s 400ms;;}
section.active #page-4 .item-04 {animation:p4-item-04 infinite linear 5s, opacity both 1s 400ms;;}

@keyframes p4-item-01 {
    0% {transform:translateX(0);}
    50% {transform:translateX(150px);}
    100% {transform:translateX(0px);}
}

@keyframes p4-item-01-2 {
    0% {transform:translateX(0);}
    50% {transform:translateX(50px);}
    100% {transform:translateX(0px);}
}

@keyframes p4-item-02 {
    0% {transform: rotate3d(0,1,0,90deg) ;}
    100% {transform: rotate3d(0,1,0,0deg);}
}

@keyframes p4-item-02-2 {
    0% {transform: rotate(0deg);}
    33% {transform: rotate(3deg);}
    66% {transform: rotate(-3deg);}
    100% {transform: rotate(0deg);}
}

@keyframes p4-item-03 {
    0% {transform:translateX(0);}
    50% {transform:translateX(-20px);}
    100% {transform:translateX(0);}
}

@keyframes p4-item-04 {
    0% {transform:translateX(0);}
    50% {transform:translateX(-10px);}
    100% {transform:translateX(0);}
}

@media(max-width:600px) {
    #page-4 .item.item-01 {
        display: none;
    }

    #page-4 .item.item-02 {
        right: -10%;
    }
}


/*  대전 관광 */
#page-5 {background:url(/images/djec/content/page_bg_5.png) no-repeat right bottom; background-size:cover;}
#page-5 .item {
    position:absolute; z-index:100;
    background-size:contain; background-repeat:no-repeat;
}
#page-5 .item.item-01 {
    background-image:url(/images/djec/content/page_5_01.png); width:205px; height:507px;
    right:10%; bottom:25%; opacity:0; z-index:100;
}
#page-5 .item.item-02 {
    background-image:url(/images/djec/content/page_5_02.png); width:262px; height:461px;
    right:25%; bottom:10%; opacity:0; z-index:100;
}
#page-5 .item.item-03 {
    width:40px; height:40px; border-radius:100%; border:2px solid #e4edb2; top:50%; left:40%; z-index:90;
}
#page-5 .item.item-04 {
    top:60%; left:35%; width:36px; height:36px; border:2px solid #e4edb2; z-index:90;
}
#page-5 .mice-step {opacity: 0;}

section.active #page-5 {}
section.active #page-5 .item-01 {animation:p5-item-01 infinite 1s 500ms, p5-item-01-2 infinite 3s 2000ms, opacity both 1s 400ms;}
section.active #page-5 .item-02 {animation:p5-item-02 both 1s 500ms, p5-item-02-2 infinite linear 3s 500ms, opacity both 1s 500ms;}
section.active #page-5 .item-03 {animation:p5-item-03 infinite linear 3s;}
section.active #page-5 .item-04 {animation:p5-item-04 infinite linear 5s;}
section.active #page-5 .mice-step {animation:opacity both 1s 400ms}

@keyframes p5-item-01 {
    0% {transform:translateY(0);}
    70% {transform:translateY(0);}
    75% {transform:translateY(-8px);}
    85% {transform:translateY(0);}
    90% {transform:translateY(-8px);}
    95% {transform:translateY(0);}
    100% {transform:translateY(0);}
}

@keyframes p5-item-01-2 {
    0% {transform:translateY(0);}
    74% {transform:translateY(0);}
    75% {transform:translateY(-8px);}
    76% {transform:translateY(0);}
    79% {transform:translateY(0);}
    80% {transform:translateY(-8px);}
    81% {transform:translateY(0);}
    100% {transform:translateY(0);}
}

@keyframes p5-item-02 {
    0% {transform: rotate3d(0,1,0,90deg) ;}
    100% {transform: rotate3d(0,1,0,0deg);}
}

@keyframes p5-item-02-2 {
    0% {transform: rotate(0deg);}
    33% {transform: rotate(3deg);}
    66% {transform: rotate(-3deg);}
    100% {transform: rotate(0deg);}
}

@keyframes p5-item-03 {
    0% {transform:translateY(0);}
    50% {transform:translateY(-20px);}
    100% {transform:translateY(0);}
}

@keyframes p5-item-04 {
    0% {transform:rotate(0);}
    100% {transform:rotate(360deg);}
}

@media(max-width:600px) {
    #page-5 .item.item-01 {width:164px; height:400px;}
    #page-5 .item.item-02 {width:230px; height:400px;}
}

/**/
#djce-content-view {
    position:fixed; margin:auto; top:0; right:0; bottom:0; left:0;
    width:0; height:0; z-index:10000; background:rgba(0,0,0,0.85); overflow:hidden;
}
#djce-content-view .close {
    position: absolute;
    top: 15px;
    right: 20px;
    text-align: center;
    color: #fff;
    z-index:1000;
}

/*
    outline:1px solid rgba(255, 255, 255, 0.2);
    position:absolute; top:50px; right:20px; width:40px; height:40px; z-index:1000;
    background:rgba(0,0,0,0.6); opacity:1;
}
#djce-content-view .close:before,
#djce-content-view .close:after {content:''; position:absolute; display:block; width:100%; height:4px; background:#fff; left:0; opacity:1; top:17px;}
#djce-content-view .close:before {transform:rotate(45deg); }
#djce-content-view .close:after {transform:rotate(-45deg);}
*/

/**/
#book {}
#book .book-page {width:100%; height:100%; padding-bottom:60px; overflow:scroll; display:flex;}
/*#book .book-page .rect {border:2px solid red; width:100%; height:100%; overflow:scroll;}*/
/*#book .book-page .rect img {width:200% !important; max-width:200%;}*/
#book .book-page img {
    max-width:100%; max-height:100%; width:auto; height:auto; margin:auto; position:relative;
    top:0; right:0; bottom:0; left:0;
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
    backface-visibility: hidden;
}
#book .book-page.zoom-in {}
#book .owl-item,
#book .owl-stage-outer,
#book .owl-stage-outer,
#book .owl-stage {height:100vh;}
#book .book-nav {
    width:100%; height:80px; position:fixed; left:0; bottom:0; background:#000; z-index:1100;
    display:flex; justify-content:center; align-items:center;
}
#book .book-nav > a {
    color:#fff; padding:0; cursor:pointer; margin:0 10px; display:block; height:30px;
}
#book .book-nav > a.book-nav-play.stop {background:url(/images/djec/book/roll_stop.png);}
#book .book-nav > a.book-nav-play.stop img {opacity:0;}
#book .book-page::-webkit-scrollbar {width:8px; background:rgba(0,0,0,0);}
#book .book-page::-webkit-scrollbar-track {background:rgba(0,0,0,0.5);}
#book .book-page::-webkit-scrollbar-thumb,
#book.book-1 .book-page::-webkit-scrollbar-thumb {background:#fed502;}
#book.book-2 .book-page::-webkit-scrollbar-thumb {background:#93d3c8;}
#book.book-3 .book-page::-webkit-scrollbar-thumb {background:#f7b1cb;}
#book.book-4 .book-page::-webkit-scrollbar-thumb {background:#bedda1;}
#book .btn-area {position:absolute; width:auto; height:auto; bottom:120px; right:24px;}
#book .btn-area.left {left:40px;}
.btn.btn-djec-3 {background:#f17279; border-color:#f17279;}
.btn.btn-djec-3:active,
.btn.btn-djec-3:hover,
.btn.btn-djec-3:focus {background:#F14F57 !important;  border-color:#F14F57 !important;}
.btn.btn-djec-4 {background:#81ca9c; border-color:#81ca9c;}
.btn.btn-djec-4:active,
.btn.btn-djec-4:hover,
.btn.btn-djec-4:focus {background: #32c267 !important;  border-color:#32c267 !important;}
.btn.btn-djec-4 {}

/* PC */
@media (min-width:1440px){
    #book .book-page img {cursor:zoom-in;}
    #book .book-page.zoom-in img {max-height:none; cursor:zoom-out;}
}