/*mobile guide css*/

html, body { margin:0px; padding:0px; box-sizing:border-box; font-size: 13px; min-width: 0px;  }
html, body { width: 100%; height: 100%;  font-family:돋움,dotum,AppleGothic,arial,Helvetica,sans-serif; color:#3b3b3b; }
h1, h2, h3, h4, h5 { color: #3b3b3b; padding: 0px; margin: 0px; }
a { text-decoration:  none; color:#3b3b3b; }
ul, li, dl, dt, dd, ol { list-style: none; margin:0px; padding:0px; }
hgroup, p { padding:0px; margin:0px; }

.go_skin_guide, .page_wrap { width: 100%; height: 100%; min-width: 0px;  }
.clear {display:block;clear:both;overflow:hidden;height:0;content:'';}


.header_wrap { background: #20bec6; box-sizing:border-box; position: relative; }
.header_wrap header { position: relative; height:54px; line-height: 54px; z-index: 1; box-sizing:border-box; }
.header_wrap header hgroup {  }
.header_wrap header hgroup h1 { font-size: 18px; box-sizing:border-box; text-align: center; color: #fff; }
.header_wrap header div { z-index: 2px; position: absolute; width: 100%;  }
.header_wrap header div ul { background: #3f3f3f;  }
.header_wrap header div ul li { border-top:solid 1px #2a2a2a; height: 45px; line-height: 45px; }
.header_wrap header div ul li a { color: #fff; display: inline-block; width: 100%; height: 100%; padding: 0px 15px; color: #919aa1; }

.m_btn_wrap { box-sizing:border-box; display: inline-block; *display: block; *zoom: 1; padding:0px; width: 54px; height: 54px; position: absolute; top: 0px; left: 0px; z-index: 1; }
.m_btn_wrap:active { background: #10b0b7; }
.m_btn_wrap a.ic_menu { margin:0px; cursor: pointer; display: inline-block; *display: block; *zoom: 1; width: 100%; height:  100%; vertical-align: top;  overflow: hidden; font-size: 0px; background-image: url("../images/drawer_icon.png"); background-size: 20px 14px;  background-repeat: no-repeat; background-position: 17px 20px;  }
.m_btn_wrap a.ic_menu:active { background-color: #10b0b7 !important; }

.wrap .visual_wrap { background: #20bec6;  }
.wrap .inner .banner { box-sizing:border-box; height: 200px; position: relative; clear: both; overflow: hidden; }
.wrap .inner .banner:after { display:block;clear:both;overflow:hidden;height:0;content:''; }
.wrap .inner .banner img { }
.wrap .inner .banner .banner_tit { float:left; margin-left: 50px; margin-top: 35px; }
.wrap .inner .banner .banner_img { position:absolute; right: 50px; top: 30px; }

.wrap .visual_wrap .inner { margin-top: 0px !important; padding:0px; }

.inner .noti h2{ color: #20bec6}
.inner .noti ul li {width: 100%; overflow: hidden; text-overflow:ellipsis; font-size: 13px; line-height:150% }
.inner .noti ul{margin: 10px 0 0 10px;}
.wrap .inner .noti ul li a i {font-style: normal; width: 10px;font-weight: bold;}

.wrap .inner .sub_menu { min-height: 100px; line-height: 50px; /* background:#f9f9f9;  */text-align: center; box-sizing:border-box; padding-top: 15px;}
.wrap .inner .sub_menu a { border:solid 3px #bbb;  box-sizing:border-box; display: inline-block; *display: block; *zoom: 1;  margin:0px;  padding:13px 50px 13px 20px; line-height: 20px; border-radius: 5px; width: 100%; height: 74px; position:  relative;  font-size: 15px; vertical-align: top; font-weight: bold; text-align: left;  margin-top: 10px;  } 
.wrap .inner .sub_menu a  strong { font-size: 18px; }

.wrap .inner .sub_menu a:first-child { margin-left: 0px; padding:15px 40px 15px 20px; line-height: 20px; margin-top:0px; } 
.wrap .inner .sub_menu a + a { padding:33px 30px 15px 13px; letter-spacing: -1px; }

.wrap .inner .sub_menu a + a + a { padding: 18px 40px 15px 13px; }

.wrap .click_arr { width: 17px; height: 14px; background: url("../images/click_arr.png"); width: 17px; height: 14px; display: inline-block; *display: block; *zoom: 1; position: absolute; right: 10px; top: 25px; }
.wrap .tip { width: 33px; height:16px; background: url("../images/tip.png"); display: inline-block; *display: block; *zoom: 1; position: absolute; left: 13px; top: 10px;}
.wrap .hot { width: 33px; height:16px; background: url("../images/hot.png"); display: inline-block; *display: block; *zoom: 1; position: absolute; left: 13px; top: 10px;}
.wrap .inner .sub_menu p {line-height: 18px; }

.wrap .inner.items { /* padding: 0px 17px ;  */margin-top: 30px;   }
.wrap .inner.items .items_inner {clear: both; }
.wrap .inner.items .items_inner:after { display:block;clear:both;overflow:hidden;height:0;content:''; }
.wrap .inner .item { width: 100%; display: inline-block; box-sizing:border-box; height: 193px; margin-top: 20px;  }
.wrap .inner .item:first-child {margin-left:0px; margin-top: 0px;  }
.wrap .inner .item h2 {margin-bottom: 10px; }
.wrap .inner .item h2 a {/* color: #20bec6;  */font-size: 15px; position: relative; }
.wrap .inner .item h2 a  i { width: 4px; height: 8px; background:url("../images/more.png"); display: inline-block; *display: block; *zoom: 1; vertical-align: top; margin-top: 9px;  }
.wrap .inner .item .item_inner {text-align:center; background:#c5eef0}
.wrap .inner .item .item_inner img {width:auto; height:auto}
.wrap .inner .item a , .wrap .inner .item p {color: #747474; }
.wrap .inner .item a p {  margin-top: 20px; }
.wrap .inner .item.list_box .item_inner{ background: #c5eef0; height:108px; padding-top: 15px}
.wrap .inner .item.list_box .item_inner ul {text-align:left; }
.wrap .inner .item.list_box .item_inner ul li {position: relative; height: 24px; background:url("../images/list_dot.jpg"); text-indent: 10px;  background-repeat: no-repeat; background-position: 12px 8px; padding-right: 20px}
.wrap .inner .item.list_box .item_inner ul li a {position: absolute; top:0; left: 13px; display: inline-block; *display: block; *zoom: 1; max-width: 90%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden} 
.wrap .inner .item.list_box p {margin-top: 15px; }

.layer_frame iframe {width: 100%}

.wrap .inner .banner img.banner_tit {cursor:pointer;}

.footer { color: #bebebe; font-size: 11px; text-align: center; width: 100%; margin: 20px 0 0 0; padding-bottom: 20px;  }


@media all and (max-width: 800px){
	.wrap .inner .banner {  } 
	.wrap .inner .banner { height: 160px; } 
	.wrap .inner .banner .banner_tit { width: 300px;  height:auto; margin-left: 10px; margin-top: 44px;  }
	.wrap .inner .banner .banner_img { width: 300px;  height:auto; right: 10px; }
}
@media all and (max-width: 570px){
	.wrap .inner .banner {  } 
	.wrap .inner .banner { height: 130px; } 
	.wrap .inner .banner .banner_tit { width: 250px;  height:auto; margin-left: 10px; margin-top: 38px;  }
	.wrap .inner .banner .banner_img { width: 250px;  height:auto; right: 10px; }
}
@media all and (max-width: 470px){
	.wrap .inner .banner {  } 
	.wrap .inner .banner { height: 130px; } 
	.wrap .inner .banner .banner_tit { width: 200px;  height:auto; margin-left: 10px; margin-top: 38px;  }
	.wrap .inner .banner .banner_img { width: 210px;  height:auto; right: 10px; }
}
@media all and (max-width: 400px){
	.wrap .inner .banner {  } 
	.wrap .inner .banner { height: 130px; } 
	.wrap .inner .banner .banner_tit { width: 170px;  height:auto; margin-left: 10px; margin-top: 38px;  }
	.wrap .inner .banner .banner_img { width: 170px;  height:auto; right: 10px; }
}
	
/*guide 동영상 시작*/
p, h5 {font-family: malgun gothic,dotum,gulim; font-style: inherit;}
.list .separator, .movie .list .separator {margin: 63px 0 0; background: #3fbfb8;}
.list h5 {font-size:18px; margin-top: 7px;text-align: left; font-weight: bold;}  
.separator {display: block; margin: 18px auto 0; width: 30px; height: 4px; background: #424140;}
.list .separator, .movie .list .separator {margin: 63px 0 0;background: #3fbfb8;}
.list .separator, .movie .list .separator {margin: 63px 0 0;background: #3fbfb8;}


div.movie ul.list li {}
div.movie  ul.youtube {margin-top:22px;}
div.movie  ul.youtube li {float:left; width:220px; margin:0 20px 50px 0; }
div.movie  ul.youtube li.last {margin-right:0;}
div.movie  ul.youtube li a.thumb {display:block; width:220px; height:146px; border:2px solid #efefef}
div.movie  ul.youtube li a.thumb1 {background:url(../images/movie01.png) no-repeat center;}
div.movie  ul.youtube li a.thumb2 {background:url(../images/movie02.png) no-repeat center;}
div.movie  ul.youtube li a.thumb3 {background:url(../images/movie03.png) no-repeat center;}
div.movie  ul.youtube li a.thumb4 {background:url(../images/movie04.png) no-repeat center;}
div.movie  ul.youtube li a.thumb5 {background:url(../images/movie05.png) no-repeat center;}
div.movie  ul.youtube li a.thumb6 {background:url(../images/movie06.png) no-repeat center;}
div.movie  ul.youtube li a.thumb7 {background:url(../images/movie07.png) no-repeat center;}
div.movie  ul.youtube li a.thumb8 {background:url(../images/movie08.png) no-repeat center;}
div.movie  ul.youtube li a.thumb9 {background:url(../images/movie09.png) no-repeat center;}
div.movie  ul.youtube li a.thumb15 {background:url(../images/movie15.png) no-repeat center;}
div.movie  ul.youtube li a.thumb16 {background:url(../images/movie16.png) no-repeat center;}
iv.movie  ul.youtube li:hover a.thumb {border:2px solid #3fbfb8; cursor:pointer}
div.movie ul.youtube li a.thumb span {display:block; margin: 53px auto 0; width:39px; height:39px; background:url(../images/btn_play.png) no-repeat center;}
div.movie ul.youtube  li:hover a.thumb span {background:url(../images/btn_play00.png) no-repeat center;}
div.movie ul.youtube li p {margin-top: 5px; font-size:14px; }
div.movie ul.youtube li:hover p {font-weight:bold; text-decoration:underline; cursor:pointer}


div.popBody {display: none;position: fixed;left: 0; top: 0; width: 640px; z-index: 9999; background: #333; border: 2px solid #3FBFB8; box-shadow: 0 0 5px rgba(19, 19, 19, 0.8);}
div.popBody div.popCont {width: 100%; height: 360px; background: #f5f5f5; color: #555; text-align: center;}

ul.youtube li a.thumb span {display: block; margin: 53px auto 0; width: 39px; height: 39px; background: url(../images/btn_play.png) no-repeat center;}
a {text-decoration: none;color: #424140;}


/*guide 동영상 시작*/

.go_skin_guide .wrap .inner {
    margin: 0 auto;
    max-width: 1000px;
	overflow:hidden
}
.wrap .movie {overflow:hidden; width: 980px; margin: 0 auto; }
.movie {margin:0 0 0px 0px; display:inline-block; } 
.movie .separator {margin: 13px 0 0; background: #3fbfb8;}
.movie_inner { width: 100%; text-align: center; }
.app_guide { max-width: 980px; }
.movie h5 {font-size:18px; margin-top: 7px;text-align: left; font-weight: bold;}  
.separator {display: block; margin: 18px auto 0; width: 30px; height: 4px; background: #424140;}

.youtube {margin-top:22px; margin-left:10px;}
.youtube li {float:left; width:220px; margin:0 20px 30px 0;}
.youtube li.last {margin-right:0;}
.youtube li a.thumb {display:block; width:220px; height:146px; border:2px solid #efefef}
.youtube li a.thumb1 {background:url(../images/movie01.png) no-repeat center;}
.youtube li a.thumb2 {background:url(../images/movie02.png) no-repeat center;}
.youtube li a.thumb3 {background:url(../images/movie03.png) no-repeat center;}
div.movie  ul.youtube li a.thumb4 {background:url(../images/movie04.png) no-repeat center;}
div.movie  ul.youtube li a.thumb5 {background:url(../images/movie05.png) no-repeat center;}
div.movie  ul.youtube li a.thumb6 {background:url(../images/movie06.png) no-repeat center;}
div.movie  ul.youtube li a.thumb7 {background:url(../images/movie07.png) no-repeat center;}
div.movie  ul.youtube li a.thumb8 {background:url(../images/movie08.png) no-repeat center;}
div.movie  ul.youtube li a.thumb9 {background:url(../images/movie09.png) no-repeat center;}
div.movie  ul.youtube li a.thumb15 {background:url(../images/movie15.png) no-repeat center;}
div.movie  ul.youtube li a.thumb16 {background:url(../images/movie16.png) no-repeat center;}

div.movie  ul.youtube li a.thumb20 {background:url(../images/movie20.png) no-repeat center;}
div.movie  ul.youtube li a.thumb21 {background:url(../images/movie21.png) no-repeat center;}
div.movie  ul.youtube li a.thumb22 {background:url(../images/movie22.png) no-repeat center;}
div.movie  ul.youtube li a.thumb23 {background:url(../images/movie23.png) no-repeat center;}
div.movie  ul.youtube li a.thumb24 {background:url(../images/movie24.png) no-repeat center;}
div.movie  ul.youtube li a.thumb25 {background:url(../images/movie25.png) no-repeat center;}
div.movie  ul.youtube li a.thumb26 {background:url(../images/movie26.png) no-repeat center;}
div.movie  ul.youtube li a.thumb27 {background:url(../images/movie27.png) no-repeat center;}
div.movie  ul.youtube li a.thumb28 {background:url(../images/movie28.png) no-repeat center;}
div.movie  ul.youtube li a.thumb29 {background:url(../images/movie29.png) no-repeat center;}
div.movie  ul.youtube li a.thumb30 {background:url(../images/movie30.png) no-repeat center;}
div.movie  ul.youtube li a.thumb31 {background:url(../images/movie31.png) no-repeat center;}
div.movie  ul.youtube li a.thumb32 {background:url(../images/movie32.png) no-repeat center;}
div.movie  ul.youtube li a.thumb33 {background:url(../images/movie33.png) no-repeat center;}
div.movie  ul.youtube li a.thumb34 {background:url(../images/movie34.png) no-repeat center;}

div.movie  ul.youtube li a.thumb35 {background:url(../images/movie35.png) no-repeat center;}
div.movie  ul.youtube li a.thumb36 {background:url(../images/movie36.png) no-repeat center;}
div.movie  ul.youtube li a.thumb37 {background:url(../images/movie37.png) no-repeat center;}
div.movie  ul.youtube li a.thumb38 {background:url(../images/movie38.png) no-repeat center;}
div.movie  ul.youtube li a.thumb39 {background:url(../images/movie39.png) no-repeat center;}





div.movie  ul.youtube li:hover a.thumb {border:2px solid #3fbfb8; cursor:pointer}
div.movie ul.youtube li a.thumb span {display:block; margin: 53px auto 0; width:39px; height:39px; background:url(../images/btn_play.png) no-repeat center;}
div.movie ul.youtube  li:hover a.thumb span {background:url(../images/btn_play00.png) no-repeat center;}
div.movie ul.youtube li p {margin-top: 5px; font-size:14px; }
div.movie ul.youtube li:hover p {font-weight:bold; text-decoration:underline; cursor:pointer}

/*guide 동영상 시작*/
div.popBody {display: none; position: fixed;left: 0; top: 0; width: 640px; z-index: 9999; background: #333; border: 2px solid #3FBFB8; box-shadow: 0 0 5px rgba(19, 19, 19, 0.8); }
div.popBody div.popCont {width: 100%; height: 360px; background: #f5f5f5; color: #555; text-align: center;}

ul.youtube li a.thumb span {display: block; margin: 53px auto 0; width: 39px; height: 39px; background: url(../images/btn_play.png) no-repeat center;}
a {text-decoration: none;color: #424140;}

.popBody a.youtube_close {position:absolute; top:-28px; right: -2px; cursor:pointer; color:#fff; line-height:100%; padding:2px 5px 4px;font-size:14px; font-weight:bold}
.popBody a.youtube_close:hover{color:#4cfff6; font-weight:bold}
div#blackscreen {display:none; position:absolute; left:0; top:0; background:black; opacity:0.6; filter:alpha(opacity=50); z-index:9000;}