@charset 'utf-8'; 

/* main layout*/
#container { margin-left:350px; transition:margin 0.5s ease-in-out; }
.content_wrap { min-height:calc( 100vh - 150px ); padding:0 50px 35px 90px; color: var(--gray0e); }
.content_wrap p{font-size:1em; line-height:1.5em; font-weight:300}

    /* page common */
.page_top { padding:50px 450px 40px 0; background:url(../img/common/content_bg_box_cut.png) no-repeat 100% 30%; background-size:40%; }
.page_top .page_tit { margin:0 0 10px; font-size:3em; line-height:1.4em; font-weight:700; color:var(--primary); letter-spacing:-0.03em; }
.page_top .page_info{line-height:1.5em; font-weight:300; color:#334155}
.page_top_comm{background:url(../img/common/page_top_commnnity.svg) no-repeat 100% -30px; background-size:480px auto;}
.page_top_comm h2.page_tit{margin:0}

.box_border { width:100%; margin:30px 0; padding:30px; background: rgba(255,255,255,0.8); border:1px solid var(--white); border-radius: 24px; }
.box_border h3 { margin:0 0 25px; font-size:1.500em; line-height:1em; font-weight:700; letter-spacing:-0.02em; color: var(--gray33); }
.box_border h4 { margin:0 0 20px; font-size:1.250em; line-height:1em; font-weight:700; letter-spacing:-0.02em; }
.box_border h5 { margin:0 0 13px; font-size:1em; line-height:1em; font-weight:500; color:var(--gray33); }
.bullet_dot{margin-top:15px; }
.bullet_dot li{position:relative; padding-left:17px; line-height:1.5em; font-weight:300;}
.bullet_dot li::before{display:block; position:absolute; top:9px; left:4px; width:5px; height:5px; background: var(--primary); border-radius:50%; content:""}
.bullet_dot2 li {position:relative; padding-left:17px; line-height:1.5em; font-weight:300;}
.bullet_dot2 li::before{display:block; position:absolute; top:9px; left:4px; width:3px; height:3px; border: 1px solid var(--primary); border-radius:50%; background: none; content:""}

ol li {position:relative; line-height:1.5em; font-weight:300;}
ol > li::first-letter { padding: 0 5px;}
ol .bullet_dot2 { margin-left: 20px; }

    @media all and (max-width:1500px){
        /*.shrink #container{margin-left:0 }*/
        .content_wrap { min-height:calc( 100vh - 115px ); padding-left: 75px; }
        .page_top { padding:40px 310px 35px 0; background-position: 100% 33%; background-size: 340px; }
    }
    @media all and (max-width:1120px){
        #container{flex:auto; width:100%; margin-left:0}

        /*
        .mobile_header_wrap{display:block; position:absolute; top:0; right:0; left:0; width:100%; text-align:center}
        .mobile_header_wrap .mobile_header_logo{display:inline-block; margin:20px auto}
        .mobile_header_wrap .mobile_header_logo a{display:flex; align-items:flex-start; color: var(--white); }
        .mobile_header_wrap .mobile_header_logo a img{width:40px; height:40px;}
        .mobile_header_wrap .mobile_header_logo a .web_title{margin-left:10px; font-size:1.063em; line-height:1.2em; font-weight:300; text-align:left;}
        .mobile_header_wrap .mobile_header_logo a .web_title .b{display:block;}
        */

        .content_wrap { padding: 0 40px; }
        .page_top { background-position: 100% 20%; background-size: 280px; }
        .page_top h2.page_tit{font-size:2.5em}
    }
    @media all and (max-width:950px){
        .content_wrap { padding: 0 30px; }
        .page_top { padding: 40px 15px; background:0 none; }
        .box_border { padding:30px 20px; }
    }
    @media all and (max-width:750px){
        .page_top { padding: 30px 10px; }
        .page_top h2.page_tit{font-size:2em}

    }
    @media all and (max-width:600px){
        /*
        .mobile_header_wrap .mobile_header_logo a img{width:30px; height:30px;}
        .mobile_header_wrap .mobile_header_logo a .web_title{margin-left:8px; font-size:1em; line-height:15px;}
        */
        .content_wrap{ padding: 0 20px; }

        .box_border h3{font-size:1.313em; }
        .box_border h4{font-size:1.125em;}
    }
    /*
    @media all and (max-width:320px){
        .mobile_header_wrap .mobile_header_logo a .web_title{margin-left:5px; font-size:0.87em;}
    }
    */

    /* code box */
.code_box_wrap{position:relative; width:100%; margin-top:20px; padding:60px 40px 40px; background: var(--gray07); color: var(--gray0e); border-top: 1px dashed var(--grayf3); }
pre{font-size:0.875rem; line-height:1.5em; font-weight:300; white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; }
.pre_point{color: var(--secondary); }
.btn_code{display:none; }
.code_box_wrap .btn_code{display:block !important; position:absolute; top:10px; right:10px; border-radius: 12px; font-size:1em; font-weight: 600; color: var(--gray0e); transition:all 0.3s }
.code_box_wrap .btn_code .icon{display:inline-block; width:18px; line-height:38px; margin-right:6px; }
.code_box_wrap .btn_code .tit{display:inline-block; width:0; font-size:0; opacity:0;}
.code_box_wrap .btn_code img{height:16px; vertical-align:middle;}
.code_box_wrap:hover .btn_code{padding:0 16px; background: var(--white); box-shadow: 2px 2px 5px var(--graye4); opacity:1;}
/*.code_box_wrap:hover .btn_code .icon{margin-right:10px; }*/
.code_box_wrap:hover .btn_code .tit{display:inline-block; width:auto; font-size:0.88em; line-height:38px; opacity:1; }

    @media all and (max-width:950px){
        .code_box_wrap { padding:30px; }
        .code_box_wrap .btn_code{ position:relative; top: initial; right: initial; width:120px; margin-top:20px; padding:0 20px; font-size:0.93em; line-height:40px; text-align: center; box-shadow: 2px 2px 5px var(--graye4); }
        .code_box_wrap .btn_code .icon img{height:16px;}
        .code_box_wrap .btn_code .tit { width:auto; padding:0; font-size:1em; line-height:40px; opacity:1;}
    }
    @media all and (max-width:750px){
        .code_box_wrap{padding:30px 20px}
    }
    @media all and (max-width:600px){
        .code_box_wrap{padding:20px 16px}
    }
    @media all and (max-width:319px){
        .code_box_wrap .btn_code{width:100%;}
    }

/* toast popup */
#toast{display:block; position:fixed; bottom:50%; left:50%; z-index:999999; width:200px; max-width:70%; padding:20px; background: rgba(11, 12, 14, 0.8); border-radius:40px; font-size:1.125em; line-height:1.1em; text-align: center; color:var(--white); opacity:0; transition:all 0.3s; transform:translateX(-50%) }
/*#toast:before{display:block; position:absolute; top:20px; left:30px; z-index:10; width:20px; height:20px; background:url(../img/common/toast_check.svg) no-repeat; background-size:100%; content:""}*/
#toast.reveal{opacity:0.9}

/* btn */
.btn_wrap{display:flex; justify-content:space-between; flex-wrap:wrap; margin-top:-1%;}
.btn_down{display:inline-block; position:relative; width:49.5%; margin-top:1%; padding:0 75px 0 25px; background:var(--primary); border-radius:5px; line-height:50px; color:var(--white); overflow:hidden; transition:all 0.3s}
.btn_down:hover{background:var(--pink02);}
.btn_down::after{display:block; position:absolute; top:0; right:0; width:50px; height:50px; background:var(--secondary) url(../img/common/btn_down.svg) no-repeat 50% 50%; background-size:15px 18px;transition:all 0.15s; content:""}
.btn_down:hover::after{background:var(--pink03) url(../img/common/btn_down.svg) no-repeat 50% 50%; background-size:15px 18px; transition:all 0.3s}
/* tab menu */
.tab_nav{display:flex; margin:25px 0 10px; }
.tab_nav button{display:inline-block; max-width:200px; width:32%; margin-right:5px; padding:15px; background: var(--graye4); border: 1px solid var(--grayf3); border-radius:40px; font-size:0.938em; line-height:1em; font-weight:500; color: var(--gray33); text-align:center; word-break: break-word; transition:all 0.3s}
.tab_nav button:hover{ border-color: var(--secondary); background: var(--secondary); color: var(--white); }
.tab_nav button.active{ border-color: var(--primary); background: var(--primary); color: var(--white);}

.tab_content{display:none;  transition:all 0.4s}
.tab_content.active{display:block}
.tab_content .code_box_wrap{margin-top:0}
/* input */
.input_box_wrap{display:flex; justify-content:space-between; align-items:flex-end }
.input_box_wrap .input_area_wrap{display:flex; justify-content:space-between; align-items:flex-end; width:87.1% }
.input_box_wrap.input_row01 .input_area{width:99.5%}
.input_box_wrap.input_row02 .input_area{width:49.5%}
.input_box_wrap.input_row03 .input_area{width:32.83%}
.input_box_wrap.input_row04 .input_area{width:24.5%}
.input_box_wrap.input_row05 .input_area{width:19.5%}
.input_box_wrap.input_row06 .input_area{width:16.11%}
.input_box_wrap input{width:100%; height:50px; padding:8px 15px; border:1px solid var(--graye4); border-radius:12px; line-height:38px; }
.input_box_wrap input:focus{border-color:var(--gray90);}

.input_box_wrap .btn_area_wrap{width:12.4%; }
.input_box_wrap .input_btn{display:inline-block; width:100%; background: var(--primary); border-radius:12px; line-height:50px; color:var(--white); transition:all 0.3s }
.input_box_wrap .input_btn:hover{background: var(--secondary); }
.input_box_wrap .input_btn .icon{display:inline-block; width:17px; margin-right:10px; transition:all 0.3s}
.input_box_wrap .input_btn .icon img{width:17px; vertical-align:middle; }

.input_box_wrap.input_row .input_area{width:0%;}
.input_box_wrap.input_row .btn_area_wrap{max-width:250px; width:100%; margin:0 auto}
.input_box_wrap.input_row .btn_area_wrap .input_btn{width:100%}
/* img */
.img_wrap{width:100%; margin-top:0.8% }
.img_2ea_wrap{display:flex; justify-content:space-between; margin-top:0.8% }
.img_2ea_wrap .img_area{width:49.6%}
.img_wrap img{border-radius:5px; overflow:hidden}
.img_mobile{display:none; }

@media all and (max-width:1500px){
        .input_box_wrap{flex-wrap:wrap}
        .input_box_wrap.input_row06 .input_area_wrap{width:100%}
        .input_box_wrap.input_row06 .btn_area_wrap{display:flex; justify-content:right; width:100%; margin-top:10px; line-height:50px}
        .input_box_wrap.input_row06 .input_btn{width:16.11%}
    }
@media all and (max-width:1300px){
        .input_box_wrap .input_area_wrap,
        .input_box_wrap.input_row06 .input_area_wrap{flex-wrap:wrap; width:100%; margin-top:-10px}
        .input_box_wrap .input_area h5{margin:10px 0;}
        .input_box_wrap.input_row04 .input_area{width:49.6%}
        .input_box_wrap.input_row05 .input_area,
        .input_box_wrap.input_row06 .input_area{width:32.83%}
        .input_box_wrap.input_row05 .input_area:nth-child(1),
        .input_box_wrap.input_row05 .input_area:nth-child(2){width:49.6%}
        .input_box_wrap .btn_area_wrap{display:flex; justify-content:right; width:100%; margin-top:10px; line-height:50px}
        .input_box_wrap .input_btn,
        .input_box_wrap.input_row06 .input_btn{width:32.83%}
    }
@media all and (max-width:1050px){
        .input_box_wrap input{height:50px; padding:5px 10px; line-height:48px;}
        .input_box_wrap .btn_area_wrap .input_btn{line-height:50px}
    }


    @media all and (max-width:750px){
        .tab_nav button{padding:13px 10px; font-size:0.88em; }

        .input_box_wrap .input_btn .icon{margin-right:5px;}
        .btn_down{width:100%; margin-top:10px}
    }
    @media all and (max-width:700px){
        .input_box_wrap.input_row06 .input_area{width:49.6%}
    }
    @media all and (max-width:600px){
        .img_wrap{margin-top:15px}
        .img_2ea_wrap{flex-wrap:wrap}
        .img_2ea_wrap .img_area{width:100%; margin-top:15px}
        .img_2ea_wrap .img_area:first-child{margin-top:0}
        .img_mobile{display:block; max-width:100%; }
        .img_pc{display:none; }
    }
    @media all and (max-width:550px){
        .input_box_wrap.input_row01 .input_area_wrap,
        .input_box_wrap.input_row02 .input_area_wrap,
        .input_box_wrap.input_row03 .input_area_wrap{width:100%; margin-top:-10px}
        .input_box_wrap.input_row01 .input_area h5,
        .input_box_wrap.input_row02 .input_area h5,
        .input_box_wrap.input_row03 .input_area h5{margin:13px 0 10px;}
        .input_box_wrap.input_row01 .input_area,
        .input_box_wrap.input_row02 .input_area,
        .input_box_wrap.input_row03 .input_area,
        .input_box_wrap.input_row04 .input_area,
        .input_box_wrap.input_row05 .input_area,
        .input_box_wrap.input_row06 .input_area{width:100% !important}
        .input_box_wrap.input_row01 .btn_area_wrap,
        .input_box_wrap.input_row02 .btn_area_wrap,
        .input_box_wrap.input_row03 .btn_area_wrap{display:flex; justify-content:right; width:100%; margin-top:10px; line-height:50px}
        .input_box_wrap .input_btn{width:100% !important}
    }
    @media all and (max-width:500px){
        .input_box_wrap .input_area_wrap{width:100%}
        .input_box_wrap .input_area{width:100%}
        .input_box_wrap.input_row01 .input_area{width:100%}
        .input_box_wrap .input_area h5{margin:10px 0 5px;}
        .input_box_wrap .input_btn{width:100%;}

        .tab_nav{flex-wrap:wrap;}
        .tab_nav button{width:49%; height:55px; margin:0.5%; padding:15px 10px; }
    }
    @media all and (max-width:319px){
        .tab_nav button{max-width:100%; width:100%; margin:0.5% 0; }
    }



/* community */
/*
.community_wrap .name{font-weight:700; font-family:'Gmarket Sans';}
.community_wrap .date{ line-height:1em; color:#999}
.community_wrap .btn_more{display:block; margin:15px 0 0;background:0 none; font-size:1em; font-weight:500; color:#7367f0}

.fix_write_link{display:block; position:fixed; right:10px; bottom:90px; width:50px; height:50px; background:rgba(115,103,240,0.8); border-radius:50%; line-height:50px; text-align:center}
.fix_write_link img{height:25px; vertical-align:middle; }
 */
    /* wirte link */
/*
.write_link{display:flex; justify-content:space-between; align-items:center}
.write_link .btn{display:inline-block; padding:0 35px; background:#7367f0; border-radius:8px; font-size:1.125em; line-height:60px; font-weight:700; color:#fff  }
.write_link .btn .icon{margin-right:10px}
.write_link .btn .icon img{width:22px; vertical-align:middle; transform:translateY(-2px)}

.post_write_link .tit{font-size:1.250em; line-height:1.2em; font-weight:500 }
.comment_write_link{padding-left:30px; background:#f5f5f5; border-radius:8px}
.comment_write_link .tit{font-size:1.125em; font-weight:700}
 */
    /* view box */
/*
.comm_view_wrap{position:relative; }
.comm_view_top{padding:0 0 15px; border-bottom:1px solid #ddd}
.comm_view_top p.name{font-size:1.250em; line-height:1em;  }
.comm_view_top p.date{margin-top:10px;}

.comm_view_wrap .btn_view_edit{position:absolute; top:26px; right:15px; width:45px; height:45px; padding:20px }
.comm_view_wrap .btn_view_edit span{display:block; position:relative; width:5px; height:5px; background:#ccc; border-radius:5px;}
.comm_view_wrap .btn_view_edit span:after{display:block; position:absolute; top:-10px; left:0; width:5px; height:5px; background:#ccc; border-radius:5px; content:"" }
.comm_view_wrap .btn_view_edit span:before{display:block; position:absolute; top:10px; left:0; width:5px; height:5px; background:#ccc; border-radius:5px; content:""}

.comm_view_wrap .view_edit_list{display:none; position:absolute; top:90px; right:30px; z-index:500; padding:20px; background:#fff; border:1px solid #1e1e1e; border-radius:8px;}
.comm_view_wrap .view_edit_list:after{display:block; position:absolute; top:-18px; right:10px; width:18px; height:18px; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="100%" y2="0" stroke="black" /></svg>');; border-width:0 1px 0 0;  border-style:solid; border-color:#1e1e1e;content:"" }
.comm_view_wrap .view_edit_list a{display:flex; justify-content:space-between; margin-top:1px; padding:0 20px; background:#eee; }
.comm_view_wrap .view_edit_list a:first-child{margin-top:0}
.comm_view_wrap .view_edit_list a .tit{margin-right:10px; line-height:44px; font-weight:500; }
.comm_view_wrap .view_edit_list a .icon{line-height:40px; }
.comm_view_wrap .view_edit_list a .icon img{height:16px; vertical-align:middle;}

.comm_content_wrap{padding:20px 0;}
.comm_content_min{display:-webkit-box; max-height:140px; word-wrap:break-word; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
.comm_content_wrap p.comm_content{line-height:24px; font-family:'Noto Sans KR';}
.comm_content_wrap .comm_img{margin:10px 0;}
.comm_content_wrap img{margin-top:10px;}
.comm_content_wrap img:first-child{margin-top:0}
.community_wrap .btn_more{margin:15px 0}

.comm_comment_wrap{border-top:1px solid #ddd; }
.comm_comment_wrap .comment_tit{display:flex; margin:35px 0 5px; cursor:pointer}
.comm_comment_wrap .comment_tit .icon img{height:20px}
.comm_comment_wrap .comment_tit p{margin-left:20px; font-size:1.125em; line-height:20px; font-weight:700}
.comm_comment_wrap .comment_tit p .num{font-size:16px; font-weight:500; color:#999}

.comm_comment_wrap .comment_tit p .arr_area{display:inline-block; width:10px; height:10px; margin-left:10px; background:url(../img/common/comment_arr.svg) no-repeat 50% 50%; transition:all 0.4s }
.comm_comment_wrap .comment_tit.arrow_up p .arr_area{transform:rotate(180deg)}

.comment_box_wrap{display:none; margin-top:30px;}
.comment_box{position:relative; margin-top:15px; padding:35px 30px; background:#f5f5f5; border:1px solid #ccc; border-radius:8px}
.comment_box .name{font-size:1.125em;}
.comment_box .date{font-size:0.87em;}
.comment_box .comment_content{margin-top:20px; font-family:'Noto Sans KR';}
.comment_box .comment_content img{margin-top:10px; }
.comment_box .comment_content img:first-child{margin-top:0}
.comment_box .btn_view_edit{right:10px}

    @media all and (max-width:650px){
        .write_link{flex-wrap:wrap;}
        .write_link .tit{display:block; width:100% }
        .write_link .btn{width:100%; margin-top:20px; line-height:50px; text-align:center }
        .comment_write_link{padding:20px; }
        .comment_box{padding:30px 20px}
        .comment_box .btn_view_edit{right:5px}
    }

    
/* page */
/*
.page {width:100%;}
.page ul {width:100%; padding:0; display:flex; justify-content:center; align-items:center;}

.page ul li {min-width:20px;text-align:center;}
.page ul li.pre {margin-right:5px; }
.page ul li.next {margin-left:5px; }
.page ul li a { display:inline-block; width:30px;height:30px; margin:0 7px; font-size:15px; line-height:30px; font-weight:400; color:#767676; text-decoration:none; text-align:center; transition:all 0.3s}
.page ul li a span {font-size:0;}
.page ul li a.on {line-height:28px; color:#fff; font-weight:600; color:#6258cc; border:1px solid #6258cc; }
.page ul li a:hover {color:#6258cc;}
.page ul li a.on:hover {color:#6258cc;}
.page ul li.start a {width:30px; margin:0; background:url('../img/common/page_start.svg') no-repeat center 50%; background-size:12px; }
.page ul li.pre a {width:30px; margin:0; background:url('../img/common/page_pre.svg') no-repeat center 50%;background-size:8px; }
.page ul li.next a {width:30px;margin:0; background:url('../img/common/page_next.svg') no-repeat center 50%;background-size:8px; }
.page ul li.end a {width:30px;margin:0; background:url('../img/common/page_end.svg') no-repeat center 50%;background-size:12px; }
.page ul li.start:hover a {width:30px; margin:0; background:url('../img/common/page_start_on.svg') no-repeat center 50%; background-size:12px; }
.page ul li.pre:hover a {width:30px; margin:0; background:url('../img/common/page_pre_on.svg') no-repeat center 50%;background-size:8px; }
.page ul li.next:hover a {width:30px;margin:0; background:url('../img/common/page_next_on.svg') no-repeat center 50%;background-size:8px; }
.page ul li.end :hover a {width:30px;margin:0; background:url('../img/common/page_end_on.svg') no-repeat center 50%;background-size:12px; }
*/