@charset "utf-8";

@import url('base.css');
@import url('http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700');

/************************************************
	layout
************************************************/
body.ovf_hdn, .ovf_hdn{overflow:hidden}

#wrap{ position:relative;}

#header{ position:fixed; width:100%; z-index:2;}
#header>.inner{ position:relative; height:45px; background-color:#0f6347; }
#header h1.logo{ position:absolute; width:98px; top:14px; left:50%; margin-left:-49px; }
#header h1.logo a{ display:block; height:16px; background:url(../images/logo.png) 50% 0 no-repeat; background-size:98px 16px; text-indent:-9999px;}
#header .bt-menu{ position:absolute; top:50%; left:10px; margin-top:-12px; background:url(../images/bt_menu.png) 50% 50% no-repeat; width:24px; height:24px; background-size:24px auto; text-indent:-9999px;}
#header .bt-search{ position:absolute; top:50%; right:10px; margin-top:-12px; background:url(../images/bt_search.png) 50% 50% no-repeat; width:24px; height:24px; background-size:24px auto; text-indent:-9999px; display:none;}

#container{ position:relative; z-index:1; padding-top:45px; overflow:hidden;}

#footer{ background-color:#f5f5f5; border-top:#cfd0d2 1px solid; font-size:11px; }
#footer .footer-info{ position:relative; padding:0 40px 0 15px; border-bottom:#e6e7e8 1px solid; text-align:left;}
#footer .footer-info li{ position:relative; display:inline-block; }
#footer .footer-info a{ line-height:40px; height:40px; display:block; padding:0 10px;}
#footer .footer-info li:first-child a{ color:#06954a; padding-left:0;}
#footer .footer-info li:nth-child(3) a{ padding-right:0;}
#footer .footer-info li a:before{ content:""; position:absolute; top:50%; left:0; margin-top:-3px; width:1px; height:6px; display:block; background-color:#d5ddde;  }
#footer .footer-info li:last-child{ position:absolute; top:0; right:0; width:40px; height:40px;}
#footer .footer-info li:last-child a{ background:url(../images/bt_top.png) 50% 50% no-repeat; text-indent:-9999px; background-size:20px auto; border-left:#e6e7e8 1px solid;}
#footer .footer-info li:first-child a:before,
#footer .footer-info li:last-child a:before{ display:none;}
#footer .footer-copy{ text-align:left; padding:18px 15px;}
#footer .footer-copy .right{ float:right;}
#footer .footer-copy .right a{ position:relative; display:inline-block; color:#222;}
#footer .footer-copy .right a+a{ margin-left:10px; padding-left:10px;}
#footer .footer-copy .right a+a:after{ content:""; position:absolute; top:50%; left:0; margin-top:-4px; width:1px; height:8px; background-color:#cad4d6; display:block;}

.side-menu{ position:absolute; top:0; left:-100%; background-color:#fff; width:100%; z-index:9;}
.side-menu .bt-close{ position:absolute; top:0; left:0; width:45px; height:45px; display:block; background:#fff url(../images/bt_x.png) 50% 50% no-repeat; background-size:16px; text-indent:-9999px;}
.side-menu .lm-hd{ height:45px; background-color:#0f6347; text-align:right;}
.side-menu .lm-hd h1.logo{ position:absolute; width:98px; top:14px; left:50%; margin-left:-49px; }
.side-menu .lm-hd h1.logo a{ display:block; height:16px; background:url(../images/logo.png) 50% 0 no-repeat; background-size:98px 16px; text-indent:-9999px; text-align:left;}
.side-menu .lm-hd a{ position:relative; color:#fff; font-size:14px; padding:0 16px 0 18px; line-height:45px; display:inline-block;}
.side-menu .menu-wr{ position:relative; padding:0 0 0 90px; width:100%;}
.side-menu .menu-wr .left-mn{ position:absolute; top:0; left:0; width:90px; }
.side-menu .menu-wr .left-mn li a{ display:block; line-height:45px; background:#f5f5f5; font-size:13px; padding:0 0 0 10px; border-bottom:#e5e5e5 1px solid;}
.side-menu .menu-wr .left-mn li.active{ position:relative; width:91px;}
.side-menu .menu-wr .left-mn li.active a{ background-color:#fff;}
.side-menu .menu-wr .left-mn li.com a{ background-color:#eafff0;}
.side-menu .menu-wr .scroll{ overflow-y:auto;}
.side-menu .menu-wr .right-mn{  border-left:#eaeaea 1px solid; }
.side-menu .menu-wr .right-mn .scroll{ padding:0 26px 500px;}
.side-menu .menu-wr .right-mn .innBx>a{ line-height:1; padding:68px 0 15px 0; border-bottom:#06954a 2px solid; color:#222; display:block; font-size:14px;} 
.side-menu .menu-wr .right-mn .innBx:first-child>a{ padding-top:16px;}
.side-menu .menu-wr .right-mn .innBx+.innBx{ margin-top:-45px;}
.side-menu .menu-wr .right-mn .innBx>ul>li>a{ position:relative; display:block; line-height:36px; border-bottom:#e5e5e5 1px solid; padding-left:16px;}
.side-menu .menu-wr .right-mn .innBx>ul>li>a:before{ content:""; width:3px; height:3px; background-color:#a0b0b4; display:block; position:absolute; top:50%; left:5px; margin-top:-2px;}
.side-menu .menu-wr .right-mn .coming{ text-align:center; line-height:80px; border-bottom:#e5e5e5 1px solid; color:#a0b0b4;}
.side-menu .sns{ padding:38px 0 0 0; background-color:#fff;}
.side-menu .sns:after{ content:''; display:block; clear:both; height:0; visibility:hidden;}
.side-menu .sns li{ float:left; margin:0 0 0 6px;}
.side-menu .sns li.sns1{ margin:0;}
.side-menu .sns li a{ display:block; width:30px; height:30px; text-indent:-9999px;}
.side-menu .sns li.sns1 a{ background:url(../images/footer_sns1.png) 50% 50% no-repeat; background-size:30px;}
.side-menu .sns li.sns2 a{ background:url(../images/footer_sns2.png) 50% 50% no-repeat; background-size:30px;}
.side-menu .sns li.sns3 a{ background:url(../images/footer_sns3.png) 50% 50% no-repeat; background-size:30px;}
.side-menu .sns li.sns4 a{ background:url(../images/footer_sns4.png) 50% 50% no-repeat; background-size:30px;}
.side-menu .sns li.sns5 a{ background:url(../images/footer_sns5.png) 50% 50% no-repeat; background-size:30px;}
.side-menu .link-site{ margin-top:18px; border:#e9e9e9 1px solid; border-bottom:none;}
.side-menu .link-site a{ position:relative; display:block; font-size:12px; color:#0b7a40; line-height:38px; border-bottom:#e9e9e9 1px solid; padding:0 12px;}
.side-menu .link-site a:after{ content:""; position:absolute; top:50%; right:9px; margin-top:-5px; display:block; background:url(../images/arr_dot.png) 50% 50% no-repeat; background-size:6px 11px; width:6px; height:11px; }

.tit-area{ position:relative; height:48px; background-color:#fff; }
.tit-area h2{ text-align:center; line-height:48px; color:#222; font-size:18px; font-weight:normal; }
.tit-area>a{ display:block; width:10px; height:16px; text-indent:-9999px; position:absolute; top:50%; margin-top:-8px; }
.tit-area .prev{ background:url(../images/arr_prev.png) 50% 50% no-repeat; background-size:10px auto; left:18px;}
.tit-area .next{ background:url(../images/arr_next.png) 50% 50% no-repeat; background-size:10px auto; right:18px;}
.tit-area.product{ padding:15px 50px; height:auto;}
.tit-area.product>h2{ line-height:1.1em; margin:0;}

/* paging */
div.paging{ text-align:center; padding:0; margin:20px 0 0 0; position:relative;}
div.paging a,
div.paging span{ display:inline-block; width:28px; height:28px; border:#cad4d6 1px solid; background:#fff; line-height:26px; font-size:12px; text-align:center; margin:0 1px; color:#6d7577; vertical-align:middle; }
div.paging a.on{ color:#fff; background-color:#6d7577; border:#6d7577 1px solid; font-weight:bold; text-decoration:none;}
div.paging .direction{ text-indent:-9999px; width:24px; border:none;}
div.paging .direction.prev{ background:#fff url(../images/paging_prev.png) 50% 50% no-repeat; margin:0 5px 0 -5px; background-size:7px 12px;}
div.paging .direction.next{ background:#fff url(../images/paging_next.png) 50% 50% no-repeat; margin:0 -5px 0 5px; background-size:7px 12px;}
div.paging .direction.fir{ background:#fff url(../images/paging_first.png) 50% 50% no-repeat; margin:0; background-size:14px 12px;}
div.paging .direction.last{ background:#fff url(../images/paging_last.png) 50% 50% no-repeat; margin:0; background-size:14px 12px;}

/* ul list */
.num-list li{ text-indent:-14px; padding-left:14px;}
.num-list li+li{ margin-top:10px;}

.ul-list01 li{ position:relative; padding:0 0 0 10px;}
.ul-list01 li:after{ content:""; position:absolute; top:8px; left:0; width:2px; height:2px; display:block; background-color:#06954a; }
.ul-list01 li+li{ margin-top:5px;}

.ul-list02 li{ text-indent:-18px; padding:0 0 0 18px;}
.ul-list02 li+li{ margin-top:8px;}
.ul-list03 li{ text-indent:-8px; padding:0 0 0 8px;}
.ul-list03 li+li{ margin-top:8px;}

/* popup */
.bPopup{ display:none; width:100%; padding:45px 30px 0;}
.bPopup .inner{ width:100%; position:relative; background-color:#0f6347;}
.bPopup .pop-tit{ line-height:45px; margin:0; color:#fff; background-color:#0f6347; font-size:15px; padding:0 15px;}
.bPopup .pop-con{ padding:15px 20px;  background-color:#fff;}
.bPopup .bt-close{ position:absolute; top:0; right:0; width:45px; height:45px; background:url(../images/bt_close.png) 50% 50% no-repeat; background-size:16px 16px; text-indent:-9999px; display:block;}
.pop-email .mail-tx{ font-size:14px;} 
.pop-email .mail-tx strong{ color:#222;}

.pop-slide{ position:relative; padding:0 0 35px 0;}
.pop-slide .item img{ width:100%; display:block;}
.pop-slide .bx-pager{ position:absolute; bottom:90px; left:0; width:100%; text-align:center; margin:0; padding:0; height:10px;}
.pop-slide .bx-pager .bx-pager-item{ display:inline-block; margin:0 5px;}
.pop-slide .bx-pager .bx-pager-item a{ background:#134e3a; width:10px; height:10px; display:block; border-radius:50%; text-indent:-9999px;}
.pop-slide .bx-pager .bx-pager-item a.active{ background-color:#fff;}
.pop-slide .bt-next{ position:absolute; bottom:44px; left:50%; margin:0 0 0 -90px; display:block; width:180px; font-size:15px; color:#fff; text-align:center;  height:32px; line-height:32px; border-radius:16px; border:#fff 1px solid; }
.pop-bottom{ position:absolute; bottom:0; left:0; width:100%; background-color:#133f30; line-height:34px; padding:0; }
.pop-bottom:after{ content:''; display:block; clear:both; height:0; visibility:hidden;}
/* .pop-bottom a{ display:block; color:#fff; line-height:34px; width:50%; float:left; text-align:center; border-top:#103528 1px solid;} */
.pop-bottom a{ display:block; color:#fff; line-height:34px; text-align:center; border-top:#103528 1px solid;}
.pop-bottom a.right{ border-left:#103528 1px solid;}



/**/
.brand-cont {text-align: center; padding: 40px 20px}
.brand-cont img {vertical-align: top}
.brand-cont .thum {margin-bottom: 20px}
.brand-cont .thum img {width: 40%}
.brand-cont .txt {line-height: 1.8em; text-align: left}
.brand-cont .emp {display: block; font-size: 18px; margin-bottom: 20px; color: #000; font-weight: bold; text-align: center}

.brand-wr.bread,
.brand-wr.miniforce {padding: 0}
.brand-wr.bread .emp {color: #b13200}
.brand-wr.miniforce .emp {color: #1135b1}



/***********  달님이 애니메이션+인형 페이지   **********/

@font-face {
	font-family: 'NEXON_Lv1_Light';
	font-weight: normal;
	src: url(../font/nexon/NEXON_Lv1_Light.eot);
	src: url(../font/nexon/NEXON_Lv1_Light.eot?#iefix) format('embedded-opentype'),
	url(../font/nexon/NEXON_Lv1_Light.woff) format('woff'),
	url(../font/nexon/NEXON_Lv1_Light.ttf) format('truetype');
}
@font-face {
	font-family: 'NEXON_Lv1';
	font-weight: normal;
	src: url(../font/nexon/NEXON_Lv1.eot);
	src: url(../font/nexon/NEXON_Lv1.eot?#iefix) format('embedded-opentype'),
	url(../font/nexon/NEXON_Lv1.woff) format('woff'),
	url(../font/nexon/NEXON_Lv1.ttf) format('truetype');
}
@font-face {
	font-family: 'NEXON_Lv1_Bold';
	font-weight: normal;
	src: url(../font/nexon/NEXON_Lv1_Bold.eot);
	src: url(../font/nexon/NEXON_Lv1_Bold.eot?#iefix) format('embedded-opentype'),
	url(../font/nexon/NEXON_Lv1_Bold.woff) format('woff'),
	url(../font/nexon/NEXON_Lv1_Bold.ttf) format('truetype');
}
.main_dalnim img {vertical-align: top}
.dalnim_wrap {position: relative; font-family: 'NEXON_Lv1'; color: #333}
.dalnim_wrap .visual {background: linear-gradient(to bottom, #cee7f7, #eed0e3);}
.dalnim_wrap .visual .pic {}
.dalnim_wrap .visual .pic img {vertical-align: top}
.dalnim_wrap .description {text-align: center; background: #eed0e3; padding-bottom: 100px}
.dalnim_wrap .description .copy {display: block; padding: 0 0 30px}
.dalnim_wrap .description .copy dt {font-size: 26px; font-family: 'NEXON_Lv1_Bold'; font-weight: normal; color: #3d304b; margin-bottom: 30px; letter-spacing: -1px}
.dalnim_wrap .description .copy dt em {color: #ed2f82; font-family: 'NEXON_Lv1_Bold'; font-weight: normal; }
.dalnim_wrap .description .copy dd {font-size: 14px; line-height: 1.8em; font-family: 'NEXON_Lv1';}
.dalnim_wrap .description .box {background: #fff; margin: auto 20px; padding: 50px 0; border-radius: 30px}
.dalnim_wrap .description .pic {position: relative; margin-bottom: -200px}

.dal_logo01 {text-align: center; padding: 50px 0 0; background: #cce7f6}
.dal_logo01 img {width: 240px}
.dal_logo02 {position: absolute; right: 15px; top:170px;}
.dal_logo02 img {width: 70px}

.dalnim_feature {margin: auto 20px; padding: 100px 0 50px}
.dalnim_feature:after {display: block; clear: both; content: ""}
.dalnim_feature ul {display: block; clear: both; margin-bottom: 40px}
.dalnim_feature .pic {display: block; }
.dalnim_feature .copy {}
.dalnim_feature .copy dl {display:block; vertical-align: middle; text-align: center}
.dalnim_feature .copy dt {color: #333; display: block; margin-bottom: 20px}
.dalnim_feature .copy dt p {font-size: 20px;font-family: 'NEXON_Lv1_Bold'; color: #333}
.dalnim_feature .copy dt h3 {font-size: 24px;font-family: 'NEXON_Lv1_Bold'; color: #333}
.dalnim_feature .copy dd {font-size: 14px; line-height: 1.8em; font-family: 'NEXON_Lv1';}
.dalnim_feature .even .pic {float: right} 

.dalnim_animation {clear: both; background: #457824; padding: 0 0 50px}
.dalnim_animation .visual {position: relative}
.dalnim_animation .visual img {width: 100%; vertical-align: top}
.dalnim_animation .visual .logo {position: absolute; left: 50%; top:50%; margin:-50px 0 0 -100px}
.dalnim_animation .visual .logo img {width: 200px}
.dalnim_animation .vodBox {margin: 0 20px 0}
.dalnim_animation .txt {text-align: center; margin: 30px 0 0 0;}
.dalnim_animation .txt dt {font-size: 26px;font-family: 'NEXON_Lv1_Bold'; color: #fff; margin-bottom: 20px}
.dalnim_animation .txt dt em {font-family: 'NEXON_Lv1_Bold'; color: #fff567}
.dalnim_animation .txt dd {font-size: 14px; line-height: 1.8em; font-family: 'NEXON_Lv1'; color: #fff}
.dalnim_animation .btn_wrap {text-align: center; margin-top: 30px}
.dalnim_animation .btn_wrap .btn_link {display: inline-block; padding: 10px 40px; border-radius: 50px; font-size: 24px; font-family: 'NEXON_Lv1_Bold'; color: #457824; background: #fff }

.section_title  {text-align: center; clear: both;}
.section_title .title {display: inline-block; width: 280px; height: 80px; font-family: 'NEXON_Lv1_Bold'; color: #fff; font-size: 30px; line-height: 80px;  background: url('../images/brand/dalnim/bg_title.png') no-repeat center center; background-size: 100%; letter-spacing: -1px}


.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.videoWrapper video{
	position: absolute;
	overflow: hidden;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
 	background-image: /* our video */;
 	background-position: center center;
 	background-size: contain;
    object-fit: cover; /*cover video background */
	z-index:-1;
}