body {word-break:keep-all;} /* 서브페이지 키비쥬얼 */ #SUB_KEYVISUAL .gu_sub_top .kv_img_area {background-image: url('../../../../img/sustainability/fairtrade/KV_sustainability_fairtrade.jpg');} #FAIRTRADE_CP .gu_content .gu_sub_title {text-align:left; margin-bottom:100px;} #FAIRTRADE_CP .gu_tab_depth4 {margin-top:120px;} #FAIRTRADE_CP .gu_tab_depth4 ul li {min-width: calc(100% / 3); width:33.33%;} /* about */ #FAIRTRADE_CP .gu_contents_depth4.about .gu_box_title {margin-bottom:40px;} #FAIRTRADE_CP .gu_contents_depth4.about .box {padding:40px 32px; background-color:#f2f2f2;} #FAIRTRADE_CP .gu_contents_depth4.about .box p {padding-left:24px; position:relative;} #FAIRTRADE_CP .gu_contents_depth4.about .box p:before {position:absolute; left:0; top:0; content:'(1)'; display:inline-block; font-size:16px; line-height:30px;} #FAIRTRADE_CP .gu_contents_depth4.about .box p:nth-child(2):before {content:'(2)';} #FAIRTRADE_CP .gu_contents_depth4.about .box p:nth-child(3):before {content:'(3)';} #FAIRTRADE_CP .gu_contents_depth4.about .box p:nth-child(4):before {content:'(4)';} #FAIRTRADE_CP .gu_contents_depth4.about .box p:nth-child(5):before {content:'(5)';} #FAIRTRADE_CP .gu_contents_depth4.about .box p:nth-child(6):before {content:'(6)';} #FAIRTRADE_CP .gu_contents_depth4.about .box p:nth-child(7):before {content:'(7)';} #FAIRTRADE_CP .gu_contents_depth4.about .gu_diagram {margin:40px auto 100px;} #FAIRTRADE_CP .gu_contents_depth4.about .gu_diagram .circle:last-child {margin-right:0;} #FAIRTRADE_CP .gu_contents_depth4.about .gu_diagram .circle {width:230px; height:230px; margin-right:13px;} /* vision */ #FAIRTRADE_CP .gu_contents_depth4.vision .gu_content {padding:0 36px;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_sub_title {text-align:center;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_simple_grid_box {margin-top:0;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_sub_title_en {margin-bottom:40px;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram {padding:0 36px;margin:40px auto 80px;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram .circle {width:280px; height:280px; margin-right:24px; margin-bottom:24px;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram .circle:nth-child(3), #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram .circle:nth-child(6) {margin-right:0;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram .circle .circle_inner p {width: 50%;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram .circle .circle_inner p span {color:#999;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_simple_grid_box li {width: calc(33.33% - 14px);} /* duty */ #FAIRTRADE_CP .gu_contents_depth4.duty .gu_grid {margin-top:70px;} #FAIRTRADE_CP .gu_contents_depth4.duty .gu_title + .gu_grid {margin-top:0;} #FAIRTRADE_CP .gu_contents_depth4.duty .gu_grid .gu_box_desc {margin-bottom:10px;} #FAIRTRADE_CP .gu_contents_depth4.duty .gu_box_title {margin-bottom:20px;} #FAIRTRADE_CP .gu_contents_depth4.duty .gu_text.text_indent > span:first-child {width:24px; display:inline-block; vertical-align:top;} #FAIRTRADE_CP .gu_contents_depth4.duty .gu_text.text_indent > span:last-child {width:calc(100% - 24px); display:inline-block; vertical-align:top;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.grid3 {font-size:0;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.grid3 .gu_box_sub_title {margin-bottom:10px;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.grid3 > li {display:inline-block; width:33.33%; vertical-align:top;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.grid3 > li span > span {position:relative; padding-left:12px; display:block;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.grid3 > li span > span:before {content:'•'; position:absolute;;left:0;top:0;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.gu_grid_box {margin-top:60px;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.gu_grid_box li {width:calc(33.33% - 16px); margin-right:24px; padding-bottom:0;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.gu_grid_box li:last-child {margin-right:0;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.gu_grid_box .bottom {height:200px;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.gu_grid_box .bottom p {width:84%;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.gu_grid_box .bottom span {display:block; position:relative; padding-left:12px; text-align:left;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.gu_grid_box .bottom span:before {content:'•'; position:absolute;left:0;top:0;} #FAIRTRADE_CP .gu_contents_depth4.duty .gu_text.box {background: #f2f2f2; padding: 40px;} #FAIRTRADE_CP .gu_contents_depth4.duty .gu_text.box p {display:inline-block; vertical-align:top;} #FAIRTRADE_CP .gu_contents_depth4.duty .gu_text.box p span {display: block; position: relative; padding-left: 12px;} #FAIRTRADE_CP .gu_contents_depth4.duty .gu_text.box p span:before {content: '•'; position: absolute; left: 0; top: 0;} /* ================================== Tablet css ================================== */ @media all and (max-width: 1080px) { #FAIRTRADE_CP .gu_tab_depth4 {margin-top:100px;} #FAIRTRADE_CP .gu_content .gu_sub_title {margin-bottom:60px;} #FAIRTRADE_CP .gu_contents_depth4 .gu_diagram {margin:30px auto 60px;} #FAIRTRADE_CP .gu_contents_depth4.about .gu_diagram {margin:30px auto 60px;} #FAIRTRADE_CP .gu_contents_depth4.about .gu_diagram .circle {width:154px; height:154px; margin-right:12px;} #FAIRTRADE_CP .gu_contents_depth4.about .gu_box_title {margin-bottom:20px;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram {padding:0;margin:30px auto 60px;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram .circle {width:202px; height:202px; margin-right:22px;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram .circle:nth-child(3n) {margin-right:0;} #FAIRTRADE_CP .gu_contents_depth4.duty .gu_grid {margin-top:60px;} } /* ================================== Mobile css ================================== */ @media all and (max-width: 766px) { #FAIRTRADE_CP .gu_tab_depth4 {margin-top:70px;} #FAIRTRADE_CP .gu_contents_depth4 .gu_diagram {max-width:280px !important;} #FAIRTRADE_CP .gu_contents_depth4.about .gu_box_title {margin-bottom:15px;} #FAIRTRADE_CP .gu_contents_depth4.about .box {padding:30px 20px;} /* vision */ #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram .circle {margin-right:10px;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram .circle:nth-child(3n) {margin-right:10px;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram .circle:nth-child(2n) {margin-right:0;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_simple_grid_box li {height:80px; margin-right:12px; width:calc(33.33% - 8px);} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_simple_grid_box li:last-child {margin-right: 0;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_simple_grid_box li .gu_box_sub_title {font-size:13px;} #FAIRTRADE_CP .gu_contents_depth4.vision .gu_diagram .circle .circle_inner p {width:87%;} #FAIRTRADE_CP .gu_contents_depth4.duty .gu_grid {margin-top:50px;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.grid3 > li {width:100%;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.grid3 .gu_box_sub_title {margin-top:20px;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.grid3 > li:first-child .gu_box_sub_title {margin-top:0;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.gu_grid_box {margin-top:30px;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.gu_grid_box li {width:100%; padding-bottom:20px;} #FAIRTRADE_CP .gu_contents_depth4.duty ul.gu_grid_box li .bottom {height:140px; padding:30px 20px;} #FAIRTRADE_CP .gu_contents_depth4.duty .gu_text.box {padding:30px 20px;} }