@import url("NanumBarunGothic.css");

/*공통*/
body { overflow-y: scroll; }
body.black { background: #000; }
* { /*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; }
.wrapRight { position: relative; float: right; width: 888px; }
#wrap .top { position: absolute; right:0; bottom: 60px; }
/*sub*/
#sub { border-top: solid 2px #c2c3c5; }
#sub .subImg { display: block; }
#subFrame iframe { width: 100%; height: auto; min-height: 479px; border: 0; }
/*logo*/
#logo { position: absolute; left: 0px; top: 8px; }
#logo img { display: block; }
/*history*/
#history { padding: 1px 0; }
#history img { float: right; }
/*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"); }
#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 { border-top: solid 2px #c2c3c5; border-bottom: solid 1px #c2c3c5; 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.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/lnb4_white.png"); }
#lnb .two.act4 > li > a.on { background-image: url("../img/common/lnb4_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; background: url("../img/common/footer_link_gray.png") no-repeat; }
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 .footerLink.mail { width: 235px; background-position: 0 0; }
#footer .footerLink.blog { width: 40px; background-position: -235px 0; }
#footer .footerLink.insta { width: 40px; background-position: -275px 0; }
#footer .footerLink.facebook { width: 40px; background-position: -315px 0; }
#footer .footerLink.youtube { width: 40px; background-position: -355px 0; }

/*main*/
#main li { position: relative; float: left; }
#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; }