@charset "utf-8";

/* 제목 및 ul, p, 박스, 탭, 버튼 등 텍스트 스타일 */

/* 제목 */
.h3Tit {
    clear: both;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #000;
    font-weight: 500;
}

.h3Tit2 {
    clear: both;
    margin-bottom: 10px;
    font-size: 1.0em;
    color: #000;
    font-weight: 400;
}

.h3Tit3 {
    clear: both;
    margin-bottom: 10px;
    font-size: 1.0em;
    color: #000;
    font-weight: 500;
}

.h3Tit4 {
    clear: both;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.2em;
    color: #000;
    font-weight: 500;
    border-bottom: 2px solid #000;
}

.h3Tit5 {
    clear: both;
    margin-bottom: 10px;
    font-size: 0.93em;
    color: #666;
    font-weight: 400;
}

.h3Tit6 {
    clear: both;
    margin-bottom: 10px;
    font-size: 1.33em;
    font-weight: 500;
}

.h4Tit {
    clear: both;
    margin-bottom: 10px;
    font-size: 0.93em;
    font-weight: 400;
}

.h5Tit {
    clear: both;
    margin-bottom: 20px;
    font-size: 1.13em;
    line-height: 1.3em;
    font-weight: 500;
    color: #000;
}

.h6Tit {
    clear: both;
    margin-bottom: 20px;
    font-size: 1.06em;
    line-height: 1.3em;
    font-weight: 500;
    color: #333;
}

/* tablet */
@media only screen and (max-width: 1230px) {


}

/* mobile */
@media only screen and (max-width: 992px) {


}

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

    .h3Tit {
        font-size: 1.13em;
    }

    .h3Tit4 {
        font-size: 1.13em;
    }
}

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


}


/* ul */
ul.ul_line {
    clear: both;
    margin-bottom: 45px;
}

ul.ul_line li {
    padding-left: 10px;
    margin-bottom: 10px;
    font-size: 1.06em;
    line-height: 1.3em;
    color: #666;
    background: url('/booknavi/user/img/guide/bu_bar-2aea904adc6f97d9ce15305b57a450de.png') no-repeat left 11px;
}

ul.li_bar {
    clear: both;
    margin-bottom: 15px;
}

ul.li_bar li {
    padding-left: 10px;
    margin-bottom: 10px;
    font-size: 1.13em;
    line-height: 1.3em;
    color: #666;
    background: url('/booknavi/user/img/guide/bu_bar-2aea904adc6f97d9ce15305b57a450de.png') no-repeat left 10px;
}

ul.li_bar li ul {
    margin-top: 10px;
}

ul.li_bar li ul li {
    padding: 0 0 0 10px;
    margin-bottom: 7px;
    font-size: 1.0em;
    line-height: 1.3em;
    background: url('/booknavi/user/img/guide/li_dot-2240887eb6a9d4c76ef88ca103ae352c.png') no-repeat left 10px;
}

ul.li_dot {
    clear: both;
    margin-bottom: 40px;
}

ul.li_dot li {
    padding: 0 0 0 10px;
    margin-bottom: 7px;
    font-size: 0.93em;
    font-weight: 300;
    color: #666;
    background: url('/booknavi/user/img/guide/li_dot-2240887eb6a9d4c76ef88ca103ae352c.png') no-repeat left 11px;
}

ul.li_dot2 {
    clear: both;
}

ul.li_dot2 li {
    padding-left: 10px;
    margin: 10px 0;
    font-size: 1.13em;
    line-height: 1.3em;
    background: url('/booknavi/user/img/guide/bu_dot-b110a05625de12ebdb41f3c9d1989ed9.png') no-repeat left 10px;
}

ul.li_dot2 li ul li {
    padding-left: 10px;
    margin-bottom: 10px;
    font-size: 1.0em;
    background: url('/booknavi/user/img/guide/bu_bar-2aea904adc6f97d9ce15305b57a450de.png') no-repeat left 10px;
}

ul.li_dot3 {
    clear: both;
}

ul.li_dot3 li {
    padding-left: 10px;
    margin: 5px 0;
    font-size: 1.06em;
    line-height: 1.3em;
    color: #666;
    background: url('/booknavi/user/img/guide/bu_dot-b110a05625de12ebdb41f3c9d1989ed9.png') no-repeat left 7px;
}

ul.li_dot3 li strong {
    font-weight: 500;
}

ul.li_dot3 li .ol_type {
    margin: 10px 0 20px 60px;
}

ul.li_dot3 li .ol_type li {
    position: relative;
    margin: 7px 0;
    padding-left: 30px;
    background: none;
    font-size: 1.06rem;
}

ul.li_dot3 li .ol_type li .num {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 23px;
    line-height: 23px;
    font-size: 0.86rem;
    color: #fff;
    text-align: center;
    background: #0f60ca;
    border-radius: 100%;
}

.li_width_2 ul {
    overflow: hidden;
}

.ul_list {
    clear: both;
}

.ul_list > li {
    font-size: 1.2em;
    line-height: 1.3em;
}

.ul_list > li strong {
    display: block;
    margin-bottom: 15px;
    font-size: 1.13em;
}

.ul_list > li > ul {
    margin-left: 15px;
}

.ul_list > li > ul > li {
    font-size: 1.0em;
}

.ul_list > li > ul > li > ul {
    margin: 10px 0 20px 20px;
}

.ul_list > li > ul > li > ul > li {
    font-size: 1.0em;
}

.li_no {
    clear: both;
    margin-bottom: 30px;
}

.li_no > li {
    margin-bottom: 5px;
    font-size: 1.13em;
    line-height: 1.4em;
}

.li_no > li > ul {
    margin: 10px 0 0px 15px;
}

.li_no > li > ul > li {
    margin-bottom: 5px;
    font-size: 1.0em;
}

.ol_type1 {
    clear: both;
    margin-bottom: 15px;
}

.ol_type1 li {
    margin-bottom: 10px;
    font-size: 1.13em;
    line-height: 1.3em;
    color: #666;
}

/* p */
p.p_type1 {
    clear: both;
    margin-bottom: 10px;
    font-size: 0.93em;
    color: #666;
    font-weight: 300;
    line-height: 1.5em;
}

p.p_type2 {
    clear: both;
    font-size: 1.13em;
    line-height: 1.5em;
}

p.p_type3 {
    clear: both;
    margin-bottom: 20px;
    font-size: 1.13em;
    line-height: 1.5em;
}

p.p_type4 {
    clear: both;
    margin-bottom: 20px;
    font-size: 1.06em;
    line-height: 1.5em;
}

p.p_dot {
    clear: both;
    padding-left: 10px;
    margin-bottom: 15px;
    font-size: 1.13em;
    line-height: 1.3em;
    color: #666;
    background: url('/booknavi/user/img/guide/bu_dot-b110a05625de12ebdb41f3c9d1989ed9.png') no-repeat left 10px;
}

.t_line {
    margin: 20px 0 40px 0;
    padding-top: 10px;
    border-top: 1px solid #ccc;
}

.color1 {
    color: #008ad1;
}

.color2 {
    color: #d10001;
}

.blue {
    color: #008ad1;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}


/* tablet */
@media only screen and (max-width: 1230px) {


}

/* mobile */
@media only screen and (max-width: 992px) {


}

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

    /* ul */
    ul.ul_line {
        margin-bottom: 25px;
    }

    ul.ul_line li {
        font-size: 1.0em;
        background: url('/booknavi/user/img/guide/bu_bar-2aea904adc6f97d9ce15305b57a450de.png') no-repeat left 8px;
    }

    ul.li_bar {
        margin-bottom: 15px;
    }

    ul.li_bar li {
        font-size: 1.0em;
        background: url('/booknavi/user/img/guide/bu_bar-2aea904adc6f97d9ce15305b57a450de.png') no-repeat left 8px;
    }

    ul.li_bar li ul li {
        background: url('/booknavi/user/img/guide/li_dot-2240887eb6a9d4c76ef88ca103ae352c.png') no-repeat left 8px;
    }

    ul.li_dot {
        margin-bottom: 25px;
    }

    ul.li_dot li {
        font-size: 1.0em;
        background: url('/booknavi/user/img/guide/li_dot-2240887eb6a9d4c76ef88ca103ae352c.png') no-repeat left 8px;
    }

    ul.li_dot2 li {
        font-size: 1.0em;
        background: url('/booknavi/user/img/guide/bu_dot-b110a05625de12ebdb41f3c9d1989ed9.png') no-repeat left 8px;
    }

    ul.li_dot2 li ul li {
        font-size: 1.0em;
        background: url('/booknavi/user/img/guide/bu_bar-2aea904adc6f97d9ce15305b57a450de.png') no-repeat left 8px;
    }

    ul.li_dot3 li .ol_type {
        margin: 10px 0 20px 0px;
    }

    .ul_list > li {
        font-size: 1.2em;
    }

    .ul_list > li strong {
        font-size: 1.0em;
    }

    .ul_list > li > ul > li {
        font-size: 1.0em;
    }

    .ul_list > li > ul > li > ul > li {
        font-size: 1.0em;
    }

    .li_no {
        margin-bottom: 20px;
    }

    .li_no > li {
        font-size: 1.0em;
    }

    .li_no > li > ul > li {
        font-size: 1.0em;
    }

    .ol_type1 li {
        font-size: 1.0em;
    }

    /* p */
    p.p_type1 {
        font-size: 0.86em;
        margin-bottom: 5px;
    }

    p.p_type2 {
        font-size: 1.0em;
    }

    p.p_type3 {
        font-size: 1.0em;
    }

    p.p_type4 {
        font-size: 0.93em;
    }

    p.p_dot {
        font-size: 1.0em;
        background: url('/booknavi/user/img/guide/bu_dot-b110a05625de12ebdb41f3c9d1989ed9.png') no-repeat left 8px;
    }


}

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

    /* ul */
    ul.ul_line li {
        font-size: 0.93em;
        background: url('/booknavi/user/img/guide/bu_bar-2aea904adc6f97d9ce15305b57a450de.png') no-repeat left 8px;
    }

    ul.li_bar li {
        font-size: 0.93em;
        background: url('/booknavi/user/img/guide/bu_bar-2aea904adc6f97d9ce15305b57a450de.png') no-repeat left 8px;
    }

    ul.li_bar li ul li {
        background: url('/booknavi/user/img/guide/li_dot-2240887eb6a9d4c76ef88ca103ae352c.png') no-repeat left 8px;
    }

    ul.li_dot li {
        font-size: 0.93em;
        background: url('/booknavi/user/img/guide/li_dot-2240887eb6a9d4c76ef88ca103ae352c.png') no-repeat left 8px;
    }

    ul.li_dot2 li {
        font-size: 0.93em;
        background: url('/booknavi/user/img/guide/bu_dot-b110a05625de12ebdb41f3c9d1989ed9.png') no-repeat left 8px;
    }

    ul.li_dot2 li ul li {
        font-size: 0.93em;;
        background: url('/booknavi/user/img/guide/bu_bar-2aea904adc6f97d9ce15305b57a450de.png') no-repeat left 8px;
    }

    ul.li_dot3 li {
        font-size: 0.93em;
        background: url('/booknavi/user/img/guide/bu_dot-b110a05625de12ebdb41f3c9d1989ed9.png') no-repeat left 6px;
    }

    ul.li_dot3 li .ol_type li {
        font-size: 0.93em;
    }

    ul.li_dot3 li .ol_type li .num {
        width: 20px;
        line-height: 20px;
        font-size: 0.8em;
    }

    .ul_list > li {
        font-size: 1.06em;
    }

    .ul_list > li strong {
        font-size: 0.93em;
    }

    .ul_list > li > ul > li {
        font-size: 0.93em;
    }

    .ul_list > li > ul > li > ul > li {
        font-size: 0.93em;
    }

    .li_no > li {
        font-size: 0.93em;
    }

    .li_no > li > ul > li {
        font-size: 0.93em;;
    }

    .ol_type1 li {
        font-size: 0.93em;
    }

    /* p */
    p.p_type1 {
        font-size: 0.83em;
    }

    p.p_type2 {
        font-size: 0.93em;
    }

    p.p_type3 {
        font-size: 0.93em;
    }

    p.p_type4 {
        font-size: 0.86em;
    }

    p.p_dot {
        font-size: 0.93em;
        background: url('/booknavi/user/img/guide/bu_dot-b110a05625de12ebdb41f3c9d1989ed9.png') no-repeat left 8px;
    }


}

/* 박스 */
.grey_box1 {
    position: relative;
    overflow: hidden;
    padding: 45px 30px 45px 180px;
    margin-bottom: 45px;
    border: 1px solid #dbdbdb;
    background-color: #fafafa;
}

/*.grey_box1.bg1 {background:#fafafa url('./../img/guide/pic_bg1.png') no-repeat 50px center;}*/
/*.grey_box1.bg2 {background:#fafafa url('./../img/guide/pic_bg2.png') no-repeat 50px center;}*/
/*.grey_box1.bg3 {background:#fafafa url('./../img/guide/pic_bg3.png') no-repeat 50px center;}*/
.grey_box1 p {
    font-size: 1.13em;
    line-height: 1.3em;
    padding: 5px 0;
}

.grey_box1.line-1 {
    padding: 60px 30px 60px 180px;
}

.grey_box2 {
    position: relative;
    overflow: hidden;
    padding: 30px 40px;
    margin-bottom: 45px;
    border: 1px solid #dbdbdb;
    background-color: #fafafa;
    word-break: keep-all;
}

.grey_box2 p {
    font-size: 1.06em;
    line-height: 1.3em;
}

.grey_box3 {
    position: relative;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f8f8f8;
    border-radius: 15px;
}

.line_box {
    position: relative;
    overflow: hidden;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid #dbdbdb;
}

.exp_box {
    clear: both;
    position: relative;
    margin: 20px 0 50px;
    padding: 15px 20px;
    border: 1px solid #ddd;
    color: #666;
    font-size: 0.97em;
}

.exp_box dl {
    position: relative;
    overflow: hidden;
}

.exp_box dl dt {
    float: left;
    padding-left: 15px;
    line-height: 1.3em;
    background: url('/booknavi/user/img/guide/bu_exp-700f6638f18b3f21d7ce04942d1d6ab8.png') no-repeat left 4px;
}

.exp_box dl dd {
    float: right;
    padding-left: 15px;
    line-height: 1.3em;
    background: url('/booknavi/user/img/guide/bu_dot-b110a05625de12ebdb41f3c9d1989ed9.png') no-repeat left 8px;
}


.center {
    text-align: center;
}

/* 테이블 */
.table.row-table {
    font-size: 0.93rem;
}

.table.row-table colgroup {
    border-top: none !important;
}

.table.row-table > :not(:first-child) {
    border-top: 1px solid #dbdbdb;
}

.table.row-table th {
    text-align: center;
    background: #f8f8f8;
    border-bottom: 1px solid #dbdbdb;
}

.table.row-table td {
    padding: 0.5rem 1.0rem;
    border-bottom: 1px solid #dbdbdb;
}

.table.row-table.borderT2 > :not(:first-child) {
    border-top: 2px solid #000;
}

.table.defalut-table { /*font-size:0.93rem;*/
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 20px;
}

.table.defalut-table > :not(:first-child) {
    border-top: none;
}

.table.defalut-table > :not(caption) > * > * {
    padding: 1.0rem 0.5rem;
}

.table.defalut-table thead th {
    font-weight: 500;
    border-top: 2px solid #000;
    background: #f2f2f2;
}

.table.defalut-table th,
.table.defalut-table td {
    border-left: 1px solid #dbdbdb;
    text-align: center;
    vertical-align: middle;
}

.table.defalut-table th:first-child,
.table.defalut-table td:first-child {
    border-left: none;
}

.table.defalut-table tbody td {
    border-top: 1px solid #dbdbdb;
}

/* tablet */
@media only screen and (max-width: 1230px) {


}

/* mobile */
@media only screen and (max-width: 992px) {


}

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

    /* 테이블 가로 스크롤 */
    .table_responsive {
        width: 100%;
        margin-bottom: 15px;
        min-height: .01%;
        overflow-x: auto;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
    }

    .table_responsive > table {
        max-width: 100%;
        table-layout: auto !important;
    }

    .table_responsive > table > tbody > tr > td,
    .table_responsive > table > tbody > tr > th,
    .table_responsive > table > tfoot > tr > td,
    .table_responsive > table > tfoot > tr > th,
    .table_responsive > table > thead > tr > td,
    .table_responsive > table > thead > tr > th {
        white-space: nowrap;
    }

    .table.row-table th,
    .table.row-table td {
        font-size: 0.86em;
    }


}

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


}


/*  플렉스 탭메뉴 */
/* 4개 이하시 사용 */
.tab-menu ul {
    /* flex */
    -webkit-appearance: none;
    /* 플렉스 컨테이너 생성 */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    /* 플렉스 감싸기(줄바꿈) 금지 설정 */
    -webkit-box-lines: single;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    /* 플렉스 주축 row 설정*/
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row;

    /* 를렉스 주축 row-reverse 설정.
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;*/

    /* 플렉스 아이템 교차축 baseline 정렬*/
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;

    margin-bottom: 30px;
    border: 1px solid #000;
}

.tab-menu ul li {
    position: relative;
    -webkit-appearance: none;

    /* 플렉스 확장 지수 설정*/
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex-grow: 1;

    border-right: 1px solid #000;
}

.tab-menu ul li:last-child {
    border-right: none;
}

.tab-menu ul li a {
    display: block;
    font-size: 1.13em;
    line-height: 58px;
    color: #666;
    text-align: center;
    background: #fff;
}

.tab-menu ul li a:hover,
.tab-menu ul li a:active,
.tab-menu ul li.on a {
    text-decoration: none;
    background: #000;
    color: #fff;
}

/* 다중 탭 */
.defalt-tabmenu ul {
    overflow: hidden;
    margin-bottom: 30px;
    border-top: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
}

.defalt-tabmenu ul li {
    position: relative;
    float: left;
    border-bottom: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
}

.defalt-tabmenu ul li a {
    display: block;
    line-height: 58px;
    color: #666;
    text-align: center;
    background: #fafafa;
}

.defalt-tabmenu ul li a:hover,
.defalt-tabmenu ul li a:active,
.defalt-tabmenu ul li a.active {
    text-decoration: none;
    background: #2e324d;
    color: #fff;
}

.defalt-tabmenu ul.tab-2 li {
    width: 50%;
}

.defalt-tabmenu ul.tab-3 li {
    width: 33.333333%;
}

.defalt-tabmenu ul.tab-4 li {
    width: 25%;
}

.defalt-tabmenu ul.tab-5 li {
    width: 20%;
}

.defalt-tabmenu ul.tab-6 li {
    width: 16.666%;
}

.defalt-tabmenu ul.tab-10 li {
    width: 20%;
}

.defalt-tabmenu.event ul {
    margin-bottom: 10px;
}

.text_tab ul {
    position: relative;
    margin-left: -20px;
}

.text_tab ul li {
    position: relative;
    float: left;
}

.text_tab ul li:after {
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    content: "";
    width: 1px;
    height: 12px;
    background: #ccc;
}

.text_tab ul li:last-child:after {
    display: none;
}

.text_tab ul li a {
    display: block;
    padding: 0 20px;
    font-size: 1.06em;
    font-weight: 300;
    color: #888;
}

.text_tab ul li a:hover {
    color: #000;
    font-weight: 500;
}

.text_tab ul li.active a {
    padding: 0 35px 0 20px;
    color: #000;
    font-weight: 500;
}

/*.text_tab ul li.active a:after {position:absolute; right:7px; top:-15px; display:block; content:""; width:23px; height:30px; background:url('./../img/board/program_tab_on.png') no-repeat left top;}*/

/* tablet */
@media only screen and (max-width: 1230px) {


}

/* mobile */
@media only screen and (max-width: 992px) {

    /* .tab-menu2 ul li a {font-size:1.06em;}*/
    .defalt-tabmenu ul {
        margin-bottom: 20px;
    }

    .defalt-tabmenu ul li a {
        font-size: 0.93em;
        line-height: 45px;
    }

}

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

    .tab-menu ul li a {
        line-height: 48px;
        font-size: 1.06em;
    }

    /* .tab-menu2 ul li a {line-height:48px; font-size:0.93em;}
    .tab-menu2 ul.tab-5 li {width:25%;}*/
    .defalt-tabmenu ul.tab-6 li {
        width: 25%;
    }

    .defalt-tabmenu ul li a {
        font-size: 0.83em;
        line-height: 40px;
    }


    .text_tab ul {
        margin-left: -10px;
    }

    .text_tab ul li a {
        padding: 0 10px;
        font-size: 0.93em;
    }

    .text_tab ul li.active a {
        padding: 0 35px 0 10px;
    }


}

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

    .defalt-tabmenu ul.tab-5 li {
        width: 33.333%;
    }

    .defalt-tabmenu ul.tab-6 li {
        width: 33.3333%;
    }

}

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

    /* .tab-menu2 ul li a {line-height:40px; font-size:0.86em;}
     .tab-menu2 ul.tab-5 li {width:33.333%;}*/
    .defalt-tabmenu ul.tab-10 li {
        width: 25%;
    }

    .text_tab ul li a {
        font-size: 0.86em;
    }

}

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

    /*.tab-menu2 ul.tab-5 li {width:50%;}*/
    /*.defalt-tabmenu ul.tab-5 li {width:50%;}
	.defalt-tabmenu ul.tab-6 li {width:50%;}*/
    .defalt-tabmenu ul.tab-10 li {
        width: 33.333%;
    }

}

/* 모달 600 */
.layer_type {
    display: none;
    position: relative;
    width: 600px;
    max-height: 730px;
    padding: 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    border: 1px solid #888;
}

.layer_type h4.con_tit {
    margin: 0px;
    padding-bottom: 30px;
    font-size: 1.53em;
    font-weight: 500;
    text-align: center;
}

.layer_type .con {
    padding: 25px 0 0 0;
}

.layer_type .close_btn {
    position: absolute;
    right: 20px;
    top: 20px;
    border: none;
    padding: 0px;
    width: 30px;
    height: 30px;
    background: url("/booknavi/user/img/product/close_btn-e295c77bc1e902690e35e4159fe8dbe8.png") no-repeat center center;
    background-size: 16px auto;
    text-indent: -9999em;
}

.layer_type .con2 {
}

.layer_type .btn_wrap {
    padding: 20px 0 0px 0;
}

.layer_type h5.con_tit2 {
    margin-bottom: 10px;
    font-size: 0.93em;
}

.layer_type div.board {
    margin-bottom: 20px;
}

.layer_type div.board table.mypage-board tbody td {
    padding: 5px 5px;
}

.layer_type div.board table.mypage-board tbody td.btns .button {
    margin: 0;
}

.btn_wrap .btn-success {
    border: none;
    padding: 0.375rem 2rem;
    border-radius: 25rem;
}

.btn_wrap .btn-outline-secondary {
    padding: 0.375rem 2rem;
    border-radius: 25rem;
}

/* 340 */
.layer_type.type2 {
    width: 340px;
    border-color: #888;
}

/* 767*/
.layer_type.type3 {
    width: 767px;
}

/* 상단디자인이 다른 레이어 팝업*/
.layer_type2 {
    display: none;
    position: relative;
    width: 360px;
    max-height: 730px;
    padding: 0px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    border: 1px solid #888;
}

.layer_type2 h4.con_tit {
    padding: 15px 25px;
    font-size: 0.93em;
    font-weight: 500;
    background: #f2f2f2;
    border-bottom: 1px solid #dbdbdb
}

.layer_type2 .close_btn {
    position: absolute;
    right: 16px;
    top: 10px;
    border: none;
    padding: 0px;
    width: 30px;
    height: 30px;
    background: url("/booknavi/user/img/mypage/close_btn-3aad5c6b18ef30a605713d4586a3215a.png") no-repeat center center;
    background-size: 17px auto;
    text-indent: -9999em;
}

.layer_type2 .con {
    padding: 25px 25px;
}

.layer_type2 .con h5 {
    padding-bottom: 7px;
    margin-bottom: 10px;
    font-size: 0.93em;
    border-bottom: 1px solid #dbdbdb;
}

.layer_type2 .con .member_list {
    overflow: hidden;
}

.layer_type2 .con .member_list li {
    float: left;
    width: 50%;
    position: relative;
    padding-left: 10px;
    font-size: 0.93em;
    color: #666;
    font-weight: 300;
}

.layer_type2 .con .member_list li::before {
    position: absolute;
    left: 0px;
    top: 10px;
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 25em;
    background: #666;
}

.layer_type2 .con .code_info {
    margin-bottom: 30px;
    padding: 20px 5px;
    text-align: center;
    background: #f5f5f5;
}

.layer_type2 .con .code_info strong {
    font-size: 1.13em;
    color: #ff4500;
    font-weight: 700;
}

.layer_type2 .con .input_box {
    margin-bottom: 30px;
}

.layer_type2 .con .input_box .control-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.93em;
    font-weight: 500;
}

.layer_type2 .con .input_box .control-label span {
    font-size: 12px;
    font-weight: 300;
    color: #666;
}

.layer_type2 .con .text_con h6 {
    margin-bottom: 10px;
    font-size: 0.93em;
    font-weight: 500;
}

.layer_type2 .con .text_con p {
    margin-bottom: 10px;
    font-size: 0.93em;
    color: #666;
    font-weight: 300;
}

.layer_type2.type2 {
    width: 500px;
}

/* 300 */
.mini_layer {
    display: none;
    width: 300px;
    background-color: #fff;
}

.mini_layer .con_tit {
    padding: 20px 25px;
    margin: 0;
    font-weight: 500;
    border-bottom: 1px solid #ddd;
}

.mini_layer .close_btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
}

.mini_layer .close_btn i {
    display: inline-block;
    width: 16px;
    height: 15px;
    background: url("/booknavi/user/img/product/close_btn-e295c77bc1e902690e35e4159fe8dbe8.png") no-repeat;
    background-size: 16px auto;
    vertical-align: middle;
}

.mini_layer .con {
    padding: 20px 25px;
}

.mini_layer .info .dl_type .tit label {
    font-size: 0.93em;
    font-weight: 500;
}

.mini_layer .info .dl_type .form-control {
    border-color: #666;
}

.mini_layer .sns_btn {
    text-align: center;
    padding: 40px 0;
}

.mini_layer .sns_btn a {
    display: inline-block;
    margin: 0 10px;
}

.mini_layer .sns_btn i {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 100%;
}

.mini_layer .sns_btn .facebook {
    background: #3c5b9b url("/booknavi/user/img/product/sns_facebook-8fc12fce220ad5909972904e65558b08.png") no-repeat center center;
    background-size: 60px auto;
}

.mini_layer .sns_btn .twitter {
    background: #000 url("/booknavi/user/img/product/sns_x-dac550d790ff0db9969cad1c2a4201e7.jpg") no-repeat center center;
    background-size: 30px auto;
}

.mini_layer .sns_btn .sns_txt {
    display: block;
    padding-top: 10px;
}

.mini_layer .btn_wrap {
    overflow: hidden;
}

/*.mini_layer .btn_wrap .btn-success {border:none; padding:0.375rem 2rem; border-radius:25rem; }*/

.mini_layer.type2 {
    width: 500px;
}

/* 모달 수정
.modal.user_type .modal-header {border-bottom:none;}
.modal.user_type .modal-footer {border-top:none; justify-content: center;}*/

/* tablet */
@media only screen and (max-width: 1230px) {


}

/* mobile */
@media only screen and (max-width: 992px) {


}

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

    .layer_type {
        width: 90%;
        padding: 30px 30px;
    }

    .layer_type h4.con_tit {
        font-size: 1.33em;
        margin-bottom: 20px;
    }

    .layer_type .con2 textarea.form-control {
        font-size: 0.86rem;
    }


}

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

    .layer_type2.type2 {
        width: 90%;
    }

}

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


}

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

    .layer_type2 {
        width: 90%;
    }

    .layer_type2 .con .member_list li {
        float: none;
        width: 100%;
    }

}


/*  버튼 */
.button {
    display: inline-block;
    border: none;
}

.button.download_btn {
    padding: 0 20px;
    margin-bottom: 10px;
    line-height: 55px;
    border-radius: 0px;
}

.button.download_btn.green {
    font-size: 1.06em;
    font-weight: 300;
    color: #fff;
    background-color: #186f40;
}

.button.download_btn i {
    display: inline-block;
    width: 22px;
    height: 19px;
    margin-right: 10px;
    background: url('/booknavi/user/img/guide/down_btn-c520d38bbf2f9b2cb1b00e9eea75f58f.png') no-repeat left top;
    vertical-align: middle;
}

.button.download_btn p {
    vertical-align: middle;
}

.button.basic_btn {
    padding: 0 45px;
    line-height: 40px;
    font-size: 0.93em;
    font-weight: 400;
    border-radius: 0px;
    color: #fff;
    background-color: #2e324d;
}

.button.basic_btn.green {
    color: #fff !important;
    background-color: #035328;
}

.button.basic_btn.red {
    color: #fff !important;
    background-color: #cc0d0d;
}

.button.basic_btn.orange {
    color: #fff !important;
    background-color: #ff4500;
}

.button.basic_btn.blue {
    color: #fff;
    background-color: #0f60ca;
}

.button.basic_btn.grey {
    color: #fff;
    background-color: #3d3d3d;
}

.button.basic_btn.grey2 {
    color: #fff;
    background-color: #666;
}

.button.basic_btn.black {
    color: #fff;
    background-color: #000;
}

.button.basic_btn.line {
    line-height: 38px;
    color: #666;
    border: 1px solid #a3a3a3;
    background: #fff;
}

.button.basic_btn.black2 {
    padding: 0 50px;
    color: #fff;
    background-color: #282828;
}

.button.basic_btn.line2 {
    padding: 0 50px;
    line-height: 48px;
    color: #444;
    border: 1px solid #282828;
}

.button.basic_btn.line3 {
    width: 200px;
    line-height: 53px;
    color: #666;
    border: 1px solid #a3a3a3;
    background: #fff;
}

.button.basic_btn.line4 {
    font-weight: 700;
    line-height: 53px;
    color: #666;
    border: 1px solid #a3a3a3;
    background: #fff;
}

.button.basic_btn.small {
    padding: 0 30px;
    line-height: 30px;
}

.button.basic_btn.small2 {
    padding: 0 25px;
    line-height: 40px;
}

.button.basic_btn.small3 {
    padding: 0 15px;
    line-height: 35px;
}

.button.basic_btn.middle {
    width: 300px;
}

.button.basic_btn.middle2 {
    width: 200px;
    font-size: 1.06rem;
    font-weight: 500;
    line-height: 55px;
}

.button.basic_btn.middle3 {
    font-weight: 700;
    line-height: 55px;
}

.button.basic_btn.wide {
    width: 100%;
    text-align: center;
}

/*.button.basic_btn.100px {padding:0 0; width:100px;}*/

.button.basic_btn.radius {
    border-radius: 3px;
}

.button.round_btn {
    padding: 0 35px;
    line-height: 50px;
    font-size: 1.06em;
    font-weight: 400;
    border-radius: 50px;
}

.button.round_btn.black {
    color: #fff;
    background: #282828;
}

.button.basic_line_btn {
    padding: 0 25px;
    font-size: 0.93em;
    color: #666;
    line-height: 33px;
    height: 35px;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
}

.button.basic_line_btn.grey {
    border-color: #a3a3a3;
}

.button.basic_line_btn.grey2 {
    background: #f2f2f2;
}

.button.basic_line_btn.small {
    padding: 0 15px;
    font-size: 13px;
    line-height: 28px;
    height: 30px;
}

.button.basic_line_btn.middle {
    line-height: 38px;
    height: 40px
}

.button.basic_line_btn.noradius {
    border-radius: 0px;
}

/* 채널만들기-도서선택 */
.button.basic_line_btn.active {
    padding: 0 9px;
    color: #fff;
    background: #198754;
}

.button.small_btn {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
}

.button.small_btn.grey {
    color: #2e324d;
    border: 1px solid #888;
    background: #fff;
}

.button.small_btn.h30 {
    padding: 0 10px;
    line-height: 28px;
}

.button.text_btn {
    display: inline-block;
    padding: 0px;
    font-size: 0.93rem;
    font-weight: 500;
    line-height: 1.0;
    background: none;
}

.link_btns {
    position: relative;
}

.link_btns .link {
    display: inline-block;
    padding: 16px 45px;
    font-size: 1.06em;
    border: 1px solid #282828;
    border-radius: 50px;
}

/*.link_btns .link i {display:inline-block; width:17px; height:17px; margin-right:10px; background:url('./../img/guide/link_pic.png') no-repeat left top; background-size:100% auto; vertical-align:middle;}*/

.down_btns {
    clear: both;
    position: relative;
    padding-top: 40px;
}

.down_btns .down {
    display: inline-block;
    padding: 25px 45px;
    font-size: 1.06em;
    color: #fff;
    background: #0f60ca;
    border-radius: 50px;
}

/*.down_btns .down i {display:inline-block; width:17px; height:16px; margin-right:10px; background:url('./../img/guide/down_pic2.png') no-repeat left top; background-size:100% auto; vertical-align:middle;}*/

/* 버튼 사이즈 고정 */
.button.w100px {
    padding: 0 0 !important;
    width: 100px !important;
}


/* tablet */
@media only screen and (max-width: 1230px) {


}

/* mobile */
@media only screen and (max-width: 992px) {

}

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

    .button.basic_btn {
        padding: 0 25px;
    }

    .button.basic_line_btn {
        font-size: 0.83em;
    }

    .button.w100px {
        padding: 0 10px !important;
        width: auto !important;
    }


}

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


    .button.basic_btn {
        padding: 0 15px;
    }

}

/* 인풋 */
.checkbox_grey {
    position: relative;
    display: block;
}

.checkbox_grey input[type="checkbox"] {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 10px;
    z-index: 1; /*left:0; top:0; width:1px; height:1px; padding:0; border:0 none; margin:0;  overflow:hidden;clip:rect(0 0 0 0);*/
}

.checkbox_grey label {
    position: relative;
    overflow: hidden;
    display: block;
    height: 14px;
    line-height: 14px;
    padding-left: 14px;
    margin-bottom: 0px;
    margin-right: 14px;
    background: url("/booknavi/user/img/guide/checkbox_grey-aaada306ed44b89678d4bc7e6400d845.png") no-repeat 0 0;
    background-size: 14px auto;
    cursor: pointer;
    text-indent: -9999em;
    z-index: 10;
}

.checkbox_grey input[type="checkbox"]:checked + label {
    background-position: 0 -14px;
}

.checkbox_grey2 {
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.checkbox_grey2 input[type="checkbox"] {
    position: absolute;
    left: 0px;
    top: 3px;
    width: 10px;
    z-index: 1;
}

.checkbox_grey2 label {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
    margin-right: 14px;
    line-height: 1.0;
    cursor: pointer;
    z-index: 10;
    vertical-align: middle;
}

.checkbox_grey2 label:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    background: url("/booknavi/user/img/guide/checkbox_grey-aaada306ed44b89678d4bc7e6400d845.png") no-repeat 0 0;
    background-size: 14px auto;
}

.checkbox_grey2 input[type="checkbox"]:checked + label:before {
    background-position: 0 -14px;
}

.checkbox_type {
    position: relative;
    display: block;
}

.checkbox_type input[type="checkbox"] {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 10px;
    z-index: 1;
}

.checkbox_type label {
    position: relative;
    overflow: hidden;
    display: block;
    height: 20px;
    font-size: 0.93rem;
    line-height: 20px;
    padding-left: 30px;
    background: url("/booknavi/user/img/guide/checkbox_type-d701197a86508287f31ee39d832ba29e.png") no-repeat 0 0;
    background-size: 20px auto;
    cursor: pointer;
    z-index: 10;
}

.checkbox_type input[type="checkbox"]:checked + label {
    background-position: 0 -20px;
}

.checkbox_type2 {
    position: relative;
    display: block;
    padding-bottom: 10px;
}

.checkbox_type2 input[type="checkbox"] {
    position: absolute;
    left: 0px;
    top: 3px;
    width: 10px;
    z-index: 1;
}

.checkbox_type2 label {
    position: relative;
    display: block;
    padding: 0 0 0 30px;
    font-size: 0.93rem;
    z-index: 10;
}

.checkbox_type2 label:before {
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 2px;
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("/booknavi/user/img/guide/checkbox_type-d701197a86508287f31ee39d832ba29e.png") no-repeat 0 0;
    background-size: 20px auto;
    cursor: pointer;
}

.checkbox_type2 input[type="checkbox"]:checked + label:before {
    background-position: 0 -20px;
}

.checkbox_type3 {
    position: relative;
    display: block;
}

.checkbox_type3 input[type="checkbox"] {
    position: absolute;
    left: 0px;
    top: 3px;
    width: 10px;
    z-index: 1;
}

.checkbox_type3 label {
    position: relative;
    display: block;
    padding: 0 0 0 30px;
    font-size: 0.93rem;
    z-index: 10;
}

.checkbox_type3 label:before {
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 2px;
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("/booknavi/user/img/guide/checkbox_type-d701197a86508287f31ee39d832ba29e.png") no-repeat 0 0;
    background-size: 20px auto;
    cursor: pointer;
}

.checkbox_type3 input[type="checkbox"]:checked + label:before {
    background-position: 0 -20px;
}

.checkbox_round {
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.checkbox_round input[type="checkbox"] {
    position: absolute;
    left: 3px;
    top: 7px;
    width: 10px;
    z-index: 1;
}

.checkbox_round label {
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding: 5px 0 5px 20px;
    margin-right: 16px;
    font-size: 0.93em;
    color: #a3a3a3;
    line-height: 1.0;
    cursor: pointer;
    z-index: 10;
    vertical-align: middle;
}

.checkbox_round label:before {
    position: absolute;
    top: 4px;
    left: 0px;
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url("/booknavi/user/img/guide/checkbox_round-cd92fb1be3ddd980cadd24c9f8b232d1.png") no-repeat 0 0;
    background-size: 16px auto;
}

.checkbox_round input[type="checkbox"]:checked + label:before {
    background-position: 0 -16px;
}

.radio_grey {
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.radio_grey input[type="radio"] {
    position: absolute;
    left: 3px;
    top: 7px;
    width: 10px;
    z-index: 1;
}

.radio_grey label {
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding: 5px 0 5px 22px;
    margin-right: 17px;
    line-height: 1.0;
    cursor: pointer;
    z-index: 10;
    vertical-align: middle;
}

.radio_grey label:before {
    position: absolute;
    top: 4px;
    left: 0px;
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 5px;
    background: url("/booknavi/user/img/guide/radio_grey-74eaa39f0b5c98cd27b3bc975d88def6.png") no-repeat 0 0;
    background-size: 17px auto;
}

.radio_grey input[type="radio"]:checked + label:before {
    background-position: 0 -17px;
}

.boxcheck_btn {
    overflow: hidden;
    position: relative;
}

.boxcheck_btn input[type="checkbox"] {
    position: absolute;
    left: 3px;
    top: 7px;
    width: 10px;
    z-index: 1;
}

.boxcheck_btn label {
    position: relative;
    display: inline-block;
    padding: 0 10px;
    min-width: 100px;
    font-size: 0.86em;
    line-height: 30px;
    text-align: center;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    background: #fff;
    z-index: 2;
}

.boxcheck_btn input[type="checkbox"]:checked + label {
    color: #fff;
    border-color: #2e324d;
    background: #2e324d;
}

.boxcheck_sbtn {
    overflow: hidden;
    position: relative;
}

.boxcheck_sbtn input[type="checkbox"] {
    position: absolute;
    left: 3px;
    top: 7px;
    width: 10px;
    z-index: 1;
}

.boxcheck_sbtn label {
    position: relative;
    display: inline-block;
    padding: 0 15px;
    font-size: 0.86em;
    line-height: 30px;
    text-align: center;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    background: #f2f2f2;
    z-index: 2;
}

.boxcheck_sbtn input[type="checkbox"]:checked + label {
    color: #fff;
    border-color: #198754;
    background: #198754;
}

/* 체크박스 & 라디오버튼 */
@keyframes hover-color {
    from {
        border-color: #c0c0c0;
    }
    to {
        border-color: #3e97eb;
    }
}

.magic-radio,
.magic-checkbox { /*position:absolute; display: none;*/
    position: absolute;
    top: 0px;
    left: 1px;
    width: 15px;
    height: 15px;
    /*margin-top: -10px;*/
    outline: 0;
}

.magic-radio[disabled],
.magic-checkbox[disabled] {
    cursor: not-allowed;
}

.magic-radio + label,
.magic-checkbox + label {
    position: relative;
    display: block;
    padding-left: 25px;
    cursor: pointer;
    line-height: 1.0;
    vertical-align: middle;
}

.magic-radio + label:hover:before,
.magic-checkbox + label:hover:before {
    animation-duration: 0.4s;
    animation-fill-mode: both; /*animation-name: hover-color;*/
}

.magic-radio + label:before {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 18px;
    height: 18px;
    content: '';
    border: 1px solid #2e324d;
    background: #fff;
}

.magic-checkbox + label:before {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 25px;
    height: 25px;
    content: '';
    border: 1px solid #ccc;
    background: #fff;
}

.magic-radio + label:after,
.magic-checkbox + label:after {
    position: absolute;
    display: none;
    content: '';
}

.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label {
    cursor: not-allowed;
    color: #e4e4e4;
}

.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
.magic-checkbox[disabled] + label:hover,
.magic-checkbox[disabled] + label:before,
.magic-checkbox[disabled] + label:after {
    cursor: not-allowed;
}

.magic-radio[disabled] + label:hover:before,
.magic-checkbox[disabled] + label:hover:before {
    border: 1px solid #e4e4e4;
    animation-name: none;
}

.magic-radio[disabled] + label:before,
.magic-checkbox[disabled] + label:before {
    border-color: #e4e4e4;
}

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before {
    animation-name: none;
}

.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {
    display: block;
}

.magic-checkbox + label:after {
    display: block;
}

.magic-radio + label:before {
    border-radius: 50%;
}

.magic-radio + label:after {
    top: 5px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2e324d;
}

.magic-radio:checked + label:before {
    border: 1px solid #2e324d;
}

.magic-radio:checked[disabled] + label:before {
    border: 1px solid #ccc;
}

.magic-radio:checked[disabled] + label:after {
    background: #ccc;
}

.magic-checkbox + label:before {
    border-radius: 0px;
}

.magic-checkbox + label:after {
    top: 5px;
    left: 10px;
    box-sizing: border-box;
    width: 6px;
    height: 12px;
    transform: rotate(45deg);
    border-width: 2px;
    border-style: solid;
    border-color: #ccc;
    border-top: 0;
    border-left: 0;
}

.magic-checkbox:checked + label:after {
    top: 5px;
    left: 10px;
    box-sizing: border-box;
    width: 6px;
    height: 12px;
    transform: rotate(45deg);
    border-width: 2px;
    border-style: solid;
    border-color: #24bfe6;
    border-top: 0;
    border-left: 0;
}

.magic-checkbox:checked + label:before {
    border: 1px solid #24bfe6;
    background: #fff;
}

.magic-checkbox:checked[disabled] + label:before {
    border: #c9e2f9;
    background: #c9e2f9;
}


/* tablet */
@media only screen and (max-width: 1230px) {


}

/* mobile */
@media only screen and (max-width: 992px) {


}

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


    .magic-radio + label, .magic-checkbox + label {
        padding: 2px 0 0 25px;
        font-size: 0.83em;
    }


}

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


}

/* 커스텀 툴팀 */
.tooltipU {
    position: relative;
    display: inline-block;
}

.tooltipU .tooltiptext {
    position: absolute; /*visibility: hidden;*/
    width: 90px;
    background-color: #fff;
    text-align: center;
    font-size: 12px;
    color: #666;
    border-radius: 5px;
    padding: 7px 0;
    z-index: 1;
    -webkit-filter: drop-shadow(-1px 2px 3px #aaa);
    filter: drop-shadow(-1px 1px 3px #aaa);
    /*/box-shadow : 0 0 3px 1px rgba(0,0,0,0.5);*/
}

/* 툴팁 화살표 기본 스타일 설정 시작 */
.tooltipU .tooltiptext::after {
    content: " ";
    position: absolute;
    border-style: solid;
    border-width: 5px;
}

/* 툴팁 방향 설정 시작 */
/* 왼쪽 툴팁 시작 */
.tooltipU .tooltip-left {
    top: -2px;
    right: 106%;
}

.tooltipU .tooltip-left::after {
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-color: transparent transparent transparent black;
}

/* 오른쪽 툴팁 시작 */
.tooltipU .tooltip-right {
    top: -2px;
    left: 106%; /*-webkit-filter: drop-shadow(1px 2px 1px #bcbcbc); filter: drop-shadow(1px -1px 1px #bcbcbc);*/
}

.tooltipU .tooltip-right::after {
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-color: transparent #fff transparent transparent;
    /*-webkit-filter: drop-shadow(1px 2px 1px #bcbcbc); filter: drop-shadow(1px -1px 1px #bcbcbc);*/
}

/* 위쪽 툴팁 시작 */
.tooltipU .tooltip-top {
    width: 120px;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltipU .tooltip-top::after {
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: black transparent transparent transparent;
}

/* 아래쪽 툴팁 시작 */
.tooltipU .tooltip-bottom {
    width: 120px;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltipU .tooltip-bottom::after {
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: transparent transparent black transparent;
}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .tooltipU .tooltiptext {
        background: #f2f2f2;
    }

    .tooltipU .tooltip-right::after {
        border-color: transparent #f2f2f2 transparent transparent;
    }
}

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

    .tooltipU .tooltiptext {
        width: 80px;
    }

    .tooltipU .tooltiptext {
        font-size: 10px;
    }

}