/*
 * Title : Blog Theme CSS
 * Writer : louis ryu (rsg)
 * RegDate : 20191129
 * UpDate :
 * */

/*공통*/
body, html{
    font-size: 11px;
    font-weight: lighter;
    font-family: 'Noto Sans CJK KR', sans-serif;}
.wrap_site{
    min-height: 450px;
}
.bg000000{background-color: #000000;}
.bgF3F3F3{background-color: #f3f3f3;}
.colorFFFFFF{color: #ffffff;}
.colorC0C0C0{color: #c0c0c0;}
.colorD0D0D0{color: #d0d0d0;}
.colorA0A0A0{color: #a0a0a0;}
.color7DC3FF{color: #7dc3ff;}
.color7DAAFF{color: #7daaff;}
.color2D2D2D{color: #2d2d2d;}
.color656E80{color: #656e80;}
.color249AFF{color: #249aff;}

/*스타일 - 리스트*/
.list_style_0 > li{border-bottom: 1px solid #e6e6e6;}
.list_style_0 > li:last-child{border-bottom: none;}

.list_style_1 > li{list-style: none;margin-bottom:2px;}
.list_style_1 > li .text_wrap{width: 45px;
    text-align: center;
    display: inline-block;}
.list_style_1 > li .linear_bar{
    width: calc(100% - 60px);
    background: linear-gradient(#75bfff, #4dacff);
    color: #fff;border-radius: 4px;border: 1px solid #58aaff;
padding:1px 3px;display: inline-block;}
.list_style_1 > li .linear_bar.w75p{width: calc(75% - 45px);}
.list_style_1 > li .linear_bar.w70p{width: calc(70% - 45px);}
.list_style_1 > li .linear_bar.w65p{width: calc(65% - 45px);}
.list_style_1 > li .linear_bar.w30p{width: calc(30% - 45px);}
.list_style_1 > li:last-child{
    margin-bottom: 0;
}

.list_style_2 > li .left_wrap{display: table-cell;border-right: 3px double #7dc3ff;border-left: 1px solid #c0c0c0;}
.list_style_2 > li .text_wrap{display: table-cell;padding-left: 10px;}

/*스타일 - 그리드*/
.grid_style_0 .grid_object {
    float: left;
}
.grid_style_0 .grid_object .img_wrap{
    height: 110px;
    overflow: hidden;
}
.grid_style_0 .grid_object .title_wrap{
    padding-top: 6px;
}

.grid_style_1{
    display: table;
}
.grid_style_1 .grid_object{
    display: table-cell;
}

/*스타일 - 테이블*/
.table_style_0 {display: table;}
.table_style_0 .cell_wrap{display: table-cell;box-sizing: border-box;}
.table_style_0 .cell_wrap.left_side{padding-right: 10px;}
.table_style_0 .wrap_img img{border: 1px solid #c0c0c0;}

/*스타일 - 버튼*/

.btn_style_1{
    padding: 3px 14px;
    display: inline-block;
    border-radius: 3px;
    background-color: #656E80;
    color: #fff;
}

/*프레임 - 아이콘 메뉴*/
/*
.wrap_btn_menu{
    display: none;
    width: 0;
    height: 0;
    overflow: visible;
}
*/
.btn_mobile_menu {
    background-color: transparent;
    position: absolute;
    z-index: 1;
    padding: 0 9px;
}
.btn_mobile_menu.active{

}
.btn_mobile_menu .icon_hamburger_menu{
    display: block;
    padding: 7px;
    width: 40px;
    height: 40px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}
.btn_mobile_menu.active .icon_hamburger_menu span{background-color: transparent;}
.btn_mobile_menu .icon_hamburger_menu span{
    height: 1px;
    background-color: #ffffff;
    display: block;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
.btn_mobile_menu .icon_hamburger_menu span:nth-child(2){
    top: 6px;
}
.btn_mobile_menu .icon_hamburger_menu span:nth-child(3){
    top: 5px;
    opacity: 0;
    height: 0;
    width: 0;
}
.btn_mobile_menu .icon_hamburger_menu span:nth-child(4){
    top: 12px;
}
.btn_mobile_menu .icon_hamburger_menu span:last-child{
    margin-bottom: 0;
}
.btn_mobile_menu.active .icon_hamburger_menu span:nth-child(1){
    top: 18px;
    width: 0%;
    left: 50%;
}
.btn_mobile_menu.active .icon_hamburger_menu span:nth-child(2){
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.btn_mobile_menu.active .icon_hamburger_menu span:nth-child(3){
    height: 1px;
    width: 100%;
    opacity: 1;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.btn_mobile_menu.active .icon_hamburger_menu span:nth-child(4){
    top: 18px;
    width: 0%;
    left: 50%;
}

/*프레임 - 왼쪽 판넬*/
.wrap_left_panel{
    width: 60px;
    height: 100%;
    position: fixed;
    float: left;
    background: url("/images/bg200325pm0545.jpg") 41% 0%;
    /*background: url("/images/bg200325pm0419.jpg") 25% 0%;*/
    /*background: url("/images/bg191129.jpg") 25% 0%;*/
    /*background: url("/images/bg200325pm04.jpg") 56% 0%;*/
    /*background-size: 1500px;*/
}
.wrap_left_panel.active{
    width: auto;
}
.wrap_left_panel.active .left_panel{
    display: block;
}
.wrap_left_panel .left_panel{
    display: none;
}
.left_panel{
    width: 350px;
    padding-left: 35px;
    padding-right: 35px;
    margin: 0 auto;
    padding-top: 15%;
    position: relative;
    z-index: 2;
}
.wrap_left_panel .bg000000.bg_shadow{
    opacity: 0.7;
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    top: 0;
}
/*
.wrap_left_panel.active{
    width: 100%;
    position: fixed;
    z-index: 100;
    overflow-y: scroll;
    max-height: 2500px;
    transition: max-height 0.25s ease-in;
    opacity: 1;
}
.wrap_left_panel.active .left_panel{
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}
.left_panel{
    width: 350px;
    padding-left: 35px;
    padding-right: 35px;
    margin: 0 auto;
    padding-top: 110px;
    position: relative;
    z-index: 2;
}
.wrap_left_panel .bg000000.bg_shadow{
    opacity: 0.7;
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    top: 0;
}
*/

/*프레임 - 프로필*/
.left_panel .wrap_profile_img{
    width: 60px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}
.left_panel .profile_img{
    width: 100%;
}
.left_panel .profile_nickname {color: #ffffff;
    padding-top: 15px;
    padding-bottom: 15px;}
.left_panel .profile_text {color: #a0a0a0;}
.left_panel .wrap_profile_link {color: #a0a0a0;
    padding-top: 10px;
    padding-bottom: 10px;}

/*프레임 - 검색*/
.wrap_search{
    margin-top: 45px;
}
.left_panel .wrap_search .img_post_search{
    float: left;
    padding-right: 8px;}

/*프레임 - 메뉴*/
.left_panel .wrap_menu{
    background-color: #00000040;
    border-radius: 5px;
    color: #c0c0c0;
}
.left_panel .list_menu{
    list-style: none;
}
.left_panel .list_sub_menu{
    list-style: none;
    overflow: hidden;
}
.left_panel .list_menu > li , .left_panel .list_sub_menu > li {
    display: block;
}
.left_panel .list_sub_menu > li{
    background: url("/images/pat_verti_cccccc191202.png") repeat-y;
}
.left_panel .list_sub_menu.lineheight26 > li:last-child{
    background: url("/images/pat_verti_cccccc191202.png") no-repeat 0px 0px,
    url("/images/pat_verti_cccccc191202.png") no-repeat 0px 2px,
    url("/images/pat_verti_cccccc191202.png") no-repeat 0px 4px,
    url("/images/pat_verti_cccccc191202.png") no-repeat 0px 6px,
    url("/images/pat_verti_cccccc191202.png") no-repeat 0px 8px,
    url("/images/pat_verti_cccccc191202.png") no-repeat 0px 10px,
    url("/images/pat_verti_cccccc191202.png") no-repeat 0px 12px;
}
.left_panel .list_sub_menu.lineheight20 > li:last-child{
    background: url("/images/pat_verti_cccccc191202.png") no-repeat 0px 0px,
    url("/images/pat_verti_cccccc191202.png") no-repeat 0px 2px,
    url("/images/pat_verti_cccccc191202.png") no-repeat 0px 4px,
    url("/images/pat_verti_cccccc191202.png") no-repeat 0px 6px,
    url("/images/pat_verti_cccccc191202.png") no-repeat 0px 8px,
    url("/images/pat_verti_cccccc191202.png") no-repeat 0px 10px;
}
.left_panel .list_sub_menu > li.list_empty:before{
    background: transparent !important;
}
.wrap_left_panel .left_panel .list_sub_menu.lineheight26 > li:before{
    position: absolute;
    content: '';
    height: 24px;
    width: 12px;
    display: block;
    background: url("/images/pat_hori_cccccc191202.png") repeat-x 0px 14px;
}
.wrap_left_panel .left_panel .active.list_sub_menu.lineheight26 > li:before{
    display: none;
}
.wrap_left_panel .left_panel .list_sub_menu.lineheight20 > li:before{
    position: absolute;
    content: '';
    display: block;
    height: 24px;
    width: 12px;
    background: url("/images/pat_hori_cccccc191202.png") repeat-x 1px 11px;
}
.wrap_left_panel .left_panel .list_sub_menu.active li:before{
    display: none;
}
button.btn_img_menu_control{
    display: inline-block;
    vertical-align: middle;
    background-color: transparent;
}
button.btn_img_menu_control .img_icon_expanse{display: block;}
button.btn_img_menu_control .img_icon_reduce{display: none;}
button.btn_img_menu_control.active .img_icon_expanse{display: none;}
button.btn_img_menu_control.active .img_icon_reduce{display: block;}
.list_menu .icon_short_line{
    color: #ffffff;
    width: 16px;
    margin-left: 12px;
    height: 1px;
    vertical-align: middle;
    text-align: center;
    float: left;
}
.list_menu .link_menu{
    display: inline-block;
    vertical-align: middle;
}

/*프레임 - 카운터*/
.wrap_counter{
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 2;
}

/*프레임 - 오른쪽 판넬*/


/*메인*/


/*서브 - 게시판*/
.border_top_colorE6E6E6{
    border-top: 1px solid #e6e6e6;
}
.border_bottom_colorE6E6E6{
    border-bottom: 1px solid #e6e6e6;
}
.wrap_post_body .post_tag{
    background-color: #e6e6e6;
    border-radius: 5px;
}
.wrap_post{
    float: left;
}
.recommend_panel{
    float: left;
    width: 300px;
}

/*서브 - 게시판 본문*/
/*.post_contents h1{
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1rem;
    padding-top: 2%;
    padding-bottom: 2%;
}*/
.post_contents h2{
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 3rem;
    border-left: 8px #7dc3ff solid;
    padding-left: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
}
.post_contents h3{
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.8rem;
    padding: 3px 0;
}

.post_contents img{
    max-width: 100%;
    display: block;
}
/*
.post_contents img{
    max-width: 100%;
    max-height: 550px;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
    margin: 0 auto;
    display: block;
}
*/
.post_contents p{
    padding-top: 2%;
    padding-bottom: 2%;
}
.post_contents a{
    text-decoration: underline;
}
/*서브 - 게시판 덧글*/


/*서브 - 게시판 하단 추천*/
.wrap_post_list_bottom{
    float: left;
}
.wrap_post_list_bottom .post_list_bottom{
    border-right: 1px solid #e6e6e6;
    float: left;
}
.wrap_post_list_bottom .post_list_bottom:last-child{
    border-right: none;
}
.wrap_post_list_bottom .post_list_bottom .list_post{
    list-style: none;
}
.btn_more{
    float: right;
}


/*프레임 - 푸터*/
.footer{
    border-top: 1px solid #e6e6e6;
    float: left;
}


/*add 20210422*/

/* color_style */
.color_249AFF{color: #249aff;}
.color_2D2D2D{color: #2D2D2D;}

/* box style */
.box_style0001{border: 1px solid #e6e6e6;overflow: hidden;}
.box_style0001 , .box_style0001 table td , .box_style0001 table th{color: #f0f0f0;}
.box_style0001 table tr td:first-child{width: 35px;}
.box_style0001 table tr td:last-child{width: 25px;}

.box_style0002{border: 1px solid #e6e6e6;overflow: hidden;}
.box_style0002 , .box_style0002 table td , .box_style0002 table th{color: #f0f0f0;font-size: 2.2rem;line-height: 3.8rem;}
.box_style0002 table tr td:last-child{width: 25px;}

.box_style0003{min-height: 550px;width: 100%;font-size: 1.3rem;padding-top: 0px;padding-bottom: 0px;padding: 0 40px;}

.box_style0004{width: calc(100% - 60px);left: 60px;position: relative;float: left;}
.wrap_left_panel.active + .box_style0004{width: calc(100% - 400px);left: 400px;}

.box_style0005{padding: 10px;padding-bottom: 0;text-align: right;}

.box_style0006{max-width: 300px;margin-bottom: 20px;margin-left: auto;margin-right: auto;}

.box_style0007{max-width: 250px;margin: 0 auto;}

.box_style0008{max-width: 500px;margin: 0 auto;}

.box_style0009{border-top: 1px solid #e6e6e6;padding: 15px 0;}

.box_style0010{padding: 15px 0;line-height: 2.0rem;font-size: 1.3rem;font-weight: 300;}

.box_style0011{padding: 2% 0;text-align: right;}

.box_style0012{line-height: 1.3; border: 1px solid #909090;position: absolute; bottom: 0%; background-color: rgb(255 255 255 / 0.7);padding:3px;text-align: right;}
.img_style0002 + .box_style0012{right: 0%;}
.img_style0003 + .box_style0012{left: 0%;}

.box_style0013{max-height: 500px; overflow: hidden;position: relative;border: 1px solid #d0d0d0;border-radius: 5px;margin: 0 auto;cursor: pointer;}

/* contents style */
.list_style0001{list-style: none;display: inline-block;vertical-align: middle;text-align: center;line-height: 1rem;}
.list_style0001 > li > button{padding: 4px 8px;background-color: #efefef;border: 1px solid #c0c0c0;}
.list_style0001 > li > button:hover{background-color: #f8f8f8;}

.list_style0002{list-style: none;}
.list_style0002 > li{border-bottom: 1px solid #e6e6e6;padding: calc(10px + 1%) 0;}
.list_style0002 > li:last-child{border-bottom: none;}
.list_style0002 > li > a{padding: 2px 0;}

.list_style0003{list-style: none;}
.list_style0003 > li{max-width: 500px;margin: 0 auto;}
.list_style0003 > li > div{vertical-align: top;}
.list_style0003 > li > div:nth-child(1){width: 100%;display: inline-block;text-align: center;}
.list_style0003 > li > div:nth-child(1) > img { vertical-align: top;}
.list_style0003 > li > div:nth-child(2){width: 100%;display: inline-block;}
.list_style0003 > li > div:nth-child(2) > h2{padding-top: 15px;}
.list_style0003 > li > div:nth-child(2) > h3{padding: 5px 0;}
.list_style0003 > li > div:nth-child(2) hr{margin:10px 0;padding: 0;border: none;border-top: 1px solid #333;}
.list_style0003 > li > div:nth-child(2) > h2 , .list_style0003 > li > div:nth-child(2) > h3 {text-align: center;}

.list_style0004{padding: 0 15px;display: block;}
.list_style0004 , .list_style0004 > li{list-style: none;}
.list_style0004 > li:before{content: "·";font-size: 2.4rem;vertical-align: middle;position: relative;left: -5px;top: -3px;}
.list_style0004 > li a{text-decoration: underline;}

/* text style */
.h_style0001{font-size: 3.3rem;line-height: 4.5rem;vertical-align: middle;display: inline-block;}
.h_style0002{font-size: 2.0rem;line-height: 2.0rem;font-weight: 300;padding-bottom: 10px;margin-left: -2px;}
.h_style0003{font-size: 2.5rem;line-height: 4.5rem;font-weight: 300;vertical-align: middle;display: inline-block;padding-left: 10px;}
.h_style0004{font-family: 'Iropke Batang';line-height: 4.1rem;font-size: 4.1rem;padding: 15px 0;font-weight: 300;}
.h_style0005{border-left: 4px solid #7daaff;margin-bottom: 29px;line-height: 3.0rem;padding-left: 15px;}

.p_style0001{color: #c0c0c0;display: inline-block;margin-right: 15px;font-size: 1.2rem;line-height: 2.0rem;font-weight: 300;}
.p_style0002{margin-left: 10px;display: inline-block;color: #c0c0c0;line-height: 2.0rem;font-size: 1.3rem;}
.p_style0003{vertical-align: middle;display: inline-block;line-height: 2.4rem;}
.p_style0004{min-height: 25px;word-break: normal;overflow: hidden;text-overflow: ellipsis;white-space: normal;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.p_style0005{color: #c0c0c0;font-size: 1.3rem;line-height: 1.5rem;margin-top: 10px;font-weight: 300;vertical-align: middle;display: inline-block;}
.p_style0006{color: #c0c0c0;padding-top: 25px;font-size: 1.3rem;line-height: 1.5rem;font-weight: 300;vertical-align: middle;display: inline-block;}

.hr_style0001{
    border: none;border-bottom: 1px solid #e6e6e6;margin-top: 15px;margin-bottom: 10px;height: 0;
}

/* form style */
textarea.textarea_type_0001{background-color: #000;color: #FFF;padding: 20px 5px;overflow: hidden;font-size: 2.1rem;width: 100%;font-family: 'Noto Sans CJK KR', sans-serif;line-height: 0.6rem;min-height: 10px;}
textarea.textarea_type_0002{position: absolute;opacity: 0;overflow: hidden;width: 100%;}
input[type='text'].input_style0001{padding: 0 4px;width: calc(100% - 26px);height: 22px;}

/* btn style */
.btn_style0001{margin: 2px 1px;background-color: #e6e6e6;border-radius: 5px;color: #656E80;padding: 0 10px;vertical-align: middle;display: inline-block;line-height: 2.4rem;}

.btn_style0002{padding-right: 6px;padding-top: 3px;font-size: 1.8rem;vertical-align: middle;display: inline-block;}
.btn_style0002:before{font-weight: bold;}

.btn_style0003{padding-left: 2px; padding-right: 7px;background-color: transparent;}

/* img style */
.img_style0001{display: inline-block;vertical-align: middle;padding-top: 3px;}
.img_style0002{margin: 0 auto;}
.img_style0003{margin: 0 auto;}

/* icon style */
.icon_style0001{color: #fff;background-color: #7dc3ff;border-radius: 45%;width: 45px;display: inline-block;height: 45px;text-align: center;line-height: 3.6rem;opacity: 0.7;}
.icon_style0002{color: #7dc3ff;font-size: 4.5rem;line-height: 1rem;margin-top: -7px;vertical-align: middle;font-weight: 500;display: inline-block;}
/* ======== Responsive ======= */

/*반응형 - 가로기준 (pc 13 inch)*/
@media screen and (max-width: 1280px) {
    .left_panel{width: 270px; padding-left: 20px; padding-right: 20px;}

    .grid_style_1 .grid_object{display: block;margin-bottom:5%;}
    .grid_style_1 .grid_object:last-child{margin-top: 0;}
/* box style */
    .wrap_left_panel.active + .box_style0004{width: calc(100% - 270px);left: 270px;}
}

/*반응형 - 가로기준 (tablet)*/
@media screen and (max-width: 980px) {
    /*프레임 - 왼쪽판넬(모바일) - height: 45px;*/
    .wrap_btn_menu{
        opacity: 1;
        display: block;
        position: fixed;
        width: 100%;
        z-index: 104;
        text-align: right;
        max-height: 45px;
        transition: max-height 0.25s ease-in;
    }
    .wrap_left_panel{
        width: 100%;
        height: 45px;
        position: fixed;
        z-index: 100;
        opacity: 0.85;
        border-bottom: 1px solid #fff;
    }
    .wrap_left_panel.active {
        width: 100%;
        position: fixed;
        z-index: 100;
        overflow-y: scroll;
        max-height: 2500px;
        transition: max-height 0.25s ease-in;
        opacity: 1;
    }
    .wrap_left_panel.active .left_panel {
        display: block;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
    }

    .btn_mobile_menu {
        background-color: transparent;
        position: relative;
        z-index: 1;
        padding: 0;
    }
    .btn_mobile_menu.active .icon_hamburger_menu span{background-color: #FFFFFF;}
    .left_panel{display: none;}
    .wrap_counter{display: none;}

    /*게시판 - 하단 추천*/
    .wrap_post_list_bottom .post_list_bottom{
        margin-bottom: 15px;
        border: none;
    }
    .wrap_post_list_bottom .post_list_bottom:last-child{
        margin-bottom: 0px;
    }

    /*프레임 - 오른쪽판넬(모바일)*/


    /*스타일 - 테이블*/
    .table_style_0 {display: table;width: 100%;}
    .table_style_0 .cell_wrap{display: block;box-sizing: border-box;width: 100%;margin-bottom: 30px;}
    .table_style_0 .cell_wrap:last-child{margin-bottom: 0;}
    .table_style_0 .cell_wrap.left_side{padding-right: 10px;}

/* box style */
    .box_style0001 table tr td:nth-child(2){overflow-x: scroll;position: relative;top: 0px;}
    .box_style0001 table tr td:nth-child(2) > div > div{}
    /*.box_style0001 table tr td:nth-child(2) > div > div{padding: 6px !important;position: absolute;top: 0;height: 100%;}*/

    .box_style0002 table tr td:nth-child(1){overflow-x: scroll;position: relative;top: 0px;}
    .box_style0002 table tr td:nth-child(1) > div > div{padding: 12px !important;position: absolute;top: 0;height: 100%;}

    .box_style0003{padding: 0 3%;}

    .wrap_left_panel + .box_style0004, .wrap_left_panel.active + .box_style0004{left: 0;margin-top: 20px;width: 100%;}

/* text style */
}

/*반응형 - 세로기준*/
@media screen and (max-height: 720px) {
    .wrap_left_panel.active{overflow-y: scroll;}
    .left_panel{padding-top: 40px;}
    .wrap_search{margin-top: 20px;}
    .wrap_counter{display: none;}
}