/* Google-Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500&display=swap');
@import url('../refer/fontello/css/fontello.css');

/* CSS-RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {padding: 0; margin: 0; border: 0; font-size: 100%; font: inherit;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
img,fieldset {border: 0;}
input, button, select {outline: none;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle;}
ol, ul {list-style: none; padding: 0; margin: 0;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
input, button {outline: none;}

/* LINK-RESET */
a:link{text-decoration:none; color: inherit; }
a:visited{text-decoration:none; color: inherit;}
a:hover{text-decoration:none; color: inherit;}
a:active{text-decoration:none; color: inherit;}	

/* CLEAR */
.clear {zoom:1;}
.clear::after{content:''; display:block; clear:both;}

/* Hide */
.hide {
    display: inline-block !important; position: absolute; top: 0; left: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important;
}
.hides {position: absolute; left: -3000%;}
/* END CSS-RESET */

/* --- BASIC --- */
body {
    font-family:'Noto Sans KR', 'Malgun Gothic','맑은 고딕','Apple SD Gothic Neo','Open Sans',sans-serif;    
    font-size: 0.91rem;
    letter-spacing: -0.05em;
    font-weight: 400;
    white-space: normal;
    word-break: break-all;
    color: #444;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
}
.txs085 {font-size: 0.85em;}
.txs09 {font-size: 0.9em;}
.txs10 {font-size: 1em;}
.txs11 {font-size: 1.1em;}
.txs115 {font-size: 1.15em;}
.txs12 {font-size: 1.2em;}
.txs13 {font-size: 1.3em;}
.txs14 {font-size: 1.4em;}
.txs15 {font-size: 1.5em;}
.txs16 {font-size: 1.6em;}
.txs17 {font-size: 1.7em;}
.txs18 {font-size: 1.8em;}
.txs20 {font-size: 2em;}
.txs21 {font-size: 2.1em;}
.txs23 {font-size: 2.3em;}
.txs25 {font-size: 2.5em;}
.txs30 {font-size: 3em;}

.txb50 {font-weight: 500}
.txb60 {font-weight: 600}

.txc-s2 {color:#1cc6fb;}
.txc-g2 {color: #02d795;}

.gapx10 {display: block; height: 10px;}
.gapx15 {display: block; height: 15px;}
.bg-g { background-color: #eee; }

.gapxb5 {display:none;}

@media screen and (max-width:768px) {
    body {
        font-size: 1rem;
    }
    .gapxb5 {
        display: block;
        height: 15px;
        background-color: #eaedf2;
    }    
}
/* --- END-BASIC --- */

/* --- LAY-OUT --- */
.width-wx, .width-fxb, .width-sfx {
    display: block;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;        
}
.width-wx {max-width: 1180px; }
.width-fxb {max-width: 850px; min-width: 670px;}
.width-sfx {max-width: 320px; min-width: 275px;}
.wrap-mainbx {
    display: flex;
    align-items: flex-start;
}
.titx20 {
    font-size: 1.3em;
    font-weight: 500;
    padding: 10px 1%;
    box-sizing: border-box;
    color: #111;
}
.titx_mu {margin-bottom: -1%;}
@media screen and (max-width:768px) {
    .wrap-mainbx {
        flex-direction:column;
        box-sizing: border-box;
    }    
    .width-wx, .width-fxb, .width-sfx {max-width: 100%; min-width: 100%;}
}
/* --- END-LAY-OUT --- */

/* --- HEADER --- */
.wrap-head {
    background: #444444 url('/images/bgs/bgf01.jpg') no-repeat top center / cover;
    height: 90px;
}
.iner-head {
    position: relative;
    height: 100%;
}
.iner-head h1 {
    font-size: 2em;
    font-weight: 500;
    position: absolute;
    left: 2%;
    color: #fff;
}
.iner-head h1 img {
    width: 200px;
    max-width: 100%;
}
.iner-head h1 img.momc {display: none;}

.iner-head h1, .iner-head .mnv-btn {
    top: 50%; transform: translateY(-50%);    
}
/* - Mobile Menu - */
.iner-head #chx-mnv {display: none;}
.iner-head .mnv-btn {
    position: absolute;
    right: 3%;
    z-index: 30;
}
.iner-head .mnv-btn .total {
    position: relative;
    display: block;
    width: 35px;
    height: 35px;
    z-index: 50;
    cursor: pointer;
}
.iner-head .mnv-btn .total span, .iner-head .mnv-btn .total span:before, .iner-head .mnv-btn .total span:after {
    position: absolute;
    width: 100%;
    height: 5px;
    background: #fff;
    -ms-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;    
    border-radius: 15px;
}
.iner-head .mnv-btn .total span {display: block; top: 50%; transform: translate(0,-50%);}
.iner-head .mnv-btn .total span:before, .total span:after {content: ''; left: 0; top: 0;}
.iner-head .mnv-btn .total span:after {top: 10px;}
.iner-head .mnv-btn .total span:before {top: -10px;}
.iner-head .mobi-nav {
    display: block;
    width: 100%; 
    height: 100%; 
    position : fixed; 
    top: 0; 
    right: -100%; 
    z-index: 25; 
    background-color: rgba(0,0,0,0.93);
    transition: all 0.4s linear;
    text-align: center;
    color: #fff;
}
.iner-head .mobi-nav ul {
    width: 50%;
    max-width: 500px;
    margin: 190px auto 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.iner-head .mobi-nav li {
    font-size: 1.15em;
    padding: 13px 0;
    font-weight: 500;
    position: relative;
}
.iner-head .mobi-nav li:hover {color:#0BC8BA;}
.iner-head .mobi-nav li:not(:first-of-type):after {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    width: 70%;
    background-color: rgba(255,255,255,0.16);
    top: 0;
    left: 50%; 
    transform: translateX(-50%);    
}
.iner-head .mobi-nav li > a {display: block;}
.iner-head input:checked ~ .mobi-nav {right: 0;}
.iner-head input:checked ~ label .total span {background: rgba(225,245,136,0);}
.iner-head input:checked ~ label .total span:before {
    -webkit-transform: rotate(135deg); 
    -ms-transform: rotate(135deg); 
    transform: rotate(135deg); 
    margin-top: 10px; 
    background-color: #fff;
}
.iner-head input:checked ~ label .total span:after {
    -webkit-transform: rotate(-135deg); 
    -ms-transform: rotate(-135deg);     
    transform: rotate(-135deg); 
    margin-top: -10px; 
    background-color: #fff;
}   
.iner-head .mnv-btn .total, .head .mobi-nav {display: none;}
.nav-pcm {
    padding: 8px 0;
    background-color: #000;
    color: #fff;
    border-bottom: 1px solid rgba(100,100,100,0.2);
}
.nav-pcm .bx-navx {display: flex;}
.nav-pcm .bx-navx a {
    display: block;
    position: relative;
    flex: 1;
    text-align: center;
    font-weight: 500;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    word-wrap:normal;
    transition: color 0.3s;
}
.nav-pcm .bx-navx a:not(:first-child):before {
    content: '';
    display: block;
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 1px;
    height: 70%;
    background-color: rgba(255,255,255,0.35);
    left: 1px;
}
.nav-pcm .bx-navx a:hover {
    text-decoration: underline;
    color: #5ad4ff;
}
@media screen and (max-width:768px) {
    header {
        position: sticky;
        top: 0; left: 0;
        box-shadow: 0 0 3px rgba(0,0,0,0.8);
        z-index: 30;
    }
    .wrap-head {height: 70px;}
    .iner-head h1, .iner-head .mnv-btn {
        top: 50%; transform: translateY(-50%);    
    }
    .iner-head h1 {left: 2.5%;}
    .iner-head h1 img {width: 50px;}
    .iner-head h1 img.momc {display: block;}
    .iner-head h1 img.pcmc {display: none;}
    .iner-head .mobi-nav ul {
        width: 70%;
        margin: 35% auto 0;
    }    
    .iner-head .mnv-btn .total, .head .mobi-nav {display: block;}
    .nav-pcm {display: none;}
}
/* - End-Mobile Menu - */

/* - Search-Box - */
.bx-scht {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    left: 330px;
}
.bx-scht .iner-schx {position: relative;}
.bx-scht .iner-schx input, .bx-scht .iner-schx .btn-schxo {
    height: 40px;
}
.bx-scht .iner-schx input {
    width: 370px;
    font-size: 0.95em;
    border: 1px solid rgba(0,0,0,0.85);
    outline: none;
    padding: 0 43px 0 17px;
    border-radius: 40px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.7);
}
.bx-scht .iner-schx input::placeholder {color: #fff;}
.bx-scht .iner-schx .btn-schxo {
    font-size: 1.8em;
    position: absolute;
    right: 31px;
    top: 45%; transform: translateY(-50%);
    color: #333;
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s;
}
.bx-scht .iner-schx .btn-schxo:hover {color: #009eff;}
.bx-scht .tagclm {
    padding: 3px 0 0;
    overflow: hidden;
}
.bx-scht .tagclm a {display: inline-block; color: #fff; margin-left: 8px;}
.bx-scht .tagclm a:hover { text-decoration: underline; color: #ddd;}
.bx-scht .tagclm a:before {content: '#'; margin-right: 2.5px;}
.bx-scht .tagclm a:after {content: ','; color: #ddd;}

@media screen and (max-width:768px) {
    .bx-scht .tagclm {display: none;}
     .bx-scht { 
        left: 73px;
        width: calc(100% - 100px);
    }
    .bx-scht .iner-schx input {
        font-size: 1em;
        width: 100%;
        border-radius: 40px;
        box-sizing: border-box;
        color: #fff;
        padding: 0 40px 0 5px;         
        border-radius: 0;
        border: none;
        border-bottom: 2px solid #eee;
        background: linear-gradient(to bottom, transparent 70%, rgba(0,0,0,0.7));
    }   
    .bx-scht .iner-schx input::placeholder {color: #f2f2f2;}
    .bx-scht .iner-schx .btn-schxo {
        font-size: 1.8em;
        right: 0px;
        top: 45%; transform: translateY(-50%);
        color: #fff;
    }    
    .bx-scht .iner-schx input, .bx-scht .iner-schx .btn-schxo {height: 40px;}    
    .bx-scht .iner-schx input {width: 100%;}    
}

/* - End-Search-Box - */
/* --- END-HEADER --- */

/* - Top PR-Area - */
.wrap-itop {
    width: 100%;
    height: 150px;
    position: relative;
    overflow: hidden;
    background: #444 url('/images/bg-mov/bg-mto.jpg') no-repeat center / cover;
}
.wrap-itop #video_area {
   overflow: hidden;
    object-fit:cover;
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
.wrap-itop .bgbxo {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: -webkit-linear-gradient(rgba(0,0,0,1) 15%, rgba(0,0,0,0.1));
    background: -o-linear-gradient(rgba(0,0,0,1) 15%, rgba(0,0,0,0.1));
    background: linear-gradient(rgba(0,0,0,1) 15%, rgba(0,0,0,0.1));             
}
.wrap-topzonx {
    max-width: 900px;
    width: 60%;
    color: #fff;
    text-align: center;
    z-index: 2;
    position: absolute;
    top: 50%; left: 50%; 
    transform: translate(-50%,-50%);
}
.wrap-topzonx .mtitx {
    font-weight: 500;
    text-shadow: 0 0 2px rgba(0,0,0,1);
}
.wrap-topzonx .stitx {
    margin-top: 10px;
    font-weight: 350;
}
@media screen and (max-width:768px) {
    .wrap-itop {
        height: 325px;
        margin-top: 10px;
    }   
    .wrap-itop .bgbxo {background: rgba(0,0,0,0.4);}    
    .wrap-topzonx {
        max-width: 95%;
        width: 95%;
    }    
}
/*  - END-Top PR-Area - */  

/* --- MAIN --- */
.wrap-contents {}

/* - Top-Slide Show - */
.box-slidex {
    padding: 10px 1% 0;
    box-sizing: border-box;
}
.wrap-swpx {}
.wrap-swpx .bx-swpx {}
.bx-swpx .item-slxo {
    position: relative;
    border-radius: 7px;
    overflow: hidden;
}
.item-slxo .axo-img {
    display: block;
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    overflow: hidden;
}
.item-slxo .axo-img p, .item-slxo .axo-img p:after {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;    
} 
.item-slxo .axo-img p {
    overflow: hidden;
}
.item-slxo .axo-img img {
    display: block;
    width: 100%;
    min-height: 100%;
    transition: transform 0.4s;
}
.bx-swpx .item-slxo:hover .axo-img img {
     transform: scale(1.15);
}
.item-slxo .axo-img p:after{
    content: '';
    display: block;
    background-color: rgba(0,0,0,0.6);
}
.item-slxo .axo-desc {
    width: 100%;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    color: #fff;
    padding: 15px 10%;
    box-sizing: border-box;
    text-align: center;
}
.item-slxo .axo-desc .tix-axo {
    font-size: 1.5em;
    padding: 10px 15px;
    font-weight: 500;
    text-align: center;
    box-sizing: border-box;
}
.item-slxo .axo-desc .tix-axo span {
    max-height: 2.5em;
    line-height: 1.25em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: box;
    white-space: normal;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    overflow: hidden;
    text-overflow:ellipsis;     
}
.item-slxo .axo-desc .btn-axo {
    display: inline-block;
    font-size: 1em;
    font-weight: 500;
    margin-top: 10px;
    padding: 3px 17px;
    border-radius: 20px;
    background-color: transparent;
    border: 2px solid #fcea25;
    color: #fcea25;
    background-color: rgba(252,234,37,0.1);
}
.wrap-swpx button {outline: none;}
.wrap-swpx .swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
}
.wrap-swpx .swiper-button-prev, .wrap-swpx .swiper-button-next {
    width: auto;
    font-size: 50px; 
    color: rgba(255,255,255,0.2);
    background-image: none;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: color 0.3s;
}
.wrap-swpx .swiper-button-prev {left: -3px;}
.wrap-swpx .swiper-button-next {right: -3px;}
.wrap-swpx .swiper-button-prev:after, .wrap-swpx .swiper-button-next:after {
    content: none;
}
.wrap-swpx .swiper-button-prev:hover, .wrap-swpx .swiper-button-next:hover {
    color: rgba(255,255,255,1);
}

@media screen and (max-width:768px) {
    .box-slidex {padding: 10px 0 0;}
    .bx-swpx .item-slxo {border-radius: 0;}    
}
/* - END-Top-Slide Show - */

/* - Recommended Items - */
.wrap-contents .box-proposal {
    padding: 0 0 15px;
    border-bottom: 1px solid #eee;
}
.box-proposal li {
    width: 48%;
    margin: 1%;
    border-radius: 7px;
    overflow: hidden;
}
.bx-cxlist {
    display: flex;
    flex-wrap: wrap;    
}
.bx-cxlist li {
    box-shadow: 0 0 3px rgba(0,0,0,0.4);
    background-color: #fff;
    position: relative;    
}
.bx-cxlist li .captionx {
    height: 3.2em;
    display: block;
    position: relative;
    vertical-align:text-top;
    overflow: hidden;
}
.bx-cxlist li .captionx > span {
    display: block;
    text-align: center;
    margin: auto;
    width: 100%;
    left: 0; right: 0;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    padding: 0 10px;
    box-sizing: border-box;
    max-height: 2.6em;
    line-height: 1.3em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: box;
    white-space: normal;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    overflow: hidden;
    text-overflow:ellipsis;        
}
.box-proposal li .topstx {
    display: block;
    font-weight: 500;  
    font-size: 1.1em; 
    position: absolute;
    bottom: 0; left: 0; right: 0; width: 100%;
    height: 3.2em;
    text-align: center;
    color: #fff;
    background-color: rgba(0,0,0,0.68);
}
.bx-cxlist li .categoryx, .bx-cxlist li .iconx {
    display: block;
    position: absolute;
    z-index: 3;
}
.bx-cxlist li .categoryx {
    text-align: right;
    top: 0; right: 0;
    padding: 2px 7px;
    color: #fff;
    background-color: rgba(0,0,0,0.65);
}
.bx-cxlist li .iconx {
    top: 0; left: 0;
    width: 50px; height: 50px;
    color: #fff;
}
.bx-cxlist li .hotx {
    background: -webkit-linear-gradient(top left, rgba(220,53,69,0.8) 50%, transparent 50%);
    background: -o-linear-gradient(top left, rgba(220,53,69,0.8) 50%, transparent 50%);
    background: linear-gradient(to bottom right, rgba(220,53,69,0.8) 50%, transparent 50%);
}
.bx-cxlist li .hotx:after {content: 'HOT';}
.bx-cxlist li .newx {
    background: -webkit-linear-gradient(top left, rgba(0,158,255,0.8) 50%, transparent 50%);
    background: -o-linear-gradient(top left, rgba(0,158,255,0.8) 50%, transparent 50%);
    background: linear-gradient(to bottom right, rgba(0,158,255,0.8) 50%, transparent 50%);
}
.bx-cxlist li .newx:after {content: 'NEW';}
.bx-cxlist li .hotx:after, .bx-cxlist li .newx:after {
    display: block;
    transform: rotate(-45deg);
    position: relative; 
    font-size: 14.5px;
    font-weight: 500; 
    top: -1px; left: -1.5px;
}
.bx-cxlist li:hover img {
    transform: scale(1.1);
}
@media screen and (max-width:768px) {
    .box-proposal li {
        width: 98%;
        margin: 2% 1%;
    }
    .box-proposal li .topstx {
        font-size: 1.06em;
    } 
}
/* - END-Recommended Items - */

/* - Contents List - */
.wrap-contents .box-comlist {padding: 0 0 20px;}
.box-comlist li {
    width: 31.3%;
    margin: 1%;
    border-radius: 7px;
    overflow: hidden;
}
.box-comlist li .substx {
    text-align: center;    
    background-color: #f5f5f5;
    font-weight: 400;  
}
@media screen and (max-width:768px) {
    .box-comlist li {
        width: 48%;
        margin: 2% 1%;
    }  
    .box-comlist li .substx { }    
}
/* - END-Contents List - */

/* - Check-Information - */
.wrap-chkinfox {
    margin: 10px auto;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.6;
    background-color: #f4fbfe;
    font-weight: 350;
}
.wrap-chkinfox .bx-chkinfox {
    padding: 15px 17px;
    box-sizing: border-box;
}
/* - END_Check-Information - */

/* - Quize-Start Page - */
.wrap-pgq {}
.wrap-pgq .bx-titx {
    position: relative;
}
.wrap-pgq .bx-titx > h2 {
    background-color: #222;
    color: #fff;
    padding: 12px 15px;
    text-align: center;
    border-top: 2px solid #f4623a;    
    box-sizing: border-box;
}
.wrap-pgq .bx-titx h3 {
    padding: 8px 15px;
    box-sizing: border-box;
}
.bx-imgxo {
    display: block;
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    //background: #f8f8f8 url('/images/quize-bg/quzbg1.gif') no-repeat center;    
}
.quzxon > p {}
.quzxon2 > p {}
.bx-imgxo > p {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}
.bx-imgxo > p img {
    display: block;
    width: 100%;
    min-height: 100%;
    opacity: 1;
    transition: transform 0.4s;
}
.bx-imgxo .category {
    display: block;
    position: absolute;
    top: 10px; left: 0;
    padding: 11px 25px 11px 17px;
    z-index: 2;
    color: #fff;
    font-weight: 500;
    font-size: 1.1em;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    background: -webkit-linear-gradient(bottom left, rgba(0,0,0,0.5) 90%, transparent 90%);
    background: -o-linear-gradient(bottom left, rgba(0,0,0,0.5) 90%, transparent 90%);
    background: linear-gradient(to top right, rgba(0,0,0,0.5) 90%, transparent 90%);
}
.wrap-pgq .bx-contx {}
.wrap-quz .bx-conx, .bx-resultx, .wrap-pgq .bx-contx li {
    padding: 0 13px;
    box-sizing: border-box;
}
@media screen and (max-width:768px) {
    .wrap-quz .bx-conx, .bx-resultx, .wrap-pgq .bx-contx li {
        padding: 0 10px;
    }    
}
.gap-lbx {
    padding-bottom: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.wrap-pgq .bx-contx li {display: block;}
.bx-contx li.descript {
    padding-top: 23px;
    padding-bottom: 23px;
    line-height: 1.6;
    position: relative;
}
.bx-contx li.descript .source {
    display: block;
    text-align: right;
    font-size: 0.88em;
    font-weight: 350;
    padding: 13px 5px 3px;
    box-sizing: border-box;
}
.bx-contx li.fin-count, .btn-strx, .btnox-sns {
    text-align: center;
}
.bx-contx li.descript, .bx-contx li.btn-strx, .bx-contx li.tags {
    border-bottom: 1px solid #ddd;
}
.bx-contx li.btn-strx {
    background-color: #f5f5f5;
    padding-top: 35px;
    padding-bottom: 35px;
}
.bx-contx li.btn-strx .fin-count {
    padding-bottom: 15px;
}
.bx-contx li.btn-strx .fin-count > span {
    color:#13b2fd;
    font-weight: 500;
    font-size: 1.15em;
}
.bx-contx li.btn-strx .btn-startx {
    width: 70%;    
}
.bx-btnxo {text-align: center;}
.bx-btnxo .btn-startx {
    display: block;
    height: 50px; line-height: 48px;
    border-radius: 50px;
    border: none;
    margin: auto;
    background: -webkit-linear-gradient(left, #1cc6fb, #02d795);
    background: -o-linear-gradient(left, #1cc6fb, #02d795);
    background: linear-gradient(to right, #1cc6fb, #02d795);    
    color: #fff;
    cursor: pointer;
    font-weight: 550;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
    transition: transform 0.3s;
}
.bx-btnxo .btn-startx:hover {
    transform: translate(-1px,-2px);
}
.bx-btnxo .anirx {
    position: relative;
    overflow: hidden;
}
.bx-btnxo .anirx .bgx {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    background: -webkit-linear-gradient(40deg, transparent 16%, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.25) 35%, transparent 38%);
    background: -o-linear-gradient(40deg, transparent 16%, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.25) 35%, transparent 38%);
    background: linear-gradient(130deg, transparent 16%, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.25) 35%, transparent 38%);
    animation: veox 3.5s infinite;
}
@keyframes veox {
    0% {left: -15%;}
    100% {left: 105%;}
}

.bx-contx li.tags {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
}
.bx-contx li.tags > span {
    display: inline-block;
    font-size: 0.92em;
    color: #555;
    border: 1px solid #ddd;
    margin: 3px;
    padding: 3px 9px;
    box-sizing: border-box;
    border-radius: 40px;
}
.bx-contx li.tags > span:before {
    content: '#';
    margin-right: 2px;
    font-size: 0.9em;
    color: #666;
}
.btnox-sns {
    display: block;
    padding: 15px 0 20px;
    box-sizing: border-box;
}
.btnox-sns > h4 {
    text-align: center;
    padding-bottom: 10px;
}
.btnox-sns > a {
    display: inline-block;
    width: 47px; height: 47px;
    border-radius: 47px;
    overflow: hidden;
    margin: 5px;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.25);
    text-indent: -999em;
    transition: transform 0.4s;
}
.btnox-sns > a:hover {
    transform: translate(-2px,-2px);
}
.btnox-sns > a.x-facebook {background: #f5f5f5 url(/images/sns_btns/ico-facebook.jpg) center /cover;}
.btnox-sns > a.x-insta {background: #f5f5f5 url(/images/sns_btns/ico-insta.jpg) center /cover;}
.btnox-sns > a.x-kakao {background: #f5f5f5 url(/images/sns_btns/ico-kakao.jpg) center /cover;}
.btnox-sns > a.x-kastory {background: #f5f5f5 url(/images/sns_btns/ico-kakaost.jpg) center /cover;}
.btnox-sns > a.x-tweeter {background: #f5f5f5 url(/images/sns_btns/ico-twee.jpg) center /cover;}
.btnox-sns > a.x-url {background: #f5f5f5 url(/images/sns_btns/ico-url.jpg) center /cover;}

/*20220303 추가*/
.btnox-sns > a.x-url-q {background: #f5f5f5 url(/images/sns_btns/ico-url1.jpg) center /cover;}
.btnox-sns > a.x-url-r {background: #f5f5f5 url(/images/sns_btns/ico-url2.jpg) center /cover;}

.chk-infox {
    background-color: #f4fbfe;
    font-size: 0.93em;
    padding: 20px 12px;
    line-height: 1.5;
    box-sizing: border-box;
    font-weight: 350;
}
.chk-infox ul {
    list-style: disc;
    padding-left: 15px;
}
.chk-infox ul li::marker {
    color: #45c3fe;
}

@media screen and (max-width:768px) {
    .wrap-pgq .bx-titx > h2 {
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        padding: 12px 15px;
        box-sizing: border-box;
    }    
    .bx-contx li.btn-strx .btn-startx {
        width: 95%;    
    } 
  
}
/* - END-Quize-Start Page - */

/* - Quize-Page - */
.wrap-quz {}
.wrap-quz .title-ux {
    height: 60px;
    overflow: hidden;
    box-sizing: border-box;
}
.title-ux .topx {
    display: flex;
    line-height: 50px;    
    width: 100%;
    background-color: #222;
    color: #fff;
}
.title-ux .topx .title {
    flex: 1;
    padding: 0 15px;
    box-sizing: border-box;
    width: 100%;
    display: block;
    word-break : nowrap;
    overflow: hidden;
    text-overflow : ellipsis;    
}
.title-ux .topx .count {
    width: 95px;
    padding: 0 15px 0 10px;
    text-align: right;
    box-sizing: border-box;
    position: relative;
}
.title-ux .topx .count:before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 60%; 
    top: 50%; transform: translateY(-50%);
    border-left: 1px dotted #ccc;
}
.title-ux .count-bar {
    display: block;
    height: 10px;
    background-color: #ddd;
    position: relative;
}
.title-ux .count-bar > span {
    display: block;
    position: absolute;
    top: 0; height: 100%;
    left: 0; 
/*    width: 25%;*/
    background-color: #f4623a;
    border-radius: 2px;
}
.wrap-quz .title-ux .count .prosx {
    margin-right: 3px;
    color: #f4623a;
}
.wrap-quz .title-ux .count .all_quz:before {
    content: '/';
    margin-right: 3px;
}
.wrap-quz .bx-conx {
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}
.bx-conx .bx-question {
    padding-top: 30px;
    padding-bottom: 15px;
}
.bx-conx .bx-question > p {
    padding: 15px 11.5px 15px 56px;
    border: 1px solid #cdcdcd;
    box-sizing: border-box;
    font-weight: 500;
    border-radius: 5px;
    background-color: #f6fcff;
    position: relative;
    box-shadow: 0 1px 2.5px rgba(0,0,0,0.1);
}
.bx-conx .bx-question > p:before, .bx-conx .bx-question > p:after {
    position: absolute;
    display: block;
    top: 50%; transform: translateY(-50%);
    text-align: center;
}
.bx-conx .bx-question > p:before {
    content: 'Q';
    left: 8px;
    width: 35px; height: 35px; line-height: 32px;
    border-radius: 35px;
    color: #fff;
    font-size: 20px;
    font-weight: 550;
    background: -webkit-linear-gradient(left, #1cc6fb, #02d795);
    background: -o-linear-gradient(left, #1cc6fb, #02d795);
    background: linear-gradient(to right, #1cc6fb, #02d795);
    box-shadow: 0.2px 1px 3px rgba(0,0,0,0.45);
}
.bx-conx .bx-question > p:after {
    content: '';
    left: 48.5px;
    width: 1px; height: 70%;
    border-left: 1px solid rgba(100,100,100,0.17);
}
.bx-conx .bx-answer {
    padding-top: 10px;
    padding-bottom: 20px;
}
.bx-conx .bx-answer a {
    display: block;
    font-size: 1.05em;
    margin: 10px auto;
    padding: 10px 10px 10px 38px;
    border-radius: 5px;
    background-color: #fafafa;
    box-sizing: border-box;
    border: 1px solid #ccc;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
    transition: all 0.3s;
    position: relative;
    font-weight: 400;
}
.bx-conx .bx-answer a:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%; transform: translateY(-50%); left: 7px;
    width: 25px; height: 25px;
    background-color: #f7f7f7;
    border-radius: 25px;
    overflow: hidden;
    border: 6px solid #ddd;
    box-sizing: border-box;
}
.bx-conx .bx-answer a:hover {
    transform: translate(-1px,-2px);
    background-color: #444;
    color: #fff;
    font-weight: 500;
}
@media screen and (max-width:768px) {
    .wrap-quz .bx-conx {
        padding-bottom: 0;
        border-bottom: none;
        }
}
/* - END-Quize-Page - */

/* - Loaging Page - */
.bx-anaing {}
.bx-anaing ul {
    display: block;
    width: 90%;
    margin: 5% auto;
}
.bx-anaing li {
    display: block;
    text-align: center;
}
.bx-anaing li img {
    max-width: 70%;
}
.bx-anaing li.loading-txt {
    padding: 15px 5px 10px;
    box-sizing: border-box;
}
.bx-anaing li.loading-txt > p {
    animation: twinkle23 1.8s infinite;
    color: #02d795;
}
@keyframes twinkle23 {
    50% {opacity: 0; color:#1cc6fb; }
    99% {opacity: 1; color: #02d795;}
}
.btnbx-gap {
    padding: 25px 15px;
    box-sizing: border-box;
}
.btnbx-gap .btn-startx {
    width: 70%;
}
@media screen and (max-width:768px) {
    .bx-anaing ul {width: 95%;}    
    .btnbx-gap {padding: 25px 0;}    
    .btnbx-gap .btn-startx {
        width: 100%;
        border-radius: 8px;
    }
    .bx-anaing li img {
        max-width: 65%;
    }    
}
/* - END-Loaging Page - */

/* - Quize-Result - */
.titx3 {
    text-align: center;
    padding: 10px;
    border-bottom: 2px solid coral;
    box-sizing: border-box;
    background-color: #fff;
}
.bx-resultx {
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}
.sum-txo {
    padding: 17px 8px;
    text-align: center;
    box-sizing: border-box;
}
.sum-txo .xoi {
    padding: 2px 4px;
    background-color: #f4623a;
    color: #fff;
    border-radius: 3px;
}
.sum-txo h3 {
    color: #000;
}
.sum-txo h4 {
    margin-top: 10px;
    color: #555;
}
.bx-resultx .sub-txo {}
.sub-txo .su-type1 {}
.sub-txo .su-type1 li {
    display: block;
    padding: 8px 10px;
    box-sizing: border-box;
    margin: 10px auto;
    background-color: #ffd9ce;
    font-weight: 500;
    color: #333;
    border-top-left-radius: 9px;
    border-bottom-right-radius: 9px;    
}
.sub-txo .su-type2, .sub-txo .su-type3, .sub-txo .su-type4 {
    display: block;
    border: 1px solid #ccc;
    border-radius: 5px;
    line-height: 1.6;
    background-color: #fff;    
    box-shadow: 0 1px 4px rgba(0,0,0,0.15); 
    margin: 15px auto;
}
.sub-txo .su-type2 {
    padding: 13px 10px;
    overflow: hidden;    
    box-sizing: border-box;
}
.sub-txo .su-type3 {
    text-align: center;
    font-size: 1.2em;
    padding: 13px 10px;
    box-sizing: border-box;
}
.sub-txo .su-type3 > span {
    display: block;
    text-align: center;
    color: #f4623a;
    font-size: 1.5em;
    font-weight: 500;    
}
.sub-txo .su-type4 {text-align: center;}
.sub-txo .su-type4 .tito {
    padding: 7px 10px;
    background-color: #676767;
    color: #fff;
    font-size: 1.1em;
    font-weight: 500;    
}
.sub-txo .su-type4 .desco {
    padding: 13px 10px;    
}
.gapx-sns {
    padding: 10px 0 0;
}
@media screen and (max-width:768px) {
    .bx-resultx {
        padding-bottom: 10px;
        border-bottom: none;
    }
}
/* - END-Quize-Result - */

/* - Quize Plus - */
.wrap-pgq, .wrap-quz {padding-top: 5px;}

/* --- ADISE --- */
/* - Popular item List - */
.wrap-sidecx {
    padding: 0 7px 20px;
    box-sizing: border-box;
}
.box-popularix {
    padding-bottom: 10px;
}
.box-popularix .bx-poplist {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-sizing: border-box;
    counter-reset: var-count; 
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.bx-poplist li {
    display: block;
    padding: 0 5px;
    line-height: 40px;
    box-sizing: border-box;
    overflow: hidden;
}
.bx-poplist li a {
    display: block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    word-wrap:normal;    
}
.bx-poplist li a:before {
	counter-increment: var-count;
	content: counter(var-count);
    margin-right: 5px;
    font-weight: 500;
    color: #f4623a;
}
.bx-poplist li:not(:first-child) {
    border-top: 1px solid #ececec;
}
.bx-poplist li a:hover {
    font-weight: 500;
    color: #f4623a;
    text-decoration: underline;
    background-color: aliceblue;
}
/* - END- Popular item List - */

/* - Add item List - */
.bx-addsitx {
    padding: 10px 0;
}
.bx-addsitx li {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}
.bx-addsitx li:after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.4);
}
.bx-addsitx li:not(:first-child) {
    margin: 3% auto 0;    
}
.bx-cxlist li .captionx2 {
    display: block;
    width: 87%;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    z-index: 2;
    box-sizing: border-box;
}
.bx-cxlist li .captionx2 > span {
    font-size: 1.1em;
    font-weight: 500;
    color: #fff;
    padding: 5px 7.5px;
    box-sizing: border-box;
}
.bx-cxlist li .captionx2 .btnx {
    display: inline-block;
    margin: 15px auto 0;
    padding: 3.5px 18px;
    font-size: 0.9em;
    color: #fff;
    background-color: rgba(0,0,0,0.5);
    border-radius: 30px;
    border: 1px solid #111;
    font-weight: 500;
    transition: background-color 0.3s;
}
.bx-cxlist li .captionx2 .btnx:after {
    content: '테스트하기';
}
.bx-cxlist li .captionx2 .btnx:hover {
    background-color: rgba(0,0,0,1);
}
@media screen and (max-width:768px) {
    .bx-cxlist li .captionx2 > span {font-size: 1.2em;}
    .bx-cxlist li .captionx2 .btnx {margin: 20px auto 0; font-size: 1em;}    
}
/* - END-Add item List - */

/* - Ares-Banner - */
.ax-bnn {display: block; text-align: center; margin: 10px auto;}
.ax-bnn img {max-width: 100%;}


@media screen and (max-width:768px) {
    .wrap-contents .box-proposal, .wrap-contents .box-comlist {
        padding: 0 7px 20px;
    }
    .wrap-sidecx {
        padding: 0 0 20px;
        box-sizing: border-box;
    } 
    .box-popularix, .bx-addsitx {
        padding: 0 7px 10px;
        box-sizing: border-box;
    }
    
}
/* --- END-ADISE --- */

/* - Board-List - */
.wrap-listx {
    padding: 0 7px;
    box-sizing: border-box;
}
.bx-listx {
    width: 100%;
    table-layout: fixed;
}
.bx-listx thead  td {
    background-color: #f5f5f5;
    border-top: 1px solid #e5e5e5;
    box-sizing: border-box;
    font-weight: 550 !important;
    text-align: center !important;
    color: #444 !important;
}
.bx-listx td {
    line-height: 2.7em;
    text-align: center;
    font-weight: 350;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 3.5px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    word-wrap:normal;      
}
.bx-listx td.nx-num, .bx-listx td.nx-cate, .bx-listx td.nx-author, .bx-listx td.nx-date {
    font-size: 0.93em;
    color: #666;
}
.bx-listx td.nx-num {width: 70px;}
.bx-listx td.nx-title {
    text-align: left;
    font-weight: 400;
    overflow: hidden;
}
.bx-listx td.nx-title a {
    display: block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    word-wrap:normal;    
}
.bx-listx td.nx-title a:hover {
    text-decoration: underline;
}
.bx-listx td.nx-cate {width: 80px;}
.bx-listx td.nx-author {width: 75px;}
.bx-listx td.nx-date {width: 85px;}

.paginate {
    text-align: center;
    padding: 15px 5px;
    box-sizing: border-box;
}
.paginate a {
    padding: 2px 7px;
    box-sizing: border-box;
}
.paginate a:hover {
    color:coral;
    text-decoration: underline;
    font-weight: 550;
}

@media screen and (max-width:768px) {
    .bx-listx td.nx-num, .bx-listx td.nx-cate, .bx-listx td.nx-author, .bx-listx td.nx-date {
        font-size: 0.85em;
    }    
    .bx-listx td.nx-cate, .bx-listx td.nx-author {
        display: none;
    }
    .bx-listx td.nx-num {width: 60px;}
    .bx-listx td.nx-date {width: 75px;}
}
/* - END-Board-List - */

/* - Article-Page - */
.wrap-article {
    padding: 0 8px 20px;
    box-sizing: border-box;
}
.wrap-article .cate-um {
    position: relative;
    color: #666;
}
.wrap-article .cate-um h4 {
    font-size: 1.05em;
    padding: 0 0 10px;
    box-sizing: border-box;
}
.wrap-article .cate-um > span {
    position: absolute;
    right: 10px;
    top: 0;
}
.wrap-article .cate-um > span i {
    vertical-align: middle;
}
.wrap-article > h2.titx {
    font-size: 1.14em;
    line-height: normal;
    font-weight: 500;
    border-top: 1px solid #e9edf5;
    border-bottom: 1px solid #e9edf5;
    background-color: #f5f5f5;
    margin-top: 10px;
    padding: 11px 7px;    
    box-sizing: border-box;
}
.wrap-article .dateau {
    font-size: 0.95em;
    color: #777;
    text-align: right;
    padding: 5px 0 0;
}
.wrap-article .dateau span {
    padding: 0 7px;
    position: relative;
}
.wrap-article .dateau span.date:before {
    content: '';
    position: absolute;
    display: block;
    width: 1px;
    height: 70%;
    top: 50%; transform: translateY(-50%);
    left: 0;
    background-color: #ddd;
}
.wrap-article .btn-bx {
    padding: 15px 0 7px;
    box-sizing: border-box;
}
.wrap-article .btn-bx > a {
    outline: none;
    padding: 0 13px;
    height: 38px;
    line-height: 38px;
    color: #fff;
    border-radius: 3px;
    box-sizing: border-box;
}
.wrap-article .btn-bx .btn-sm1 {
    background-color: #ddd;
    color: #333;
    float: left;
    margin-right: 10px;
}
.wrap-article .btn-bx .btn-sm2{
    background-color: #444;
    font-weight: 500;
    padding: 0 13px;
    float: right;
}
.wrap-article .content-bx {
    line-height: 1.6;
    padding: 7px 0 18px;
}
.wrap-article .content-bx img {
    display: block;
    max-width: 100%;
    margin: 10px auto;
}
.wrap-article .sharing {
    text-align:right;
    padding: 15px 5px 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;    
}
.wrap-article .sharing > a {
    display: inline-block;
    margin: 0 3.5px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-repeat: no-repeat;
    border: 1px solid #eee;
    box-sizing: border-box;
    transition: transform 0.2s;
}
.wrap-article .sharing > a:hover {
    transform: translate(-1px,-1.5px);
}

.wrap-article .sharing > a:first-child {background: #f5f5f5 url(/images/sns_btns/ico-facebook.jpg) center /cover;}
.wrap-article .sharing > a:nth-of-type(2){background: #f5f5f5 url(/images/sns_btns/ico-insta.jpg) center /cover;}
.wrap-article .sharing > a:nth-of-type(3){background: #f5f5f5 url(/images/sns_btns/ico-kakao.jpg) center /cover;}
.wrap-article .sharing > a:nth-of-type(4){background: #f5f5f5 url(/images/sns_btns/ico-kakaost.jpg) center /cover;}
.wrap-article .sharing > a:nth-of-type(5){background: #f5f5f5 url(/images/sns_btns/ico-twee.jpg) center /cover;}
.wrap-article .sharing > a:nth-of-type(6){background: #f5f5f5 url(/images/sns_btns/ico-url.jpg) center /cover;}

@media screen and (max-width:768px) {
    .wrap-article .sharing {text-align:center;}
}
/* - Article-Page-End - */

/* ---- END-MAIN ---- */

/* ----- FOOTER ----- */
.wrap-foot {
    padding-top: 10px;
    background-color: #333;
    color: #eee;
}
.wrap-foot .bx-footx {
    font-size: 0.9em;
    padding: 0 15px 0;
    box-sizing: border-box;
    text-align: center;
}
.bx-footx .bu-menu {
    margin: 5px auto 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.bx-footx .bu-menu a {
    flex-basis: 100px;
    display: block;
    text-align: center;
    padding: 2px 0;
    color: #eee;
}
.bx-footx .bu-menu a:hover {
    text-decoration: underline;
}
.bx-footx .descrix {
    width: 95%;
    color: #ccc;
    margin: 10px auto 15px;
}
.bx-footx .descrix p {text-align: center;}
.wrap-foot .copya {
    font-size: 14px;
    text-align: center;
    color: #888;
    padding: 7px 15px;
    box-sizing: border-box;
    background-color: #111;
}
@media screen and (max-width:768px) {
}
/* ----- END-FOOTER ----- */

/* - Top-Button - */
#Btn-Up {
    display: none;
    width: 46px;
    height: 46px;
    text-align: center;
    vertical-align: middle;
    border-radius: 43px;
    background-color: rgba(0,0,0,0.5);
    box-shadow:0 4px 32px 0 rgba(0,0,0,.175);
    border: 1px solid rgba(0,0,0,0.07);   
    box-sizing: border-box;
    position: fixed;   
    right: 5%;         
    bottom: 23px;       
    z-index: 15;
    font-size: 1.2em;
}
#Btn-Up:hover {background-color: rgba(0,0,0,0.5);}
#Btn-Up > i {
    vertical-align: middle;
    position: relative;
    top: 2px;
    color: #eee;
}
#Btn-Up > i:hover {color: #fff;}
/* - Top-Button-End - */

/* more-Btn */
.btn-moxi {
    display: block;
    text-align: center;
    font-weight: 550;
    font-size: 1em;
    color: #000;
    background-color: #eaedf2;
    padding: 9px;
    margin: 12px auto 10px;
    box-sizing: border-box;
}
.btn-moxi:hover {
    color: #000;
    background-color: #ddd;
}
.pagingBx {
    display: flex;
    justify-content: center;
    margin: 20px auto 15px;
}
.pagingBx > a {
    width: 25px; height: 25px;
    text-align: center; line-height: 25px;
    background-repeat: no-repeat;
    margin: 0 2px;
}
.pagingBx > a.on {
    color: #f42827;
    font-weight: 600;
    text-decoration: underline;
}
.pagingBx > a.prevpbtn {
    background: url('/images/icons/chevron-left-wgs.svg') center / 80%;
}
.pagingBx > a.nextpbtn {
    background: url('/images/icons/chevron-right-wgs.svg') center / 80%;
}