@charset "UTF-8";

.dpnone{display: none;}
.dpBlock{display: block;}
.w100{width: 100%;}
.w90{width: 90px;}
.w150{width: 150px;}
.hMini{height: 35px;}

/*정렬*/
.dpFlex{display: flex;}
.justifyCenter{justify-content: center;}
.justifyBetween{justify-content: space-between;}
.justifyEnd{justify-content: flex-end;}
.directionColumn{flex-direction: column;}
.alignCenter{align-items: center;}
.flexWrap{flex-wrap: wrap;}
.gap5{gap: 5px;}
.gap10{gap: 10px;}
.gap20{gap: 20px;}
.gap30{gap: 30px;}
.gap50{gap: 50px}
.material-symbols-outlined{vertical-align: middle; margin-top: -4px;}

/*여백*/
.pad10{padding:10px}
.pad20{padding:20px}
.pad30{padding:30px}
.pad50{padding:50px}
.padtb10{padding: 10px 0;}
.padtb50{padding: 50px 0;}
.padtb80{padding: 80px 0;}
.padtb100{padding: 100px 0;}
.padb100{padding-bottom: 100px;}
.padlr10{padding:0 10px;}
.padlr50{padding:0 50px;}
.marb10{margin-bottom: 10px;}
.marb20{margin-bottom: 20px;}
.marb50{margin-bottom: 50px;}
.mart10{margin-top: 10px;}
.mart20{margin-top: 20px;}
.mart30{margin-top: 30px;}
.mart50{margin-top: 50px;}
.marr10{margin-right: 10px;}
.marr20{margin-right: 20px;}



/*버튼*/
.bgGraBtn,.btn{background: #6F4B0B; background: linear-gradient(0deg, rgba(111, 75, 11, 1) 0%, rgba(251, 183, 66, 1) 100%); display: block; padding:10px 20px; text-shadow: 0 0 10px rgba(0,0,0,0.5);}
input.btn{background: #f2b140;}
.sBtn{width: 100px !important;}

/*input*/
.arrow{position: relative}
.arrow::before{content: "\e313"; display: block; width: 20px; height: 20px; font-size: 20px; font-family: "Material Symbols Outlined"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}

/*디자인*/
.grBg{background: #6F4B0B; background: linear-gradient(0deg, rgba(111, 75, 11, 1) 0%, rgba(251, 183, 66, 1) 100%);}
.brr10{border-radius: 10px;}
.brr20{border-radius: 20px;}
.brr50{border-radius: 50px;}
.bgb{background:#000}
.bgg{background:#2e2e2e}
.bgg2{background:#101010}
.pBg{background: #fbb742;}
.pBg2{background: #ff9c3f;}
.brLGra::before,.brLGra::after{content: ""; display: block; width: 100%; height: 2px; background: url(../images/common/border_gra.jpg) repeat;}
.boxTit{background: #fbb742; text-shadow: 0 0 10px rgba(0,0,0,0.5); color:#fff; font-family: 'GangwonEducationTteontteon'; padding:10px 0; padding-top: 20px; text-align: center;}
.hidden{overflow: hidden;}
.dimmed{position: fixed; top:0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; display: none;}
.modal{width:70%; position: fixed; top:50%; left: 50%; transform: translate(-50%,-50%); z-index: 1001; display: none;}
.modal::before{content: ""; display: block; width: 35%; padding-bottom: 20%; margin:0 auto; margin-bottom: 10px; background: url(../images/common/logo.gif) no-repeat center; background-size: 100%;}
.pcStatic{position: static; transform: unset; width: 100%; display: block;}
.pcStatic::before{display: none;}
.borderG{border: 1px solid #666;}



/*hover*/
.imgScale{overflow: hidden;}
.imgScale img,.txtColor a{transition: 0.3s;}
.imgScale:hover img{transform: scale(1.2);}
.txtColor a:hover{color: #fbb742;}

/*텍스트*/
.fwb{font-weight: bold;}
.fs12{font-size: 12px;}
.fs14{font-size: 14px;}
.fs16{font-size: 16px;}
.fs18{font-size: 18px;}
.fs20{font-size: 20px;}
.fs26{font-size: 26px;}
.txtCenter{text-align: center;}
.txtRight{text-align: right;}
.txtLeft{text-align: left;}
.fcw{color: #fff;}
.fcb{color: #000;}
.txtShadow{text-shadow: 0 0 10px rgba(0,0,0,0.5);}
.pColor{color: #ffd89b;}
.pColor2{color: #ff9c3f;}
.redColor{color:#b5031b}

/*기능*/
.closeBtn{position: absolute; color: #fff; right: 10px; top: 10px; cursor: pointer;}
.closeBtn span{font-weight: 200;}
.scrollnone{-ms-overflow-style: none; scrollbar-width: none; overflow-y: auto;}
.selectBox {position: relative; width: 150px;}
.selectBox h4{width: 100%; background: #fff; color: #000; padding:0 10px; cursor: pointer;}
.selectBox h4 span{vertical-align: middle; margin-top: 0; transition: 0.3s;}
.selectBox ul{position: absolute; width: 100%; top: 50px; z-index: 100; display: none; background: #101010;}
.selectBox ul li{padding: 5px 10px; display: block; font-size: 14px; cursor: pointer; transition: 0.3s;}
.selectBox ul li:hover{background: #2e2e2e;}
.selectBox ul.active{display: block;}
.cursor,.cursor *{cursor: pointer;}

@media only screen and (max-width:767px){
    .pcStatic::before{display: block;}
}