html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; }
ul , li ,ol{ list-style: none; }
nav,footer,header,article{display:block;}
i,em{font-style:normal;}
table { border-spacing: 0px; }
body { font-size: 14px; font-family: 'Noto Sans KR', sans-serif; color: #555; line-height: 1.1;  min-width: 1180px; font-weight: 400; }
input, select, textarea, button { font-size: 14px; outline: none; margin: 0; }
a { text-decoration: none; outline: none; display: inline-block;}
img {width:100%; border:none;}
button { outline: none; background: none; cursor: pointer; border: 0; }
span { display: inline-block; }
*{letter-spacing:-0.25px; box-sizing:border-box; font-family: 'Noto Sans KR', sans-serif;}
blockquote, q {quotes: none;}
.screenout { position: absolute; top: -9999em; left: -9999em; width: 1px; height: 1px; overflow: hidden; text-indent: -9999em; }
body *{color:#fff;}
*{box-sizing:border-box;}
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@font-face {
    font-family: 'HeirofLightBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/HeirofLightBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@keyframes updown {
    0%{top:-200px;}
    100%{top:0;}
}
@keyframes downup {
    0%{transform:translateY(100px); opacity:0;}
    100%{transform:translateY(0); opacity:1;}
}

@keyframes leftright {
    0%{transform:translateX(100px); opacity:0;}
    100%{transform:translateX(0); opacity:1;}
}

@keyframes rightleft {
    0%{transform:translateX(-100px); opacity:0;}
    100%{transform:translateX(0); opacity:1;}
}

@keyframes shak {
    0%{transform:rotate(30deg);}
    50%{transform:rotate(-30deg);}
    100%{transform:rotate(0);}
}
@keyframes pin {
    0%{transform:rotateY(360deg);}
    100%{transform:rotateY(0);}
}

/*헤더*/
.header{position:fixed; top:0; width:100%; background:rgba(0,0,0,.8); z-index:10000; animation:updown 1 0.8s both;}
.nav .snb { width: 100%; padding: 20px 0;  transition:all 0.3s;}
.nav .snb .nav_tool .btn{display:inline-block; margin:0 14px; height:60px; transform:rotate(0); transition:margin 0.3s;}
.nav .snb .nav_tool .btn:hover{animation:shak 1  0.3s both;}
.nav .snb .nav_tool .btn.find{display:none; padding:0;}
.nav .snb .nav_tool .btn.find i{height:50px; line-height:50px; vertical-align:-2px;}
.nav .snb .nav_tool .btn i{font-size:24px; height:60px; line-height:60px;}
.nav .snb .nav_tool .btn .alarmred{top:14px; right:-10px;}
.my_info{position:relative; margin:0 0 0 10px; padding:10px 20px; width:200px; height:60px; background:#051217; border-radius:10px; cursor:pointer; border:1px solid transparent; transition:border 0.3s;}
.my_info:hover{border-color:white;}
.profile_box{float:left; width:40px; height:40px; border-radius:100%; border:1px solid #fff; overflow:hidden;}
.profile_box .profile_img{width:100%; height:100%; background:url(/img/webtoon/1.png) no-repeat center; border-radius:100%; background-size:cover;}
.my_info .infotxt{float:left;width:calc(100% - 40px); padding:0 0 0 20px; line-height:20px;}
.my_info .infotxt *{font-size:12px;}
.my_info .infotxt .member{display:block; color:#ddd;}
.my_info .material-icons-outlined{ right:30px;}
.gnb{padding:0 0 20px;}
.gnb .bmenu{position:relative; font-size:18px; margin:0 26px; line-height:1; padding:10px 0;}
.gnb .bmenu:after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:0; height:2px; background:#e8360d; transition:all 0.3s;}
.gnb .bmenu:first-child{margin-left:0;}
.gnb .bmenu.on , .gnb .bmenu:hover{color:#e8360d; font-weight:bold;}
.gnb .bmenu.on:after{width:100%;}

.headcon.fix{position:fixed; width:100%; z-index:100; background:#000;}
.headcon.fix .logobox{margin:18px 0;}
.headcon.fix .nav .snb {padding: 10px 0;}
.headcon.fix .nav .snb .nav_tool .btn{margin:0 10px;}
.headcon.fix .nav .snb .nav_tool .btn.find{display:inline-block;}

/*메인영상*/
.videobox {position:relative;}
.videobox .overhid{position:relative; overflow:hidden; height:750px; transition:height 0.3s;}
.videobox .overhid video{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%;}
.videobox .cover{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; background:rgba(0,0,0,0.7);}
.videobox .maintxtbox{left:50%; transform:translateX(-50%); height:100%;}
.videobox .textbox{position:absolute; left:0; top:50%; transform:translateY(-50%);}
.videobox .textbox .title{font-size:80px; font-family: 'HeirofLightBold';}
.videobox .textbox span{padding:20px 0 0 10px; color:#999; font-size:16px;}
.videobox .textbox .webtontxt{padding:40px 0 0 10px; line-height:1.5; font-size:16px;}


/*메인검색*/
.findbox{position:absolute; top:-45px; left:50%; transform:translateX(-50%); width:800px; margin:0 auto; background:#fff; border-radius:50em; z-index:5; }
.findbox .selecbox ,.findbox .inputbox {float:left;}
.findbox * , .findbox .selecbox i{color:#222;}
.findbox .round{padding:20px 0; width:100%; border-radius:50em; background-color:transparent;}
.findbox .round.on{ background-color:#eeeeee;}
.findbox .selecbox:hover .material-icons-outlined{transform:rotate(360deg) scale(1.2); color:#e8360d; transition:transform 0.2s;}
.findbox .selecbox{position:relative; display:inline-block;  width:28%;}
.findbox .selecbox ul{ text-align:center; padding:0 10px;}
.findbox .selecbox ul li{display:inline-block; color:#999; font-size:12px; line-height:24px;}
.findbox .selecbox ul li + li:before{content:" , ";}
.findbox .inputbox{position:relative; width:44%; display:inline-block; vertical-align:middle; z-index:2; padding:20px;}
.findbox .inputbox input{border:none; line-height:48px; width:calc(100% - 60px); padding:0 0 0 10px; margin:0 20px 0 0; font-size:14px; color:#222;}
.findbox .inputbox input:hover{background:#f5f5f5;}
.findbox .find{position:absolute; right:30px; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:100%; text-align:center;}
.findbox .find:hover{background-color:#cc3a19;}
.findbox .find .material-icons-outlined{line-height:40px;}
.findbox .btn24{width:100%; vertical-align:middle; font-weight:bold; font-size:14px;}
/*.findbox .selecbox:before{content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:50%; background:#ccc}*/
.findbox .menubox_pp {position:absolute; left:0; bottom:-290px; width:500px; background:#fff; border-radius:20px; padding:30px; transform:scale(0); transition:all 0.3s; transform-origin:left top;}
.findbox .menubox_pp.show {transform:scale(1);}
.findbox .menubox_pp.ppbox02{left:200px; bottom:-170px;}
.findbox .menubox_pp:before{content:""; position:absolute; left:15px; top:-12px;  width: 0px; height: 0px; border-top: 10px solid transparent; border-right: 30px solid #fff; border-bottom: 20px solid transparent; transform:rotate(88deg);}
.findbox .menubox_pp .title em{color:#999; font-size:14px; margin:0 0 0 8px;}
.findbox .menubox_pp ul {margin:30px 0 0; overflow:hidden;}
.findbox .menubox_pp ul li{display:inline-block; color:#222; font-size:14px; padding:0 20px; line-height:2; border:1px solid #ddd; border-radius:50em; margin:0 10px 10px 0; transition:all 0.3s; cursor:pointer;}
.findbox .menubox_pp ul li.on{background-color:#e8360d; color:#fff;}
.findbox .menubox_pp ul li.on:hover{background-color:#b72706; color:#fff; border-color:#e8360d}
.findbox .menubox_pp ul li:hover{border-color:#e8360d; color:#e8360d;}
/*today market*/
.lrcontent .box{min-height:500px;}
.lrcontent .leftbox{width:35%; padding:0 40px 0 0;}
.lrcontent .leftbox .bg_thumb.big{padding:0; height:500px;}
.lrcontent .leftbox .wrdus50 {padding:0 13px 0 4px; width:240px; margin:0 0 20px auto; }
.lrcontent .leftbox .wrdus50 span{float:left; width:50%; line-height:42px; text-align:center;}
.lrcontent .leftbox .wrdus50 i{margin:0 6px 0 0; font-weight:600; font-size:16px;}
.lrcontent .leftbox .wrdus50 em{ font-weight:bold; font-size:14px; vertical-align:2px;}
.lrcontent .leftbox .wrdus50 .beforelinel:before{left:-4px; top:52%; height:30%;}
.lrcontent .leftbox .btnwrap {margin:20px 0 0;}
.lrcontent .leftbox .btnwrap .btn{display:block; height:50px; line-height:48px; text-align:center; border:1px solid #fff; border-radius:3px; font-weight:bold; transition:all 0.3s; font-size:18px;}
.lrcontent .leftbox .btnwrap .btn.bg_red{border-color:#e8360d;}
.lrcontent .leftbox .btnwrap .btn:hover{background:#fff; color:#222;}
.lrcontent .leftbox .btnwrap .btn.bg_red:hover{background:#cc3a19; color:#fff; border-color:#cc3a19}
.lrcontent .rightbox{position:relative; width:65%;}
.lrcontent .rightbox .webview{padding:40px 0 0;}
.lrcontent .rightbox .webview .bg_thumb{padding:0; height:278px;}
.lrcontent .rightbox .subinfo{border-bottom:1px solid #4a4a4a; padding:0 0 20px;}
.likebox {text-align:center;}
.likebox .wrdus50{height:42px; min-width:42px;}
.likebox .wrdus50 .colorred{font-size:14px; vertical-align:middle; margin:0 4px 0 -4px;}
.likebox .wrdus50 b{font-size:14px; vertical-align:middle; line-height:40px;}
.likebox .review.wrdus50 {padding:0 20px; margin: 0 0 0 4px;}
.market .webview { height:357px; overflow:hidden; white-space:nowrap;}

.webinfobox .webtitle{font-size:20px; line-height:1; padding: 0 0 20px;}
.subinfo{color:#999; overflow:hidden;  width:100%;}
.subinfo .info{float:left; color:#999; margin:0 10px;}
.subinfo .info:before{left:-10px; background:#555;}
.subinfo .info:first-child{margin-left:0;}
.webinfobox .txttit .swebtit{font-size:16px; padding: 20px 0 10px; }
.webinfobox .txttit .desc{font-size:14px; color:#999; padding:0 0 10px; line-height:1.4;}

.webview li{float:left; width:calc(25% - 15px); margin:0 20px 0 0; cursor:pointer; transition: all 0.3s;}
.webview li:hover{transform:translateY(-10px);}
.webview li .bg_thumb{}
.webview li:last-child{margin:0;}
.webview li:nth-child(1) .thumb{ background:url(/img//webtoon/market2.png) no-repeat center; background-size:100% auto;}
.webview li:nth-child(2) .thumb{ background:url(/img//webtoon/market3.png) no-repeat center; background-size:100% auto;}
.webview li:nth-child(3) .thumb{ background:url(/img//webtoon/market4.png) no-repeat center; background-size:100% auto;}
.webview li:nth-child(4) .thumb{ background:url(/img//webtoon/market5.png) no-repeat center; background-size:100% auto;}
.webview li .stepname{padding:20px 0 0; color:#999; font-size:18px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}

/*popular arts*/
.webcard ul li {float:left; height:400px; width:20%;}
.webcard ul li .bg_thumb{border-radius:8px 8px 0 0;}
.webcard ul li .bg_thumb .thumb{background-size:cover; border-radius:8px 8px 0 0;}
.webcard ul li .inner{position:relative; top:-10px; background-color:#fff; padding:20px 15px; border-radius:0 0 8px 8px;}
.webcard ul li .inner .profile_box{position:absolute; left:15px; top:-25px; width:35px; height:35px; border:2px solid #fff;}
.webcard ul li .inner .likebox{top:-40px; right:10px}
.webcard ul li .inner .likebox span{min-width:30px; height:30px; box-shadow:0 1px 10px rgba(0,0,0,0.6);}
.webcard ul li .inner .likebox span .colorred{font-size:12px;}
.webcard ul li .inner .likebox .like .colorred{margin:0 2px 0 -2px}
.webcard ul li .inner .likebox .review{padding:0 15px;}
.webcard ul li .inner .likebox .review .colorred{margin:0 4px 0 -4px}
.webcard ul li .inner .likebox span b{line-height:30px; font-size:12px;}
.webcard ul li .inner .beforelinel:before{background:#ddd;}
.webcard ul li .inner .swebtit{color:#222; padding:8px 0; height:50px; font-weight:bold; font-size:16px; line-height:1.2;}
.webcard ul li .inner p.wrdus50 {border-radius:0;}
.wcardinfo h4{color:#99999a;}
.wcardinfo .writernm{display:block; width:100%; color:#99999a; padding:0 0 10px; letter-spacing:-1px;}
.wcardinfo .info{display:inline-block; font-size:12px; padding:2px 6px; background:#ededed;}
.webcard ul li .inner .wrdus50 span{position:relative; display:block; float:left; line-height:20px; width:47%; font-size:18px;}
.webcard ul li .inner .wrdus50 .oper{width:53%;}
.webcard ul li .inner .wrdus50 span em{ color:#999; font-size:12px; }
.webcard ul li .inner .wrdus50 span:nth-child(2):before{content:""; position:absolute; left:-8%; top:58%; transform:translateY(-50%); width:1px; height:50%; background:#ddd;}
.webcard ul li .inner .wrdus50 span .material{color:#222; line-height:20px; vertical-align:middle; margin:0 4px 0 0; font-size:16px;}
.webcard ul li:nth-child(1) .bg_thumb .thumb{background-image:url(/img/webtoon/1.png);}
.webcard ul li:nth-child(2) .bg_thumb .thumb{background-image:url(/img/webtoon/2.png);}
.webcard ul li:nth-child(3) .bg_thumb .thumb{background-image:url(/img/webtoon/3.png);}
.webcard ul li:nth-child(4) .bg_thumb .thumb{background-image:url(/img/webtoon/4.png);}
.webcard ul li:nth-child(5) .bg_thumb .thumb{background-image:url(/img/webtoon/5.png);}
.webcard ul li:nth-child(6) .bg_thumb .thumb{background-image:url(/img/webtoon/5.png);}
.webcard ul li:nth-child(7) .bg_thumb .thumb{background-image:url(/img/webtoon/4.png);}
.webcard ul li:nth-child(8) .bg_thumb .thumb{background-image:url(/img/webtoon/3.png);}
.webcard ul li:nth-child(9) .bg_thumb .thumb{background-image:url(/img/webtoon/2.png);}
.webcard ul li:nth-child(10) .bg_thumb .thumb{background-image:url(/img/webtoon/1.png);}
.webcard ul li:nth-child(11) .bg_thumb .thumb{background-image:url(/img/webtoon/1.png);}
.webcard ul li:nth-child(12) .bg_thumb .thumb{background-image:url(/img/webtoon/2.png);}
.webcard ul li:nth-child(13) .bg_thumb .thumb{background-image:url(/img/webtoon/3.png);}
.webcard ul li:nth-child(14) .bg_thumb .thumb{background-image:url(/img/webtoon/4.png);}
.webcard ul li:nth-child(15) .bg_thumb .thumb{background-image:url(/img/webtoon/5.png);}
         ul li
.webcard ul li:nth-child(1) .inner .profile_box .profile_img{background-image:url(/img/webtoon/5.png);}
.webcard ul li:nth-child(2) .inner .profile_box .profile_img{background-image:url(/img/webtoon/6.png);}
.webcard ul li:nth-child(3) .inner .profile_box .profile_img{background-image:url(/img/webtoon/7.png);}
.webcard ul li:nth-child(4) .inner .profile_box .profile_img{background-image:url(/img/webtoon/8.png);}
.webcard ul li:nth-child(5) .inner .profile_box .profile_img{background-image:url(/img/webtoon/9.png);}
.webcard ul li:nth-child(6) .inner .profile_box .profile_img{background-image:url(/img/webtoon/10.png);}
.webcard ul li:nth-child(7) .inner .profile_box .profile_img{background-image:url(/img/webtoon/11.png);}
.webcard ul li:nth-child(8) .inner .profile_box .profile_img{background-image:url(/img/webtoon/12.png);}
.webcard ul li:nth-child(9) .inner .profile_box .profile_img{background-image:url(/img/webtoon/1.png);}
.webcard ul li:nth-child(10) .inner .profile_box .profile_img{background-image:url(/img/webtoon/4.png);}
.webcard ul li:nth-child(11) .inner .profile_box .profile_img{background-image:url(/img/webtoon/5.png);}
.webcard ul li:nth-child(12) .inner .profile_box .profile_img{background-image:url(/img/webtoon/2.png);}
.webcard ul li:nth-child(13) .inner .profile_box .profile_img{background-image:url(/img/webtoon/8.png);}
.webcard ul li:nth-child(14) .inner .profile_box .profile_img{background-image:url(/img/webtoon/5.png);}
.webcard ul li:nth-child(15) .inner .profile_box .profile_img{background-image:url(/img/webtoon/9.png);}

.artistcard > ul > li:hover{transform:translateY(-10px);}
.artistcard > ul > li {background-color:#383838; height:400px; border-radius:8px; text-align:center; padding:60px 0; transform:translateY(0);  transition:transform 0.3s;}
.artistcard ul li .profile_box{float:none; margin:0 auto; width: 150px; height:150px; }
.artistcard ul li .profile_box .profile_img{}
.artistcard ul li .atsnm{display:block; line-height:1; padding:20px 0 0; font-size:14px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.artistcard ul li .atsnm{display:block; line-height:1; padding:20px 0 0; font-size:14px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.artistcard .wtcount{color:#999;}
.artistcard .wtcount i{color:#999;}
.artistcard ul li .btn{line-height:30px; padding:0 20px; margin:10px 0 0; border-radius:50em; border:1px solid #e8360d; color:#e8360d; font-size:14px;}
.artistcard ul li .btn i{color:#e8360d;}
.artistcard ul li .btn:hover{background:#e8360d; color:#fff;}
.artistcard ul li .btn:hover i{ color:#fff;}
.artistcard ul li:nth-child(1) .profile_box .profile_img{background-image:url(/img/webtoon/6.png);}
.artistcard ul li:nth-child(2) .profile_box .profile_img{background-image:url(/img/webtoon/7.png);}
.artistcard ul li:nth-child(3) .profile_box .profile_img{background-image:url(/img/webtoon/8.png);}
.artistcard ul li:nth-child(4) .profile_box .profile_img{background-image:url(/img/webtoon/9.png);}
.artistcard ul li:nth-child(5) .profile_box .profile_img{background-image:url(/img/webtoon/10.png);}
.artistcard ul li:nth-child(6) .profile_box .profile_img{background-image:url(/img/webtoon/11.png);}
.artistcard ul li:nth-child(7) .profile_box .profile_img{background-image:url(/img/webtoon/12.png);}
.artistcard ul li:nth-child(8) .profile_box .profile_img{background-image:url(/img/webtoon/13.png);}
.artistcard ul li:nth-child(9) .profile_box .profile_img{background-image:url(/img/webtoon/14.png);}
.artistcard ul li:nth-child(10) .profile_box .profile_img{background-image:url(/img/webtoon/15.png);}
.artistcard ul li:nth-child(11) .profile_box .profile_img{background-image:url(/img/webtoon/16.png);}
.artistcard ul li:nth-child(12) .profile_box .profile_img{background-image:url(/img/webtoon/17.png);}
.artistcard ul li:nth-child(13) .profile_box .profile_img{background-image:url(/img/webtoon/1.png);}
.artistcard ul li:nth-child(14) .profile_box .profile_img{background-image:url(/img/webtoon/2.png);}
.artistcard ul li:nth-child(15) .profile_box .profile_img{background-image:url(/img/webtoon/3.png);}

/* soldout */
.miniwebcard{ padding:20px;}
.miniwebcard li{float:left; width:calc(16.6666% - 17px); margin:0 20px 50px 0; transition:transform 0.3s;}
.miniwebcard li:hover{transform:scale(1.1);}
.miniwebcard li:nth-child(6n){margin:0;}
.miniwebcard li .bg_thumb{height:auto; padding:100% 0 0;}
.miniwebcard li .inner .swebtit{font-size:14px; margin:10px 0; font-weight:normal; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.miniwebcard li .inner .desc{font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:#999;}
.miniwebcard li:nth-child(1) .thumb{background-image:url(/img/webtoon/6.png);}
.miniwebcard li:nth-child(2) .thumb{background-image:url(/img/webtoon/7.png);}
.miniwebcard li:nth-child(3) .thumb{background-image:url(/img/webtoon/8.png);}
.miniwebcard li:nth-child(4) .thumb{background-image:url(/img/webtoon/9.png);}
.miniwebcard li:nth-child(5) .thumb{background-image:url(/img/webtoon/10.png);}
.miniwebcard li:nth-child(6) .thumb{background-image:url(/img/webtoon/11.png);}
.miniwebcard li:nth-child(7) .thumb{background-image:url(/img/webtoon/12.png);}
.miniwebcard li:nth-child(8) .thumb{background-image:url(/img/webtoon/13.png);}
.miniwebcard li:nth-child(9) .thumb{background-image:url(/img/webtoon/14.png);}
.miniwebcard li:nth-child(10) .thumb{background-image:url(/img/webtoon/15.png);}
.miniwebcard li:nth-child(11) .thumb{background-image:url(/img/webtoon/16.png);}
.miniwebcard li:nth-child(12) .thumb{background-image:url(/img/webtoon/17.png);}

.footer{padding:80px 0;}
.footer *{color:#adadad;}
.logobox.foot{float:none; width:276px; height:23px; margin:0 0 10px;}
.footer ul{overflow:hidden}
.footer ul li {position:relative; float:left; margin:0 20px 0 0; font-size:12px; line-height:1.5;}
.footer ul li + li:before{content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:1px; height:70%; background-color:#adadad;}
.footer .canaz {margin:20px 0 10px; font-size:16px;}
.footer .snsbox {overflow:hidden; margin:30px 0 0;}
.footer .snsbox a{display:inline-block; width:50px; height:50px; border-radius:100%; background-size:cover; background-repeat:no-repeat; background-position:center; margin:0 5px 0 0;}
.footer .snsbox a:nth-child(1){background-image:url(/img/icon/face.png); }
.footer .snsbox a:nth-child(2){background-image:url(/img/icon/youtube.png);}
.footer .snsbox a:nth-child(3){background-image:url(/img/icon/insta.png);}
.footer .foottxt{padding:35px 0; line-height:1.5; letter-spacing:-0.75px;}
.footer .dark li{color:#999;}
.footer .dark li:before{background:#555;}
.footer .sign{ border-top:1px solid #676767; line-height:1; padding:10px 0 0; text-align:right}

/*슬라이드*/
.swiperwrap{padding:0 0 56px;}
.swiper-container{padding:0 20px !important;}
.swiper-wrapper{padding:20px 0;}
.swiperwrap .swiper-btn{width:50px; height:50px; background:rgba(60,60,60,0.5); border-radius:100%;}
.swiperwrap .swiper-btn.swiper-button-disabled{background:rgba(60,60,60,0.5); opacity:0;}
.swiperwrap .swiper-button-next.swiper-button-disabled:after, .swiper-container-rtl .swiper-button-prev.swiper-button-disabled:after , .swiperwrap .swiper-button-prev.swiper-button-disabled:after, .swiper-container-rtl .swiper-button-next.swiper-button-disabled:after{ color:#fff; font-weight:bold;}
.swiperwrap .swiper-button-prev{left:-10px; padding:0 2px 0 0; opacity:0;}
.swiperwrap .swiper-button-next{right:-10px; padding:0 0 0 3px; opacity:0;}
.swiperwrap .swiper-button-prev.play{animation:rightleft 1 0.8s both;}
.swiperwrap .swiper-button-next.play{animation:leftright 1 0.8s both;}
.swiperwrap .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after,
.swiperwrap .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{color:#fff; font-size:14px; border-radius:100%; font-weight:bold;}
.swiperwrap .swiper-pagination{bottom:0; left:50%; transform:translateX(-50%);}
.swiperwrap .swiper-pagination-bullet { width: 10px; height: 10px; background: #293338; opacity: 1; margin:0 5px; vertical-align:middle;}
.swiperwrap .swiper-pagination-bullet-active {width: 12px; height: 12px; transition: all .5s; background: #8b8b8b;}

/*  변경될수 있는 부분  */
.contentwrap{background:#000;}
.material-icons-outlined{color:#fff;}
.hwbox{max-width:1920px; margin:0 auto; width:1180px;}
.section{ min-width:1220px; margin:0 auto; padding:150px 0;}
.ani{opacity:0;}
.ani.play{animation:downup 1 0.8s both;}
.wbox{position:relative; width:1220px; margin:0 auto;}
.wrap{position:relative;}
.inbox{width:100%; margin:0 auto;}

/*  기본  */
.section .sectitle{ font-size:20px; padding:0 20px 26px; font-family: 'GmarketSansBold';}
.menubox_pp .title{ font-size:20px; color:#222;}
.menubox_pp .title .material-icons-outlined , .menubox_pp .title .material-icons{ color:#222; vertical-align:-4px; margin:0 8px 0 0;}
.close{position:absolute; top:30px; right:30px; padding:0;}
.close i{font-size:24px !important; color:#767676;}
.close.white i{ color:#fff;}
.hottag{position:relative;}
.hottag:before{content:""; position:absolute; left:20px; top:-15px; width:65px; height:78px; background:url(/img/hottag.png) no-repeat left top; background-size:cover;  z-index:2; transition:all 0.3s;}

/*  이미지  */
.bg_thumb{position:relative; width:100%; border:10px; overflow:hidden; height:256px;}
.bg_thumb .thumb{ position:absolute; left:0; top:0; width:100%; height:100%; background:url(/img//webtoon/market1.png) no-repeat center; background-size:cover; overflow:hidden;  border-radius:8px; }
.webnew{position:absolute; left:-10px; top:-10px; width:50px; height:50px; background:#e8360d; border-radius:8px; text-align:center; padding:3px; z-index:2; box-shadow:0 1px 8px #767676}
.webnew b{display:block; font-size:24px;}
.webnew em{font-size:10px;}
.adult{position:absolute; left:-10px; top:-10px; width:50px; height:50px; border-radius:100%; background:#fff; border:4px solid #e8360d; z-index:1; text-align:center;}
.webview ul li.adultwt .adult{left:30px;}
.adult b{position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); color:#222; font-size:22px;}
.taglist{padding:10px 0;}
.taglist li{display:inline-block; padding:2px 6px; background:#6c6767; color:#fff; font-size:12px;}
.taglist li:before{content:"#";}
/*여기까지*/

/*  FLOAT  */
.floatwrap:after{content:""; display:block; clear:both;}
.fright{float:right;}
.fleft{float:left;}
.rightbox{float:right;}
.leftbox{float:left;}

/*  FONT OVERFLOW  */
.txtoverhid{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.txtoverhid2 {white-space: normal; text-align: left; word-wrap:break-word; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; text-overflow:ellipsis;}

.dsptable{display:table; table-layout:fixed; width:100%;}
.dsptable li{display:table-cell; width:100%;}
.dsptable .table-cell{display:table-cell;}

/*  LOGO  */
.logobox{width:230px; height:19px; margin:20px 0; background:url(/img/logo/webLogo_white_ver3.png); background-size:cover; cursor:pointer; transition:all 0.3s;}

/*  BUTTON BASIC   */
.btn48{display:inline-block; height:48px; line-height:46px; font-size:14px; border-radius:3px; box-sizing:border-box; transition:all 0.3s; text-align:center;}
.btn42{display:inline-block; height:42px; line-height:40px; font-size:14px; border-radius:3px; box-sizing:border-box; transition:all 0.3s; text-align:center;}
.btn32{display:inline-block; height:32px; line-height:30px; font-size:12px; border-radius:3px; box-sizing:border-box; transition:all 0.3s; text-align:center;}
.btn24{display:inline-block; height:24px; line-height:22px; font-size:12px; border-radius:3px; box-sizing:border-box; transition:all 0.3s; text-align:center;}

  /*   아이콘이 뒷쪽에 있는 버튼   */
.icon48a .material-icons{display:inline-block; font-size:20px; vertical-align:-4px; margin:0 0 0 2px;}
.icon42a .material-icons{display:inline-block; font-size:18px; vertical-align:-4px; margin:0 0 0 2px;}
.icon32a .material-icons{display:inline-block; font-size:16px; vertical-align:-3px; margin:0 0 0 2px;}
.icon24a .material-icons{display:inline-block; font-size:12px; vertical-align:-1px; margin:0 0 0 2px;}
.icon48a .material-icons-outlined{display:inline-block; font-size:20px; vertical-align:-4px; margin:0 0 0 2px;}
.icon42a .material-icons-outlined{display:inline-block; font-size:18px; vertical-align:-4px; margin:0 0 0 2px;}
.icon32a .material-icons-outlined{display:inline-block; font-size:16px; vertical-align:-3px; margin:0 0 0 2px;}
.icon24a .material-icons-outlined{display:inline-block; font-size:12px; vertical-align:-1px; margin:0 0 0 2px;}

  /*   아이콘이 앞쪽에 있는 버튼   */
.icon48b .material-icons{display:inline-block; font-size:20px; vertical-align:-4px; margin:0 8px 0 0;}
.icon42b .material-icons{display:inline-block; font-size:18px; vertical-align:-4px; margin:0 8px 0 0;}
.icon32b .material-icons{display:inline-block; font-size:16px; vertical-align:-3px; margin:0 8px 0 0;}
.icon24b .material-icons{display:inline-block; font-size:14px; vertical-align:-1px; margin:0 8px 0 0;}
.icon48b .material-icons-outlined{display:inline-block; font-size:20px; vertical-align:-4px; margin:0 8px 0 0;}
.icon42b .material-icons-outlined{display:inline-block; font-size:18px; vertical-align:-4px; margin:0 8px 0 0;}
.icon32b .material-icons-outlined{display:inline-block; font-size:16px; vertical-align:-3px; margin:0 8px 0 0;}
.icon24b .material-icons-outlined{display:inline-block; font-size:14px; vertical-align:-1px; margin:0 8px 0 0;}

.btnwrap.btn2{width:100%; overflow:hidden;}
.btnwrap.btn2 .btn{float:left; width:calc(50% - 4px); border-radius:3px;}
.btnwrap.btn2 .btn:last-child{margin:0 0 0 8px;}


/*  POSITION  */
.relative{position:relative;}
.posicenter{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.polefttop{position:absolute; left:0; top:0;}
.porighttop{position:absolute; right:0; top:0;}
.poleftbtm{position:absolute; left:0; bottom:0;}
.porightbtm{position:absolute; right:0; bottom:0;}
.poveticenleft{position:absolute; top:50%; left:0; transform:translateY(-50%);}
.poveticenright{position:absolute; top:50%; right:0; transform:translateY(-50%);}
.pohoricentop{position:absolute; left:50%; top:0; transform:translateX(-50%); vertical-align:0;}
.pohoricenbtm{position:absolute; left:50%; bottom:0; transform:translateX(-50%); vertical-align:0;}

.pofixblank{position:fixed; left:0; right:0; top:0; bottom:0; background-color:rgba(0,0,0,0.5); z-index:20;}
.pofix{position:fixed; left:0; top:0;}

/*  POSITION LINE  */
.beforelinel , .beforeliner ,.afterlinel ,.afterliner{position:relative;}
.beforelinel:before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:70%; background-color:#ddd;}
.beforeliner:before{content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:70%; background-color:#ddd;}
.afterlinel:before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:70%; background-color:#ddd;}
.afterliner:before{content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:70%; background-color:#ddd;}

/*  알람박스  */
.alarmbox{position:relative;}
.alarmbox .alarmred{position:absolute; right:0; top:0; width:6px; height:6px; border-radius:100%; background:#e8360d;}

/*  ROUND BOX  */
.wrdus50{border-radius:50em; background:#fff;}
.wrdus50:after{content:""; display:block; clear:both;}
.wrdus50 .colorred{color:#e8360d;}
.wrdus50 .material{color:#8b8b8b;} 
.wrdus50 *{color:#222;}
.wrdus100{border-radius:100%; background:#fff; overflow:hidden;}
.wrdus100 .colorred{color:#e8360d;}
.wrdus100 *{color:#222;}

/*  Font-color  */
.colorred{color:#e8360d;}

/*  Background  */
.bg_red{background-color:#e8360d; color:#fff;}
.bg_darkblue{background-color:#051217;}
.bg_back2{background-color:#101316;}
.bg_gray{background-color:#3a3a3a;}

/*content*/
.bg_white{background:#fff;}
.bg_white .balck{color:#222;}
.bg_white .gray{color:#ddd;}


.wform {position:relative; font-size:12px;}

.brcheck { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.brcheck input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.brcheck .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #f8f8f8; min-width: 10px !important; margin: 0 !important; }
.brcheck:hover input ~ .checkmark { background-color: #ccc; }
.brcheck input:checked ~ .checkmark { background-color: #2196F3; }
.brcheck:after { content: ""; position: absolute; display: none; }
.brcheck input:checked ~ .checkmark:after { display: block; }
.brcheck .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.brradio { display: inline-block; position: relative; padding-left: 32px; margin: 12px 20px 12px 0; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 16px; line-height: 22px; }
.brradio input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.brradio .checkmark { position: absolute; top: 0; left: 0; height: 24px; width: 24px; background-color: #eee; border-radius: 50%; }
.brradio:hover input ~ .checkmark { background-color: #ccc; }
.brradio input:checked ~ .checkmark { background-color: #e7380c; }
.brradio input:checked ~ .checkmark:after { display: block; }
.brradio .checkmark:after { content: ""; position: absolute; display: none; }
.brradio .checkmark:after { top: 6px; left: 6px; width: 12px; height: 12px; border-radius: 50%; background: white; }