/* container */
@media(max-width:1279px){
.container-body{margin-left:0 !important}
}
@media(min-width:1280px){
.container-body{margin-left:215px}
}

.header-wrap{position:fixed; top:0; left:0; width:100%; z-index:26;
  -webkit-transition:top 0.9s ease-in-out;
  -moz-transition:top 0.9s ease-in-out;
  -o-transition:top 0.9s ease-in-out;
  transition:top 0.9s ease-in-out}
.nav-up{top:-180px}/*배너가 생기더라도 위로 올라가서 안 보일만큼(배너와 탑을 합친 값)*/

.container-body{margin-top:50px}

@media(min-width:1280px){
.container-body{margin-top:72px}
}


/* Header */
.header .search-m,
.header .user-info,
.header .btn-lang,
.header .login{display:none}
.header{display:flex; align-items:center; justify-content:space-between; /*position:relative; top:0; left:0; width:100%; */ height:50px; padding:0 15px; z-index:30; transition:top 0.2s ease-in-out; background-color:rgba(255,255,255,0.9)}

.header .btn-nav{width:18px; height:18px; display:inline-block; cursor:pointer; vertical-align:middle}
.header .btn-nav .line {position:relative; width:18px; height:2px; top:6px; margin-top:2px; margin-bottom:3px; background:#464646}
.header .btn-nav .line::before{content:''; display:inline-block; width:18px; height:2px; margin-top:2px; margin-bottom:3px; background:#464646; position:absolute; top:-8px}
.header .btn-nav .line::after{content:''; display:inline-block; width:18px; height:2px; margin-top:2px; margin-bottom:3px; background:#464646; position:absolute; top:4px}
.header .hd-left{display:flex; align-items:center; width:100%; /*float:left; width:calc(100% - 60px)*/}
.header .hd-left .btn-nav{display:none}
.header .hd-m-right .btn-nav{margin-left:10px}

/*logo
.logo-watv{background-color:#4E70F6}
@media(min-width:884px){
	.site-logo{margin-left:16px}
	.logo-watv{background:#fff url(../images/logo-watv@2x.png); background-repeat:no-repeat; width:41px; height:11px; background-size:41px}
	.logo-site{margin-left:5px}
}*/

@media(min-width:884px){
	.header .mobile-logo{display:none}
}

@media(max-width:883px){
	.header .watv-site-link{display:none}
}

.logo-bg{display:flex; align-items:center; position:relative}
.watv-site-link{margin-right:5px; background:url('../images/logo-watv.png')no-repeat left center; background-size:100%; width:41px; height:16px; display:inline-block; font-size:0}
.header .logo{width:103px; display:inline-block}
.logo{width:103px; height:16px; display:inline-block; background:url(../images/logo.png)no-repeat center; background-size:100%; font-size:0}
/*.header .logo::before{content:''; width:157px; height:16px; display:inline-block; background:url('../images/logo.png')no-repeat right; background-size:103px}*/
.header .logo h2{margin-top:-5px; font-size:8px; font-weight:500; color:#999; line-height:1}

.btn-lang{font-size:13px; color:#636363; cursor:pointer}
/* .btn-lang::after{content:''; display:inline-block; width:8px; height:5px; margin:-2px 0 0 8px; vertical-align: middle; background:url('../images/ico_arrow_drop.png') right center no-repeat; background-size:100%} */

.header .user{display:inline-block; position:relative}
.header .user .user-box{display:none; position:absolute; top:30px; right:0; z-index:4; min-width:150px; background-color:#fff; box-shadow:1px 3px 8px 0 rgba(0,0,0,0.12); border-radius:1px; -webkit-transform:translate3d(0px,0px,0px)}
.header .user .user-box a{display:block; display:flex; justify-content:space-between; padding:3px 20px; font-size:13px; font-weight:400; color:#555}
.header .user .user-box .my{padding:14px 0 10px 0; border-bottom:1px solid #EFEFEF}
.header .user .user-box .my em{margin-left:5px; font-size:12px; font-weight:bold; color:#2EBC76}
.header .user .user-box .info{padding:10px 0 14px 0}
.header .user .user-box .info a{color:#9A9A9A}

.hd-m-right{display:flex; align-items:center}
.search-btn{/*float:right; height:100%; padding-right:0*/}
.search-btn::after{content:''; width:17px; height:17px; display:inline-block; vertical-align:middle; background:url('../images/ico_search.png')no-repeat; background-size:100%}

.shadow{-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)}

/*======= retina =======*/
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .logo{background:url('../images/logo@2x.png') no-repeat center; background-size:100%}
  .watv-site-link{background:url('../images/logo-watv@2x.png')no-repeat left center; background-size:100% }
  .search-btn::after{background:url('../images/ico_search@2x.png') no-repeat; background-size:100%}
}

@media(min-width:884px){
  .header{overflow:hidden}
  /*.header .hd-left{position:absolute; top:50%; left:30px; margin-top:-24px}*/

  .header .search-btn,
  .header .search-m{display:none !important}
  .header .hd-left .search-open{display:inline-block; max-width:340px; position:relative; top:0; left:30px; padding:0; background:none}
  .header .search-open .input{margin:9px 0}
  .header .hd-left .btn-nav{display:inline-block}
  .header .hd-m-right .btn-nav{display:none}
  .logo-bg{margin-left:16px}
}
@media(min-width:1280px){
  .header{height:72px; overflow:visible; padding:0 30px}
  /*.header .hd-left{width:calc(100% - 160px)}*/

  .header .btn-lang{display:inline-block}
  .header .hd-right{display:flex; white-space:nowrap; align-items:center}
  .header .user-info{display:inline-block}
  .header .user-info::after{content:''; display:inline-block; width:18px; height:18px; margin:0 5px 4px 5px; vertical-align:middle; background:url('../images/ico_user.png') center no-repeat; background-size:100%}
  .header .user-info, .user .login{display:inline-block; cursor:pointer; padding:0 3px 0 10px; font-size:13px; font-weight:500; color:#444}
  .user .login{color:#4E70F6}

}

/* 검색버튼 클릭 시  */
input{-webkit-appearance:none; -moz-appearance:none; appearance:none}
.search-open{position:absolute; top:0; left:0; display:inline-block; display:none; width:100%; height:50px; padding:0 15px; z-index:9; background-color:#fff; -webkit-transform:translate3d(0px,0px,0px)}
.search-open .input{position:relative; margin:10px 30px 10px 0}
.search-open .input input{width:100%; padding:5px 40px 5px 10px; margin:0; border:1px solid #EBEDF0; font-size:13px; font-weight:400; color:#797D85; background:#F6F6F8; border-radius:2px}
.search-open .input .btn{width:15px; height:100%; display:inline-block; position:absolute; top:0; right:12px; margin:0; padding:10px; border:0; background:url('../images/ico_search.png')no-repeat center; background-size:17px}
.search-open .cancel{display:inline-block; width:15px; height:20px; position:absolute; top:12px; right:20px; cursor:pointer}
.search-open .cancel::after{content:''; display:inline-block; width:15px; height:15px; margin-top:5px; background:url('../images/ico_cancel.png')no-repeat;  background-size:100%}

.search-open .input input::-webkit-input-placeholder { /* WebKit browsers */ color:#797D85}
.search-open .input input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#797D85; opacity:1}
.search-open .input input::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#797D85; opacity:1}
.search-open .input input:-ms-input-placeholder { /* Internet Explorer 10+ */ color:#797D85}

/*======= retina =======*/
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .search-open .input .btn{background:url('../images/ico_search@2x.png') no-repeat center; background-size:17px}
  .search-open .cancel::after{background:url('../images/ico_cancel@2x.png') no-repeat; background-size:100%}
}


/* Nav */
html.open,
html.open body{height:100%; overflow:hidden}
.nav{display:none; width:100%; height:100%; position:fixed; top:0px; left:0; z-index:100; overflow:scroll; background-color:white; overflow-x:hidden; text-align:left; -webkit-overflow-scrolling:touch; -webkit-transform:translate3d(0px,0px,0px); -ms-overflow-style:none; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav .btn-nav {position:absolute; top:15px; right:20px; display:inline-block; width:15px; height:15px; background:url('../images/ico_cancel.png')no-repeat; background-size:15px; padding-right:10px; cursor:pointer}

/*.nav .nav-row.user{display:flex; align-items:center; justify-content:space-between}*/

/* Nav click */
.nav .nav-row{position:relative; padding:15px 20px 15px 20px}
.nav .nav-row:last-child{padding-bottom:60px}
.nav .user-info{display:inline-block; vertical-align:1px; /*padding-left:30px*/ width:calc(100% - 35px)}
.nav .user-info .login .name, .user-info .login strong{font-size:16px; color:#444}
.nav .user-info a{font-size:14px; color:#AFAFAF; padding-right:12px}
.nav .user-info .logout{display:inline-block}
.nav .user-info .logout a{display:inline-block; font-size:14px; font-weight:600; color:#fff; background-color:#526eff; padding:6px 10px; border-radius:3px; margin-top:-2px}
.nav .user-info .logout a::before{content:'';width: 22px;height: 22px;vertical-align:middle;background:url(../images/ico_user2@2x.png)no-repeat; background-size:100%; display:inline-block; margin-right: 6px; position:relative; top:-1px}
.nav .depth2 a{display:block; padding:4px 0; font-size:15px; color:#666; font-weight:400}
.nav .depth2 a *{color:#666}
.nav .depth1 > li a, .nav h3{display:block; padding:4px 0; font-size:16px; font-weight:500; color:#333}
.nav h3{padding:8px 0}
.nav ul > li .on,
.nav ul > li .on *{color:#4E70F6}
.nav ul > li .blink::after{content:''; display:inline-block; width:13px; height:13px; margin:0 5px; background:url('../images/ico_ch_link.png')no-repeat;  background-size:100%}
.nav .my h3{padding-bottom:5px; font-size:14px; font-weight:400; color:#AFAFAF}
.nav .my li a{display:flex; justify-content:space-between; padding:4px 0; font-weight:400; color:#333}
.nav .my em{margin-left:10px; font-size:14px; color:#C4C4C4}

.new-nav{width:6px; height:7px; display:inline-block; margin:0 3px; vertical-align:4px; background:url('../images/ico_new2.png')no-repeat; background-size:100%}

@media(min-width:1280px){
  .nav .nav-row{padding:15px 30px 15px 30px}
}

/*======= retina =======*/
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .nav .btn-nav{background:url('../images/ico_cancel@2x.png'); background-size:15px}
  .nav ul > li .blink::after{background:url('../images/ico_ch_link@2x.png')no-repeat; background-size:100%}
  .new-nav{background:url('../images/ico_new2@2x.png')no-repeat; background-size:100%}
  .nav .user-info .logout a::before {background:url(../images/ico_user2@2x.png)no-repeat; background-size:100%}
}


/*nav lang*/
.nav .btn-lang{display:block; font-size:15px; color:#777; cursor:pointer}
.btn-lang::after{content:''; display:inline-block; width:8px; height:5px; margin:-2px 8px 0 8px; vertical-align: middle; background:url('../images/ico_arrow_drop.png') right center no-repeat; background-size:100%}


@media(min-width:884px){
  .nav {width:280px}
  .page-cover.open{display:block; -webkit-transform:translate3d(0px,0px,0px)}
  .page-cover{width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:30; display:none; background-color:rgba(0, 0, 0, 0.4)}
}

@media(min-width:1280px){
  html.open,
  html.open body{height:auto; overflow:visible}
  .nav{display:inline-block; width:215px; z-index:25; padding:72px 0}
  .nav .user, .nav .btn-lang{display:none}
  .nav .depth1 > li a, .nav h3{padding:6px 0}
  .nav .depth2 a{font-size:14px; padding:3px 0}
  .nav .my{border-bottom:0}
  .nav .my h3,
  .nav .my em{font-size:13px}
  .page-cover, .page-cover.open{display:none}
}

/*======= retina =======*/
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  /* .nav .btn-lang::after{background:url('../images/ico_arrow_category@2x.png') no-repeat; background-size:60%} */
  .header .user-info::after{background:url('../images/ico_user@2x.png') center no-repeat; background-size:100%}
}


/*======= retina =======*/
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  input[type=checkbox]:checked + label:before{background:url('../images/ico_lang_check@2x.png')no-repeat center; background-size:10px; background-color:#3B62FF}
}


/* 언어 설정 배너 */
.lang-popup{/* position:fixed; top:0; left:0;*/ display:flex; width:100%; height:130px; z-index:10; background-color:#333}
.lang-popup .bg{width:100%; display:-webkit-inline-box; display:-webkit-inline-flex; display:-ms-inline-flexbox; display:inline-flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; list-style:none; margin:0 auto; max-width:959px; padding:10px 17px; flex-direction:column}
.lang-popup p{-webkit-box-flex:2; -webkit-flex:2; -ms-flex:2; flex:2; font-size:14px; color:#fff; padding-right:30px}
.lang-popup .succession{display:-webkit-inline-box; display:-webkit-inline-flex; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-flex:2; -webkit-flex:2; -ms-flex:2; flex:2; -webkit-align-items:center; -ms-flex-align:center; align-items:center}
.lang-popup .succession,
.lang-popup p{width:100%}

/* 드롭다운 */
.custom-select{position:relative; min-width:165px; height:36px; width:calc(100% - 22%)}
.custom-select select{display:none /*hide original SELECT element:*/}
.select-selected{padding:6px 40px 6px 20px; border:1px solid rgba(255, 255, 255, 0.1); border-radius:2px; background-color:#444}
.select-selected:after{position:absolute; content:""; top:12px; right:20px; width:14px; height:10px; background:url('../images/ico_arrow_drop2.png')no-repeat; background-size:100%}
.select-selected.select-arrow-active{border-radius:2px 2px 0 0}
.select-selected.select-arrow-active:after{transform: rotate(180deg)}

.select-items div,
.select-selected{height:36px; color:#fff; cursor:pointer;  white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.select-items div{padding:6px 20px; border-bottom:1px solid rgba(255, 255, 255, 0.1)}

.select-hide{display:none}
.select-items{position:absolute; background-color:#444; top:100%; left:0; right:0; z-index:99; border-radius:0 0 2px 2px}
.select-items div:hover{background-color: rgba(0, 0, 0, 0.1)}

.lang-popup a{min-width:65px; margin-left:20px; color:#fff; border-radius:2px; padding:6px 10px; background-color:#4E70F6; font-size:15px; text-align:center}

.lang-popup .close{position:absolute; top:15px; right:20px}
.lang-popup .close{width:16px; height:16px; margin:auto; margin-left:15px; cursor:pointer; background:url('../images/ico_cancel2.png') no-repeat; background-size:16px; opacity:0.6}

@media(min-width:768px){
  .lang-popup{height:60px}
  .lang-popup .bg{flex-direction:row}
  .lang-popup .succession,
  .lang-popup p{width:initial}
  .lang-popup p{margin-top:0}
  .lang-popup .custom-select{min-width:178px}
  .lang-popup .close{position:inherit}
}

/*======= retina =======*/
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
.select-selected:after{background:url('../images/ico_arrow_drop2@2x.png')no-repeat; background-size:100%}
.lang-popup .close{background:url('../images/ico_cancel2@2x.png') no-repeat; background-size:16px}
}

/* 다음번에도 선택한 언어를 유지할건지 묻는 팝업입니다 */
.keep-layer{min-height:170px; padding:25px; text-align:center; background:#fff; border-radius:5px; box-shadow:0 5px 14px 0 rgba(0,0,0,0.44); -webkit-overflow-scrolling:touch}
.keep-layer p{margin-top:10px; font-size:14px; color:#5C5C5C}
.keep-layer .btn-group{margin-top:37px}
.keep-layer .btn{min-width:80px; font-size:16px; font-weight:400; display:inline-block; padding:9px 24px; border:0; color: #fff; margin:0 2px; background-color:#3958F6; border-radius:2px}
.keep-layer .btn.no{background-color:#8C8C8C}

@media(min-width:768px){
  .keep-layer{width:380px; padding:35px}
}


/*======= text select =======*/