@charset "utf-8";

@font-face {
font-family: "Nanum Square";
  src: url("../css/fonts/NanumSquareL.eot"); /* IE9 Compat Modes */
  src: url("../css/fonts/NanumSquareL.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("../css/fonts/NanumSquareL.woff") format("woff"), /* Modern Browsers */
       url("../css/fonts/NanumSquareL.ttf")  format("truetype"), /* Safari, Android, iOS */
       url("../css/fonts/NanumSquareOTFLight.svg#017f9c78318bcde3d1dc4451e8eaca0a") format("svg"); /* Legacy iOS */       
  font-style:   normal;
  font-weight:  300;
}

@font-face {
  font-family: "Nanum Square";
  src: url("../css/fonts/NanumSquareR.eot"); /* IE9 Compat Modes */
  src: url("../css/fonts/NanumSquareR.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("../css/fonts/NanumSquareR.woff") format("woff"), /* Modern Browsers */
       url("../css/fonts/NanumSquareR.ttf")  format("truetype"), /* Safari, Android, iOS */
       url("../css/fonts/NanumSquareOTFR.svg#9e23ceb0c858ca37642ba540402577eb") format("svg"); /* Legacy iOS */       
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: "Nanum Square";
  src: url("../css/fonts/NanumSquareB.eot"); /* IE9 Compat Modes */
  src: url("../css/fonts/NanumSquareB.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("../css/fonts/NanumSquareB.woff") format("woff"), /* Modern Browsers */
       url("../css/fonts/NanumSquareB.ttf")  format("truetype"), /* Safari, Android, iOS */
       url("../css/fonts/NanumSquareOTFB.svg#a41a1fda1fdf3dafd3394867a156b1cf") format("svg"); /* Legacy iOS */       
  font-style:   bold;
  font-weight:  700;
}

@font-face {
  font-family: "Nanum Square";
  src: url("../css/fonts/NanumSquareEB.eot"); /* IE9 Compat Modes */
  src: url("../css/fonts/NanumSquareEB.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("../css/fonts/NanumSquareEB.woff") format("woff"), /* Modern Browsers */
       url("../css/fonts/NanumSquareEB.ttf")  format("truetype"), /* Safari, Android, iOS */
       url("../css/fonts/NanumSquareOTFExtraBold.svg#090d6763bc81b49309446d23fbd10e87") format("svg"); /* Legacy iOS */
  font-style:   border;
  font-weight:  900;
}


/* reset */
*,:after,:before{margin: 0;padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;font-family: "Nanum Square", "맑은 고딕", Malgun Gothic, Helvetica, sans-serif;list-style-type:none;letter-spacing:-0.5px;}
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, 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, input, textarea, button,
article, aside, canvas, details, embed, figure, figcaption, footer, header, menu,
nav, output, ruby, section, summary, time, mark, audio, video
{margin:0;padding:0;border:0;font-size:100%;}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {display: block;}
ol, ul, li {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: "";content:none;}
table {border-collapse:collapse;border-spacing:0;empty-cells: show;table-layout: fixed;word-break: break-all;}
a {text-decoration:none;color:inherit;}
a:hover {text-decoration:none;}
legend, caption, hr {display:none;}
em {font-style:normal;}
img {vertical-align:middle;max-width: 100%;}
input {vertical-align:middle;}
p,h3,h2,h1{letter-spacing: normal;}
input,textarea,button,select{outline:0}
section{width:100%;}

html, body{width:100%;height:100%;font-size: 16px;word-wrap:break-word;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;-webkit-touch-callout: none;text-size-adjust: none;-webkit-tap-highlight-color:transparent;scroll-behavior: smooth;}
body{background:#fff;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-family:"Nanum Square", "Noto Sans","맑은 고딕", Malgun gothic, Helvetica, sans-serif;color:rgba(0,0,0,0.84);line-height:1.42857;font-weight: 400;}

::-webkit-input-placeholder {font-size:22px;color:#979797 !important;}
:-moz-placeholder {font-size:22px;color:#979797 !important;opacity: 1;}
::-moz-placeholder {font-size:22px;color:#979797 !important;opacity: 1;}
:-ms-input-placeholder {font-size:22px;color:#979797 !important;}
input::-ms-clear{display:none;}
input:-webkit-autofill {text-shadow:none;}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;}
input [type="password"] {font:small-caption;font-size:16px;-webkit-text-security:disc;}
input[type="password" i] {-webkit-text-security: disc !important;}
input, select {-webkit-appearance:none;border-radius: 0;vertical-align: middle;}
select::-ms-expand {display:none;}
select:disabled{background-color:#f5f5f5}
button{cursor:pointer;}
input{padding:10px;}



body{background:#fff;color:#121212;}


/* Header */
.header{position:relative;width:100%;height:100px;border-bottom:1px solid #ccc;}
.header-inner{display:flex;justify-content:space-between;align-items:center;height:100%;margin:0 auto;padding:0 15px;width:100%;max-width:1035px;}

.menu{display:block;position:relative;background:#000;width:35px;height:5px;border-radius:5px;cursor:pointer;}
.menu:before{content:"";display:block;position:absolute;background:#000;width:100%;height: 5px;top:-12px;border-radius:5px;}
.menu:after{content:"";display:block;position:absolute;background:#000;width:100%;height:5px;top:12px;border-radius:5px;}
.logo{position:absolute;left:0;right:0;margin:auto;text-align:center;font-size:30px;color:#121212;font-weight:500;cursor:pointer;width:100px;font-weight:600;}
.logo strong{font-weight:900;}
.login{font-size:18px;color:#fff;background:#ed1c24;font-weight:bold;text-align:center;border-radius:20px;width:115px;height:31px;line-height:31px;}

.banner{height:475px;background:url(../images/bg_main.gif) center center no-repeat;background-size:cover;}
.banner a{display:block;width:100%;height:100%;}

/* contents */
.contents{width:100%;max-width:1035px;margin:60px auto 80px;}
.title{font-size:24px;color:#000;font-weight:600;text-align:left;margin-bottom:10px;padding-left:10px;}
.ranking{margin-bottom:40px;}
.ranking ul{display:flex;align-items:center;flex-wrap:wrap;width:100%;}
.ranking ul li{padding:10px;width:calc(100% / 3);}
.ranking ul li a{position:relative;display:block;width:100%;height:100%;}
.ranking .ranking-num{position:absolute;left:0;right:auto;bottom:auto;border:0;border-radius:0;width:20px;height:30px;z-index:10;}
.ranking .ranking-num:before{content:'';position:absolute;left:0;top:0;z-index:-1;display:block;width:0;height:0;border-right:36px solid transparent;border-top:44px solid #ed1c24;}
.ranking .ranking-num strong{color:#fff;display:block;margin-top:3px;margin-left:5px;font-weight:900;font-size:18px;}


.thumb-list{margin-bottom:70px;}
.thumb-list ul{display:flex;align-items:center;flex-wrap:wrap;width:100%;}
.thumb-list ul li{width:calc(100% / 3);padding:10px 10px 20px;}
.thumb-title{font-size:17px;margin-top:15px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.img-box{width:100%;height:100%;overflow:hidden;}
.img-box img{transition: all 1s;}
.img-box img:hover{transform: scale(1.09) rotate(.001deg);}


.btn-more{display:block;width:280px;margin:0 auto;border:1px solid #333;border-radius:30px;font-size:22px;font-weight:600;height:60px;line-height:60px;text-align:center;}





/* Footer */
.footer{border:1px solid #d9d9d9;background:#fff;}
.footer-inner{max-width:1035px;margin:0 auto;text-align:center;padding:30px 0;font-size:13px;color:#9b9b9b;}



@media screen and (max-width:780px){

.banner{height: calc(100vw * 0.6597222222222223);background:url(../images/bg_main_m1.gif) center center no-repeat;background-size:cover;}
}



@media screen and (max-width:720px){
.header{height:65px;}
.menu{width:30px;height:4px;}
.menu:before{height:4px;top:-10px;}
.menu:after{height:4px;top:10px;}
.login{width:65px;font-size:14px;height:26px;line-height:26px;}
.logo{width:70px;}


.contents{padding:15px 8px;margin:15px auto 40px;}

.title{font-size:17px;margin-bottom:2px;padding-left:5px;}


.ranking{margin-bottom:20px;}
.ranking ul li{padding:10px 4px;}
.ranking .ranking-num:before{border-right:28px solid transparent;border-top:36px solid #ed1c24}
.ranking .ranking-num strong{font-size:14px;margin-top:2px;margin-left:3px;}

.thumb-list{margin-bottom:40px;}
.thumb-list ul li{padding:10px 4px;}
.thumb-title{font-size:14px;margin-top:6px;}


.btn-more{width:210px;height:45px;line-height:45px;font-size:17px;}


.footer-inner{padding:20px 25px;font-size:12px;}
.footer-inner .copy{margin-top:5px;font-size:11px;}
}