body{word-break:keep-all;} /* 서브페이지 키비쥬얼 */ #SUB_KEYVISUAL .gu_sub_top .kv_img_area {background-image: url('../../../../img/company/brand/KV_company_brand.jpg')} /* 공통 */ #BRAND_IDENTITY .gu_tab_depth4 ul li {min-width:50%} #BRAND_IDENTITY .gu_tab_depth4.mobile ul li {min-width:50% !important} #BRAND_IDENTITY .BANNER {position: relative; min-height: 340px; margin-top:160px;width:100vw;min-width:100vw;max-width:100vw;left:50%;transform:translateX(-50%);margin-bottom: -160px;} #BRAND_IDENTITY .BANNER .inner {max-width:960px;margin:0 auto; padding-top:86px;} #BRAND_IDENTITY .BANNER .inner .gu_box_sub_title {color:#fff;} #BRAND_IDENTITY .BANNER .inner .gu_btn_area {margin-top:40px;} #BRAND_IDENTITY .BANNER .gu_btn_area .gu_btn{border:none;} .gu_content .gu_sub_title.top_copy{margin-bottom:120px;} /* 가치제안 */ #IDENTITY_VALUE .gu_box_title{margin-bottom:30px; 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 .top .img img {width:50%;} #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;} #IDENTITY_VALUE .gu_grid .business_group_contents_area{margin-top:80px; display:inline-block;} #IDENTITY_VALUE .gu_grid .business_group_contents_area:first-child{margin-bottom:100px;} #IDENTITY_VALUE .gu_grid .business_group_contents_area li{background-color:#e0edf0; 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: 0px; height: 0px; border-right: 28px solid transparent; border-left: 28px solid transparent; border-top: 50px solid #e0edf0; 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:last-child {margin-bottom:0;} #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/identity/value/double_quotation.png') no-repeat center / contain;} #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/identity/value/double_quotation.png') no-repeat center / contain; transform: rotate(180deg);} #IDENTITY_VALUE .gu_grid .business_group_contents_area:nth-of-type(1) li:last-child{margin-bottom:100px} /* 브랜드 슬로건 */ #IDENTITY_SLOGAN h2.gu_title.ir_text {padding-bottom:0;} #IDENTITY_SLOGAN .slogan_title {text-align:center; margin-bottom:100px;} #IDENTITY_SLOGAN .slogan_title img{width:672px;max-width:80%;} #IDENTITY_SLOGAN .slogan_representative {margin-top:100px;} #IDENTITY_SLOGAN .BANNER {background: url(../../../../img/company/brand/identity/slogan/banner_slogan.png) no-repeat 50% 50% / cover; } /* CI */ #IDENTITY_CI .gu_line {margin:60px auto;} #IDENTITY_CI .gu_sub_title {text-align:left;} #IDENTITY_CI .gu_btn_down {margin:60px 0; font-size:0; text-align:center;} #IDENTITY_CI .gu_btn_down a {margin-right:40px;} #IDENTITY_CI ul {font-size:0;} #IDENTITY_CI ul li {margin-bottom:20px; overflow:hidden; position:relative; padding:20px 0;} #IDENTITY_CI ul li:first-child {padding-top: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% - 346px); padding-right:85px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; position:absolute; left:0; top:50%; transform:translateY(-50%);} #IDENTITY_CI ul li > div.text_area .gu_btn_down {margin:25px 0 0; text-align:left;} #IDENTITY_CI ul li > div.img_area {width:346px; float:right;} #IDENTITY_CI ul li .gu_box_title {margin-bottom:20px;} #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{padding-top:40px;} #IDENTITY_CI .BANNER {background: url(../../../../img/company/brand/identity/ci/banner_ci.png) no-repeat 50% 50% / cover; } #IDENTITY_CI .gu_grid .ci_type_box {width: 100%;height: 320px; text-align: center;border: solid 1px #f0f0f0;} /* ================================== Tablet css ================================== */ @media all and (max-width: 1080px) { #BRAND_IDENTITY .BANNER {min-height: 225px;margin-top:70px; margin-bottom:-100px;} #BRAND_IDENTITY .BANNER .inner {padding:57px 50px 0;} #BRAND_IDENTITY .BANNER .inner img {width:180px; height:36px;} #BRAND_IDENTITY .BANNER .inner .gu_btn_area {margin-top:20px;} #BRAND_IDENTITY .BANNER .inner .gu_btn_area .gu_btn.btn_white {border-color:#fff;} #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 ul li > div.text_area .gu_btn_down {margin:20px 0 0;;} #IDENTITY_CI .gu_title + .gu_text {margin-bottom:40px;} #IDENTITY_CI .gu_btn_down {margin-top:20px; padding:14px 20px;} #IDENTITY_CI .gu_btn_down a {margin-right:20px;} #IDENTITY_CI .gu_btn_area .gu_btn {margin-right:15px;} #BRAND_IDENTITY .gu_content .gu_sub_title br{display:none;} #BRAND_IDENTITY .gu_content .gu_sub_title.top_copy{margin-bottom:80px;} #IDENTITY_SLOGAN .slogan_title {margin-bottom: 50px;} #IDENTITY_VALUE .gu_grid_box li {width:calc(50% - 8px); 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:0px;} #IDENTITY_VALUE .gu_grid_box li .top .img {margin: 13px 0 43px;} #IDENTITY_VALUE .gu_grid_box li .bottom {height:141px;} #IDENTITY_VALUE .gu_grid .business_group_contents_area {margin-top: 50px;} #IDENTITY_VALUE .gu_grid .business_group_contents_area:first-child{margin-bottom:50px;} } /* ================================== 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;} #BRAND_IDENTITY .BANNER .inner {padding:57px 25px;} #IDENTITY_CI ul li{position:static;} #IDENTITY_CI ul li > div.text_area {width:100%; padding-right:0; position:static; transform:none;} #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:nth-of-type(2) {margin-top: 20px;} #IDENTITY_CI .gu_grid .ci_type {padding-top: 20px;} #IDENTITY_CI ul li .gu_box_title {margin: 30px 0 14px;} #IDENTITY_CI .gu_btn_down{margin-bottom:40px; padding:14px 0;} #IDENTITY_SLOGAN .slogan_title {margin-bottom: 60px;} #IDENTITY_VALUE .gu_grid_box li {width:100%; margin-right: 0px; float:none;} #IDENTITY_VALUE .gu_grid_box li:nth-child(3n) {margin-right:0px;} #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 li{padding:40px; border-radius: 60px; margin-bottom:15px;} #IDENTITY_VALUE .gu_grid .business_group_contents_area:nth-of-type(1) 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;} #IDENTITY_CI .gu_grid .ci_type_box {height: inherit;} } @media all and (max-width: 375px) { #BRAND_IDENTITY .BANNER .gu_btn_area .gu_btn:first-child {margin-bottom:10px;} }