@import url("../../css/NanumBarunGothic.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Noto+Serif+KR:wght@300;400;500;700&display=swap');

/*공통*/
html,
body { height: 100%; }
body.black { background: #2d2d2d; }
* { /*outline: 1px dashed #3dd8ff;*/ }
img { display: block; }
.clear:after { content: ""; display: block; clear: both; }
/*gnb*/
#gnb { position: fixed; left: 0; top: 0; width: 100%; height: 120%; background-image: url(../img/common/bg.png); z-index: 2000; }
#gnb .close { cursor: pointer; }
#gnb .close img { float: right; height: 22px; margin: 22px 20px 22px 20px; }
#gnb .wrap { margin: 0 20px; border-bottom: 1px solid #ffe8f6;  }
#gnb .wrap > li { position: relative; border-top: 1px solid #ffe8f6; overflow: hidden; height: 50px; }
#gnb .one { height: 50px; }
#gnb .title { position: absolute; left: 8px; top: 17px; cursor: pointer; }
#gnb .title img { height: 20px; }
#gnb .arrow { position: absolute; right: 15px; top: 13px; }
#gnb .arrow img { display:block; height: 25px; }
#gnb .two { margin-bottom: 13px; margin-top:5px}
#gnb .two li { margin-left: 8px; height: 24px; }
#gnb .two li img { height: 16px; }
/*wrap*/
#wrap { position: relative; margin: 0 10px; }
/*top*/
#top { position: relative; border-bottom: 1px solid #ccc; margin-bottom: 12px; z-index: 1000; }
body.black #top {border-bottom: 1px solid #525252; }
#top .logo { width: 100%; }
#top .bt { position: absolute; right: 0px; top: 50%; margin-top: -20px; cursor: pointer; width: 40px; }
#top .right { position: fixed; right: 10px; bottom: 30px; z-index: 1100 }
#top .right img { display: block; width: 34px; }
/*main*/
#main li { position: relative; }
#main a > img { display: block; width: 100%; }
/*sub*/
#sub img { display: block; width: 100%; }
/*video*/
#video div { position: relative; }
#video img { display: block; width: 100%; }
#videoPlayer { display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 1001; }
#videoPlayer iframe { width: calc(100% - 20px); height: 80vw; margin: 80px 10px; background: #000; }
#videoPlayer .close { position: absolute; top: 50px; right: 10px; }
#videoPlayer .close > img { height: 22px; }
/*portfolio*/
.portTitle { width: 100%; margin-top:30px;}
#port { position: relative; margin-top: 15px; margin-bottom: 15px; }
#portList { position: relative; }
#portList li { position: absolute; cursor: pointer; }
#portList li > button { display: block; width: 100%; margin-left: 18px; text-align: left; }
#portList li > button > p.kr { margin-top: 10px; color: #f645aa; font-family: 'NanumBarunGothicBold'; font-size: 12px; }
#portList li > button > p.eng { margin-top: 0px; color: #ffffff; font-family: Roboto; font-size: 11px; }
/* #portList li > p { height: 100%; text-indent: -9999px; background-repeat: no-repeat; background-position: left top; background-size: 300%; } */
/* #portList.act0 li > p { background-image: url("../img/portfolio/port0.png") }
#portList.act1 li > p { background-image: url("../img/portfolio/port1.png") }
#portList.act2 li > p { background-image: url("../img/portfolio/port2.png") }
#portList.act3 li > p { background-image: url("../img/portfolio/port3.png") } */
/* #portList .on { position: absolute; left: 0; top: 0; opacity: 0; } */
#portList img { display: block; width: 100%; height: 100%; }
#portBig { display: none; position: absolute; top: 0; width: 100%; }
#portBig .wrap { width: 100%; }
#portBig .mask { position: absolute; overflow: hidden; width: 100%; height: 440px; border-bottom: 1px solid #606060; }
#portBig .content { position: absolute; width: 100%; height: 440px; border-top: 1px solid #606060; }
#portBig .close { position: absolute; right: 0; top: 0; cursor: pointer; }
#portBig .close img { height: 29px; }
#portBig .sub .subCon { position: relative; }
#portBig .cv { height: 156px; margin-top: 20px; }
#portBig .cv .align0 { float: left; width: 50%; }
#portBig .cv .align1 { float: left; width: 50%; }
#portBig .cv .align1 div { word-break: break-all; }
#portBig .cv .photo { width: 100px; height: 125px; background-repeat: no-repeat; background-position: left center; background-size: contain; }
#portBig .cv .name_kor { font: 13px/16px NanumBarunGothicBold; color: #FF3FB4; }
#portBig .cv .name_eng { font: 700 13px/16px Roboto; color: #FF3FB4; margin-bottom: 20px; }
#portBig .cv .birth,
#portBig .cv .hp,
#portBig .cv .email,
#portBig .cv .homepage { font: 700 11px/15px Roboto; }
#portBig .gallery { height: 244px; margin-bottom: 20px; }
#portBig .gallery .big { height: 100%; }
#portBig .gallery .big li { position: absolute; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; }
#portBig .gallery .arrow0 { position: absolute; top: 95px; left: 0px; cursor: pointer; }
#portBig .gallery .arrow1 { position: absolute; top: 95px; right: 0px; cursor: pointer; }

/*footer*/
#footer { position:relative; height: 40px; padding-bottom: 20px; margin: 40px 10px 0; }
#footer .footerLogo { float: left; width: 106px; height: 40px; background: url("../img/common/footer_logo_gray.png") no-repeat left top; background-size: 100%; }
#footer .footerLink { float: right; height: 42px; background: url("../img/common/footer_link_gray.png") no-repeat; background-size: auto 100%; padding-top:20px; padding-left:5px}
body.black #footer .footerLogo { background-image: url("../img/common/footer_logo_white.png"); }
body.black #footer .footerLink { background-image: url("../img/common/footer_link_white.png"); }
#footer .top { display: block; position: absolute; width: 26px; right: 10px; bottom: 60px; }
#footer .top>img { display: block; width: 100%; height: auto; }
body.main #footer { margin-top: 0; }
body.main #footer .top { display: none; }

#footer i {font-size:18px; color:#c3c3c3; vertical-align:middle;}
body.black #footer i {color:#fff;}




.sub-navi {border-bottom: 1px solid #ccc; padding-bottom:10px; margin-bottom:20px;}
.sub-navi .navi-1 {color:#f1246c; font-size:18px; font-family: 'Noto Serif KR', serif; font-weight:700; letter-spacing:-0.04em;}
.sub-navi .navi-2 {color:#aaa; font-size:14px; font-family: 'Noto Sans KR', sans-serif; font-weight:400; letter-spacing:-0.02em; padding-top:3px; }
body.black .sub-navi {border-bottom: 1px solid #525252;}

.txtBox {font-size:13px; font-family: 'Noto Sans KR', sans-serif; line-height:140%;}
.dGray {color:#888}
.point {color:#f1246c;}
.white {color:#fff;}

/* FCD 졸업준비위원회 & 오시는길 */
.fcdBox {border-bottom:1px solid #e8e8e8; padding:15px 0;}
.fcdBox h4 {color:#f1246c; font-size:16px; font-family: 'Noto Serif KR', serif; }
.fcdBox h4 span {font-size:14px; font-family: 'Noto Sans KR', sans-serif; }
.fcdBox p {padding-top:5px;}
.fcdBox.col2 {display:flex; justify-content:space-between;}
.fcdBox.col2 > div {width:47%}

/* 연혁 */
.subHistroy p {position:relative; padding:3px 0; padding-left:70px; font-size:13px; font-family: 'Noto Sans KR', sans-serif; line-height:140%;}
.subHistroy span.date {position:absolute; left:0; top:5px; }

/* 전시개요 */
.infoBox h4 {color:#f1246c; font-size:18px; font-family: 'Noto Serif KR', serif; margin-top:20px;}
.infoBox h4 span {display:block; padding-top:10px; font-size:16px; font-family: 'Noto Sans KR', sans-serif; }
.infoBox p {padding-top:5px; font-size:15px;}


/* portfolio */
.pt-title {background:#f1246c; padding:15px; font-size:24px; color:#fff; font-family: 'Noto Serif KR', serif; font-weight:bold; line-height:110%;}
h4.pt-subject {color:#f1246c; font-size:16px; font-family: 'Noto Serif KR', serif; padding-top:30px; padding-bottom:5px;}