.top-button {position:fixed;bottom:90px;right:20px;width:50px;height:50px;line-height:40px;border:2px solid #333;color:#333;text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.5); cursor: pointer;} .top-button:hover {border-color:#333;background:#fff;color:#333} strong{font-weight:normal;} .main_body header{position:static; z-index:1001;top:-96px;transition:top 1s;} .main_body header h1 a{background-image:url(../images/header_logo_b.png?v=1);text-indent: -99999em;} .main_body header .util_menu a{color:#999fa7 ;text-shadow: unset;} .main_body header .btn_all .menu_icon span{background-color:#333;} .main_body header .util_menu li .header_search .input_text{border-color:#fff;color:#fff;outline: none;} /* .main_body footer{background-color:#222224;bottom:-292px;transition:bottom 0.4s;border-color:#222224;} */ /*.main_body footer{background-color:#222224;transition:bottom 0.4s;border-color:#222224;position: relative;} .main_body footer .info li{color:#888888;} .main_body footer .info li:first-child{color:#fff;} .main_body footer .policy{background-color:#151517;}*/ /* .main_wrap{width:100%;min-width:1440px;height:100vh;overflow:hidden;position:relative;top:0;transition:top 0.4s;} */ .main_wrap{width:100%;min-width:1440px;overflow:hidden;height:820px; background: #f7f7f7; /* max-height: 710px; */ position:relative;top:0;transition:top 0.4s;} /* .main_wrap .main_bg_wrap{position:fixed;left:0;top:0;width:100%;height:100%;} */ .main_wrap .main_bg_wrap{position:absolute;left:0;top:0;height:100%;} .main_wrap .main_bg_wrap div{background:#fff no-repeat center/cover;position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transform:opacity 1s ease-in-out;} .main_wrap .main_bg_wrap div.on{opacity:1;} .main_wrap .main_bg_wrap .main_bg1{background-image:url(../images/main/main_bg1.png);} .main_wrap section{position:absolute;left:50%;top:0; width:100%;height:100%;max-width:1920px;transform:translateX(-50%);z-index:1;} .main_wrap .main_vis{position:absolute;left:50%;top:0;transform:translate(-50%, 10.5%) scale(1);transform-origin:top center; z-index:1;opacity:0;} .main_wrap section h2{position:relative;top:70px; text-align:center; font:50px/1 'Lato-Black';color:#000;opacity:0;width:100%;z-index:2;} .main_wrap section h2 span{letter-spacing:100px; white-space: pre;} .main_wrap .main_caption{position:relative;top:40px; text-align:center; color:#000;z-index:2;} .main_wrap .main_caption a {color: #00aba2; font-size: 16px; font-family: 'NotoSans-Light'; font-weight: 600; letter-spacing: -1px; line-height: 1; margin-top:29px; opacity:0;transform:translateY(50px); display: block;} .main_wrap .main_caption a span { background: url("../images/utility/bold-arrow-next-c.png") no-repeat top 6px right; background-size: 13px; padding-right: 20px;} .main_wrap .main_caption p {font:38px/52px 'NotoSans-Bold', sans-serif;opacity:0;transform:translateY(50px);} /*.main_wrap .main_caption p {font:24px/38px 'NotoSans-Bold', sans-serif;opacity:0;transform:translateY(50px);}*/ .main_wrap .main_caption p span{font-family: 'Lato-Bold','NotoSans-Medium';} .main_sec1 {background: #f7f7f7;} /* .main_sec1 h2 span:first-child{left:10.98%;} .main_sec1 h2 span:last-child{right:54.05%;} .main_sec2 h2 span:first-child{left:7.7%;} .main_sec2 h2 span:last-child{right:42.01%;} .main_sec3 h2 span:first-child{left:10.98%;} .main_sec3 h2 span:last-child{right:55.05%;} .main_sec4 h2 span:first-child{left:7.7%;} .main_sec4 h2 span:last-child{right:44.21%;}*/ .main_wrap .on{z-index:2;} .main_wrap .on .main_vis{opacity:1;transform:translate(-50%, 25%) scale(0.5);transition:all 1.8s ease-out;} .main_wrap .on h2{opacity:1;transition:opacity 1.4s ease 0.5s;} .main_wrap .on h2 span{letter-spacing:8px;transition:letter-spacing 1.4s ease 0.5s;} .main_wrap .on .main_caption a{opacity:1;transform:translateY(0);transition:opacity 0.6s ease 1.2s, transform 0.6s ease 1.2s, border-color 0.4s, background-color 0.4s} .main_wrap .on .main_caption p{opacity:1;transform:translateY(0);transition:all 0.6s ease 1.4s;} .progress{position:absolute;left:0;top:102vh;margin-top:-8px;height:8px;width:100%;background-color:rgba(255,255,255,0.3);overflow:hidden;z-index:3;transition:top 1s} .progress .bar{position:absolute;width:0;height:8px;background-color:#fff;transition:width 1s;} .section_count{position:absolute;left:0;bottom:-36px;width:100%;z-index:3;transition:bottom 1s} .section_count .cnt_box{max-width:1920px;min-width:1440px;width:100%;transform:translateX(-50%);margin-left:50%;text-align:right;} .section_count .cnt_box span, .section_count .cnt_box strong{vertical-align:middle;font:18px/20px 'Lato-Light';color:#fff;} .section_count .cnt_box strong{font-family:'Lato-Black';} .section_count .cnt_box span{margin-right:80px;} .main_link{position:absolute;top:50%;margin-top:-54px;z-index:3;transition:all 1s ease-in-out 1s;width:37px;height:108px;opacity:0;} .main_link img{position:absolute;top:0;transition:all 0.4s ease;} .main_link span{position:absolute;top:37px;line-height:37px;font:15px/37px 'Lato-Black';color:#fff;transition:all 0.4s ease;border-top:1px solid #fff;width:116px;} .link_prev{left:0;} .link_next{right:0;} .link_prev img{left:0;} .link_next img{right:0;} .link_prev span{left:-116px;text-align:right;} .link_next span{right:-116px;text-align:left;} .link_prev.on img{left:-37px;} .link_next.on img{right:-37px;} .link_prev.on span{left:0;} .link_next.on span{right:0;} .link_prev:hover img{left:-37px;} .link_next:hover img{right:-37px;} .link_prev:hover span{left:0px;} .link_next:hover span{right:0;} .onload header{top:0;} .onload .progress{top:100vh;} .onload .section_count{bottom:36px;} .onload .main_link{opacity:1;} .onload .progress .bar{width:25%;} @media screen and (max-width:1440px) { .main_wrap{min-width:inherit;} .main_wrap section{transform:translateX(-50%) scale(1);} /*.main_wrap .main_caption{transform: translateX(10%);}*/ .story_wrap section{width:1400px;} .story_wrap .sc1_txtwrap{top:31.5%;} .story_sec1 h2{transform: scale(0.9);top:30.5%} .story_sec1 p{margin-left: 25px;} .story_sec2 .vis_box2{padding-left: 875px;} .main_wrap .on .main_vis {transform: translate(-50%, 31%) scale(0.54);} /* .main_wrap .on .main_vis {transform: translate(-50%, 20%) scale(0.5);}*/ } @media screen and (max-width:743px) { .main_wrap {max-height: 500px} /*.main_wrap section {margin-top: -360px;}*/ .main_wrap section h2 {top: 0;} .main_wrap h2 img {max-width: 420px; width: 100%;} .main_wrap .main_caption {top: 5px;} .main_wrap .main_caption p {font:28px/42px 'NotoSans-Bold', sans-serif;opacity:0;transform:translateY(50px);} /* .main_wrap .main_caption p {font-family: 'NotoSans-Mediem', sans-serif;}*/ /*.main_wrap .main_caption p {font:24px/38px 'NotoSans-Bold', sans-serif;opacity:0;transform:translateY(50px);}*/ .main_wrap .on .main_vis {transform: translate(-50%, 15%) scale(0.37);} /* .main_wrap .on .main_vis {transform: translate(-50%, 15%) scale(0.32);}*/ #haka_section04 .section_title p.text-big { font: 24px/38px 'NotoSans-Bold', sans-serif !important; } } #main_container {width: 100%; max-width: 2560px; margin: 0 auto;} @media screen and (min-width:2560px) { #main_container {/*overflow: hidden;*/} } .main_section {width: 100%; padding: 40px 0; display: flex; flex-wrap: wrap; box-sizing: border-box;} .main_section .contents_wrap {position: relative; width: 1000px; margin: 0 auto;} .section_title {} p {font-size: 16px; color: #000000; line-height: 1.3;} .ward_w {color: #1d1d1f;} #haka_section01 p {color: white; text-align: center;} .inner_vertical_arr {display: table-cell; width: 100%; height: 100%; vertical-align: middle;} /*.banner_text {display: table; height: 564px; width: 50%; box-sizing: border-box; opacity: 0; transform:translateY(100px); transition: all 1s ease 0.4s;} .banner_text.on {opacity: 1; transform:translateY(0);} .banner_text .section_title p.text-mid {font-size: 27px; font-family: 'Lato-Black';} .banner_text .section_title p.text-mid span {color: #cd4800; font-family: 'Lato-Light'; font-size: 23px;} .banner_text .section_title p.text-small {color: #676767;} .banner_text a {color: #0071e3; font-size: 16px; font-family: 'NotoSans-Light'; font-weight: 600; letter-spacing: -1px; line-height: 1; margin-top: 60px; display: block;} .banner_text a span { background: url("../images/utility/bold-arrow-next-c.png") no-repeat top 6px right; background-size: 13px; padding-right: 20px;} .banner_img {width: 50%; opacity: 0; transform:translateY(100px); transition: all 1s ease;} .banner_img.on {opacity: 1; transform:translateY(0);} #haka_section01 {} #haka_section01 .banner_text, #haka_section01 .banner_img {float: left;} #haka_section01 .banner_text {padding-right: 100px;} #haka_section02 {} #haka_section02 .banner_text, #haka_section02 .banner_img {float: right;} #haka_section02 .banner_text {padding-left: 100px;}*/ .banner_text {display: table; height: 100%; width: 50%; box-sizing: border-box; opacity: 0; transform:translateY(100px); transition: all 1s ease;} .banner_text.on {opacity: 1; transform:translateY(0);} .banner_text .section_title p.text-mid {font-size: 27px; font-family: 'Lato-Black';} .banner_text .section_title p.text-mid span {color: #cd4800; font-family: 'Lato-Light'; font-size: 23px;} .banner_text .section_title p.text-small {color: #676767;} .banner_text a {color: #00aba2; font-size: 16px; font-family: 'NotoSans-Light'; font-weight: 600; letter-spacing: -1px; line-height: 1; margin-top: 60px; display: block;} .banner_text a span { background: url("../images/utility/bold-arrow-next-c.png") no-repeat top 7px right; background-size: 13px; padding-right: 20px;} #haka_section01 {background: url("../images/main/section02_bg.png?v=3") no-repeat bottom left 50%; background-color: #fff; background-size: cover; height: 820px;} #haka_section01 .banner_text {width: 100%;} #haka_section01 .banner_text p img {width: 540px; padding-bottom: 10px;} #haka_section01 .banner_text a {text-align: center;} #haka_section01 .banner_text p {font:38px/52px 'NotoSans-Bold', sans-serif;} a.no_hover:hover { text-decoration: none; } @media screen and (max-width:743px) { #haka_section01 .banner_text p {font:24px/38px 'NotoSans-Bold', sans-serif;} } #haka_section02 {background: url("../images/main/section03_bg.png?v=1") no-repeat bottom left 50%; background-color: #fff; background-size: 1600px; height: 820px;} #haka_section02 .banner_text {width: 100%;} #haka_section02 .banner_text p {color: #000000; text-align: center; margin: 10px 0;} #haka_section02 .banner_text p img {width: 540px; padding-bottom: 10px;} #haka_section02 .banner_text a {text-align: center;} #haka_section02 .banner_text p {font:38px/52px 'NotoSans-Bold', sans-serif;} a.no_hover:hover { text-decoration: none; } @media screen and (max-width:743px) { #haka_section02 .banner_text p {font:24px/38px 'NotoSans-Bold', sans-serif;} } #haka_section0302 {background: url("../images/main/section03_02_bg.png?v=2") no-repeat bottom left 50%; background-color: #fff; background-size: cover; height: 820px;} #haka_section0302 .banner_text {width: 100%;} #haka_section0302 .banner_text p {color: #000; text-align: center; margin: 10px 0;} #haka_section0302 .banner_text p img {width: 540px; padding-bottom: 10px;} #haka_section0302 .banner_text a {text-align: center;} #haka_section0302 .banner_text p {font:38px/52px 'NotoSans-Bold', sans-serif;} #haka_section0302 .banner_text p.text-small { font-family: 'NotoSans-Light'; font-weight: 600; font-size: 19px; word-break: keep-all; line-height: 1.5; } a.no_hover:hover { text-decoration: none; } @media screen and (max-width:743px) { #haka_section0302 .banner_text p {font:24px/38px 'NotoSans-Bold', sans-serif;} #haka_section0302 .banner_text p.text-small { font-size: 16px; } } /*#haka_section02 { padding: 40px 0} #haka_section02 .section_title {opacity: 0; transform:translateY(100px); transition: all 1s ease;} #haka_section02 .section_title p {text-align: center;} #haka_section02 .section_title p.text-semi_big {margin-bottom: 0} #haka_section02.on .section_title {opacity: 1; transform:translateY(0);}*/ /*#haka_section03 {padding-bottom: 0} #haka_section03 .section_title {opacity: 0; transform:translateY(100px); transition: all 1s ease;} #haka_section03 .section_title.on {opacity: 1; transform:translateY(0);} #haka_section03 .section_title p {text-align: center;} #haka_section03 .section_title p.text-mid {font-family: 'NotoSans-Medium';} #haka_choice {position: relative; text-align: center; width:100%; transform:translateY(160px); transition: all 1s ease;} #haka_choice .pdts {position: relative; margin: 0 -100px; display: inline-block;} #haka_choice .pdts img {transform: scale(1.2, 1.2); opacity: 0; transition: all 1s ease .5s;} #haka_choice .pdts#pdt1 {} #haka_choice .pdts#pdt2 {} #haka_choice .pdts#pdt3 {} #haka_choice.on {transform:translateY(0);} #haka_choice.on .pdts img {transform: scale(1,1); opacity: 1;}*/ #haka_section04 {/*position: sticky; top: 0; left: 0;*/ background: url("../images/main/main03.jpg?v=1") no-repeat center; height: 820px; background-size: cover; padding: 200px 0;} #haka_section04 .inner_vertical_arr {padding-top: 200px; opacity: 0;} #haka_section04 .contents_wrap {display: table; height: 100%; } #haka_section04 .section_title p { color: #000; text-align: center; } #haka_section04 .section_title p.text-big { font: 38px/52px 'NotoSans-Bold', sans-serif; } #haka_section04 a {display: block; width: 230px; height: 40px; text-align: center; line-height: 40px; border-radius: 50px; background: #fff; color: #1d1d1f; margin: 0 auto; font-family: 'NotoSans-Medium'; margin-top: 40px; text-decoration: none; } #haka_section04 a:hover {background: #0071e3; color: #fff;} #haka_section04.on .inner_vertical_arr {animation:ink2 1.3s both; padding-top: 0; transition: padding-top 1.3s;} @keyframes ink2{ 0%{opacity: 0;filter: blur(20px)} 100%{opacity:1;filter:none} } #haka_section05 {position: relative; padding: 1% 0; padding-bottom: 0; background: #fff;} #haka_section05 ul.work_list {width: 100%; display: flex; flex-wrap: wrap;} #haka_section05 ul.work_list.new_list {margin: 0 1%;} #haka_section05 ul.work_list li.banners {float: left; width: 49.5%; height: 580px; box-sizing: border-box; margin-left: 1%; margin-bottom: 1%; padding: 70px 80px; background-size: 850px; background-position: center bottom; background-repeat: no-repeat; opacity: 1; } #haka_section05 ul.work_list li.banners p {text-align: center;} #haka_section05 ul.work_list li.banners p.text-semi_big {margin-bottom: 0;} #haka_section05 ul.work_list li.banners a {color: #00aba2; font-size: 16px; font-family: 'NotoSans-Light'; font-weight: 600; letter-spacing: -1px; line-height: 1; display: inline-block; text-decoration: none; opacity: 1; margin: 0 15px; margin-top: 25px;} #haka_section05 ul.work_list li.banners a span { background: url("../images/utility/bold-arrow-next-c.png") no-repeat top 6px right; background-size: 13px; padding-right: 20px;} /*#haka_section05 ul.work_list li.banners:hover a {opacity: 1;transform:translateY(0);} */ #haka_section05 ul.work_list li.banners:first-of-type {margin-left: 0;} #haka_section05 ul.work_list li.banners#main_bn01 {background-image: url("../images/main/banner01_bg.jpg"); background-color: #f8f8f8} #haka_section05 ul.work_list li.banners#main_bn02 {background-image: url("../images/main/banner02_bg.jpg"); background-color: #000} #haka_section05 ul.work_list li.banners#main_bn02 p {color: #fff;} #haka_section05 ul.work_list li.banners#main_bn03 {background-image: url("../images/main/banner03_bg.jpg"); background-color: #000;} #haka_section05 ul.work_list li.banners#main_bn03 p {color: #fff;} #haka_section05 ul.work_list li.banners#main_bn04 {background-image: url("../images/main/banner04_bg.jpg"); background-color: #f8f8f8} #haka_section05 ul.work_list li.banners#main_bn07 {background-image: url("../images/main/pdt_banner98_bg.jpg"); background-color: #f9f9f9;} #haka_section05 ul.work_list li.banners#main_bn08 {background-image: url("../images/main/pdt_banner99_bg.jpg"); background-color: #f9f9f9;} #haka_section05 ul.work_list li.banners#main_bn05 {background-image: url("../images/main/banner05_bg.jpg");} #haka_section05 ul.work_list li.banners#main_bn06 {background-image: url("../images/main/banner06_bg.jpg");} /* 조대표님 여기 주석 푸세요 작업하실떄 */ /* #haka_section05 ul.work_list li.banners#main_bn071 {background: #f9f9f9 url("../images/main/pd_img02.png") no-repeat; background-size: cover;} #haka_section05 ul.work_list li.banners#main_bn081 {background: #f9f9f9 url("../images/main/pd_img03.png") no-repeat; background-size: cover;} #haka_section05 ul.work_list li.banners#main_bn051 {background: #f9f9f9 url("../images/main/pd_img01.png") no-repeat; background-size: cover;} #haka_section05 ul.work_list li.banners#main_bn061 {background: #f9f9f9 url("../images/main/pd_img04.png") no-repeat; background-size: cover;} @media only screen and (max-width: 980px) { #haka_section05 ul.work_list li.banners#main_bn071 {background: url("../images/main/pd_img02_mobile.png"); background-size: cover;} #haka_section05 ul.work_list li.banners#main_bn081 {background: url("../images/main/pd_img03_mobile.png"); background-size: cover;} #haka_section05 ul.work_list li.banners#main_bn051 {background: url("../images/main/pd_img01_mobile.png"); background-size: cover;} #haka_section05 ul.work_list li.banners#main_bn061 {background: url("../images/main/pd_img04_mobile.png"); background-size: cover;} } */ #haka_section05 ul.work_list.new_list li.banners {padding: 0; height: auto;} #haka_section05 ul.work_list.ver2.new_list li.banners p.text-semi_big {margin: 0;} .pore {position: relative;} .pore .section_title {position: absolute; padding: 30px 50px;} p.text-semi_big span {font-size: 20px !important;} p.text-small {font-size: 15px !important;} #haka_section05 ul.work_list.ver2 li.banners {background-size: cover; background-position: center right -50px;;} #haka_section05 ul.work_list.ver2 li.banners p {text-align: left;} #haka_section05 ul.work_list.ver2 li.banners p.text-semi_big {margin-bottom: 30px;} #haka_section05 ul.work_list.ver2 li.banners a {margin-left: 0;} #haka_section05 ul.work_list.reverse {display: flex; flex-direction: row-reverse;} #haka_section05 ul.work_list.reverse li {float: none;} #haka_section05 ul.work_list.reverse li:last-of-type {margin-left: 0; margin-right: 1%;} #haka_section05 ul.work_list li.banners .section_title p.text-small {color: #676767;} #haka_section05 ul.work_list li.banners.on {-webkit-mask-image: linear-gradient(-70deg, rgba(0,0,0,0) 47.5%, rgba(0,0,0,1) 52.5%); -webkit-mask-size: 250% 100%; animation: reveal 4s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;} #haka_section05 ul.work_list li.banners:nth-of-type(2) {animation-delay: .3s;} #haka_section05 ul.work_list li.banners:nth-of-type(3) {animation-delay: .6s; margin-left: 0} #haka_section05 ul.work_list li.banners:nth-of-type(4) {animation-delay: .9s;} #haka_section05 ul.work_list li.banners:nth-of-type(5) {animation-delay: .3s;} #haka_section05 ul.work_list li.banners:nth-of-type(6) {animation-delay: .4s;} .text-small.wst br{display: none;} @media screen and (max-width:743px) { .text-small.wst br{display: inline-block;} } @keyframes reveal{ 0%{-webkit-mask-position: 100%;opacity: 0;} 100%{-webkit-mask-position:0;opacity: 1;} } @media screen and (min-width:1200px) { #haka_section05 ul.work_list li.banners:nth-of-type(2n+1) {margin-left: 0;} } @media (max-width: 480px) { #haka_section05 ul.work_list.new_list {margin: 0;} #haka_section05 ul.work_list.ver2.new_list li.banners {margin-top: 0 !important;} }