@charset "euc-kr"; #banner_pc, #banner_mobile{height:300px;} .nav{position:relative;z-index:20;margin-bottom:40px;background:#ededed;} .nav>.inner{position:relative;padding:0 250px 0 869px;} .nav .filter{position:absolute;left:310px;top:0;} .nav .filter>a{display:none;} .nav .filter ul{overflow:hidden;} .nav .filter li{float:left;width:80px;height:60px;} .nav .filter li:first-child{width:79px;} .nav .filter li a{position:relative;display:block;height:100%;text-align:center;border-left:1px solid #dee1e7;background:url(../new/img/portf/portf.png) no-repeat;background-size:50px 350px;} .nav .filter li.m1 a{background-position:50% 0;} .nav .filter li.m2 a{background-position:50% -50px;} .nav .filter li.m3 a{background-position:50% -100px;} .nav .filter li.m4 a{background-position:50% -150px;} .nav .filter li.m5 a{background-position:50% -200px;} .nav .filter li.m6 a{background-position:50% -250px;} .nav .filter li.m7 a{background-position:50% -300px;} .nav .filter li a span{position:absolute;left:0;top:100%;width:100%;height:16px;padding:22px 0;line-height:16px;font-size:13px;color:#fff;letter-spacing:-0.0625em;background:#fff;} .nav .filter li.m4 a span{height:32px;padding:14px 0;} /* 2014-03-31 pc버전에서 그리드가 잘 안맞기에 수정함 .nav .filter li a:hover, .nav .filter li a:active, .nav .filter li.active a{border-color:#00ace6;} */ .nav .filter li a:hover span, .nav .filter li a:active span, .nav .filter li.active a span{top:0;background:#e61b0f;} .nav .year{position:relative;font-size:14px;color:#666;border-left:1px solid #dee1e7;border-right:1px solid #dee1e7;} .nav .year a{display:block;color:#666;} .nav .year>a{height:20px;line-height:20px;padding:20px;background:#ededed url(../new/img/portf/select.png) no-repeat 100% 28px;background-size:33px 7px;} .nav .year>a.active{background-color:#b3b3b3;} .nav .year ul{display:none;position:absolute;left:0;top:61px;width:100%;background:#b3b3b3;} .nav .year ul.active{display:block;} .nav .year li a{padding:12px 20px;} .nav .year li.active a, .nav .year li a:active, .nav .year li a:hover{color:#fff;background-color:#666;} #portf2>.info{position:fixed;z-index:60;left:0;top:0;width:100%;height:80px;background:#e61b0f;} #portf2 h2{display:block;max-width:1100px;margin:0 auto;padding:19px 0;text-align:center;font-weight:normal;font-size:28px;line-height:1.5em;letter-spacing:-0.07em;color:#fff;border-left:1px solid #009ad9;border-right:1px solid #009ad9;} #portf2 h2 span{display:block;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} .portfList{position:absolute;left:50%;top:0;width:300px;margin-left:-630px;} .portfList>div{display:none;} .portfList.active>div{display:block;} #portf2>.inner{position:relative;max-width:960px;margin:0 auto;padding:0 0 0 298px;border-left:1px solid #e3e5eb;border-right:1px solid #e3e5eb;} #portf2 .pageNav{position:fixed;z-index:40;left:50%;top:50%;width:1250px;height:0;margin:-26px 0 0 -630px;} #portf2 .pageNav a{position:absolute;width:32px;height:52px;padding:10px;} #portf2 .pageNav a.prev{left:-53px;} #portf2 .pageNav a span{background-size:175px 234px;} #portf2 .pageNav a.prev span{background-position:-115px -58px;} #portf2 .pageNav a.next span{background-position:-115px -116px;} .desc{position:absolute;left:0;top:145px;width:258px;padding:0 20px 20px;border-right:1px solid #e3e5eb;} .desc dl{margin-bottom:30px;} .desc dt{margin:20px 0 5px;font-size:16px;color:#000;} .desc dt:first-child{margin-top:0;} .desc dt span{display:inline-block;width:3px;height:3px;margin-left:4px;background:#e61b0f;} .desc dd{line-height:1.71em;font-size:14px;} .desc .launch{display:block;height:45px;line-height:45px;margin:30px 0;text-align:center;font-size:16px;letter-spacing:-0.05em;color:#e61b0f;border:1px solid #e3e5eb;} .desc .launch span{display:inline-block;width:4px;height:10px;margin-left:10px;background:url(../../new/img/portf/btn_view.png) no-repeat 0 -100px;background-size:150px 200px;} .desc .share{overflow:hidden;margin-top:30px;font-size:14px;color:#000;border:1px solid #e3e5eb;} .desc .share>*{float:left;text-align:center;} .desc .share>strong{width:84px;padding:13px 0;} .desc .share>a{border-left:1px solid #e3e5eb;} .desc .share>a.facebook{width:8px;height:16px;padding:15px 39px 14px;} #portf2 .desc .share>a.facebook span{background-position:-25px -75px;background-size:75px 100px;} .desc .share>a.twitter{width:14px;height:12px;padding:18px 35px 15px;} #portf2 .desc .share>a.twitter span{background-position:-25px -50px;background-size:75px 100px;} #view{overflow:hidden;padding-top:150px;border-left:1px solid #e3e5eb;} #view>div{text-align:center;line-height:1.71em;font-size:14px;} #view>div.cover:first-child, #view>div.article:first-child{max-width:720px;margin:0 auto 120px;} #view>div.article{max-width:660px;margin:70px auto;} #view>div.article p{max-width:660px;margin:25px auto 0;text-align:left;} #portf2 .ir{display:inline-block;font-size:0;color:transparent;} #portf2 .ir span{background:url(../new/img/portf/btn_view.png) no-repeat;background-size:150px 200px;} #portf2 .showList{width:38px;height:29px;padding:26px 20px 25px;border-left:1px solid #009ad9;} #portf2 .portfList.active .showList{border-color:#0071bb;background:#0071bb;} #portf2 .portfList.active .showList span{background-position:-44px 2px;} #portf2 .portfList li a{display:block;position:relative;} #portf2 .portfList li a p{position:absolute;left:0;bottom:0;overflow:hidden;width:266px;padding:13px 17px;font-size:14px;letter-spacing:-0.05em;line-height:1.57em;color:#fff;background:rgba(0,0,0,.8);} #portf2 .gotoList{position:absolute;right:50%;top:0;width:31px;height:31px;margin-right:-630px;padding:25px 24px 24px;border-right:1px solid #009ad9;} #portf2 .gotoList span{background-position:-100px 0;} /* transition */ .nav .filter li a, .nav .filter li a span, .nav .year ul, .nav .year li a, #list ul, #list li, #list li a, #list li img, #list li a div, .portfList .ir{-webkit-transition:all 200ms ease-in-out;transition:all 200ms ease-in-out;} .content>.inner{max-width:1260px;margin:0 auto;padding-bottom:60px;} /* 2014-06-23 추가 */ #list{margin-top:30px;} #list ul{overflow:hidden;width:1280px;margin:0 -10px;} #list li{float:left;width:300px;height:240px;margin:10px;} #list li a, #list li a img{width:100%;height:100%;} #list li a{display:block;} #list li a{position:relative;overflow:hidden;} #list li a div{position:absolute;left:0;top:100%;width:260px;height:148px;padding:45px 20px 47px;text-align:center;font-size:14px;color:#fff;line-height:1.29em;letter-spacing:-0.06em;background:#fff;} #list li a:hover div{top:0;background:#e61b0f;} #list li a div h3{position:absolute;left:0;bottom:25px;width:100%;font-weight:bold;font-size:15px;line-height:1.4;letter-spacing:-0.02em;} #list li a div p{margin-bottom:14px;font-size:19px;font-weight:bold;line-height:1.37em;} #list li.year{text-align:right;} #list li.year img{width:147px;height:47px;margin:20px 20px 0 0;} #list li.more a{height:94px;padding:73px 0;text-align:center;background-color:#ededed;} #list li.more img{width:94px;height:94px;} #list li.nopic{background:#e61b0f;} #list li.nopic img{display:none;} #list li.nopic div{top:0;background:#e61b0f;} #list li.nolink, #list li.nolink a{cursor:default;} /* #list li.nolink a:hover div{background:rgba(255,255,255,0.4);} 2014-05-19 */ #list li.nolink a:hover div{background:#66ccef;} /* ↓ 2014-05-13 작은 썸네일 */ #list li.s{width:193px;height:155px;} #list li.s a div{width:163px;height:105px;padding:25px 15px;} #list li.s a div h3, #list li.s a div p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #list li.s a div h3{height:1.4em;} #list li.s a div p{height:1.37em;} #list li.s a div span{display:block;overflow:hidden;height:2.72em;letter-spacing:0;} #list li.s.more a{height:48px;padding:54px 0 53px;} #list li.s.more img{width:48px;height:48px;} /* ↑ 작은 썸네일 */ .dimmed{display:none;position:fixed;z-index:110;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.6);} .oldLayer{display:none;overflow:hidden;position:fixed;z-index:111;left:50%;top:50%;width:900px;height:380px;margin:-191px 0 0 -450px;border:1px solid #e61b0f;background:#fff;} .oldLayer>.img{display:block;float:left;width:600px;border-right:1px solid #e61b0f;} .oldLayer>.img img{width:100%;height:auto;} .oldLayer>div{float:right;width:299px;} .oldLayer h3{background:#e61b0f;} .oldLayer h3 span{display:block;padding:25px 20px 25px 20px;font-weight:normal;font-size:24px;letter-spacing:-0.02em;line-height:1.25em;color:#fff;} .oldLayer .desc{position:static;width:auto;padding:15px 20px;border:0 none;} .oldLayer .desc dl{margin-bottom:0;} .oldLayer .desc dt, .oldLayer .desc dd{letter-spacing:-0.04em;font-size:16px;} .oldLayer .desc dt{float:left;width:86px;margin:0;padding-top:5px;} .oldLayer .desc dd{padding-top:0;} .oldLayer .desc dd:after{display:block;clear:both;height:5px;content:".";font-size:0;visibility:hidden;} .oldLayer button.ir{position:absolute;right:10px;top:10px;width:20px;height:20px;background:url(../new/img/portf/btn_closeOldLayer.gif) no-repeat;background-size:20px 20px;} .oldLayer button.ir span{font-size:0;text-indent:9999px;color:transparent;} @media all and (max-width:1249px){ /* 1,2,3 */ .cp, #banner_pc{display:none;} #banner_mobile{max-width:1250px;margin:0 auto;} #banner_mobile, #banner_mobile li, #banner_mobile a{display:block;position:relative;width:100%;} #banner_mobile li, #banner_mobile a{height:300px;} #banner_mobile li{z-index:1;overflow:hidden;} #banner_mobile li.swiper-slide-active{z-index:2;} #banner_mobile a img{position:absolute;left:50%;top:0;width:1250px;max-width:1250px;height:300px;margin-left:-630px;} #banner_mobile a p{position:absolute;left:0;top:190px;width:100%;text-align:center;font-weight:bold;font-size:30px;color:black;text-shadow:3px 3px #fff;} #list li a div{display:none;} #list li.nopic a div{display:block;} #list li.year{text-align:center;} #list li.year img{margin:0;} #list li.more a{text-align:center;} .desc dt, .desc .launch{font-size:14px;} .desc .launch{height:38px;line-height:38px;} .desc .launch span{height:9px;} .desc dd, #view>div.article p{font-size:11px;} .portfList{display:none;} #portf2>.info{height:auto;} #portf2 h2{padding-left:0;text-align:left;border-left:0 none;} } @media all and (min-width:320px) and (max-width:1023px){ /* 1,2 */ #banner_mobile a p{text-shadow:1px 2px #fff;} #portf2 .gotoList{right:0;margin-right:0;} .desc .launch{margin:10px 0;} #portf2 .pageNav{z-index:60;} #portf2 .pageNav a{border-right:1px solid #dde0e7;} #portf2 .pageNav a.prev{left:0;} .oldLayer{left:0;top:0;width:100%;height:100%;margin:0;border:0 none;overflow-y:auto;} .oldLayer>.img{float:none;width:auto;padding:22px;border:0 none;} .oldLayer>div{float:none;width:100%;} .oldLayer h3 span{margin-right:70px;padding:17px 15px;line-height:1.37em;font-size:19px;border-right:1px solid #009ad9;} .oldLayer .desc{position:static;width:auto;padding:15px 20px;border:0 none;} .oldLayer .desc dl{margin-bottom:0;} .oldLayer .desc dt, .oldLayer .desc dd{letter-spacing:-0.04em;font-size:16px;} .oldLayer .desc dt{float:left;width:86px;margin:0;padding-top:5px;} .oldLayer button.ir{right:0;top:0;width:70px;height:70px;background:url(../new/img/portf/btn_closeOldLayer2.gif) no-repeat;background-size:70px 70px;} #list li.year{height:47px;} } @media all and (min-width:320px) and (max-width:639px){ /* 1 */ .content>.inner{padding-bottom:25px;} .nav{margin-bottom:20px;} .nav>.inner{padding:0;} .nav .filter{position:relative;left:0;float:left;width:49.99%;border:0 none;} .nav .filter ul{display:none;} .nav .year{float:left;width:49.99%;border:0 none;} .nav .filter>a, .nav .year>a{display:block;height:19px;line-height:19px;padding:13px 20px;background:#ededed url(../new/img/portf/select.png) no-repeat 100% 28px;background-size:33px 7px;background-position:100% 20px;} .nav .filter>a{border-right:1px solid #dde0e7;} .nav .filter>a>span{display:block;width:23px;height:23px;margin:-3px auto 0;text-indent:-666em;font-size:0;color:#ededed;background:url../new/img/portf/portf.png) no-repeat -5px -9px;background-size:33px 233px;} .nav .filter ul, .nav .year ul{display:none;position:absolute;left:0;top:46px;width:100%;} .nav .filter ul.active, .nav .year ul.active{display:block;} .nav .year ul{left:-100%;} .nav .filter li, .nav .year li{float:none;width:100% !important;height:45px;} .nav li{border-top:1px solid #bfbfbf;} .nav li:first-child{border-top:0 none;} .nav li a{color:#fff !important;} .nav .filter>a.active{background-color:#b3b3b3;} .nav .filter li a{height:25px;line-height:25px;padding:10px 0;background:#b3b3b3;} .nav .filter li.active a, .nav .filter li a:active, .nav .filter li a:hover{color:#fff;background-color:#666;} .nav .filter li a span{position:static;padding:0 !important;text-transform:uppercase;font-size:18px;background:none !important;} #list ul{width:300px;margin:0 auto;} #list li{float:none;margin:20px 0;} #list li.year{width:300px !important;height:47px !important;padding:20px 0 !important;} #list li.more, #list li.s.more{width:300px;height:35px;} #list li.more a, #list li.s.more a{width:300px;height:21px;padding:7px 0;} #list li.more img, #list li.s.more img{width:21px;height:21px;} /* ↓ 2014-05-13 작은 썸네일 */ #list li.s{float:left;width:130px;height:104px;margin:10px;} /* ↑ 작은 썸네일 */ /* #portf2>.info{height:52px;} */ #portf2 h2{height:30px;line-height:30px;margin-right:52px;padding:11px 15px 11px;text-align:left;font-size:19px;} #portf2 .gotoList{width:22px;height:22px;padding:15px;border-right:0 none;} #portf2 .gotoList span{background-position:-75px 0;background-size:112px 150px;} #portf2>.inner{padding:120px 15px 0;border:0 none;} #portf2 .pageNav{position:fixed;left:0;top:52px;width:100%;height:40px;margin:0;background:#ebebeb;} #portf2 .pageNav a{width:12px;height:20px;padding:10px 19px;} #portf2 .pageNav a.next{left:51px;} #portf2 .pageNav a span{background-size:100px 133.33px;} #portf2 .pageNav a.prev span{background-position:0 -33.33px;} #portf2 .pageNav a.next span{background-position:-33.33px -33.33px;} .desc{position:relative;z-index:50;top:0;width:auto;padding:0;border:0 none;} .desc .share{position:fixed;right:8px;top:52px;margin:0;border:0 none;} .desc .share>strong{display:none;} .desc .share>a{border:0 none;} .desc .share>a.facebook{padding:13px 15px 11px;} .desc .share>a.twitter{padding:15px 15px 13px;} .desc dl{margin-bottom:10px;} .desc dt{float:left;width:68px;margin:0;} .desc dd{padding-top:3px;} .desc dd:after{display:block;clear:both;height:5px;content:".";font-size:0;visibility:hidden;} .desc dt.overview{float:none;margin-bottom:5px;} .desc .launch{margin:10px 0;} #view{margin-top:30px;padding:0;border:0 none;} #view>div.cover:first-child{margin-bottom:50px;} #view>div.article{margin:35px 0;} #view>div.article p{margin-top:15px;} .oldLayer h3 span{margin-right:60px;font-size:20px;} .oldLayer .desc dt, .oldLayer .desc dd{font-size:14px;} .oldLayer button.ir{margin:5px 5px 4px;width:50px;height:50px;background-size:50px 50px;} } @media all and (min-width:640px) and (max-width:1023px){ /* 2 */ .nav>.inner{padding:0 0 0 559px;} .nav .filter{left:0;} .nav .year{border-right:0 none;} .nav .year li{border-top:1px solid #bfbfbf;} .nav .year li:first-child{border-top:0 none;} .nav li a{color:#fff !important;} .content>.inner{padding-bottom:40px;} #list ul{width:640px;margin:0 auto;} #list li.year{width:620px !important;height:47px !important;padding:40px 0 !important;} #list li.more{width:620px;height:50px;} #list li.more a{height:32px;padding:9px 0;} #list li.more img{width:32px;height:32px;} #banner_mobile a p{left:20px;top:50%;width:auto;margin-top:-15px;text-align:left;font-size:30px;text-shadow:1px 2px #fff;} /* #portf2>.info{height:70px;} */ #portf2 h2{line-height:1.37em;margin-right:70px;padding:22px 15px 22px;text-align:left;font-size:19px;} #portf2 .gotoList{padding:20px 19px 19px 19px;border-right:0 none;} #portf2>.inner{padding:0 0 0 300px;border:0 none;} #portf2 .pageNav{position:fixed;left:0;top:70px;width:100%;height:60px;margin:0;background:#ebebeb;} #portf2 .pageNav a{width:17px;height:30px;padding:15px 26px;} #portf2 .pageNav a.next{left:71px;} #portf2 .pageNav a span{background-size:150px 200px;} #portf2 .pageNav a.prev span{background-position:0 -50px;} #portf2 .pageNav a.next span{background-position:-50px -50px;} .desc{z-index:50;top:150px;width:270px;padding:0 15px 20px;} .desc .share{position:fixed;right:8px;top:70px;margin:0;border:0 none;} .desc .share>strong{display:none;} .desc .share>a{border:0 none;} #portf2 .inner .desc .share>a span{background-size:150px 200px;} #portf2 .desc .share>a.facebook{width:13px;height:28px;padding:17px 24px 15px 23px;} #portf2 .desc .share>a.facebook span{background-position:-50px -150px;} #portf2 .desc .share>a.twitter{width:28px;height:23px;padding:19px 18px 13px 19px;} #portf2 .desc .share>a.twitter span{background-position:-50px -100px;} .desc dl{margin-bottom:10px;} .desc dt{float:left;width:68px;margin:0;} .desc dd{padding-top:3px;} .desc dd:after{display:block;clear:both;height:5px;content:".";font-size:0;visibility:hidden;} .desc dt.overview{float:none;margin-bottom:5px;} .desc .launch{margin:10px 0;} #view{padding-top:160px;} #view>div{width:80%;} #view>div.cover:first-child{margin-bottom:50px;} #view>div.article{margin:35px auto;} #view>div.article p{margin-top:15px;} .oldLayer h3 span{padding:22px 15px;} } @media all and (min-width:640px) and (max-width:679px){ .nav>.inner{padding:0 0 0 524px;} .nav .filter li{width:75px;} .nav .filter li:first-child{width:74px;} } @media all and (min-width:1024px) and (max-width:1249px){ /* 3 */ .nav>.inner{width:auto;padding:0 10px 0 869px;} #list ul{width:960px;margin:0 auto;} /* ↓ 2014-05-13 작은 썸네일 */ #list li.s{margin:10px 23px;} /* ↑ 작은 썸네일 */ #banner_mobile a p{left:20px;top:50%;width:auto;margin-top:-19px;text-align:left;font-size:38px;text-shadow:2px 2px #fff;} /* #portf2>.info{height:70px;} */ #portf2 h2{margin:0 120px 0 50px;font-size:21px;} #portf2 h2 span{display:block;width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} #portf2 .gotoList{right:50px;margin-right:0;padding:20px 18px 19px 19px;} #portf2>.inner{margin:0 50px;} #portf2 .pageNav{left:0;top:50%;width:100%;height:0;margin:-26px 0 0;} #portf2 .pageNav a{width:26px;height:44px;} #portf2 .pageNav a.prev{left:0;} #portf2 .pageNav a.next{right:0;} #portf2 .pageNav a span{background-size:150px 200px;} #portf2 .pageNav a.prev span{background-position:-100px -50px;} #portf2 .pageNav a.next span{background-position:-100px -100px;} .desc{top:115px;} #view{padding-top:120px;} #view>div{width:70%;} .oldLayer .desc dt, .oldLayer .desc dd{font-size:14px;} .oldLayer .desc dt{width:70px;padding-top:2px;} } @media all and (min-width:1250px){ /* 4 */ #banner_pc li{height:300px;} .nav>.inner{max-width:161px;margin:0 auto;} #banner_mobile{display:none;} #portf2 .pageNav a.next{right:-53px;} .cp{position:fixed;z-index:100;top:0;left:100%;width:100%;height:100%;background:rgba(230,27,15,.8);} }