{margin:0;padding:0;border:0;font-size:100%;/*font:inherit;*/vertical-align:baseline;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%}table{border-collapse:collapse;border-spacing:0}
img{max-width:100%;border:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}
strong {font-weight:normal;}
ol,ul{list-style:none}
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0;box-sizing: border-box;}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
ol,ul,li{list-style:none}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
abbr,acronym{border:0}
hr{display:none;clear:both}
legend,caption{visibility:hidden;overflow:hidden;position:absolute;width:0;height:0;margin:0;padding:0;line-height:0; display:none; letter-spacing:-9999px}
img,fieldset{border:0 none}
label{cursor:pointer}
.fancybox__content {padding:1rem !important}
.fancybox__container {z-index:9901 !important}
.moreBtn {display:flex; justify-content:center; margin-bottom:var(--secgap)}
.moreBtn a {display:block; padding:1rem;}
.moreBtn a p {display:block; margin-top:var(--padding-s)}
.moreBtn a p span {color:var(--color-9); font-size:var(--text-xs)}
.moreBtn a:before {
	content:""; 
	width:48px;
	height:48px;
	margin:0 auto;
	background-image:url("/youth/images/common/chevrons-down.svg");
	background-repeat:no-repeat;
	background-size:cover;
	display:block; 
	transition:.2s ease-out; 
	-webkit-animation:balloon1 1.2s ease-in-out infinite; 
	-moz-animation:balloon1 1.2s ease-in-out infinite; 
	-o-animation:balloon1 1.2s ease-in-out infinite; 
	animation:balloon1 1.2s ease-in-out infinite; 

}
.moreBtn a:hover {border-color:#333}

.topSCH {display:flex; justify-content:flex-end}
.bbsschW {position:relative; width:340px; max-width:100%; margin-bottom:var(--margin-m); height:50px; border:2px solid rgba(0,0,0,0.6); border-radius:10px; padding:10px 1em}
.bbsschW input {height:30px; width:calc(100% - 50px); border:0}
.bbsschW input:focus{outline:0}
.bbsschW .sbtn {position:absolute; right:1em; top:50%; transform: translateY(-50%); color:#333;}

@keyframes balloon1 { 
	0%,100%{ transform:translate(0, 1rem);} 
	50%{ transform:translate(0, 0); } 
}




 /*상세화면*/
    #detail_pop_up {
        position: fixed !important;
        display: none;
        background: #fff;
    }

    #detail-button {
        cursor: pointer;
        color: #fff
    }

    table #detail-button {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #222
    }

    .artinfoBox {
        width: 94%;
        min-width: 320px;
        max-width: 700px;
        border-radius: 5px;
        margin: 0 auto;
        background: #fff;
        position: absolute;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        z-index: 9001
    }

    .rowBox {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        /*align-items: center;*/
        margin: 0 auto;
    }

    .popupW div:nth-of-type(2) {
        margin-bottom: 1.25rem !important
    }

    .rowBox.bLind {
        border-bottom: 1px dashed #ccc;
        padding: 1rem 0
    }

    .rowBox h4,
    .bLind h4 {
		font-family: 'SBAggroM';
        width: 100%;
        font-size:0.825rem
        color: #ccc;
        margin-bottom: 0.333rem
    }

    .rowBox pre {
        white-space: pre-wrap;
        font-family: 'Pretendard', 'Malgun Gothic', '돋움';
        font-size: 0.825em;
        line-height: 1.5em;
        color: #555;
        font-weight: 300
    }

    #detail_pop_up .popupW {
        position: relative;
        width: 100%;
        padding: 1em;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        overflow-y: scroll
    }

    #detail_pop_up .popupW>.popup-close {
        box-shadow: none
    }

    #detail_pop_up .popupW:before {
        background: none
    }

    #detail_pop_up .popupW {
        overflow-y: auto;
    }

    #detail_pop_up .popupW .popup-close {
        position: absolute;
        z-index: 9500;
        right: 1em;
        top: 1em;
        width: 50px;
        height: 50px;
        cursor: pointer;
        line-height: 50px;
        background: #fff;
        color: #333;
        text-align: Center;
        font-size: 14px;
    }

    #detail_pop_up .popupW .popup-close span {
        background: #ccc;
        width: 14px;
        height: 2px;
        display: block;
        margin: 7px 8px;
        border-radius: 35px;
        transition: all 0.3s cubic-bezier(0.81, -0.33, 0.345, 1.375);
    }

    #detail_pop_up .popupW .popup-close span:nth-of-type(2) {
        position: relative;
        width: 30px;
        opacity: 0;
    }

    #detail_pop_up .popupW .popup-close span:first-of-type {
        width: 30px;
        margin-top: 18px;
        transition: all 0.6s;
        transform: rotate(-45deg) translate(-4px, 8px);
    }

    #detail_pop_up .popupW .popup-close span:last-of-type {
        position: relative;
        width: 30px;
        margin-top: 0;
        transform: rotate(45deg) translate(-4px, -8px);
    }

    .myPic {
		position:relative;
        width: 100px; 
		background-color:#f5f5f5;
    }

	.myPic:after {
		content:"";
		display:block;
		width:50px;
		height:50px;
		background-image:url("/youth/images/common/smile.svg");
		background-repeat:no-repeat;
		background-size:cover;
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		opacity:0.3
		
	}

    .myPic img {
		box-sizing: border-box;
        padding: 0.666rem;
        border: 1px solid #eee;
		max-width:100%;
    }

    .profile {
        width: calc(100% - 120px)
    }

    .profile dl dt {
        width: 120px;
		font-size:0.825rem;
		color:#ccc;
    }

    .profile dl dd {
        width: calc(100% - 120px)
    }

    .profile dl dd {
        font-size: 1em;
        margin-bottom: 0.444em
    }

    .profile dl {
        display: flex;
        flex-flow: row wrap;
        margin-bottom: 2rem
    }

    .profile dl dt,
    .profile dl dd {
		font-family: 'SBAggroM';
        margin-bottom: 0.555em
    }

    .profile dl dt {
        position: relative;
        width: 30%;
        padding-left: 0.666em;
        color: #666;
        font-weight: 300
    }

    .profile dl dt:before {
        content: "";
        position: absolute;
        left: 0;
        top: 6px;
        width: 4px;
        height: 4px;
        background: #666
    }

    .profile dl dd {
        width: 70%;
        color: #000;
    }

    .profile .btnW {
        width: 90%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between
    }

    .profile .btnW li {
        width: 48%;
        margin: 0 0 4% 0
    }

    .profile .btnW li a {
        width: 100%
    }

    .profile dl dd i {
        color: #ccc
    }

    .mysnsLink {
        display: flex;
        justify-content: center
    }

    .mysnsLink a {
        padding: 5px;
        margin: 1rem 0.333rem;
        display: block;
    }

    .mysnsLink a span {
        display: none
    }

    .mysnsLink a:before {
        display: block;
        content: "";
        font-family: xeicon !important;
        color: #ccc;
        transition: .3s;
    }
    
    .mysnsLink a.sns_facebook:before {content:"\ebd3"}
    .mysnsLink a.sns_instagram:before {content:"\ebe9"}
    .mysnsLink a.sns_twitter:before {content:"\ec1f"}
    .mysnsLink a.sns_youtube:before {content:"\ec31"}

    .mysnsLink a:hover:before {
        color: #666
    }

    .grid {

        max-width: 700px;
        height: 75%;
        /* inherit height from body */
    }

    /* clear fix */
    .grid:after {
        content: '';
        display: block;
        clear: both;
    }

    /* ---- .grid-item ---- */

    .grid-item {
		position:relative !important;
        float: left;
        width: 200px;
        /*height:200px;*/
        margin: 1%;
        background: #fff;
        /*border: 0px solid #333;
		border-color: hsla(0, 0%, 0%, 0.7);*/
    }

    .grid-item img {
        width: auto;
        height: 100%
    }

    .grid-item a {
        display: block;
        position: relative
    }

    .grid-item a:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        -webkit-transition: all 0.5s ease-out 0s;
        -moz-transition: all 0.5s ease-out 0s;
        -ms-transition: all 0.5s ease-out 0s;
        -o-transition: all 0.5s ease-out 0s;
        transition: all 0.5s ease-out 0s;
        filter: alpha(opacity=0);
        opacity: 0;
    }

    .grid-item a:hover:after {
        opacity: 1
    }

    .grid-item--width2 {
        width: 400px;
    }

    .grid-item--height2 {
        height: 400px;
    }

    .artName {
        position: absolute;
        z-index: 2;
        width: 90%;
        left: 50%;
        top: 60%;
        transform: translate(-50%, -50%);
        opacity: 0;
        color: #fff;
        text-align: center;
        transition: all 0.5s ease-out 0s;
    }

    .artName dt {
        font-weight: 500
    }

    .artName dd {
        font-size: 0.725rem
    }

    .grid-item a:hover .artName {
        top: 50%;
        opacity: 1;
    }

	.popLink {
		display:flex;
		justify-content:center;
		align-items:center;
		flex-flow:row wrap;
		gap:0.333rem;
		position:relative;
		color:#333;
	}
	.popLink:after {
		display:flex;
		align-items:center;
		justify-content:center;
		content:"";
		width:16px;
		height:16px;
		background-image:url("/youth/images/common/plus.svg");
		background-size:80%;
		background-position:center center;
		background-repeat:no-repeat;
		transition: all 0.5s ease-out 0s;
	}
	.popLink:hover:after {
		background-color:var(--color-c);
		border-radius:var(--radius20);
	}

    @media all and (min-width:1000px) {
        .rowBox {
            max-width: none
        }

        #detail_pop_up .popupW {
            padding: 2rem;
            min-height: 680px;
        }

        #detail_pop_up .popupW h3 {
            font-size: 2.125em;
            margin: 1em 0 0.875em 0
        }


    }

    @media all and (min-width:1500px) {
        #detail_pop_up .popupW {
            padding: 3rem;
        }
    }