@import url("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');
/*공통*/
body { overflow-y: scroll; }
body.black { background: #2d2d2d; }
* { /*outline: 1px dashed #ff0000;*/ }
.clear:after { content: ""; display: block; clear: both; overflow: hidden; }
map area { outline: 0; }
/*구조*/
#wrap { position:relative; margin: 30px auto; width: 1138px; }
.wrapInner { margin: 0 auto;}
.wrapLeft1 { float: left; width: 225px; margin-right: 25px; padding-top:40px;}
.wrapRight { position: relative; float: right; width: 888px;}
#wrap .top { position: absolute; right:0; bottom: 60px; }
/*sub*/
#sub, #subFrame {padding-top: 30px;}
#sub .subImg { display: block; }
#subFrame iframe { width: 100%; height: auto; min-height: 479px; border: 0; }
/*logo*/
#logo { position: absolute; left: 0px; top: 73px; }
#logo img { display: block; }

/*history*/
body.black #history {display:flex; justify-content:flex-end; padding: 1px 0; background:none;}
body.black #history li a {width:50px; height:50px; display:flex; justify-content:center; align-items:center; text-align:center; font-size:11px; line-height:110%; color:#fff; background:#4d4d4d; border-left:1px solid #5f5f5f; font-weight:700;}
body.black #history li a:hover {background:#646464;}
body.black #history li:first-child a {border-left:none;}

#history {display:flex; justify-content:flex-end; padding: 1px 0;  background: url("../img/common/bg-topHistory.gif") repeat-y right 0;}
#history li a {width:50px; height:50px; display:flex; justify-content:center; align-items:center; text-align:center; font-size:11px; line-height:110%; color:#fff; border-left:1px solid rgba(255,255,255,0.2); font-weight:700;}
#history li a:hover {background:rgba(255,255,255,0.2);}
#history li:first-child a {border-left:none;}

/*gnb*/
#gnb { padding-bottom: 23px; }
#gnb .one > li { float: left; }
#gnb .one > li.about { width: 198px; }
#gnb .one > li.info { width: 154px; }
#gnb .one > li.portfolio { width: 150px; }
#gnb .one > li.video { width: 164px; }
#gnb .one > li.lookbook { width: 140px; }
#gnb .one > li.board { width: 82px; }
#gnb .one > li > a { display: block; height: 61px; text-indent: -9999px; background: url("../img/common/gnb_0_gray.png") no-repeat left top; }
body.black #gnb .one > li > a { background-image: url("../img/common/gnb_0_white.png"); }
body #gnb .one > li > a.on { background-image: url("../img/common/gnb_0_pink.png"); }
body.black #gnb .one > li > a.on { background-image: url("../img/common/gnb_0_pinkWhite.png"); } /* 22.06.23 - 라인색이 달라 추가 */
#gnb .one > li.about > a { background-position: 0; }
#gnb .one > li.info > a { background-position: calc(-198px); }
#gnb .one > li.portfolio > a { background-position: calc(-198px - 154px); }
#gnb .one > li.video > a { background-position: calc(-198px - 154px - 150px); }
#gnb .one > li.lookbook > a { background-position: calc(-198px - 154px - 150px - 164px); }
#gnb .one > li.board > a { background-position: calc(-198px - 154px - 150px - 164px - 140px); }

#gnb .two > li > a { display: block; height: 24px; text-indent: -9999px; background: url("../img/common/gnb_1_gray.png") no-repeat left top; }
body.black #gnb .two > li > a { background-image: url("../img/common/gnb_1_white.png"); }
body #gnb .two > li > a.on { background-image: url("../img/common/gnb_1_purple.png"); }
#gnb li.about .two > li:nth-child(1) > a { background-position: 0 0; }
#gnb li.about .two > li:nth-child(2) > a { background-position: 0 -24px; }
#gnb li.about .two > li:nth-child(3) > a { background-position: 0 -48px; }
#gnb li.about .two > li:nth-child(4) > a { background-position: 0 -72px; }
#gnb li.about .two > li:nth-child(5) > a { background-position: 0 -96px; }
#gnb li.info .two > li:nth-child(1) > a { background-position: -198px 0; }
#gnb li.info .two > li:nth-child(2) > a { background-position: -198px -24px; }
#gnb li.info .two > li:nth-child(3) > a { background-position: -198px -48px; }
#gnb li.info .two > li:nth-child(4) > a { background-position: -198px -72px; }
#gnb li.info .two > li:nth-child(5) > a { background-position: -198px -96px; }
#gnb li.portfolio .two > li:nth-child(1) > a { background-position: -352px 0; }
#gnb li.portfolio .two > li:nth-child(2) > a { background-position: -352px -24px; }
#gnb li.portfolio .two > li:nth-child(3) > a { background-position: -352px -48px; }
#gnb li.portfolio .two > li:nth-child(4) > a { background-position: -352px -72px; }
#gnb li.portfolio .two > li:nth-child(5) > a { background-position: -352px -96px; }
#gnb li.video .two > li:nth-child(1) > a { background-position: -502px 0; }
#gnb li.video .two > li:nth-child(2) > a { background-position: -502px -24px; }
#gnb li.video .two > li:nth-child(3) > a { background-position: -502px -48px; }
#gnb li.video .two > li:nth-child(4) > a { background-position: -502px -72px; }
#gnb li.video .two > li:nth-child(5) > a { background-position: -502px -96px; }
#gnb li.lookbook .two > li:nth-child(1) > a { background-position: -666px 0; }
#gnb li.lookbook .two > li:nth-child(2) > a { background-position: -666px -24px; }
#gnb li.lookbook .two > li:nth-child(3) > a { background-position: -666px -48px; }
#gnb li.lookbook .two > li:nth-child(4) > a { background-position: -666px -72px; }
#gnb li.lookbook .two > li:nth-child(5) > a { background-position: -666px -96px; }
#gnb li.board .two > li:nth-child(1) > a { background-position: -806px 0; }
#gnb li.board .two > li:nth-child(2) > a { background-position: -806px -24px; }
#gnb li.board .two > li:nth-child(3) > a { background-position: -806px -48px; }
#gnb li.board .two > li:nth-child(4) > a { background-position: -806px -72px; }
#gnb li.board .two > li:nth-child(5) > a { background-position: -806px -96px; }

/*lnb*/
#lnb .one {margin-bottom: 8px; }
#lnb .one img { display: block; }
#lnb .two > li > a { display: block; height: 28px; text-indent: -9999px; background-repeat: no-repeat; }
#lnb .two > li:nth-child(1) > a { background-position: 0 0; }
#lnb .two > li:nth-child(2) > a { background-position: 0 -28px; }
#lnb .two > li:nth-child(3) > a { background-position: 0 -56px; }
#lnb .two > li:nth-child(4) > a { background-position: 0 -84px; }
#lnb .two > li:nth-child(5) > a { background-position: 0 -112px; }
#lnb .two > li:nth-child(6) > a { background-position: 0 -140px; }
#lnb .two > li:nth-child(7) > a { background-position: 0 -168px; }
#lnb .two.act0 > li > a { background-image: url("../img/common/lnb0_gray.png"); }
#lnb .two.act0 > li > a.on { background-image: url("../img/common/lnb0_purple.png"); }
#lnb .two.act1 > li > a { background-image: url("../img/common/lnb1_gray.png"); }
#lnb .two.act1 > li > a.on { background-image: url("../img/common/lnb1_purple.png"); }
#lnb .two.act2 > li > a { background-image: url("../img/common/lnb2_white.png"); }
#lnb .two.act2 > li > a.on { background-image: url("../img/common/lnb2_purple.png"); }
#lnb .two.act3 > li > a { background-image: url("../img/common/lnb3_white.png"); }
#lnb .two.act3 > li > a.on { background-image: url("../img/common/lnb3_purple.png"); }
#lnb .two.act4 > li > a { background-image: url("../img/common/lnb2_white.png"); }
#lnb .two.act4 > li > a.on { background-image: url("../img/common/lnb2_purple.png"); }
#lnb .two.act5 > li > a { background-image: url("../img/common/lnb5_gray.png"); }
#lnb .two.act5 > li > a.on { background-image: url("../img/common/lnb5_purple.png"); }

/*footer*/
#footer { position:relative; height: 50px; margin-top: 50px; }
body.main #footer { margin-top: 0; }
#footer .footerLogo { float: left; width: 145px; height: 50px; background: url("../img/common/footer_logo_gray.png") no-repeat left top; }
#footer .footerLink { float: right; height: 50px; line-height:50px; padding-left:12px;  /*background: url("../img/common/footer_link_gray.png") no-repeat;*/ }
#footer i {font-size:24px; color:#c3c3c3; vertical-align:middle;}
body.black #footer .footerLogo { background-image: url("../img/common/footer_logo_white.png"); }
body.black #footer .footerLink { color:#fff; /*background-image: url("../img/common/footer_link_white.png");*/ }
body.black #footer i {color:#fff;}

/*main*/
#main {display:flex; margin-top:30px;}
#main li { position: relative;}
#main img { display:block; }
#main .on { position: absolute; left: 0; top:0; opacity: 0; }

/*video*/
#video { position: relative; margin-top: 22px; }
#videoThumb {}
#videoThumb li { display: block; position: relative; float: left; }
#videoThumb img { display: block; }
#videoThumb .on { position: absolute; top: 0; opacity: 0; }
#videoPlayer { position: absolute; display: none; width: 100%; top: 0; }
#videoPlayer iframe { width: 100%; height: 357px; background-color: #000; }
#videoClose { position: absolute; display: none; right: 10px; top: 10px; }

/*portfolio*/
#port { padding: 6px 0; margin-bottom: 64px; border-top: 1px solid #808080; border-bottom: 1px solid #808080; }
#port > div { position: relative; }
#portList li { position: absolute; width: 148px; height: 70px; }
#portList li > button { display: block; width: 100%; text-align: left; }
#portList li > button > p.kr { margin-top: 16px; color: #f645aa; font-family: 'NanumBarunGothicBold'; font-size: 16px; }
#portList li > button > p.eng { margin-top: 6px; color: #ffffff; font-family: 'Roboto'; font-size: 15px; }
/* #portList li > p { height: 100%; cursor: pointer; text-indent: -9999px; background-repeat: no-repeat; background-position: left top; } */
/* #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 img { display:block; width: 148px; height: 70px; } */
#portBig { display: none; position: absolute; top: 0; width: 888px; }
#portBig .wrap { width: 100%; }
#portBig .mask { position: absolute; overflow: hidden; width: calc(888px + 22px); height: 706px; left: -22px; }
#portBig .content { position: absolute; width: 888px; height: 100%; border-top: 1px solid #606060; border-bottom: 1px solid #606060; left: 22px; box-sizing: border-box; }
#portBig .navi > li { position: relative; float: left; cursor: pointer; }
#portBig .navi > li > span { display: block; height: 63px; text-indent: -9999px; background: url("../img/portfolio/navi.png") no-repeat left top; }
#portBig .navi > li > span.on { position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; text-indent: -9999px; background: url("../img/portfolio/navi_on.png") no-repeat left top; }
#portBig .navi > li:nth-child(1) > span { width: 77px; background-position: 0 0; }
#portBig .navi > li:nth-child(2) > span { width: 173px; background-position: -77px 0; }
#portBig .navi > li:nth-child(3) > span { width: 143px; background-position: -250px 0; }
#portBig .navi > li:nth-child(4) > span { width: 97px; background-position: -393px 0; }
#portBig .close { position: absolute; right: 0; top: 0; cursor: pointer; }
#portBig .close img { display: block; }
#portBig .sub { position: relative; }
#portBig .sub .subCon { position: absolute; display: none; width: 100%; height: 600px; }
#portBig .cv { color: #fff; }
#portBig .cv .align0 { float: left; width: 237px; padding-right: 30px; }
#portBig .cv .align1 { float: left; width: 115px; padding-right: 30px; }
#portBig .cv .align1 div { word-break: break-all; }
#portBig .cv .align2 { float: left; width: 358px; height: 100%; padding-right: 15px; overflow: auto; }
#portBig .cv .photo { width: 237px; height: 295px; background-repeat: no-repeat; background-size: contain; }
#portBig .cv .name_kor { font: 16px/18px NanumBarunGothicBold; color: #ff48b0; }
#portBig .cv .name_eng { font: 14px/16px Roboto; font-weight: bold; color: #ff48b0; margin-bottom: 20px; }
#portBig .cv .birth,
#portBig .cv .hp,
#portBig .cv .email,
#portBig .cv .homepage { font: 14px/16px Roboto; }
#portBig .cv .email { margin-bottom: 20px; }
#portBig .cv .title { white-space: nowrap; font: 14px/16px Roboto; font-weight: bold; color: #ff48b0; margin-bottom: 5px; }
#portBig .cv .copy { font: 14px/18px Roboto NanumBarunGothicBold; font-weight: bold; margin-bottom: 15px; }
#portBig ::-webkit-scrollbar { width: 4px; }
#portBig ::-webkit-scrollbar-track { background-color: #eeeeee; }
#portBig ::-webkit-scrollbar-thumb { background-color: #ff3eb5; }
#portBig .gallery .big { height: 100%; }
#portBig .gallery .big li { position: absolute; top: 0; width: calc(100% - 30px); height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; }
#portBig .gallery .arrow0 { display: none; position: absolute; top: 280px; left: -22px; cursor: pointer; }
#portBig .gallery .arrow1 { display: none; position: absolute; top: 280px; right: 0; cursor: pointer; }
#portBig .gallery .bt { text-align: center; line-height: 0; }
#portBig .gallery .bt>li { display: inline-block; cursor: pointer; padding: 10px 0;  }
#portBig .gallery .bt>li>div { width: 7px; height: 7px; margin: 8px; border-radius: 50%; background: #a5a7aa; }
#portBig .gallery .bt>li.on>div { background: #ff48b0; }
/*gallery*/
#gallery .list { display: block; width: 888px; margin-top: 12px; }
#gallery .list li { display: block; float: left; background-color: #dedede; background-repeat: no-repeat; background-position: left top; background-size: cover; cursor: pointer; }
#gallery .list.lookbook li { width: 25%; height: 333px; }
#gallery .list.live li { width: 25%; height: 136px; }
#gallery .navi { width: 54px; height: 18px; margin: 0px auto; padding: 10px 0; }
#gallery .navi li { display: block; float: left; cursor: pointer; }
#gallery .navi li div { width: 7px; height: 7px; margin: 8px; background-color: #a5a7aa; border-radius: 50%; }
#gallery .navi .on div { background-color: #68ff00; }
#pop { position: absolute; width: 100%; height: 100%; min-width: 1138px; min-height:729px; left: 0; top: 0; }
#pop .bg { position: absolute; width: 100%; height: 100%; background-color: #000; opacity: 0.5; }
#pop .wrap { position: absolute; width: 880px; height: 880px; margin: auto; left:0; top:0; right:0; bottom:0; background-color: rgba(0, 0, 0, 0.9); }
#pop .big { position: relative; height: 800px; }
#pop .big li { position: absolute; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; }
#pop .subject { position: absolute; left: 20px; top: 20px; font: 14px/16px Roboto; font-weight: bold; color: #f947ac; }
#pop .copy { position: absolute; left: 20px; top: 60px; font: 14px/16px Roboto; font-weight: bold; color: #68ff00; }
#pop .close { position: absolute; right: 20px; top: 20px; cursor: pointer; }
#pop .arrow0 { display: none; position: absolute; top: 370px; left: 0px; cursor: pointer; }
#pop .arrow1 { display: none; position: absolute; top: 370px; right: 0px; cursor: pointer; }
#pop .bt { width: 640px; height: 39px; margin: 0px auto; padding: 18px 0; text-align: center; }
#pop .bt li { display: inline-block; cursor: pointer; }
/*#pop .bt li div { width: 34px; height: 33px; margin: 0 3px 6px; background-repeat: no-repeat; background-position: center; background-size: contain; }*/
/*#pop .bt .on { border-bottom: 1px solid #fff; }*/
#pop .bt li div { width: 7px; height: 7px; margin: 8px; background-color: #a5a7aa; border-radius: 50%; }
#pop .bt li.on div { background-color: #68ff00; }



.subHistroy {display:flex; justify-content:space-between;}
.subHistroy > div {width:47%;}
.subHistroy p {position:relative; padding:5px 0; padding-left:85px; font-size:16px; line-height:130%;}
.subHistroy span.date {position:absolute; left:0; top:5px; }