@charset "utf-8";

/* gnb */
.gnb_container{position: fixed; display: flex; top: auto; bottom:0; left: 0; z-index: 10; width: 100%; height: 47px; background-color: #1e1e2d;}
.gnb_container .logo_con{display: none; height: 85px;}
.gnb_container .logo_con a{font-size:17px; font-size:1.7rem; line-height:23px; line-height:2.3rem; color:#fff;}
.gnb_container h1 {}
.gnb_container .menu_icon_con{display: block; min-width: 40px;  height: 47px; text-align: center;}

.menu_icon{display:block; position: relative; width:36px; height:20px;}
.menu_icon > span{position: absolute; width:100%; height:3px; background-color:#000; top:50%; left:0px; transform: translateY(-50%); transition: all 0.3s;}
.menu_icon > span:before{content:""; position: absolute; width:100%; height:100%; background-color:#000; top:-8px; left:0; transition: all 0.3s;}
.menu_icon > span:after{content:""; position: absolute; width:100%; height:100%; background-color:#000; top:8px; left:0; transition: all 0.3s;}

.gnb_container .menu_icon{display: inline-block; width: 23px; height: 13px; margin-top: 18px; opacity:0.5;}
.gnb_container .menu_icon > span{background-color: #fff;}
.gnb_container .menu_icon > span:before{background-color: #fff; top:-6px;}
.gnb_container .menu_icon > span:after{background-color: #fff; top:6px;}

/* header */
.contents_header{background-color: #fff; box-sizing: border-box;}
.contents_header .header_top_con{padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; border-bottom:1px solid #edf1ff;}
.header_top_con .left_con{display: flex; align-items: center;}
.header_top_con .admin_logo_con{margin-right: 28px;}
.header_top_con .site_name_con{padding-left: 20px; padding-right: 20px; padding-top: 12px; padding-bottom: 12px; background-color: #6d13ff; border-radius: 5px; margin-right: 18px;}
.header_top_con .site_name{font-size: 14px; font-size: 1.4rem; line-height: 20px; line-height: 2.0rem; letter-spacing: -0.02em; font-weight: 500; color:#fff;}
.header_top_con .site_btn_con{display: none; position: relative; bottom:0; right: 0;}
.header_top_con .site_btn{font-size: 12px; font-size: 1.2rem; line-height: 18px; line-height: 1.8rem; letter-spacing: -0.025em; font-weight: 500; color:#000; padding-right: 17px;
    background-image: url('../img/guide_open_btn_arrow.png'); background-position: right center; background-repeat: no-repeat; background-size: 7px 11px;}
.header_top_con .right_con{float: right; display: flex; align-items: center;}
.header_top_con .alert_wrap{position: relative;}
.alert_wrap .alert_con{position: relative; padding-top: 15px; padding-right: 12px; cursor: pointer;}
.alert_wrap .alert_icon{width: 16px; height: 16px; background-image: url('../img/alert_icon.png'); background-position: center; background-repeat: no-repeat; transition: all 0.3s;}
.alert_wrap.active .alert_icon{background-image: url('../img/alert_icon_active.png');}
.alert_wrap .alert_num{position: absolute; top:0; right: 0; width: 21px; height: 21px; font-size: 10px; font-size: 1.0rem; line-height: 21px; line-height: 2.1rem; letter-spacing: 0.02em; font-weight: 500; color:#fff; text-align: center;
    padding-top: 0px; background-color: #6d13ff; border-radius: 50%; box-sizing: border-box;}
.header_top_con .member_info_wrap{display: none; position: relative; margin-right: 40px;}
.member_info_wrap .member_info_con{cursor: pointer; padding-right: 20px; background-image: url('../img/member_info_con_arrow.png'); background-repeat: no-repeat; background-position: right center; background-size: 9px 5px;}
.member_info_con .member_img_con{display: table-cell; vertical-align: middle; padding-right: 15px;}
.member_info_con .member_img{width: 42px; height: 42px; border-radius: 50%; background-color: #eee; background-size: cover; background-repeat: no-repeat; background-position: center;}
.member_info_con .member_id_con{display: table-cell; vertical-align: middle; padding-top: 3px;}
.member_info_con .member_id{font-size: 15px; font-size: 1.5rem; line-height: 21px; line-height: 2.1rem; font-weight: 500; letter-spacing: 0.02em !important; color:#000;}
.member_info_wrap.active .member_info_con{background-image: url('../img/member_info_con_arrow_active.png');}
.member_info_wrap.active .member_id{color:#6d13ff;}
.header_top_con .menu_icon_con{display: none;}

.contents_header .header_bottom_con{padding-left: 20px; padding-right: 20px; padding-top: 17px; padding-bottom: 18px;}

/* line_map */
.line_map_wrap{display: block;}
.line_map_wrap .line_map_list_con{}
.line_map_wrap .line_map_list{position: relative; display: inline-block; font-size: 14px; font-size: 1.4rem; line-height: 20px; line-height: 2.0rem; letter-spacing: -0.02em; font-weight: 400; color:#1e1e2d; padding-left: 12px; padding-right: 14px;}
.line_map_wrap .line_map_list:first-child{padding-left: 0;}
.line_map_wrap .line_map_list:last-child{font-weight: 500; color:#6d13ff; padding-right: 0;}
.line_map_wrap .line_map_list:after{content: ''; position: absolute; width: 5px; height: 9px; top:50%; right: -3px; transform: translateY(-50%); background-image: url('../img/line_map_arrow.png'); background-position: center; background-repeat: no-repeat; background-size: 5px 9px;}
.line_map_wrap .line_map_list:last-child:after{display: none;}
.line_map_wrap .line_map_list > a{display: inline-block;}

.guide_btn_con{display: block; position: relative; bottom:0; right: 0;}
.guide_btn_con .guide_btn{font-size: 12px; font-size: 1.2rem; line-height: 18px; line-height: 1.8rem; letter-spacing: -0.025em; font-weight: 500; color:#000; padding-right: 17px;
    background-image: url('../img/guide_open_btn_arrow.png'); background-position: right center; background-repeat: no-repeat; background-size: 7px 11px;}

/* guide_container */
.guide_wrapper{display: none; position: absolute; top:0px; right: 0; width: auto; height: calc(100vh - 140px); z-index: 9999; transform: translateX(100%);}
.guide_wrapper.is_stuck + div{right: 0; transform:translateX(100%);/*right:-100%;*/}/* 모바일에서 영역 가려서 -100%으로 수정함 웹등에서 문제있다면 다시0으로..kej 문제있어서 다시 0으로 ... hsj */
.guide_wrapper.is_stuck.active + div{transform:translateX(0%);}
.guide_wrapper > div{height:100%;}
.guide_container{position: relative; top:0; right: 0; width: 368px; height: 100vh; background-color: #6d13ff; z-index: 101; transition: all 0.3s;}
.guide_container .guide_container_inner{height:100%;}
.guide_container .title_con{padding-top: 45px; padding-right: 45px; padding-left: 45px; padding-bottom: 20px;}
.guide_container .title_con .title{font-size:25px; font-size:2.5rem; line-height:31px; line-height:3.1rem; letter-spacing: -0.045em; font-weight: 500; color:#fff !important; margin-bottom: 30px;}
.guide_container .guide_close_btn_con{display: none !important;}
.guide_container .guide_contents_wrap{height:calc(100% - 178px);}
.guide_container .guide_contents_inner{padding-right: 40px; padding-left: 40px;}
.guide_container .contents_box{}
.guide_container .contents_box:first-child{padding-top: 25px;}/* 최대한 스크롤 영역 늘리기위해 title_con.mb대신 넣음 */
.guide_container .contents_box:last-child{padding-bottom: 140px;}/* 임시여백 mb70으로하니까 ie에서 여백이 없이나와서 pb70으로 변경 */
.guide_container .contents_title_con{display: flex; justify-content: space-between; align-items: center; padding-bottom: 13px; border-bottom:1px solid rgba(255,255,255,0.3);}
.guide_container .contents_title_con.border_none{border:none;}
.guide_container .contents_box:first-child .contents_title_con{padding-bottom: 31px;}
.guide_container .contents_title{font-size:17px; font-size:1.7rem; line-height:23px; line-height:2.3rem; letter-spacing: -0.02em; font-weight: 500; color:#fff;;}
.guide_container .contents_title_con .btn_style_1_con{display: none;}
.guide_container .contents_box:first-child .contents{padding-bottom: 41px;}
.guide_container .contents_sub_title{font-size:15px; font-size:1.5rem; line-height:21px; line-height:2.1rem; letter-spacing: -0.02em; font-weight: 500; color:#fff; transition: color 0.3s ease;}
.guide_container .contents_sub_title.after_triangle{padding-left: 13px;}
.guide_container .contents_sub_title.after_triangle::after{content: ''; position: absolute; top:6px; left:0; width: 0; height: 0; /*top:50%; transform:translateY(-50%);*/
    border-top: 4px solid transparent; border-left: 5px solid #fff; border-bottom: 4px solid transparent;}
.guide_container .contents_desc{word-break:keep-all; font-size:15px; font-size:1.5rem; line-height:24px; line-height:2.4rem; letter-spacing: -0.02em; font-weight: 300; color:#fff;}
.guide_container .guide_more_btn{position:relative; display:inline-block; width:54px; height:54px; background-color: #5603dd; border:2px solid #5603dd; border-radius: 50%;}
.guide_container .guide_more_btn > span{width: 20px; height: 20px; display: inline-block; position: relative; height: 100%; vertical-align: middle;}
.guide_container .guide_more_btn > span::before{content:''; position: absolute; top:50%; left:50%; width: 20px; height: 2px; transform: translate(-50%,-50%) rotate(0deg); background-color: #fff; transform-origin:right;}
.guide_container .guide_more_btn > span::after{content:''; position: absolute; top:50%; left:50%; width: 2px; height: 20px; transform: translate(-50%,-50%) rotate(0deg); background-color: #fff; transform-origin:right;}

.guide_container .guide_more_btn > span::before {
    -webkit-transition-duration: 0.15s, 0.15s , 0.15s;
    transition-duration: 0.15s, 0.15s , 0.15s ;
    -webkit-transition-delay: 0.0s, 0s , 0s;
    transition-delay: 0.0s, 0s ,0s;
    -webkit-transition-timing-function : ease;
    transition-timing-function : ease;
}
.guide_container .guide_more_btn > span::after{
    -webkit-transition-duration: 0.15s, 0.15s , 0.15s;
    transition-duration: 0.15s, 0.15s , 0.15s ;
    -webkit-transition-delay: 0.0s, 0s , 0s;
    transition-delay: 0.0s, 0s ,0s;
    -webkit-transition-timing-function : ease;
    transition-timing-function : ease;
}
.guide_container .guide_more_btn > span::before {
    -webkit-transition-property: -webkit-transform , width , height;
    transition-property: transform , width , height;
}
.guide_container .guide_more_btn > span::after {
    -webkit-transition-property: -webkit-transform , width , height;
    transition-property: transform , width, height;
}

.guide_container .guide_swiper{}
.guide_container .guide_swiper .img_box{min-height: auto;}/* content.board.custom.css 에서 img_box에 min-height 들어가있음 */
.guide_container .guide_swiper_util{display: flex; justify-content: center; align-items: baseline;}
.guide_container .guide_rolling_btn{width:6px; height:11px; cursor: pointer; outline: none; transition: all 0.2s ease;}
.guide_container .guide_rolling_btn::after{content: ''; position: absolute; bottom: -5px; border-bottom: 1px solid transparent; width: 12px; transition: border-color 0.2s ease;}
.guide_container .guide_rolling_btn.left{background-image: url('../img/guide_swiper_rolling_btn_left.png'); background-repeat: no-repeat; background-position: center;}
.guide_container .guide_rolling_btn.right{background-image: url('../img/guide_swiper_rolling_btn_right.png'); background-repeat: no-repeat; background-position: center;}
.guide_container .guide_rolling_btn.right{}
.guide_container .guide_rolling_btn.left::after{left: -2px;}
.guide_container .guide_rolling_btn.right::after{left: -4px;}

.guide_container .guide_pagination.swiper-pagination{position: static; width: auto;}
.guide_container .guide_pagination.swiper-pagination > span{font-size:15px; font-size:1.5rem; line-height:21px; line-height:2.1rem; letter-spacing: -0.02em; color:#fff !important;}

.guide_container .video_con{display:none;}
.guide_container .video_con .video{display:flex; align-items:center; justify-content:center; width:100%; height:152px;
    background-image: url("../img/guide_video_thumbnail.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;}

.guide_container .guide_list{}
.guide_container .guide_list > li{position: relative; padding-left: 14px; margin-bottom: 8px; transition: border-color 0.2s ease;}
.guide_container .guide_list > li:last-child{margin-bottom: 0;}
.guide_container .guide_list > li:first-child{display: none !important;}
.guide_container .guide_list > li::after{content:''; position: absolute; top:13px; left:0; width: 5px; border-bottom:1px solid #fff;}
.guide_container .guide_list > li > a.contents_desc{transition: all 0.3s; font-weight: 300; color:#fff;}

.guide_container .guide_list + .nodata{float:left; font-size: 15px; font-size: 1.5rem; padding-top: 40px; color:#fff;}

/* scrollbar */
.mCustomScrollbar .mCSB_scrollTools{opacity:1; margin-right: 10px;}
.mCustomScrollbar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; width:2px; opacity:1; }
.mCustomScrollbar .mCSB_scrollTools .mCSB_draggerRail{background-color:#fff; opacity:0.1; filter:alpha(opacity=10); width:2px;}
.mCustomScrollbar .mCSB_scrollTools .mCSB_draggerContainer{height: calc(100% - 20px);}
.contents_scroll_wrap.mCustomScrollbar .mCSB_scrollTools .mCSB_draggerContainer{height: calc(100% - 215px); top:202px;}
.mCustomScrollbar .mCS-my-theme.mCSB_inside > .mCSB_container{margin-right: 0px;}
/*.mCustomScrollbar .mCS-my-theme.mCSB_inside > .mCSB_container{margin-right: 10px;}*/
.mCustomScrollbar .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCustomScrollbar .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{background-color:#fff;}
.guide_container .mCustomScrollbar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; width:2px; opacity:1; }
.guide_container .mCustomScrollbar .mCSB_scrollTools .mCSB_draggerRail{background-color:#fff; opacity:0.1; filter:alpha(opacity=10); width:2px;}
.mCustomScrollbar.select_style_0_con .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #6d97f2; width:2px; opacity:1; }
.mCustomScrollbar.select_style_0_con .mCSB_scrollTools .mCSB_draggerRail{background-color:#6d97f2; opacity:0.1; filter:alpha(opacity=10); width:2px;}
.mCustomScrollbar.select_style_0_con .mCS-my-theme.mCSB_inside > .mCSB_container{margin-right: 0px;}

/* 고객센터 - 고객지원 뷰 */

.move_top_btn_con{text-align: center; margin-bottom: 130px;}
.move_top_btn_con .move_top_btn{opacity: 0.6; transition: opacity 0.2s ease;}
.move_top_btn_con .move_top_btn > div{font-size:9px; font-size:0.9rem; line-height:15px; line-height:1.5rem; letter-spacing: 0.03em; font-weight: 500; color:#fff;}

.customer_view_close_btn_wrap{/*height: 199px; */background-color: #6d13ff; padding-left: 20px; padding-right: 20px;}
.customer_view_close_btn_con{display: block; text-align: right; position: absolute; top:81px; right:0; z-index: 1;}
.customer_view_close_btn_con .customer_view_close_btn{font-size:13px; font-size:1.3rem; line-height:19px; line-height:1.9rem; letter-spacing: -0.02em; font-weight: 400; color:#fff; transition: all 0.2s ease;
    padding:10px 33px 11px 24px; margin-right: -18px; display: inline-block; border:2px solid #fff; border-right: none;
    background-image: url("../img/close_icon_11x10.png"); background-repeat: no-repeat; background-position: right 7px center;
    background-color: #6d13ff; border-top-left-radius:21px; border-bottom-left-radius:21px;}
.customer_view_close_btn_con .customer_view_close_btn:hover{margin-right: 0; background-position: right 14px center;}



.customer_view_con{position: fixed; top:0; right: 0; width: 100vw; height: 100vh; background-color: #6d13ff; z-index: 102; transform: translateX(100%);}
.customer_view_con.active{transform: translateX(0%);}
.customer_view_con .contents_scroll_wrap{height:100%;}
.customer_view_con .customer_view_inner{height:100%;}
.customer_view_con .title_top_con{/*height: 294px;*/ margin-bottom: 86px; display: flex; align-items: center;}
.customer_view_con .title_con{position:relative; padding-top: 199px; padding-bottom: 38px; margin-bottom: 38px;}
.customer_view_con .title_con::after{content: ''; position: absolute; bottom:0; left:-55px; width: 189px; border-bottom:3px solid #fff;}
.customer_view_con .title_con .title{font-size:30px; font-size:3.0rem; line-height:36px; line-height:3.6rem; letter-spacing: -0.06em; font-weight: 500; color:#fff;}

.customer_view_con .contents_desc{word-break:keep-all; font-size:15px; font-size:1.5rem; line-height:28px; line-height:2.8rem; letter-spacing: -0.02em; font-weight: 300; color:#fff;}
.customer_view_con .contents_desc .under_line{position:relative; color:#fdff2f; font-weight: 400;}
.customer_view_con .contents_desc .under_line::after{content: ''; position: absolute; bottom:0; left:0; width:100%; border-bottom:1px solid #fdff2f;}
.customer_view_con .contents_title{position:relative; font-size:17px; font-size:1.7rem; line-height:23px; line-height:2.3rem; letter-spacing: -0.02em; font-weight: 500; color:#fff;}
.customer_view_con .contents_sub_title{position:relative; font-size:15px; font-size:1.5rem; line-height:21px; line-height:2.1rem; letter-spacing: -0.02em; font-weight: 500; color:#fff;}
.customer_view_con .after_dot{padding-left: 16px;}
.customer_view_con .after_dot::after{content: ''; position: absolute; top:10px; left:0px; width: 5px; height: 5px; background-color: #fff; border-radius: 50%;}
.customer_view_con .after_line{padding-left: 14px;}
.customer_view_con .after_line::after{content: '-'; position: absolute; top:0px; left:0;;}
.customer_view_con .hr_style_1{float:left; width:100%; height:1px; background-color:rgba(255,255,255,0.3);}


.customer_view_con .guide_contents_wrap{/*height:calc(100% - 294px); overflow-y: scroll;*/}
.customer_view_con .contents_box{}
/*.customer_view_con .contents_box:last-child{margin-bottom: 70px;}*//* 임시여백 */
.customer_view_con .contents_title_con{display: flex; justify-content: space-between; align-items: center; padding-bottom: 13px; border-bottom:1px solid #b1b1b1;}
.customer_view_con .contents_title_con.border_none{border:none;}
.customer_view_con .contents_title{font-size:17px; font-size:1.7rem; line-height:23px; line-height:2.3rem; letter-spacing: -0.02em; font-weight: 500; color:#fff;}
.customer_view_con .contents_sub_title{font-size:15px; font-size:1.5rem; line-height:21px; line-height:2.1rem; letter-spacing: -0.02em; font-weight: 500; color:#fff;}
.customer_view_con .contents_sub_title.after_triangle{padding-left: 13px;}
.customer_view_con .contents_sub_title.after_triangle::after{content: ''; position: absolute; top:7px; left:0; width: 0; height: 0; /*top:50%; transform:translateY(-50%);*/
    border-top: 4px solid transparent; border-left: 5px solid #fff; border-bottom: 4px solid transparent;}

.customer_view_con .video_con{}
.customer_view_con .video_con .video{display:flex; align-items:center; justify-content:center; width:100%; height:351px;
    background-image: url("../img/customer_video_thumbnail.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat;}

.customer_view_con .guide_list{}
.customer_view_con .guide_list > li{position: relative; padding-left: 14px; margin-bottom: 8px;}
.customer_view_con .guide_list > li:last-child{margin-bottom: 0;}
.customer_view_con .guide_list > li::after{content:''; position: absolute; top:13px; left:0; width: 5px; border-bottom:1px solid #000;}
.customer_view_con .guide_list > li > a{}

.guide_contents_wrap.type_2 .btn_style_1_con .btn_style_1.type_3{width: auto; opacity: 0.6; transition: opacity 0.2s ease;}

@media all and (min-width: 768px){
    .header_top_con .site_btn_con{display: block;}
}

@media all and (min-width:992px){
    .gnb_container{display: block; top:0; width: 130px; min-height: 100%;}
    .gnb_container .logo_con{display: table;}
    .gnb_container .menu_icon_con{display: none;}

    .contents_header .header_top_con{padding-left: 45px; padding-right: 45px;}
    .header_top_con .member_info_wrap{display: block;}
    .header_top_con .menu_icon_con{display: block;}

    /* menu_icon */
    .menu_icon_con:hover .menu_icon > span{background-color: #6d13ff;}
    .menu_icon_con:hover .menu_icon > span:after{background-color: #6d13ff;}
    .menu_icon_con:hover .menu_icon > span:before{background-color: #6d13ff;}

    .header_top_con .alert_wrap{margin-right: 34px;}

    .contents_header .header_bottom_con{padding-left: 45px; padding-right: 45px;}

    /* guide_container */
    .guide_container .guide_list > li:hover > a.contents_desc{color:#fdff2f;}
    .guide_container .guide_list > li:hover::after{border-color:#fdff2f;}
    .guide_container .contents_box:last-child{padding-bottom: 70px;}
    .guide_container .guide_more_btn:hover{background-color: transparent; border-color:#fff;}
    .guide_container .guide_more_btn:hover > span::before{transform:translate(-50%,-50%) rotate(45deg); width: 13px; height: 2px;}
    .guide_container .guide_more_btn:hover > span::after{transform:translate(-50%,-50%) rotate(45deg); /*width: 13px; height: 2px;*/
        top:59%; left:56%; width: 2px; height: 12px;}
    .guide_container .guide_swiper .swiper-slide{cursor: pointer;}
    .guide_container .guide_rolling_btn:hover::after{border-color:#6d13ff;}

    .customer_view_con{width: 700px;}
    .customer_view_close_btn_wrap{/*padding-top: 199px;*/ padding-right: 55px; padding-left: 55px;}
    .customer_view_con .title_con{padding-bottom: 58px;}


}

@media all and (min-width: 1920px){
    .guide_btn_con{display: none;}

    .guide_wrapper{/*position: relative;*/ transform: translateX(0) !important;}
    .guide_wrapper.is_stuck + div{transform: translateX(0);}
}