@charset "utf-8";

/* Mobile */
.menu .menu_gnb .login, .menu .menu_gnb .logout {top: -39px;}
header .head h1 a {background: url(/images/22_support/main/logo.png?test=0) no-repeat 0 0 /100%;width: 135px; height: 42px;}
.foot_info .logo {background: url(/images/22_support/main/footer_logo.png?test=0) no-repeat center;}
header .head h1 a,
.foot_info .logo{width:163px;height:57px;margin: 8px 0 5px 0;}
header .menu_open {height: 70px;top: -8px;}
.foot_info .logo {margin:10px auto;}
.foot_bg{margin:0;}

/*.main_container{margin-top: 104px;}*/
.section{background:url("/images/22_support/main/main_bg.png") no-repeat center top;background-size:cover;padding:60px 30px;}
.section h2{font-size:24px;}
.section h2 span{display:inline-block;font-size:20px;font-weight:300;padding-top:3px;}

.m_txt{line-height:1.2em;padding:20px 0;font-size:14px; font-family: "GongGothic","NotoSans", Dotum, "돋움", sans-serif;}

.main_con{padding:20px 0 0 0;}

.main_con .c_box{background:#fff;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,0.2);margin-bottom:20px;padding:40px 20px;box-sizing:border-box;border: none;}
.main_con .c_box h3{text-align:center;color:#319b52;font-size:20px;padding-bottom:20px;}
.main_con .c_box ul{border-top:solid 1px #d0ded3;}
.main_con .c_box li{border-bottom:solid 1px #d0ded3;}
.main_con .c_box li a{display:block;padding:10px;font-size:14px;}
.main_con .c_box li a i{display:inline-block;float:right;width:14px;height:10px;background:url("/images/22_support/main/arr.png");margin-top:2px;}
.main_con .c_box li a:focus {outline-offset: -3px; outline: 2px dashed #fff;}





/* Tablet */
@media all and (min-width:768px) {
header .head h1 a {width: 163px; height: 49px;background-size: auto;}
.menu .menu_gnb .login, .menu .menu_gnb .logout {top: auto;}
.foot_info .logo{margin: 0 0 10px 0; height:43px;}
.foot_bg{bottom:0}

.section h2{font-size:40px;}
.section h2 span{font-size:30px;padding-top:7px;}

.main_con:after{display:block;content:"";clear:both;}

.main_con .c_box{float:left;width:50%;height:300px;}
.main_con .c_box.odd{margin-right:20px;width:calc(50% - 20px)}
.main_con .c_box ul{height: 185px;overflow-y:scroll}
 
.main_con .c_box li{z-index:1;}
.main_con .c_box li a{position:relative;z-index:1;}
.main_con .c_box li a:hover,
.main_con .c_box li a:focus{color:#fff;padding:10px 20px;}
.main_con .c_box li a:hover i,
.main_con .c_box li a:focus i{background:url("/images/22_support/main/arr.png") no-repeat right center;}
.main_con .c_box li a:hover:before, .main_con .c_box li a:focus:before, .main_con .c_box li a:active:before{display:block;content:"";width:100%;height:37px;background:#319b52;border-radius:0 10px 0 10px;position:absolute;top:0;left:0;z-index:-1;}


  
}

/* Desktop */
@media all and (min-width:1023px) {
header .ct22 { height: 54px; }
header .ct22 .menu, header .ct22 .menu.on {top: 22%;}
 header .menu_gnb::after {top: -7px;height: 66px;}
.menu>div>ul {padding-top: 20px;}
header .menu>div>ul>li, header .menu.on>div>ul>li {padding: 0 11px;}

}

/* Pc */
@media all and (min-width:1400px) {
header .ct22 {height: 62px;}
header .menu, header .menu.on {left: 13%;}
header .ct22 .menu, header .ct22 .menu.on {top: 14%;}
header .ct22 .menu>div>ul>li, header .ct22 .menu.on>div>ul>li {padding:6px 17px;}
.menu>div>ul>li>a, .menu.on>div>ul>li>a {padding: 0 5px;}
header .menu.on .depth_box {top: 67px;}

.section{padding:110px 0;}
.section h2{font-size:55px;}   
.section h2 span{font-size:30px;padding-top:20px;}
.m_txt{padding:40px 0;font-size:16px;}

.main_con{position:relative;}
.main_con:before{display:block;content:"";width:191px;height:129px;background:url("/images/22_support/main/m_ill.png") no-repeat left top;position:absolute;top:-110px;right:200px;}
    
.main_con .c_box{width:calc(20% - 10px);margin-right:10px;}
.main_con .c_box h3{letter-spacing:-1px;}
.main_con .c_box li a:hover,
.main_con .c_box li a:focus{padding:10px;}
.main_con .c_box.odd{margin-right:10px;width:calc(20% - 10px)}
.main_con .c_box.odd.last{margin-right:0;border-radius:10px 30px 30px 10px}
.main_con .c_box.odd.fir{border-radius:30px 10px 10px 30px;}

    
}


/*스크롤바스타일*/
*::-webkit-scrollbar {width:4px;height:4px;} /*스크롤바 사이즈*/
*::-webkit-scrollbar-track {border-radius:5px;background:rgba(255,255,255,0.3)} /*스크롤바 배경*/
*::-webkit-scrollbar-thumb {background:#2e864a;border-radius: 10rem} /* 스크롤 제어박스*/        


/* 번역 */
/* Mobile */
.translated-ltr .m_txt {padding: 20px 0 0;overflow: hidden;  white-space: normal;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 5; -webkit-box-orient: vertical; word-break: keep-all;}
.translated-ltr .main_con .c_box h3 { margin-bottom: 20px; font-size: 17px; overflow: hidden;white-space: normal;text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;  -webkit-box-orient: vertical; word-break: keep-all;}
.translated-ltr .main_con .c_box li {padding: 10px;}
.translated-ltr .main_con .c_box li a { display: block;}
.translated-ltr .main_con .c_box li a i {margin: 5px;}

/* Tablet */
@media all and (min-width:768px) {
.translated-ltr .main_con .c_box h3 {font-size: 17px;}
.translated-ltr .main_con .c_box li {padding: 0;}
.translated-ltr .main_con .c_box li a  { padding: 10px;}
}

/* Desktop */
@media all and (min-width:1023px) {
.translated-ltr .m_container {padding-top:167px;}

.translated-ltr .m_txt {padding: 20px 0;}
.translated-ltr .main_con .c_box h3 { font-size: 20px;}
}

/* Desktop */
@media all and (min-width:1400px) {
.translated-ltr header .ct22 {heightL144px;}
.translated-ltr header .ct22 .menu>div>ul {padding-top:0;}
.translated-ltr .depth_boxcon::before {bottom:-107px;}
.translated-ltr header .menu.on .depth_box {height:340px;}

.translated-ltr .m_container {padding-top:167px;}
.translated-ltr header .ct22 {height:126px;}

.translated-ltr .m_txt { max-width: 70%;}
}