/* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *::after, *::before { content: ''; } body { font:30pt/1.2 'Playfair Display'; color:#fff; color:#fff; font-family: 'Work Sans', sans-serif; overflow-x:hidden; background:url(../img/bg_gray.jpg) repeat; } .fl{float:left;} .fr{float:right;} a { color: #1e6074; text-decoration: none; outline:0; } a:link{text-decoration:none;} a:visited{border:none; text-decoration:none;} /* -------------------------------- Main components -------------------------------- */ html, body { height: 100%; } /* #wrap{width:100%; height:auto; margin:0 auto; position: relative; z-index:222;} */ /*base code*/ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 1s; animation-duration: 1s; } /*the animation definition*/ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } .balloon{ background:url(../img/bg_gray.jpg); color:#fff; font-size:30px; position:absolute; padding:10px; display:none; z-index:9999999; } /* 퀵메뉴 스타일 정의 */ #floatdiv{position: absolute; right: 3%; top: 150px; z-index:999999;} #floatdiv ul{list-style: none; border: 0; margin: 0; padding: 0;} #floatdiv ul li{list-style: none; border: 0; margin: 0; padding: 0;} #floatdiv ul li span{margin: 0 0 5px 0; cursor: pointer;} #floatdiv ul li #btn01{display: block; width: 270px; height: 70px; background: url(../img/side/side_bx_type.png) no-repeat;} #floatdiv ul li #btn02{display: block; width: 270px; height: 140px; background: url(../img/side/side_ux_code_type.png) no-repeat;} #floatdiv ul li #btn04{display: block; width: 270px; height: 70px; background: url(../img/side/side_illust_type.png) no-repeat;} #floatdiv ul li:hover #btn01{background: url(../img/side/side_bx_active.png) no-repeat;} #floatdiv ul li:hover #btn02{background: url(../img/side/side_ux_code_active.png) no-repeat;} #floatdiv ul li:hover #btn04{background: url(../img/side/side_illust_active.png) no-repeat;} #floatdiv ul li.active #btn01{background: url(../img/side/side_bx_active.png) no-repeat;} #floatdiv ul li.active #btn02{background: url(../img/side/side_ux_code_active.png) no-repeat;} #floatdiv ul li.active #btn04{background: url(../img/side/side_illust_active.png) no-repeat;} /*box0 main*/ #box0_bg{width:100%; height:970px; margin:0 auto; background:url(../img/bg_gray.jpg); position: relative; z-index:333;} #box0_content{width:90%; height:970px; max-width:1920px; margin:0 auto;} #wrap_left{width:46%; height:850px; float:left;} #left1{width:100%; height:600px; } #left1 h2{font-family:'Cormorant', serif; font-size:25pt; font-weight:500; margin-top:80px; box-sizing:border-box;} #contact{font-weight:100; margin-top:40px; box-sizing:border-box;} #contact h1{display:inline;} #contact li span.name{font-family:'Noto Sans KR',sans-serif; font-weight:100; font-size:26pt;} #contact li img.bottom{vertical-align:text-bottom;} #contact li img.margin{margin-left:10px;} #contact li span.orange{color:#fd6126; font-weight:300; margin-left:33px;} #left2{width:90%; height:150px; } #left2 #cv{width:160px; height:160px;box-sizing:border-box; } #wrap_right{width:54%; height:850px; float:left;} #right1{width:90%; height:850px; float:left;} #right1 h2{font-family:'Cormorant', serif; font-size:25pt; font-weight:500; margin-top:80px; box-sizing:border-box;} #works{ line-height:1.4; } #works li{letter-spacing:-6px;} #works li a{font-size:99pt; font-weight:200; } #works li.yellow1 a{color:#ffe18b} #works li.orange1 a{color:#ff876b} #works li.orange2 a{color:#ffa681} #works li.yellow2 a{color:#fff9b8} #works div{height:145px; font-size:30pt; letter-spacing:0; font-weight:300; vertical-align:97%; text-decoration:underline; display:inline;} #right2{width:10%; height:850px; float:left;} #right2 img{width:100%; min-width:80px;} .cd-nav-trigger { position: fixed; display: inline-block; } /*box2*/ #box2_bx{width:100%; height:5900px; margin:0 auto; background:url(../img/bg1.jpg) repeat; overflow:hidden; position: relative; z-index:444; padding-top:150px;} #box2_workwrap{width:85%; height:3900px; margin:0 auto; max-width:1920px;} #box2_workwrap80{width:83%; height:990px;} #box2_bx .box2_line{width:100%; height:396px; margin-bottom:1%;} #box2_bx .box2_works{width:49.5%; height:396px; margin-right:1%; } #box2_bx #box2_workwrap .last{margin-right:0%;} #box2_brandi1{background:url(../img/bunny.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_brandi2{background:url(../img/signage.jpg) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_brandi3{background:url(../img/ssbag.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_brandi4{background:url(../img/ssrola.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_brandi5{background:url(../img/ssguess.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_brandi6{background:url(../img/ssdiary.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_surk1{background:url(../img/stayb.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_surk2{background:url(../img/surk.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work22_1{background:url(../img/bazaarw2.jpg) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work22_2{background:url(../img/bazaarcgif2.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work22_3{background:url(../img/bazaarbn.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work22_4{background:url(../img/bazaarlf.jpg) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work1{background:url(../img/davinci.png) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work2{background:url(../img/ioniq.gif) no-repeat; background-size: cover; background-position: 50% 25%;} #box2_work3{background:url(../img/shinhan.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work4{background:url(../img/cocacola2.png) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work5{background:url(../img/dlight.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work6{background:url(../img/cathay3.png) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work7{background:url(../img/challengym.jpg) no-repeat; background-size: cover; background-position: 50% 10%;} #box2_work8{background:url(../img/burnt.png) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work9{background:url(../img/smeag2.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work10{background:url(../img/french2.jpg) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work11{background:url(../img/tour2.jpg) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work12{background:url(../img/french2.png) no-repeat; background-size: cover; background-position: 50% 100%;} #box2_work13{background:url(../img/lg2.jpg) no-repeat; background-size: cover; background-position: 50% 100%;} #box2_work14{background:url(../img/seoul2.jpg) no-repeat; background-size: cover; background-position: 50% 100%;} #box2_work15{background:url(../img/doggod.gif) no-repeat; background-size: cover; background-position: 50% 100%;} #box2_work16{background:url(../img/bora3.JPG) no-repeat; background-size: cover; background-position: 50% 50%;} /*box1*/ #box1_ux_coding{width:100%; height:2000px; margin:0 auto; background:url(../img/bg1.jpg) repeat; overflow:hidden; position: relative; z-index:444; } .t1{font-family: 'Work Sans', sans-serif; font-size:24px; width:35%; line-height:1.3; font-weight:500;} .t1>span{font-family: 'Noto Sans KR', sans-serif; font-size:24px; font-weight:500; } .t1>p{display:inline; margin-right:9px; line-height:3; letter-spacing:-1px;} .t2{font-family: 'Noto Sans KR', sans-serif; font-size:15.5px; width:65%; line-height:1.9; font-weight:300;} #box1_work1{width:85%; height:990px; margin:0 auto; color:#725565; margin-top:80px; max-width:1920px;} #box1_work1 span{color:#32252c;} #work1_text{width:83%; height:160px;} #work1_text p{border-bottom:2px solid #725565;} #work1_img{width:83%; height:700px; background:url(../img/seoul_library2.gif) no-repeat #32252c; background-size: cover; background-position: 50% 25%; } #box1_work2{width:85%; height:990px; margin:0 auto; color:#ea454e; max-width:1920px;} #box1_work2 span{color:#b5141d;} #work2_text{width:83%; height:170px;} #work2_text p{border-bottom:2px solid #ea454e;} #work2_img{width:83%; height:700px; background:url(../img/smoothieking2.gif) no-repeat #b5141d; background-size: cover; background-position: 70% 50%;} #box1_work3{width:85%; height:990px; margin:0 auto; color:gray; max-width:1920px;} #work3_text{width:83%; height:160px;} #work3_img{width:83%; height:700px; background-color:gray;} /*box3*/ #box3_illust{width:100%; height:1000px; margin:0 auto; background:url(../img/bg1.jpg) repeat; overflow:hidden; position: relative; z-index:555; padding-top:80px;} #box3_illust .box3_line{width:100%; height:396px; margin-bottom:1%;} #box3_illust .box3_works{width:49.5%; height:396px; margin-right:1%; /* border:1px solid green; */} #box3_illust .last{margin-right:0%;} #box3_workwrap{width:85%; height:1200px; margin:0 auto; max-width:1920px;} #box3_workwrap80{width:83%; height:990px;} #box3_work1{background:url(../img/neon.jpg) no-repeat; background-size: cover; background-position: 50% 50%;} #box3_work2{background:url(../img/dollydog.jpg) no-repeat; background-size: cover; background-position: 50% 50%;} #box3_work3{background:url(../img/pixeldog.jpg) no-repeat; background-size: cover; background-position: 50% 50%;} #box3_work4{background:url(../img/melbourne2.jpg); background-size: cover; background-position: 50% 50%;} #footer{width:100%; font-size:15px; color:gray; background:url(../img/bg1.jpg); padding-bottom:20px;} #footer p{width:85%; margin:0 auto;} .cd-nav-trigger { bottom: 100px; left: 5%; height: 170px; width: 170px; z-index: 5; /* image replacement */ background:url(../img/cv.png) no-repeat transparent; } .cd-nav-trigger .cd-icon { /* icon created in CSS */ position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: inline-block; width: 18px; height: 3px; background-color:transparent; z-index: 10; } .cd-nav-trigger .cd-icon::before, .cd-nav-trigger .cd-icon:after { /* upper and lower lines of the menu icon */ position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: transparent; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; /* apply transition to transform property */ -webkit-transition: -webkit-transform .3s; -moz-transition: -moz-transform .3s; transition: transform .3s; } .cd-nav-trigger .cd-icon::before { -webkit-transform: translateY(-6px) rotate(0deg); -moz-transform: translateY(-6px) rotate(0deg); -ms-transform: translateY(-6px) rotate(0deg); -o-transform: translateY(-6px) rotate(0deg); transform: translateY(-6px) rotate(0deg); } .cd-nav-trigger .cd-icon::after { -webkit-transform: translateY(6px) rotate(0deg); -moz-transform: translateY(6px) rotate(0deg); -ms-transform: translateY(6px) rotate(0deg); -o-transform: translateY(6px) rotate(0deg); transform: translateY(6px) rotate(0deg); } .cd-nav-trigger::before, .cd-nav-trigger::after { /* 2 rounded colored backgrounds for the menu icon */ position: absolute; top: 0; left: 0; border-radius: 50%; height: 100%; width: 100%; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; } .cd-nav-trigger::before { background-color: transparent; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .cd-nav-trigger::after { background-color: #fd6126; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } .cd-nav-trigger.close-nav::before { /* user clicks on the .cd-nav-trigger element - 1st rounded background disappears */ -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .cd-nav-trigger.close-nav::after { /* user clicks on the .cd-nav-trigger element - 2nd rounded background appears */ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .cd-nav-trigger.close-nav .cd-icon { /* user clicks on the .cd-nav-trigger element - transform the icon */ background-color: rgba(255, 255, 255, 0); } .cd-nav-trigger.close-nav .cd-icon::before, .cd-nav-trigger.close-nav .cd-icon::after { background-color: white; } .cd-nav-trigger.close-nav .cd-icon::before { -webkit-transform: translateY(0) rotate(45deg); -moz-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); -o-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); } .cd-nav-trigger.close-nav .cd-icon::after { -webkit-transform: translateY(0) rotate(-45deg); -moz-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); -o-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); } .cd-primary-nav { /* by default it's hidden */ position: fixed; left: 0; top: 0; height: 100%; width: 100%; padding: 0 5%; z-index: 3; background-color: #fff; overflow: hidden; /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */ -webkit-overflow-scrolling: touch; visibility: hidden; opacity: 0; -webkit-transition: visibility 0s, opacity 0.3s; -moz-transition: visibility 0s, opacity 0.3s; transition: visibility 0s, opacity 0.3s; } .cd-primary-nav li { margin: 1em 0; text-align: center; text-transform: capitalize; } .cd-primary-nav div{width:80%; height:800px; background:url(../img/web_cv3.jpg) no-repeat; background-size: 100%; float:right;} .cd-primary-nav.fade-in { /* navigation visible at the end of the circle animation */ visibility: visible; opacity: 1; } @media only screen and (min-width: 768px) { .cd-primary-nav li { /* margin: 2em 0; */ } .cd-primary-nav a { font-size: 28px; font-size: 1.75rem; } } @media only screen and (min-width: 1170px) { .cd-primary-nav li { /* margin: 2.6em 0; */ } .cd-primary-nav a { font-size: 32px; font-size: 2rem; } } .cd-overlay-nav, .cd-overlay-content { /* containers of the 2 main rounded backgrounds - these containers are used to position the rounded bgs behind the menu icon */ position: fixed; bottom: 100px; left: 5%; height: 4px; width: 4px; -webkit-transform: translateX(-20px) translateY(20px); -moz-transform: translateX(-20px) translateY(20px); -ms-transform: translateX(-20px) translateY(20px); -o-transform: translateX(-20px) translateY(20px); transform: translateX(-20px) translateY(20px); } .cd-overlay-nav span, .cd-overlay-content span { display: inline-block; position: absolute; border-radius: 50%; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .cd-overlay-nav.is-hidden, .cd-overlay-content.is-hidden { /* background fades out at the end of the animation */ opacity: 0; visibility: hidden; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; } .cd-overlay-nav { /* main rounded colored bg 1 */ z-index: 2; } .cd-overlay-nav span { background-color: #fff; } .cd-overlay-content { /* main rounded colored bg 2 */ z-index: 4; } .cd-overlay-content span { background:url(../img/bg_gray.jpg) repeat; } .cd-content { /* just some dummy content */ /* padding: 80px 0; */ width: 100%; /* max-width: 768px; */ margin: 0 auto; z-index: 1; } .cd-content .cd-intro { height: 200px; padding-top: 4.6em; } .cd-content h1 { text-align: center; font-size: 20px; font-size: 1.25rem; } .cd-content p { line-height: 1.5; color: #a76500; } @media only screen and (min-width: 768px) { .cd-content .cd-intro { height: 250px; padding-top: 6em; } .cd-content h1 { font-size: 28px; font-size: 1.75rem; } .cd-content p { font-size: 18px; font-size: 1.125rem; line-height: 1.8; } } @media screen and (max-width:1480px) { /* 퀵메뉴 스타일 정의 */ #floatdiv{position: absolute; right: 10px; top: 150px; z-index:999999;} #floatdiv ul{list-style: none; border: 0; margin: 0; padding: 0;} #floatdiv ul li{list-style: none; border: 0; margin: 0; padding: 0; } #floatdiv ul li span{margin: 0 0 5px 0; cursor: pointer;} #floatdiv ul li #btn01{display: block; width: 270px; height: 70px; background: url(../img/side/side_bx_type.png) no-repeat;} #floatdiv ul li #btn02{display: block; width: 270px; height: 140px; background: url(../img/side/side_ux_code_type.png) no-repeat;} #floatdiv ul li #btn04{display: block; width: 270px; height: 70px; background: url(../img/side/side_illust_type.png) no-repeat;} #floatdiv ul li:hover #btn01{background: url(../img/side/side_bx_active.png) no-repeat;} #floatdiv ul li:hover #btn02{background: url(../img/side/side_ux_code_active.png) no-repeat;} #floatdiv ul li:hover #btn04{background: url(../img/side/side_illust_active.png) no-repeat;} #floatdiv ul li.active #btn01{background: url(../img/side/side_bx_active.png) no-repeat;} #floatdiv ul li.active #btn02{background: url(../img/side/side_ux_code_active.png) no-repeat;} #floatdiv ul li.active #btn04{background: url(../img/side/side_illust_active.png) no-repeat;} #box0_content{width:90%; height:720px; max-width:1480px; margin:0 auto;} #wrap_left{width:46%; height:720px;} #left1{width:100%; height:600px; } #left1 h2{font-family:'Cormorant', serif; font-size:20pt; font-weight:500; margin-top:50px; box-sizing:border-box;} #contact{font-weight:100; margin-top:20px; box-sizing:border-box; font-size:26pt} #contact li span.name{font-family:'Noto Sans KR',sans-serif; font-weight:100; font-size:22pt;} #contact li img.bottom{vertical-align:text-bottom;} #contact li img.margin{margin-left:7px;} #contact li img#plus{margin-left:5px;} #contact li span.orange{color:#fd6126; font-weight:300; margin-left:28px;} #wrap_right{width:54%; height:720px;} #right1{width:92%; height:720px;} #right1 h2{font-family:'Cormorant', serif; font-size:20pt; font-weight:500; margin-top:50px; box-sizing:border-box;} #works{ line-height:1.2; } #works li{letter-spacing:-2px;} #works li a{font-size:80pt; font-weight:200; } #works li.yellow1 a{color:#ffe18b} #works li.orange1 a{color:#ff876b} #works li.orange2 a{color:#ffa681} #works li.yellow2 a{color:#fff9b8} #works div{height:145px; font-size:30pt; letter-spacing:0; font-weight:300; vertical-align:97%; text-decoration:underline; display:inline;} #right2{width:8%; height:720px; } #right2 img{width:100%; min-width:80px;} .cd-nav-trigger { bottom: 90px; left: 5%; height: 150px; width: 150px; z-index: 5; /* image replacement */ background:url(../img/cv.png) no-repeat transparent; background-size:150px; } /*box2*/ #box2_bx{width:100%; height:4500px; margin:0 auto; background:url(../img/bg1.jpg) repeat; overflow:hidden; position: relative; z-index:444; padding-top:100px;} #box2_workwrap{width:85%; height:3100px; margin:0 auto; max-width:1480px;} #box2_workwrap80{width:83%; height:990px;} #box2_bx .box2_line{width:100%; height:300px; margin-bottom:1%;} #box2_bx .box2_works{width:49.5%; height:300px; margin-right:1%; /* border:1px solid green; */} #box2_bx #box2_workwrap .last{margin-right:0%;} #box2_work22_1{background:url(../img/bazaarw2.jpg) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work22_2{background:url(../img/bazaarcgif2.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work1{background:url(../img/davinci.png) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work2{background:url(../img/ioniq.gif) no-repeat; background-size: cover; background-position: 50% 25%;} #box2_work3{background:url(../img/shinhan.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work4{background:url(../img/cocacola2.png) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work5{background:url(../img/dlight.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work6{background:url(../img/cathay3.png) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work7{background:url(../img/challengym.jpg) no-repeat; background-size: cover; background-position: 50% 10%;} #box2_work8{background:url(../img/burnt.png) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work9{background:url(../img/smeag2.gif) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work10{background:url(../img/french2.jpg) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work11{background:url(../img/tour2.jpg) no-repeat; background-size: cover; background-position: 50% 50%;} #box2_work12{background:url(../img/french2.png) no-repeat; background-size: cover; background-position: 50% 100%;} #box2_work13{background:url(../img/lg2.jpg) no-repeat; background-size: cover; background-position: 50% 100%;} #box2_work14{background:url(../img/seoul2.jpg) no-repeat; background-size: cover; background-position: 50% 100%;} /*box1*/ #box1_ux_coding{width:100%; height:1480px; margin:0 auto; background:url(../img/bg1.jpg) repeat; overflow:hidden; position: relative; z-index:444; } .t1{font-family: 'Work Sans', sans-serif; font-size:20px; width:35%; line-height:1.3; font-weight:500;} .t1>span{font-family: 'Noto Sans KR', sans-serif; font-size:20px; font-weight:500; } .t2{font-family: 'Noto Sans KR', sans-serif; font-size:13px; width:65%; line-height:1.9; font-weight:300;} #box1_work1{width:85%; height:700px; margin:0 auto; color:#725565; margin-top:40px; max-width:1920px;} #box1_work1 span{color:#32252c;} #work1_text{width:83%; height:120px;} #work1_img{width:83%; height:500px; background:url(../img/seoul_library2.gif) no-repeat #32252c; background-size: cover; background-position: 50% 25%; } #box1_work2{width:85%; height:700px; margin:0 auto; color:#ea454e; max-width:1920px;} #box1_work2 span{color:#b5141d;} #work2_text{width:83%; height:160px;} #work2_img{width:83%; height:500px; background:url(../img/smoothieking2.gif) no-repeat #b5141d; background-size: cover; background-position: 70% 50%;} #box1_work3{width:85%; height:70px; margin:0 auto; color:gray; max-width:1920px;} #work3_text{width:83%; height:120px;} #work3_img{width:83%; height:500px; background-color:gray;} /*box3*/ #box3_illust{width:100%; height:800px; margin:0 auto; background:url(../img/bg1.jpg) repeat; overflow:hidden; position: relative; z-index:555; padding-top:40px;} #box3_illust .box3_line{width:100%; height:300px; margin-bottom:1%;} #box3_illust .box3_works{width:49.5%; height:300px; margin-right:1%; /* border:1px solid green; */} #box3_illust .last{margin-right:0%;} } /* (max-width:1480px) */ @media screen and (max-width:1280px) { } @media screen and (max-width:1024px) { } @media screen and (max-width:720px) { /*box0 main*/ #box0_bg{width:100%; height:970px; margin:0 auto; background:url(../img/bg_gray.jpg); position: relative; z-index:333;} #box0_content{width:90%; height:970px; max-width:1920px; margin:0 auto;} #wrap_left{width:100%; height:300px; clear:both;} #left1{width:100%; height:600px; } #left1 h2{font-family:'Cormorant', serif; font-size:18pt; font-weight:500; margin-top:30px; box-sizing:border-box;} #contact{font-weight:100; margin-top:20px; box-sizing:border-box;} #contact h1{display:inline;} #contact li{font-size:23pt;} #contact li span.name{font-family:'Noto Sans KR',sans-serif; font-weight:100; font-size:20pt;} #contact li img.bottom{vertical-align:text-bottom;} #contact li img.margin{margin-left:10px;} #contact li span.orange{color:#fd6126; font-weight:300; margin-left:33px;} #left2{width:90%; height:150px; } #left2 #cv{width:160px; height:160px;box-sizing:border-box; } #wrap_right{width:100%; height:850px; clear:both;} #right1{width:100%; height:850px; float:left;} #right1 h2{font-family:'Cormorant', serif; font-size:25pt; font-weight:500; margin-top:20px; margin-bottom:10px; box-sizing:border-box;} #works{ line-height:1.2; } #works li{letter-spacing:-6px;} #works li a{font-size:70pt; font-weight:200; } #works li.yellow1 a{color:#ffe18b} #works li.orange1 a{color:#ff876b} #works li.orange2 a{color:#ffa681} #works li.yellow2 a{color:#fff9b8} #works div{height:145px; font-size:30pt; letter-spacing:0; font-weight:300; vertical-align:97%; text-decoration:underline; display:inline;} #right2{display:none;} #right2 img{width:100%; min-width:80px;} }