/* basic-set */
b { font-weight:800; }
.bt_txt { display:inline-block; zoom:1; *display:inline; text-align:center; }
.bt_txt:hover { text-decoration:none; }
input[type=text],
input[type=password],
textarea
{
    -webkit-box-sizing :border-box;‌​
    -moz-box-sizing :border-box;
    box-sizing :border-box;
	line-height:auto; 
}
* { position:relative; }
::-webkit-input-placeholder { color:#c7c7c7; }/* WebKit browsers */
:-moz-placeholder { color:#c7c7c7; }/* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color:#c7c7c7; }/* Mozilla Firefox 19+ */
:-ms-input-placeholder { color:#c7c7c7; }/* Internet Explorer 10+ */

/* layout */
#wrap { min-width:320px; padding-bottom:calc(0/640*100vw); background:#e0e0e0; }
#wrap.sub { padding:0; }

#h_tx { background:#fff; z-index:1; }
#h_tx img { width:100%; }
#h_tx a { position:absolute; top:0; bottom:0; text-indent:-9999px; }
#h_tx .bt01 { left:3.6vw; width:11.7vw; }
#h_tx .bt02 { left:19.5vw; width:9.65vw; }
	
header { position:fixed; bottom:0; left:0; right:0; height:calc(100/640*100vw); background:#e0eff1; z-index:51; }

.nav_container { position:absolute; top:calc(10/640*100vw); left:calc(15/640*100vw); right:calc(15/640*100vw); }

nav li { float:left; width:33.3333333%; }
nav li a { display:block; height:calc(80/640*100vw); margin:0 calc(5/640*100vw); background-size:100% 100%; }
nav li:nth-child(1) a { background-image:url(../images/menu01.png); }
nav li:nth-child(2) a { background-image:url(../images/menu02.png); }
nav li:nth-child(3) a { background-image:url(../images/menu03.png); }
nav li:nth-child(1) a.selected { background-image:url(../images/menu01on.png); }
nav li:nth-child(2) a.selected { background-image:url(../images/menu02on.png); }
nav li:nth-child(3) a.selected { background-image:url(../images/menu03on.png); }

.f_sns { padding:5.2vw 0; background:#fafafa; }
.f_sns h3 { font-family: 'NanumSquare'; margin-bottom:3.125vw; font-size:4.35vw; color:#222; text-align:center; letter-spacing:-0.5vw; font-weight:normal; }
.f_sns ul { position:relative; text-align:center; }
.f_sns li { display:inline-block; width:12.2vw; margin:0 0.8vw; }
.f_sns li a { display:block; height:12.2vw; text-indent:-9999px; text-align:left; background-size:100% 100%; }
.f_sns li.s01 a { background-image:url(../images/f_sns01.png); }
.f_sns li.s02 a { background-image:url(../images/f_sns02.png); }
.f_sns li.s03 a { background-image:url(../images/f_sns03.png); }
.f_sns li.s04 a { background-image:url(../images/f_sns04.png); }
.f_sns li.s05 a { background-image:url(../images/f_sns05.png); }
.f_sns li.s06 a { background-image:url(../images/f_sns06.png); }

#footer { background:#e0e0e0; padding:7vw 4vw; text-align:center; font-family: 'Noto Sans KR'; font-size:3vw; line-height:130%; color:#3f3f3f; }
#footer .count { font-family: 'NanumSquare'; color:#111; margin-bottom:5vw; }
#footer .count dl { display:inline-block; margin:0 2vw; font-size:3.75vw; }
#footer .count dl dt { display:inline-block; border-right:1px solid #787878; padding-right:1.5vw; margin-right:1vw; }
#footer .count dl dd { display:inline-block; color:#000; font-weight:800; }
#footer .bt_pc { display:inline-block; margin:0 auto 5vw; width:40vw; height:7.8vw; line-height:7.8vw; background:#3f3f3f; color:#fff; font-size:4vw; text-align:center; }
#footer .e_mail { color:#969696; margin-bottom:1.8vw; }
#footer .e_mail a { color:#969696; }

.i_tx { position:absolute; top:0; left:0; visibility:hidden; }

section { background-position:center 0; background-size:cover; }
section > img { width:100%; }
#t_area { display:block; }

.bt img { width:100%; }
6
/* t_area */
#t_area { padding-bottom:calc(50/640*100vw); }
#t_area .sub_tit { position:absolute; top:calc(176/640*100vw); left:0; right:0; }
#t_area .sub_tit img { width:100%; }

#t_area .bt_cha { position:absolute; top:calc(22/640*100vw); left:calc(20/640*100vw); width:calc(130/640*100vw); height:calc(130/640*100vw); text-indent:-9999px; background-size:100% 100%; }
#t_area .bt_cha.cha01 { background-image:url(../images/bt_cha01.png); }
#t_area .bt_cha.cha02 { background-image:url(../images/bt_cha02.png); left:calc(170/640*100vw); }
#t_area .banner { position:absolute; top:calc(22/640*100vw); right:calc(20/640*100vw); width:calc(130/640*100vw); height:calc(130/640*100vw); }
#t_area .banner img {width:100%;}

.animated { -webkit-animation-duration:7s; animation-duration:7s; -webkit-animation-fill-mode:both; animation-fill-mode:both }
.animated.infinite { -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite }
@keyframes bounce { 
0%, 25%, 50%, 75%, to {
-webkit-animation-timing-function:cubic-bezier(.215, .61, .355, 1);
animation-timing-function:cubic-bezier(.215, .61, .355, 1);
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
25% {
-webkit-transform:translate3d(0, -15px, 0);
transform:translate3d(0, -15px, 0)
}
50% {
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
75% {
-webkit-transform:translate3d(0, -15px, 0);
transform:translate3d(0, -15px, 0)
}
}
.bounce { -webkit-animation-name:bounce; animation-name:bounce; -webkit-transform-origin:center bottom; transform-origin:center bottom }

.railload { position:absolute; bottom:0; left:0; right:0; height:calc(220/640*100vw); background:url(../images/railload.png) repeat-x left bottom; background-size:auto calc(58/640*100vw); z-index:5; overflow:hidden; }
.railload ul { position:absolute; bottom:0; left:0; right:-100%; height:100%; overflow:hidden; }
.railload ul li {position:absolute; float:left;width:calc(300/640*100vw); margin:0 calc(-40/640*100vw); height:100%; background-repeat:no-repeat; background-position:center 50%; background-size:100% auto; }
.railload ul li.r01 { background-image:url(../images/railload/01.png); background-position:center 110%; }
.railload ul li.r02 { background-image:url(../images/railload/02.png); background-position:center 130%; }
.railload ul li.r03 { background-image:url(../images/railload/03.png); background-position:center 130%; }
.railload ul li.r04 { background-image:url(../images/railload/04.png); background-position:center 70%; }
.railload ul li.r05 { background-image:url(../images/railload/05.png); background-position:center 80%; background-size:100% auto; }
.railload ul li.r06 { background-image:url(../images/railload/06.png); background-position:center 110%; }
.railload ul li.r07 { background-image:url(../images/railload/07.png); background-position:center 140%; }
.railload ul li.r08 { background-image:url(../images/railload/08.png); background-position:center 80%; }
.railload ul li.r09 { background-image:url(../images/railload/09.png); background-position:center 160%; }
.railload ul li.r01.on { background-image:url(../images/railload/01on.png); }
.railload ul li.r02.on { background-image:url(../images/railload/02on.png); }
.railload ul li.r03.on { background-image:url(../images/railload/03on.png); }
.railload ul li.r04.on { background-image:url(../images/railload/04on.png); }
.railload ul li.r05.on { background-image:url(../images/railload/05on.png); }
.railload ul li.r06.on { background-image:url(../images/railload/06on.png); }
.railload ul li.r07.on { background-image:url(../images/railload/07on.png); }
.railload ul li.r08.on { background-image:url(../images/railload/08on.png); }
.railload ul li.r09.on { background-image:url(../images/railload/09on.png); }


/* event */
.e_count { text-align:center; background:#fff; padding:calc(15/640*100vw) 0; font-family: "NanumSquareRound"; font-size:calc(20/640*100vw); color:#222; margin-top:calc(40/640*100vw); letter-spacing:calc(-1/640*100vw); }
.e_count span { display:block; font-size:calc(24/640*100vw); letter-spacing:calc(-1.5/640*100vw); margin-bottom:calc(3/640*100vw); font-weight:800 !important; }
.e_count span b { display:inline-block; font-size:calc(38/640*100vw); vertical-align:middle; }
.con02 .e_count span { color:#1180ff; }
.con03 .e_count span { color:#845700; }

.noti { padding:calc(35/640*100vw) calc(20/640*100vw); }
.noti p { font-family: 'Noto Sans KR'; font-size:calc(20/640*100vw); line-height:125%; color:#333; opacity:0.6; -webkit-opacity:0.6; padding-left:calc(15/640*100vw); letter-spacing:calc(-1/640*100vw); }
.noti p i { position:absolute; top:calc(5/640*100vw); left:0; }

.con01 { background:url(../images/con01_bg.jpg); background-position:center bottom; padding:calc(520/640*100vw) 0 calc(90/640*100vw); background-repeat:no-repeat;background-size:100%;background-color:#e7ffb1;}
.con01 .video { position:absolute; top:calc(11/640*100vw); left:0; right:0; height:calc(485/640*100vw); }
.con01 .video .box { position:absolute; top:calc(50/640*100vw); left:calc(20/640*100vw); right:calc(20/640*100vw); bottom:calc(67/640*100vw); background:#38b449; border-radius:calc(20/640*100vw); }
.con01 .video iframe { position:absolute; top:calc(7/640*100vw); left:calc(7/640*100vw); width:calc(100% - 14/640*100vw); height:calc(100% - 14/640*100vw); border-radius:calc(20/640*100vw); }
.con01 .video .deco { position:absolute; background-size:100% 100%; }
.con01 .video .deco.t { top:0; left:0; right:0; height:calc(71/640*100vw); background-image:url(../images/con01_video_deco_t.png); }
.con01 .video .deco.b { bottom:0; left:0; right:0; height:calc(88/640*100vw); background-image:url(../images/con01_video_deco_b.png); }
.con01 .video .deco.l { top:calc(71/640*100vw); left:0; bottom:calc(88/640*100vw); width:calc(38/640*100vw); background-image:url(../images/con01_video_deco_l.png); }
.con01 .video .deco.r { top:calc(71/640*100vw); right:0; bottom:calc(88/640*100vw); width:calc(40/640*100vw); background-image:url(../images/con01_video_deco_r.png); }
.con01 .download { margin:0 calc(20/640*100vw); }
.con01 .download .slider { height:calc(364/640*100vw); background:url(../images/con01_slider_bg.png); background-size:100% 100%; margin-bottom:calc(20/640*100vw); }
.con01 .download .slider:after { content:''; position:absolute; bottom:calc(13/640*100vw); right:calc(50/640*100vw); width:calc(48/640*100vw); height:calc(17/640*100vw); background:url(../images/con01_slider_deco.png); background-size:100% 100%; z-index:10; }
.con01 .download .swiper-container { position:absolute; top:calc(13/640*100vw); left:calc(14/640*100vw); right:calc(14/640*100vw); bottom:calc(13/640*100vw); border-radius:calc(10/640*100vw); overflow:hidden; background:#fff; }
.con01 .download .swiper-container img { width:100%; }
.con01 .download .swiper-button-prev,
.con01 .download .swiper-button-next { position:absolute; top:50%; width:calc(52/640*100vw); height:calc(40/640*100vw); transform:translateY(-50%); -webkit-transform:translateY(-50%); z-index:10; background-size:100% 100%; }
.con01 .download .swiper-button-prev { left:0; background-image:url(../images/con01_slider_prev.png); }
.con01 .download .swiper-button-next { right:0; background-image:url(../images/con01_slider_next.png); }

.con02 { background:url(../images/con02_bg.jpg); }
.con02 .contents .quiz { margin:0 calc(20/640*100vw); height:calc(663/640*100vw); }
.con02 .contents .quiz h3 { position:absolute; top:0; left:0; visibility:hidden; }
.con02 .contents .quiz > div { position:absolute; top:0; left:0; right:0; display:none; }
.con02 .contents .quiz > div img { width:100%; }
.con02 .contents .quiz .question { display:block; }
.con02 .contents .quiz .question .box input { position:absolute; bottom:calc(67/640*100vw); width:calc(100/640*100vw); height:calc(105/640*100vw); background:none; border:0; outline:0; font-family: "NanumSquareRound"; font-size:calc(50/640*100vw); color:#000; font-weight:800; overflow:hidden; text-align:center;}
.con02 .contents .quiz .question .box .box01  {left:calc(55/640*100vw);}
.con02 .contents .quiz .question .box .box02  {left:calc(186/640*100vw);}
.con02 .contents .quiz .question .box .box03  {left:calc(318/640*100vw);}
.con02 .contents .quiz .question .box .box04  {left:calc(448/640*100vw);}
.con02 .contents .quiz .box { margin-bottom:calc(10/640*100vw); }
.con02 .contents .quiz .btn { text-align:center; }
.con02 .contents .quiz .btn.b02 a { display:block; width:calc(50% - 5/640*100vw); }
.con02 .noti { background:#c7eef9; }

.con03 { background:url(../images/con03_bg.jpg); }
.con03 .contents { margin:0 calc(20/640*100vw); }
.con03 .contents > img { width:100%; }
.con03 .contents .step { margin-bottom:calc(10/640*100vw); }
.con03 .contents .bt { display:block; margin-bottom:calc(50/640*100vw); }
.con03_sns { text-align:center; margin:0 calc(50/640*100vw) calc(40/640*100vw); }
.con03_sns li { display:inline-block; width:calc(70/640*100vw); margin:0 calc(14/640*100vw) calc(30/640*100vw); }
.con03_sns li img { width:100%; }
.con03 .noti { background:#eeee8f; border-bottom:1px dashed #eeee8f; }
.con03 .img_upload { height:calc(528/640*100vw); margin:0 calc(20/640*100vw); }
.con03 .img_upload:before { content:''; position:absolute; top:0; left:0; right:0; height:calc(364/640*100vw); background:url(../images/con03_img_preview_bg.png); background-size:100% 100%; }
.con03 .img_upload .guide { position:absolute; top:calc(377/640*100vw); font-family: 'Noto Sans KR'; font-size:calc(20/640*100vw); color:#7e7e3e; letter-spacing:calc(-1.5/640*100vw); }
.con03 .img_upload .guide i { display:inline-block; vertical-align:middle; margin-top:calc(3/640*100vw); }
.con03 .img_upload .btn { position:absolute; top:calc(428/640*100vw); left:0; right:0; text-align:center; }

.img_regi { position:absolute; top:calc(13/640*100vw); left:calc(14/640*100vw); right:calc(14/640*100vw); height:calc(338/640*100vw); border-radius:calc(10/640*100vw); overflow:hidden; }
.img_regi .ph { position:absolute; top:0; left:-100%; right:-100%; bottom:0; text-align:center; overflow:hidden; }
.img_regi .ph img { height:100%; visibility:hidden; }
.img_regi input[type="file"] { position:absolute; left:0; top:0; width:100%; height:100%; filter:alpha(opacity=0); opacity:0; cursor:pointer; z-index:5; }
.img_regi a { position:absolute; left:0; bottom:0; width:100%; height:50px; line-height:50px; background:#000; color:#fff; text-align:center; text-decoration:none; display:none; }

.board { padding:80px 0 70px; background:#f4f4e4; }
.board h3 { margin-bottom:50px; text-align:center; }
.board .list { width:1128px; margin:0 auto; padding-bottom:30px; }
.board li { float:left; width:250px; margin:0 16px 35px; }
.board li .ph { border:1px solid #e3e3d5; height:248px; background-image:url(../images/con03_borad_b_img01.png); border-radius:10px; overflow:hidden; margin-bottom:15px; }
.board li:nth-child(even) .ph { background-image:url(../images/con03_borad_b_img02.png); }
.board li .tx { font-family: "NanumSquareRound"; font-size:18px; line-height:24px; color:#333; }
.board li .tx b { font-size:22px; font-weight:800; }
.board li .tx span { position:absolute; top:0; right:0; opacity:0.4; -webkit-opacity:0.4; }

.pagination { position:relative; text-align:center; }
.pagination img { vertical-align:middle; }
.pagination span { padding:0 10px; display:inline-block; color:#333; }
.pagination span a { margin:0 12px;  display:inline-block; color:#333; font-weight:normal; font-family: "NanumSquareRound"; font-size:18px; line-height:19px; opacity:0.4; -webkit-opacity:0.4; }
.pagination span a:hover { text-decoration:underline; }
.pagination span a.on { font-weight:800; opacity:1; -webkit-opacity:1; text-decoration:underline; }


/* popup */
html.on { height:100%; overflow:hidden; }
.pu_bg { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:98; display:none; }

.pu { position:fixed; top:calc(20/640*100vw); left:calc(20/640*100vw); right:calc(20/640*100vw); bottom:calc(20/640*100vw); z-index:99; display:none; }
.pu .bt_close { position:absolute; top:calc(-60/640*100vw); right:0; width:calc(50/640*100vw); height:calc(50/640*100vw); background:url(../images/bt_pu_close.png) no-repeat 0 0; background-size:100% 100%; text-indent:-9999px; }

.pu_event_info { background:#f4f4e4; font-family: 'Noto Sans KR'; }
.pu_event_info .p_con { position:absolute; top:0; left:0; right:0; bottom:14vw; padding:3.125vw; overflow:hidden; overflow-y:auto; }
.pu_event_info .p_con dt { position:relative; font-size:3vw; color:#74746a; text-align:left; margin-bottom:1.5vw; letter-spacing:-0.1vw; }
.pu_event_info .p_con .ty01 { position:relative; margin-bottom:3vw; }
.pu_event_info .p_con .ty01 dd input { width:100%; height:8vw; line-height:8vw; background:#fff; border:0; padding:0 2vw; }
.pu_event_info .p_con .ty01 dd.num { *zoom:1; }
.pu_event_info .p_con .ty01 dd.num:after { content: "."; clear:both; display:block; height:0; visibility:hidden; }
.pu_event_info .p_con .ty01 dd.num input { text-align:center; float:left; width:30%; }
.pu_event_info .p_con .ty01 dd.num i { float:left; width:5%; text-align:center; color:#74746a; line-height:8vw; }
.pu_event_info .p_con .ty02 { margin-bottom:3vw; }
.pu_event_info .p_con .ty02 dt { margin-bottom:2vw; }
.pu_event_info .p_con .ty02 dt span { position:absolute; top:0; right:0; }
.pu_event_info .p_con .ty02 dt span input { margin:0; }
.pu_event_info .p_con .ty02 dd { background:#fff; padding:2vw 2vw; max-height:60vw; overflow:hidden; overflow-y:auto;  }
.pu_event_info .btns { position:absolute; bottom:0; left:0; right:0; }
.pu_event_info .btns:before { position:absolute; content:''; top:0; left:50%; bottom:0; width:1px; background:#f4f4e4; z-index:1; }
.pu_event_info .btns:after { content:''; clear:both; display:block; height:0; visibility:hidden; }
.pu_event_info .btns a { float:left; width:50%; display:block; height:14vw; line-height:14vw; background:#333; text-align:center; font-size:4.6vw; color:#fff; font-weight:700; }
.pu_event_info .btns a:hover { text-decoration:none; }
.pu_event_info table { width:100%; color:#333; line-height:3vw; }
.pu_event_info table th { font-size:2.5vw; padding:1.5vw; text-align:center; vertical-align:top; }
.pu_event_info table td { font-size:2.2vw; padding:1.5vw; vertical-align:top; }
.pu_event_info .checks input[type="checkbox"] { position:absolute; top:0; left:0; opacity:0; -webkit-opacity:0; }
.pu_event_info .checks input[type="checkbox"] + label:after { content:''; display:inline-block; width:4.6vw; height:4.8vw; margin:-1.5vw -0.7vw 0 2vw; text-align:center; vertical-align:middle; background-image:url(../images/check.png); background-size:100% 100%; }
.pu_event_info .checks input[type="checkbox"]:checked + label:after { background-image:url(../images/check_on.png); }

.pu_event_done { position:fixed; top:50%; bottom:auto; left:2vw; right:2vw; background:#000; transform:translateY(-50%); -webkit-transform:translateY(-50%); }
.pu_event_done img { width:100%; }
.pu_event_done .btn a { display:block; height:9.3vw; line-height:9.3vw; background:#222; text-align:center; font-size:4.6vw; color:#fff; font-weight:800; letter-spacing:2vw; }
.pu_event_done .btn a:hover { text-decoration:none; }

.pu_cha { top:calc(90/640*100vw); bottom:calc(20/640*100vw); }
.pu_cha:before { content:''; position:absolute; top:calc(180/640*100vw); left:0; right:0; bottom:0; background:#fff; }
.pu_cha img { width:100%; }
.pu_cha .con { position:absolute; top:calc(371/640*100vw); left:0; right:0; bottom:0; overflow:hidden; overflow-y:auto; background:#fff; }