.gu_kv .kv_img_area{background-image: url("../../../img/company/history/kv_about-us_history.jpg")} .gu_sub_wrapper .gu_sub_contents .contents_inner{max-width: 1116px; margin-bottom:160px;} .color_1{color: #fae0d1 !important;} .color_2{color: #fcb78d !important;} .color_3{color: #ef9f6f !important;} .color_4{color: #f6792f !important;} .color_5{color: #f6792f !important;} .color_6{color: #da450d !important;} #HISTORY #WEB .history_box.box_left_nav{position: absolute;width: 230px;height: 100vh;min-height: 730px;top: 0;z-index: 1; opacity:1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition:opacity 0.2s; -webkit-transition:opacity 0.2s; } #HISTORY.on #WEB .sec_inner{position:relative;} #HISTORY.on #WEB .sec_inner .fix_box .history_inner .history_box.box_left_nav{position:absolute;} #HISTORY.fix #WEB .history_box.box_left_nav{position: fixed} #HISTORY.ab #WEB .history_box.box_left_nav{position: absolute} #HISTORY #WEB .history_box.box_left_nav .history_pos.pos_after{margin-top: 160px} #HISTORY #WEB .history_box.box_left_nav .history_pos.pos_before{margin-top: 70px} #HISTORY #WEB .history_box.box_left_nav .history_pos ul li{font-size: 22px;line-height: 38px;color: rgba(0,0,0,.42);transition: all 0.3s;} #HISTORY #WEB .history_box.box_left_nav .history_pos.pos_after ul li{color: rgba(0,0,0,.42);visibility: hidden;opacity: 0} #HISTORY #WEB .history_box.box_left_nav .history_pos.pos_after ul li.show{visibility: visible;opacity: 1;color: rgba(0,0,0,1);} #HISTORY #WEB .history_box.box_left_nav .history_pos.pos_after ul li.hide{color: rgba(0,0,0,.42);visibility: visible;opacity: 1} #HISTORY #WEB .history_box.box_left_nav .history_pos.pos_before ul li{color: rgba(0,0,0,.42);visibility: visible;opacity: 1} #HISTORY #WEB .history_box.box_left_nav .history_pos.pos_before ul li.hide{opacity: 0;visibility: hidden} #HISTORY #WEB .history_box.box_left_nav .history_pos.pos_before ul li a{color: inherit} #HISTORY #WEB .history_box.box_left_nav .history_pos ul li sup{font-size: 12px;margin-left: 5px} #HISTORY #WEB .history_box.box_left_nav .history_num_before .num_before_inner{font-size: 0;overflow: hidden} #HISTORY #WEB .history_box.box_left_nav .history_num_before .num_before_inner .num_list{display: inline-block;vertical-align: top;position: relative;height: 265px;width:50%;overflow: hidden;transition: color 0.1s;color: #fae0d1;} #HISTORY #WEB .history_box.box_left_nav .history_num_before .num_before_inner .num_list>div{font-size: 216px;line-height: 1; font-weight:200; opacity:0;position: absolute;top: 0;left: 0;right: 0;bottom: 0} #HISTORY #WEB .history_box.box_left_nav .history_num_before .num_before_inner .num_list>div.on{opacity: 1} #HISTORY #WEB .history_box.box_right_list{padding-left: 230px;position: relative;padding-bottom: 80px} #HISTORY #WEB .history_box.box_right_list .box_inner{padding-top: 239px} #HISTORY #WEB .history_box.box_right_list .box_list{border-top: 1px solid rgba(0,0,0,.1);margin-top: 64px;} #HISTORY #WEB .history_box.box_right_list .box_list:first-child{border-top: 0;margin-top: 0;padding-top: 0} #HISTORY #WEB .history_box.box_right_list .box_list .list_head{font-size: 0;padding-top: 60px} #HISTORY #WEB .history_box.box_right_list .box_list .list_head>div{display: inline-block;vertical-align: middle} #HISTORY #WEB .history_box.box_right_list .box_list .list_head .num{font-size: 216px;color: #fae0d1;line-height: 124px; font-weight:200; width: 340px;overflow: hidden;height: 170px;} #HISTORY #WEB .history_box.box_right_list .box_list .list_head .desc{width: calc(100% - 340px)} #HISTORY #WEB .history_box.box_right_list .box_list .list_head .desc .copy, #HISTORY #WEB .history_box.box_right_list .box_list .list_cnt .cnt_left span{font-size: 22px;line-height: 32px;} #HISTORY #WEB .history_box.box_right_list .box_list .list_head .desc .copy span, #HISTORY #WEB .history_box.box_right_list .box_list .list_cnt .cnt_left span{display: block;margin-top: 12px;} #HISTORY #WEB .history_box.box_right_list .box_list .list_head .desc .copy span:first-child,#HISTORY #WEB .history_box.box_right_list .box_list .list_cnt .cnt_left span:first-child{margin-top: 0} #HISTORY #WEB .history_box.box_right_list .box_list .list_head .desc .copy span.comment, #HISTORY #WEB .history_box.box_right_list .box_list .list_cnt .cnt_left span.comment{display:block; position:relative; font-size:18px; line-height:28px; text-indent:6px;letter-spacing:-0.5px;} #HISTORY #WEB .history_box.box_right_list .box_list .list_head .desc .copy span.comment:before, #HISTORY #WEB .history_box.box_right_list .box_list .list_cnt .cnt_left span.comment:before{display:block; content:':'; position: absolute; top: -2px; left: -6px; z-index: 1;} #HISTORY #WEB .history_box.box_right_list .box_list .list_cnt{margin-top:0;text-align: right} #HISTORY #WEB .history_box.box_right_list .box_list .list_cnt .cnt_img{margin-top: 20px} #HISTORY #WEB .history_box.box_right_list .box_list .list_cnt .cnt_img:first-child{margin-top: 60px} #HISTORY #WEB .history_box.box_right_list .box_list .list_cnt > div{display: inline-block; vertical-align: bottom;} #HISTORY #WEB .history_box.box_right_list .box_list .list_cnt .cnt_left{width: calc(100% - 340px); text-align: left;} #HISTORY #WEB .history_box.box_right_list .box_list .list_cnt .cnt_left img{width: 100%} #HISTORY #WEB .history_box.box_right_list .box_list .list_cnt .cnt_right{width: 540px; margin-top:60px;} #HISTORY #WEB .history_box.box_right_list .box_list .list_cnt .cnt_right img{width: 100%} /* ================================== set Motion ================================== */ #HISTORY #WEB .history_box.box_left_nav .history_pos.pos_after{opacity: 0;transform: translateX(-20px); transition: all 1.5s cubic-bezier(.3,0,.07,.99); } #HISTORY #WEB .history_box.box_left_nav .history_num_before{opacity: 0;transform: translateY(100px); transition: all 1.5s cubic-bezier(.3,0,.07,.99); } #HISTORY #WEB .history_box.box_left_nav .history_pos.pos_before ul{opacity: 0;transform: translateX(-20px); transition: all 1.5s cubic-bezier(.3,0,.07,.99); } #HISTORY #WEB .history_box.box_right_list .list1 .num{opacity: 0;transform: translateY(130px); transition: all 1.5s cubic-bezier(.3,0,.07,.99); } #HISTORY #WEB .history_box.box_right_list .list1 .desc .tit{opacity: 0;transform: translateY(20px); transition: all 1.5s cubic-bezier(.3,0,.07,.99); } #HISTORY #WEB .history_box.box_right_list .list1 .desc .copy{opacity: 0;transform: translateY(30px); transition: all 1.5s cubic-bezier(.3,0,.07,.99); } #HISTORY #WEB .history_box.box_right_list .list2, #HISTORY #WEB .history_box.box_right_list .list3, #HISTORY #WEB .history_box.box_right_list .list4, #HISTORY #WEB .history_box.box_right_list .list5, #HISTORY #WEB .history_box.box_right_list .list6{opacity: 0;transition: all 1.5s cubic-bezier(.3,0,.07,.99);} /* ================================== action Motion ================================== */ #HISTORY.enter #WEB .history_box.box_left_nav .history_pos.pos_after{opacity: 1;transform: translateX(0);transition-delay:0s;} #HISTORY.enter #WEB .history_box.box_left_nav .history_num_before{opacity: 1;transform: translateY(0);transition-delay: 0.2s} #HISTORY.enter #WEB .history_box.box_left_nav .history_pos.pos_before ul{opacity: 1;transform: translateX(0);transition-delay: 0.2s} #HISTORY.enter #WEB .history_box.box_right_list .list1 .num{opacity: 1;transform: translateY(0);transition-delay: 0.3s} #HISTORY.enter #WEB .history_box.box_right_list .list1 .desc .tit{opacity: 1;transform: translateY(0);transition-delay: 0.4s} #HISTORY.enter #WEB .history_box.box_right_list .list1 .desc .copy{opacity: 1;transform: translateY(0);transition-delay: 0.5s} #HISTORY.enter #WEB .history_box.box_right_list .list2, #HISTORY.enter #WEB .history_box.box_right_list .list3, #HISTORY.enter #WEB .history_box.box_right_list .list4, #HISTORY.enter #WEB .history_box.box_right_list .list5, #HISTORY.enter #WEB .history_box.box_right_list .list6{opacity: 1;transition-delay: 0.8s} /* ================================== Tablet css ================================== */ @media all and (max-width: 1080px){ .gu_sub_wrapper .gu_sub_contents .contents_inner.mobile{padding-top: 0} } #HISTORY #MOBILE{margin: 0;padding: 0;position: relative;} #HISTORY #MOBILE .history_nav{position: absolute;top: 0;left:0;background:#fff;z-index:1;transition: all 0.6s;width: 100%;overflow: hidden;height: 65px;padding: 35px 0;} #HISTORY #MOBILE .history_nav.fix{position:fixed;padding: 0;height: 66px} #HISTORY #MOBILE .history_nav.fix .box_inner .history_pos{border-bottom: 1px solid #f6f6f6} #HISTORY #MOBILE.end .history_nav{height: 0;} #HISTORY #MOBILE .history_nav .box_inner{position: relative} #HISTORY #MOBILE .history_nav .box_inner .history_pos{height: 65px;overflow: hidden;padding: 0;} #HISTORY #MOBILE .history_nav .box_inner .history_pos ul{width: 100%;text-align: center} #HISTORY #MOBILE .history_nav .box_inner .history_pos ul li{display: inline-block;vertical-align: top;line-height: 65px;margin: 0 15px} #HISTORY #MOBILE .history_nav .box_inner .history_pos ul li a{display: inline-block;font-size: 15px;color: rgba(0,0,0,.42)} #HISTORY #MOBILE .history_nav .box_inner .history_pos ul li.on a{color: rgba(0,0,0,1)} #HISTORY #MOBILE .history_box{margin: 0;padding-top: 135px} #HISTORY #MOBILE .history_box .box_list{border-bottom: 1px solid #ccc;padding: 40px 0} #HISTORY #MOBILE .history_box .box_list:last-child{border-bottom: 0} #HISTORY #MOBILE .history_box .box_list:first-child{padding-top: 0} #HISTORY #MOBILE .history_box .box_list .list_head{font-size: 0;} #HISTORY #MOBILE .history_box .box_list .list_head>div{display: inline-block;vertical-align: middle} #HISTORY #MOBILE .history_box .box_list .list_head .num{font-size: 120px;color:#fae0d1;line-height: 70px; font-weight:200;width: 55%;overflow: hidden;height: 95px;} #HISTORY #MOBILE .history_box .box_list .list_head .desc{width: 45%} #HISTORY #MOBILE .history_box .box_list .list_head .desc .copy{font-size: 14px;line-height: 20px;} #HISTORY #MOBILE .history_box .box_list .list_head .desc .copy span{display: block;margin-top: 6px;} #HISTORY #MOBILE .history_box .box_list .list_head .desc .copy span:first-child, #HISTORY #MOBILE .history_box .box_list .list_cnt .cnt_left span:first-child{margin-top: 0} #HISTORY #MOBILE .history_box .box_list .list_head .desc .copy span.comment, #HISTORY #MOBILE .history_box .box_list .list_cnt .cnt_left span.comment{display:block; position:relative; font-size:12px; line-height:18px; text-indent:6px;letter-spacing:-0.5px; margin-top:28px;} #HISTORY #MOBILE .history_box .box_list .list_head .desc .copy span.comment:before, #HISTORY #MOBILE .history_box .box_list .list_cnt .cnt_left span.comment:before{display:block; content:':'; position: absolute; top: -2px; left: -6px; z-index: 1;} #HISTORY #MOBILE .history_box .box_list .list_cnt{margin-top: 0;text-align: right} #HISTORY #MOBILE .history_box .box_list .list_cnt .cnt_img{margin-top: 20px} #HISTORY #MOBILE .history_box .box_list .list_cnt img{width: 45%} /* ================================== Mobile css ================================== */ @media all and (max-width: 766px){ #HISTORY #MOBILE .history_nav{height: 61px} #HISTORY #MOBILE .history_nav .box_inner .history_pos{height: 60px;border-bottom: 1px} #HISTORY #MOBILE .history_nav .box_inner .history_pos ul{width: 100%;overflow-x: scroll;overflow-y:hidden !important;-webkit-overflow-scrolling: touch;white-space: nowrap;padding: 0 20px;box-sizing: border-box;font-size: 0;height: 80px;} #HISTORY #MOBILE .history_nav .box_inner .history_pos ul li{line-height: 60px} #HISTORY #MOBILE .history_box .box_list .list_head>div{display: block} #HISTORY #MOBILE .history_box .box_list .list_head .num{width: 100%} #HISTORY #MOBILE .history_box .box_list .list_head .desc{width: 100%;margin-top: 40px} #HISTORY #MOBILE .history_box .box_list .list_cnt{margin-top: 40px;text-align: left} #HISTORY #MOBILE .history_box .box_list .list_cnt .cnt_img{margin-top: 10px} #HISTORY #MOBILE .history_box .box_list .list_cnt img{width: 100%} #HISTORY #MOBILE .history_box .box_list .list_head .desc .copy{font-size: 16px;line-height: 26px;} #HISTORY #MOBILE .history_box .box_list .list_head .desc .copy span.comment, #HISTORY .history_box .box_list .list_cnt .cnt_left span.comment{font-size:14px; line-height:24px;} }