@import url("NanumBarunGothic.css");

/*공통*/
body { overflow-y: scroll; }
* { /*outline: 1px dashed #ff0000;*/ }
.clear:after { content: ""; display: block; clear: both; overflow: hidden; }
map area { outline: 0; }
/*구조*/
#wrap { position:relative; margin: 26px auto; width: 1024px; }
.wrapInner { margin: 0 57px; }
/* .wrapLeft0 { float: left; width: 180px; margin-right: 18px; } */
.wrapLeft1 { float: left; width: 180px; margin-right: 18px; }
.wrapRight { position: relative; float: right; width: 712px; }
#wrap .top { position: absolute; right:20px; bottom: 35px; width:26px; height:26px; }
/*sub*/
#sub { border-top: solid 1px #a5a7aa; }
#sub .subImg { display: block; width: 100%; }
#subFrame iframe { width: 100%; height: auto; min-height: 479px; border: 0; }
/*logo*/
#logo { position: absolute; left; left: 57px; top: 0; }
#logo img { display: block; width: 169px; }
/*history*/
#history { height: 50px; }
#history img { float: right; width: 282px; }
/*gnb*/
#gnb { height: 149px; }
#gnb .one > li { float: left; }
#gnb .one img { display: block; height: 37px; }
#gnb .two img { display: block; height: 16px; }
/*lnb*/
#lnb { border-top: solid 1px #a5a7aa; border-bottom: solid 1px #cccdcf; padding-bottom: 9px; }
#lnb img { display: block; width: 180px; }
/*footer*/
#footer { position:relative; height: 40px; }
#footer img { height: 35px; }
#footer .footerLeft { float: left; }
#footer .footerRight { float: right; }
/*main*/
#main li { position: relative; }
#main img { display:block; width: 910px; }
#main .on { position: absolute; left: 0; top:0; opacity: 0; }
/*video*/
#videoThumb { margin-top: 19px; }
#videoThumb li { display: block; position: relative; float: left; }
#videoThumb img { display: block; height: 162px; }
#videoThumb .on { position: absolute; top: 0; opacity: 0; }
#videoPlayer { position: absolute; display: none; width: 100%; top: 1px; }
#videoPlayer video { width: 100%; height: 342px; background-color: #000; }
#videoClose { position: absolute; display: none; right: 10px; top: 10px; }
/*portfolio*/

#port { position: relative; padding-bottom: 14px; margin-bottom: 20px; border-top: 1px solid #bbbdbf; border-bottom: 1px solid #bbbdbf; }
#portList li { position: absolute; width: 113px; cursor: pointer; }
#portList img { display:block; width:100%; height: 56px; }
/*#portList .on { position: absolute; left: 0; top: 0; opacity: 0; }*/
#portBig { display: none; position: absolute; top: 0; width: 712px; }
#portBig .wrap { width: 100%; }
#portBig .mask { position: absolute; overflow: hidden; width: 734px; height: 470px; left: -22px; }
#portBig .content { position: absolute; width: 100%; height: 470px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; left: 22px; box-sizing: border-box; }
#portBig .navi ul { height: 58px; }
#portBig .navi li { position: relative; float: left; cursor: pointer; }
#portBig .navi img { display: block; height: 54px; }
#portBig .navi .on { position: absolute; left: 0; top: 0; opacity: 0; }
#portBig .close { position: absolute; right: 22px; top: 0; cursor: pointer; }
#portBig .close img { height: 55px; }
#portBig .sub { position: relative; width: 712px; }
#portBig .sub .subCon { position: absolute; display: none; width: 100%; height: 375px; }
#portBig .cv { }
#portBig .cv .align0 { float: left; width: 120px; padding-right: 60px; }
#portBig .cv .align1 { float: left; width: 105px; padding-right: 15px; }
#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: 100px; height: 125px; background-repeat: no-repeat; background-size: contain; }
#portBig .cv .name_kor { font: 13px/16px NanumBarunGothicBold; color: #ff46b1; }
#portBig .cv .name_eng { font: 12px/14px Times; font-weight: bold; color: #ff46b1; margin-bottom: 20px; }
#portBig .cv .birth,
#portBig .cv .hp,
#portBig .cv .email,
#portBig .cv .homepage { font: 12px/15px Roboto; }
#portBig .cv .email { margin-bottom: 20px; }
#portBig .cv .title { white-space: nowrap; font: 12px/14px Times; color: #ff46b1; margin-bottom: 5px; }
#portBig .cv .copy { font: 10px/14px Roboto NanumBarunGothic; 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: 100%; height: 100%; background-repeat: no-repeat; background-position: left center; background-size: contain; }
#portBig .gallery .arrow0 { display: none; position: absolute; top: 165px; left: -22px; cursor: pointer; }
#portBig .gallery .arrow1 { display: none; position: absolute; top: 165px; 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: #ff46b1; }
/*illust*/
#gallery .list { display: block; width: 712px; 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 .illust li { width: 33.333%; height: 145px; }
#gallery .live li { width: 25%; height: 110px; }
#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: #ff3db4; }
#pop { position: absolute; width: 100%; height: 100%; min-width: 1024px; 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: 700px; height: 680px; margin: auto; left:0; top:0; right:0; bottom:0; background-color: #000; }
#pop .big { position: relative; height: 600px; }
#pop .big li { position: absolute; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: contain; }
#pop .copy { position: absolute; left: 20px; top: 20px; font: 11px/16px Roboto NanumBarunGothicBold; color: #ff46b1; }
#pop .close { position: absolute; right: 20px; top: 20px; cursor: pointer; }
#pop .arrow0 { display: none; position: absolute; top: 270px; left: 0px; cursor: pointer; }
#pop .arrow1 { display: none; position: absolute; top: 270px; 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: #ff3db4; }