@charset "UTF-8";

/* **************************************** *
* RESET FILES
* **************************************** */

.mb0 {margin-bottom:0px !important;}
.ptb6 {padding:6px 0;}
.pl10 {padding-left:10px;}
.pl20 {padding-left:20px;}
.pl30 {padding-left:30px;}

#loading {opacity: 0;}

/* **************************************** *
* 고객센터 공통
* **************************************** */
.mobile_menu {display: none;}
.support_wrapper {margin:0 auto;padding:0 20px 0 20px;box-sizing: border-box;}
.support_wrapper .container {display:flex;width:100%;max-width:1400px;margin:0 auto;padding: 0 0 50px 0;gap: 0 50px;flex-wrap: nowrap;align-items: initial;box-sizing: border-box;}

.support_wrapper .location {color:#03a9f4;margin-bottom:14px;font-family:'나눔고딕','NanumSquare',sans-serif;}
.support_wrapper .location > a {color:#03a9f4;font-size:13px;text-decoration:none;}
.support_wrapper .location > a:hover {text-decoration:underline;}
.support_wrapper .location > a:visited {color:#03a9f4;font-size:13px;}
.support_wrapper .location .lochide {display: none;}

.support_wrapper .srchform {display:grid;grid-template-columns: 1fr auto auto;align-items:center;position:relative;max-width:600px;height:54px;padding:0 15px 0 27px;gap:0 10px;border:4px solid #cad9e9;border-radius:30px;margin:30px auto;}
.support_wrapper .srchform input {border:none;width:113%;height:100%;margin-left:-6%;font-weight:600;background-color:transparent;font-size:16px;transform:scale(0.875);font-family:'나눔고딕',sans-serif;text-align:center;}
.support_wrapper .srchform input:focus {outline:none;}
.support_wrapper .srchform input::placeholder {font-size: 16px;text-indent: 8%;color:#000;}
.support_wrapper .srchform .ico_srch {width:20px;aspect-ratio: 1 / 1;background:url(/icon/icon_support_sprite.png) 80% 91%;background-size: 900% auto;}
.support_wrapper .srchform .ico_reset {display:block;width:19px;max-width: 0px;visibility: hidden;aspect-ratio: 1 / 1;padding:0;border:0;cursor:pointer;background:url(/icon/icon_support_sprite.png);background-size: 900% auto;background-position: 80% 61%;}
.support_wrapper .srchform .srchrslt {display:none;flex-direction:column;position:absolute;width:600px;height:400px;background-color:#fff;top:60px;left:-4px;z-index:100;border-radius:8px;box-shadow:0em 0em 2em 0em rgba(0, 0, 0, 0.15);padding:26px 30px 6px 30px;text-align:left;}
.support_wrapper .srchform .srchrslt.on {display: flex;}
.support_wrapper .srchform .srchrslt .highlight,
.support_wrapper .srchform .srchrslt em {color:#03a9f4;font-weight:600;font-style:normal;}
.support_wrapper .srchform .srchrslt .kwtitle {font-size:16px;color:#333;border-bottom:1px solid #dfe8f2;padding-bottom:10px;}
.support_wrapper .srchform .srchrslt a {text-decoration: none;}
.support_wrapper .srchform .srchrslt p {line-height:150%;font-size:13px}

.support_wrapper .srchform .suggestbox {height:100%;overflow-x:hidden;overflow-y:scroll;}
.support_wrapper .srchform .listbox {padding:14px 5px;overflow:hidden;}
.support_wrapper .srchform .listtitle {display:block;margin:0 0 5px 0;font-size:16px;font-weight:600;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;}
.support_wrapper .srchform .listbox .listcont {color:#333333;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;}
.support_wrapper .srchform .nullbox {padding:14px 5px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;height:80%;}
.support_wrapper .srchform .nullbox .cont {padding-top:20px;text-align:center;}
.support_wrapper .srchform .listbox .location a {display: inline-block;max-width: 30%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;vertical-align: middle;}
.support_wrapper .suggestbox .location,
.support_wrapper .suggestbox .location > a,
.support_wrapper .suggestbox .location > a:visited {color:#333333;}

.support_wrapper #contents .tab-panel *,
.support_wrapper #contents .dtlinfo *,
.support_wrapper .blog_view_contents #contents * {font-family: '나눔고딕', sans-serif !important;}
/* **************************************** *
* FAQ & 릴리즈노트
* **************************************** */
.support_wrapper .contents.right {min-width: 0;height:fit-content;flex:1;overflow: hidden;}
.support_wrapper .contents.right > h2,
.support_wrapper #contents > h2 {font-size:30px;font-weight:600;color:#0c1a26;display:block;letter-spacing:-1px;}

.contents.not_data .content_location {display: none;}
.support_wrapper .content_location > a {display: inline-block;max-width: 30%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;vertical-align: middle;}

.support_wrapper .imgarea {margin-bottom:20px;text-align:left;}

.support_wrapper nav {display:flex;width:300px;font-family:'나눔고딕','NanumSquare',sans-serif;font-size:14px;}
.support_wrapper .container > nav > div {position:sticky;width: inherit;min-height:120px;padding:0 10px;overflow-y:auto;scroll-behavior: smooth;}
.support_wrapper nav div {width:100%;font-size:14px;}
.support_wrapper nav div > span {white-space: nowrap;text-overflow: ellipsis; overflow: hidden;word-break: break-all;}
.support_wrapper nav i, .custom_menu_box i {display: inline-block;margin:3px 4px 0 0;cursor:pointer;}
.support_wrapper nav .dth01 > div {display:flex;padding:6px 0;font-size:17px;font-weight:600;}
.support_wrapper nav .dth02 > div {display:flex;padding:6px 0 6px 10px;}
.support_wrapper nav .dth03 > div {display:flex;padding:6px 0 6px 20px;}
.support_wrapper nav .dth04 > div {display:flex;padding:6px 0 6px 43px;}
.support_wrapper nav ul.support_submenu, .custom_menu_box ul.support_submenu {display:none;}
.support_wrapper nav li.show > .support_submenu, .custom_menu_box li.show > ul.support_submenu {display:block;}
.support_wrapper nav .dth01 > div:hover,
.support_wrapper nav .dth02 > div:hover,
.support_wrapper nav .dth03 > div:hover,
.support_wrapper nav .dth04 > div:hover,
.custom_menu_box .dth01 > div:hover,
.custom_menu_box .dth02 > div:hover,
.custom_menu_box .dth03 > div:hover,
.custom_menu_box .dth04 > div:hover {background-color:#f0f6ff;cursor:pointer;}
.support_wrapper nav .selected, .custom_menu_box .selected {background-color:#f0f6ff; font-weight:600;color:#03a9f4;}
.icoshow {border:none;width:12px;height:12px;background:transparent url(/icon/icon_support_sprite.png) no-repeat -147px -49px;}
.icohide {border:none;width:12px;height:12px;background:transparent url(/icon/icon_support_sprite.png) no-repeat -147px -23px;}
.iconon {border:none;width:12px;height:12px;background:transparent url(/icon/icon_support_sprite.png) no-repeat -158px -23px;}

/* 모바일 메뉴 박스 */
.menu_box.custom_menu_box {display: inline-block;overflow-y: scroll;padding-bottom: 100px;scroll-behavior: smooth;}
.custom_menu_box li > div {white-space: nowrap;text-overflow: ellipsis; overflow: hidden;cursor: pointer;border-bottom:1px solid #eaeaea;}
.custom_menu_box .dth01 > div {padding:0 10px 0 5px;}
.custom_menu_box .dth02 > div {padding:0 10px 0 20px;}
.custom_menu_box .dth03 > div {padding:0 10px 0 35px;}
.custom_menu_box .dth04 > div {padding:0 10px 0 60px;}
.custom_menu_box .iconon {width:8px;margin:0;}
.custom_menu_box .blog_menu {display: block;width: 100%;height: 100%;padding: 0 10px;}

.support_wrapper .support_header {display: block;position: relative;text-align:center;padding:20px 0 57px 0;left: 0;right: 0;background-color: #FFFFFF;z-index: 1;}
.support_wrapper .support_header h1 {font-size:48px;font-weight:900;color:#0c1a26;display:block;letter-spacing:-1px;}
.support_wrapper .support_header > div {font-size:18px;padding:6px 0 10px 0;}

.support_wrapper #contents {width: 100%;min-height:500px;font-family: auto;}
.support_wrapper #contents img {max-width:100%!important;height:auto!important;}
.support_wrapper #contents > div {margin-top:50px;padding-top: 80px;border-top: 1px solid #999999;}
.support_wrapper #contents > div:first-child {padding-top:0;border-top:none;}
.support_wrapper #contents > div > h3 {font-size:24px;font-weight:600;color:#0c1a26;display:block;letter-spacing:-1px;}
.support_wrapper #contents .dtlinfo {display:block;font-size: 14px;padding:15px 0 5px 0;line-height:140%;}

.support_wrapper #contents .menu_list {display: block;color: #0c1a26;padding: 10px 0;}
.support_wrapper #contents .dth01,
.support_wrapper #contents .content_location {margin-top:0;}

/* 에디터 스타일 지정 */
.support_wrapper #contents .tab-panel,
.support_wrapper #contents .dtlinfo {width:100%;font-family: auto;}
.support_wrapper #contents .tab-panel *,
.support_wrapper #contents .dtlinfo * {all:revert;}

@supports (all: revert-layer) {
    .support_wrapper #contents .tab-panel *,
    .support_wrapper #contents .dtlinfo * {all:revert-layer;}
}

.support_wrapper #contents .tab-panel *,
.support_wrapper #contents .dtlinfo * {font-family: sans-serif;}

.support_wrapper #contents .tab-panel h1,
.support_wrapper #contents .dtlinfo h1,
.support_wrapper #contents .tab-panel h2,
.support_wrapper #contents .dtlinfo h2,
.support_wrapper #contents .tab-panel h3,
.support_wrapper #contents .dtlinfo h3,
.support_wrapper #contents .dtlinfo span,
.support_wrapper #contents .dtlinfo p,
.support_wrapper #contents .tab-panel span,
.support_wrapper #contents .tab-panel p {line-height: normal;}

.support_wrapper #contents .tab-panel code,
.support_wrapper #contents .dtlinfo code,
.support_wrapper #contents .tab-panel p,
.support_wrapper #contents .dtlinfo p,
.support_wrapper #contents .tab-panel span,
.support_wrapper #contents .dtlinfo span,
.support_wrapper #contents .tab-panel pre,
.support_wrapper #contents .dtlinfo pre {white-space:break-spaces;}

.support_wrapper #contents .tab-panel table ,
.support_wrapper #contents .dtlinfo table {max-width: 100%;table-layout: fixed;}

.tab-panel table,
.tab-panel table tr,
.tab-panel table td {border: none !important;border-collapse: collapse !important;}
.tab-panel table tr {border-top: 1px solid #000 !important;}
.tab-panel table tr:last-child {border-bottom: 1px solid #000 !important;}
.tab-panel table td {border-left: 1px solid #000 !important;}
.tab-panel table td:last-child {border-right: 1px solid #000 !important;}

/* 스크롤바 */
.scrollbar {top:70px;}
.scrollbar::-webkit-scrollbar {width: 6px;}
.scrollbar::-webkit-scrollbar-thumb {background: rgba(120, 120, 120, .4);border-radius: 10px;}
.scrollbar::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0);}

.tabset {max-width:100%;margin-top:20px;font-family:'나눔고딕','NanumSquare',sans-serif;}
.tabset .tab-panel {display: none;padding: 20px 0;border-top: 1px solid #ccc;}

.tabset > input[type="radio"] {position: absolute;left: -200vw;}
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6),
.tabset.is_only_pc .tab-panels > .tab-panel {display: block;}
.tabset.is_only_pc .tab-panels > .tab-panel {padding:0;border:0;}

.tabset > label {position: relative;display: inline-block;padding: 10px 20px 10px;border: 1px solid #ccc;border-bottom: 0;cursor: pointer;font-size:16px; font-weight:600;max-width:180px;width:50%;text-align:center;}
.tabset input:focus-visible + label {outline: 2px solid rgba(0,102,204,1);border-radius: 3px;}   
.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {color: #fff;background:#094c7d;border-color:#094c7d;}
.tabset > input:checked + label {border-color:#094c7d;margin-bottom: -1px;}

/* **************************************** *
* 블로그
* **************************************** */
.blog_type {font-size: 16px;font-weight: 600;padding-bottom: 3px;}
.blog_img {display: flex;align-items: center;justify-content: center;aspect-ratio: 7 / 4;overflow: hidden;}
.blog_img > img {width: 100%;height: 100%;object-fit: cover;object-position: center;}
.blog_title {font: normal 600 28px/130% 'Pretendard Variable', sans-serif;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:keep-all;word-wrap:anywhere;}
#blog_more_btn {width: 10rem;margin: 60px auto;padding: 10px;font-size: 19px;font-weight: 500;border: 1px solid #888;background: #fff;color: #000;cursor: pointer;}
.blog_view_contents #blog_more_btn {color: #FFFFFF;background-color: #03a9f4;border-color: #03a9f4;}
@media (hover: hover) and (pointer: fine) {
    .blog_view_contents #blog_more_btn:hover  {width: 10rem;margin: 60px auto;padding: 10px;font-size: 19px;font-weight: 500;border: 1px solid #888;background: #fff;color: #000;cursor: pointer;}
    #blog_more_btn:hover {color: #FFFFFF;background-color: #03a9f4;border-color: #03a9f4;}
}

.blog_texts span,
.blog_view_header > span{display: block;padding-top: 14px;font-size: 16px;line-height: normal;color: #888;font-weight: normal;}
.blog_view_header > span {font-size: 13px;}

.support_wrapper .container.blog_container {flex-direction: column;}
.support_wrapper .blog_container #blog_contents {display: grid;gap: 60px 20px;grid-template-columns:1fr 1fr 1fr;}
.blog_container .blog_post {display:flex;min-width: 0px;flex-direction: column;gap: 10px;cursor: pointer;color: #000000;}
.blog_container .blog_post .blog_img {max-height: 400px;height: fit-content;}
.blog_container .blog_post .blog_texts .blog_title:hover {color: #03a9f4;text-decoration-line: underline;text-underline-offset: 3px;}
.blog_container .blog_post .blog_texts p {padding-top: 10px;font-size: 21px;line-height: 130%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:keep-all;}

.blog_container .main_blog {display: flex;width: 100%;flex-wrap: wrap;flex-direction: row;grid-column: 1 / 4;}
.blog_container .main_blog .blog_img {flex: 1 1 0;}
.blog_container .main_blog .blog_texts {display: flex;flex: 1 1 0;flex-direction: column;padding: 0 10px;}
.blog_container .main_blog .blog_texts .blog_title {font-size: 40px;}
.blog_container .main_blog .blog_texts p {-webkit-line-clamp:4;}

.blog_view {width: 100%;}
.blog_view .blog_view_header {padding: 0 10px 40px 10px;margin-bottom: 40px;border-bottom: 1px solid #333;}
.blog_view .blog_view_header .blog_title {display:inline;font-weight: 600;font-size: 33px;}

.blog_container #contents {min-height: 0;}
.blog_view_contents #contents {max-width: 760px;margin: 0 auto;}
.blog_view_contents #contents > div {margin: 0;padding: 0;border: 0;}
.blog_view_contents #blog_more_btn {display: block;min-width: 10rem;width: fit-content;margin: 100px auto 0 auto;text-align: center;}
.blog_view_contents #blog_more_btn:hover {width: fit-content;margin: 100px auto 0 auto;}
.blog_view_contents .more_blog_post {margin-top: 80px;border-top: 1px solid #333;}
.blog_view_contents .more_blog_post > p {padding: 60px 0;text-align:center;font: normal 600 30px/130% 'Pretendard Variable', sans-serif;}
.blog_view_contents .more_blog_post > div {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;}
.blog_view_contents .more_blog_post .blog_post {display: flex;width: 100%;flex-wrap: wrap;flex-direction: row;}
.blog_view_contents .more_blog_post .blog_post .blog_img {flex: 1 1 0;}
.blog_view_contents .more_blog_post .blog_post .blog_texts {display: flex;flex: 1 1 0;flex-direction: column;}
.blog_view_contents .more_blog_post .blog_title {font-size: 24px;}

.blog_view_contents #contents * {all:revert;}
@supports (all: revert-layer) {
    .blog_view_contents #contents * {all:revert-layer;}
}

.blog_view_contents #contents * {font-family: sans-serif;}

.blog_view_contents p,
.blog_view_contents strong,
.blog_view_contents pre,
.blog_view_contents span {white-space:break-spaces !important;}
.blog_view_contents table {max-width: 100% !important;height: fit-content !important;border-collapse:collapse !important;table-layout: fixed !important;}
.blog_view_contents table tr {height: fit-content !important;}
.blog_view_contents table tr,
.blog_view_contents table td {border: 1px solid #000 !important;border-spacing: 0 !important;}


/* ******************************************************************************** *
* 가로모드 노트북 (가로 < 1024px)
* ******************************************************************************** */
@media (max-width: 1024px) {
    .support_wrapper .blog_container #blog_contents {grid-template-columns:1fr 1fr;row-gap: 40px;}
    .blog_container .main_blog {grid-column: 1 / 3;}
    .blog_container .main_blog .blog_img,
    .blog_container .main_blog .blog_texts {flex: 1 1 100%;}

    .blog_title {font-size:clamp(19px, 3vw, 28px);}
    .blog_container .blog_post .blog_texts p {font-size:clamp(16px, 3vw, 21px);}
    .blog_container .blog_post:not(.main_blog) .blog_texts .blog_type {font-size: clamp(13px, 3vw, 16px);}

    .blog_container .main_blog .blog_texts {padding: 0;}
    .blog_container .main_blog .blog_texts .blog_title {font-size:clamp(26px, 4vw, 40px);}

    #blog_more_btn,
    .blog_view_contents #blog_more_btn,
    .blog_view_contents #blog_more_btn:hover {font-size: clamp(15px, 3vw, 19px)}

    .blog_view_contents #blog_more_btn,
    .blog_view_contents #blog_more_btn:hover {margin: 80px auto 0 auto;}

    .blog_view .blog_view_header {padding-bottom: 30px;}
    .blog_view .blog_view_header .blog_title {font-size:clamp(26px, 3vw, 33px);}

    .blog_view_contents .more_blog_post {margin-top: 60px;}
    .blog_view_contents .more_blog_post > div {grid-template-columns: 1fr;}
    .blog_view_contents .more_blog_post > p {padding: 40px 0;font-size:clamp(19px, 3vw, 28px);}
    .blog_view_contents .more_blog_post .blog_title {font-size:clamp(17px, 3vw, 24px);}

}


/* ******************************************************************************** *
* 가로모드 모바일 (가로 < 768px)
* ******************************************************************************** */
@media (max-width: 768px) {

    .support_wrapper .support_header {padding: 0;}

    .support_wrapper nav {display:none;}
    .support_wrapper .contents.right {margin:0;}
    .support_wrapper .support_header h1 {font-size:clamp(40px, 3vw, 48px);}
    .support_wrapper .contents.right > h2 {font-size:clamp(25px, 3vw, 30px);}

    .support_wrapper #contents > div {padding-top: 50px;}
    .support_wrapper #contents > div > h3 {font-size:clamp(19px, 3vw, 24px)}

    .support_wrapper .srchform {gap: 0 7px;padding:0 13px 0 17px;}
    .support_wrapper .srchform input {text-indent: 0;padding: 0;}
    .support_wrapper .srchform input::placeholder {font-size:clamp(13px, 4vw, 16px);text-indent: 0;}
    .support_wrapper .srchform .srchrslt {left:0;top:60px;width:100%;height:38vh;padding:15px 20px 6px 20px;}

    .blog_view_contents #contents > div {padding-top: 0;}
}