@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	" board｜errors｜goods｜service｜layout/board｜layout/display｜layout/goods "
	" layout/popup.html "

	위 폴더 및 페이지 커스텀 및 layout, navigation, button, company 관련 편집 css 파일 입니다.

	** header, footer, main 관련은 /css/skin.css 에 있습니다.

───────────────────────────────────────────────────────────*/








/*───────────────────────────────────────────────────────────
	
	common.css 커스텀 css 아래에 작성

───────────────────────────────────────────────────────────*/

/*───────────────────────────────────────────────────────────
	
	** navigation, button 관련 css 영역

───────────────────────────────────────────────────────────*/


/*───────────────────────────────────────────────────────────
	button common
───────────────────────────────────────────────────────────*/
	/** PC 일반 **/
		/* custom button type */
			/* button 공통 요소 */
            .btn, .btn_lg, .btn_sm, .btn_md {font-weight:700;border-style:solid !important;border-width:1px !important;padding:0;margin:0;text-indent:0;vertical-align:top !important;text-align:center;display:inline-block;box-sizing:border-box;cursor:pointer;box-shadow:none;outline:0 !important;}
			/* button 크기별 */
		.btn_wd {width:100%;height:50px;line-height:48px;font-size:17px;}
		.btn {width:108px;height:40px;line-height:38px;font-size:15px;}
		.btn_lg {width:92px;height:72px;line-height:70px;font-size:14px;}
		.btn_md {width:60px;line-height:28px;height:30px;font-size:13px;}
		.btn_sm {height:30px;line-height:28px;width:auto;padding:0 8px;font-size:inherit;border-color:#aaa;background-color:#aaa;color:#fff;}
			/* button 색상별 */
		.btn_point, .btn_point:hover {border-color:#222 !important;background-color:#222 !important;color:#fff !important;}
		.btn_basic, .btn_basic:hover {border-color:#777 !important;background-color:#777 !important;color:#fff !important;}
		.btn_default, .btn_default:hover {border-color:#aaa !important;background-color:#aaa !important;color:#fff !important;}
		.btn_info, .btn_info:hover {border-color:#d3d3d3 !important;background-color:#fff !important;color:#555 !important;}
		.btn_reset, .btn_reset:hover {border-color:#d3d3d3;background:#fff url(../images/common/icon_btn_reset.gif) no-repeat center !important;padding:0 10px 0 30px;color:#555;}
			/* button wrapper */
		.btn_wrap {margin:0 auto;padding:0;padding-top:2.8%;font-size:0;vertical-align:top;display:inline-block;}
		.btn_wrap.ta_center {width:100%;}
		.btn_wrap a + a,
		.btn_wrap button + button,
		.btn_wrap a + button,
		.btn_wrap button + a {margin-left:12px;vertical-align:top;}
		.btn_wrap button > a, .btn_wrap a > a{margin-left:0;}
		.view_btn .btn_wrap.ta_right {position:absolute;right:0px;top:0px;}

	@media only screen and (max-width:1200px) {
			/* button wrapper */
		.btn_wrap {padding-top:3.8%;}
	}
	@media only screen and (max-width:1024px) {
			/* button wrapper */
		.btn_wrap {padding-top:4.2%;}
		.view_btn .btn_wrap.ta_left {position:absolute;left:0px;top:0px;}
	}
	@media only screen and (max-width:860px) {

	}
	@media only screen and (max-width:767px) {
			/* button wrapper */
		.btn_wrap {padding-top:5.2%;}
	}
	@media only screen and (max-width:640px) {
			/* button wrapper */
		.btn_wrap {padding-top:5.8%;}
		.btn_wrap a + a,
		.btn_wrap button + button,
		.btn_wrap a + button,
		.btn_wrap button + a {margin-left:8px;}
	}
	@media only screen and (max-width:479px) {
			/* button 크기별 */
		.btn_wd {font-size:16px;}
		.btn {width:70px;font-size:13px;}
		.btn_lg {width:72px;font-size:13px;}
		.btn_md {width:60px;font-size:12px;}
		.btn_sm {padding:0 4px;font-size:12px;}
			/* button wrapper */
		.btn_wrap a + a,
		.btn_wrap button + button,
		.btn_wrap a + button,
		.btn_wrap button + a {margin-left:6px;}
		.view_btn .paging {width:100%;min-height:87px;}
		.view_btn .paging + .btn_wrap.ta_right{top:70px;}
	}
	@media only screen and (max-width:320px) {
			/* button 크기별 */
		.btn {width:68px;}
		.btn_md {width:44px;font-size:12px;}
	}


/*───────────────────────────────────────────────────────────
	sub_top common
───────────────────────────────────────────────────────────*/
    .sub_top {background:url('../images/sub/sub_visual.jpg') no-repeat center;background-size:cover;height:300px;position:relative;}
    .sub_top .sub_top_title {position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);padding:0 20px;box-sizing:border-box;}
    .sub_top .sub_top_title h2 {font-size:50px;color:#fff;font-weight:500;}


    @media only screen and (max-width:1217px) {
        .sub_top {height: clamp(200px, 25vw, 300px);}
        .sub_top .sub_top_title h2 {font-size:45px;}
    }
    @media only screen and (max-width:1023px) {
        .sub_top .sub_top_title h2 {font-size:40px;}
    }
    @media only screen and (max-width:860px) {
        .sub_top .sub_top_title h2 {font-size:35px;}
    }
    @media only screen and (max-width:767px) {
    }
    @media only screen and (max-width:640px) {
        .sub_top .sub_top_title h2 {font-size:30px;}
    }
    @media only screen and (max-width:479px) {
        .sub_top .sub_top_title h2 {font-size:25px;}
    }

/*───────────────────────────────────────────────────────────
	side box common
───────────────────────────────────────────────────────────*/
    #side_box {position:relative;z-index: 5;border-top:1px solid #ddd;}
    #side_box:after {content:'';display:block;width:100%;height:1px;background:#ddd;position:absolute;left:0;bottom:0;z-index:-1;}
    #side_box .sub_menu:after{content:"";display:block;clear:both;}
    #side_box .sub_menu h2 {font-size:0;float:left;}
    #side_box .sub_menu h2 a {display:inline-block;width:60px;height:60px;background:url('../images/sub/ico_navi_home.png') no-repeat 50% 50% #197036;font-size:0;}
    #side_box .sub_menu dl {float:left;font-size:0;vertical-align:top;height:60px;line-height:60px;box-sizing:border-box;text-align:left;font-size:0;font-weight:500;}
    #side_box .sub_menu dt,
    #side_box .sub_menu dd {display:inline-block;vertical-align:top;height:inherit;line-height:inherit;text-align: left;color:#333;box-sizing:border-box;border-right:1px solid #ddd;font-weight:inherit;width: 228px;font-size:15px;padding: 0 40px 0 20px;position: relative;}
    #side_box .sub_menu dt {cursor:pointer;}
    #side_box .sub_menu dt span{font-size:inherit;color:inherit;display: block;}
    #side_box .sub_menu dt span:after {content:'';display:block;width: 7px;height: 7px;border-top:1px solid #666;border-left:1px solid #666;position: absolute;right: 20px;top: 50%;margin-top: -12px;transform: rotate(225deg);transform-origin:bottom;transition: all .2s;}
    #side_box .sub_menu dt span.on:after {transform: rotate(45deg);border-top:1px solid #197036;border-left:1px solid #197036;margin-top: -2px;right: 25px;}
    #side_box .sub_menu dd {position:relative;z-index: 5;}
    #side_box .sub_menu dd strong {display:block;cursor:pointer;box-sizing:border-box;font-size:inherit;font-weight:inherit;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    #side_box .sub_menu dd strong:after {content:'';display:block;width: 7px;height: 7px;border-top:1px solid #666;border-left:1px solid #666;position: absolute;right: 20px;top: 50%;margin-top: -12px;transform: rotate(225deg);transform-origin:bottom;transition: all .2s;}
    #side_box .sub_menu dd strong.on:after {transform: rotate(45deg);border-top:1px solid #197036;border-left:1px solid #197036;margin-top: -2px;right: 25px;}
    #side_box .sub_menu dd strong img{padding-left:5px;}
    #side_box .sub_menu dt ul, #side_box .sub_menu dd ul {display:none;position:absolute;left: -1px;top: calc(100% - 1px);width: calc(100% + 2px);z-index:5;overflow:hidden;border: 1px solid #ddd;background:#fff;box-sizing: border-box;text-align: left;}
    #side_box .sub_menu dt ul li:nth-of-type(1), #side_box .sub_menu dd ul li:nth-of-type(1) {margin-top:10px;}
    #side_box .sub_menu dt ul li:last-of-type, #side_box .sub_menu dd ul li:last-of-type {margin-bottom:10px;}
    #side_box .sub_menu dt ul li, #side_box .sub_menu dd ul li {background:#fff;border-top:0;font-weight: 400;font-size: 15px;color: #333;height: 2.8em;line-height: 2.8;}
    #side_box .sub_menu dd ul li + li {}
    #side_box .sub_menu dt ul li a, #side_box .sub_menu dd ul li a {padding: 0 20px;display:inline-block;vertical-align:top;box-sizing:border-box;text-align:center;font-weight:inherit;font-size: 15px;color:inherit;width:100%;text-align: left;}
    #side_box .sub_menu dt ul li.on, #side_box .sub_menu dt ul li:hover, #side_box .sub_menu dd ul li.on, #side_box .sub_menu dd ul li:hover {color:#197036;font-weight:600;}


    @media only screen and (max-width:1217px) {
        #side_box .sub_menu {width:100%;}
    }

    @media only screen and (max-width:1023px) {
    }

    @media only screen and (max-width:860px) {
        #side_box .sub_menu h2 a {width:50px;height:50px;background-size:auto 16px;}
        #side_box .sub_menu dl {line-height:50px;height:50px;width: calc(100% - 50px);}
        #side_box .sub_menu dt,
        #side_box .sub_menu dd {width: 40%;font-size: 14px;}
        #side_box .sub_menu dd {padding:0 18px;}
        #side_box .sub_menu dd ul li a {font-size:14px;padding:0 18px;}
    }

    @media only screen and (max-width:767px) {
    }

    @media only screen and (max-width:640px) {
        #side_box{border-top:none;}
        #side_box .sub_menu dt,
        #side_box .sub_menu dd {width:50%;}
    }

    @media only screen and (max-width:479px) {
        #side_box .sub_menu h2 a {width:40px;height:40px;}
        #side_box .sub_menu dl {line-height:40px;height:40px;width:calc(100% - 40px);}
        #side_box .sub_menu dt {display:none;}
        #side_box .sub_menu dd {padding:0 14px;width:100%;font-size: 13px;border-right: 0;}
        #side_box .sub_menu dd ul li a {font-size:13px;line-height:2.3;padding:0 18px;}
    }