/* 공통 */ body{font-family: 'Noto Sans KR', 'Roboto', 'Montserrat', sans-serif;} @font-face {font-family: 'S-CoreDream-2ExtraLight'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff'); font-weight: normal; font-style: normal;} /*body::after{position: fixed; top: 0; left: 0; width: 100%; height: 100%; content: ''; background-image: url(../img/noise.gif); opacity: 0.07; z-index: 10;}*/ .h2{ font-family: 'Montserrat', sans-serif; /*font-family 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을 지정*/ font-weight: bold; color: #fff; font-size: 7rem; /*최상위 태그(요소)에 지정한 것을 기준으로*/ } .h2_em{ font-family: 'Montserrat', sans-serif; font-weight: bold; color: #fff; font-size: 7rem; font-style: normal; -webkit-text-fill-color: transparent;/*글씨 안 투명하게*/ -webkit-text-stroke: 1px #fff; /*테두리는 흰색*/ display: block; line-height: 0.3; } .bar{ width: 100%; height: 60px; background: #ffd600; overflow: hidden; padding: 11px 0; box-sizing: border-box; white-space: nowrap; position: relative; display: flex; border-top: 2px solid; border-bottom: 2px solid; } .bar span{ font-size: 2.5rem; line-height: 1; font-weight: bold; white-space: nowrap; /*연속 공백을 하나로 합침*/ font-family: 'Montserrat', sans-serif; font-weight: bold; text-align: center; animation: textloop 10s linear infinite;/* css애니메이션길이 10초 무한대로 반복*/ } @keyframes textloop{ 0%{transform: translateX(0);}/*시작*/ 100%{transform: translateX(-100%);}/*끝*/ } .row{padding: 0 40px;}/*스킬 여백*/ .container{width: 1400px; margin: 0 auto; background: rgba(255,0,0,0.0);} /*스킬부분크기*/ .scroll{ position: fixed; left: 10px; top: 10px; width: 40px; height: 40px; text-align: center; line-height: 40px; color: #fff; background: rgba(0,0,0,0.3); font-size: 12px; z-index: 10000; } .cursor { position: absolute; width: 10px; height: 10px; background: #ffd600; border-radius: 50%; /*모서리 둥글게*/ z-index: 20000; user-select: none; pointer-events: none; transform: scale(1); /*이동효과*/ transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out; /*부드럽게동작*/ } .cursor.active { opacity: 0.5; transform: scale(0); } .cursor-follower { position: absolute; width: 30px; height: 30px; background: rgba(255,255,255,0.3); border-radius: 50%; user-select: none; pointer-events: none; transition: transform 0.6s ease-in-out, opacity 0.2s ease-in-out; } .cursor-follower.active { opacity: 0.7; transform: scale(3); z-index: 20000; } .hover { text-decoration: none; z-index: 20000; } ::selection { background-color: rgba(0,0,0,0.5); color: #ffd600; /*드래그했을때 색*/ } /* 레이아웃 */ #progress{} #header{} #contents{position: relative; z-index: 100;} #main{background:url(../img/bl_bg.png);} /*배경화면이미지*/ #about{background:url(../img/bl_bg.png);} #skill{background: url(../img/bl_bg.png);} #work1{background:url(../img/bl_bg.png);} #work2{background:url(../img/bl_bg.png);} #work3{background:url(../img/bl_bg.png);} #work4{background:url(../img/bl_bg.png);} #work5{background:url(../img/bl_bg.png);} #roadmap{background:url(../img/bl_bg.png);} #work6{background: url(../img/bl_bg.png);} #contact{background:url(../img/bl_bg.png);} #signuo{background:url(../img/bl_bg.png);} #footer{background: url(../img/bl_bg.png);} /* loding 애니메이션*/ .progress{width: 100%; height: 100%; background: #ffd600; display: flex; align-items: center; justify-content: center; flex-direction: column; position: absolute; z-index: 1000;} .progress .progress_css{} .progress .progress_css .wrapper{ width: 180px; height: 50px; } /*동그라미 색깔, 속성*/ .progress .progress_css .circle{ border-radius: 50%; border: 3px solid #0a0a0a; float: left; height: 50px; width: 50px; margin: 0 5px; box-sizing: border-box; } .progress .progress_css .circle-1{ animation: move 1s ease-in-out infinite; } .progress .progress_css .circle-1a{ animation: fade 1s ease-in-out infinite; } /*중간에 투명도 조절*/ @keyframes fade { 0% {opacity: 0;} 100% {opacity: 1;} } .progress .progress_css .circle-2{ animation: move 1s ease-in-out infinite; } @keyframes move{ 0%{transform: translateX(0);} 100%{transform: translateX(60px);} } .progress .progress_css .circle-1a{ margin-left: -55px; opacity: 0; } .progress .progress_css .circle-3{ animation: circle-3 1s ease-in-out infinite; opacity: 1; } @keyframes circle-3 { 0%{opacity: 1;} 100%{opacity: 0;} } .progress p{margin-top: 10px;}/*로딩글씨위치*/ .progress .progress-text{font-size: 22px; margin-top: 30px;} /* header */ .header{position: fixed; left: 13px; top: 0; display: flex; width: 100%; height: 90px; justify-content: center; font-family: 'Roboto', sans-serif; font-weight: bold; z-index: 20000;} .header .logo img{width: 150px; margin-top: 10px;} .header .gnb_left{} /*왼쪽글씨들 여백설정*/ .header .gnb_left .menu1{font-size: 16px; margin-right: 60px;} .header .gnb_left .menu1 li{display: inline-block; margin: 30px 0 30px 50px;} /*글씨색깔*/ .header .gnb_left .menu1 li a{color: #fff; letter-spacing: 1.5px; text-decoration: none;} /*호버시 글씨색깔변경*/ .header .gnb_left .menu1 li a:hover{color: #ffd600; letter-spacing: 1.5px; text-decoration: none;} .header .gnb_right{} /*오른쪽 글씨들 여백설정*/ .header .gnb_right .menu2{font-size: 16px; margin-left: 60px;} .header .gnb_right .menu2 li{display: inline-block; margin: 30px 50px 30px 0;} /*글씨 색깔*/ .header .gnb_right .menu2 li a{color: #fff; letter-spacing: 1.5px; text-decoration: none;} /*호버시 글씨색깔변경*/ .header .gnb_right .menu2 li a:hover{color: #ffd600; letter-spacing: 1.5px; text-decoration: none;} /* main 글씨설정*/ .main {height: 100vh; font-family: 'Montserrat', sans-serif; display: flex; align-items: center; justify-content: center;} .main h1 {font-size: 10vw; line-height: 10vw; font-weight: bolder; text-transform: uppercase; text-align: center; color: #fff;} .main h1 span {opacity: 0; margin: -20px; display: inline-block;} .main h1 em{font-style: normal; display: block; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #fff;} /* about */ #about .container{width: 100%;} .about{overflow: hidden;} /*사진부분 설정*/ .about .about_left {float: left; width: 50%; height: 100%; background:url(../img/bl_bg.png); position: relative; box-sizing: border-box; padding: 7% 50px;} .about .about_left .left_col1{margin-top: 40px;} .about .about_left .left_col1 .box {display: flex; align-items: center; justify-content: center; position: relative; } /*사진크기, 반복설정*/ .about .about_left .left_col1 .box img{width: 70%; transform: rotate(-2deg);} .about .about_left .left_col1 .box .about_img{ background: url(../img/my1.jpg) no-repeat; width: 500px; height: 400px; } /* .about .about_left .left_col1 .box .about_img:hover { animation: pic 1s infinite linear; } @keyframes pic { 0% {background: url(../img/a3.jpg);} 50% {background: url(../img/a3.jpg);} 50.1% {background: url(../img/a3.jpg);} 100% {background: url(../img/a3.jpg);} } */ .about .about_left .left_col1 .box .about_img2{display: none;} /*사진위에 글씨*/ .about .about_left .left_col1 .p1{font-family: 'Permanent Marker', cursive; font-size: 50px; font-weight: bold; position: absolute; top: -75px; left: 0; color: #fff; line-height: 1; transform: rotate(-2deg); white-space: nowrap;} /*사진밑에 글씨*/ .about_left .left_col1 .p2{font-family: 'Permanent Marker', cursive; font-size: 30px; font-weight: bold; position: absolute; bottom: -40px; right: 0; color: #ffd600; line-height: 1; transform: rotate(-2deg);} /*글상자*/ .about .about_right{float: left; width: 50%; height: 100%; background: url(../img/bl_bg.png); padding: 5% 60px 7% 60px; box-sizing: border-box;} .about .about_right h2{} .about .about_right em{} .about .about_right .right_col1{width: 95%;} /*글씨 색,사이즈설정*/ .about .about_right .right_col1 p{color: #fff; margin-top: 70px; font-size: 14px; letter-spacing: 0.7px; font-family: 'S-CoreDream-2ExtraLight'; line-height: 1.6;} .about .about_right .right_col1 span{} /*스크롤글씨색 설정*/ .about .about_right .right_col1 a{color: #fff; font-family: 'Montserrat', sans-serif; font-weight: bold; font-size: 16px; margin-top: 30px; display: block; letter-spacing: 0.5px;} /*호버시 색상변경*/ .about .about_right .right_col1 a:hover{color: #ffd600;} /*화살표 색상*/ .about .about_right .right_col1 a i{color:#fff; font-size: 18px; margin-left: 10px; vertical-align:-1px; font-weight: bold;} /*호버시 색상변경*/ .about .about_right .right_col1 a:hover i{color: #ffd600;} /*그림 위치*/ /* .about .about_right{width: 70%;} */ /*그림 크기*/ .about .about_right img{width: 7%; padding: 20px; z-index: 35000;} /* about - 애니메이션 */ .about{} .about .about_left{} .about .about_left .left_col1{} .about .about_left .left_col1 .box{} .about .about_left .left_col1 .box img{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.0s ease-in-out;} /*사진위에 글씨*/ .about .about_left .left_col1 .p1{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.2s ease-in-out;} /*사진밑에 글씨*/ .about .about_left .left_col1 .p2{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.4s ease-in-out;} .about .about_right{} .about .about_right h2{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.6s ease-in-out;} .about .about_right em{} .about .about_right .right_col1{} .about .about_right .right_col1 p{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.8s ease-in-out;} .about .about_right .right_col1 span{opacity: 0; transform: translateY(40px); transition: all 0.3s 1.0s ease-in-out;} .about .about_right .right_col1 a{} #about.show .about{} #about.show .about .about_left{} #about.show .about .about_left .left_col1{} #about.show .about .about_left .left_col1 .box {} #about.show .about .about_left .left_col1 .box img{opacity: 1; transform: translateY(0);} #about.show .about .about_left .left_col1 .p1{opacity: 1; transform: translateY(0);} #about.show .about .about_left .left_col1 .p2{opacity: 1; transform: translateY(0);} #about.show .about .about_right{} #about.show .about .about_right h2{opacity: 1; transform: translateY(0);} #about.show .about .about_right em{} #about.show .about .about_right .right_col1{} #about.show .about .about_right .right_col1 p{opacity: 1; transform: translateY(0);} #about.show .about .about_right .right_col1 span{opacity: 1; transform: translateY(0);} #about.show .about .about_right .right_col1 a{} .about .about_right img a { display: inline-block; } .about .about_right img a i { margin-right: 15px; font-size: 20px; color: #ffffff; transition: .3s; } .about .about_right img a:last-child i { margin: 0; } .about .about_right img :hover { color: #414141; } /* skill */ /*글상자크기*/ .skill{overflow: hidden; width: 100%; font-family: 'S-CoreDream-2ExtraLight'; box-sizing: border-box; padding: 10% 0;} /*타이틀글씨 위치*/ .skill .skill_tit{float: left; width: 100%; text-align: right; position: relative; margin-bottom: 5%;} .skill .skill_tit h2{width: 100%; line-height: 1; position: relative; text-align: center;} .skill .skill_tit h2 em{display: inline-block;} /*왼쪽 글상자*/ .skill .ability{float: left; width: 50%; padding: 0px 40px 0px 40px; box-sizing: border-box;} /*왼쪽 본문글씨속성*/ .skill .ability .box1{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; flex-direction: column; color: #fff;} /*왼쪽 Ability타이틀 속성*/ .skill .ability h3{color: #fff; font-size: 28px; font-weight: bold; text-transform: uppercase; margin: 20px 0; font-style: italic; font-family: 'Montserrat', sans-serif;} /*왼쪽 java, oracle, html글씨 속성 */ .skill .ability h4{color: #fff; font-size: 20px; font-weight: bold; border-top: 1px solid #888; display: block; width: 100%; padding: 20px 0; font-family: 'Montserrat', sans-serif;} /*왼쪽 본문 글상자 속성*/ .skill .ability p{width: 100%; margin-bottom: 30px; line-height: 2;} /*오른쪽 글상자*/ .skill .keyword{float: left; width: 50%; padding: 0px 40px 0px 40px; box-sizing: border-box;} /*오른쪽 본문 글씨 속성*/ .skill .keyword .box2{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; flex-direction: column; color: #fff;} /*오른쪽 Other skills 타이틀 속성*/ .skill .keyword h3{color: #fff; font-size: 28px; font-weight: bold; text-transform: uppercase; margin: 20px 0; font-style: italic; font-family: 'Montserrat', sans-serif;} /*오른쪽 css,js,ps 글씨 속성*/ .skill .keyword h4{color: #fff; font-size: 20px; font-weight: bold; border-top: 1px solid #888; display: block; width: 100%; padding: 20px 0; font-family: 'Montserrat', sans-serif;} /*오른쪽 본문 글상자 속성*/ .skill .keyword p{width: 100%; margin-bottom: 30px; line-height: 2;} /*파이차트 글씨속성*/ .skill_pie{float: left; width: 100%; text-align: center; padding-top: 5%; font-family: 'Montserrat', sans-serif;} .skill_pie ul{} /*차트 간격*/ .skill_pie li{display: inline; position: relative; margin: 0 40px;} /*차트 글씨 색깔, 위치*/ .skill_pie li a{color: #fff; text-align: center;} /*차트 숫자 글씨 크기, 속성*/ .skill_pie li a strong{font-size: 24px; display: block; letter-spacing: 1.5px; font-weight: 400; line-height: 1.8;} /*차트 기술 글씨 크기, 속성*/ .skill_pie li a span{font-size: 13px; display: block; letter-spacing: 2px;} /*차트 속성-포지션, 글씨위치 */ .skill_pie li:nth-child(1) a{position: absolute; left: 51%; top: -110px; transform: translate(-50%);} .skill_pie li:nth-child(2) a{position: absolute; left: 51%; top: -110px; transform: translate(-50%);} .skill_pie li:nth-child(3) a{position: absolute; left: 51%; top: -110px; transform: translate(-50%);} .skill_pie li:nth-child(4) a{position: absolute; left: 51%; top: -110px; transform: translate(-50%);} .skill_pie li:nth-child(5) a{position: absolute; left: 51%; top: -110px; transform: translate(-50%);} /* skill - 애니메이션 */ .skill{} .skill .skill_tit{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.0s ease-in-out;} .skill .skill_tit h2{} .skill .skill_tit h2 em{} .skill .ability{} .skill .ability .box1{} .skill .ability h3{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.2s ease-in-out;} .skill .ability h4{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.4s ease-in-out;} .skill .ability p{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.6s ease-in-out;} .skill .keyword{} .skill .keyword .box2{} .skill .keyword h3{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.2s ease-in-out;} .skill .keyword h4{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.4s ease-in-out;} .skill .keyword p{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.6s ease-in-out;} .skill_pie{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.8s ease-in-out;} .skill_pie ul{} .skill_pie li{} .skill_pie li a{} .skill_pie li a strong{} .skill_pie li a span{} #skill.show .skill{} #skill.show .skill .skill_tit{opacity: 1; transform: translateY(0);} #skill.show .skill .skill_tit h2{} #skill.show .skill .skill_tit h2 em{} #skill.show .skill .ability{} #skill.show .skill .ability .box1{} #skill.show .skill .ability h3{opacity: 1; transform: translateY(0);} #skill.show .skill .ability h4{opacity: 1; transform: translateY(0);} #skill.show .skill .ability p{opacity: 1; transform: translateY(0);} #skill.show .skill .keyword{} #skill.show .skill .keyword .box2{} #skill.show .skill .keyword h3{opacity: 1; transform: translateY(0);} #skill.show .skill .keyword h4{opacity: 1; transform: translateY(0);} #skill.show .skill .keyword p{opacity: 1; transform: translateY(0);} #skill.show .skill_pie{opacity: 1; transform: translateY(0);} #skill.show .skill_pie ul{} #skill.show .skill_pie li{} #skill.show .skill_pie li a{} #skill.show .skill_pie li a strong{} #skill.show .skill_pie li a span{} /* work1 */ .work1{overflow: hidden; color: #fff; text-transform: uppercase; padding: 15% 0 7% 0;} .work1 .work1_top{margin-top: -25px; font-family: 'Montserrat', sans-serif; font-weight: bold; margin-bottom: 5%;} .work1 .work1_top h2{margin-top: -35px; display: inline; font-size: 80px;} .work1 .work1_top h2 em{display: inline; font-size: 80px;} .work1 .work1_top p{ color: #fff; text-align: left; margin-top: -35px; display: inline; font-size: 80px;} .work1 .work1_top p em{color: #fff; display: inline; font-size: 80px; font-style: normal; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #fff; line-height: 0.5;} .work1 .work1_left{float: left; width: 25%; margin-right: 5%; position: relative; padding-left: 20px; box-sizing: border-box;} /*.work1 .work1_left::after{content: ''; position: absolute; background: #fff; width: 110%; height: 104%; opacity: 0.1; top: 0px; left: -10px;}*/ .work1 .work1_left .site_tit1{font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: bold; letter-spacing: 1.5px; margin: 40px 0 20px 0; position: relative;} .work1 .work1_left .site_tit1::before{content: ''; width: 20px; height: 2px; position: absolute; top: -20px; left: 0; background: #fff;} .work1 .work1_left h4.site_tit2{color: #fff; font-weight: bold; margin: 40px 0 20px 0; font-size: 20px; font-family: 'S-CoreDream-2ExtraLight'; display: block;} .work1 .work1_left ol{overflow: hidden; width: 100%;} .work1 .work1_left li{float: left; width: 40%; line-height: 2; font-family: 'Roboto','S-CoreDream-2ExtraLight'; letter-spacing: 1px; font-size: 12px;} .work1 .work1_left p{font-family: 'S-CoreDream-2ExtraLight'; letter-spacing: 0.65px; line-height: 1.8;} /*그림 위치*/ .work1 .work1_right{float: left; width: 70%;} /*그림 크기*/ .work1 .work1_right img{width: 70%; border-radius: 7px; z-index: 35000;} .work1 .work1_right img{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); -webkit-transition:.3s; -moz-transition:.3s; -ms-transition:.3s; -o-transition:.3s; transition:.3s; } .work1 .work1_right :hover img { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); } /*코드보기 글상자속성*/ a.thar-one { text-transform: uppercase; text-align: center; position: relative; text-decoration: none; display:block; margin-top: 40px; font-size: 14px; letter-spacing: 2px; font-weight: bold; border: 1px dashed #fff; padding: 15px; color: #fff; cursor: pointer; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } a.thar-one:hover { background-color: transparent; text-shadow: none; } a.thar-one:hover:before { bottom: 0%; top: auto; height: 100%; } a.thar-one:before { display: block; position: absolute; left: 0px; top: 0px; height: 0px; width: 100%; z-index: -1; content: ''; background: #F7CA18; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } /* work1 - 애니메이션 */ .work1{} .work1 .work1_top{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.0s ease-in-out;} .work1 .work1_top h2{} .work1 .work1_top h2 em{} .work1 .work1_top p{} .work1 .work1_top p em{} .work1 .work1_left{} .work1 .work1_left .site_tit1{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.2s ease-in-out;} .work1 .work1_left .site_tit1::before{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.1s ease-in-out;} .work1 .work1_left h4.site_tit2{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.6s ease-in-out;} .work1 .work1_left ol{} .work1 .work1_left li{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.4s ease-in-out;} .work1 .work1_left p{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.8s ease-in-out;} .work1 .work1_left a{opacity: 0; transform: translateY(40px); transition: all 0.3s 1.0s ease-in-out;} .work1 .work1_right{opacity: 0; transform: translateY(40px); transition: all 0.3s 1.1s ease-in-out;} .work1 .work1_right img{} #work1.show .work1{} #work1.show .work1 .work1_top{opacity: 1; transform: translateY(0);} #work1.show .work1 .work1_top h2{} #work1.show .work1 .work1_top h2 em{} #work1.show .work1 .work1_top p{} #work1.show .work1 .work1_top p em{} #work1.show .work1 .work1_left{} #work1.show .work1 .work1_left .site_tit1{opacity: 1; transform: translateY(0);} #work1.show .work1 .work1_left .site_tit1::before{opacity: 1; transform: translateY(0);} #work1.show .work1 .work1_left h4.site_tit2{opacity: 1; transform: translateY(0);} #work1.show .work1 .work1_left ol{} #work1.show .work1 .work1_left li{opacity: 1; transform: translateY(0);} #work1.show .work1 .work1_left p{opacity: 1; transform: translateY(0);} #work1.show .work1 .work1_left a{opacity: 1; transform: translateY(0);} #work1.show .work1 .work1_right{opacity: 1; transform: translateY(0);} #work1.show .work1 .work1_right img{} /* work2 */ .work2{overflow: hidden; color: #fff; text-transform: uppercase; padding: 7% 0 7% 0;} .work2 .work2_top{margin-top: -25px; font-family: 'Montserrat', sans-serif; font-weight: bold; margin-bottom: 5%;} .work2 .work2_top h2{margin-top: -35px; display: inline; font-size: 80px;} .work2 .work2_top h2 em{display: inline; font-size: 80px;} .work2 .work2_top p{ color: #fff; text-align: left; margin-top: -35px; display: inline; font-size: 80px;} .work2 .work2_top p em{color: #fff; display: inline; font-size: 80px; font-style: normal; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #fff; line-height: 0.5;} .work2 .work2_left{float: right; width: 25%; margin-left: 5%;} .work2 .work2_left .site_tit1{font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: bold; letter-spacing: 1.5px; margin: 40px 0 20px 0; position: relative;} .work2 .work2_left .site_tit1::before{content: ''; width: 20px; height: 2px; position: absolute; top: -20px; left: 0; background: #fff;} .work2 .work2_left h3{font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: bold; letter-spacing: 1.5px; color: #fff; position: relative;} .work2 .work2_left h3::after{content: ""; width: 100px; height: 3px; background: #fff; position: absolute; left: 0; bottom: -30px;} .work2 .work2_left h4.site_tit2{color: #fff; font-weight: bold; margin: 40px 0 20px 0; font-size: 20px; font-family: 'S-CoreDream-2ExtraLight'; display: block;} .work2 .work2_left ol{overflow: hidden; width: 100%;} .work2 .work2_left li{float: left; width: 40%; line-height: 2; font-family: 'Roboto','S-CoreDream-2ExtraLight'; letter-spacing: 1px; font-size: 12px;} .work2 .work2_left p{font-family: 'S-CoreDream-2ExtraLight'; letter-spacing: 0.65px; line-height: 1.8;} /*그림 위치*/ .work2 .work2_right{float: right; width: 50%;} /*그림 크기*/ .work2 .work2_right img{width: 40%; border-radius: 7px; z-index: 35000; align: center;} .work2 .work2_right img{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); -webkit-transition:.3s; -moz-transition:.3s; -ms-transition:.3s; -o-transition:.3s; transition:.3s; } .work2 .work2_right :hover img { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); } /* work2 - 애니메이션 */ .work2{} .work2 .work2_top{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.0s ease-in-out;} .work2 .work2_top h2{} .work2 .work2_top h2 em{} .work2 .work2_top p{} .work2 .work2_top p em{} .work2 .work2_left{} .work2 .work2_left .site_tit1{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.2s ease-in-out;} .work2 .work2_left .site_tit1::before{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.1s ease-in-out;} .work2 .work2_left h4.site_tit2{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.6s ease-in-out;} .work2 .work2_left ol{} .work2 .work2_left li{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.4s ease-in-out;} .work2 .work2_left p{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.8s ease-in-out;} .work2 .work2_left a{opacity: 0; transform: translateY(40px); transition: all 0.3s 1.0s ease-in-out;} .work2 .work2_right{opacity: 0; transform: translateY(40px); transition: all 0.3s 1.1s ease-in-out;} .work2 .work2_right img{} #work2.show .work2{} #work2.show .work2 .work2_top{opacity: 1; transform: translateY(0);} #work2.show .work2 .work2_top h2{} #work2.show .work2 .work2_top h2 em{} #work2.show .work2 .work2_top p{} #work2.show .work2 .work2_top p em{} #work2.show .work2 .work2_left{} #work2.show .work2 .work2_left .site_tit1{opacity: 1; transform: translateY(0);} #work2.show .work2 .work2_left .site_tit1::before{opacity: 1; transform: translateY(0);} #work2.show .work2 .work2_left h4.site_tit2{opacity: 1; transform: translateY(0);} #work2.show .work2 .work2_left ol{} #work2.show .work2 .work2_left li{opacity: 1; transform: translateY(0);} #work2.show .work2 .work2_left p{opacity: 1; transform: translateY(0);} #work2.show .work2 .work2_left a{opacity: 1; transform: translateY(0);} #work2.show .work2 .work2_right{opacity: 1; transform: translateY(0);} #work2.show .work2 .work2_right img{} /* work3 */ .work3{overflow: hidden; color: #fff; text-transform: uppercase; padding: 7% 0 7% 0;} .work3 .work3_top{margin-top: -25px; font-family: 'Montserrat', sans-serif; font-weight: bold; margin-bottom: 5%;} .work3 .work3_top h2{margin-top: -35px; display: inline; font-size: 80px;} .work3 .work3_top h2 em{display: inline; font-size: 80px;} .work3 .work3_top p{ color: #fff; text-align: left; margin-top: -35px; display: inline; font-size: 80px;} .work3 .work3_top p em{color: #fff; display: inline; font-size: 80px; font-style: normal; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #fff; line-height: 0.5;} .work3 .work3_left{float: left; width: 25%; margin-right: 5%;} .work3 .work3_left .site_tit1{font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: bold; letter-spacing: 1.5px; margin: 40px 0 20px 0; position: relative;} .work3 .work3_left .site_tit1::before{content: ''; width: 20px; height: 2px; position: absolute; top: -20px; left: 0; background: #fff;} .work3 .work3_left h4.site_tit2{color: #fff; font-weight: bold; margin: 40px 0 20px 0; font-size: 20px; font-family: 'S-CoreDream-2ExtraLight'; display: block;} .work3 .work3_left ol{overflow: hidden; width: 100%;} .work3 .work3_left li{float: left; width: 40%; line-height: 2; font-family: 'Roboto','S-CoreDream-2ExtraLight'; letter-spacing: 1px; font-size: 12px;} .work3 .work3_left p{font-family: 'S-CoreDream-2ExtraLight'; letter-spacing: 0.65px; line-height: 1.8;} .work3 .work3_right{float: left; width: 70%;} .work3 .work3_right img{width: 100%; border-radius: 7px;} .work3 .work3_right img{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); -webkit-transition:.3s; -moz-transition:.3s; -ms-transition:.3s; -o-transition:.3s; transition:.3s; } .work3 .work3_right :hover img { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); } /* work3 - 애니메이션 */ .work3{} .work3 .work3_top{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.0s ease-in-out;} .work3 .work3_top h2{} .work3 .work3_top h2 em{} .work3 .work3_top p{} .work3 .work3_top p em{} .work3 .work3_left{} .work3 .work3_left .site_tit1{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.2s ease-in-out;} .work3 .work3_left .site_tit1::before{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.1s ease-in-out;} .work3 .work3_left h4.site_tit2{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.6s ease-in-out;} .work3 .work3_left ol{} .work3 .work3_left li{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.4s ease-in-out;} .work3 .work3_left p{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.8s ease-in-out;} .work3 .work3_left a{opacity: 0; transform: translateY(40px); transition: all 0.3s 1.0s ease-in-out;} .work3 .work3_right{opacity: 0; transform: translateY(40px); transition: all 0.3s 1.1s ease-in-out;} .work3 .work3_right img{} #work3.show .work3{} #work3.show .work3 .work3_top{opacity: 1; transform: translateY(0);} #work3.show .work3 .work3_top h2{} #work3.show .work3 .work3_top h2 em{} #work3.show .work3 .work3_top p{} #work3.show .work3 .work3_top p em{} #work3.show .work3 .work3_left{} #work3.show .work3 .work3_left .site_tit1{opacity: 1; transform: translateY(0);} #work3.show .work3 .work3_left .site_tit1::before{opacity: 1; transform: translateY(0);} #work3.show .work3 .work3_left h4.site_tit2{opacity: 1; transform: translateY(0);} #work3.show .work3 .work3_left ol{} #work3.show .work3 .work3_left li{opacity: 1; transform: translateY(0);} #work3.show .work3 .work3_left p{opacity: 1; transform: translateY(0);} #work3.show .work3 .work3_left a{opacity: 1; transform: translateY(0);} #work3.show .work3 .work3_right{opacity: 1; transform: translateY(0);} #work3.show .work3 .work3_right img{} /* work4 */ .work4{overflow: hidden; color: #fff; text-transform: uppercase; padding: 7% 0 7% 0;} .work4 .work4_top{margin-top: -25px; font-family: 'Montserrat', sans-serif; font-weight: bold; margin-bottom: 5%;} .work4 .work4_top h2{margin-top: -35px; display: inline; font-size: 80px;} .work4 .work4_top h2 em{display: inline; font-size: 80px;} .work4 .work4_top p{ color: #fff; text-align: left; margin-top: -35px; display: inline; font-size: 80px;} .work4 .work4_top p em{color: #fff; display: inline; font-size: 80px; font-style: normal; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #fff; line-height: 0.5;} .work4 .work4_left{float: right; width: 25%; margin-left: 5%;} .work4 .work4_left .site_tit1{font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: bold; letter-spacing: 1.5px; margin: 40px 0 20px 0; position: relative;} .work4 .work4_left .site_tit1::before{content: ''; width: 20px; height: 2px; position: absolute; top: -20px; left: 0; background: #fff;} .work4 .work4_left h3{font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: bold; letter-spacing: 1.5px; color: #fff; position: relative;} .work4 .work4_left h3::after{content: ""; width: 100px; height: 3px; background: #fff; position: absolute; left: 0; bottom: -30px;} .work4 .work4_left h4.site_tit2{color: #fff; font-weight: bold; margin: 40px 0 20px 0; font-size: 20px; font-family: 'S-CoreDream-2ExtraLight'; display: block;} .work4 .work4_left ol{overflow: hidden; width: 100%;} .work4 .work4_left li{float: left; width: 40%; line-height: 2; font-family: 'Roboto','S-CoreDream-2ExtraLight'; letter-spacing: 1px; font-size: 12px;} .work4 .work4_left p{font-family: 'S-CoreDream-2ExtraLight'; letter-spacing: 0.65px; line-height: 1.8;} /*이미지위치*/ .work4 .work4_right{float: right; width: 50%;} /*이미지크기*/ .work4 .work4_right img{width: 60%;} .work4 .work4_right img{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); -webkit-transition:.3s; -moz-transition:.3s; -ms-transition:.3s; -o-transition:.3s; transition:.3s; } .work4 .work4_right :hover img { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1); } /* work4 - 애니메이션 */ .work4{} .work4 .work4_top{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.0s ease-in-out;} .work4 .work4_top h2{} .work4 .work4_top h2 em{} .work4 .work4_top p{} .work4 .work4_top p em{} .work4 .work4_left{} .work4 .work4_left .site_tit1{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.2s ease-in-out;} .work4 .work4_left .site_tit1::before{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.1s ease-in-out;} .work4 .work4_left h4.site_tit2{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.6s ease-in-out;} .work4 .work4_left ol{} .work4 .work4_left li{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.4s ease-in-out;} .work4 .work4_left p{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.8s ease-in-out;} .work4 .work4_left a{opacity: 0; transform: translateY(40px); transition: all 0.3s 1.0s ease-in-out;} .work4 .work4_right{opacity: 0; transform: translateY(40px); transition: all 0.3s 1.1s ease-in-out;} .work4 .work4_right img{} #work4.show .work4{} #work4.show .work4 .work4_top{opacity: 1; transform: translateY(0);} #work4.show .work4 .work4_top h2{} #work4.show .work4 .work4_top h2 em{} #work4.show .work4 .work4_top p{} #work4.show .work4 .work4_top p em{} #work4.show .work4 .work4_left{} #work4.show .work4 .work4_left .site_tit1{opacity: 1; transform: translateY(0);} #work4.show .work4 .work4_left .site_tit1::before{opacity: 1; transform: translateY(0);} #work4.show .work4 .work4_left h4.site_tit2{opacity: 1; transform: translateY(0);} #work4.show .work4 .work4_left ol{} #work4.show .work4 .work4_left li{opacity: 1; transform: translateY(0);} #work4.show .work4 .work4_left p{opacity: 1; transform: translateY(0);} #work4.show .work4 .work4_left a{opacity: 1; transform: translateY(0);} #work4.show .work4 .work4_right{opacity: 1; transform: translateY(0);} #work4.show .work4 .work4_right img{} /* work5 */ .work5{overflow: hidden; color: #fff; text-transform: uppercase; padding: 7% 0 15% 0;} .work5 .work5_top{margin-top: -25px; font-family: 'Montserrat', sans-serif; font-weight: bold; margin-bottom: 5%;} .work5 .work5_top h2{margin-top: -35px; display: inline; font-size: 80px;} .work5 .work5_top h2 em{display: inline; font-size: 80px;} .work5 .work5_top p{ color: #fff; text-align: left; margin-top: -35px; display: inline; font-size: 80px;} .work5 .work5_top p em{color: #fff; display: inline; font-size: 80px; font-style: normal; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #fff; line-height: 0.5;} .work5 .work5_left{float: left; width: 25%; margin-right: 5%;} .work5 .work5_left .site_tit1{font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: bold; letter-spacing: 1.5px; margin: 40px 0 20px 0; position: relative;} .work5 .work5_left .site_tit1::before{content: ''; width: 20px; height: 2px; position: absolute; top: -20px; left: 0; background: #fff;} .work5 .work5_left h4.site_tit2{color: #fff; font-weight: bold; margin: 40px 0 20px 0; font-size: 20px; font-family: 'S-CoreDream-2ExtraLight'; display: block;} .work5 .work5_left ol{overflow: hidden; width: 100%;} .work5 .work5_left li{float: left; width: 40%; line-height: 2; font-family: 'Roboto','S-CoreDream-2ExtraLight'; letter-spacing: 1px; font-size: 12px;} .work5 .work5_left p{font-family: 'S-CoreDream-2ExtraLight'; letter-spacing: 0.65px; line-height: 1.8;} .work5 .work5_right{float: left; width: 70%;} .work5 .work5_right img{width: 100%; border-radius: 7px;} /* work5 - 애니메이션 */ .work5{} .work5 .work5_top{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.0s ease-in-out;} .work5 .work5_top h2{} .work5 .work5_top h2 em{} .work5 .work5_top p{} .work5 .work5_top p em{} .work5 .work5_left{} .work5 .work5_left .site_tit1{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.2s ease-in-out;} .work5 .work5_left .site_tit1::before{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.1s ease-in-out;} .work5 .work5_left h4.site_tit2{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.6s ease-in-out;} .work5 .work5_left ol{} .work5 .work5_left li{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.4s ease-in-out;} .work5 .work5_left p{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.8s ease-in-out;} .work5 .work5_left a{opacity: 0; transform: translateY(40px); transition: all 0.3s 1.0s ease-in-out;} .work5 .work5_right{opacity: 0; transform: translateY(40px); transition: all 0.3s 1.1s ease-in-out;} .work5 .work5_right img{} #work5.show .work5{} #work5.show .work5 .work5_top{opacity: 1; transform: translateY(0);} #work5.show .work5 .work5_top h2{} #work5.show .work5 .work5_top h2 em{} #work5.show .work5 .work5_top p{} #work5.show .work5 .work5_top p em{} #work5.show .work5 .work5_left{} #work5.show .work5 .work5_left .site_tit1{opacity: 1; transform: translateY(0);} #work5.show .work5 .work5_left .site_tit1::before{opacity: 1; transform: translateY(0);} #work5.show .work5 .work5_left h4.site_tit2{opacity: 1; transform: translateY(0);} #work5.show .work5 .work5_left ol{} #work5.show .work5 .work5_left li{opacity: 1; transform: translateY(0);} #work5.show .work5 .work5_left p{opacity: 1; transform: translateY(0);} #work5.show .work5 .work5_left a{opacity: 1; transform: translateY(0);} #work5.show .work5 .work5_right{opacity: 1; transform: translateY(0);} #work5.show .work5 .work5_right img{} /******* roadmap CSS ********/ .roadmap { position: relative; padding: 45px 0 15px 0; } .roadmap .timeline { position: relative; width: 90%; } /*타임라인 줄 속성*/ .roadmap .timeline::after { content: ''; position: absolute; width: 2px; background: #ffd600; top: 0; bottom: 0; left: 50%; margin-left: -1px; } /*왼쪽 글상자*/ .roadmap .timeline .timeline-item { position: relative; background: inherit; width: 48%; margin-bottom: 30px; } /*왼쪽 동그라미*/ .roadmap .timeline .timeline-item.left { left: 0; padding-right: 30px; } /*오른쪽글상자*/ .roadmap .timeline .timeline-item.right { left: 50%; padding-left: 30px; } /*동그라미 속성*/ .roadmap .timeline .timeline-item::after { content: ''; position: absolute; width: 16px; height: 16px; top: 48px; right: -8px; background: #000; border: 2px solid #ffd600; border-radius: 16px; z-index: 1; } /*오른쪽 동그라미 위치*/ .roadmap .timeline .timeline-item.right::after { left: -8px; } /*왼쪽 삼각형 속성*/ .roadmap .timeline .timeline-item::before { content: ''; position: absolute; width: 0; height: 0; top: 46px; right: 10px; z-index: 1; border: 10px solid; border-color: transparent transparent transparent #ffd600; } /*삼각형 투명으로-안하면 두개씩 나옴 */ .roadmap .timeline .timeline-item.right::before { left: 10px; border-color: transparent #ffd600 transparent transparent; } /*날짜 글씨 속성*/ .roadmap .timeline .timeline-date { position: absolute; width: 100%; top: 44px; font-size: 30px; font-weight: 600; color: #ffd600; text-transform: uppercase; letter-spacing: 1px; z-index: 1; } /*오른쪽 날짜와 타임라인 간격*/ .roadmap .timeline .timeline-item.left .timeline-date { text-align: left; left: calc(100% + 55px); } /*왼쪽 날짜와 타임라인 간격*/ .roadmap .timeline .timeline-item.right .timeline-date { text-align: right; right: calc(100% + 55px); } /*텍스트 공간 속성*/ .roadmap .timeline .timeline-text { padding: 30px; background: url(../img/bl_bg.png); position: relative; border-right: 5px solid #ffd600; box-shadow: 0 0 10px #ffd600; font-family: 'Montserrat', sans-serif; border: 5px solid #ffd600; } /*오른쪽 텍스트 공간 세로줄속성*/ .roadmap .timeline .timeline-item.right .timeline-text { border-right: none; border-left: 5px solid #ffd600; font-family: 'Montserrat', sans-serif; } /*글씨속성*/ .roadmap .timeline .timeline-text h2 { margin: 0 0 5px 0; font-size: 22px; font-weight: 600; font-family: 'Montserrat', sans-serif; color: #fff; } /*중간글씨*/ .roadmap .timeline .timeline-text h4 { margin: 0 0 10px 0; font-size: 16px; font-style: italic; font-weight: 400; font-family: 'Montserrat', sans-serif; color: #fff; } /*본문글씨*/ .roadmap .timeline .timeline-text p { margin: 0; font-size: 16px; color: #fff; font-family: 'Montserrat', sans-serif; } /*미디어 쿼리*/ @media (max-width: 767.98px) { .experience .timeline::after { left: 8px; } .experience .timeline .timeline-item { width: 100%; padding-left: 38px; } .experience .timeline .timeline-item.left { padding-right: 0; } .experience .timeline .timeline-item.right { left: 0%; padding-left: 38px; } .experience .timeline .timeline-item.left::after, .experience .timeline .timeline-item.right::after { left: 0; } .experience .timeline .timeline-item.left::before, .experience .timeline .timeline-item.right::before { left: 18px; border-color: transparent red transparent transparent; } .experience .timeline .timeline-item.left .timeline-date, .experience .timeline .timeline-item.right .timeline-date { position: relative; top: 0; right: auto; left: 0; text-align: left; margin-bottom: 10px; } .experience .timeline .timeline-item.left .timeline-text, .experience .timeline .timeline-item.right .timeline-text { border-right: none; border-left: 5px solid #000; } .experience .timeline .timeline-item.left .timeline-text, .experience .timeline .timeline-item.right .timeline-text .p{ text-align: left; font: #000; } } /* work6 */ .work6{overflow: hidden; color: #fff; font-size: 16px; font-family: 'Roboto','S-CoreDream-2ExtraLight'; text-transform: uppercase; padding: 7% 0 7% 0;} .work6 .work6_top{margin-top: -25px; font-family: 'Montserrat', sans-serif; font-weight: bold; margin-bottom: 5%;} .work6 .work6_top h2{margin-top: -35px; display: inline; font-size: 80px;} .work6 .work6_top h2 em{display: inline; font-size: 80px;} .work6 .work6_top p{ color: #fff; text-align: left; margin-top: -35px; display: inline; font-size: 80px;} .work6 .work6_top p em{color: #fff; display: inline; font-size: 80px; font-style: normal; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #fff; line-height: 0.5;} .modal-cont iframe{height: 500px;} .work6 .container .row .work6 .work6_tit .text p{color:white; margin-top: 70px; font-size: 20px; letter-spacing: 0.7px; font-family: 'S-CoreDream-2ExtraLight'; line-height: 1.6;} .work6 .p{color: #fff; margin-top: 70px; font-size: 14px; letter-spacing: 0.7px; font-family: 'S-CoreDream-2ExtraLight'; line-height: 1.6;} /*My hobby css*/ div#gallery{ /* width:450px; height:250px; margin:0 auto; border: 10px solid #000; /* 굵은테두리*/ /* background: #000; 배경색 */ /* padding:10px; */ } div#gallery ul li{ position:relative; list-style-image: image(); float:left; margin:0 10px 10px 0; } div#gallery ul li img.small{ width:250px; height:200px; cursor:pointer; } div#gallery ul li img.pic{ position:absolute; left:0px; top:0px; width:400px; height:300px; border:3px solid black; z-index:10; visibility:hidden; /* display:none; */ /* opacity:0; */ ​ } /* 작은사진, 확대사진에 hover시 모두 보여줌. */ div#gallery ul li img.small:hover + img.pic, div#gallery ul li img.pic:hover{ visibility:visible; /* display:block; opacity:1; */ transition: .5s; } /* contact */ .contact{ width:100%; overflow: hidden; box-sizing: border-box; padding: 7% 0; } .contact .left{ float: left; width: 47%; color: #fff; margin-right: 3%; padding-top: 6.5%; } .contact .left h2{display: block;} .contact .left .contact_p1{font-size: 14px; font-family: 'S-CoreDream-2ExtraLight'; letter-spacing: 0.8px; line-height: 1.5; width: 90%;} .contact .left .contact_p2{font-family: 'Montserrat', sans-serif; font-weight: bold; margin-top: 50px; letter-spacing: 1px; text-transform: uppercase; position: relative;} /*스마일 이모지*/ .contact .left .contact_p2::after{content: ''; position: absolute; left: 480px; top: -3px; width: 24px; height: 24px; background: url(../img/emoji.png) no-repeat; background-size: contain;} .contact .right{float: left; width: 50%;} .contact .right form{} .contact .right fieldset{} .contact .right span{display: inline-block; font-size: 13px; margin-bottom: 15px; color: #fff;} .contact .right input.email{width: 100%; height: 40px; margin-bottom: 20px; border: 0; padding: 0 16px; box-sizing: border-box;} .contact .right textarea.message{width: 100%; border: 0; padding: 16px; box-sizing: border-box; resize: none;} .contact .right button{width: 100%; height: 40px; background: #ffd600; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 1px; cursor: pointer; margin-top: 20px;} /*이미지위치*/ .contact .contact_right{float: left; width: 50%;} /*이미지크기*/ .contact .contact_right img{width: 20%;} /* contact - 애니메이션 */ .contact{} .contact .left{} .contact .left h2{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.0s ease-in-out;} .contact .left .contact_p1{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.2s ease-in-out;} .contact .left .contact_p2{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.4s ease-in-out;} .contact .right{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.0s ease-in-out;} .contact .right form{} .contact .right fieldset{} .contact .right span{} .contact .right input.email{} .contact .right textarea.message{} .contact .right button{} #contact.show .contact{} #contact.show .contact .left{} #contact.show .contact .left h2{opacity: 1; transform: translateY(0);} #contact.show .contact .left .contact_p1{opacity: 1; transform: translateY(0);} #contact.show .contact .left .contact_p2{opacity: 1; transform: translateY(0);} #contact.show .contact .right{opacity: 1; transform: translateY(0);} #contact.show .contact .right form{} #contact.show .contact .right fieldset{} #contact.show .contact .right span{} #contact.show .contact .right input.email{} #contact.show .contact .right textarea.message{} #contact.show .contact .right button{} /* signup */ .signup{ width:100%; overflow: hidden; box-sizing: border-box; padding: 7% 0; background: url(/assets/img/bl_bg.png); } .signup .left{ float: left; width: 47%; color: #fff; margin-right: 3%; padding-top: 6.5%; background: url(/assets/img/bl_bg.png); } .signup .left h2{display: block;} .signup .left .signup_p1{font-size: 14px; font-family: 'S-CoreDream-2ExtraLight'; letter-spacing: 0.8px; line-height: 1.5; width: 90%;} .signup .left .signup_p2{font-family: 'Montserrat', sans-serif; font-weight: bold; margin-top: 30px; letter-spacing: 1px; text-transform: uppercase; position: relative;} /*스마일 이모지*/ .signup .left .signup_p2::after{content: ''; position: absolute; left: 480px; top: -3px; width: 24px; height: 24px; background: url(../img/emoji.png) no-repeat; background-size: contain;} .signup .right{float: left; width: 50%;} .signup .right form{} .signup .right fieldset{} .signup .right span{display: inline-block; font-size: 13px; margin-bottom: 15px; color: #fff;} .signup .right input.email{width: 100%; height: 40px; margin-bottom: 20px; border: 0; padding: 0 16px; box-sizing: border-box;} .signup .right textarea.message{width: 100%; border: 0; padding: 16px; box-sizing: border-box; resize: none;} .signup .right button{width: 100%; height: 40px; background: #ffd600; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 1px; cursor: pointer; margin-top: 20px;} /*이미지위치*/ .signup .signup_right{float: left; width: 50%;} /*이미지크기*/ .signup_right img{width: 20%;} /*signup 애니메이션 */ .signup .signup{} .signuph2{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.0s ease-in-out;} .signup.contact_p1{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.2s ease-in-out;} .signup.contact_p2{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.4s ease-in-out;} .signup{opacity: 0; transform: translateY(40px); transition: all 0.3s 0.0s ease-in-out;} .signup form{} .signup fieldset{} .signup span{} .signup input.email{} .signup textarea.message{} .signup button{} #signup.show .signup{} #signup.show .signup .left{} #signup.show .signup .left h2{opacity: 1; transform: translateY(0);} #signup.show .signup .left .signup_p1{opacity: 1; transform: translateY(0);} #signup.show .signup .left .signup_p2{opacity: 1; transform: translateY(0);} #signup.show .signup .right{opacity: 1; transform: translateY(0);} #signup.show .signup .right form{} #signup.show .signup .right fieldset{} #signup.show .signup .right span{} #signup.show .signup .right input.email{} #signup.show .signup .right textarea.message{} #signup.show .signup .right button{} /* footer */ .footer{overflow: hidden; color: #fff; font-family: 'Montserrat', sans-serif; text-align: center; padding: 3% 0; box-sizing: border-box;} .footer .footer_p1{font-size:3rem; font-weight: bold;} .footer .footer_p2{font-size: 0.8em; font-family: 'S-CoreDream-2ExtraLight'; margin-top: 1%;} .footer address{margin-top: 0.5%; font-style: normal; font-size: 0.8em;} /*미디어쿼리*/ /*화면너비 0 ~ 1400px*/ @media (max-width: 1400px) { .container{width: 100%;} } @media (max-width: 1280px) {} @media (max-width: 1024px) {} @media (max-width: 960px) {} @media (max-width: 768px) { .about .about_left{float: none; width: 100%;} .about .about_right{float: none; width: 100%;} .skill .ability{width: 100%; padding: 0;} .skill .keyword{width: 100%; padding: 0;} .contact .left{width: 100%; padding-bottom: 7%;} .contact .right{width: 100%;} .signup .left{width: 100%; padding-bottom: 7%;} .signup .right{width: 100%;} } @media (max-width: 600px) {} @media (max-width: 480px) {}