body{word-break:keep-all;} /* 서브페이지 키비쥬얼 */ #SUB_KEYVISUAL .kv_img_box .kv_img_area {background: url('../../../../img/company/brand-communication/KV_company_brand.jpg') no-repeat center/cover;} /* 공통 */ #BRAND_IDENTITY .gu_tab_depth4 ul li {min-width:calc(100% / 2)} #BRAND_IDENTITY{padding-top:100px;} .gu_tab_depth4{margin-bottom:100px;} .gu_content .gu_sub_title.top_copy{font-weight:300; margin-bottom:120px;} .gu_content {position:relative;max-width:960px; width:100%; margin:0 auto;*zoom:1; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} .gu_content:after {display:block;content:"";clear:both;} .gu_content h2.gu_title {font-size:32px; font-weight:700; line-height:46px; color:#222;text-align:center; padding-bottom:55px;} .gu_content h2.gu_title_en {font-size:56px; line-height:70px; color:#222; text-align:center; padding-bottom:55px; font-family: "Plain",sans-serif;font-weight:700;} .gu_content .gu_sub_title {font-size:20px; line-height:34px;color:#222; text-align:center; margin-bottom:55px;} .gu_content .gu_sub_title.gu_desc {margin-top:-50px; text-align:center !important;} .gu_content .gu_sub_title_en {font-size:24px; line-height:40px; color:#222; text-align:center; font-family: "Plain",sans-serif;font-weight:500;} .gu_content .gu_box_title {font-size:20px; line-height:34px;color:#222; font-weight:700; margin-bottom:55px;} .gu_content .gu_text {font-size:16px; line-height:30px; font-weight:300; color:#555;} .gu_content .gu_text_small {font-size:16px; line-height:26px; font-weight:300; letter-spacing:0; color:#555;} .gu_content .gu_box_sub_title {font-size:18px; line-height:28px; color:#222; font-weight:700;} .gu_content .gu_box_desc {font-size:18px; line-height:30px;color:#222} .gu_grid {position:relative;margin-top:120px;} .gu_grid:first-child {margin-top:0;} .gu_grid_box {font-size:0;} .gu_grid_box li {width:calc((100% - 24px)/2); float:left; border-top:2px solid #666666; padding:24px 0 60px; text-align:center;} .gu_grid_box li.left {margin-right:24px;} .gu_grid_box li .top .gu_box_sub_title {padding-bottom:24px; display:block;} .gu_grid_box li .top .img {margin:30px 0 60px;} .gu_grid_box li .bottom {background-color:#f2f2f2; border-top:1px solid #dcdcdc; height:180px; box-sizing:border-box; position:relative;} .gu_grid_box li .bottom p {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width: 70%;} .gu_grid_box:after {content:''; display:block; clear:both;} /* 가치제안 */ #IDENTITY_VALUE .gu_grid .gu_title{display:block; margin-bottom:0; font-weight: 700;} #IDENTITY_VALUE .gu_grid .gu_title span{display:block; font-size:20px;} #IDENTITY_VALUE .gu_box_title{margin-bottom:20px; clear:both;} #IDENTITY_VALUE .gu_grid_box{margin-top:50px;} #IDENTITY_VALUE .gu_grid_box li {width: calc(33.33% - 16px); margin-right:24px;} #IDENTITY_VALUE .gu_grid_box li:nth-child(3n) {margin-right:0;} #IDENTITY_VALUE .gu_grid_box li .top .img {height:82px;} #IDENTITY_VALUE .gu_grid_box li .bottom {height:220px;} #IDENTITY_VALUE .gu_grid_box li .bottom p {width:90%;} #IDENTITY_VALUE .gu_grid:nth-last-of-type(1){margin-top:60px;} #IDENTITY_VALUE .business_contents_text{font-size:16px; line-height:28px; color:#222; font-weight:700; } #IDENTITY_VALUE .gu_grid .business_group_contents_area{margin:80px 0;} #IDENTITY_VALUE .gu_grid .business_group_contents_area li{background-color:#f7d2c1; margin-bottom:30px; display:inline-block; padding: 40px 100px; border-radius: 100px; position:relative;} #IDENTITY_VALUE .gu_grid .business_group_contents_area li:before{ width: 0; height: 0; border-right: 28px solid transparent; border-left: 28px solid transparent; border-top: 50px solid #f7d2c1; border-bottom: 28px solid transparent; position: absolute; left: -15px; content: ''; display: inline-block; transform: rotate(45deg); bottom: -31px; } #IDENTITY_VALUE .gu_grid .business_group_contents_area li:nth-of-type(even){background-color:#f2f2f2; float:right; } #IDENTITY_VALUE .gu_grid .business_group_contents_area li:nth-of-type(even):before{left:inherit; right:-15px; transform: rotate(-45deg); border-top:50px solid #f2f2f2;} #IDENTITY_VALUE .gu_grid .business_group_contents_area li .business_contents_text{position:relative;} #IDENTITY_VALUE .gu_grid .business_group_contents_area li .business_contents_text:before{position:absolute; left:-23px; top:0; content:''; display:inline-block; width:14px; height:12px; background:url('../../../../img/company/brand-communication/brand-identity/value/double_quotation.png') 0 0 no-repeat;} #IDENTITY_VALUE .gu_grid .business_group_contents_area li .business_contents_text:after{position:absolute; right:-23px; bottom:0; content:''; display:inline-block; width:14px; height:12px; background:url('../../../../img/company/brand-communication/brand-identity/value/double_quotation.png') 0 0 no-repeat; transform: rotate(180deg);} #IDENTITY_VALUE .gu_grid .business_group_contents_area li:last-child{margin-bottom:100px;} /* 브랜드 슬로건 */ #IDENTITY_SLOGAN{padding-bottom:160px;} #IDENTITY_SLOGAN h2.gu_title.ir_text {padding-bottom:0;} #IDENTITY_SLOGAN .slogan_title {text-align:center; max-width:600px; margin:0 auto 100px;} #IDENTITY_SLOGAN .slogan_title img{display:inline-block; max-width:100%;} #IDENTITY_SLOGAN .slogan_representative {margin-top:100px;} #IDENTITY_SLOGAN .gu_sub_title{text-align:center;} #IDENTITY_SLOGAN .gu_sub_title span{display:block; margin-bottom:40px; font-size:16px; line-height: 30px; font-weight:300; color:#555;} #IDENTITY_SLOGAN .gu_swiper .swiper-container .direction_area .swiper-pagination{width:100px; text-align:left; padding-right:0; box-sizing:border-box;} #IDENTITY_SLOGAN .gu_swiper .swiper-container .direction_area .swiper-progress{z-index:1;} #IDENTITY_SLOGAN .gu_swiper .swiper-container .swiper-slide .title{font-weight:400 !important} /* CI */ .gu_contents_depth4_area .gu_contents_depth4.ci{padding-bottom:160px;} #IDENTITY_CI .gu_line {margin:60px auto;} #IDENTITY_CI .gu_sub_title {text-align:left;} #IDENTITY_CI .gu_btn_down_box {text-align:center;} #IDENTITY_CI .gu_btn_down{margin:28px 0 0; font-size:16px; text-align:center;} #IDENTITY_CI .gu_btn_down:hover{color:inherit; background:inherit;} #IDENTITY_CI .gu_btn_down span:before{ transition:all 0.3s; -webkit-transition:all 0.3s; } #IDENTITY_CI .gu_btn_down:hover span:before{background-image:url('../../../../img/common/icon/ico_down_orange_box.png');} #IDENTITY_CI .gu_btn_down a {position:relative; font-weight:400;} #IDENTITY_CI .gu_btn_down{padding: 14px 20px;} #IDENTITY_CI .gu_btn_down a:before{position:absolute; display:block; content:''; bottom:-10px; left:0; width:0; height:1px; background:#222; transition:width 0.3s; -webkit-transition:width 0.3s; } #IDENTITY_CI .gu_btn_down:hover a:before{width:100%;} #IDENTITY_CI ul {font-size:0;} #IDENTITY_CI ul li {margin-bottom:60px; overflow:hidden; position:relative;} #IDENTITY_CI ul li:nth-of-type(2) .gu_btn_down{padding:12px 0;} #IDENTITY_CI ul li:last-child {margin-bottom:0;} #IDENTITY_CI ul li > div {display:inline-block; vertical-align:middle; } #IDENTITY_CI ul li > div.text_area {width:calc(100% - 378px); padding-right:120px; letter-spacing:-1px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; position:absolute; left:0; top:0;} #IDENTITY_CI ul li > div.img_area {width:378px; float:right;} #IDENTITY_CI ul li > div.img_area img{width:100%;} #IDENTITY_CI ul li .gu_box_title {margin-bottom:20px; letter-spacing:0;} #IDENTITY_CI .gu_title + .gu_text {margin-bottom:80px;} #IDENTITY_CI .gu_btn_area .gu_btn {margin-right:25px;} #IDENTITY_CI .gu_grid .ci_type_box{width:100%; height:320px; text-align:center; border:solid 1px #f0f0f0;} #IDENTITY_CI .gu_grid .ci_type{padding-top:40px;} /* ================================== Tablet css ================================== */ @media all and (max-width: 1080px) { #BRAND_IDENTITY{padding-top:50px;} #BRAND_IDENTITY .gu_content .gu_sub_title br{display:none;} #BRAND_IDENTITY .gu_content .gu_sub_title.top_copy{margin-bottom:80px;} #BRAND_IDENTITY .gu_tab_depth4 ul li a{line-height:inherit;} #IDENTITY_VALUE .gu_grid_box li {width:calc((100% - 16px)/2); margin-right:16px;} #IDENTITY_VALUE .gu_grid_box li:nth-child(3n) {margin-right:16px;} #IDENTITY_VALUE .gu_grid_box li:nth-child(2n) {margin-right:0;} #IDENTITY_VALUE .gu_grid_box li .top .img {margin: 13px 0 43px;} #IDENTITY_VALUE .gu_grid_box li .bottom {height:141px;} .gu_contents_depth4_area #IDENTITY_VALUE img{width:auto; height:100%; margin:0 auto;} #IDENTITY_SLOGAN .slogan_title img { width: 672px; max-width: 80%; margin:0 auto;} #IDENTITY_CI .gu_line {margin:40px auto;} #IDENTITY_CI ul li {margin-bottom:40px;} #IDENTITY_CI ul li .gu_box_title {margin-bottom:6px;} #IDENTITY_CI ul li > div.text_area {width:calc(100% - 260px); padding-right:70px;} #IDENTITY_CI ul li > div.img_area {width:260px;} #IDENTITY_CI .gu_title + .gu_text {margin-bottom:40px;} #IDENTITY_CI .gu_btn_down {margin-top:20px;} #IDENTITY_CI .gu_btn_area .gu_btn {margin-right:15px;} .gu_content h2.gu_title {font-size:24px; line-height:32px; padding-bottom:45px;} .gu_content h2.gu_title_en {font-size:28px; line-height:38px; padding-bottom:45px;} .gu_content .gu_sub_title {font-size:16px; line-height:26px; margin-bottom:45px;} .gu_content .gu_sub_title.gu_desc {margin-top:-35px;} .gu_content .gu_box_title {font-size:18px; line-height:26px;margin-bottom:45px;} .gu_content .gu_text {font-size:14px; line-height:24px;} .gu_content .gu_text_small {font-size:13px; line-height:22px;} .gu_content .gu_box_sub_title {font-size:16px; line-height:24px;} .gu_content .gu_box_desc {font-size:15px; line-height:25px;} .gu_grid_box li {padding:20px 0 30px;} .gu_grid_box li .top .gu_box_sub_title {padding-bottom:20px;} #IDENTITY_SLOGAN{padding-bottom:120px;} #IDENTITY_SLOGAN .slogan_title {margin-bottom: 40px;} #IDENTITY_SLOGAN .gu_sub_title span{font-size:14px; line-height:24px;} #IDENTITY_CI .gu_btn_down:hover a:before{width:0%;} #IDENTITY_CI .gu_btn_down:hover span:before{background-image:url('../../../../img/common/icon/ico_down_black_box.png');} /* 4뎁스 텝 */ .gu_tab_depth4 {height: 42px; overflow: hidden; margin-bottom:50px;} .gu_tab_depth4:before {bottom:10px;} .gu_tab_depth4 ul {text-align: center; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; box-sizing: border-box; font-size: 0; height: 46px;} .gu_tab_depth4 ul li {display: inline-block; vertical-align: top; line-height: 1; height: 32px;width:auto !important;} .gu_tab_depth4 ul li a:before {bottom: -1px;} .gu_tab_depth4.mobile {height: 32px;} .gu_tab_depth4.mobile:before {bottom:0;} #IDENTITY_VALUE .gu_grid .business_group_contents_area {margin-bottom:20px;} .gu_contents_depth4_area .gu_contents_depth4.ci {padding-bottom:120px;} } /* ================================== Mobile css ================================== */ @media all and (max-width: 766px) { #BRAND_IDENTITY .gu_content .gu_sub_title.top_copy{margin-bottom:60px;} #BRAND_IDENTITY .gu_content .gu_sub_title{margin-bottom:30px;} .gu_content h2.gu_title {padding-bottom:40px;} .gu_content h2.gu_title_en {font-size:28px; line-height:38px; padding-bottom:40px;} .gu_content .gu_sub_title {font-size:16px; line-height:26px; margin-bottom:40px;} .gu_content .gu_sub_title.gu_desc {margin-top:-35px;} .gu_content .gu_box_title {margin-bottom:35px;} .gu_content .gu_text {font-size:14px; line-height:24px;} .gu_content .gu_text_small {font-size:12px; line-height:18px;} .gu_content .gu_box_sub_title {font-size:16px; line-height:24px;} .gu_content .gu_box_desc {font-size:13px; line-height:24px;} .gu_grid{margin-top:80px;} .gu_grid_box li {width:100%;margin-right:0; padding:20px 0;} .gu_grid_box li .top .img {margin:10px 0 45px;} .gu_grid_box li .bottom {height:100% !important; padding:35px 30px;} .gu_grid_box li .bottom p {position:relative; width:100%; left:auto;top:auto;-webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none;} #IDENTITY_CI ul li{position:static; margin-bottom:60px;} #IDENTITY_CI ul li > div.text_area {width:100%; padding-right:0; position:static; transform:unset;} #IDENTITY_CI ul li > div.img_area {width:100%; float:none;} #IDENTITY_CI ul li > div.img_area img {width:100%;} #IDENTITY_CI .gu_grid .ci_type {padding: 20px 0; } #IDENTITY_CI .gu_grid {margin-top: 20px;} #IDENTITY_CI .gu_grid:nth-of-type(1){margin-top:0;} #IDENTITY_CI .gu_grid .ci_type_box{height:inherit;} #IDENTITY_CI ul li .gu_box_title {margin: 30px 0 14px;} #IDENTITY_CI .gu_btn_down{margin-bottom:40px; padding:0;} #IDENTITY_CI ul li:nth-of-type(2) .gu_btn_down{padding:0; margin: 20px 0 0;} #IDENTITY_CI .gu_btn_down a{font-size:12px; margin-right:20px;} #IDENTITY_CI .gu_btn_down:last-child a{margin-right:0;} #IDENTITY_CI .gu_grid:nth-last-of-type(1){margin-top:60px;} #IDENTITY_CI .gu_title + .gu_text {margin-bottom: 30px;} .gu_contents_depth4_area .gu_contents_depth4.ci {padding-bottom: 20px;} #IDENTITY_SLOGAN{padding-bottom:60px;} #IDENTITY_SLOGAN .gu_sub_title span{font-size:14px; line-height:22px;} #IDENTITY_VALUE .gu_grid_box li {width:100%; margin-right: 0; float:none;} #IDENTITY_VALUE .gu_grid_box li:nth-child(3n) {margin-right:0;} #IDENTITY_VALUE .gu_grid_box li .bottom p {width: 100%;} #IDENTITY_VALUE .gu_grid_box li .top .img {margin: 8px 0 32px;} #IDENTITY_VALUE .gu_text br{display:none;} #IDENTITY_VALUE .gu_grid .business_group_contents_area {margin: 50px 0; } #IDENTITY_VALUE .gu_grid .business_group_contents_area li{padding:40px; border-radius: 60px; margin-bottom:15px;} #IDENTITY_VALUE .gu_grid .business_group_contents_area li:last-child {margin-bottom: 50px;} #IDENTITY_VALUE .business_contents_text br{display:none;} #IDENTITY_VALUE .business_contents_text{font-size:13px; line-height:24px;} }