/* 초기화 */
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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;font-family:'Noto Sans KR', Roboto, Noto Sans KR,"KoPubDotumMedium",sans-serif;font-size:100%; letter-spacing: -0.64px; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}
ol {list-style:none;}
ul li{text-indent: -4px; margin-left: 21px;}
ul li::marker {font-size:0.7rem;}
blockquote, q {quotes:none;}
blockquote::before, blockquote::after, q::before, q::after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
a {text-decoration:none;color:inherit;cursor:pointer;outline:none;}
a:hover,a:focus {text-decoration:none;outline:none;}
a:focus-visible {outline:1px solid 263849;}
button, input, select, textarea {margin:0;padding:0;border:none;background:none;font-family:inherit;font-size:inherit;color:inherit;outline:none;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;}
* { margin: 0; padding: 0; box-sizing: border-box;}

.remark{color:#FF0000/*#C59036*/;}

.bg-golden{ background-color:#C59036;}
.bg-blue{background-color: #203A39}
.bg-olive{background-color: #6B8C42}
.bg-rose{background-color: #a18476}

/* common */
.wrap{ display: block; width:100%; max-width: 1200px; min-width: 320px; padding: 0 24px; margin:0 auto;}
.container{ display: block; width:100%; max-width: 1200px; min-width: 320px; height: fit-content; padding: 40px 24px 60px; margin:0 auto; box-sizing: border-box;}
.container .title{ position: relative; color:#142B3D; font-size: 1.125rem; font-weight: 700; padding-left:14px; margin-bottom: 30px;}
.container .title::before{content: "";position: absolute; left:0px; top:2px; display: block; height: 1em; width: 4px; background-color: #6A9DCD;}
.container .title ~ span{font-size: 0.813rem; color:#AEAEAE}
.container p{ color:#666; font-size: 0.938rem; line-height: 1.65; text-align: justify;}

.flex{display: flex;}
.flex-align-center{display: flex; align-items: center;}
.flex-center{display: flex; align-items: center; justify-content: center;}
.flex-column{display: flex; flex-direction: column;}
.flex-column-center{display: flex; flex-direction: column; align-items: center;}
.flex-center-between{display: flex; align-items: center; justify-content: space-between;}

.tcenter{text-align: center;}
.tleft{text-align: left;}
.tright{text-align: right;}

table.table {width: 100%; font-size: 0.938rem;word-break: keep-all;}
table.table thead tr{ border-bottom:2px solid #6A9DCD;}
table.table thead th,
table.table thead td{ padding:20px 12px;}
table.table thead th{ background-color: #EFF5FA; color: #263849; padding:20px 12px;}
table.table tbody tr{ border-bottom: 1px solid #E8E8E8;}
table.table tbody th,
table.table tbody td{ padding:20px 12px; vertical-align: middle; }
table.table tbody th{ font-weight: 700; color: #263849;}
table.table tbody td{ color: #6C757D;}

.pagination {display: flex; align-items: center; justify-content: center; gap:6px; margin-top: 30px; }
.pagination a {display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #333; text-decoration: none;}
.pagination a:hover { background-color: #eee;}
.pagination a.active { background-color: #263849; color: #fff;}
.pagination a.prev:hover,
.pagination a.next:hover{background-color:transparent;}

.dropdown { position: relative; width: 180px; }
.dropdown .selected {display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1px solid #E8E8E8; background: #fff; cursor: pointer; font-size: 0.938rem;}
.dropdown .selected img{ width: 16px; height: 16px;}
.dropdown.open .selected img{ transform: rotate(180deg);}
.dropdown ul { position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 0; list-style: none; border: 1px solid #E8E8E8; border-radius: 4px; background: #fff; display: none; z-index: 10; }
.dropdown.open ul { display: block; list-style: none; padding: 0; margin: 0;}
.dropdown ul li {  padding: 10px 14px; cursor: pointer; margin: 0; text-indent: 0;}
.dropdown ul li:hover { background: #f0f0f0; }

.tab-menu {list-style: none; display: flex;border-bottom: 1px solid #E8E8E8; padding: 0;margin: 0;}
.tab-menu li {color:#AEAEAE; font-size: 1.125rem; text-align: center; padding: 0 10px 19px ; cursor: pointer; min-width: 122px;margin-left: 0;}
.tab-menu li.active {color:#263849;border-bottom: 5px solid #263849; font-weight: bold;}
.tab-content { display: none;padding-top: 50px;}
.tab-content.active {display: block;}

.button-style{ background-color: #036EB8; color: #fff; padding: 14px 42px; font-size: 1rem; font-weight: 500; text-align: center;}
.button-style:hover, .button-style:focus{ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);}
.button-text{ background: none; color: #222222; border: 0 none; font-size: 1rem;}
.button-text:hover, .button-text:focus{ }
.button-style:disabled{background-color: #CDCDCD; color:#fff;}
.button-style:disabled:hover,
.button-style:disabled:focus{box-shadow: none;}
.button-outline{ border:1px solid #264156; color:#264156; padding: 14px 42px; font-size: 1rem; font-weight: 500;}

.custom-checkbox { position: relative; padding-left: 24px; cursor: pointer; user-select: none; display: inline-block; color:#666; font-size: 0.875rem; }
.custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; }
.custom-checkbox .checkmark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; border:1px solid #AFAFAF;}
.custom-checkbox input:checked ~ .checkmark { background-color: #263849; border-color:#263849;}
.custom-checkbox .checkmark:after { content: ""; position: absolute; display: none; }
.custom-checkbox input:checked ~ .checkmark:after { display: block; }
.custom-checkbox .checkmark:after { left: 5px; top: 0; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.custom-radio { position: relative; padding-left: 24px; cursor: pointer; user-select: none; display: inline-block; font-size: 16px; }
.custom-radio input { position: absolute; opacity: 0; cursor: pointer; }
.custom-radio .radiomark { position: absolute; top: 0; left: 0; height: 18px; width: 18px; border:1px solid #AFAFAF; border-radius: 50%; }
.custom-radio input:checked ~ .radiomark { background-color: #263849; border-color:#263849;}
.custom-radio .radiomark:after { content: ""; position: absolute; display: none; }
.custom-radio input:checked ~ .radiomark:after { display: block; }
.custom-radio .radiomark:after { top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: white;transform: translate(-50%, -50%); }

.line{width: 100%; height: 1px; background-color: inherit; margin: 16px auto; border: none;}

.box{margin-top: 40px;}
.box:first-of-type{margin-top: 0;}

figure > img {object-fit: cover; width: 100%;}


.board-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom:50px;}
.board-header h3:not(:has(b)){color:#263849; font-weight: 600;}
.board-header h3{color: #7b7b80; font-size: 1.5rem; font-weight: 500;}
.board-header h3 b {color:#263849; font-weight: 600;}

.board-controls{ display: flex; justify-content: flex-end; gap:10px; flex-wrap: wrap; font-size: 0.938rem;}
.board-controls select{ min-width: 120px; padding: 10px 14px; border: 1px solid #E8E8E8; color: #333; appearance: none;-webkit-appearance: none;-moz-appearance: none; background-image: url("./../../image/brand/icon_select_arrow.svg");}
.board-controls select option{border-color: #E8E8E8;}


/* HEADER */
header { width: 100%; height: 84px; display: flex; background-color: #263849;}
header > .wrap {display: flex; align-items: center; justify-content: space-between;}
nav ul{display: inline-flex; gap:40px; list-style: none;}

nav a{ color:#fff;font-weight:400; position: relative;}
nav a::after {content: "";position: absolute;left: 50%;bottom: -6px; width: 0;height: 2px;background: #fff;transition: all 0.4s ease;transform: translateX(-50%);}
nav a:hover::after, 
nav a:focus::after,
nav a.active::after{ width: 100%;}
nav a:hover, 
nav a:focus,
nav a.active{font-weight: 700;}

.hamburger{ display:none; }

@media (max-width: 767px) {
    /* .visual::before 백그라운드 컬러와 높이 값이 있어서 모바일 사이즈에서 새로고침 하면 나타났다가 사라짐 현상으로 display:none; 처리 */
    .visual::before{ display:none; }

    /* hamburger */
    .hamburger{ display:block; }
    .hamburger-line{ width: 22px; height: 2px; background-color: #FFF; display: block; margin: 4px auto; transition: all 0.3s ease-in-out; }
    .hamburger.active .hamburger-line:nth-child(2){ opacity: 0; }
    .hamburger.active .hamburger-line:nth-child(1){ transform: translateY(6px) rotate(45deg); }
    .hamburger.active .hamburger-line:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
    .hamburger.active ~ ul {display: flex;}
    nav ul { display: none; position:absolute; top:56px; left:0; width:100%; flex-direction:column; background-color: #263849; border-top: 1px solid #3e5469; gap:0; box-shadow: inset 0 1px 2px #000;  z-index: 9;}
    nav ul li{text-indent: 0; margin-left: 0;}
    nav ul a{ display: block; padding: 18px 1rem;}
    nav ul a:hover, 
    nav ul a:focus,
    nav ul a.active{ background-color:#3e5469 ;}
    nav ul a:hover::after, 
    nav ul a:focus::after,
    nav ul a.active::after{ display: none;}
}

/* FOOTER */
footer{ background-color: #111E28; padding:20px;}
footer .copyright-notice{ color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; line-height: 1.25; margin-bottom: 8px;}
footer .copyright{color: rgba(255, 255, 255, 0.6);font-size: 0.75rem; font-weight: 200;}


/* PAGETITLE */
.pagetitle{ height: 240px; display: flex; align-items: center; padding: 0 24px; background-repeat: no-repeat; background-position: 0 center; background-size: cover;}
.pagetitle h2{ width:100%; max-width: 1200px; margin: 0 auto; color:#fff; font-size: 2.625rem; font-weight: 700;}
.pagetitle-intro{background-image: url("./../../image/brand/pagetitie_intro.jpg");}
.pagetitle-contest{background-image: url("./../../image/brand/pagetitle_contest.jpg");}
.pagetitle-apply{background-image: url("./../../image/brand/pagetitle_apply.jpg");}
.pagetitle-awards{background-image: url("./../../image/brand/pagetitle_awards.jpg");}
.pagetitle-community{background-image: url("./../../image/brand/pagetitle_community.jpg");}
.pagetitle-sketch{background-image: url("./../../image/brand/pagetitle_sketch.jpg");}


/* 소형 모바일 */
@media (max-width: 479px) { 
    
    header{ height:56px;}
    .header-logo img{ width: 80%;}
    .button-outline,
    .button-style{ padding:14px 18px;font-size: 0.875rem;}

    .pagetitle{ height: auto;}
    .pagetitle h2{ font-size: 1.625rem; padding: 40px 0;}
    
    .container{ min-height: calc(100vh - 56px - 112px - 88px); padding:30px 16px 40px}
    .tab-content{padding-top:20px;}
    .tab-menu li{ min-width: auto; padding: 0px 14px 16px 14px; font-size: 1rem;}

    .dropdown{ width: 100%;}

    .board-header{ flex-direction: column; align-items: flex-start; margin-bottom: 30px;}
    .board-header h3{ margin-bottom: 20px; font-size: 1.25rem;}

    footer .wrap{ padding:0}
    footer .copyright-notice{ font-size: 0.75rem;}

}

/* 모바일 */
@media (min-width: 480px) and (max-width: 767px) { 
 
    header{ height:64px;}
    .header-logo img{ width: 80%;}
    .button-outline,
    .button-style{ padding:14px 20px; font-size: 0.875rem;}

    .pagetitle{ height: auto;}
    .pagetitle h2{ font-size: 1.75rem; padding: 60px 0;}

    .container{ min-height: calc(100vh - 64px - 152px - 74px); padding:30px 16px 40px}
    .tab-content{padding-top:30px;}

    footer .wrap{ padding:0}

}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) { 

    .header-logo img{ width: 80%;}
    nav ul{ gap:25px}

    .pagetitle{ height: 180px;}
    .pagetitle h2{ font-size: 2.125rem;}
    .container{ min-height: calc(100vh - 84px - 180px - 74px)}

    .tab-content{padding-top:30px;}
}

/* PC (1024~1200) */
@media (min-width: 1024px) and (max-width: 1200px) { 
    .pagetitle{ height: 220px;}
    .container{ min-height: calc(100vh - 84px - 220px - 74px)}
   
}

/* 대형 화면 (1200 이상)*/
@media (min-width: 1201px) {

     .wrap{ padding: 0; }
     .container{padding: 40px 0px 60px; min-height: calc(100vh - 84px - 240px - 78px)} 
     /* 전체높이 - header - pagetitle - footer */
 }