/* Setting */ section{overflow:hidden;position:relative;line-height:1.2;color:#fff;background:#000;word-break:keep-all} section .section_title{margin:0 auto 30px;text-align:center;} section .section_title h3{font-size:50px;display:block;margin-bottom:10px;} section .section_title p{font-size:25px;font-weight:bold} section .section_fix{width:calc(100% - 40px);margin:0 auto;overflow:hidden;max-width:1720px} section .section_body{position:relative;width:100%;margin:0 auto} .header .header_top .logo{background:url('../img/lds-c-logo-w.png') no-repeat center;background-size:contain} .header .header_top .gnb>li>a{color:#fff;} .header .header_top .gnb>li>a:after{background:#aaa;} .header .header_top .gnb>li>a:hover{color:#aaa;} .header .header_top .gnb>li>a.on{color:#aaa;} .header .header_top .gnb>li ul{background:#fff;} .header .header_top .gnb>li ul li a{color:#000;} .header .header_top .gnb>li ul li a.on{color:#666;} .header .header_top .gnb>li ul li a:hover{color:#666;} .m_header .m_logo{background:url('../img/lds-c-logo-w.png') no-repeat center;background-size:contain;} .m_header .m_gnb a{color:#fff;} .m_header .m_gnb a span{background:#fff;} /* Section01 */ #section01{padding:200px 0;} #section01 .section_title{line-height:1;text-align:left} #section01 .section_title h2{font-size:80px;} #section01 .section_title b{font-size:50px;} #section01 .section_body .video {width: 100%;min-height: 200px;height:100vh;overflow: hidden;position: relative;margin:0 auto;} #section01 .section_body .video #video{width:100%;height:100%;object-fit: cover !important;outline:none;border:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} /* Section02 */ #section02{padding:100px 0 200px;} #section02 .section_body ul{float:left;} #section02 .section_body>table{width:100%} #section02 .section_body>table table{color:#fff;} #section02 .section_body>table table th{text-align:left;padding-right:20px;} #section02 .section_body>table table th b{font-size:42px;font-weight:700} #section02 .section_body>table table th p{font-size:18px;color:#6d6d6d} #section02 .section_body>table table td{padding:20px 0;vertical-align:middle} #section02 .section_body>table>tbody>tr>td table td img{width:100%;max-width:230px;} /* Section03 */ #section03{padding:100px 0;} #section03 .section_body{z-index:0} #section03 .history_box{margin:0 auto 100px;overflow:hidden;position:relative;} #section03 .history_box:before{content:'';position:absolute;width:100%;height:1px;background:#E74F12;top:4px;left:0;z-index:-1} #section03 .history_box:after{content:'';position:absolute;width:100%;height:64px;background: linear-gradient(to bottom, #E74F12 0%, #C94814 15%, #A23C13 29%, #6A270C 42%, #521F0A 54%, #341305 67%, #220C04 79%, #000000 91%);top:4px;left:0;z-index:-2;opacity: 0.2;mix-blend-mode: lighten;} #section03 .history_box .box_fix{width:calc(100% - 40px);margin:0 auto;overflow:hidden;max-width:1720px;} #section03 .history_box ul{width:calc(100% / 6);float:left;} #section03 .history_box ul li.year{position:relative;padding:20px 0;font-size:25px;color:#E74F12} #section03 .history_box ul li.year:after{content:'';position:absolute;width:10px;height:10px;top:0;left:0;border-radius:10px;background:#E74F12} #section03 .history_box ul li.text p{font-size:15px;line-height:1.4;padding-right:10px;} #section03 .history_box.tab{display:none} #section03 .history_box.mobile{display:none} #section03 .section_fix table{margin:0 auto;border-collapse: separate;border-spacing:100px 0;} #section03 .section_fix table th{font-size:25px;color:#E74F12;text-align:left;} #section03 .section_fix table td b{font-size:90px;color:#fff;display:inline-block;} #section03 .section_fix table td p{font-size:50px;color:#fff;display:inline-block;} #section03 .section_fix table td span{display:block;position:relative;padding-bottom:10px;} #section03 .section_fix table td span:after{content:'';width:100%;height:3px;position:absolute;bottom:0;left:0;background:#E74F12;} #section03 .section_fix table.mobile{display:none;} #section03 .section_fix table.mobile th{text-align:center;padding:20px 0 10px;} #section03 .section_fix table.mobile td{padding-bottom:40px;} /* Section04 */ #section04{padding:100px 0 200px;} #section04 .section_fix{max-width:1440px;} #section04 .section_body .top_line{margin:0px auto 30px;position:relative;padding:10px 0 15px} #section04 .section_body .top_line p{width:0;height:1px;background:#fff;margin:0 auto;transition:1s;position:relative;} #section04 .section_body .top_line p:before{content:'';position:absolute;width:1px;height:0px;background:#fff;top:0;left:0;transition:0.5s;} #section04 .section_body .top_line p:after{content:'';position:absolute;width:1px;height:0px;background:#fff;top:0;right:0;transition:0.5s;} #section04 .section_body .img_box{position:relative;} #section04 .section_body .img_box ul.center{margin:0 auto;text-align:center;z-index:3;position:relative;} #section04 .section_body .img_box ul.center li{margin:0 auto} #section04 .section_body .img_box ul li{width:100%;max-width:calc((100% / 7) + 30px);transition:1s} #section04 .section_body .img_box ul li img{width:100%;} #section04 .section_body .img_box ul.left{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1} #section04 .section_body .img_box ul.left .one{position:absolute;top:0;left:50%;transform:translateX(-50%);} #section04 .section_body .img_box ul.left .two{position:absolute;top:0;left:50%;transform:translateX(-50%);} #section04 .section_body .img_box ul.left .three{position:absolute;top:0;left:50%;transform:translateX(-50%);} #section04 .section_body .img_box ul.right{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1} #section04 .section_body .img_box ul.right .one{position:absolute;top:0;right:50%;transform:translateX(50%);} #section04 .section_body .img_box ul.right .two{position:absolute;top:0;right:50%;transform:translateX(50%);} #section04 .section_body .img_box ul.right .three{position:absolute;top:0;right:50%;transform:translateX(50%);} #section04 .section_body .bottom_line{position:relative;padding:15px 0 0px;width:calc(200% / 7);text-align:center;margin:30px auto 0;} #section04 .section_body .bottom_line.left{float:left;margin-left:calc((50% / 7) + 15px);} #section04 .section_body .bottom_line.left p{width:0;height:1px;background:#fff;margin:0 auto 15px;transition:1s;position:relative;} #section04 .section_body .bottom_line.left p:before{content:'';position:absolute;width:1px;height:0px;background:#fff;bottom:0;left:0;transition:0.5s;} #section04 .section_body .bottom_line.left p:after{content:'';position:absolute;width:1px;height:0px;background:#fff;bottom:0;right:0;transition:0.5s;} #section04 .section_body .bottom_line.left b{color:#E74F12;font-size:0px;transition:0.5s} #section04 .section_body .bottom_line.right{float:right;margin-right:calc((50% / 7) + 15px);} #section04 .section_body .bottom_line.right p{width:0;height:1px;background:#fff;margin:0 auto 15px;transition:1s;position:relative;} #section04 .section_body .bottom_line.right p:before{content:'';position:absolute;width:1px;height:0px;background:#fff;bottom:0;left:0;transition:0.5s;} #section04 .section_body .bottom_line.right p:after{content:'';position:absolute;width:1px;height:0px;background:#fff;bottom:0;right:0;transition:0.5s;} #section04 .section_body .bottom_line.right b{color:#53b689;font-size:0px;transition:0.5s} #section04 .section_body.on .top_line p{width:calc(100% - (100% / 7) - 30px);} #section04 .section_body.on .top_line p:before{height:15px;transition-delay:1s} #section04 .section_body.on .top_line p:after{height:15px;transition-delay:1s} #section04 .section_body.on .img_box ul{mix-blend-mode:exclusion;transition-delay:1s} #section04 .section_body.on .img_box ul.left{z-index:5} #section04 .section_body.on .img_box ul.left .one{left:0px;transform:translateX(0%)} #section04 .section_body.on .img_box ul.left .two{left:calc(100% / 7);transform:translateX(0%)} #section04 .section_body.on .img_box ul.left .three{left:calc(200% / 7);transform:translateX(0%)} #section04 .section_body.on .img_box ul.right{z-index:5} #section04 .section_body.on .img_box ul.right .one{right:0%;transform:translateX(0%);} #section04 .section_body.on .img_box ul.right .two{right:calc(100% / 7);transform:translateX(0%);} #section04 .section_body.on .img_box ul.right .three{right:calc(200% / 7);transform:translateX(0%);} #section04 .section_body.on .bottom_line.left p{width:100%;transition-delay:0.5s} #section04 .section_body.on .bottom_line.left p:before{height:15px;transition-delay:1s} #section04 .section_body.on .bottom_line.left p:after{height:15px;transition-delay:1s} #section04 .section_body.on .bottom_line.left b{font-size:20px;transition-delay:1.5s} #section04 .section_body.on .bottom_line.right p{width:100%;transition-delay:0.5s} #section04 .section_body.on .bottom_line.right p:before{height:15px;transition-delay:1s} #section04 .section_body.on .bottom_line.right p:after{height:15px;transition-delay:1s} #section04 .section_body.on .bottom_line.right b{font-size:20px;transition-delay:1.5s} #section04 .section_body.mobile{display:none;text-align:center;} #section04 .section_body.mobile img{width:100%;max-width:514px;} /* Section05 */ #section05{padding:100px 0 0px;cursor: url('../img/02_about/section05_mouse.png'), auto;} #section05 .section_body{text-align:center;position:relative;padding-bottom:200px;} #section05 .section_body .logo_btn{position:absolute;z-index:1;cursor: url('../img/02_about/section05_mouse.png'), auto;} #section05 .section_body .logo_btn.one{top:calc(50% - 275px);left:calc(50% - 300px);} #section05 .section_body .logo_btn.two{top:calc(50% - 275px);right:calc(50% - 300px);} #section05 .section_body .logo_btn.three{bottom:calc(50% - 75px);left:calc(50% - 300px);} #section05 .section_body .logo_btn.four{bottom:calc(50% - 75px);right:calc(50% - 300px);} #section05 .section_body .logo_btn img{width:100%;max-width:172px;vertical-align:top;} #section05 .section_body .background{} #section05 .section_body .background img{width:100%;max-width:611px;} #section05 .section_body .img_box{position:absolute;z-index:9999;} /* Section06 */ #section06{padding:100px 0 200px;} #section06 .section_body{overflow:hidden;} #section06 .section_body .fl{float:left;width:300px;} #section06 .section_body .fl ul{margin-top:30px;} #section06 .section_body .fl ul li{font-size:25px;color:#4b4b4b;padding:10px 0;font-weight:bold;cursor: pointer;} #section06 .section_body .fl ul li a{color:#4b4b4b;display:block;} #section06 .section_body .fl ul li a.on{color:#fff;} #section06 .section_body .fr{float:right;width:calc(100% - 300px);max-width:1280px;overflow:hidden;} #section06 .section_body .fr ul li{width:calc(100% / 8);display:block;float:left;} #section06 .section_body .fr ul li img{width:calc(100% - 20px);padding:0 10px;} /* Section07 */ #section07{padding:100px 0 200px;} #section07 .section_body .fl{float:left;width:calc(100% - 600px);height:400px;border-radius:30px;background:url('../img/02_about/section07_img.png') no-repeat right center;background-size:cover;} #section07 .section_body .fr{float:left;width:600px;} #section07 .section_body .fr ul{padding-left:60px;} #section07 .section_body .fr ul li{overflow:hidden;margin:10px 0;line-height:2} #section07 .section_body .fr ul li b{font-size:18px;float:left;width:120px;} #section07 .section_body .fr ul li p{font-size:18px;float:left;} #section07 .section_body .fr ul li p span{color:#3d3d3d} /* Responsive */ @media all and (max-width:1720px){ } @media all and (max-width:1440px){ section .section_title h3{font-size:42px;} section .section_title p{font-size:21px;} #section01 .section_title h2{font-size:64px;} #section01 .section_title b{font-size:38px;} #section01 .section_body .video{max-height:800px;} #section02 .section_body>table table th b{font-size:32px;} #section03 .section_fix ul li.text p{font-size:16px;} #section03 .section_fix table td b{font-size:72px;} #section06 .section_body .fr ul li{width: calc(100% / 7);} } @media all and (max-width:1024px){ section .section_title h3{font-size:35px;} section .section_title p{font-size:16px;} #section01 .section_title h2{font-size:45px;} #section01 .section_title b{font-size:30px;} #section01 .section_body .video{max-height:540px;} #section02 .section_body>table{display:block;} #section02 .section_body>table>tbody{display:block;} #section02 .section_body>table>tbody>tr{display:block;} #section02 .section_body>table>tbody>tr>td{display:block;padding-right:0 !important;} #section02 .section_body>table>tbody>tr>td table{width:100%;} #section02 .section_body>table>tbody>tr>td table td{text-align:right;} #section02 .section_body>table>tbody>tr>td table td img{width:160px;} #section02 .section_body>table table th b{font-size:35px;} #section02 .section_body>table table th p{font-size:14px;} #section03 .history_box.pc{display:none} #section03 .history_box.tab{display:block} #section03 .history_box.mobile{display:none} #section03 .history_box ul{width:calc(100% /3);margin:0 auto 30px;} #section03 .history_box ul li.text p{font-size:16px;} #section03 .section_fix table{border-spacing: 50px 0;} #section03 .section_fix table td b{font-size:72px;} #section06 .section_body .fr ul li{width: calc(100% / 5);} #section07 .section_body .fl{width:calc(100% - 400px)} #section07 .section_body .fr{width:400px;} #section07 .section_body .fr ul{padding-left:40px;} #section07 .section_body .fr ul li b{font-size:16px;} #section07 .section_body .fr ul li p{font-size:16px;} } @media all and (max-width:900px){ #section03 .section_fix table{border-spacing: 30px 0;} #section03 .section_fix table th{font-size:18px;} #section03 .section_fix table td b{font-size:54px;} } @media all and (max-width:768px){ section .section_title h3{font-size:30px;} section .section_title p{font-size:15px;} #section01 .section_title h2{font-size:35px;} #section01 .section_title b{font-size:24px;} #section01 .section_body .video{max-height:420px;} #section03 .history_box ul li.text p{font-size:14px;} #section03 .history_box .box_fix{margin:0 0 0 40px} #section03 .section_fix table td b{font-size:48px;} #section04 .section_body.pc{display:none} #section04 .section_body.mobile{display:block;} #section06 .section_body .fl{width:100%} #section06 .section_body .fl ul{text-align:center;margin:0 auto 30px;} #section06 .section_body .fl ul li{display:inline-block;padding:0 10px;font-size:21px;} #section06 .section_body .fr{width:100%;max-width:600px;margin:0 auto;float:inherit;} #section06 .section_body .fr ul li{width: calc(100% / 4);} #section07 .section_body .fl{width:100%;height:300px;} #section07 .section_body .fr{width:100%;} #section07 .section_body .fr ul{padding-left:0px;padding-top:30px;} #section07 .section_body .fr ul li{width:calc(50% - 20px);padding:0 10px;float:left;margin:0;} #section07 .section_body .fr ul li b{font-size:14px;width:80px;} #section07 .section_body .fr ul li p{font-size:14px;} } @media all and (max-width:640px){ section .section_title h3{font-size:25px;} section .section_title p{font-size:14px;} #section01 .section_title h2{font-size:30px;} #section01 .section_title b{font-size:18px;} #section01 .section_body .video{max-height:320px;} #section03 .history_box.pc{display:none} #section03 .history_box.tab{display:none} #section03 .history_box.mobile{display:block} #section03 .history_box ul{width:calc(100% /2);margin:0 auto 30px;} #section02 .section_body>table table th{padding:10px 0} #section02 .section_body>table>tbody>tr>td table td img{width:100px;} #section03 .section_fix table.pc{display:none} #section03 .section_fix table.mobile{display:table} #section05 .section_body .logo_btn.one{top:calc(50% - 275px);left:0;} #section05 .section_body .logo_btn.two{top:calc(50% - 275px);right:0;} #section05 .section_body .logo_btn.three{bottom:calc(50% - 75px);left:0;} #section05 .section_body .logo_btn.four{bottom:calc(50% - 75px);right:0;} #section05 .section_body .logo_btn img{max-width:160px} #section07 .section_body .fr ul li{width:calc(100% - 20px);} } @media all and (max-width:480px){ #section01 .section_fix{overflow:visible} #section01 .section_body{width:calc(100% + 40px);margin:0 -20px} #section01 .section_body .video{max-height:275px} #section02 .section_body>table table th b{font-size:21px;} #section02 .section_body>table table th p{font-size:14px;} #section03 .history_box ul li.year{font-size:19px} #section03 .history_box ul li.text p{font-size:12px;} #section05 .section_body .logo_btn.one{top:calc(50% - 215px);left:0;} #section05 .section_body .logo_btn.two{top:calc(50% - 215px);right:0;} #section05 .section_body .logo_btn.three{bottom:calc(50% - 20px);left:0;} #section05 .section_body .logo_btn.four{bottom:calc(50% - 20px);right:0;} #section05 .section_body .logo_btn img{max-width:120px} #section06 .section_body .fl ul li{font-size:17px} #section06 .section_body .fr ul li{width: calc(100% / 3);} #section07 .section_body .fl{height:200px} } @media all and (max-width:420px){ #section02 .section_body>table table th b{font-size:18px;} #section02 .section_body>table table th p{font-size:10px;} #section03 .history_box ul li.year{font-size:16px} #section03 .history_box ul li.text p{font-size:10px;} #section05 .section_body .logo_btn.one{top:calc(50% - 195px);left:0;} #section05 .section_body .logo_btn.two{top:calc(50% - 195px);right:0;} #section05 .section_body .logo_btn.three{bottom:calc(50% - 10px);left:0;} #section05 .section_body .logo_btn.four{bottom:calc(50% - 10px);right:0;} #section05 .section_body .logo_btn img{max-width:100px} #section06 .section_body .fl ul li{font-size:14px} }