@charset "euc-kr";
/* 
 * 위젯 컨텐츠 숏코드
 *
 * widget - 1개 섹션별로 위젯제작 [초급]
 * piece_widget - 배너4개의 한부분에 독립적으로 사용하는 부분위젯 [초급]
* design - css 숏코드로 html 편집상에서 css 속성을 대신하는 클래스 모임 [중급]
 * page_design - 개별속성 css 단수가 아닌 복수 css 로서 컨텐츠제작에 사용합니다 [고급] 
*/
/* 소셜 아이콘 대체 - 문자 아이콘입니다. */
/* 투명 배경용*/
.sns_txt_icon_bgtransparent {
    width: 24px;
    height: 24px;
    text-align: center;
    font: 600 18px/24px "나눔고딕", "Nanum Gothic", sans-serif;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.8);
    vertical-align: 3px;
    display: block
}
.sns_txt_icon_bgtransparent:hover {
    background-color: rgba(255, 255, 255, 0.9);
}
.sns_txt_icon_bgtransparent a {
    color: rgba(0, 0, 0, 0.6313725490196078) !important;
}
.sns_txt_icon_bgtransparent a:hover {
    color: rgba(0, 0, 0, 0.7294117647058823) !important;
}

@media (max-width:991px) {
/* 모바일 검정배경 */
.sns_txt_icon_bgtransparent {
    background-color: rgba(255, 255, 255, 1);
    vertical-align: 3px;
    display: block
}
.sns_txt_icon_bgtransparent:hover {
    background-color: #9D0B0E;
}
.sns_txt_icon_bgtransparent a {
    color: #000000 !important;
}
.sns_txt_icon_bgtransparent a:hover {
    color: #000000 !important;
}
}

/* 흰색배경*/
.sns_txt_icon_bgwhite {
    width: 24px;
    height: 24px;
    text-align: center;
    font: 600 18px/24px "나눔고딕", "Nanum Gothic", sans-serif;
    border-radius: 3px;
    background-color: rgb(110, 110, 110);
    vertical-align: 3px;
    display: block
}
.sns_txt_icon_bgwhite:hover {
    background-color: #434343;
}
.sns_txt_icon_bgwhite a {
    color: #ffffff !important;
}
.sns_txt_icon_bgwhite a:hover {
    color: #ffffff !important;
}

@media (max-width:991px) {
.sns_txt_icon_bgwhite {
    width: 24px;
    height: 24px;
    text-align: center;
    font: 600 18px/24px "나눔고딕", "Nanum Gothic", sans-serif;
    border-radius: 3px;
    background-color: rgb(110, 110, 110);
    vertical-align: 3px;
    display: block
}
.sns_txt_icon_bgwhite:hover {
    background-color: #434343;
}
.sns_txt_icon_bgwhite a {
    color: #ffffff !important;
}
.sns_txt_icon_bgwhite a:hover {
    color: #ffffff !important;
}
}

/* 검정배경용 */

.sns_txt_icon_bgblack {
    width: 24px;
    height: 24px;
    text-align: center;
    font: 600 18px/24px "나눔고딕", "Nanum Gothic", sans-serif;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 1);
    vertical-align: 3px;
    display: block
}
.sns_txt_icon_bgblack:hover {
    background-color: #9D0B0E;
}
.sns_txt_icon_bgblack a {
    color: #000000 !important;
}
.sns_txt_icon_bgblack a:hover {
    color: #000000 !important;
}

@media (max-width:991px) {
.sns_txt_icon_bgblack {
    width: 24px;
    height: 24px;
    text-align: center;
    font: 600 18px/24px "나눔고딕", "Nanum Gothic", sans-serif;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 1);
    vertical-align: 3px;
    display: block
}
.sns_txt_icon_bgblack:hover {
    background-color: #9D0B0E;
}
.sns_txt_icon_bgblack a {
    color: #000000 !important;
}
.sns_txt_icon_bgblack a:hover {
    color: #000000 !important;
}
}
/* 오렌지 배경색 */

.sns_txt_icon_bgorange {
    width: 24px;
    height: 24px;
    text-align: center;
    font: 600 18px/24px "나눔고딕", "Nanum Gothic", sans-serif;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.8);
    vertical-align: 3px;
    display: block
}
.sns_txt_icon_bgorange:hover {
    background-color: rgba(255, 255, 255, 0.9);
}
.sns_txt_icon_bgorange a {
    color: #F44336 !important;
}
.sns_txt_icon_bgorange a:hover {
    color: #F44336 !important;
}

@media (max-width:991px) {
.sns_txt_icon_bgorange {
    background-color: rgba(255, 255, 255, 1);
    vertical-align: 3px;
    display: block
}
.sns_txt_icon_bgorange:hover {
    background-color: #9D0B0E;
}
.sns_txt_icon_bgorange a {
    color: #000000 !important;
}
.sns_txt_icon_bgorange a:hover {
    color: #000000 !important;
}
}


/* text_title_black_bg01 ------------------------------------------------------------------------------------------ */

.text_title_black_bg01 {
    padding: 30px 25px;
    color: white;
    text-align: center;
    position: relative;
    z-index: 0;
}
.text_title_black_bg01:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.83);
    z-index: -1;
}
.text_title_black_bg01.bg-img {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}
.text_title_black_bg01.bg-img01 {
    background-image: url(../images/main_metapo01.jpg);
}
.text_title_black_bg01 .text_title {
    overflow-x: hidden;
    z-index: 1;
}
.text_title_black_bg01 .text_title .title01 {
    font-size: 3vmin;
}
.text_title_black_bg01 .text_title .title01 strong {
}
.text_title_black_bg01 .text_title .title02 {
    font-size: 4vmin;
    padding-top: 15px;
    padding-bottom: 10px;
}
.text_title_black_bg01 .text_title .title02 strong {
}
.text_title_black_bg01 .text_title .title03 {
    font-size: 2vmin;
}
/* text_title_black_bg01 ------------------------------------------------------------------------------------------ */

.text_title_white_bg01 {
    padding: 30px 25px;
    color: #1F1F1F;
    text-align: center;
    position: relative;
    z-index: 0;
}
.text_title_white_bg01:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(255, 255, 255, 0.83);
    z-index: -1;
}
.text_title_white_bg01.bg-img {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}
.text_title_white_bg01.bg-img01 {
    background-image: url(../images/main_metapo02.jpg);
}
.text_title_white_bg01 .text_title {
    overflow-x: hidden;
    z-index: 1;
}
.text_title_white_bg01 .text_title .title01 {
    font-size: 3vmin;
}
.text_title_white_bg01 .text_title .title01 strong {
}
.text_title_white_bg01 .text_title .title02 {
    font-size: 4vmin;
    padding-top: 15px;
    padding-bottom: 10px;
}
.text_title_white_bg01 .text_title .title02 strong {
}
.text_title_white_bg01 .text_title .title03 {
    font-size: 2vmin;
}
/* text_title_black_bg02 ------------------------------------------------------------------------------------------ */

.text_title_black_bg02 {
    padding: 30px 25px;
    color: white;
    text-align: center;
    position: relative;
    z-index: 0;
}
.text_title_black_bg02:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.83);
    z-index: -1;
}
.text_title_black_bg02.bg-img {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}
.text_title_black_bg02.bg-img01 {
    background-image: url(../images/main_metapo01.jpg);
}
.text_title_black_bg02 .text_title {
    z-index: 1;
}
.text_title_black_bg02 .text_title .title01 {
    font-size: 4vmin;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}
.text_title_black_bg02 .text_title .title01:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #616161;
    content: '';
}
.text_title_black_bg02 .text_title .title01:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #616161;
    content: '';
}
.text_title_black_bg02 .title01 .underbar {
    width: 50px;
    height: 3px;
    transform: translateX(-50%);
    background-color: #C0C0C0;
    position: absolute;
    left: 50%;
    bottom: -1px;
    z-index: 1;
    transition: 0.3;
}
.text_title_black_bg02:hover .title01 .underbar {
    background-color: #f12b24;
}
.text_title_black_bg02 .text_title .title02 {
    font-size: 2vmin;
}
/* text_title_white_bg02 ------------------------------------------------------------------------------------------ */

.text_title_white_bg02 {
    padding: 30px 25px;
    color: black;
    text-align: center;
    position: relative;
    z-index: 0;
}
.text_title_white_bg02:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(255,255,255,0.83);
    z-index: -1;
}
.text_title_white_bg02.bg-img {
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
}
.text_title_white_bg02.bg-img01 {
    background-image: url(../images/main_metapo02.jpg);
}
.text_title_white_bg02 .text_title {
    overflow-x: hidden;
    z-index: 1;
}
.text_title_white_bg02 .text_title .title01 {
    font-size: 4vmin;
    padding-top: 15px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}
.text_title_white_bg02 .text_title .title01:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #616161;
    content: '';
}
.text_title_white_bg02 .text_title .title01:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #616161;
    content: '';
}
.text_title_white_bg02 .title01 .underbar {
    width: 50px;
    height: 3px;
    transform: translateX(-50%);
    background-color: #000000;
    position: absolute;
    left: 50%;
    bottom: -1px;
    z-index: 1;
    transition: 0.3;
}
.text_title_white_bg02:hover .title01 .underbar {
    background-color: #f12b24;
}
.text_title_white_bg02 .text_title .title02 {
    font-size: 2vmin;
}
