#header {z-index:1000;width: 100%;transition:all .2s;position: fixed;top:0;left:0;    background-color: rgba(51, 51, 51); /* 처음엔 완전 투명 */ transition: background-color 0.1s ease; /* 배경색 변화를 부드럽게 */}
#header .hd_div {border-top: 0;transition: 0s;box-shadow:2px 2px 7px rgba(0,0,0,.2);height:96px;}
#header .hd_div:after{clear:both;content:"";display: block;}
#header .hd_div .hd_textbox {position:relative;width:1280px;margin:0 auto;}
#header .hd_div .hd_textbox:after {clear:both;content:"";display: block;}
#header .hd_div .hd_textbox h1{display: inline-block;vertical-align: middle;padding-top:29px;}
#header .hd_div .hd_textbox h1 a{display: block;width:100%;height:42px;}
#header .hd_div .hd_textbox h1 a img{height:100%;}
#header .hd_div .hd_textbox .contact{display: inline-block;box-sizing:border-box;vertical-align: middle;width:140px;height:42px;line-height:42px;border-radius:9px;text-align: center;background:#EE2255;font-size:18px;color:#fff;font-weight:500;position: relative;transition:all 0.5s;margin-left:20px;margin-top:29px;}
#header .hd_div .hd_textbox .contact:before{width:0;height:0;content:"";background:url('../img/send.png')no-repeat center;position: absolute; right:26px;top:15px;transition:all 0.5s;}
#header .hd_div .hd_textbox .contact:hover{padding-right:28px;transition:all 0.5s;}
#header .hd_div .hd_textbox .contact:hover:before{width:13px;height:13px;transition:all 0.5s;}
#header .hd_div .hd_ul {font-size:0;text-align:center;display: inline-block;box-sizing:border-box;margin-left:106px;width:auto;float:right;padding:0;vertical-align: top;}
#header .hd_div .hd_ul li {display:inline-block;padding: 0 72px 0 0;position:relative;}
#header .hd_div .hd_ul li a {display:inline-block;width:auto;border-radius: 2.22em;font-size:22px;font-weight:500;position:relative;color: #ffffff;padding:0;line-height:96px;}
#header .hd_div .hd_ul li.portfolio > a:before{content: "";animation-duration: 2s;animation-name: point;animation-iteration-count: infinite;display: block;position: absolute;top:32px;right: -10px;width: 8px;height: 8px;border-radius: 50%;background: #EE2255;}
@keyframes point {  0% { opacity: 1; }  50% { opacity: 0; }  100% { opacity: 1; }  }
#header .hd_div .hd_ul li.hd_li.on > a,
#header .hd_div .hd_ul li.hd_li:hover > a{color:#EE2255;}
#header .hd_div .hd_ul li.hd_li > a:after {content:"";width:0;height:2px;background:#EE2255;position:absolute;left:0;bottom:0;transition:all 0.5s;}
#header .hd_div .hd_ul li.hd_li.on > a:after,
#header .hd_div .hd_ul li.hd_li:hover > a:after{width:100%;transition:all 0.5s;}
@media only screen and (max-width:1350px){
    #header .hd_div .hd_textbox{width:100%;box-sizing:border-box;padding:0 30px 0;}
    #header .hd_div .hd_ul{margin-left:50px;}
}
@media only screen and (max-width:1300px){
    #header .hd_div .hd_ul li{padding:0 40px 0 0;}
}

/* 모바일 안보이게 */
#m_header {display:none}
@media screen and (max-width: 768px){

        
 
	/* pc 안보이게 */
	#header .hd_div .hd_ul {display:none;}
    #header .hd_div .hd_textbox .contact {display:none;}
	/* 모바일css */
	#m_header {display:block;}
    #m_header input[id="menuicon"] {display:none;}
    #m_header input[id="menuicon"] + label {display: block; right: 0; margin: 36px; width: 36px; height: 24px;position: fixed; cursor: pointer; z-index: 9999;}
	#m_header input[id="menuicon"] + label span {display:block;position:absolute;width:100%;height:5px;border-radius:30px;background:#fff;transition:all .35s;}
	#m_header input[id="menuicon"] + label span:nth-child(1) {top:0;}
	#m_header input[id="menuicon"] + label span:nth-child(2) {top:50%;transform:translateY(-50%);}
	#m_header input[id="menuicon"] + label span:nth-child(3) {bottom:0;}
	#m_header input[id="menuicon"]:checked + label {z-index:9999;}
    #m_header input[id="menuicon"]:checked + label span {background:#fff;}
    #m_header input[id="menuicon"]:checked + label span:nth-child(1) {top:50%;transform:translateY(-50%) rotate(45deg);}
    #m_header input[id="menuicon"]:checked + label span:nth-child(2) {opacity:0;}
    #m_header input[id="menuicon"]:checked + label span:nth-child(3) {bottom:50%;transform:translateY(50%) rotate(-45deg);}
    
   #m_header #slide_bg {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6); 
        opacity: 0; 
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s ease;
        z-index: 9997;
    }

    #m_header input[id="menuicon"]:checked + label + #slide_bg {
        opacity: 1; 
        visibility: visible; 
    }

    #m_header .sidebar { 
        box-shadow: 0 3px 16px 0 rgb(0 0 0 / 40%); 
        width: 40%; 
        min-width: 240px; 
        height: 100%;
        background-color: rgb(51, 51, 51); 
        position: fixed; 
        top: 0; 
        left: -300px;  
        z-index: 9998; 
        transition: all .35s; }
    #m_header input[id="menuicon"]:checked + label + #slide_bg + .sidebar {
        left: 0; 
    }

    #m_header .m_contact{display: inline-block;box-sizing:border-box;vertical-align: middle;    width: 100%;height:42px;line-height:42px;border-radius:9px;text-align: center;background:#EE2255;font-size:18px;color:#fff;font-weight:500;position: relative;transition:all 0.5s;margin-top:29px;}
    #m_header .m_contact:before{width:0;height:0;content:"";background:url('../img/send.png')no-repeat center;position: absolute; right:26px;top:15px;transition:all 0.5s;}
    #m_header .m_contact:hover{padding-right:28px;transition:all 0.5s;}
    #m_header .m_contact:hover:before{width:13px;height:13px;transition:all 0.5s;}
    #m_header .m_text{color:#fff;}
    #m_header .m_text:hover{color:#EE2255;}
    #m_header .m_text:after {content:"";width:0;height:2px;background:#EE2255;position:absolute;left:0;bottom:0;transition:all 0.5s;}
    #m_header .m_text:after{width:100%;transition:all 0.5s;}
    #m_header .portfolio > a:before{content: "";animation-duration: 2s;animation-name: point;animation-iteration-count: infinite;display: block;position: absolute;top:32px;right: 70px;width: 8px;height: 8px;border-radius: 50%;background: #EE2255;}
    
    #m_header .container{width: 100%;
        padding: 30px
    }
    #m_header input[id*="answer"]{
        display:none;
    }
    #m_header input[id*="answer"] + label {
        color:black;
        font-size: 22px;
        display: flex;
        line-height: 4em;
        justify-content: space-between;
        position: relative;
        cursor: pointer;
    }
    #m_header input[id*="answer"] + label i {
        position : absolute;
        top:50%;
        right:0;
        transform: translateY(-50%);
        transition: all .3s;
    }
    #m_header input[id*="answer"] + label + div{
       overflow: hidden;
       height: 0px;
       display: flex;
       align-items: center;
       transition: all .3s;
    }
    #m_header input[id*="answer"] + label + div p{
        display: inline-block;
        padding: 20px 0;
    }
    #m_header input[id*="answer"]:checked + label + div{
        height:150px;
        border-bottom:2px solid #d5d5d5;
    }
    #m_header input[id*="answer"]:checked + label i {
        transform: rotate(180deg);
    }
    .answer_menu li{
        padding:5px;
    }

}
@media screen and (max-width: 300px){
    #m_header div[class="sidebar"] {
        width: 185px;
    }
}