.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.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: 162px;width:50%;overflow: hidden;transition: color 0.1s;color: #fae0d1; margin-top:50px;} #HISTORY #WEB .history_box.box_left_nav .history_num_before .num_before_inner .num_list>div{font-size: 216px;line-height: 120px; 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: 58px} #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: 18px;line-height: 22px;} #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:0} #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: 340px;padding-right:30px;font-size:22px;line-height:30px;color: #444; text-align:left; box-sizing:border-box;} #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} #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} #HISTORY.on #WEB.sec_inner{position:relative;} #HISTORY.on #WEB.sec_inner .fix_box .history_inner .history_box.box_left_nav{position:absolute;} /* ================================== 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{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:23px; } #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:14px; line-height:22px; text-indent:6px; letter-spacing:-0.5px; } #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%} }