/* 사회공헌 가치소개 */
#wrap #container.csv .contents_area .section_logo {text-align:center;}
#wrap #container.csv .contents_area .section_logo .logo_box {display:flex; align-items: center; justify-content: center; width:100%; height:325px; background:#f7f7f7}
#wrap #container.csv .contents_area .section_logo .btn_download {position:relative; display:inline-block; min-width:296px; height:50px; line-height:48px;letter-spacing: -0.02em;font-size:15px; margin:40px auto 0; border-radius:50px; border:1px solid #999; padding: 0 60px 0 30px;}
#wrap #container.csv .contents_area .section_logo .btn_download:after {content:''; position:absolute; right:0; top:0; display:block; width:40px; height:100%; background: url('/static/img/csv/icon_download.png') left center no-repeat;}

#wrap #container.csv .contents_area .section_video {position:relative; margin-top:140px}
#wrap #container.csv .contents_area .section_video .tit {color:#333; font-size:40px;line-height: 50px;letter-spacing: -0.065em; padding:90px 100px 328px; background:#f7f7f7}
#wrap #container.csv .contents_area .section_video .video_box {position:relative; margin:-293px 100px 0; padding-top:46%; box-shadow:0px 15px 20px 10px rgba(0,0,0,0.1)}
#wrap #container.csv .contents_area .section_video .video_box iframe {position:absolute; left:0; top:0; width:100%; height:100%}

#wrap #container.csv .contents_area .section_value {margin-top:150px}
#wrap #container.csv .contents_area .section_value .tit {color:#333; font-family:'NotoSansB'; font-size:32px;letter-spacing: -0.065em;text-align:center;line-height: 50px;}
#wrap #container.csv .contents_area .section_value .sub {color:#303030;  font-size:20px;letter-spacing: -0.02em;line-height: 30px;text-align:center; margin-top:26px}
#wrap #container.csv .contents_area .section_value .value_list .top_value {position:relative; display:flex; margin-top:76px; margin-left:-22px; padding-bottom:112px;}
#wrap #container.csv .contents_area .section_value .value_list .top_value::after {position:absolute; left:50%; bottom:0; content:''; display:block; width:13px; height:46px; margin-left:4px; background:url('/static/img/csv/icon_arrow.jpg') no-repeat}
#wrap #container.csv .contents_area .section_value .value_list .top_value li {position:relative; width:calc(16.66% - 22px); margin-left:22px}
#wrap #container.csv .contents_area .section_value .value_list .top_value li img {width:100%}
#wrap #container.csv .contents_area .section_value .value_list .top_value li:first-child::before,
#wrap #container.csv .contents_area .section_value .value_list .top_value li:last-child::before {position:absolute; left:50%; bottom:-67px; content:''; display:block; width:1px; height:42px; background:#dadada}
#wrap #container.csv .contents_area .section_value .value_list .top_value li::after {z-index:11; position:absolute; left:50%; bottom:-67px; content:''; display:block; width:calc(100% + 22px); height:1px; background:#dadada}
#wrap #container.csv .contents_area .section_value .value_list .top_value li:last-child::after {display:none}

#wrap #container.csv .contents_area .section_value .value_list .bottom_value {position:relative; display:flex; padding-top:87px; margin-left:-40px}
#wrap #container.csv .contents_area .section_value .value_list .bottom_value li {position:relative; width:25%; text-align:center; padding:0 20px 40px; margin-left:40px; box-shadow:0px 30px 40px 5px rgba(0,0,0,0.1)}
#wrap #container.csv .contents_area .section_value .value_list .bottom_value li img {width:100%}
#wrap #container.csv .contents_area .section_value .value_list .bottom_value li dl dt {font-family:'NotoSansM'; font-size:18px;line-height: 28px;letter-spacing: -0.03em;}
#wrap #container.csv .contents_area .section_value .value_list .bottom_value li dl dd {font-family:'NotoSansL'; font-size:18px;letter-spacing: -0.06em;line-height: 28px;margin-top:20px}
#wrap #container.csv .contents_area .section_value .value_list .bottom_value li::before {position:absolute; left:50%; top:-87px; content:''; display:block; width:13px; height:46px; margin-left:-7px; background:url('/static/img/csv/icon_arrow.jpg') no-repeat}
#wrap #container.csv .contents_area .section_value .value_list .bottom_value li::after {z-index:11; position:absolute; left:50%; top:-87px; content:''; display:block; width:calc(100% + 40px); height:1px; background:#dadada}
#wrap #container.csv .contents_area .section_value .value_list .bottom_value li:last-child::after {display:none}

/* 연혁 */
#wrap #container.csv .contents_area .tab_menu {display:flex;}
#wrap #container.csv .contents_area .tab_menu li {width:33.3%}
#wrap #container.csv .contents_area .tab_menu li a {display:block; width:100%; height:80px; font-size:17px;letter-spacing: -0.03em;text-align:center; padding:26px 10px 0; border:1px solid #dadada; border-right:0}
#wrap #container.csv .contents_area .tab_menu li:last-child a {border-right:1px solid #dadada}
#wrap #container.csv .contents_area .tab_menu li a.on {color:#fff}
#wrap #container.csv .contents_area .tab_menu li:nth-child(1) a.on {background:#e60013}
#wrap #container.csv .contents_area .tab_menu li:nth-child(2) a.on {background:#f37130}
#wrap #container.csv .contents_area .tab_menu li:nth-child(3) a.on {background:#56b87e}

#wrap #container.csv .contents_area .tab_contents {display:none}
#wrap #container.csv .contents_area .tab_contents#tab1 {display: block;}

#wrap #container.csv .contents_area .history_tit {color:#333; font-size:40px;line-height: 50px;letter-spacing: -0.065em; padding:70px 0 80px}
#wrap #container.csv .contents_area .history_list > li {display:flex; padding:31px 10px 31px 15.25%}
#wrap #container.csv .contents_area .history_list > li:nth-child(odd) {background:#f7f7f7}
#wrap #container.csv .contents_area .history_list > li .year {width:212px; min-width:212px; color:#333; font-family:'NotoSansB'; font-size:40px; line-height:60px}
#wrap #container.csv .contents_area .history_list > li .month_list > li {display:flex}
#wrap #container.csv .contents_area .history_list > li .month_list > li .month {width:96px; min-width:96px; color:#333; font-family:'NotoSansB'; font-size:18px;padding-top: 12px;}
#wrap.en #container.csv .contents_area .history_list > li .month_list > li .month {width: 70px;min-width: 70px;}
#wrap #container.csv .contents_area .history_list > li .month_list > li .txt {color:#666; font-size:18px;line-height: 50px;letter-spacing: -0.065em;}

@media all and (max-width:1023px) {
  /* 사회공헌 가치소개 */
  #wrap #container.csv .contents_area .section_logo .logo_box {height:45.139vw}
  #wrap #container.csv .contents_area .section_logo .logo_box img {width:43.889vw}

  #wrap #container.csv .contents_area .section_logo .btn_download {width: 57.78vw;min-width: auto;height:8.889vw;line-height:8.611vw; font-size:3.056vw; margin:5.556vw auto 0; border-radius:8.889vw; padding-left:4.167vw;padding: 0 5.87vw 0 2.93vw;}
  #wrap #container.csv .contents_area .section_logo .btn_download:after {content:'';width: 1.94vw;height: 2.92vw;background: url('/static/img/csv/icon_download.png') no-repeat;background-size: 100% auto;top: 2.69vw;right: 3.78vw;}
  #wrap.en #container.csv .contents_area .section_logo .btn_download:after {content:'';top: 3.09vw;}
  #wrap.en #container.csv .contents_area .section_logo .btn_download {line-height: 1.3;padding-top: 0.5vw;height: 9.59vw;}

  #wrap #container.csv .contents_area .section_video {margin-top:11.944vw}
  #wrap #container.csv .contents_area .section_video .tit {font-size: 5.556vw; line-height: 7.222vw; letter-spacing: -0.045em; padding: 12.5vw 6.667vw 31.25vw;}
  #wrap #container.csv .contents_area .section_video .video_box {margin: -25vw 6.667vw 0; padding-top: 46%;box-shadow: 0vw 2.083vw 2.778vw 1.389vw rgb(0 0 0 / 10%);}
  #wrap #container.csv .contents_area .section_value {margin-top:23.194vw}
  #wrap #container.csv .contents_area .section_value .tit {font-size:5.556vw; padding:0 6.667vw}
  #wrap #container.csv .contents_area .section_value .sub {font-size:3.333vw; margin-top:3.611vw; padding:0 6.667vw}
  #wrap #container.csv .contents_area .section_value .value_list {padding:0 9.167vw}
  #wrap #container.csv .contents_area .section_value .value_list .top_value {flex-wrap: wrap; position:relative; display:flex; margin-top:5.833vw; margin-left:-3.056vw; padding-bottom:15.139vw;}
  #wrap #container.csv .contents_area .section_value .value_list .top_value::after {overflow:hidden; width:1.806vw; height:5.833vw; margin-left:0.694vw; background-position:0 100%; background-size:100% auto}
  #wrap #container.csv .contents_area .section_value .value_list .top_value li {width:calc(33.3%  - 3.056vw); margin-top:3.056vw; margin-left:3.056vw}
  #wrap #container.csv .contents_area .section_value .value_list .top_value li:first-child::before {display:none}
  #wrap #container.csv .contents_area .section_value .value_list .top_value li:nth-child(4)::before,
  #wrap #container.csv .contents_area .section_value .value_list .top_value li:last-child::before {position:absolute; left:50%; bottom:-9.306vw; content:''; display:block; width:0.139vw; height:5.833vw; background:#dadada}
  #wrap #container.csv .contents_area .section_value .value_list .top_value li::after {z-index:11; position:absolute; left:50%; bottom:-9.306vw; content:''; display:block; width:calc(100% + 3.3vw); height:0.139vw; background:#dadada}
  #wrap #container.csv .contents_area .section_value .value_list .top_value li:nth-child(1)::after,
  #wrap #container.csv .contents_area .section_value .value_list .top_value li:nth-child(2)::after,
  #wrap #container.csv .contents_area .section_value .value_list .top_value li:nth-child(3)::after{display:none}

  #wrap #container.csv .contents_area .section_value .value_list .bottom_value {flex-wrap: wrap; padding-top:8.889vw; margin-left:-5.556vw}
  #wrap #container.csv .contents_area .section_value .value_list .bottom_value li::after {z-index:11; position:absolute; left:50%; top:-12.083vw; content:''; display:block; width:calc(100% + 5.556vw); height:0.139vw; background:#dadada}
  #wrap #container.csv .contents_area .section_value .value_list .bottom_value li {width:calc(50% - 5.556vw); padding: 0 2.778vw 5.556vw; margin-bottom:5.556vw; margin-left: 5.556vw; box-shadow: 0vw 2.5vw 4.167vw 0.694vw rgb(0 0 0 / 10%);}
  #wrap #container.csv .contents_area .section_value .value_list .bottom_value li::before {display:none}
  #wrap #container.csv .contents_area .section_value .value_list .bottom_value li:nth-child(1)::before,
  #wrap #container.csv .contents_area .section_value .value_list .bottom_value li:nth-child(2)::before {overflow:hidden; top:-8.889vw; display:block; width:1.806vw; height:5.833vw; margin-left: -0.972vw; background-position:0 100%; background-size:100% auto}
  #wrap #container.csv .contents_area .section_value .value_list .bottom_value li::after {display:none; top:-8.889vw}
  #wrap #container.csv .contents_area .section_value .value_list .bottom_value li:nth-child(1)::after {display:block}
  #wrap #container.csv .contents_area .section_value .value_list .bottom_value li dl dt {font-family:'NotoSansM'; font-size:2.5vw}
  #wrap #container.csv .contents_area .section_value .value_list .bottom_value li dl dd {font-family:'NotoSansL'; font-size:2.5vw; letter-spacing: -0.04em; margin-top:2.778vw}

  /* 연혁 */
  #wrap #container.csv .contents_area .sub {color:#333; font-size:3.333vw; line-height:5.278vw; text-align:center; padding:0 6.667vw}
  #wrap #container.csv .contents_area .tab_menu {position:relative; display: block; margin:0 6.667vw; margin-top:13.333vw}
  #wrap #container.csv .contents_area .tab_menu li {width:100%}
  #wrap #container.csv .contents_area .tab_menu li a {display:none; height:11.111vw; font-size:3.056vw; text-align:left; border: 0; padding:3.056vw 8.333vw 0 5.278vw}
  #wrap #container.csv .contents_area .tab_menu li a.on {display:block;}
  #wrap #container.csv .contents_area .tab_menu::after {content:''; position:absolute; right:5.417vw; top:3.472vw; display:block; width:2.361vw; height:2.361vw; border-top:0.278vw solid #fff; border-right: 0.278vw solid #fff; transform: rotate(135deg);}
  #wrap #container.csv .contents_area .tab_menu.open::after {top:4.861vw; border-color:#070707; transform: rotate(-45deg);}
  #wrap #container.csv .contents_area .tab_menu.open {padding-bottom:3.611vw; border:0.139vw solid #9fa5b7}
  #wrap #container.csv .contents_area .tab_menu.open li a {display:block; height:auto;}
  #wrap #container.csv .contents_area .tab_menu.open li a.on {background:none}
  #wrap #container.csv .contents_area .tab_menu.open li:nth-child(1) a.on {color:#e60013}
  #wrap #container.csv .contents_area .tab_menu.open li:nth-child(2) a.on {color:#f37130}
  #wrap #container.csv .contents_area .tab_menu.open li:nth-child(3) a.on {color:#56b87e}
  #wrap #container.csv .contents_area .tab_menu li:last-child a{border:0}
  #wrap #container.csv .contents_area .history_tit {font-size:5.556vw; line-height:7.222vw; letter-spacing: -0.045em; padding:8.333vw 6.667vw 11.667vw}
  #wrap #container.csv .contents_area .history_list > li {display:block; padding:7.361vw 11.111vw}
  #wrap #container.csv .contents_area .history_list > li .year {width:auto; min-width:auto; font-size: 5.556vw; line-height:7.222vw}
  #wrap #container.csv .contents_area .history_list > li .month_list > li .month {width:10.694vw; min-width:10.694vw; font-size:3.333vw; padding-top:2.778vw;}
  #wrap.en #container.csv .contents_area .history_list > li .month_list > li .month {width: 9vw;min-width: 9vw;}
  #wrap #container.csv .contents_area .history_list > li .month_list > li .txt {font-size:3.333vw; line-height: 7.222vw; letter-spacing: -0.045em; padding-top:1.806vw}
  #wrap #container.csv .contents_area .history_list > li .month_list > li .txt li {position:relative; padding-left:2.5vw}
  #wrap #container.csv .contents_area .history_list > li .month_list > li .txt li::before {content:''; position:absolute; left:0; top:3.472vw; display:block; width:0.556vw; height:0.556vw; border-radius:100%; background:#666}
}