@charset "utf-8"; /* CSS Document */ .mask{ -webkit-mask-image: url('/img/main_visula_le_bg2.png'); -o-mask-image: url('/img/main_visula_le_bg2.png'); -moz-mask-image: url('/img/main_visula_le_bg2.png'); -ms-mask-image: url('/img/main_visula_le_bg2.png'); mask-image: url('/img/main_visula_le_bg2.png'); mask-mode: alpha; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100%; mask-size: 100%; width: 48.398%; position: relative } .mask .gradient { position: absolute; top: 0; left: 0; } .mask img { max-height: 800px; } /* 공통 */ #main, #sub { margin-top: 80px; } #main .section {padding: 150px 0} #main .tit_area{font-size:0; position:relative; padding-bottom: 20px;} #main .tit_area.tit_cen { text-align: center; } #main .tit_area .tit_box{display:inline-block;} #main .tit_area .tit_box h2{ display: inline-block; color: #111; font-size: 5.0rem; line-height: 55px; letter-spacing:-3.5px; font-weight:900; position:relative; font-family: 'NanumSquareNeo-eHv', sans-serif;} #main .tit_area .tit_box span { display: block; color: #333; font-size: 1.6rem; line-height: 26px; font-weight:700; letter-spacing:-0.8px; font-family: 'NanumSquareNeo-cBd', sans-serif; } #main .tit_area .tit_box .tit_txt li span { display: none; } #main .tit_area .tit_box .tit_txt li.on span { display: block; } .gd-dot::before{content:''; display:block; clear:both; width:15px; height:15px; position:absolute; right:-19px; bottom:5px; border-radius:50%; background: #e60013; } .gd-dot-type2::before{content:''; display:block; clear:both; width:45px; height:45px; position:absolute; left: 10px; bottom: 15px; border-radius:50%; background: #ffdf00; z-index: -1; } #sub .gd-dot::before{ bottom:7px; } .btns { cursor: pointer; display: inline-block; margin: 50px auto 0; width: 220px; height: 60px; text-align: center; line-height: 60px; font-size: 1.6rem; letter-spacing: -0.5px; color: #fff !important; border-radius: 30px; } .btn_rd { cursor: pointer; display: inline-block; margin: 50px auto 0; width: 220px; height: 60px; text-align: center; line-height: 60px; font-size: 1.6rem; letter-spacing: -0.5px; color: #fff !important; border-radius: 30px; background: linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -webkit-linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(180deg,#e60013 0%, #e64100 99%); } .btn_bl { background: linear-gradient(90deg,#040404 0%, #222222 99%); background: -webkit-linear-gradient(90deg,#040404 0%, #222222 99%); background: -moz-linear-gradient(90deg,#040404 0%, #222222 99%); } .btn_bl2 { background: linear-gradient(60deg,#040404 0%, #434343 89%); background: -webkit-linear-gradient(60deg,#040404 0%, #434343 89%); background: -moz-linear-gradient(60deg,#040404 0%, #434343 89%); } .arrow_box { position: absolute; right: 0; bottom: 0px; z-index: 1; } #main .section1 .arrow_box { bottom: -20px; } #main .section2 .arrow_box { bottom: initial;top: 0px } .arrow_box .arrow { margin-left: 5px; cursor: pointer; display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid rgba(34, 34, 34, 0.2); box-sizing: border-box; } .arrow_box .arrow img { width: 10px } .arrow_box.black .arrow { border: 1px solid rgba(255, 255, 255, 0.2); } .arrow_box.white { bottom: 108px; z-index: 10; } .arrow_box.white .arrow { background: rgba(255, 255, 255, 0.75); border: none; margin-left: 0px; } .arrow_box.white .arrow img { width: 7px } .arrow_box.back .arrow { border:none; background: rgba(34, 34, 34, 0.2) } .arrow_box.back .arrow:hover { border:none; background: #222; } .arrow_box.white2 .arrow { border: 1px solid rgba(34, 34, 34, 0.2); background: rgba(255, 255, 255, 0.2); } .control_box { margin-top:80px; position:relative; z-index:10; height:3px; box-sizing:border-box;} .control_box .slide_scrollbar{display: block !important; width:100%; max-width: 665px; height:1px; position:relative;margin: 0 auto; background-color:#222;} .control_box .slide_scrollbar .scroll_thumb{display:block; height:3px; position:absolute; left:0; top:50%; margin-top: -1.5px; font-size:0; text-indent:-999999px; background-color:#e60c12; transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;} .control_box .swiper-scrollbar-drag { display: none; } .check_box { display: inline-block; text-align: center; position: relative } .check_box input[type="checkbox"] { display: inline-block; position: absolute; left: -9999px; opacity: 0; visibility: hidden; width: 1px; height: 1px; filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); overflow: hidden;} .check_box label { padding-left: 35px; font-size: 12px; color: #222; font-weight: 700; letter-spacing: -0.5px; } .check_box label::before { position: absolute; left: 0; top: 10px;} .check_box input[type="checkbox"] + label:before { left: 50%; margin-left: -10px; margin-top: -10px;} .check_box input[type="checkbox"] + label:before { position: absolute; left: 10px; top: 50%; width: 25px; height: 25px; box-sizing: border-box; margin-top: -12.5px; border-radius: 0px !important; border: 1px solid #c0c0c0; line-height: 24px; text-align: center; clear: both; content: ''; display: block; } .check_box input[type="checkbox"]:checked + label { color: #f60000; } .check_box input[type="checkbox"]:checked + label:before { content: '' !important; background: url('/img/icon_check.svg'); background-repeat: no-repeat; background-size: 16px; background-position: center center;} .view_btn, .move {transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease; } .view_btn.red { display: block; width: 74px; height: 74px; text-align: center; line-height: 74px; border-radius: 50%; background: linear-gradient(2deg,#e60013 0%, #e64100 99%); background: -webkit-linear-gradient(2deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(2deg,#e60013 0%, #e64100 99%); box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 14%); transition: all .4s ease; -webkit-transition: all .4s ease; -ms-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; } .view_btn.red:before { content: ''; display: block; clear: both; height: 100%; width: 100%; background: url('/img/icon_btn.svg') no-repeat center; background-size: 20px; } .view_btn.black { display: block; width: 54px; height: 54px; text-align: center; line-height: 54px; border-radius: 50%; background: linear-gradient(2deg,#171717 0%, #222 99%) ; background: -webkit-linear-gradient(2deg,#171717 0%, #222 99%); background: -moz-linear-gradient(2deg,#171717 0%, #222 99%); box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 14%); transition: all .4s ease; -webkit-transition: all .4s ease; -ms-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; } .view_btn.black:before { content: ''; display: block; clear: both; height: 100%; width: 100%; background: url('/img/icon_btn.svg') no-repeat center; background-size: 20px; } .more_bth { width: 160px; height: 50px; position: absolute; right: 0; bottom: 0; line-height: 50px; text-align: center; border-radius: 3px; background: transparent; border: 1px solid #ddd; color: #767676 !important; font-size: 12px; box-sizing: border-box;} .more_bth.style2 {background: transparent; border: 1px solid #fff; color: #fff !important; bottom: 20px;} .section1 .more_bth { bottom: 20px; } .more_bth:hover { background: #ededed; border: 1px solid transparent; color: #767676 !important; } .more_bth.style2:hover { background: #fff; border: 1px solid transparent; color: #e60013 !important; } /* main_visual */ .main_visual { height: 800px; position: relative; overflow: hidden; } .main_visual .visula_area { width: calc(3246px - 170px); height: 100%; position: relative; } .main_visual .visula_wrap { position: relative; position: relative; float: left; height: 100%; } .main_visual .visula_wrap .basic_img { opacity: 1; visibility: visible;} .main_visual .basic_img { position: relative; z-index: 14; } .main_visual > .basic_img { display: none } .main_visual .visula_wrap_ri { margin-left: -170px; } /* .main_visual .visula_wrap_le { position: absolute; width: 48%; top: 0; left:0; } .main_visual .visula_wrap_ri { position: absolute; width: 48%; top: 0; left: calc(48% - 7vw);} */ .main_visual .video_wrap .basic_img { opacity: 0; visibility: visible;} .main_visual .visula_wrap_le .videoBox { position: absolute; top: 0; /*top : 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); clip-path: polygon(0 0, 86% 0, 102% 103%, 0% 100%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);*/left: 0; clip-path: polygon(0 0, 87% 0, 104% 100%, 0% 100%);} .main_visual .visula_wrap_le.on .videoBox.bg::before { content: ''; display: block; clear: both; width: 100%; height: 100%; background: url('/img/main_visula_videoBg.jpg') no-repeat center / cover; position: absolute; top: 0; left: 0; z-index: 10;} .main_visual .visula_wrap_ri .videoBox { position: absolute; top: 0; /*top : 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);*/left: -30px; clip-path: polygon(0 0, 100% 0, 100% 100%, 17% 100%);} .main_visual .visual_shape { position: absolute; left: 0; top: 0; } /* .main_visual .visual_shape img {height: calc(100% + 10px);max-width: 101%;} */ .main_visual .visula_wrap .gradient { opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;} .main_visual .visula_wrap.off .gradient { opacity: 1; visibility: visible; position: absolute; top: 0; left: -1px; /*left: 0;left: 0.5vw;*/ z-index: 15;} .main_visual .visula_wrap .back_img { position: relative; z-index: 0; background-size: contain; background-position: left;} .main_visual .clipping_wrap { position: absolute; top: 0; left: 0; z-index: 50; width: 100%;height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;} .main_visual .visula_wrap_ri .clipping_wrap { background-size: contain; background-position: left;} .main_visual .visula_wrap.off .clipping_wrap { cursor: pointer; z-index: 100; } .main_visual .visula_area.on .visula_wrap { width: 100%; height: 100%;} #main .txt_wrap { position: absolute; top:55%; left: 50%; transform:translateX(-50%) ; -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -ms-transform:translateX(-50%); -moz-transform:translateX(-50%);} #main .txt_wrap .txt { position: relative; z-index: 1} #main .txt_wrap .txt .s1 { color: #fff; font-weight: 900; font-size: 1.4rem; line-height: 42px; letter-spacing: 3px; text-transform: uppercase; } #main .txt_wrap .txt h2 { display: block; margin-top: 30px; color: #fff; font-weight: 900; font-size: 4.6rem; line-height: 46px; letter-spacing: -0.4px; } #main .txt_wrap .txt .s2 {display: inline-block; width: 100%; color: #fff; font-weight: 300; font-size: 3.2rem; line-height: 46px; letter-spacing: -0.4px; } #main .txt_wrap .txt .start_btn { margin-top: 30px; display: block; width: 207px; height: 60px; line-height: 60px; color: #fff; font-size: 1.4rem; letter-spacing: -0.4px; text-align: center; border-radius: 30px; color: #fff; background: linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -webkit-linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(180deg,#e60013 0%, #e64100 99%); } #main .txt_wrap .txt.on { display: block; } /*#main .visula_wrap.on .txt_wrap:before { content: url('/img/main_visula_txt_bg.png'); display: block; clear: both; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0;}*/ #main .visula_wrap.on .txt_wrap .txt2 { display: none;} #main .visula_wrap.off .txt_wrap { position: absolute; top: 50%; transform:translateY(-50%) ; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%);} #main .visula_wrap_le.off .txt_wrap { right: 15%; text-align: right; } #main .visula_wrap_ri.off .txt_wrap { left: 15%; } #main .visula_wrap.off .txt_wrap .txt1 { display: none;} #main .visula_wrap.off .txt_wrap .txt2 { display: block;} #main .visula_wrap.off .txt_wrap .txt2 h3 { color: #fff; font-weight: 400; font-size: 2.6rem; line-height: 1; letter-spacing: -0.5px; } #main .visula_wrap.off .txt_wrap .txt2 h2 { font-weight: 900; font-size: 6.0rem; line-height: 60px; letter-spacing: -0.5px; margin-top: 10px;} .main_visual .visual_shape {width: 100%; /*height: 100%;*/} .main_visual .visual_shape img { height: 800px;} /* .main_visual .visual_shape img { height: 94.4vw } .main_visual .visula_wrap .gradient {width: 100%; height: 100%; } .main_visual .visula_wrap .gradient img { height: calc(100% + 2px); max-width: 101%; } */ .btn_wave { display: block; width: 80px; height: 80px; text-align: center; line-height: 78px; position: absolute; top: 360px; left: calc(1623px - 120px); z-index: 100; /* top: 14vw; left: calc(48.398% - 5vw); transform:translateY(-50%) ; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%); z-index: 15; */ } .btn_wave .off_img { display: none} .btn_wave.on .on_img { display: none } .btn_wave.on .off_img { display: inline-block} .btn_wave img { width: 26px } .btn_wave .btn_wave_circle { width: 80px;height: 80px;border-radius: 50%; position: absolute; top: 50%; left: 50%;-webkit-transform:translate(-50%, -50%) ; -o-transform:translate(-50%, -50%) ; -ms-transform:translate(-50%, -50%) ; -moz-transform:translate(-50%, -50%) ; transition: background-color 0.3s ease; } .btn_wave .btn_wave_circle.size_s { z-index: 11; background: linear-gradient(2deg,#171717 0%, #474747 99%) ; background: -webkit-linear-gradient(2deg,#171717 0%, #474747 99%); background: -moz-linear-gradient(2deg,#171717 0%, #474747 99%);box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 8%); } .btn_wave .btn_wave_circle.size_m { z-index: 10; background: linear-gradient(2deg, rgba(4, 4, 4, 0.5) 9%, rgba(56, 56, 56, 0.5) 99%) ; background: -webkit-linear-gradient(2deg, rgba(4, 4, 4, 0.5) 9%, rgba(56, 56, 56, 0.5) 99%); background: -moz-linear-gradient(2deg, rgba(4, 4, 4, 0.5) 9%, rgba(56, 56, 56, 0.5) 99%);box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 23%); opacity: 0; animation: wave_pulse_m 1.25s 0.25s linear infinite; } .btn_wave .btn_wave_circle.size_l { z-index: 9; background: linear-gradient(2deg, rgba(4, 4, 4, 0.5) 9%, rgba(56, 56, 56, 0.5) 99%) ; background: -webkit-linear-gradient(2deg, rgba(4, 4, 4, 0.5) 9%, rgba(56, 56, 56, 0.5) 99%); background: -moz-linear-gradient(2deg, rgba(4, 4, 4, 0.5) 9%, rgba(56, 56, 56, 0.5) 99%);box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 23%); opacity: 0; animation: wave_pulse_l 1.25s 0.25s linear infinite; } @keyframes wave_pulse_m { 0% { width: 60px; height: 60px; opacity: 0; } 25% { width: 76px; height: 76px; opacity: 0.5; } 50% { width: 92px; height: 92px; opacity: 1; } 75% { width: 96px; height: 96px; opacity: 0.5; } 100% { width: 100px; height: 100px; opacity: 0; } } @keyframes wave_pulse_l { 0% { width: 75px; height: 75px; opacity: 0; } 25% { width: 90px; height: 90px; opacity: 0.5; } 50% { width: 107px; height: 107px; opacity: 1; } 75% { width: 111px; height: 111px; opacity: 0.5; } 100% { width: 115px; height: 115px; opacity: 0; } } /* section1 */ #main .section1 { position: relative; padding-bottom: 100px } #main .section1 .cont_wrap { position: relative; } #main .section1 .cont_wrap:before { content: url('/img/main_shape.svg'); display: block; clear: both; position:absolute; right: -350px; top: -25px; width: 468px;-webkit-transform: rotate(-32.85deg); -ms-transform: rotate(-32.85deg); -moz-transform: rotate(-32.85deg);-o-transform: rotate(-32.85deg);transform: rotate(-32.85deg);} #main .section1 .cont { display: none } #main .section1 .cont.on { display: block } #main .section1 .swiper { padding: 20px 28px; width: 100%; margin-left: -28px;} #main .section1 .cont_box { position: relative; } #main .section1 .cont_box > a { display: block } #main .section1 .cont_box .box_link .back_img { position: relative; transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;} #main .section1 .cont_box .box_link .back_img .view_btn { display: none; opacity: 0; width: 74px; height: 74px; text-align: center; line-height: 74px; border-radius: 50%; background: linear-gradient(2deg,#e60013 0%, #e64100 99%) ; background: -webkit-linear-gradient(2deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(2deg,#e60013 0%, #e64100 99%);box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 14%); position: absolute; right: -17px; bottom: -10px; transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease; } #main .section1 .cont_box .box_link .back_img .view_btn img { width: 20px } #main .section1 .cont_box .box .label { width: 60px; height: 60px; text-align: center; box-sizing: border-box; position: absolute; top: 0; left: 0; } #main .section1 .cont_box .box .label.label-type1 { background: #5100e6; } #main .section1 .cont_box .box .label.label-type2 { background: #e60013; } #main .section1 .cont_box .box .label.label-type3 { background: #242e3e; } #main .section1 .cont_box .box .label span { display: inline-block; width: 60%; color: #fff; font-size: 11px; font-weight: 500; letter-spacing: -0.4px; box-sizing: border-box; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); } #main .section1 .cont_box .box .desc { padding: 15px 0 0} #main .section1 .cont_box .box .desc b { font-size: 2.0rem; font-weight: 900; letter-spacing: -0.5px; line-height: 36px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } #main .section1 .cont_box .box .desc p span { display: block; color: #777; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.5px; line-height: 21px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #main .section1 .cont_box .box_link:hover .back_img {box-shadow: 10px 10px 16px 0px rgb(0 0 0 / 14%); /*border-bottom-right-radius: 70px;*/} #main .section1 .cont_box .box_link:hover .view_btn { display: block; opacity: 1; } #main .section1 .arrow_box { display: none; } #main .section1 .arrow_box.on { display: block; } /* section2 */ #main .section2 { padding-top: 100px } #main .section2 .cont_wrap { padding-bottom: 95px} #main .section2 .cont_wrap > .cont_box { float: left; width: 50%; } #main .section2 .cont_wrap .cont_box.le { position: relative; } #main .section2 .cont_wrap .cont_box.le .circle { /*width: 1000px; height: 1000px; border-radius: 50%;*/ position: absolute; top: 0; left: -380px; /*background: linear-gradient(2deg,#e60013 0%, #e64100 99%) ; background: -webkit-linear-gradient(2deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(2deg,#e60013 0%, #e64100 99%); */ } #main .section2 .cont_wrap .cont_box.le .circle .cen { /*background: #fff; border-radius: 50%; */ width: 500px; height: 500px; line-height: 500px; text-align: center; position: absolute; top: calc(50% + 20px); left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);} #main .section2 .cont_wrap .cont_box.le .circle .cen img { max-width: 256px; } #main .section2 .cont_wrap .cont_box.le .list { position: absolute; top: 0; left: 0px; width: 100%;} #main .section2 .cont_wrap .cont_box.le .list li { position: absolute; cursor: pointer } #main .section2 .cont_wrap .cont_box.le .list li.li1 { top: 55px; left: 66%;} #main .section2 .cont_wrap .cont_box.le .list li.li2 { top: 195px; left: 81%;} #main .section2 .cont_wrap .cont_box.le .list li.li3 { top: 365px; left: 86.5%;} #main .section2 .cont_wrap .cont_box.le .list li.li4 { top: 550px; left: 82%;} #main .section2 .cont_wrap .cont_box.le .list li.li5 { top: 680px; left: 66%;} #main .section2 .cont_wrap .cont_box.le .list li .box { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); box-shadow: 8px 5px 10px rgb(0 0 0 / 10%);} #main .section2 .cont_wrap .cont_box.le .list li.li1 .box { width: 138px; height: 133px; border-radius:51% 49% 38% 62% / 70% 58% 42% 30%; } #main .section2 .cont_wrap .cont_box.le .list li.li2 .box { width: 129px; height: 131px; border-radius:51% 49% 51% 49% / 45% 40% 60% 55%; } #main .section2 .cont_wrap .cont_box.le .list li.li3 .box { width: 133px; height: 137px; border-radius:36% 64% 53% 47% / 67% 55% 45% 33%; } #main .section2 .cont_wrap .cont_box.le .list li.li4 .box { width: 128px; height: 133px; border-radius:63% 37% 39% 61% / 59% 48% 52% 41%; } #main .section2 .cont_wrap .cont_box.le .list li.li5 .box { width: 138px; height: 133px; border-radius:46% 54% 34% 66% / 68% 58% 42% 32%; } #main .section2 .cont_wrap .cont_box.le .list li .box span { display: inline-block; width: 100%; box-sizing: border-box; color: #3c3636; text-align: center; font-size: 1.4rem; font-weight: 900; letter-spacing: -0.5px; line-height: 26px; padding: 60px 10px 0; position: absolute; top: calc(50% - 0px); left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); } #main .section2 .cont_wrap .cont_box.le .list li.li1 .box span { background: url('/img/icon_pro1.svg') no-repeat center 20%; background-size: 46px; } #main .section2 .cont_wrap .cont_box.le .list li.li2 .box span { background: url('/img/icon_pro2.svg') no-repeat center 30%; background-size: 46px;} #main .section2 .cont_wrap .cont_box.le .list li.li3 .box span { background: url('/img/icon_pro3.svg') no-repeat center 20%; background-size: 44px;} #main .section2 .cont_wrap .cont_box.le .list li.li4 .box span { background: url('/img/icon_pro4.svg') no-repeat center 0%; background-size: 53px;} #main .section2 .cont_wrap .cont_box.le .list li.li5 .box span { background: url('/img/icon_pro5.svg') no-repeat center 20%; background-size: 47px; } #main .section2 .cont_wrap .cont_box.le .list li.on .box { background: linear-gradient(2deg,#040404 9%, #222 100%); background: -webkit-linear-gradient(2deg,#040404 9%, #222 100%); background: -moz-linear-gradient(2deg,#040404 9%, #222 100%); backdrop-filter: blur(0px); } #main .section2 .cont_wrap .cont_box.le .list li.on .box span { color: #fff} #main .section2 .cont_wrap .cont_box.ri { float: right; padding-top: 95px; } #main .section2 .cont_wrap .cont_box.ri .tit span { color: #afb1b5; font-size: 2.8rem; font-weight: 900; letter-spacing: -0.5px; line-height: 50px } #main .section2 .cont_wrap .cont_box.ri .tit h2 { font-size: 4.0rem; letter-spacing: -0.5px; line-height: 50px; font-weight: 300; margin-top: 10px } #main .section2 .cont_wrap .cont_box.ri .tit h2 b { display: block; font-weight: 900; letter-spacing: -2.5px; } #main .section2 .cont_wrap .cont_box.ri .con_wrap {border-top: 1px solid; border-bottom: 1px solid; padding-top: 50px; } #main .section2 .cont_wrap .cont_box.ri .con_wrap .top { position: relative; } #main .section2 .cont_wrap .cont_box.ri .con_wrap .top .steptit_wrap ul li { display: none } #main .section2 .cont_wrap .cont_box.ri .con_wrap .top .steptit_wrap ul li.on { display: block } #main .section2 .cont_wrap .cont_box.ri .con_wrap .top .step { display: block; width: 70px; height: 25px; line-height: 25px; text-align: center; border-radius: 3px; background: #e60013; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: -0.5px; } #main .section2 .cont_wrap .cont_box.ri .con_wrap .top .s { display: block; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.5px; line-height: 39px} #main .section2 .cont_wrap .cont_box.ri .con_wrap .top b { display: block; font-size: 3.6rem; font-weight: 900; letter-spacing: -2.5px; line-height: 60px} #main .section2 .cont_wrap .cont_box.ri .sl_container { min-height: 600px; width: calc(100% + 30px); margin-left: -30px; padding-bottom: 50px; } #main .section2 .cont_wrap .cont_box.ri .sl_container > .sl_items { float: left; width: calc(50% - 30px); margin-left: 30px; } #main .section2 .cont_wrap .cont_box.ri .sl_container > .sl_items.ri { margin-top: 50px;} #main .section2 .cont_wrap .cont_box.ri .con_wrap .item {padding-top: 80px } #main .section2 .cont_wrap .cont_box.ri .con_wrap .item .tit h4 { display: block; font-size: 3.0rem; line-height: 50px; letter-spacing:-2.5px; font-weight:900; position:relative; } #main .section2 .cont_wrap .cont_box.ri .con_wrap .item .tit h3 { display: block; font-size: 2.0rem; line-height: 50px; letter-spacing:-1.5px; font-weight:900; } #main .section2 .cont_wrap .cont_box.ri .con_wrap .item p { color: #666; font-size: 1.4rem; line-height: 26px; letter-spacing:-0.5px; font-weight:700; } #main .section2 .cont_wrap .cont_box.ri .sl_container .dday { position: absolute; bottom: -2px; left: -3px;} #main .section2 .cont_wrap .cont_box.ri .sl_container .dday span { color: #d7d7d7; font-size: 7.2rem; line-height: 34px; letter-spacing:-4.5px; font-weight:900; } /* section3 */ #main .section3 { position: relative; } #main .section3:before { content: ''; display: block; clear: both; width: 100%; height: 654px; background: #222; position: absolute; top: 0; left: 0 } #main .section3 .tit_area .tit_box ul li { display: none;} #main .section3 .tit_area .tit_box ul li.on { display: block;} #main .section3 .tit_area .tit_box h2{color: #fff; ; } #main .section3 .tit_area .tit_box span { color: #c0c0c0; } .thumbsTypeA .tit_area .tab_box { position: absolute; right: 0; bottom: 0;} .thumbsTypeA .tit_area .tab_box ul li { display: inline-block; } .thumbsTypeA .tit_area .tab_box ul li + li { padding-left: 40px; position: relative } .thumbsTypeA .tit_area .tab_box ul li + li:before { content: ''; display: block; clear: both; border-left: 1px solid #575757; height: 60%; position: absolute; top: 20%; left: 20px;} .thumbsTypeA .tit_area .tab_box ul li a { color: #a7a7a7; font-size: 2.0rem; line-height: 26px; letter-spacing:-0.5px; font-weight:900; } .thumbsTypeA .tit_area .tab_box ul li a span { position: relative; display: inline-block; padding-bottom: 5px; } .thumbsTypeA .tit_area .tab_box ul li.on a { color: #e60013; } .thumbsTypeA .tit_area .tab_box ul li.on a span:before { content: ''; display: block; clear: both; width: 100%; border-bottom: 2px solid #e60013; position: absolute; left: 0; bottom: 0px; } .thumbsTypeA .cont_wrap { width: 100%; margin-top: 80px; position: relative; } .thumbsTypeA .cont_wrap .thumbs_slide { float: left; width: 477px; } .thumbsTypeA .cont_wrap .thumbs_slide .swiper { display: none; } .thumbsTypeA .cont_wrap .thumbs_slide .swiper.on { display: block; } .thumbsTypeA .cont_wrap .thumbs_slide .desc { padding-top: 25px; } .thumbsTypeA .cont_wrap .thumbs_slide .desc b { font-size: 2.0rem; line-height: 36px; letter-spacing:-0.5px; font-weight: 900; } .thumbsTypeA .cont_wrap .thumbs_slide .desc p { min-height: 42px; color: #777; font-size: 1.5rem; line-height: 21px; letter-spacing:-0.5px; font-weight: 500; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .thumbsTypeA .cont_wrap .thumbs_slide .swiper-slide .desc { opacity: 0; visibility: hidden;} .thumbsTypeA .cont_wrap .thumbs_slide .swiper-slide.swiper-slide-active .desc { opacity: 1; visibility: visible;} .thumbsTypeA .cont_wrap .list_slide { position: absolute; left: 477px; width: calc(1200px - 25px); margin-left: 30px } .thumbsTypeA .cont_wrap .list_slide .list { display: none } .thumbsTypeA .cont_wrap .list_slide .list.on { display: block } .thumbsTypeA .cont_wrap .list_slide .swiper { /*overflow: inherit;*/ } .thumbsTypeA .cont_wrap .list_slide .swiper .back_img { position: relative; } .thumbsTypeA .cont_wrap .list_slide .swiper .swiper-slide-active .back_img:before{ content: ''; display: block; clear: both; width: 100%; border-top: 4px solid #e60c12; position: absolute; top: 0; left: 0; } .thumbsTypeA .cont_wrap .list_slide .control_box { width: 908px; height: 50px; padding-right: 135px; box-sizing: border-box; } .thumbsTypeA .cont_wrap .list_slide .control_box .slide_scrollbar { max-width: 100%; } .thumbsTypeA .cont_wrap .list_slide .arrow_box { top: 50%; margin-top: -50px; bottom: initial; } #main .section3 .cont_wrap .thumbs_slide .cont_box .desc { transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease; opacity: 0; visibility: hidden; } #main .section3 .cont_wrap .thumbs_slide .swiper-slide-active .cont_box .desc { opacity: 1; visibility: initial } /* section4 */ #main .section4 { position: relative; } #main .section4:before { content : ''; display: block; clear: both; width: 100%; height: 100%; position: absolute; top: 0; left: calc(55.469% - 30px); border-top-left-radius: 250px; background: linear-gradient(130deg,#e60013 0%, #e64100 99%);background: -webkit-linear-gradient(130deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(130deg,#e60013 0%, #e64100 99%);} #main .section4 .cont_wrap { width: 100%; margin-top: 50px; position: relative;} #main .section4 .cont_wrap .cont_box.le { float: left; width: 44.531%; } #main .section4 .cont_wrap .cont_box.le .img_wrap .view_btn { display: none; position: absolute; right: 0px; bottom: 0px; } #main .section4 .cont_wrap .cont_box.le .img_wrap:hover .back_img { border-bottom-right-radius: 120px; } #main .section4 .cont_wrap .cont_box.le .img_wrap:hover .back_img:before { backdrop-filter: blur(10px); } #main .section4 .cont_wrap .cont_box.le .img_wrap:hover .view_btn { display: block; } #main .section4 .cont_wrap .cont_box.ri { float: left; width: calc(55.469% - 30px); margin-left: 30px } #main .section4 .cont_wrap .cont_box.ri ul { width: calc(100% + 30px); margin-left: -30px; margin-top: -30px; } #main .section4 .cont_wrap .cont_box.ri ul li { float: left; width: calc(50% - 30px); margin-left: 30px; margin-top: 30px; } #main .section4 .cont_wrap .cont_box.ri .img_wrap { position: relative; } #main .section4 .cont_wrap .cont_box.ri .img_wrap .view_btn { display: none; width: 74px; height: 74px; line-height: 74px; position: absolute; right: 0px; bottom: 0px; } #main .section4 .cont_wrap .cont_box.ri .img_wrap:hover .back_img {border-bottom-right-radius: 100px;} #main .section4 .cont_wrap .cont_box.ri .img_wrap:hover .info .tit, .section4 .cont_wrap .cont_box.ri .img_wrap:hover .info .tags { color: rgba(255, 255, 255, 1) } #main .section4 .cont_wrap .cont_box.ri .img_wrap:hover .view_btn { display: block; } #main .section4 .cont_wrap .cont_box .back_img { overflow: hidden; position: relative; box-shadow: 10px 10px 16px 0px rgb(0 0 0 / 14%); transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease; } #main .section4 .cont_wrap .cont_box .back_img:before { content: ''; display: block; clear: both; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left:0; } #main .section4 .cont_wrap .cont_box.ri .back_img:before { background: rgba(0, 0, 0, 0.6); } #main .section4 .cont_wrap .cont_box .img_wrap {position: relative; cursor: pointer; } #main .section4 .cont_wrap .cont_box .img_wrap .info { width: 100%; padding: 0 20px; box-sizing: border-box; color: #fff; text-align: center; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%) ; -webkit-transform:translate(-50%,-50%) ; -o-transform:translate(-50%,-50%) ; -ms-transform:translate(-50%,-50%) ; -moz-transform:translate(-50%,-50%) ; } #main .section4 .cont_wrap .cont_box .img_wrap .info > * { display: block; line-height: 1; letter-spacing:-0.5px; font-weight:900; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;} #main .section4 .cont_wrap .cont_box .img_wrap .info .date { font-size: 2.6rem; } #main .section4 .cont_wrap .cont_box .img_wrap .info .time { font-size: 7.0rem; margin-top: 25px } #main .section4 .cont_wrap .cont_box .img_wrap .info .live { display: inline-block; margin-top: 60px; font-size: 1.4rem; padding: 20px 30px; font-weight:100; letter-spacing: 10px; border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } #main .section4 .cont_wrap .cont_box .img_wrap .info .tit { font-size: 1.8rem; margin-top: 45px; color: rgba(255, 255, 255, 0.65) } #main .section4 .cont_wrap .cont_box .img_wrap .info .tags { font-size: 1.5rem; color: rgba(255, 255, 255, 0.65); line-height: 1.6; } #main .section4 .cont_wrap .cont_box.ri .img_wrap .info .date { font-size: 1.6rem; } #main .section4 .cont_wrap .cont_box.ri .img_wrap .info .time { font-size: 4.0rem; margin-top: 15px } #main .section4 .cont_wrap .cont_box .txt { padding: 40px 0; text-shadow: 0 0 black; } #main .section4 .cont_wrap .cont_box .txt > * { display: block; line-height: 30px; letter-spacing:-0.5px; /* font-weight:900;*/ } #main .section4 .cont_wrap .cont_box .txt h4 { font-size: 2.4rem; } #main .section4 .cont_wrap .cont_box .txt .price { font-size: 2.0rem; } #main .section4 .cont_wrap .cont_box .txt .price .s1 { font-size: 1.4rem; } #main .section4 .cont_wrap .cont_box .txt .price .s1 b { font-size: 2.0rem; } #main .section4 .cont_wrap .cont_box .txt .price span:last-child { color: #e60013;} #main .section4 .cont_wrap .cont_box .txt .add { color: #666; font-size: 1.6rem; margin-top: 5px; line-height: 20px; } #main .section4 .cont_wrap .cont_box .txt .add > * { display: block; } #main .section4 .cont_wrap .cont_box .txt .schedule { font-weight:300; } #main .section4 .cont_wrap .cont_box .img_wrap .over { display: none; width: 305px; box-sizing: border-box; padding: 18px 20px 18px 20px; background: rgba(255, 255, 255, 0.9); border-top-right-radius: 50px; position: absolute; bottom: 0; left: -1px;} #main .section4 .cont_wrap .cont_box .img_wrap .over > * { display: block; line-height: 20px; letter-spacing:-0.5px; /*font-weight:900;*/} #main .section4 .cont_wrap .cont_box .img_wrap .over .view_btn { position: absolute; top: 50%; right: 20px; transform:translateY(-50%) ; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%);} #main .section4 .cont_wrap .cont_box .img_wrap .over .price { font-size: 1.4rem; } #main .section4 .cont_wrap .cont_box .img_wrap .over .price span:last-child { color: #e60013;} #main .section4 .cont_wrap .cont_box .img_wrap .over .add { color: #666; font-size: 1.4rem; margin-top: 6px; line-height: 20px; } #main .section4 .cont_wrap .cont_box .img_wrap .over .add > * { display: block; } #main .section4 .cont_wrap .cont_box .img_wrap .over .schedule { font-weight:300; } @-webkit-keyframes slideInUp2 { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp2 { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* section5 */ #main .section5 {position: relative; z-index: 10; padding-bottom: 150px} #main .section5:before { content : ''; display: block; clear: both; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-bottom-right-radius: 250px; background: #f8f8f8; } #main .section5 .cont_wrap { width: 100%; margin-top: 50px; position: relative;} #main .section5 ul { width: calc(100% + 10px); margin-left: -10px; margin-top: -10px} #main .section5 ul li { float: left; width: calc(16.666% - 10px); margin-left: 10px; margin-top: 10px; } #main .section5 ul li > div { border : 1px solid #c9c9c9; } #main .section5 .btns_wrap { text-align: center; margin-top: 30px;} #main .section5 .more { cursor: pointer; display: inline-block; width: 220px; height: 60px; text-align: center; line-height: 60px; font-size: 1.6rem; letter-spacing: -0.5px; color: #fff; border-radius: 30px; background: linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -webkit-linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(180deg,#e60013 0%, #e64100 99%);} #main .section5 .more.hidden { display: none;} /* section6 */ .banner_area { width: 100%; max-width: 1880px; margin: 0 auto; position: relative; z-index: 10} .banner_area ul { width: calc(100% + 20px); margin-left: -20px; margin-top: -20px} .banner_area ul li { float: left; width: calc(50% - 20px); margin-left: 20px; margin-top: 20px } .banner_area ul li a { display: block; border : 1px solid #e9e9e9; } #main .section6 .banner_area:before { content: ''; display: block; clear: both; width: 275px; height: 275px; position: absolute; left: 20px; bottom: -100px; z-index: -1; text-align: center; border-radius: 50%; background: linear-gradient(2deg,#e60013 0%, #e64100 99%); background: -webkit-linear-gradient(2deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(2deg,#e60013 0%, #e64100 99%); -webkit-clip-path: inset(50% 0 0 0); clip-path: inset(50% 0 0 0);} #main .section6 { padding-top: 50px; } #main .section6 .inner { padding-top: 150px; position: relative; } .contact_area .tit_area + .cont_area .cont_wrap { margin-top: 50px; } .contact_area .cont_wrap { width: 100%; position: relative;} .contact_area .cont_wrap .cont_box.le { float: left; width: 570px; height: 660px; } .contact_area .cont_wrap .bbs { padding: 25px 50px; box-sizing: border-box; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); box-shadow: 15px 15px 14px 5px rgb(0 0 0 / 22%); position: relative; z-index: 10;} .contact_area .cont_wrap .bbs .ipt_con { padding: 20px 0; } .contact_area .cont_wrap .bbs .ipt_con + .ipt_con { border-top: 1px solid #777; } .contact_area .cont_wrap .bbs .ipt_con .con { width: calc(100% + 10px); margin-left: -10px; } .contact_area .cont_wrap .bbs .ipt_con .con > p { float: left; width: calc(50% - 10px); margin-left: 10px; margin-top: 10px; } .contact_area .cont_wrap .bbs .ipt_con .con.item3 > p { width: calc(33.333% - 10px); } .contact_area .cont_wrap .bbs .ipt_con .con.item3 > p.w2 { width: calc(66.666% - 10px); } .contact_area .cont_wrap .bbs .ipt_con .con.item3 > p.clear input:last-child {float: right; width: calc(100% - 95px); height: 35px; line-height: 35px; margin-top: 4px; } .contact_area .cont_wrap .bbs .ipt_con .con.item4 > p{width: calc(100% - 10px);} .contact_area .cont_wrap .bbs .ipt_con .con .check_box label { line-height: 45px; vertical-align: middle;} .contact_area .cont_wrap .bbs .tit { color: #e60013; font-size: 1.4rem; line-height: 1; letter-spacing:-0.5px; font-weight: 700; } .contact_area .cont_wrap .bbs .ipt_con:first-child { padding-top: 0; } .contact_area .cont_wrap .bbs .ipt_con:first-child p, .contact_area .cont_wrap .bbs .ipt_con.line p.check_box { text-align: left; padding: 0 15px; border: 1px solid #c0c0c0; box-sizing: border-box; height: 45px; /*line-height: 45px;*/} .contact_area .cont_wrap .bbs .ipt_con > .check_box { display: block; text-align: left;} .contact_area .cont_wrap .bbs .ipt_con > .check_box + .check_box { margin-top: 5px } .contact_area .cont_wrap .bbs .more_btn {display: inline-block; background: #b3b3b3; font-size: 9px; color: #fff; font-weight: 500; border-radius: 3px; line-height: 19px; padding: 0 5px;} .contact_area .cont_wrap .bbs .btns_wrap { text-align: center; margin-top: 5px; } .contact_area .cont_wrap .bbs .send_btn { cursor: pointer; display: inline-block; width: 220px; height: 60px; text-align: center; line-height: 60px; font-size: 1.6rem; letter-spacing:-0.5px; color: #fff; border-radius: 30px; background: linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -webkit-linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(180deg,#e60013 0%, #e64100 99%); } .contact_area .cont_wrap .cont_box.ri { position: absolute; left: 570px; width: 1200px; margin-left: 0px; height: 660px; } .contact_area .cont_wrap .cont_box.ri #map {width: 100%; height: 100%; background: #000;} #sub .contact_area .cont_wrap .cont_box.le { float: left; width: 50%; height: 660px;} #sub .contact_area .cont_wrap .cont_box.ri { position: relative; left: initial; float: left; width: 50%; margin-left: 0px; height: 660px } .calendar { position: relative; } .calendar.date:after { content: url('/img/icon_cal.svg'); display: block; clear: both; width: 16px; position: absolute; right: 15px; top: calc(50% + 3px); transform:translateY(-50%) ; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%); } .calendar.time:after { content: url('/img/icon_down.svg'); display: block; clear: both; width: 12px; position: absolute; right: 15px; top: 50%; transform:translateY(-50%) ; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%); } .ui-timepicker-container { z-index: 10 !important; } /**************************************************************/ #sub .section {padding: 150px 0; position: relative} #sub .section_map {padding-bottom: 150px; position: relative} #sub.contact .section_map { padding: 150px 0;} /*#sub .section:last-child { padding-bottom: 250px;}*/ #sub .section.pb-0 {padding-bottom: 0px; } #sub .section.bg_gray { background-color: #fbfbfb; overflow: hidden;} #sub .section.bg_dark:before { content: ''; display: block; clear: both; width: 100%; height: 654px; background: #222; position: absolute; top: 0; left: 0;} #sub .section.bg_dark .tit_area .tit_box h2 { color: #fff;} #sub .section.radius_tr { border-radius: 0 250px 0 0 ;} #sub .section.bg_dot:before { content : ''; display: block; clear: both; width: 100%; height: 100%; position: absolute; top: 0; left: calc(55.469% - 30px); z-index: -1; border-top-left-radius: 250px; background: linear-gradient(130deg,#e60013 0%, #e64100 99%); background: -webkit-linear-gradient(130deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(130deg,#e60013 0%, #e64100 99%);} #sub .section.bg_dot2:before { content : ''; display: block; clear: both; width: 100%; height: 100%; position: absolute; top: 0; left: calc(-50vw + 300px); z-index: -1; border-bottom-right-radius: 250px; background: linear-gradient(360deg,#ed8000 30%, #e60013 99%); background: -webkit-linear-gradient(360deg,#ed8000 30%, #e60013 99%); background: -moz-linear-gradient(360deg,#ed8000 30%, #e60013 99%);} #sub .section.bg_dot2 .tit_area .tit_box h2 , #sub .section.bg_dot2 .tit_area .tit_box span { color: #ffffff;} #sub .section.bg_dark_gradi { background: linear-gradient(137deg,#040404 0%, #222222 72%); background: -webkit-linear-gradient(137deg,#040404 0%, #222222 72%); background: -moz-linear-gradient(137deg,#040404 0%, #222222 72%);} #sub .section.bg_rd_gradi { background: linear-gradient(150deg,#e60013 0%, #e66700 85%); background: -webkit-linear-gradient(150deg,#e60013 0%, #e66700 85%);background: -moz-linear-gradient(150deg,#e60013 0%, #e66700 85%);} #sub .tit_area {font-size:0; position:relative;} #sub .tit_area.tit_cen { text-align: center; } #sub .tit_area .tit_box {display:inline-block;} #sub .tit_area .tit_box h2 { display: inline-block; color: #111; font-size: 4.0rem; line-height: 55px; margin-top:0px; margin-bottom: 0; letter-spacing:-3.5px; font-weight:900; position:relative; font-family: 'NanumSquareNeo-eHv', sans-serif;} #sub .tit_area .tit_box h2 b { color: #e60013;} #sub .tit_area .tit_box span { display: block; color: #666; font-size: 1.4rem; line-height: 26px; font-weight:700; letter-spacing:-0.8px; font-family: 'NanumSquareNeo-cBd', sans-serif; } #sub .con_area.mtop { margin-top: 50px } #sub .con_area.con_cen { text-align: center; } .fBox { display: -webkit-box !important; display: -moz-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: justify; -moz-justify-content: center; -ms-flex-pack: justify; justify-content: center; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; } .flex_box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} .flex_box .le { width: 43.75%; max-width: 560px; } .flex_box .ri { width: 56.25%; padding: 0 0 0 95px; box-sizing: border-box; } .flex_box .le .back_img { border-radius: 0 0 0 100px; } .flex_box .le.non-max { max-width: 100%; } .flex_box .le .back_img.non-radius { border-radius: 0px; } .flex_box .back_img { box-shadow: 10px 10px 16px 0px rgb(0 0 0 / 2%); } .flex_box2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center;} .flex_box2 .le { width: 43.75%; max-width: 560px; } .flex_box2 .ri { width: 56.25%; box-sizing: border-box; } .flex_box2 .ri .back_img { border-radius: 0 0 100px 0; } .flex_box2 .back_img { box-shadow: 10px 10px 16px 0px rgb(0 0 0 / 2%); } .flex_box3 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -moz-align-items: start; -ms-flex-align: start; align-items: start;} #sub .section1 .le .back_img { box-shadow: 10px 10px 16px 0px rgb(0 0 0 / 2%); } #sub .section1 .le .back_img.radius_tr { border-radius: 0 100px 0 0 ; } #sub .section1 .le .back_img.radius_bl { border-radius: 0 0 0 100px ; } #sub .section1 .le .back_img.radius_tl { border-radius: 100px 0 0 0 ; } .con_wrap .txt { margin-top: 60px } .con_wrap .txt p { display: block; color: #222; font-size: 1.6rem; line-height: 34px; letter-spacing:-0.8px; } .con_wrap .txt p + p { margin-top: 40px } #sub.press .section2 .inner {position: relative;} #sub.press .section2 .inner:after { content: url('/img/press_sec2_shape.svg'); display: block; clear: both; position: absolute; bottom: -215px; left: -130px; z-index: 0; width: 691px;} #sub.press .section2 .con_area { position: relative; z-index: 1;} #sub .col_container {padding:50px 0 40px 100px; box-sizing:border-box; width:calc(100% + 40px); width:-webkit-calc(100% + 40px); width:-moz-calc(100% + 40px); width:-ms-calc(100% + 40px); margin-left:-40px; margin-top:-40px; font-size:0; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; justify-content:end; -webkit-justify-content:end; -moz-justify-content:end; -ms-justify-content:end;} #sub .col_container .col_items{width:calc(33.3333% - 40px); width:-webkit-calc(33.3333% - 40px); width:-moz-calc(33.3333% - 40px); width:-ms-calc(33.3333% - 40px); /* height:494px; */ margin-left:40px; margin-top:40px; position:relative;} #sub .col_container .col_items .cont_box, #sub.press .section2 .mo .cont_box { width: 100%; height: 100%; position: relative;} #sub .col_container .item1{top:120px;} #sub .col_container .item3{top:-120px;} #sub .col_container .item5{top:-120px;} #sub .col_container .txt { text-align: center; } #sub .col_container .ab { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); } #sub .col_container .txt h3 { display: block; width: 100%; text-align: center; color: #fff; font-size: 1.8rem; line-height: 30px; letter-spacing: -0.8px; margin-top: 15px; } #sub .col_container .txt span { display: none; color: rgba(255, 255, 255, 0.7); font-size: 1.4rem; line-height: 22px; letter-spacing: -0.8px; margin-top: 15px;} #sub .col_container .col_items .cont_box, #sub.press .section2 .mo .cont_box { overflow: hidden; position: relative;} #sub .col_container .col_items .cont_box .back_img::after, #sub.press .section2 .mo .cont_box .back_img::after { content: ''; display: block; clear: both; width: 100%;height: 80%;position: absolute; bottom: 0; left: 0; background: linear-gradient(90deg,#040404 9%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg,#040404 9%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(90deg,#040404 9%, rgba(255, 255, 255, 0) 100%); transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;} #sub .col_container .col_items:hover .cont_box, #sub.press .section2 .mo .cont_box:hover { border-radius: 0 0 100px 0; box-shadow: 10px 10px 16px 0px rgb(168 0 14 / 32%); } #sub .col_container .col_items:hover .back_img::after, #sub.press .section2 .mo .cont_box:hover .back_img::after { background: linear-gradient(90deg,#d80012 9%, rgba(237, 128, 0, 0.5) 50%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg,#d80012 9%, rgba(237, 128, 0, 0.5) 50%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(90deg,#d80012 9%, rgba(237, 128, 0, 0.5) 50%, rgba(255, 255, 255, 0) 100%); } #sub .col_container .col_items .cont_box > a, #sub.press .section2 .mo .cont_box > a {display:block; } #sub .col_container .col_items .cont_box > a > h3, #sub.press .section2 .mo .cont_box > a > h3 { padding: 20px; box-sizing: border-box; display: block; width: 100%; text-align: center; color: #fff; font-size: 1.8rem; line-height: 30px; letter-spacing:-0.8px; position: absolute; left: 0; bottom: 35px} .slideTypeA { overflow: initial !important; padding: 50px 0 65px !important} .slideTypeA .swiper-slide { width: 100%; max-width: 955px; overflow: hidden; box-shadow: 3px 5px 38px 0px rgba(18, 18, 17, 0.2); position: relative;} .slideTypeA .swiper-slide .back_img { filter: grayscale(1);} .slideTypeA .swiper-slide.swiper-slide-active { border-radius: 0 0 100px 0; } .slideTypeA .swiper-slide.swiper-slide-active .back_img { filter: grayscale(0); } .slideTypeA .swiper-slide .txt {position: relative; height: 208px; text-align: center;} .slideTypeA .swiper-slide .txt .num { display: block; width: 74px; height: 74px; line-height: 74px; color: #fff; font-size: 2.0rem; letter-spacing: -0.8px; text-align: center; border-radius: 50%; background: linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -webkit-linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(180deg,#e60013 0%, #e64100 99%); margin: 0 auto;position: absolute; left: 50%; margin-left: -37px; top: -37px;} .slideTypeA .swiper-slide .txt h3 { color: #e60013; font-size: 2.2rem; line-height: 34px; letter-spacing:-0.8px; } .slideTypeA .swiper-slide .txt p { display: none; color: #222; font-size: 1.6rem; line-height: 34px; letter-spacing:-0.8px; margin-top: 5px; transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease; } .view_btn.red { display: block; width: 74px; height: 74px; text-align: center; line-height: 74px; border-radius: 50%; background: linear-gradient(2deg,#e60013 0%, #e64100 99%); background: -webkit-linear-gradient(2deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(2deg,#e60013 0%, #e64100 99%); box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 14%); transition: all .4s ease; -webkit-transition: all .4s ease; -ms-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; } .slideTypeA .swiper-slide.swiper-slide-active .txt p { display: block;} .slideTypeA .swiper-slide-duplicate-next, .slideTypeA .swiper-slide-duplicate-prev { visibility: hidden;} #sub.experience .slideTypeA .swiper-slide-duplicate-next + .swiper-slide, #sub.experience .swiper-slide-next + .swiper-slide { visibility: hidden;} .swiper-container-3d .swiper-slide-shadow-left { background-image : none !important } .swiper-container-3d .swiper-slide-shadow-right { background-image : none !important} .swiper-pagination-bullet { width: 10px !important; height: 10px !important; background: #d3d3d3 !important; } .swiper-pagination-bullet-active { background: #e60013 !important; } /*프로세스*/ #sub ul.listTypeA { margin-top: -40px } #sub .listTypeA > li { float: left; width: 33.333%; color: #222; margin-top: 40px } #sub .listTypeA .box { padding: 130px 50px 80px; box-sizing: border-box;} #sub .listTypeA.min305 .box { height: 100%; height: 305px; } #sub .listTypeA.min310 .box { height: 100%; height: 310px; } #sub .listTypeA.min355 .box { height: 100%; height: 355px; } #sub .listTypeA.min285 .box { height: 100%; height: 285px; } #sub .listTypeA .box.bg_white { background: #fff ; } #sub .listTypeA .box.bg_gray { background: #fbfbfb;} #sub .listTypeA .box h3 { font-size: 2.2rem; line-height: 26px; letter-spacing:-0.9px; position: relative; z-index: 1; } #sub .listTypeA .box em.dot { position: relative;} #sub .listTypeA .box .back_num { color: #e8e8e8; font-size: 6.0rem; line-height: 26px; letter-spacing:-0.9px; position: absolute; left: 0; bottom: 25px; z-index: -1 } #sub .listTypeA .box p { font-size: 1.6rem; line-height: 26px; letter-spacing:-0.9px; margin-top: 20px } #sub .listTypeA .box .red { display: inline-block; padding: 0 7px; font-size: 1.2rem; line-height: 22px; letter-spacing:-0.9px; background: #e60013; border-radius: 3px; color: #fff;} #sub .listTypeA .box ul { margin-top: 20px; font-size: 1.6rem;} #sub .listTypeA .box ul li { display: block; position: relative; padding-left: 11px; box-sizing: border-box; } #sub .listTypeA.item4 > li { width: 25%; position: relative; z-index: 1; } /* #sub .listTypeA > li .box ul li::before { content: ''; display: block; clear: both; width: 5px; height: 5px; border-radius: 50%; background: #222; position: absolute; left: 0; top: 50%; margin-top: -2.5px; } */ #sub .listTypeA .box ul li .dot {position: relative;} #sub .listTypeA .box ul li .dot::before { content: ''; display: block; clear: both; width: 5px; height: 5px; border-radius: 50%; background: #222; position: absolute; left: -11px; top: 6px;} #sub .listTypeA .box .ul_two ul { float: left; width: 50%;} /*기본 리스트*/ #sub .listTypeB { width: calc(100% + 30px); margin-left: -30px; margin-top: -30px; } #sub .listTypeB.item4 li { float: left; width: calc(25% - 30px); margin-left: 30px; margin-top: 30px; } #sub .listTypeB.item5 li { float: left; width: calc(20% - 30px); margin-left: 30px; margin-top: 30px; } #sub .listTypeB li .box .back_img { border: 1px solid #f2f2f2; box-sizing: border-box;} #sub .listTypeB li .box span { display: inline-block; margin-top: 25px; width: 100%; text-align: center; color: #111; font-size: 1.6rem; line-height: 26px; letter-spacing:-0.8px; } /*클라이언트*/ #sub .listTypeC { width: calc(100% + 10px); margin-left: -10px; margin-top: -10px } #sub .listTypeC li { float: left; width: calc(16.666% - 10px); margin-left: 10px; margin-top: 10px;} #sub .listTypeC li .back_img { border: 1px solid #c9c9c9;} /*추천 포인트*/ #sub .listTypeD { width: 100% } #sub .listTypeD li { float: left; position: relative;} #sub .listTypeD li .back_img {position: relative;} #sub .listTypeD.item3 li { width: 33.333%; } #sub .listTypeD.item4 li { width: 25%;} #sub .listTypeD li .tit { width: 100%; height: 100%; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 1; text-align: center; color: #fff; letter-spacing:-0.8px;} #sub .listTypeD .tit .tbc > * { display: block} #sub .listTypeD .tit span:first-child { font-size: 1.2rem; line-height: 40px; letter-spacing: 1px; color: #ddd; text-transform: uppercase; } #sub .listTypeD .tit span.over { color: #fff; line-height: 30px; font-size: 1.4rem; } #sub .listTypeD .tit h3 { font-size: 2.4rem; line-height: 30px; } #sub .listTypeD .tit p { font-size: 1.6rem; line-height: 34px; margin-top: 40px; } #sub .listTypeD li .tit .over { display: none;} #sub .listTypeD li:hover .tit {background: radial-gradient(rgba(141, 61, 52, 0.9) 20%, transparent 80% );background: -webkit-radial-gradient(rgba(141, 61, 52, 0.9) 20%, transparent 80% );background: -moz-radial-gradient(rgba(141, 61, 52, 0.9) 20%, transparent 80% );} #sub .listTypeD li:hover .tit .over { display: block;} #sub .listTypeD li:hover .tit span:first-child { display: none;} .slideTypeB .swiper-slide .img_wrap { border: 1px solid #f2f2f2; position: relative; } .slideTypeB .swiper-slide .img_wrap a {display: none; position: absolute; right: 30px; bottom: 30px; } .slideTypeB .swiper-slide .txt { display: inline-block; margin-top: 25px; width: 100%; text-align: center; color: #111; font-size: 1.6rem; line-height: 26px; letter-spacing: -0.8px;} .slideTypeB .swiper-slide:hover .img_wrap { box-shadow: 10px 10px 16px 0px rgb(0 0 0 / 5%); } .slideTypeB .swiper-slide:hover .img_wrap a { display: block ;} .thumbsTypeA .arrow_box.white {bottom: 0} #main .thumbsTypeA .arrow_box.white {bottom: 108px} #sub.commerce .section4.thumbsTypeA .arrow_box {bottom: 108px} .slideTypeC { padding: 50px 0 65px !important} .slideTypeC .swiper-container { position: relative; } .slideTypeC .swiper-slide { width: 100%; max-width: 315px; overflow: hidden; position: relative; clip-path: inset(0 2px 0 2px); } .slideTypeC .swiper-slide .back_img { filter: grayscale(0);} .slideTypeC .swiper-slide.swiper-slide-active { position: relative; transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1.15) !important; border-radius: 20%; clip-path: inset(0 7% 0 7%); /* */} .slideTypeC .swiper-slide.swiper-slide-active .back_img { filter: grayscale(0); clip-path: inset(0 7% 0 7%); border-radius: 25px; /* clip-path: polygon(20% 0%, 80% 0%, 93% 10%, 93% 90%, 80% 100%, 20% 100%, 7% 90%, 7% 10%); */ } .slideTypeC .phone { /*width: calc(100% / 6); width: 283.33px; */ width: 320px; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%) ; -webkit-transform:translate(-50%,-50%) ; -o-transform:translate(-50%,-50%) ; -ms-transform:translate(-50%,-50%) ; -moz-transform:translate(-50%,-50%) ; z-index: 100;} .slideTypeC .phone:after { content: ''; display: block; clear: both; background: url('/img/commerce_sec2_phone.png') no-repeat center / 100%; width: 115%; height: 120%; position: absolute; top: 49.5%; left: 49%;transform:translate(-50%,-50%) ; -webkit-transform:translate(-50%,-50%) ; -o-transform:translate(-50%,-50%) ; -ms-transform:translate(-50%,-50%) ; -moz-transform:translate(-50%,-50%) ; } .slideTypeC .video_wrap { max-width: none; font-size: 0; text-align: center; position: absolute; top: calc(50% - 7px); left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); border-radius: 16%; clip-path: inset(0 4% 0 4%); width: 110%; overflow: hidden; } .slideTypeC .videoBox { position: relative; display: inline-block; width: 100%;} .slideTypeC .videoBox img.current_img { max-width: none !important; z-index: 3; } .slideTypeC .videoBox.on img.current_img { position: relative; opacity: 1; visibility: inherit; } .slideTypeC .videoBox.off img.current_img { animation: img_fade 1s; position: relative; visibility: inherit; } .slideTypeC .videoBox video { position: absolute; z-index: 2; left: 50%; top: 50%;transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%) ; -o-transform:translate(-50%, -50%) ; -ms-transform:translate(-50%, -50%) ; -moz-transform:translate(-50%, -50%) ; width: 350%; height: 100%; border: 0; outline: 0;} .slideTypeC .videoBox img.next_img { opacity: 1; visibility: visible; z-index: 1; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; } .slideTypeC .video_wrap { max-width: none; font-size: 0; text-align: center; position: absolute; top: calc(50% - 7px); left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); border-radius: 16%; clip-path: inset(0 4% 0 4%); width: 110%; overflow: hidden; } .slideTypeC .videoBox { position: relative; display: inline-block; width: 100%;} .slideTypeC .videoBox img.current_img {max-width: none !important; } .slideTypeC .videoBox.on img.current_img { position: relative; opacity: 1; visibility: visible; } .slideTypeC .videoBox.off img.current_img { animation: img_fade 1s; position: relative; } .slideTypeC .videoBox video { position: absolute; left: 50%; top: 50%;transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%) ; -o-transform:translate(-50%, -50%) ; -ms-transform:translate(-50%, -50%) ; -moz-transform:translate(-50%, -50%) ; width: 350%; height: 100%; border: 0; outline: 0;} .slideTypeC.vid .video-js { position: absolute; left: 50%; top: 50%;transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%) ; -o-transform:translate(-50%, -50%) ; -ms-transform:translate(-50%, -50%) ; -moz-transform:translate(-50%, -50%) ; width: 350%; height: 100%; border: 0; outline: 0; } @keyframes img_fade { 0%{ opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } .slideTypeD.swiper-container { overflow: inherit; } .slideTypeD .swiper-slide .img_wrap { position: relative; } .slideTypeD .swiper-slide .name { display: inline-block; width: 100%; height: 80px; text-align: center; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 2.0rem; line-height: 80px; letter-spacing: -0.8px; position: absolute; bottom: 0; left: 0;} .exclusive { position: absolute; top: 0; left: 0; z-index: 5; } .exclusive .name { background: transparent !important; display: inline-block; width: 100%; height: 80px; text-align: center; color: #fff; letter-spacing: -0.8px; position: absolute; bottom: 0; left: 0;} .exclusive .name { font-size: 3.0rem !important; font-weight: 800; line-height: 1 !important; } .exclusive .name em { display: block; color: #ffdf00; font-size: 1.8rem; margin-bottom: 8px; } .exclusive .back_img { position: relative;} .exclusive .back_img::after { content: ''; display: block; clear: both; width: 100%; height: 40%; position: absolute; bottom: 0; left: 0; background: linear-gradient(90deg,rgba(4, 4, 4, 0.7) 9%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg,rgba(4, 4, 4, 0.7) 9%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(90deg,rgba(4, 4, 4, 0.7) 9%, rgba(255, 255, 255, 0) 100%); transition: all .4s ease; -webkit-transition: all .4s ease; -ms-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease;} .swiper-slide.first .name { background: transparent !important; display: inline-block; width: 100%; height: 80px; text-align: center; color: #fff; letter-spacing: -0.8px; position: absolute; bottom: 0; left: 0;} .swiper-slide.first .name { font-size: 3.0rem !important; font-weight: 800; line-height: 1 !important; } .swiper-slide.first .name em { display: block; color: #ffdf00; font-size: 1.8rem; margin-bottom: 8px; } .swiper-slide.first .back_img { position: relative;} .swiper-slide.first .back_img::after { content: ''; display: block; clear: both; width: 100%; height: 40%; position: absolute; bottom: 0; left: 0; background: linear-gradient(90deg,rgba(4, 4, 4, 0.7) 9%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg,rgba(4, 4, 4, 0.7) 9%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(90deg,rgba(4, 4, 4, 0.7) 9%, rgba(255, 255, 255, 0) 100%); transition: all .4s ease; -webkit-transition: all .4s ease; -ms-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease;} /*.comSlide_sec7 .swiper-slide-active { opacity: 0 !important;}*/ /**************************************************************/ #sub.company .con_area, #sub.company .con_wrap { position: relative;} #sub.company .back_txt { color: #ebebeb; font-size: 10.0rem; line-height:1; letter-spacing: -5px; position: absolute; left: 0; top: -40px;z-index: -1; width: 900px;} #sub.company .back_txt2 { top: initial; bottom: -44px; left: -8px; z-index: 2;} #sub.company .con_wrap .txt { margin-top: 20px; } #sub.company .con_wrap h3, #sub.company .con_wrap h2 { line-height: 42px; letter-spacing: -0.8px } #sub.company .con_wrap h3 { font-size: 2.4rem; } #sub.company .con_wrap h2 { font-size: 3.0rem; } #sub.company .con_wrap .signature { margin-top: 40px; font-size: 1.4rem; line-height: 34px; letter-spacing: -0.8px; text-align: right; } #sub.company .con_wrap .signature .quid { font-size: 4.0rem; position: relative; top: 5px; padding-left: 20px; } #sub.company .con_wrap .txt p + p { margin-top: 15px;} #sub.company .section1 .con_wrap.ri {padding-top: 100px;} #sub.company .section2 .con_wrap.le { padding-top: 100px; } #sub.company .section2 .con_wrap.le h3 { line-height: 36px; } #sub.company .section2 .con_wrap.le p { margin-top: 15px; } #sub.company .section2 .con_wrap.ri .back_img { width: 990px; position: absolute; left: 0; top: 0} #sub.company .section3 { margin-top: 170px; margin-bottom: 150px; } #sub.company .section3 .tit_box span { color: #fff; font-size: 3.0rem; line-height: 34px; } #sub.company .section3 .tit_box h2 { color: #fff; font-size: 10.0rem; line-height: 90px; margin-top: 20px } #sub.company .section3 .listType { width: calc(100% + 60px); margin-left: -60px; margin-top: -60px; } #sub.company .section3 .listType li { float: left; width: calc(25% - 60px); margin-left: 60px; margin-top: 60px; box-sizing: border-box; } #sub.company .section3 .listType li .box h3 { width: 100%; display: inline-block; color: #f0f0f0; font-size: 2.0rem; line-height: 26px; letter-spacing: -1px; margin-top: 30px; } #sub.company .section3 .listType li .box p { color: #999; font-size: 1.6rem; line-height: 26px; letter-spacing: -0.8px; margin-top: 10px; } #sub.company .section3 .listType li .box img { height: 60px;} /**************************************************************/ #sub .bbs:not(.contact_area .bbs) { padding: 150px 0} #sub .bbs .srch_area { position: relative; margin-bottom: 20px;} #sub .bbs .srch_area .rst_txt {color: #111; font-size: 1.4rem; line-height: 21px; letter-spacing: -0.8px } #sub .bbs .srch_area .rst_txt .num { font-size: 3.0rem; color: #e60013; letter-spacing: -2.5px; } #sub .bbs .srch_area .srch_wrap { position: absolute; bottom: 0; right: 0; margin: 0; max-width: 570px; } #sub .list_area ul { width: calc(100% + 30px); margin-left: -30px; margin-top: -30px; } #sub .list_area ul li { float: left; width: calc(25% - 30px); margin-left: 30px; margin-top: 30px; } #sub .list_area ul li > a { display: block; position: relative; transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease; } #sub .list_area ul li > a:hover { box-shadow: rgb(0 0 0 / 20%) 2px 2px 10px; } #sub .list_area ul li > a.non_hover:hover { box-shadow: none; } #sub .list_area ul li > a .desc { padding: 30px 20px; border: 1px solid #e7e7e7; border-top: none; box-sizing: border-box; color: #222; } #sub .list_area ul li > a .desc .tit { padding-bottom: 20px; box-sizing: border-box; } #sub .list_area ul li > a .desc .tit > h2 { margin-bottom: 0; font-size: 1.8rem; letter-spacing: -0.8px; min-height: 60px;line-height: 28px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;} #sub .list_area ul li > a .desc .tit > p { color: #777; font-size: 1.5rem; letter-spacing: -0.8px; line-height: 21px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;} #sub .list_area ul li > a .desc .add span { display: inline-block; font-size: 1.2rem;letter-spacing: -0.8px; line-height: 36px; } #sub .bbs .btn_area { text-align: center; margin-top: 40px} #sub .bbs .btn_area a {cursor: pointer; display: inline-block; width: 220px; height: 60px; text-align: center; line-height: 60px; font-size: 1.6rem; letter-spacing: -0.5px; color: #fff; border-radius: 30px; background: linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -webkit-linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(180deg,#e60013 0%, #e64100 99%); } /**************************************************************/ .drp_wrap { position:relative; } .drp_wrap > a { display: inline-block; box-sizing: border-box; font-size: 1.6rem; text-align: center; background: #fff url('../img/icon_drp_down.png'); background-repeat: no-repeat; background-position: right 30px top 50%; background-size: 12px; width: 100%; height: 60px; line-height: 60px; border: 1px solid #e60013; /*border-bottom: 1px solid #eaeaea;*/ padding: 0 15px; color: #e60013;} .drp_wrap > a.on { background: #e60013 url('../img/icon_drp_up.png'); background-repeat: no-repeat; background-position: right 30px top 50%; background-size: 12px; color: #fff; } .drp_wrap .drp_box{ display:none; padding:0; box-sizing:border-box; position:absolute; left:0; top:60px; z-index:20; width:100%; background: #fff; } .drp_wrap .drp_box > ul > li > a {display:block; padding: 0 15px; line-height: 60px; box-sizing:border-box; font-size:1.6rem; color:#222; } .drp_wrap .drp_box > ul > li:hover a { color: #e60013;} .drp_wrap .drp_box > ul { /*border-bottom: 1px solid #eaeaea;*/} .drp_wrap .drp_box > ul > li { float: none; width: 100%; } .drp_wrap .drp_box > ul > li.on:before { content: none } .drp_wrap .drp_box > ul > li a { text-align:center; } .drp_wrap .drp_box > ul > li {border: 1px solid #e60013; box-sizing: border-box; } .drp_wrap .drp_box > ul > li + li { border-top: none;} .drp_wrap .drp_box > ul > li a span { position: relative } #sub.commerce .size2 { max-width: 1780px;} #sub.commerce .section2 .swiper-slide .img_wrap { display: block; } #sub.commerce .section2 .swiper-slide.swiper-slide-active .img_wrap { display: none } #sub.commerce .section3 .col_items:hover .txt span { display: block } #sub.commerce .section3 .col_items .back_img::after {transition: none; -webkit-transition: none; -ms-transition: none; -moz-transition: none; -o-transition: none} #sub.commerce .section3 .col_items:hover .cont_box {box-shadow: 10px 10px 16px 0px rgb(0 0 0 / 2%);} #sub.commerce .section3 .col_items:hover .back_img::after { height: 100%; } #sub.commerce .section3 .col_items .back_img::after { height: 100%; bottom: initial; top: 0} #sub.commerce .section3 .col_items.item1 .back_img::after { background: #04cf5c; } #sub.commerce .section3 .col_items.item2 .back_img::after { background: #4285f4; } #sub.commerce .section3 .col_items.item3 .back_img::after { background: linear-gradient(310deg,#ff0e36 50%, #ff009e 99%); background: -webkit-linear-gradient(310deg,#ff0e36 50%, #ff009e 99%); background: -moz-linear-gradient(310deg,#ff0e36 50%, #ff009e 99%); } #sub.commerce .section3 .col_items.item4 .back_img::after { background: #0545b0; } #sub.commerce .section3 .col_items.item5 .back_img::after { background: #ffb400; } #sub.commerce .section3 .swiper-container .back_img { position: relative; background-image: none !important; } #sub.commerce .section3 .swiper-container .back_img::after { content: ''; display: block; clear: both; width: 100%; height: 80%; position: absolute; bottom: 0; left: 0; background: linear-gradient(90deg,#040404 9%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(90deg,#040404 9%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(90deg,#040404 9%, rgba(255, 255, 255, 0) 100%); opacity: 0.7; } #sub.commerce .section3 .swiper-container .back_img::after { height: 100%; bottom: initial; top: 0 } #sub.commerce .section3 .swiper-container .swiper-slide1 .back_img::after { background: #04cf5c; } #sub.commerce .section3 .swiper-container .swiper-slide2 .back_img::after { background: #4285f4; } #sub.commerce .section3 .swiper-container .swiper-slide3 .back_img::after { background: linear-gradient(310deg,#ff0e36 50%, #ff009e 99%); background: -webkit-linear-gradient(310deg,#ff0e36 50%, #ff009e 99%); background: -moz-linear-gradient(310deg,#ff0e36 50%, #ff009e 99%); } #sub.commerce .section3 .swiper-container .swiper-slide4 .back_img::after { background: #0545b0; } #sub.commerce .section3 .swiper-container .swiper-slide5 .back_img::after { background: #ffb400; } #sub.commerce .section3 .swiper-container .img_wrap .logoImg { position: absolute; top: 50%; left: 50%; z-index: 1; transform:translate(-50%, -50%) ; -webkit-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%) ; } #sub.commerce .section3 .swiper-container .txt h3 {display: block; margin-top: 20px; font-size: 1.6rem; line-height: 1; color: #111; } #sub.commerce .section3 .swiper-container .txt span { display: inline-block; margin-top: 10px; font-size: 1.4rem;line-height: 20px; color: rgba(17, 17, 17, 0.7); } #sub.commerce .section5 .inner:after { content: url(/img/press_sec2_shape.svg); display: block; clear: both; position: absolute; bottom: -320px; right: -245px; z-index: 0; width: 550px;} #sub.commerce .section5 .mo .swiper-container, #sub.experience .section3 .mo .swiper-container, #sub.sns .section3 .mo .swiper-container, #sub.video .section2 .mo .swiper-container, #sub.video .section3 .mo .swiper-container { padding-bottom: 25px;} #sub.commerce .section6 .videoBox { position: relative;} #sub.commerce .section6 .videoBox video { position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%) ; -webkit-transform:translate(-50%, -50%) ; -o-transform:translate(-50%, -50%) ; -ms-transform:translate(-50%, -50%) ; -moz-transform:translate(-50%, -50%) ; } #sub.commerce .section8 .box_wrap { width: calc(100% + 30px); margin-left: -30px; margin-top: -30px;} #sub.commerce .section8 .box_wrap .box { float: left; width: calc(50% - 30px); margin-left: 30px; margin-top: 30px; background: #fbfbfb; border-top: 2px solid #131313; padding: 95px 50px; text-align: center; box-sizing: border-box;} #sub.commerce .section8 .box_wrap .box h3 { font-size: 2.2rem;letter-spacing: -0.8px; line-height: 50px; } #sub.commerce .section8 .box_wrap .box .icon_img { display: inline-block; margin-top: 10px;} #sub.commerce .section8 .box_wrap .box .icon_img { position: relative; } #sub.commerce .section8 .box_wrap .box .icon_img .ab { z-index: 2; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%) ; -webkit-transform:translate(-50%, -50%) ; -o-transform:translate(-50%, -50%) ; -ms-transform:translate(-50%, -50%) ; -moz-transform:translate(-50%, -50%) ; } #sub.commerce .section8 .box_wrap .box .icon_img .bg { filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.1)); } #sub.commerce .section8 .box_wrap .box .txt { margin-top: 40px} #sub.commerce .section8 .box_wrap .box .txt p + p { margin-top: 20px} #sub.commerce .section8 .box_wrap .box .txt b { display: block; font-size: 1.6rem; letter-spacing: -0.8px; line-height: 35px;} #sub.commerce .section8 .box_wrap .box .txt span { display: block; font-size: 1.4rem; line-height: 26px; letter-spacing: -0.8px; color: #666; } #sub.commerce .section9.bg_dark:before { content: none;} #sub.commerce .section9 .sec_con { position: relative; overflow: hidden;} #sub.commerce .section9 .sec_con .inner { padding: 150px 0; position: relative; z-index: 2;} #sub.commerce .section9 .sec_con .tit_box h2 { line-height: 1; margin-top: 5px;} #sub.commerce .section9 .sec_con1 { background: #202020; } #sub.commerce .section9 .sec_con2 { background: #0545b0; } #sub.commerce .section9 .sec_con2 .tit_box .top { display: block; text-align: center; font-size: 3.0rem; line-height: 26px; letter-spacing: -0.8px; color: #e60013;} #sub.commerce .section9 .sec_con2 .tit_box .top .dot { display: inline-block; padding: 0 5px; position: relative; top: -2px; } #sub.commerce .section9 .sec_con2 .tit_box .des { margin-top: 20px;; font-size: 1.6rem; color: #ffffff; line-height: 32px; } #sub.commerce .section9 .sec_con2 .con_area { margin-top: 30px;} #sub.commerce .section9 .sec_con2 .con_area .table { max-width: 985px; margin: 0 auto; } #sub.commerce .section9 .sec_con2 .ab { display: block; position: absolute; z-index: 0;} #sub.commerce .section9 .sec_con2 .ab1 { top: 40px; left: -170px;} #sub.commerce .section9 .sec_con2 .ab2 { bottom: -8px; right: -170px;} #sub.commerce .section9 .sec_con2 .ab img { width: 100%;} #sub.commerce .section9 .sec_con2 .ab1 img { width: 445px; opacity: 0.2;} #sub.commerce .section9 .sec_con2 .ab2 img { width: 509px;} #sub.commerce .section9 .sec_con2 .con_area .table.mo .table_box { margin-top: 0px } #sub.commerce .section9 .con_area .box_wrap .tit { padding-left: 275px; position: relative; margin: 0 auto; width: fit-content;} #sub.commerce .section9 .con_area .box_wrap .tit .ab { position: absolute; left: 0; top: 50%; transform:translateY(-50%) ; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%);-moz-transform:translateY(-50%);} #sub.commerce .section9 .con_area .box_wrap .tit h2 { font-size: 3.4rem; margin-bottom: 25px; } #sub.commerce .section9 .con_area .table_wrap { position: relative;} #sub.commerce .section9 .con_area .table { position: relative; border-radius: 10px; overflow: hidden; } #sub.commerce .section9 .con_area .table table { border: 1px solid #d7d7d7; } #sub.commerce .section9 .con_area .table table tr th, #sub.commerce .section9 .con_area .table table tr td { height: 60px; font-size: 1.4rem; line-height: 26px; letter-spacing: -0.8px; color: #000; text-align: center; background: #fff; border: 1px solid #d7d7d7; padding: 10px; box-sizing: border-box; } #sub.commerce .section9 .con_area .table table tr th { font-family: 'NanumSquareNeo-eHv', sans-serif; background: #fbfbfb; } #sub.commerce .section9 .con_area .table table tr td { font-family: 'NanumSquareNeo-cBd', sans-serif; color: #333; } #sub.commerce .section9 .con_area .table thead tr th { color: #e60013 ; } #sub.commerce .section9 .con_area .table thead tr th:first-child { color: #000; background: #e7e7e7; } #sub.commerce .section9 .con_area .table.mo .table_box { margin-top: 10px} #sub.commerce .section9 .con_area .table.mo .table_box > div {display: none;} #sub.commerce .section9 .con_area .table.mo .table_box > div.on { display: block;} #sub.commerce .section9 .sec_con2 .con_area .table.mo .table_box > div { display: block !important;} #sub.commerce .section10 .add { color: #222; text-align: center; font-size: 1.6rem; letter-spacing: -0.8px; margin-top: 30px} #sub.commerce .section10 .add > * { display: block; } #sub.commerce .section10 .add b { line-height: 35px; } #sub.commerce .section10 .add span { line-height: 26px; } #sub.guide .img_wrap {position: relative; } #sub.guide .img_wrap .back_img { overflow: hidden; position: relative; } #sub.guide .img_wrap .back_img:before { content: ''; display: block; clear: both; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left:0; } #sub.guide .img_wrap .info { width: 100%; padding: 0 20px; box-sizing: border-box; color: #fff; text-align: center; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%) ; -webkit-transform:translate(-50%,-50%) ; -o-transform:translate(-50%,-50%) ; -ms-transform:translate(-50%,-50%) ; -moz-transform:translate(-50%,-50%) ; } #sub.guide .img_wrap .info > * { display: block; line-height: 1; letter-spacing:-0.5px; font-weight:900; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;} #sub.guide .img_wrap .info .date { font-size: 1.6rem; } #sub.guide .img_wrap .info .time { font-size: 4.0rem; margin-top: 15px; } #sub.guide .img_wrap .info .live { display: inline-block; margin-top: 10px; font-size: 1.4rem; padding: 20px 30px; font-weight:100; letter-spacing: 10px; border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } #sub.guide .img_wrap .info .tit { font-size: 1.8rem; margin-top: 45px; color: rgba(255, 255, 255, 0.65); } #sub.guide .img_wrap .view_btn { display: none; position: absolute; right: 0px; bottom: 0px; } #sub.guide .img_wrap:hover .back_img{ border-bottom-right-radius: 100px;} #sub.guide .img_wrap:hover .back_img:before { backdrop-filter: blur(10px); } #sub.guide .img_wrap:hover .info .tit { color: rgba(255, 255, 255, 1); } #sub.guide .img_wrap:hover .view_btn { display: block; } #sub.guide .view .imgs_wrap { position: relative;} #sub.guide .view .imgs_wrap .btn_wave { width: 86.5px;height: 86.5px; line-height: 86.5px; position: absolute; top: -20px; right: 15px; left: inherit; font-size: 2.0rem; color: #fff; } #sub.guide .view .imgs_wrap .btn_wave .btn_wave_circle {width: 86.5px;height: 86.5px; line-height: 86.5px;} #sub.guide .view .imgs_wrap .btn_wave .btn_wave_circle.size_s { background: linear-gradient(2deg,#e60013 0%, #e64100 99%); background: -webkit-linear-gradient(2deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(2deg,#e60013 0%, #e64100 99%);} #sub.guide .view .imgs_wrap .btn_wave .btn_wave_circle.size_m { background: linear-gradient(2deg, rgba(230, 0, 19, 0.5) 9%, rgba(230, 65, 0, 0.5) 99%) ; background: -webkit-linear-gradient(2deg, rgba(230, 0, 19, 0.5) 9%, rgba(230, 65, 0, 0.5) 99%); background: -moz-linear-gradient(2deg, rgba(230, 0, 19, 0.5) 9%, rgba(230, 65, 0, 0.5) 99%); animation: wave_pulse_m2 1.25s 0.25s linear infinite; } #sub.guide .view .imgs_wrap .btn_wave .btn_wave_circle.size_l { background: linear-gradient(2deg, rgba(230, 0, 19, 0.5) 9%, rgba(230, 65, 0, 0.5) 99%); background: -webkit-linear-gradient(2deg, rgba(230, 0, 19, 0.5) 9%, rgba(230, 65, 0, 0.5) 99%); background: -moz-linear-gradient(2deg, rgba(230, 0, 19, 0.5) 9%, rgba(230, 65, 0, 0.5) 99%); animation: wave_pulse_l2 1.25s 0.25s linear infinite; } #sub.guide .view .imgs_wrap .btn_wave.end .btn_wave_circle.size_s { background: linear-gradient(2deg,#171717 0%, #474747 99%) ; background: -webkit-linear-gradient(2deg,#171717 0%, #474747 99%); background: -moz-linear-gradient(2deg,#171717 0%, #474747 99%);box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 8%); } #sub.guide .view .imgs_wrap .btn_wave.plan .btn_wave_circle.size_m, #sub.guide .view .imgs_wrap .btn_wave.plan .btn_wave_circle.size_l, #sub.guide .view .imgs_wrap .btn_wave.end .btn_wave_circle.size_m, #sub.guide .view .imgs_wrap .btn_wave.end .btn_wave_circle.size_l { display: none;} @keyframes wave_pulse_m2 { 0% { width: 66px; height: 66px; opacity: 0; } 25% { width: 82px; height: 82px; opacity: 0.5; } 50% { width: 98px; height: 98px; opacity: 1; } 75% { width: 102px; height: 102px; opacity: 0.5; } 100% { width: 105px; height: 105px; opacity: 0; } } @keyframes wave_pulse_l2 { 0% { width: 81px; height: 81px; opacity: 0; } 25% { width: 96px; height: 96px; opacity: 0.5; } 50% { width: 113px; height: 113px; opacity: 1; } 75% { width: 115px; height: 115px; opacity: 0.5; } 100% { width: 120px; height: 120px; opacity: 0; } } /* [data-scroll] { opacity: 0; will-change: transform, opacity; transform: translateY(50px); transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1); } [data-scroll='in'] { opacity: 1; transform: translateY(0); } [data-scroll='out'] { opacity: 0; } */ .ani_item { opacity: 0;} .ani_item.non_opacity { opacity: 1;} .animate__fadeInUp{-webkit-animation-name:fadeInUp2 !important;animation-name:fadeInUp2 !important} @-webkit-keyframes fadeInUp2{ 0%{opacity:0;-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)} to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)} } @keyframes fadeInUp2{ 0%{opacity:0;-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)} to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)} } /**************************************************************/ #sub.experience .section4 {padding: 0; overflow: hidden;} #sub.experience .section4 .inner {padding: 200px 0 180px;} #sub.experience .section4 .ab_inner { position: relative; width: 50%; } #sub.experience .section4 .ab { position: absolute; bottom: 0; left: calc(50% - 208px); filter: drop-shadow(20px 20px 20px rgba(163, 0, 13, 0.75));} #sub.experience .section4 .flex_box .ri { width: 100%; padding-left: 50%; } #sub.experience .section4 .con_wrap.ri { color: #fff } #sub.experience .section4 .con_wrap.ri h3, #sub.experience .section4 .con_wrap.ri h2 { line-height: 70px; letter-spacing: -0.8px } #sub.experience .section4 .con_wrap.ri h3 { font-size: 4.0rem; } #sub.experience .section4 .con_wrap.ri h2 { font-size: 6.0rem; } #sub.experience .section4 .con_wrap.ri .txt { margin-top: 35px; } #sub.experience .section4 .con_wrap.ri .txt h4 { font-size: 2.0rem; line-height: 36px; } #sub.experience .section4 .con_wrap.ri .txt p { color: rgba(255, 255, 255, 0.85); font-size: 1.6rem; margin-top: 15px; } #sub.experience .section5 .con_area { min-height: 1110px; } #sub.experience .section5 .tab_wrap { width: 100%; max-width: 790px; margin: 0 auto; padding: 10px; background: #f3f3f3; border: 1px solid #e4e4e4; border-radius: 35px; text-align: center; box-sizing: border-box;} #sub.experience .section5 .tab_wrap ul { width: calc(100% + 5px); margin-left: -5px;} #sub.experience .section5 .tab_wrap ul li { float: left; width: calc(20% - 5px); margin-left: 5px;} #sub.experience .section5 .tab_wrap ul li a { display: block; width: 100%; background: #fff; color: #e60013; font-size: 1.4rem; line-height: 55px; letter-spacing: -0.8px; border-radius: 25px;} #sub.experience .section5 .tab_wrap ul li.on a, #sub.experience .section5 .tab_wrap ul li:hover a { background: linear-gradient(137deg,#040404 0%, #222222 72%); background: -webkit-linear-gradient(137deg,#040404 0%, #222222 72%); background: -moz-linear-gradient(137deg,#040404 0%, #222222 72%); color: #fff; } #sub.experience .section5 .tab_con .con { display: none;} #sub.experience .section5 .tab_con .con.on { display: block;} #sub.experience .section5 .tab_list ul { width: calc(100% + 30px); margin-left: -30px; margin-top: -30px;} #sub.experience .section5 .tab_list ul li { cursor: pointer; float: left; width: calc(25% - 30px); margin-left: 30px; margin-top: 30px; } #sub.experience .section5 .tab_list ul li .box { background: #fafafa; border: 1px solid #e7e7e7; padding: 65px 40px 40px;} #sub.experience .section5 .tab_list ul li .box {letter-spacing: -0.8px;} #sub.experience .section5 .tab_list ul li .box .tit { position: relative; z-index: 1;} #sub.experience .section5 .tab_list ul li .box .tit::before {content: ''; display: block; clear: both; width: 45px; height: 45px; position: absolute; left: -22.5px; top : -20px; border-radius: 50%; background: #ffdf00; z-index: -1;} #sub.experience .section5 .tab_list ul li .box .tit h3 { font-size: 2.6rem; line-height: 30px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } #sub.experience .section5 .tab_list ul li .box .tit span { font-size: 1.2rem; line-height: 24px; } #sub.experience .section5 .tab_list ul li .box .prod { line-height: 26px; margin-top: 20px; } #sub.experience .section5 .tab_list ul li .box .prod span { color: #e60013; font-size: 1.4rem; ;} #sub.experience .section5 .tab_list ul li .box .prod p { font-size: 1.6rem; min-height: 52px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #sub.experience .section5 .tab_list ul li .box .more { display: inline-block; margin-top: 25px; width: 79px; line-height: 29px; background: #e7e7e7; border-radius: 3px; text-align: center; color: #8d8d8d; font-size: 10px; letter-spacing: 0; } #sub.experience .section5 .tab_list ul li:hover .box { background: #fff; box-shadow: 10px 10px 16px 0px rgb(0 0 0 / 5%);} #sub.experience .section5 .tab_list ul li:hover .box .more { background: #e60013; color: #fff;} #sub.brand .section2 .box_wrap { width: calc(100% + 30px); margin-left: -30px; margin-top: -30px;} #sub.brand .section2 .box { width: 100%; background: #fff; border-top: 2px solid #e60013; padding: 80px 60px; box-sizing: border-box; box-shadow: 10px 10px 16px 0px rgb(0 0 0 / 5%); } #sub.brand .section2 .box_wrap .box { float: left; width: calc(50% - 30px); margin-left: 30px; margin-top: 30px; } #sub.brand .section2 .box .top { position: relative;} #sub.brand .section2 .box .top h3 { margin-bottom: 20px; } #sub.brand .section2 .box .icon_img { color: #fff; display: block; width: 120px; height: 120px; line-height: 1; border-radius: 50%; text-align: center; position: absolute; top: 0; right: 0; box-shadow: 10px 10px 16px 0px rgb(0 0 0 / 23%);} #sub.brand .section2 .box .top .icon_img span { display: inline-block; padding-top: 53px; } #sub.brand .section2 .box.box1 .top .icon_img span { background: url('/img/brand_sec2_icon1.svg'); background-repeat: no-repeat; background-position: center top; background-size: 44px; } #sub.brand .section2 .box.box2 .top .icon_img span { background: url('/img/brand_sec2_icon2.svg'); background-repeat: no-repeat; background-position: center top; background-size: 47px; } #sub.brand .section2 .box .txt p + p { margin-top: 15px} #sub.brand .section3 .listType { width: calc(100% + 30px); margin-left: -30px; margin-top: -30px; } #sub.brand .section3 .listType li { float: left; width: calc(33.333% - 30px); margin-left: 30px; margin-top: 30px; box-sizing: border-box; } #sub.brand .section3 .listType li .box { background: #fcfcfc; padding: 50px 40px; height: 280px; box-sizing: border-box;} #sub.brand .section3 .listType li .box h3 { width: 100%; display: inline-block; font-size: 1.6rem; line-height: 26px; letter-spacing: -1px; margin-top: 10px; } #sub.brand .section3 .listType li .box p { position: relative; font-size: 1.6rem; line-height: 26px; letter-spacing: -0.8px; margin-top: 25px; } #sub.brand .section3 .listType li .box p > span { padding-left: 15px; display: block; font-size: 1.2rem; color: #e60013; position: relative;} #sub.brand .section3 .listType li .box p > span .dot { position: absolute; left: 0; top: 0} #sub.brand .section5 { background: url('/img/brand_sec5_bg.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;} #sub.brand .section5 {padding: 110px 0; margin-bottom: 150px;} #sub.brand .youtube_wrap { max-width: 870px; margin: 0 auto;} #sub.brand .videoBox { width: 100%; padding-bottom: 56.24%; box-sizing: border-box; position: relative; border: 0; margin: 0 auto 20px auto;} #sub.brand .videoBox iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; outline: 0;} /**************************************************************/ #sub.portfolio .cont_box { position: relative; } #sub.portfolio .box_link { display: block } #sub.portfolio .box_link .back_img { position: relative; transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease;} #sub.portfolio .box_link .back_img .view_btn { display: none; opacity: 0; width: 74px; height: 74px; text-align: center; line-height: 74px; border-radius: 50%; background: linear-gradient(2deg,#e60013 0%, #e64100 99%) ; background: -webkit-linear-gradient(2deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(2deg,#e60013 0%, #e64100 99%);box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 14%); position: absolute; right: -17px; bottom: -10px; transition:all .4s ease; -webkit-transition:all .4s ease; -ms-transition:all .4s ease; -moz-transition:all .4s ease; -o-transition:all .4s ease; } #sub.portfolio .box_link .back_img .view_btn img { width: 20px } #sub.portfolio .box_link:hover .back_img { box-shadow: 10px 10px 16px 0px rgb(0 0 0 / 14%); } #sub.portfolio .box .desc { padding: 15px 0; border: none;} #sub.portfolio .box .desc b { font-size: 2.0rem; font-weight: 900; letter-spacing: -0.5px; line-height: 36px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } #sub.portfolio .box .desc span { display: block; color: #777; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.5px; line-height: 21px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .viewType .title .le { width: 48.828%; } .viewType .title .ri { width: 51.172%; padding-left: 50px; min-height: 729.81px; box-sizing: border-box; position: relative;} .viewType .title .infos_wrap h3 { font-size: 3.4rem; letter-spacing: -0.5px; line-height: 36px; margin: 15px 0 25px; } .viewType .title .infos_wrap .desc {border-top: 1px solid #222; padding: 0 25px 40px} .viewType .title .infos_wrap .desc ul li { display: inline-block; width: 100%; margin-top: 35px; letter-spacing: -0.5px; line-height: 36px; } .viewType .title .infos_wrap .desc b { display: block; color: #a2a2a2; font-size: 1.4rem; line-height: 1; } .viewType .title .infos_wrap .desc span { font-size: 2.0rem; } .viewType .title .infos_wrap .desc + .btn { width: calc(100% - 50px); font-size: 1.4rem; letter-spacing: -0.5px; background: #222; height: 60px; line-height: 60px; box-sizing: border-box; border-radius: 0px; padding: 0; position: absolute; bottom: 20px; } .viewType .cont { margin-top: 60px } /* #sub.contact .cont_wrap { width: 100%; position: relative;} #sub.contact .cont_wrap .cont_box.le { float: left; width: 50%; height: 660px; } #sub.contact .cont_wrap .bbs { padding: 50px; box-sizing: border-box; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); box-shadow: 15px 15px 14px 5px rgb(0 0 0 / 22%); position: relative; z-index: 10;} #sub.contact .cont_wrap .bbs .ipt_con { padding: 20px 0;} #sub.contact .cont_wrap .bbs .ipt_con + .ipt_con { border-top: 1px solid #777; } #sub.contact .cont_wrap .bbs .ipt_con .con { width: calc(100% + 10px); margin-left: -10px; } #sub.contact .cont_wrap .bbs .ipt_con .con > p { float: left; width: calc(50% - 10px); margin-left: 10px; margin-top: 10px; } #sub.contact .cont_wrap .bbs .ipt_con .con .check_box label { line-height: 45px; vertical-align: middle;} #sub.contact .cont_wrap .bbs .tit { color: #e60013; font-size: 1.4rem; line-height: 1; letter-spacing:-0.5px; font-weight: 700; } #sub.contact .cont_wrap .bbs .ipt_con:first-child { padding-top: 0; } #sub.contact .cont_wrap .bbs .ipt_con:first-child p { text-align: left; padding: 0 15px; border: 1px solid #c0c0c0; box-sizing: border-box; height: 45px; } #sub.contact .cont_wrap .bbs .ipt_con > .check_box { display: block; text-align: left;} #sub.contact .cont_wrap .bbs .ipt_con > .check_box + .check_box { margin-top: 5px } #sub.contact .cont_wrap .bbs .more_btn {display: inline-block; background: #b3b3b3; font-size: 9px; color: #fff; font-weight: 500; border-radius: 3px; line-height: 19px; padding: 0 5px;} #sub.contact .cont_wrap .bbs .btns_wrap { text-align: center; margin-top: 15px; } #sub.contact .cont_wrap .bbs .send_btn { cursor: pointer; display: inline-block; width: 220px; height: 60px; text-align: center; line-height: 60px; font-size: 1.6rem; letter-spacing:-0.5px; color: #fff; border-radius: 30px; background: linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -webkit-linear-gradient(180deg,#e60013 0%, #e64100 99%); background: -moz-linear-gradient(180deg,#e60013 0%, #e64100 99%); } #sub.contact .cont_wrap .cont_box.ri {float: left; width: 50%; margin-left: 0px; height: 660px; } #sub.contact .cont_wrap .cont_box.ri #map {width: 100%; height: 100%; } */ /**************************************************************/ .popup { display: none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:1500; background-color:rgba(0, 0, 0, 0.7); padding: 20px; box-sizing: border-box; } .popup .pop_wrap{ width:100%; max-width:1280px; margin:0 auto; padding:0px; box-sizing:border-box;} .popup .pop_inner{ padding:50px 40px; box-sizing:border-box; background-color:#fff; position:relative;} .popup .pop_inner .tit_area{font-size:0; position: relative;} .popup .pop_inner .tit_area h3{display:inline-block; padding-right:8px; box-sizing:border-box; font-size:4.0rem; font-weight:900; color:#111; letter-spacing:-3px; line-height:1.1; position:relative;} .popup .pop_inner .tit_area h3::before { content: ''; display: block; clear: both; width: 15px; height: 15px; position: absolute; right: -10px; bottom: 2px; border-radius: 50%; background: #e60013;} .popup .pop_inner .pop_close{display:block; box-sizing:border-box; width:50px; height:50px; line-height:50px; position:absolute; right:0; bottom:0; z-index:3; text-align:center; background-color:#fff; border: 1px solid #222;} .popup .pop_inner .pop_close img{vertical-align:middle;} .popup .pop_inner .pop_cont {margin-top:25px; padding: 30px 0px; background-color:#fff; border-top: 2px solid #111; height: 469px; overflow-y: auto } .popup .pop_inner .pop_cont .agree_txt {font-size: 1.6rem; color: #222; line-height: 24px;} .pop_cont::-webkit-scrollbar { width: 6px; height: 1px;} .pop_cont::-webkit-scrollbar-track { background: transparent;} .pop_cont::-webkit-scrollbar-thumb { background: rgba(230, 0, 19, 0.2);} /**************************************************************/ .quick { position: fixed; right: 40px; bottom: 40px; /* top: 50%; transform:translateY(-50%) ; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%);*/ z-index: 100; } .quick a { display: block; width: 64px; height: 64px; border-radius: 50%; text-align: center; line-height: 64px; box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 20%); position: relative; } .quick a + a { margin-top: 5px;} .quick .contact_btn, .quick .call_btn { background: #e60013; } .quick a span { display: inline-block; width: 100%; height: 100%; position: absolute; top:0; left: 0; border-radius: 50%; } .quick a.contact_btn span.quick_icon { background: #e60013 url(/img/icon_contact.svg) no-repeat center; background-size: 27px; } .quick a.call_btn span.quick_icon { background: #e60013 url(/img/icon_call.svg) no-repeat center; background-size: 30px; } .quick a span.quick_txt { display: none; font-size: 1.4rem; color: #fff; line-height: 18px; padding: 14px; box-sizing: border-box;} .quick a:hover span.quick_icon { display: none;} .quick a:hover span.quick_txt { display: inline-block;} .quick .top_btn { background: #000000 url(/img/icon_top.svg) no-repeat center; background-size: 18px ; } /**************************************************************/ #addressLabel { background: #fff; border: 1px solid; padding: 5px 10px; position: relative; left: 120px; top: 0px; }