Static/style
home.css
hom2box
2021. 2. 19. 10:45
간단 설명
@charset "UTF-8";
.icon.menu{display:inline-block;width:20px;height:17px;background-position:0 -25px;background-image:url('/static/images/common/layout_sprite.png')}
.noTouchmove .company{height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}
.company::-webkit-scrollbar{display:none}
.company > .layout{position:fixed;left:0;top:0;z-index:10;width:100%;height:291px;box-sizing:border-box;overflow:hidden}
.company > .layout .btn{position:absolute;top:3px;padding:10px}
.company > .layout .btnPrev{left:8px;top:7px}
.company > .layout .btnMenu{left:8px;top:7px}
.company > .layout .btnSnb{display:none;right:8px;top:4px}
.company > .layout .btn .icon{vertical-align:top}
.company > .layout .btn .menu{width:23px;height:18px;background-position:-205px -50px}
/* #492 변경*/
.company > .layout .controller span{display:inline-block;position:absolute;bottom:15px}
.company > .layout .controller span:after{content:'';display:inline-block;position:absolute;top:0;width:62px;height:7px;background-image: url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size: 360px auto}
.company > .layout .controller .prev{left:15px}
.company > .layout .controller .prev:after{left:0;background-position:-150px -35px}
.company > .layout .controller .next{right:15px}
.company > .layout .controller .next:after{right:0;background-position:-150px -25px}
.company > .layout .controller span a{display:inline-block;min-width:62px;padding-top:11px;font-size:12px;color:rgba(255,255,255,.8);text-align:center}
.company .section{padding-top:291px;padding-bottom:60px}
.company .header{position:fixed;top:0;right:0;left:0;z-index:4;overflow:hidden;height:291px;padding-top:0;padding-bottom:45px}
.company .header .slick-slider,
.company .header .slick-list,
.company .header .slick-track{height:100%;padding-bottom:45px;box-sizing:content-box}
.company .header .slider{overflow:visible}
.company .layout .slick-disabled{display:none !important}
.company .header .image{background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
.company .header [data-body-id="intro"] .image{background-image:url('/static/images/common/company_head_bg_01.jpg')}
.company .header [data-body-id="history"] .image{background-image:url('/static/images/common/company_head_bg_02.jpg')}
.company .header [data-body-id="vision"] .image{background-image:url('/static/images/common/company_head_bg_03.jpg')}
.company .header [data-body-id="motto"] .image{background-image:url('/static/images/common/company_head_bg_04.jpg')}
.company .header [data-body-id="social"] .image{background-image:url('/static/images/common/company_head_bg_05.jpg')}
.company .header [data-body-id="rightpeople"] .image{background-image:url('/static/images/common/company_head_bg_06.jpg')}
.company .header [data-body-id="marketing"] .image{background-image:url('/static/images/common/company_head_bg_07.jpg')}
.company .header [data-body-id="seminar"] .image{background-image:url('/static/images/common/company_head_bg_08.jpg')}
.company .header [data-body-id="brand"] .image{background-image:url('/static/images/common/company_head_bg_09.jpg')}
.company .header .slider .content{position:absolute;left:0;right:0;top:0;z-index:1;text-align:center;-webkit-transform:translateY(118px);transform:translateY(118px)}
.company .header .slider .content .logo{display:inline-block;position:absolute;left:50%;top:-65px;width:51px;height:44px;margin-left:-25px;background-image: url('/static/images/common/logo_white_102x87.png');background-repeat:no-repeat;background-size: 51px auto}
.company .header .slider .content h1,
.company .header .slider .content h2{position:relative;z-index:1;opacity:1;padding-bottom:10px}
.company .header .slider .content h1{font-size:30px;color:#fff;line-height:1.2}
.company .header .slider .content h2{margin-top:9px;font-size:18px;color:#fff;font-weight:bold}
.company .header .slider .content h1:after{content:'';display:inline-block;position:absolute;left:50%;bottom:0;width:26px;margin-left:-13px;border-top:1px solid #fff}
.company .header .clone{color:#fff;font-size:13px;opacity:0;transform:translateY(100%)}
.company .header .clone br{display:none}
.company .header .image{position:absolute;top:0;bottom:0;left:0;width:100%}
.company .header .image img{position:absolute;top:0;left:50%;width:auto;height:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.company .header .tab{position:absolute;top: 100%;left:0;z-index:5;width:100%}
.company .body h2.hide + .content{margin-top:30px}
.transition .company .header,
.transition .company .layout,
.transition .company .header .content,
.transition .company .header .content h1,
.transition .company .header .content h2,
.transition .company .header .content .logo,
.transition .company .header .content .clone{
-webkit-transition:height 0.2s, opacity 0.2s, -webkit-transform 0.2s;
transition:height 0.2s, opacity 0.2s, transform 0.2s;
}
.company.app .layout .btnPrev{top:42px}
.company.app .layout .btnSnb{top:38px}
.company.app .layout nav span{bottom:15px}
.company.app .header{padding-top:291px}
.company.app .header .slider > div{top:53px}
.company .video{position: relative}
.company #content{position:relative}
.company .tab.dark{display:none}
.company .slick-active .tab.dark{display:table}
.company .slick-active .tab.dark.scroll{display:block}
.company .tab.dark span.active a{color:#64d0f4;border-bottom:3px solid #64d0f4}
.company .verticalLine{position:relative;padding-left:19px}
.company .verticalLine:after{content:'';position:absolute;left:0;top:2px;width:4px;height:28px;background-color:#333}
.company .marketing,
.company .socialShare,
.company .motto,
.company .vision,
.company .history{padding-top:336px}
/* 개요 */
.company .section.intro .content > p,
.company .section.intro .content .video{margin-top:28px}
.company .tabContent{margin-top:30px}
.history .tabContent p{margin-top:5px}
.history .tabContent .record .list{overflow:hidden}
.history .tabContent .record .list li{position:relative}
.history .tabContent .record .list li .month{position:absolute;left:0;top:0;padding-top:8px;line-height:1.3;font-size:12px;font-weight:bold}
.history .tabContent .record .list li .month:after{content:'';display:inline-block;position:absolute;left:24px;top:12px;z-index:1;width:6px;height:6px;border-radius:50%;background-color:#707780}
.history .tabContent .record .list li.etc .month:after{content:none}
.history .tabContent .record .list li .content{position:relative;padding-left:40px;line-height:1.4;font-size:12px;color:#333}
.history .tabContent .record .list li .content:after{content:'';display:inline-block;position:absolute;left:26px;top:18px;height:100%;border-left:1px solid #c9c9c9}
.history .tabContent .record .list li .content li{padding-top:8px}
.history .tabContent .record .list.primary{margin:15px 0 25px}
.history .tabContent .record .list.primary li .month{font-size:14px}
.history .tabContent .record .list.primary li .month:after{background-color:#00b6f0}
.history .tabContent .record .list.primary li .content{font-size:14px}
.history .tabContent .record .list.primary li .content:after{border-left:1px solid #b2e9fa}
.history .tabContent .record .list.primary li:last-child .content:after{display:none}
.company .section.vision{font-size:14px}
.company .section.vision hr{margin:30px 0}
.company .section.vision .content:nth-of-type(1){padding-top:0}
.company .section.vision .content p{margin-top:20px}
.company .section.vision .content .color1{color:#d15555}
.company .section.vision .content .color2{color:#3b73d9}
.company .section.vision .content .color3{color:#538a13}
.company .section.vision hr{margin:30px 0}
.company .motto .tabContent{margin-top:30px}
.company .motto .tabContent hr{margin:30px 0}
.company .motto .tabContent .content{margin-top:30px}
.company .motto .tabContent .content small{display:block;margin-top:2px;font-size:15px}
.company .motto .tabContent .content > p{margin-top:20px}
.company .motto .tabContent .video{position:relative;margin-top:7px}
.company .motto .verticalLine:after{height:80px;top:5px}
.company .socialShare{font-size:14px}
.company .socialShare .verticalLine:after{height:93%;top:5px}
.company .socialShare .green{color:#78b17d}
.company .socialShare .violet{color:#7a5f94}
.company .socialShare .tab{margin-bottom:30px}
.company .socialShare .tabContent hr{margin:30px 0}
.company .socialShare .tabContent .content{margin-top:30px}
.company .socialShare .tabContent .content small{display:block;margin-top:3px;font-size:15px}
.company .socialShare .tabContent .content .dash{margin-top:10px}
.company .socialShare .tabContent .content .dash li{margin-top:5px}
.company .socialShare .tabContent .content .dash li:first-child{margin-top:0}
.company .socialShare .tabContent.growth .image{display:inline-block;width:229px;height:219px}
.company .socialShare .tabContent figure{margin:13px 0 15px}
.company .socialShare .tabContent figure p{margin-top:4px;font-size:9px}
.company .socialShare .tabContent .gallery{margin-top:15px;padding:15px}
.company .socialShare .tabContent .gallery .body small{margin-top:0;font-size:12px;color:#7f8792}
.company .socialShare .tabContent .slider{min-height:150px}
.company .socialShare .tabContent .slider .listSlide{position:static}
.company .socialShare .tabContent .slider .listSlide .item .image{overflow:hidden;text-align:center;vertical-align:middle}
.company .socialShare .tabContent .slider .listSlide .item .image img{display:inline-block}
.company .socialShare .tabContent .slider .listSlide .item .caption{margin-top:10px;}
.company .socialShare .tabContent .slider .controls{top:0;padding-top:21%}
.company .socialShare .tabContent.contribution .content > p{margin-top:5px}
.company .socialShare .tabContent.contribution .video{margin-top:16px}
.company .tabContent .slider .listSlide{display:none;position:static}
.company .tabContent .slider .listSlide.slick-slider{display:block}
.company .recruit hr{margin:30px 0}
.company .recruit .content{margin-top:20px}
.company .recruit .content .body,
.company .recruit .content p{margin-top:5px}
.company .recruit .content .dash{line-height:1.8}
.company .recruit .iconList li{margin-top:20px}
.company .recruit .iconList li .head{position:relative;margin-bottom:15px;padding-left:72px;line-height:1.2}
.company .recruit .iconList li .head:after{content:'';display:inline-block;position:absolute;left:0; background-image:url('/static/images/common/recruit_icons.png');background-repeat:no-repeat;background-size:360px auto}
.company .recruit .iconList li .head.icon01:after{width:48px;height:52px;top:0;background-position:0 0}
.company .recruit .iconList li .head.icon02:after{width:45px;height:48px;top:0;background-position:-50px 0}
.company .recruit .iconList li .head.icon03:after{width:52px;height:44px;top:3px;background-position:-100px 0}
.company .recruit .iconList li .head.icon04:after{width:46px;height:38px;top:6px;left:5px;background-position:-155px 0}
.company .recruit .iconList li p{margin-top:5px}
.company .marketing .guide{margin:15px 0;padding:20px 5px;text-align:center}
.company .marketing .guide h3{margin-bottom:5px}
.company .marketing .ratings .plans{padding:}
.company .marketing .ratings .plans .rank{position:relative;min-height:80px}
.company .marketing .ratings .plans .rank:before{content:'';display:inline-block;position:absolute;left:40px;top:0;height:130%;border-left:1px solid #c9c9c9}
.company .marketing .ratings .plans .rank + .rank{margin-top:15px}
.company .marketing .ratings .plans .rank:last-child:before{content:none}
.company .marketing .ratings .plans .rank:after{content:'';display:block;clear:both}
.company .marketing .ratings .plans .rank .head{width:80px;height:80px;padding:28px 0 0;position:absolute;left:0;top:0;line-height:1.4;font-size:14px;color:#333;text-align:center;background-color:#fff;border-radius:50%;box-sizing:border-box}
.company .marketing .ratings .plans .rank .head strong{display:block}
.company .marketing .ratings .plans .rank .content{position:relative;float:right;width:70%;min-height:87px;margin-top:2px;padding:0 20px 15px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px;box-sizing:border-box}
.company .marketing .ratings .plans .rank .content p{margin-top:13px;font-size:13px;color:#333}
.company .marketing .ratings .plans .rank .content:before,
.company .marketing .ratings .plans .rank .content:after{content:'';display:inline-block;position:absolute;top:30px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:0}
.company .marketing .ratings .plans .rank .content:before{left:-10px;border-right:10px solid #e2e2e2}
.company .marketing .ratings .plans .rank .content:after{left:-8px;border-right:10px solid #fff}
.company .marketing .ratings .plans .rank.color1 .head{border:3px solid #c6edfb}
.company .marketing .ratings .plans .rank.color2 .head{border:3px solid #96def6}
.company .marketing .ratings .plans .rank.color3 .head{border:3px solid #6ed4f5}
.company .marketing .ratings .plans .rank.color4 .head{border:3px solid #59d0f6}
.company .marketing .ratings .plans .rank.color5 .head{border:3px solid #00b6f0}
.company .marketing .benefit section + section{margin-top:20px}
.company .marketing .benefit section .bullet{margin-top:5px}
.company .marketing .benefit .table tbody td{text-align:center}
.company .marketing .benefit .board .list li .content{padding:15px;font-size:13px;color:#333}
.company .marketing .benefit .board .list li .content .box.primary{margin-top:15px;padding:12px 14px;font-size:12px}
.company .marketing .promotion section{margin-top:25px}
.company .marketing .promotion .table{margin-top:5px}
.company .marketing .promotion .table tbody th,
.company .marketing .promotion .table tbody td{padding:10px}
.company .marketing .promotion .box.default{margin-top:15px;padding:15px}
.company .marketing .promotion .box.default .dash li{margin-top:4px;font-size:13px;color:#333}
.company .seminars .body{padding-top:30px}
.company .seminars .body .summary{margin-top:15px}
.company .seminars .body section{margin:25px 0 30px}
.company .seminars .body section .text17{margin-bottom:10px}
.company .seminars .body section .box.primary{margin:12px 0;padding:10px;font-size:13px}
.company .seminars .body section .bullet{margin-bottom:5px}
.company .seminars .body section .color1{color:#59b2c2}
.company .seminars .body section .color2{color:#f9993b}
.company .seminars .body section .color3{color:#5bc28d}
.company .seminars .body section .color4{color:#8781bd}
.company .brand .body{position:relative}
.company .brand .body section{margin:10px 0 30px}
.company .brand .body section ul li{position:relative;margin-top:5px;padding-left:9px;font-size:12px;color:#333}
.company .brand .body section ul li:after{content:'';display:block;width:3px;height:3px;position:absolute;left:0;top:7px;background-color:#707780}
.company .brand .body section .image{margin-top:15px}
.company .brand .marks{position:absolute;right:15px;top:5px;font-size:11px}
.company .brand .marks > span{position:relative;padding-left:10px;margin-left:3px}
.company .brand .marks span:first-child:after{content:none}
.company .brand .marks span:after{content:'';display:inline-block;position:absolute;left:0;top:4px;height:9px;border-left:1px solid #e2e2e2}
.company .brand .mark{display:inline-block;width:8px;height:8px;border-radius:50%;font:0/0 a;box-sizing:border-box;vertical-align:top;-webkit-transform:translateY(50%);transform:translateY(50%)}
.company .brand .mark.orange{background-color:#f9993b}
.company .brand .mark.green{background-color:#a1b404}
.company .brand .mark.violet{background-color:#8958fe}
.company .brand .consTit{padding:10px;font-size:14px}
.company .brand .body section dl{margin-top:16px;line-height:20px;color:#333}
.company .brand .body section dl dt{float:left;display:inline-block;margin-top:2px;font:0/0 a;text-align:center;width:28px;height:26px;background-image:url('/kr/m/static/images/common/icon_brand.png');background-repeat:no-repeat;background-size:250px auto;pointer-events:none}
.company .brand .body section dl dd{margin-left:34px;font-size:14px}
.company .brand .body section dl dd p:first-child{font-weight:bold;font-size:16px}
.company .brand .body section dl dt.health{background-position:0 0}
.company .brand .body section dl dt.skincare{background-position:-30px 0}
.company .brand .body section dl dt.makeup{background-position:-60px 0}
.company .brand .body section dl dt.hair{background-position:-90px 0}
.company .brand .body section dl dt.living{background-position:-120px 0}
.company .brand .body section dl dt.food{background-position:-150px 0}
.company .brand .body section dl dt.fashion{background-position:-180px 0}
.company .slider .controls button{-webkit-transform:translateZ(0);transform:translateZ(0)}