/* 
 2021 플래시 중단에 따라 기존 플래시 영역을 html로 작업하면서 만든 css 파일입니다. 
 해당 design2021 폴더는 21.02.15 이후 제작한 
 css 및 js, 기존 플래시를 html로 변경한 파일이 들어가 있습니다.
*/
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

body.b_top {margin-top:1px;border-top:6px solid #eee}
a {display:inline-block;transition:0.25s;text-decoration:none !important}
a:hover {text-decoration:none !important}
.font2021 {font-family: 'Noto Sans KR', sans-serif;font-size:12.5px;line-height:19px;font-weight:500;color:#999}
.font2021 ul, 
.font2021 li {margin:0;padding:0;list-style:none}
.inner {width:980px;margin:0 auto;position:relative}
.inner:after {display:block;clear:both;content:".";visibility:hidden;height:0}
.inner_wrap {display:inline-block;float:left;width:866px}
.inner_wrap:after {display:block;clear:both;content:".";visibility:hidden;height:0}
.clearfix:after {display:block;clear:both;content:".";visibility:hidden;height:0}
.clearfix {display:block}

.left_menu {display:inline-block;float:left;width:176px}
.left_menu a {display:block}
.left_menu h1 {padding:25px 0 10px 0;background:#fff;position:relative;left:-1px}
.left_menu h1 a {}
.left_menu h1 img {}
.left_menu .gnb {height:250px;margin-top:30px;padding-top:20px;background:#fff;position:relative;left:-1px}
.left_menu .gnb li {}
.left_menu .gnb li > a {margin-bottom:4px;font-size:15px;font-weight:600;color:#555}
.left_menu .gnb li.on > a, 
.left_menu .gnb li:hover > a {color:#3a2691}

.left_menu .sub_menu {display:none;margin:9px 0 30px 0}
.left_menu .sub_menu a {margin:1px 0;padding-left:12px;color:#888;font-weight:600;letter-spacing:-0.4px;position:relative}
.left_menu .sub_menu a img {opacity:0;position:absolute;left:3px;top:7px}
.left_menu .sub_menu a.on, 
.left_menu .sub_menu a:hover {color:#3a2691}
.left_menu .sub_menu a.on img, 
.left_menu .sub_menu a:hover img {opacity:1}
.left_menu .banner {margin-top:40px;padding:20px 0 25px 0;background:#fff;position:relative;left:-1px}

.aside {width:80px;height:303px;background:url(/img2021/aside.jpg) left top no-repeat;position:absolute;right:0;top:261px}
.aside a {display:block;height:19px;opacity:0.7}
.aside a:hover {background:rgba(255,255,255,0.45)}
.aside .bt1 {margin-top:85px}
.aside .bt2 {margin-top:1px}
.aside .bt3 {margin-top:1px}
.aside .bt4 {margin-top:1px}
.aside .bt5 {height:65px;margin-top:6px}
.aside .bt6 {height:66px;margin-top:2px}

.footer {width:434px;margin-left:195px;padding:20px 0 18px 0;background:#fff}

/* main */
.main_sec {display:inline-block;width:670px;margin-left:20px;position:relative}
.main_sec .top_menu {width:215px;padding:26px 0 37px 0;text-align:right;background:#fff;position:absolute;right:-1px;top:auto}
.main_sec .top_menu a {margin-right:4px;padding-right:6px;font-size:10px;line-height:10px;color:#999;border-right:1px solid #ccc}
.main_sec .top_menu a:last-child {margin-right:0;padding-right:0;border-right:0}
.main_sec .top_menu a:hover {color:#bbb}

.main_sec .product {display:inline-block;width:434px;padding-top:35px;background:#fff;border-right:1px solid #f2f2f2;vertical-align:top}
.main_sec .product .txt {margin-right:-1px;padding:25px 0 10px 0;text-align:right;background:#fff}
.main_sec .product .bg {height:583px;overflow:hidden}
.main_sec .product .bg.p1 {background:url(/img2021/main_img1.jpg) left top no-repeat}
.main_sec .product .bg.p2 {background:url(/img2021/main_img2.jpg) left top no-repeat}
.main_sec .product .bg.p3 {background:url(/img2021/main_img3.jpg) left top no-repeat}
.main_sec .product .bg.p4 {background:url(/img2021/main_img4.jpg) left top no-repeat}
.main_sec .product .tab {}
.main_sec .product .tab li {display:inline-block;float:left;width:25%;text-align:center}
.main_sec .product .tab li a {display:block;padding:6px 0;font-size:12px;color:#777;border:1px solid #e2e2e2;border-left:0;background:#fff}
.main_sec .product .tab li.show {}
.main_sec .product .tab li.show a {color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.3);border-bottom:0;background:rgba(0,0,0,0.2)}
.main_sec .product .tab li:hover a {color:#222}

.main_sec .content {display:inline-block;width:203px;height:555px;margin:112px 0 0 5px;background:url(/img2021/main_con.jpg) left top no-repeat;position:relative}
.main_sec .content a {width:63px;height:20px}
.main_sec .content a:hover {background:rgba(255,255,255,0.3)}
.main_sec .content .bt1 {position:absolute;left:76px;top:56px}
.main_sec .content .bt2 {position:absolute;right:1px;top:56px}
.main_sec .content .bt3 {position:absolute;left:76px;top:76px}
.main_sec .content .bt4 {position:absolute;right:1px;top:76px}
.main_sec .content .bt5 {width:186px;height:82px;margin:122px 0 0 18px}
.main_sec .content .bt6 {width:186px;height:127px;margin:20px 0 0 18px}
.main_sec .content .bt7 {width:91px;height:74px;position:absolute;left:20px;bottom:85px}
.main_sec .content .bt8 {width:91px;height:74px;position:absolute;right:1px;bottom:85px}
.main_sec .content .bt9 {width:186px;height:63px;margin:141px 0 0 18px}

.main_aside {top:112px !important}
.main_footer {width:434px;margin-left:195px;padding:20px 0 18px 0;background:#fff}
.main_footer ul {margin-bottom:10px}
.main_footer ul li {display:inline-block;margin-right:12px;vertical-align:top}
.main_footer .f_img {display:block}


/* sub */
.sub_sec {display:inline-block;width:670px;margin-left:20px;position:relative}
.sub_sec .top_menu {position:absolute;right:3px;top:18px;z-index:1000}
.sub_sec .top_menu a {margin-right:11px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.4);color:#fff;opacity:0.9}
.sub_sec .top_menu a:hover {opacity:1}

.sub_bg {height:225px;background:url(/img2021/sub_visual1.png) left top no-repeat;position:relative;z-index:1}
.sub_bg .sub_tit {padding-top:25px;background:#fff;;letter-spacing:-0.5px;position:absolute;left:-1px;top:156px}
.sub_bg .sub_tit h2 {margin-bottom:8px;font-size:25px;line-height:25px;color:#444}
.sub_bg .sub_tit p {font-size:11px;line-height:11px}
.sub_bg .sub_tit p span {display:inline-block;margin-right:5px;padding-right:6px;color:#b6b6b6;border-right:1px solid #ddd}
.sub_bg .sub_tit p .now {margin-right:0;padding-right:0;color:#888;border-right:0}

.conArea {margin-bottom:40px;padding:35px 0 25px 0;background:#fff;position:relative;left:-1px}
.img_area {width:585px;height:334px;padding:20px;background:url(/img2021/product_bg.jpg) left top no-repeat}
.img_area img {max-width:100%}
.img_area .img_active {display:inline-block;float:left;width:473px;height:331px}
.img_area .img_active .movie {display:none;width:100%;height:100%}
.img_area .img_tab {display:inline-block;float:left;width:109px;margin-left:1px} 
.img_area .img_tab a {width:108px;height:81px;border:1px solid transparent}
.img_area .img_tab a:hover {opacity:0.75}
.img_area .img_tab a.active {border-color:#ff3300}

.brand_color {padding:10px 20px}
.logo_box {margin:10px 0 22px 0}
.logo_box a {width:190px;height:50px;margin-right:14px;border:1px solid #e8e8e8;vertical-align:top}
.logo_box a:last-child {margin-right:0}
.logo_box a:hover {border-color:#a49ccd}
.logo_box a.active {border-color:#bbb}
.color_box {width:610px}
.color_box .tab {}
.color_box .tab li {display:inline-block;float:left;width:33.33%}
.color_box .tab li a {display:block;padding:7px 0;font-size:11px;font-weight:600;text-align:center;background:#f9f9f9;border-top:1px solid #e2e2e2;border-right:1px solid #e2e2e2;border-bottom:1px solid #a5a5a5}
.color_box .tab li:first-child a {border-left:1px solid #e2e2e2}
.color_box .tab li:hover a {color:#f28933}
.color_box .tab li.show a {color:#f28933;background:#fff;border:1px solid #a5a5a5;border-bottom:1px solid #fff}
.color_box .tab li:first-child.show a {border-left:1px solid #a5a5a5}
.color_img {min-height:210px;margin-top:27px;text-align:center}

.color_box.hidden {}
.color_box.hidden .tab li {width:50%}
.color_box.hidden .tab li:nth-child(2) {display:none}

.sitemap {width:565px;height:370px;margin:18px 0 0 25px;background:url(/img2021/sitemap.jpg) left top no-repeat}
.sitemap > div {display:inline-block;float:left;width:165px;height:180px;margin-right:35px}
.sitemap .sub3 {margin-right:0}
.sitemap a {display:block;height:24px;margin-top:1px}
.sitemap a:nth-child(1) {margin-top:47px}
.sitemap a:hover {background:rgba(255,255,255,0.4)}

.viewCon img {max-width:100%}
.ic_file {vertical-align:bottom}