/****** 공통 영역 ******/
/* 공통 클래스, 레이아웃 */
.wrap{width: 100%;min-width: 1200px;}
.center{width: 1200px;margin: 0 auto;}
.sup_center{width: 900px;margin: 0 auto;}
.alert{position: absolute;top: -28px;width: 100%;font-size: 14px;font-weight: bold;color: #f44381;text-align: center;}
.alert:before{content: "";display: inline-block;width: 18px;height: 11px;background: url(../images/common/icon_alert.png) no-repeat left bottom;}
.pc_br{display:block;}

/* 버튼 */
/* 버튼 공통 클래스는 정리가 필요함(지우) */
/* 설정 버튼 */
.btn_full{width: 220px;height: 28px;border: 1px solid #e7e7e7;border-radius: 5px;background: linear-gradient(#fff, #f9f9f9);;font-size: 13px;color: #aaa;}
/* 바로가기 버튼 */
.btn_more{position: absolute;top:30px;right: 30px;padding-right: 10px;background: url(../images/common/more_arrow.png) no-repeat center right;font-size: 13px;color: #28aacf;letter-spacing: -1px;}
/* 화살표 그라데이션 버튼 */
.btn_grd{display: block;width: 170px;height: 44px;margin-top: 20px;padding: 12px 15px;background: url(../images/bg/bg_btn_more.jpg);color: white;text-align: left;}
/* 칼라 버튼(기본) */
.btn{display: block;width: 200px;height: 35px;margin: 0 auto;padding: 0;background: rgb(96,74,25);font-size: 14px;color: white;text-align: center;line-height:1;}
.btn:hover { background: rgb(145,114,46); }
/* 취소 버튼 */
.btn_cancel{background: #aaa;}
/* input 관련 버튼 */
.btn_input{display: block;width: 100px;height: 28px;padding: 7px;background: #555;font-size: 13px;color: white;text-align: center;cursor: pointer;}
/* 선택 버튼 */
.choice_btn{font-size: 15px; font-weight: bold; text-align: center; display: inline-block; background-color: #28aacf; color: #fff; border-radius: 4px; padding: 5px 10px;}


/* 체크박스 */
input[type="checkbox"] { /*display:none;*/ }
input[type="checkbox"] + label span { display:inline-block; width:18px; height:18px; margin:-2px 10px 0 0; vertical-align:middle; background:url('../images/common/ckbx.png') no-repeat; cursor:pointer; }
input[type="checkbox"]:checked + label span { background:url('../images/common/ckbx_ck.png') no-repeat; }
/* input focus */
input:focus{outline: 1px solid #28aacf}
/* input placeholder */
input::placeholder, textarea::placeholder{color:#aaa;}
/* 라디오박스 */
input[type="radio"] { display:none; }
input[type="radio"] + label { color:#f2f2f2; font-family:'Noto Sans KR', sans-serif; }
input[type="radio"] + label span { display:inline-block; width:20px; height:20px; margin:-1px auto; vertical-align:middle; background:url('../images/common/rdbx.png') no-repeat; cursor:pointer; }
input[type="radio"]:checked + label span { background:url('../images/common/rdbx_ck.png') no-repeat; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{background-color:#f9f9f9 !important;}



/****** 헤더 영역 ******/
html,body{ overflow-x: hidden; }
.header_sub{ width: 100%; height: auto; background-color: rgb(255,255,255); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
#header{ width: 100%; display: flex; align-items: center; justify-content: center; flex-flow: row wrap; }
.nav_sub{ width: 100%; height: auto; background-color: rgb(245,245,245); }
.nav{ width: 100%; height: auto; max-width: 1200px; padding: 20px; margin: auto; display: flex; justify-content: flex-end; align-items: center; flex-flow: row wrap; }
.nav_area{ width: 100%; max-width: 1200px; height: 120px; padding: 0 20px; position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
.logo_area{ width: auto; height: auto; }
.logo{ width: 100%; max-width: 394px; min-width: 394px; cursor: pointer; transition: all 0.2s ease-in-out; cursor: pointer; }
.nav a{ color: rgb(153,153,153); font-size: 13px; transition: all 0.2s ease-in-out; cursor: pointer; }
.nav a:hover{ color: rgb(102,102,102); }
.nav .bar_line{ width: 1px; height: 15px; margin: 0 8px; background-color: rgb(153,153,153); }
.nav .space{ width: 25px; }
.menu_sub{ width: 100%; height: auto; margin-left: 4.5%; }
.menu{ width: 100%; height: 75px; max-width: 1200px; margin: auto; display: flex; justify-content: space-around; align-items: center; flex-flow: row nowrap; }
.menu li{ width: auto; padding: 10px 25px; border-radius: 5px; position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; color: rgb(51,51,51); transition: all 0.2s ease-in-out; }
.menu li:hover{ background-color: rgb(238,238,238); color: rgb(35,82,124); }
.menu li a{ width: auto; font-size: 18px; font-weight: 100; cursor: pointer; display: inline; text-align: center; }
.menu_hamburger{ display: none; }


/* 단일 서브 메뉴 */
.sub_menu{ display: none; width: 100%; position: absolute; top: 75px; left:0; z-index: 1000; background-color: rgb(7,24,42); }
.sub_menu li{ height: 40px; margin: 0; padding: 5px 0; font-weight: normal; transition: all 0.2s ease-in-out; font-size: 16px; display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid rgb(81,81,81); color: rgb(255,255,255); }
.sub_menu li:last-of-type{ border: 0; }
.sub_menu li:hover{ font-weight: bold; color: rgb(195,145,92); background-color: rgb(240,240,240); }

@media all and (max-width:1200px){
    .logo{ max-width: 350px; min-width: 350px; }
}
@media all and (max-width:1180px){
    .logo{ max-width: 310px; min-width: 310px; }
    .menu li{ padding: 10px 15px; }
}
@media all and (max-width:960px){

    .logo{ max-width: 394px; min-width: 394px; }
    .nav_area{ height: auto; padding: 20px; display: flex; flex-flow: row wrap; position: relative; }

    .menu_sub{ margin-top: 20px; margin-left: 0; display: none; }
    .menu{ width: 100%; height: auto; transition: all 0.5s ease-in-out; flex-flow: row wrap; padding: 0; }
    .menu li{ width: 100%; padding: 0; border-radius: 0; font-size: 16px; flex-flow: row wrap; cursor: pointer; }
    .menu li a{ width: 100%; padding: 16px 0; margin: 0 30px; text-align: left; font-size: 18px; }

    .menu_hamburger{ width: 35px; height: 25px; position: relative; cursor: pointer; top: 0; right: 0; display: block; }
    .menu_hamburger div{ width: 100%; height: 3px; background: rgb(195,145,92); position: absolute; left: 0; transition: all 0.3s ease-in-out; }
    .menu_hamburger div:nth-of-type(1){ top: 0; }
    .menu_hamburger div:nth-of-type(2){ top: 50%; right:0; left: 0; margin: auto; }
    .menu_hamburger div:nth-of-type(3){ top: 100%; }


    .sub_menu{ display: none; width: 100%; position: static; top:49px; left:0; z-index: 1000; background-color: transparent; box-shadow: 1px 1px 3px 1px transparent; }
    .sub_menu li{ height: 60px; margin: 0; padding: 14px 0; font-weight: normal; background: rgb(195,145,92); border-bottom: 0; }
    .sub_menu li:hover{ color: rgb(195,145,92); background-color: rgb(240,240,240); font-weight: normal; }


}
@media all and (max-width:550px){
    .logo{ max-width: 300px; min-width: 300px; }
}
@media all and (max-width:480px){

    .logo{ max-width: 260px; min-width: 260px; }

    .nav a{ margin-left: 4px; }
    .nav .bar_line{ display: none; }
    .nav .space{ width: 10px; }

}
@media all and (max-width:370px){
    .logo{ max-width: 220px; min-width: 220px; }
}


/****** 서브 페이지 공통 ******/
.m_sub_menu_area{ height: 0; overflow: hidden; transition: all 0.2s ease-in-out; }

.sub_title_area{ width: 100%; height: 250px; background-position: 10% center; background-repeat: no-repeat; background-size: cover; display: flex; flex-flow: column nowrap; justify-content: flex-end; align-items: center; background-color: rgb(232,247,255); transition: all 0.2s ease-in-out; }
.sub_title_area>h5{ width: 100%; max-width: 1200px; padding: 0 20px; text-align: right; font-size: 18px; color: rgb(255,255,255); font-weight: normal; text-shadow: 2px 2px 3px rgba(0,0,0,0.5); transition: all 0.2s ease-in-out; }
.sub_title_area>h4{ width: 100%; max-width: 1200px; margin-bottom: 40px; padding: 0 20px; text-align: right; font-size: 25px; color: rgb(255,255,255); font-weight: bold; text-shadow: 2px 2px 3px rgba(0,0,0,0.5); transition: all 0.2s ease-in-out; }
.sub_title_area>h4>span.lf{ display: none; }

.subpage_content{ width: 100%; max-width: 1200px; margin: 50px auto 0; padding: 0 20px; display: flex; flex-flow: row nowrap; justify-content: space-between; transition: all 0.2s ease-in-out; }
.subpage_content>.pc_aside{ width: 210px; min-width: 210px; margin-right: 60px; overflow: hidden; transition: all 0.2s ease-in-out; }
.subpage_content>.pc_aside>dl{ width: 210px; height: auto; transition: all 0.2s ease-in-out; }
.subpage_content>.pc_aside>dl>dt{ width: 100%; height: 170px; margin-top: 10px; border-top-left-radius: 25px; border-top-right-radius: 25px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; font-weight: normal; font-size: 25px; color: rgb(255,255,255); background-color: rgb(0,137,208); position: relative; transition: all 0.2s ease-in-out; }
.subpage_content>.pc_aside>dl>dt>div{ width: 40px; height: 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; position: absolute; top: -10px; background-color: rgb(0,137,208); transition: all 0.2s ease-in-out; }
.subpage_content>.pc_aside>dl>dt>div:nth-of-type(1){ left: 40px; }
.subpage_content>.pc_aside>dl>dt>div:nth-of-type(2){ right: 40px; }
.subpage_content>.pc_aside>dl>dd{ width: 100%; height: 50px; padding-left: 20px; display: flex; flex-flow: row nowrap; align-items: center; color: rgb(102,102,102); font-size: 16px; position: relative; transition: all 0.12s ease-in-out; cursor: pointer; }
.subpage_content>.pc_aside>dl>dd:hover{ background-color: rgb(128,124,115); color: rgb(255,255,255); }
.subpage_content>.pc_aside>dl>dd>i{ height: 100%; position: absolute; top:0; right: 20px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.subpage_content>.pc_aside>dl>div{ width: 100%; height: 45px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; background-color: rgb(0,137,208); transition: all 0.2s ease-in-out; }
.subpage_content>.pc_aside>ul{ width: 100%; height: auto; margin-top: 35px; padding-bottom: 15px; border-bottom: 1px solid rgb(204,204,204); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; transition: all 0.2s ease-in-out; }
.subpage_content>.pc_aside>ul>li:nth-of-type(1){ width: 51px; height: 51px; transition: all 0.2s ease-in-out; }
.subpage_content>.pc_aside>ul>li:nth-of-type(2){ width: calc(100% - 60px); height: auto; transition: all 0.2s ease-in-out; }
.subpage_content>.pc_aside>ul>li:nth-of-type(2)>h5{ width: 100%; color: rgb(237,28,36); font-size: 25px; font-weight: bold; transition: all 0.2s ease-in-out; }
.subpage_content>.pc_aside>ul>li:nth-of-type(2)>h6{ width: 100%; color: rgb(102,102,102); font-size: 15px; font-weight: bold; transition: all 0.2s ease-in-out; }
.subpage_content>.pc_aside>a{ width: auto; margin: 10px auto 0; display: block; font-size: 30px; color: rgb(51,51,51); font-weight: bold; text-align: center; transition: all 0.2s ease-in-out; cursor: pointer; }
.subpage_content>.pc_aside>a:hover{ color: rgb(30,42,100); }

.content_area{ width: 100%; height: auto; }
.content_area>.content_title_area{ width: 100%; margin-bottom: 30px; padding: 30px 0; border-bottom: 1px solid rgb(204,204,204); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-end; }
.content_area>.content_title_area>dt{ font-size: 40px; color: rgb(51,51,51); font-weight: bold; display: flex; flex-flow: row nowrap; align-items: baseline; transition: all 0.2s ease-in-out; }
.content_area>.content_title_area>dd{ font-size: 12px; color: rgb(102,102,102); }
.content_area>.content_title_area>dd>span{ cursor: pointer; }
.content_area>.content_title_area>dd>span:last-of-type{ color: rgb(0,137,208); font-weight: bold; }
.content_area>.content_title_area>dd>span:hover{ font-weight: bold; }
.content_area>.content_title_area>dd>i{ margin: 0 3px; }

.product_sub_m{ width: 90%; margin: 50px auto 20px; display: flex; flex-flow: row wrap; border-top: 1px solid rgb(204,204,204); border-left: 1px solid rgb(204,204,204); }
.product_sub_m>li{ width: 100%; height: auto; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; }
.product_sub_m>li>p{ width: 100%; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; border-right: 1px solid rgb(204,204,204); border-bottom: 1px solid rgb(204,204,204); cursor: pointer; }

/* 컨텐츠 영역 */
#container_wr{ width: 100%; height: auto; }

@media (max-width:960px){

    /****** 서브 페이지 공통 ******/
    .m_sub_menu_area{ width: 90%; height: auto; margin: 50px auto 0; display: flex; flex-flow: column nowrap; }
    .m_sub_menu_area>dt{ width: 100%; height: 120px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background-color: rgb(0,137,208); color: rgb(255,255,255); font-size: 24px; font-weight: normal; transition: all 0.2s ease-in-out; }
    .m_sub_menu_area>dd{ width: 100%; height: 40px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; color: rgb(51,51,51); font-size: 16px; font-weight: normal; transition: all 0.2s ease-in-out; cursor: pointer; }
    .m_sub_menu_area>dd:hover{ background-color: rgb(128,124,115); color: rgb(255,255,255); }

    .sub_title_area{ height: 180px; font-size: 26px; }
    .sub_title_area>h5{ font-size: 16px; }
    .sub_title_area>h4{ font-size: 20px; }

    .subpage_content{ margin-top: 0; }
    .subpage_content>.pc_aside{ width: 0; min-width: 0; height: 0; margin-right: 0; }

    .content_area>.content_title_area{ flex-flow: row wrap; }
    .content_area>.content_title_area>dt{ width: 100%; font-size: 35px; }
    .content_area>.content_title_area>dd{ width: 100%; }
}


@media (max-width:480px){

    /****** 서브 페이지 공통 ******/
    .sub_title_area>h5{ font-size: 14px; }
    .sub_title_area>h4{ margin: 10px 0 25px; }
    .sub_title_area>h4>span.space{ display: none; }
    .sub_title_area>h4>span.lf{ display: inline; }

    .content_area>.content_title_area>dt{ font-size: 30px; }

}




/* 푸터 영역 */
.footer_sub{ width: 100%; height: auto; margin-top: 100px; background-color: rgb(51,51,51); color: rgb(170,170,170); transition: all 0.2s ease-in-out; }
.footer{ width: 100%; margin: auto; padding: 20px; max-width: 1200px; display: flex; align-items: flex-start; flex-flow: row nowrap; font-size: 14px; transition: all 0.2s ease-in-out; }
.footer>img{ width: 238px; height: 37px; min-width: 238px; margin-right: 50px; transition: all 0.2s ease-in-out; }
.footer>ul{ width: 100%; display: flex; flex-flow: column nowrap; transition: all 0.2s ease-in-out; }
.footer>ul>li{ width: 100%; height: auto; margin: 3px 0; display: flex; flex-flow: row wrap; align-items: center; transition: all 0.2s ease-in-out; }
.footer>ul>li>p{ width: auto; height: auto; display: flex; flex-flow: row nowrap; transition: all 0.2s ease-in-out; }
.footer>ul>li:nth-of-type(3)>p:nth-of-type(1){ margin-right: 30px; }
.footer>ul>li>p>span{ transition: all 0.2s ease-in-out; }
.footer>ul>li>p>span:nth-of-type(2){ margin: 0 4px; }
.footer>ul>li>p>span.info_separate{ display: flex; flex-flow: row wrap; }
.footer>ul>li>p>span.info_separate>span{ margin-right: 4px; }
.footer>ul>li:nth-of-type(2)>p:nth-of-type(1)>span:nth-of-type(3):hover{ color: rgb(200,200,200); }
.footer>ul>li>p>a{ transition: all 0.2s ease-in-out; cursor: pointer; }
.footer>ul>li>p>a:hover{ color: rgb(200,200,200); }
.footer>ul>li>a{ color: rgb(220,220,220); transition: all 0.2s ease-in-out; cursor: pointer; }
.footer>ul>li>a:hover{ color: rgb(255,255,255); }
.footer>ul>li>figure{ width: 1px; height: 15px; margin: 0 8px; background-color: rgb(170,170,170); transition: all 0.2s ease-in-out; }


@media all and (max-width:960px){
    .footer_sub{ margin-top: 70px; }
    .footer{ flex-flow: row wrap; }
    .footer>img{ margin: 0 0 20px 0; }
    .footer>ul>li{ margin: 1px 0; }
}
@media (max-width:670px){
    .footer_sub{ margin-top: 40px; }
    .footer>ul>li{ margin: 0; }
    .footer>ul>li.info_area>p{ width: 100%; margin: 2px 0; }
    .footer>ul>li.info_area>p>span:nth-of-type(1){ min-width: 120px; }
    .footer>ul>li.info_area>p>span:nth-of-type(2){ display: none; }
    .footer>ul>li:nth-of-type(3)>p:nth-of-type(1){ width: 100%; margin: 20px 0 5px; flex-flow: row wrap; }
    .footer>ul>li>figure{ display: none; }
}