:root {
    --m-color: #0084dd;
    --m-color-transparent: rgba(0, 132, 221, 0.65);
    --m-color-strong: #0669a6;
    --m-error: #d43d60;
    --m-new: #fca604;
    --m-pop: #32c081;
    --m-rec: #fa647d;
    --m-sale:#ec3f3f;
    --m-ing: #00a4a2;
    --m-best: #00a4a2;
    --m-end: #8f8f99;
    --m-ready: #f58604;
}
html {font-size: 16px;}
body, table, th, td, input, select, textarea, div, button, form{color:#333; /*line-height:1.6;*/ font-family: inherit; font-size: inherit;}
.bbs_btn {border: 1px solid #ddd; line-height: 31px; font-size: 14px; padding: 0 12px; box-sizing: border-box; display: inline-block; cursor: pointer;}
.bbs_btn.bg {background: #777; color: #fff; border-color: #777;}
.bbs_chip {border: 1px solid #ddd; line-height: 16px; font-size: 12px; padding: 0 4px; box-sizing: border-box; display: inline-block; border-radius: 4px; margin: 0 4px;}
.bbs_chip.ready {color: var(--m-ready); border-color: var(--m-ready); background: #fff;}
.bbs_chip.ing {color: var(--m-ing); border-color: var(--m-ing); background: #fff;}
.bbs_chip.end {color: var(--m-end); border-color: var(--m-end); background: #f3f3f3;}
.prd_chip {border: 1px solid #ddd; line-height: 11px; font-size: 11px; padding: 1px 4px; box-sizing: border-box; display: inline-block; border-radius: 4px; margin: 0 4px 0 0;}
.prd_chip.new {background: var(--m-new); color: #fff; border-color: var(--m-new);}
.prd_chip.pop {background: var(--m-pop); color: #fff; border-color: var(--m-pop);}
.prd_chip.recom {background: var(--m-rec); color: #fff; border-color: var(--m-rec);}
.prd_chip.sale {background: var(--m-sale); color: #fff; border-color: var(--m-sale);}
.prd_chip.best {background: var(--m-best); color: #fff; border-color: var(--m-best);}

body {min-width: 1200px; width: 100%;}
/*header*/
.header {width: 100%; position: relative;}
/* header */
.top_head {width:100%; height:40px; background:#f2f2f2;}
.top_head .container {height: 100%;}
.top_head .mem_lnk {height: 100%; width: 100%; display: flex; justify-content: flex-end; align-items: center;}
.top_head .mem_lnk a {display:block; font-size:12px;letter-spacing:-0.065rem; color:#666;}
.top_head .mem_lnk a:after {content:''; display:inline-block; width:1px; height:12px; background:#d9d9d9; margin:-2px 8px 0 10px; vertical-align:middle;}
.top_head .mem_lnk li:last-child a:after, .top_head .mem_lnk li:nth-last-child(2) a:after {display:none;}
.top_head .mem_lnk .eng {margin:10px 0 10px 15px;}
.top_head .mem_lnk .eng a {font-weight:500; color:#222; padding:0 10px; border:1px solid #ddd; line-height:18px;}
.top_head .mem_lnk input { width:98px; height: 24px; padding:2px 0 2px 2px; vertical-align:middle; border:1px solid #ddd; border-right:none; font-size:12px; color:#666 }
.top_head .mem_lnk .search {font-size:12px;letter-spacing:-0.065rem; color:#666;}
.top_head .mem_lnk button { vertical-align:middle; font-size:11px;}
.top_head .mem_lnk .search_btn { background:#fff; border:1px solid #ddd;  padding:0px 0 1px; height:24px; width:50px; text-align:center; color:#666;}


.logo_area {width:100%; height:95px; border-bottom:1px solid #eee; box-sizing:border-box;}
.logo_area .container {height:100%; display: flex; justify-content: space-between; align-items: center;}
.logo_area .container .right_box {display: flex; justify-content: flex-end; align-items: center; height: 100%;}
.logo_area .container::after {content: initial;}
.logo_area .main_logo {width:210px; height: 49px; max-width: 300px; flex: none;}
.logo_area .main_logo a {display:block; height:100%; background:url(../img/comm/logo.png) 0 50% no-repeat; text-indent:-9999px;}

.logo_area .nav_bar {width:auto; height:94px; text-align:center; box-sizing:border-box; flex: none; /*margin: 0 70px 0 0;*/}
.logo_area .nav_bar > li {position:relative; display:inline-block; height:100%; vertical-align:top; margin:0 24px;}
.logo_area .nav_bar > li > a { display:block; height:100%; font-size:18px; font-weight:500; line-height:94px; letter-spacing:-0.065rem; color:#000; transition:color 0.24s; -webkit-transition:color 0.24s; -moz-transition:color 0.24s; -ms-transition:color 0.24s; -o-transition:color 0.24s; }
.logo_area .nav_bar > li:hover > a {color:#0084dd;}
.logo_area .nav_bar .depth { position:absolute; top:94px; width:calc(100% + 60px); height:0; text-align:left; box-sizing:border-box; z-index:998; overflow:hidden; transition:height 0.4s, padding 0.4s; -webkit-transition:height 0.4s, padding 0.4s; -moz-transition:height 0.4s, padding 0.4s; -ms-transition:height 0.4s, padding 0.4s; -o-transition:height 0.4s, padding 0.4s; }
.logo_area .nav_bar .depth a {display:block; font-size:15px; font-weight:400; line-height:35px; letter-spacing:-0.065rem; color:#333;}
.logo_area .nav_bar .depth a:hover {color:#0084dd;}

.logo_area .menu_btn {width:25px; height:25px; text-align:right; outline:none; flex: none;}
.logo_area .menu_btn span { float:right; display:block; width:100%; height:2px; background:#000; }
.logo_area .menu_btn span:nth-child(2) { width:75%; margin:6px 0; transition:all 0.2s ease-in-out; -webkit-transition:all 0.2s ease-in-out ; -moz-transition:all 0.2s ease-in-out ; -ms-transition:all 0.2s ease-in-out ; -o-transition:all 0.2s ease-in-out ; }
.logo_area .menu_btn span:nth-child(3) { width:50%; transition:all 0.4s ease-in-out; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; }
.logo_area .menu_btn:hover span:first-child { animation:hamburger 1s infinite ease-in-out alternate; -webkit-animation:hamburger 1s infinite ease-in-out alternate; }
.logo_area .menu_btn:hover span:nth-child(2) { animation:hamburger 1s infinite ease-in-out alternate forwards 0.2s; -webkit-animation:hamburger 1s infinite ease-in-out alternate forwards 0.2s;}
.logo_area .menu_btn:hover span:last-child { animation:hamburger 1s infinite ease-in-out alternate forwards 0.4s; -webkit-animation:hamburger 1s infinite ease-in-out alternate forwards 0.4s;}

@keyframes hamburger {
    0% {
        width:100%;
    }
    50% {
        width:50%;
    }
    100% {
        width:100%;
    }
}

.depth_area { position:absolute; z-index: 990; top:135px; left:0; width:100%; height:0; background:#fff; box-shadow:0 5px 10px -5px rgba(0,0,0,.25); overflow:hidden; transition:height 0.45s; -webkit-transition:height 0.45s; -moz-transition:height 0.45s; -ms-transition:height 0.45s; -o-transition:height 0.45s; }
.all_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:90;}
.all_menu { position:fixed; top:0; right:-100%; width:90%; max-width:530px; height:100%; background:#fff; padding:0 0 0 30px; box-sizing:border-box; box-shadow:0px 0 20px -10px rgba(0,0,0,.8); transition:right 0.45s; z-index:992; -webkit-transition:right 0.45s; -moz-transition:right 0.45s; -ms-transition:right 0.45s; -o-transition:right 0.45s;}
.all_menu .cls_all {position:absolute; top:20px; right:100%; width:24px; height:24px; background:url(../img/comm/cls.png) no-repeat; margin:0 20px 0 0; text-indent:-9999px; outline:none;}
.all_menu .all_head {width:100%; height:85px; border-bottom:1px solid #ddd; box-sizing:border-box;}
.all_menu .all_head .lnk {float:right; width:100%; height:85px; display: flex; justify-content: flex-end; align-items: center;}
.all_menu .all_head .lnk li {position: relative; width: 70px; float: none; flex: none; height: 100%;}
.all_menu .all_head .lnk a {display:block; height:100%; padding:54px 0 0; text-align:center; background:url(../img/comm/util_1.png) 50% 16px no-repeat; font-size:14px; font-weight:500; letter-spacing:-0.065rem; color:#666; box-sizing:border-box;}
.all_menu .all_head .lnk li:hover a {color:#0084dd;}
.all_menu .all_head .lnk li:nth-child(2) a {background:url(../img/comm/util_2.png) 50% 16px no-repeat;}
.all_menu .all_head .lnk li:nth-child(3) a {background:url(../img/comm/top_ico3.png) 50% 16px no-repeat; background-size: auto 25px;}
.all_menu .all_head .lnk li:nth-child(4) a {background:url(../img/comm/top_ico1.png) 50% 16px no-repeat; background-size: auto 25px;}
.all_menu .all_head .lnk li:nth-child(5) a {background:url(../img/comm/top_ico2.png) 50% 20px no-repeat; background-size: auto 22px;}
.all_menu .all_head .lnk li .count {position: absolute;
    top: 18px;
    right: 16px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    color: #fff;
    background: var(--m-color);
    border-radius: 50%;
    margin: -7px 0 0;
    box-sizing: border-box;}

.all_cont {position:relative; height:calc(100% - 85px);}
.all_cont .all_btn {float:left; width:30%;}
.all_cont .all_btn li {position:relative; height:60px; line-height:59px; font-size:16px; font-weight:500; letter-spacing:-0.065rem; color:#000; border-bottom:1px solid #ddd; box-sizing:border-box; cursor:pointer; transition:color 0.25s; -webkit-transition:color 0.25s; -moz-transition:color 0.25s; -ms-transition:color 0.25s; -o-transition:color 0.25s;}
.all_cont .all_btn li:hover a {color:var(--m-color);}
.all_cont .all_btn li.on a {color:var(--m-color);}
.all_cont .all_btn li.on:after {content:''; position: absolute; left:0; bottom:-1px; width:100%; height:2px; background:var(--m-color);}
.all_cont .cont {position:absolute; top:0; left: 30%; width:70%; height:100%; padding:25px 0 0 6%; box-sizing:border-box; background-color: #0093E9;
    background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);}
.all_cont .cont .depth {display:none;}
.all_cont .cont a {position:relative; display:inline-block; font-size:16px; font-weight:500; line-height:45px; letter-spacing:-0.065rem; color:#fff;}
.all_cont .cont a:after { content:''; position:absolute; bottom:6px; left:0; right:0; height:2px; background:#fff; transform:scaleX(0); -webkit-transform:scaleX(0); -moz-transform:scaleX(0); -ms-transform:scaleX(0); -o-transform:scaleX(0); transform-origin:50%; transition:all 0.25s ease-out; -webkit-transition:all 0.25s ease-out; -moz-transition:all 0.25s ease-out; -ms-transition:all 0.25s ease-out; -o-transition:all 0.25s ease-out;}
.all_cont .cont a:hover:after, .all_cont .cont .on a:after  { transform:scaleX(1); -webkit-transform:scaleX(1); -moz-transform:scaleX(1); -ms-transform:scaleX(1); -o-transform:scaleX(1); }


/* footer */
.footer {width:100%; padding:50px 0 60px; background:#fafafa;}
.foot_info {width:100%; padding:0 0 0 200px; background:url(../img/comm/logo_f.png) 0 0 no-repeat; box-sizing:border-box;}
.foot_info .lnk {margin:0 0 20px;}
.foot_info .lnk li {float:left;}
.foot_info .lnk a {display:block; font-size:15px; font-weight:500; line-height:32px; color:#333;}
.foot_info .lnk a:after { content:''; display:inline-block; width:4px; height:4px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; background:#ccc; margin:-2px 8px 0 10px; vertical-align:middle;}
.foot_info .lnk li:last-child a::after {content: initial;}

.foot_info .info {max-width:690px; font-size:14px; line-height:24px; letter-spacing:-0.025rem; color:#999; word-break:keep-all;}
.foot_info .info span {display:inline-block;}
.foot_info .info span:after {content:''; display:inline-block; width:1px; height:11px; background:#ccc; margin:-2px 6px 0 8px; vertical-align:middle;}
.foot_info .info span:nth-child(2):after, .info span:nth-child(3):after, .foot_info .info span:nth-child(6):after, .foot_info .info .copy:after {display:none;}
.foot_info .info .copy {display:block; margin:16px 0 0; letter-spacing:0;}
.foot_info .info span:nth-child(3) {display:block;}

.footer .go_top { position:fixed; bottom:20px; right:20px; width:50px; height:50px; background: var(--m-color-transparent) url(../img/comm/go_top.png) 50% 50% no-repeat; text-indent:-9999px; transition:background 0.25s; -webkit-transition:background 0.25s; -moz-transition:background 0.25s; -ms-transition:background 0.25s; -o-transition:background 0.25s; z-index:10;}
.footer .go_top:hover {background-color: var(--m-color);}

#Cont_Wrap {width: 100%; min-width: 1200px; position: relative;}
.S_container {width:100%; max-width:1200px; min-width:1200px; margin:60px auto; box-sizing:border-box;}
.container {width:100%; max-width:1200px; min-width:1200px; box-sizing:border-box; margin: 0 auto;}

.S_visual {position:relative; width:100%; height:250px; background:url(../img/sub/sub01.png) 50% 50% no-repeat; background-size:cover; text-align:center; padding:60px 0 0; box-sizing:border-box;}
.S_visual h2 {font-size:48px; font-weight:700; letter-spacing:-0.065rem; color:#fff; text-shadow:1px 1px 3px rgba(0,0,0,.45);}
.S_visual h2:after {content:''; display:block; width:40px; height:3px; background:#fff; margin:25px auto 0;}
.S_visual .sub_nav {position:absolute; bottom:0; left:0; right:0; width:100%; max-width:1200px; min-width:1200px; height:60px; background:#fff; margin:0 auto; display: flex; justify-content: center; align-items: center;}
.S_visual .sub_nav li {position:relative; flex: 1;}
.S_visual .sub_nav a { display:block; width:100%; height:100%; line-height:60px; font-size:17px; font-weight:500; letter-spacing:-0.065rem; color:#444; transition:all 0.25s; -webkit-transition:all 0.25s; -moz-transition:all 0.25s; -ms-transition:all 0.25s; -o-transition:all 0.25s; }
.S_visual .sub_nav li:after {content:''; position:absolute; top:50%; right:0; width:1px; height:30px; background:#ddd; margin:-15px 0 0;}
.S_visual .sub_nav li:last-child:after {display:none;}
.S_visual .sub_nav li:hover a {color:var(--m-color);}
.S_visual .sub_nav .on:after {background:var(--m-color);}
.S_visual .sub_nav .on a {background:var(--m-color); color:#fff;}
.S_visual .sub_nav .on:hover a {color:#fff;}
.S_visual .current {display:none;}
.S_visual.S_visual3 {padding: 80px 0 0;}
/*서브메뉴를 사용하지 않는 경우에 padding 조절 해주세요*/
.S_visual.S_visual4 {padding: 80px 0 0;}
/*서브메뉴를 사용하지 않는 경우에 padding 조절 해주세요*/
.S_visual.S_visual7 {padding: 80px 0 0;}
/*서브메뉴를 사용하지 않는 경우에 padding 조절 해주세요*/

.S_ttl {text-align:center; margin:60px 0 50px;}
.S_ttl h2 {font-size:36px; font-weight:700; letter-spacing:-0.065rem; color:#000; margin:0 0 20px;}
.S_ttl .his_bar {text-align:center; display: flex;  justify-content: center; align-items: center;}
.S_ttl .his_bar li {position: relative; height: 20px; display: inline-flex; justify-content: center; align-items: center; padding: 0 20px 0 0; box-sizing: border-box; font-size:14px; font-weight:500; letter-spacing:-0.065rem; line-height:20px; color:#666; vertical-align:middle;}
.S_ttl .his_bar li.home a {display:inline-block; width:14px; height:12px; background:url(../img/sub/home.png) no-repeat; text-indent:-9999px; vertical-align:middle; }
.S_ttl .his_bar li:after {position: absolute; top: 50%; right: 0; transform: translateY(-50%); content:''; display:inline-block; width:5px; height:8px; background:url(../img/sub/arrow.png) no-repeat; vertical-align:middle; margin:0 8px 0 10px;}
.S_ttl .his_bar li:last-child {padding: 0;}
.S_ttl .his_bar li:last-child:after {content: initial;}
.S_ttl h2.com_mem {display: inline-flex; margin: 0 auto 20px; cursor: pointer; align-items: center;}
.S_ttl h2 span.com_dir {position: relative; text-indent: 25px; font-size: 15px; display: inline-block; width:120px; height:42px; line-height:42px; margin-left:10px; border:1px solid var(--m-color); border-radius:35px; box-shadow: 3px 3px 6px rgba(94, 131, 86, .5); transition: all .3s ease-in-out;     background: rgba(94, 131, 86, 1); color: #fff;}
.S_ttl h2 span.com_dir:hover{box-shadow: 3px 3px 12px rgba(94, 131, 86, 1);}
.S_ttl h2 span.com_dir::after{content: ''; background: url(/images/ico/com_dir_ico.png) no-repeat 10px center; background-size: 19px 23px; vertical-align: top; display: block; width: inherit; height: inherit; border-radius: inherit; position: absolute; top: 50%; transform: translateY(-50%); left: 5px;}


/*.quick_wrap {position:fixed; top:0; right:0; width:85px; height:100%; background:#fff; border-left:1px solid #ddd; box-sizing:border-box; z-index: 995; transition:right 0.35s;}*/
/*.quick_wrap.close {right:-85px;}*/

/*.quick_wrap .quick_btn {position:absolute; top:300px; left:0; width:21px; height:40px; background:#fff url(/img/comm/close_ico.png) 50% 50% no-repeat; border-width:1px 0 1px 1px; border-style:solid; border-color:#eee #ddd #eee; margin-left:-21px; text-indent:-9999px; box-sizing:border-box; outline-color:var(--m-color);}*/
/*.quick_wrap.close .quick_btn {background-image:url(/img/comm/open_ico.png);}*/

/*.quick_wrap .inner {padding:30px 10px 0; box-sizing:border-box;}*/
/*.quick_wrap .quick_lnk {margin-bottom:40px;}*/
/*.quick_wrap .quick_lnk li {margin-bottom:30px;}*/
/*.quick_wrap .quick_lnk a {position:relative; display:block; width:100%; padding:45px 0 0; text-align:center; background:url(/img/comm/top_ico1.png) 50% 0 no-repeat; font-size:13px; line-height:15px; letter-spacing:-0.085rem; color:#333; box-sizing:border-box;}*/
/*.quick_wrap .quick_lnk a:hover {color:var(--m-color);}*/
/*.quick_wrap .quick_lnk li:nth-child(2) a {background:url(/img/comm/top_ico2.png) 50% 15% no-repeat;}*/
/*.quick_wrap .quick_lnk li:nth-child(3) a {background:url(/img/comm/top_ico3.png) 50% 0 no-repeat;}*/
/*.quick_wrap .quick_lnk li:nth-child(4) a {background:url(/img/comm/quick_ico4.png) 50% 0 no-repeat;}*/
/*.quick_wrap .quick_lnk .count {position:absolute; top:0; right:8px; width:20px; height:20px; line-height:20px; text-align:center; font-size:11px; font-weight:600; letter-spacing:0; color:#fff; background:var(--m-color); border-radius:50%; margin:-7px 0 0; box-sizing:border-box;}*/

/*.quick_wrap .today {width:100%; border-top:1px solid #eee; padding-top:30px;}*/
/*.quick_wrap .today span {display:block; font-size:14px; line-height:20px; color:#555; text-align:center; margin-bottom:12px;}*/
/*.quick_wrap .today ul {width:61px; margin:0 auto;}*/
/*.quick_wrap .today li {width:61px; height:61px; margin-bottom:5px; box-sizing:border-box;}*/
/*.quick_wrap .today img, .quick_wrap .today li a {display:block; width:100%; height:100%;}*/
/*.quick_wrap .controls_btn {width:61px; margin:10px auto 0;}*/
/*.quick_wrap .controls_btn button {float:left; width:30px; height:25px; border:1px solid #ddd; background:url(/img/comm/prev_ico.png) 50% 50% no-repeat; text-indent:-9999px; box-sizing:border-box;}*/
/*.quick_wrap .controls_btn button.next {border-left:none; background-image:url(/img/comm/next_ico.png);}*/