@import url('../font/pretendard/pretendard.css');
@import url('../font/Silkscreen/Silkscreen.css');
@import url('../font/RobotoSlab/RobotoSlab.css');
@import url('../font/JetBrainsMono/JetBrainsMono.css');


/*-----------------------------------------
    reset
-------------------------------------------*/

:root {
    --color-primary: #191919;
    --color-success: #666666;
    --color-secondary: #ff3d3d;
    --color-white: #fff;
    --color-black: #000;

    --color-background: #121419;

    --color-font-primary: #191919;
    --color-font-red: #ff3d3d;
    --color-font-blue: #104dcc;
    --color-font-blue2: #145bff;
    --color-font-gray: #666666;
    --color-font-gray2: #4e4e4e;
    --color-font-url: #999;
    --color-font-tag: #444444;
    --color-font-btn: #111;
    --color-font-guide: #ffe033;

    --color-border-layout: #efefef;
    --color-border-searchform: #111111;
    --color-border-searchlayer: #4e4e4e;
    --color-border-gnb: #e5e5e5;
}


* { margin:0; padding:0;  font-family: Pretendard; }
ul, li { list-style:none; }
img { border:0; vertical-align:top; }
a { text-decoration:none; }
a:hover { text-decoration:none; }
textarea { resize:none; }
button { cursor:pointer; }
html { min-height:100%; }
body { line-height:1.4; min-width:1192px; min-height:100%; color:var(--color-font-primary)  }
.hide_obj { display:block; width:1px; height:1px; overflow:hidden; text-indent:10px; }
.move {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
.no_scroll { overflow:hidden; }
.no_scroll body { overflow:hidden; }


.daterangepicker .drp-buttons .btn { display: inline-block; line-height:1; height:auto; width:auto;}
.selectbox {  -moz-appearance: none; -webkit-appearance: none; appearance: none; }

input,
textarea, 
button { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
table caption { display: none;}

/*-----------------------------------------
    common
-------------------------------------------*/
.tags { padding:32px 0 48px 0;  display: flex; flex-wrap: wrap;  gap:8px;  justify-content: center; }
.tags a { padding:0px 12px; height:32px; line-height:32px; font-size: 14px; color:var(--color-font-tag); border-radius: 6px;  background-color: #f8f8f8; }
.tags .btn-refresh { border:0; width:32px; height:32px; background: url('../img/main/btn_refresh.png') no-repeat; background-size:32px auto;}
.tags .btn-refresh span { display: none;}


/*-----------------------------------------
    layout
-------------------------------------------*/
body .wrap { min-height: 100vh; }

/* header */
.header { position:fixed; width:100%;  z-index:3; background:var(--color-white) }
.header .inner { position:relative; min-width:1264px; height:120px; margin:0 auto; padding-left:0; box-sizing: border-box;  background:var(--color-white)  }
.header .logo { position:absolute; left:120px; top:42px; width:78px; height:29px; background: url('../img/common/logo.png') no-repeat; background-size: 78px auto; }
.header .logo span { display: none;}
.header .btn-search { position:absolute; right:120px; top:40px; border:0; width:32px; height:32px; background: url('../img/common/btn_search.png') no-repeat; background-size: 32px auto;}
.header .btn-search span { display: none;}

.header .search-layer { position:fixed; left:0; top:0; width:100%; border:0; border-bottom:1px solid var(--color-border-searchlayer);  }
.header .search-layer .inner { position:relative; width: 1264px; height:auto; padding:72px 0 48px 0; margin:0 auto; overflow:hidden; }
.header .search-layer .form,
.header .search-layer .keywords { clear:both; width:896px; margin:0 auto;  }
.header .search-layer .keywords { padding-top:40px; }
.header .search-layer .keywords li { display: inline-block; margin-right:30px;}
.header .search-layer .keywords li a { font-size: 16px; letter-spacing: -0.16px; color: var(--color-font-primary);  }
.header .search-layer .keywords li a:hover { text-decoration: underline;}
.header .search-layer .form { overflow: hidden; }
.header .search-layer .form .select { float:left; width:184px; padding-bottom:17px; border-bottom:4px solid var(--color-border-searchform); }
.header .search-layer .form .select select { width:100%; padding-right:30px; box-sizing: border-box; height:36px; line-height:36px;  font-size: 24px; letter-spacing: -0.24px; color:var(--color-font-btn); background: url('../img/common/ico_search_arrow.png') right 6px no-repeat; background-size:24px auto; border:0;  border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.header .search-layer .form .input { position:relative; float:right; width: 680px; padding: 0 40px 17px 0; box-sizing: border-box; border-bottom:4px solid var(--color-border-searchform);}
.header .search-layer .form .input input { width:100%; border:0; height:36px; line-height:36px; font-size: 24px; font-weight: bold; letter-spacing: -0.24px; color:var(--color-font-btn) }
.header .search-layer .form .input input::placeholder { color: var(--color-font-url); font-weight: normal; }
.header .search-layer .form .input input:focus {outline:none;}
.header .search-layer .form .btn { position:absolute; right:0; top:0; width:36px; height:36px; border:0; background: url('../img/common/btn_search_form.png') no-repeat; background-size: 36px auto;}
.header .search-layer .form .btn span { display: none;}
.header .search-layer .btn-close { position:absolute; right:0; top:30px; width:32px; height:32px; border:0; background: url('../img/common/btn_search_close.png') no-repeat; background-size: 32px auto; }
.header .search-layer .btn-close span { display: none;}

.gnb { width:1264px; margin:0 auto; text-align:center;}
.gnb li { display: inline-block; padding:46px 50px 0 50px; }
.gnb li a { position:relative; font-family: Pretendard; font-size: 18px; font-weight: 800;  color:var(--color-font-primary);}
.gnb li a.active { color:var(--color-font-red)}
.gnb li a.active::before { position:absolute; left:50%; top:-16px; margin-left:-4px; content:''; display: block; width:8px; height:8px; border-radius: 8px; background:var(--color-font-red);}

/* footer */
.footer  { padding:60px 0 58px 0;  border-top:1px solid var(--color-border-layout)}
.footer .inner { position:relative; width:1264px; margin:0 auto; text-align:center; font-size: 13px; line-height: 1.54; letter-spacing: -0.13px;  color:var(--color-font-gray)}
.footer .logo a { display: inline-block; width:64px; height:28px; overflow:hidden; background: url('../img/common/img_logo_footer.png') no-repeat; background-size: 64px auto;}
.footer .logo a span { display:none;}
.footer .guide { padding:24px 0 40px 0; }
.footer .btn-top { position:absolute; right:0; top:-5px;  border:0; width:40px; height:40px; background: url('../img/common/btn_top.png') no-repeat; background-size: 40px auto;}
.footer .btn-top span { display: none ;}

/* contents */
.contents { padding:100px 0 180px 0; width:1264px; margin:0 auto; }


/*-----------------------------------------
            mobile
-------------------------------------------*/


@media all and (max-width:1350px){
    .header .logo  { left:0; }
    .header .btn-search {  right:0; }

}

@media all and (max-width:1023px){

   
    /* header */
    .header { border-bottom:1px solid var(--color-border-gnb); }
    .header .inner {  min-width:100%; height:59px; }
    .header .btn-search  { top:14px; right:13px; width:32px; height:32px; background: url('../img/common/btn_search_m.png') no-repeat; background-size: 32px auto; }
    .header .logo  { top:18px; left:20px; width:24px; height:24px; background: url('../img/common/logo_m.png') no-repeat; background-size: 24px auto; }
    
    .header .search-layer { position:fixed; left:0; top:0; width:100%; height:100vh; overflow:hidden; overflow-y:auto; border:0; border-bottom:0; background:var(--color-white)  }
    .header .search-layer .inner {width: 100%; padding:92px 20px 48px 20px; box-sizing: border-box; }
    .header .search-layer .form,
    .header .search-layer .keywords { clear:both; width:100%; margin:0 auto;  }
    .header .search-layer .keywords { padding-top:48px; }
    .header .search-layer .keywords li { display: inline-block; height:19px; line-height:19px; margin:0 30px 16px 0;}
    .header .search-layer .form .select { float:none; width:100%; padding-bottom:17px; margin-bottom:48px; border-bottom:4px solid var(--color-border-searchform); }
    .header .search-layer .form .select select { width:100%; padding-right:30px; box-sizing: border-box; height:36px; line-height:36px;  font-size: 24px; letter-spacing: -0.24px; color:var(--color-font-btn); background: url('../img/common/ico_search_arrow.png') right 6px no-repeat; background-size:24px auto; border:0;  border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
    .header .search-layer .form .input { position:relative; float:none; width: 100%; padding: 0 40px 17px 0; box-sizing: border-box; border-bottom:4px solid var(--color-border-searchform);}
    .header .search-layer .form .input input { width:100%; border:0; height:36px; line-height:36px; font-size: 24px; font-weight: bold; letter-spacing: -0.24px; color:var(--color-font-btn) }
    .header .search-layer .form .input input:focus {outline:none;}
    .header .search-layer .form .btn { position:absolute; right:0; top:0; width:36px; height:36px; border:0; background: url('../img/common/btn_search_form.png') no-repeat; background-size: 36px auto;}
    .header .search-layer .btn-close { right:15px; top:14px; background-image: url('../img/common/btn_search_close_m.png'); }

    
    .gnb { width:100%;}
    .gnb li { padding:20px 12px 0 12px;}
    .gnb li a { font-size:16px; }
    .gnb li a.active::before {left:50%; top:35px;  margin-left:-3.5px; content:''; display: block; width:8px; height:8px; border-radius: 8px; background:var(--color-font-red);}


    body  { min-width:360px; }
    body .wrap { min-width:360px;  }
    

    .contents { padding:60px 0 80px 0; width:100%; min-width:100%; }

    /* footer */
    .footer  { padding:0 20px 32px 20px; overflow: hidden; }
    .footer .inner {width:100%; padding:32px 0 0 0;  font-size: 12px; line-height: 1.5; letter-spacing: -0.12px;  }
    .footer .guide { padding:24px 0; }
    .footer .btn-top  { display: none;}

    /* common */
    .tags { padding:27px 20px 24px 20px;  display: flex; flex-wrap:nowrap;   gap:8px;  justify-content: left; overflow:hidden; overflow-x: auto; }
    .tags a { padding:0px 12px; flex-basis: auto; white-space:nowrap;   }
    .tags .btn-refresh { border:0;  padding:0 16px; box-sizing: border-box; }
    .tags .btn-refresh span { display: none;}
    
}