@charset "utf-8";
@import url('/common/css/opensans.css');
@import url('/common/css/nanumgothic.css');
@import url('/common/css/nanumsquare.css');

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, cite, img, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, select, input, textarea, button, a, *:before, *:after {margin:0; padding:0; border:0; box-sizing:border-box; font-size:12px; font-family:"Open Sans", Tahoma, Arial, Helvetica, 'Nanum Gothic', '맑은 고딕', sans-serif; line-height:initial; word-break:keep-all;}
ol, ul{list-style:none;}
select, input, textarea, button{resize:none; vertical-align:middle;}
table{border-collapse:collapse;}
a img{border:0;}
input{outline:0;}
/* basic-alink */
a:link{color:#1278bc;text-decoration:none;}
a:visited{color:#1278bc;text-decoration:none;}
a:active{color:#555;text-decoration:none;}
a:hover{color:#000;text-decoration:none;}

:root{
   /* var color */
   --grapefruit-normal: #ed5565; --grapefruit-normal: #da4453; --bittersweet-normal: #fc6e51; --bittersweet-normal: #e9573f; --sunflower-normal: #ffce54; --sunflower-normal: #f6bb42; --grass-normal: #a0d468; --grass-normal: #8cc152; --mint-normal: #48cfad; --mint-normal: #37bc9b; --aqua-normal: #4fc1e9; --aqua-normal: #3bafda; --bluejeans-normal: #5d9cec; --bluejeans-normal: #4a89dc; --blue-normal: #2f89c5; --blue-normal: #1278bc; --darkblue-normal: #526386; --darkblue-normal: #415171; --lavander-normal: #ac92ec; --lavander-normal: #967adc; --pinkrose-normal: #ec87c0; --pinkrose-normal: #d770ad; --normalgray-normal: #f5f7fa; --normalgray-normal: #e6e9ed; --mediumgray-normal: #ccd1d9; --mediumgray-normal: #aab2bd; --darkgray-normal: #656d78; --darkgray-normal: #434a54;
 
   /* var small font */
   --small-font:Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
 }

/* forms */
input[type=text],
input[type=password],
[contenteditable=true],
textarea{margin:0; padding:5px; border:1px solid #ccc; box-sizing:border-box; color:#333; vertical-align:middle; font-size:15px;}
select{padding:0 0 3px 5px; height:32px; border:1px solid #ccc; color:#555; font-size:13px;}
.jtable-bottom-panel select{height:auto;}
*:disabled{opacity:0.5;}
textarea{overflow:auto;}
input[type=checkbox],
input[type=radio]{cursor:pointer;}
input[type=text]:focus,
input[type=password]:focus,
[contenteditable=true]:focus,
textarea:focus{border:1px solid #a54b3a !important; outline:0;}
input[type=text]::-ms-clear{display:none;} 
input[readonly]{color:#777;}
input[readonly]:focus{border:1px solid #ccc !important; color:#777;}
.hide{display:none !important;}

/*####################
jQuery UI Dialog
######################*/
.ui-dialog{position:absolute; z-index:1000; overflow:hidden;  outline:0;}
.ui-dialog-titlebar{display:none;}
.ui-dialog-content{padding:32px; border-radius:8px; background-color:rgb(0 0 0 / 48%); box-shadow:0 0 10px rgb(0 0 0 / 5%); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
.ui-dialog-content>p{color:#fff; font-family:'NanumSquare'; font-size:24px;}
.ui-dialog-buttonset{display:flex; justify-content:center; align-items:center; gap:1rem; padding:8px 16px 24px 16px;}
.ui-dialog-buttonset button{align-items:center; padding:0 16px 2px 16px; height:40px; color:#fff; font-family:'NanumSquare'; font-size:16.5px;}
.ui-dialog-buttonset button:is(.record, .shoot, .attach, .check, .dreamtree){background-color:var(--grapefruit-normal);}
.ui-dialog-buttonset button.cancel{background-color:rgb(0 0 0 / 20%);}
.ui-draggable .ui-dialog-titlebar{cursor:move;}
.ui-widget-overlay{position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgb(0 0 0 / 50%);}
/* message type */
#dialog-message.ui-dialog-content{display:flex; justify-content:center; align-items:center; column-gap:10px; margin-top:8px; padding:24px; background-color:var(--darkblue-normal); backdrop-filter:none;}
#dialog-message.sucess.ui-dialog-content{background-color:rgb(0 0 0 / 75%); box-shadow:0 0 10px rgb(0 0 0 / 5%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); outline:0;}
#dialog-message.fail.ui-dialog-content{background-color:var(--grapefruit-normal);}


body{background-color:#000;}
#wrap{margin:0 auto;width:100%;}
.toparea .mainnum{display:flex; margin:0 auto; width:1200px;}
.toparea .mainnum h1{width:300px;  padding-top:5px; font-size:55px; color:#febf0f; text-align:center;}

.toparea{position:relative; height:1036px; background-image:url(../../img/exp/1000hours_2024/top_img.jpg); background-position:center top;}
#container .pagevent {position:relative;text-align:center; padding-top:25px;padding-bottom:30px;}

/* container */
#container{position:relative; z-index:1;  overflow:hidden;}
#container .section{position:relative; margin:0 auto; text-align:center;padding-top:50px; padding-bottom:50px;}
/*#container #s5.section:before{content:''; position:absolute; z-index:10; left:0; right:0; top:0; bottom:0; background-color:rgba(0,0,0,0.7);}
#container #s5.section:after{content:'오픈 준비중입니다.'; position:absolute; z-index:11; left:0; right:0; top:50%; color:#fff; font-family:'Open Sans', 'NanumSquare'; font-size:40px; font-weight:400; letter-spacing:-0.5px;}*/
#container>.event_info{position:relative; }
#container>.event_info .title {position:relative;text-align:center; padding-top:35px;}


#s1{background-color:#ffc1c2; }
#s1 .summary{display:inline-block; padding-top:25px; margin-bottom:50px;}
#s1 .summary>dl{display:table;}
#s1 .summary>dl>dt,
#s1 .summary>dl>dd{display:table-cell; padding:7px 30px; line-height:1; color:#000; font-family:'Open Sans', 'NanumSquare'; font-size:28px; font-weight:400; letter-spacing:-0.5px;}
#s1 .summary>dl:first-child>dt,
#s1 .summary>dl:first-child>dd{padding-top:0;}
#s1 .summary>dl:last-child>dt,
#s1 .summary>dl:last-child>dd{padding-bottom:0;}
#s1 .summary>dl>dt{border-right:1px solid #979ba0; font-weight:600;}

#s3{background-color:#fff3e4;}
#s3 .char{display:flex; justify-content:center; padding-top:30px;}
#s3 .char-item{display:flex; justify-content:center; align-items:flex-end; position:relative; width:350px; cursor:pointer;}
#s3 .char-item:nth-child(1){z-index:1; -webkit-animation:jump 2s infinite ease-in-out both; animation:jump 2s infinite ease-in-out both;}
#s3 .char-item:nth-child(2){z-index:2;-webkit-animation:jump 1.8s 0.5s infinite ease-in-out both; animation:jump 1.8s 0.5s infinite ease-in-out both;}
#s3 .char-item:nth-child(3){z-index:3; -webkit-animation:jump 2s 0.8s infinite ease-in-out both; animation:jump 2s 0.8s infinite ease-in-out both;}
#s3 .char-item:nth-child(4){z-index:1; -webkit-animation:jump 1.8s 1s infinite ease-in-out both; animation:jump 1.8s 1s infinite ease-in-out both;}
#s3 .char-item:nth-child(5){z-index:2; -webkit-animation:jump 1.9s 1.2s infinite ease-in-out both; animation:jump 1.9s 1.2s infinite ease-in-out both;}
#s3 .char-item:nth-child(6){z-index:3;  -webkit-animation:jump 1.9s 1.2s infinite ease-in-out both; animation:jump 1.9s 1.2s infinite ease-in-out both;}

/* animated character */
@-webkit-keyframes jump { 
   0% { -webkit-transform: translateY(-10px); transform: translateY(-10px);} 
   50% { -webkit-transform: translateY(10px); transform: translateY(10px);} 
   100% { -webkit-transform: translateY(-10px); transform: translateY(-10px);} 
}
@keyframes jump { 
   0% { -webkit-transform: translateY(-10px); transform: translateY(-10px);} 
   50% { -webkit-transform: translateY(10px); transform: translateY(10px);} 
   100% { -webkit-transform: translateY(-10px); transform: translateY(-10px);} 
}

#s3 .char-item:hover{z-index:10; -webkit-animation-play-state:paused; animation-play-state:paused;}
#s3 .char-item>.info-pop{position:absolute; transform:scale(0); -webkit-transition:all 0.5s; -moz-transition:all 0.5s; transition:all 0.5s;}
#s3 .char-item:hover>.info-pop{transform:scale(1);}
#s3 .char-item:nth-child(1)>.info-pop{left:250px; top:15px; transform-origin:left;}
#s3 .char-item:nth-child(2)>.info-pop{left:-320px; top:50px; transform-origin:left;}
#s3 .char-item:nth-child(3)>.info-pop{right:250px; top:100px;}


/* button style */
input[type=text],
input[type=password]{margin:0; padding:10px; border:2px solid #dadada; color:#5b653c; height:100px; font-weight:bold; vertical-align:middle; font-size:40px;border-radius:10px;}

/* footer */
#footer{position:relative; margin:0 0px; padding:10px 0;   background-color:#fff3e4;}
#footer p{clear:both; padding:10px 0; color:#999; font-family:'opensans'; font-size:12px; text-align:center;}