/* font */
@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* size */
@media screen and (max-width: 1250px) { } /* tablet */
@media screen and (max-width: 650px) { } /* mobile */

/* default */
*{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color : inherit;
    box-sizing: border-box;
    letter-spacing: inherit;
    line-height: inherit;
}

body{ font-family: 'GmarketSansLight'; font-weight:500; font-size: 16px; letter-spacing: -0.04em; word-break: keep-all; }
section{ display:block; }
a{ color:inherit; }

.inner{ width:1200px; margin:0 auto; }
.sub_sec{ padding-top:80px; }

.paging_box{ padding:10px 0; display:flex; align-items: center; justify-content: center; font-family: 'Noto Sans KR', sans-serif; }
.paging_box .pg_current{ background-color:#222; border:1px solid #222; font-weight: normal; line-height:28px; }
.paging_box .pg_page{ background-color:#fafafa; border:1px solid #e6e6e6; font-weight: normal;  }

@media screen and (max-width: 1250px) { 
    .inner{ width:100%; padding:0 10px; }
} /* tablet */
@media screen and (max-width: 650px) { 
    .sub_sec{ padding-top:58px; }
    .paging_box{ font-size: 13px; }
} /* mobile */

/*---------------- admin ---------------*/
.adminBox{display:flex; justify-content: flex-end; padding:20px 0;}
.adminBox .admin_list{display:flex; }

.adminBox .admin_list>.item{
    margin-right:5px; padding:5px 5px 5px 29px; display:flex; align-items: center; border-radius: 4px; font-size:14px;  
    background-repeat: no-repeat; background-position: left 5px center; cursor: pointer; background-color:#fff; 
}
.adminBox .admin_list>.item a{ font-size: inherit; }
.adminBox .admin_list .item:nth-child(2n){
    background-color:#f2f2f2; background-repeat: no-repeat; background-position: left 5px center; 
}
.adminBox .admin_list a.admin_icon{background-image: url('../img/board_img/admin_icon.png');}
.adminBox .admin_list .item.write_icon{background-image: url('../img/board_img/write_icon.png');  }
.adminBox .admin_list .more_icon{background-image: url('../img/board_img/comment_menu.png'); position:relative;}
.adminBox .admin_list .reple_icon{background-image: url('../img/board_img/view_reple_icon.png'); position:relative; background-color:#fff; }
.adminBox .admin_list .list_icon{background-image: url('../img/board_img/list_icon.png'); position:relative;}

.adminBox .admin_list li .more_box{
    position:absolute; background:#fff; padding:10px; border: 1px solid #E6E6E6; box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.05);
    z-index: 5; top:40px; right:0; display:none; 
}
.adminBox .admin_list li .more_box.on{display:block; }
.adminBox .admin_list li .more_box:before{
    content: "";
    position: absolute;
    top: -8px;
    right: 13px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 8px 6px;
    border-color: transparent transparent #E6E6E6 transparent;
}
.adminBox .admin_list li .more_box:after{
    content: "";
    position: absolute;
    top: -6px;
    right: 13px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 8px 6px;
    border-color: transparent transparent #fff transparent;
}

.adminBox .admin_list li.more_icon .more_box{width:90px; font-size:14px; padding:0; }
.adminBox .admin_list li.more_icon .more_box button{background:none; border:none; text-align: center; width:100%; padding:10px; border-bottom:1px solid #e6e6e6; font-size:13px; }
.adminBox .admin_list li.more_icon .more_box .button{ display:block; background:none; border:none; text-align: center; width:100%; padding:10px; border-bottom:1px solid #e6e6e6; font-size:13px; }
.adminBox .admin_list li.more_icon .more_box button:last-child{border-bottom:none; }
.adminBox .admin_list li.more_icon .more_box button > a{ font-size: inherit; }
@media screen and (max-width: 650px) { 
    .adminBox .admin_list>.item{ font-size: 13px; }
    .adminBox .admin_list .item.write_icon{ font-size: 13px; }
}
/*---------------- admin end ---------------*/

/* header */
header{ position:fixed; width:100%; padding:20px 0; z-index:5; transition:all 0.5s; }
header .logo_box img{ width:200px; }
header .logo_box .origin{ display:none; }
header.on{ background-color:#fff;  }
header.on .logo_box .origin{ display:block; }
header.on .logo_box .white{ display:none; }
header .inner{ display:flex; justify-content: space-between; align-items: center; }

header .menu_wrap{  width:calc(100% - 200px); }

header .h_menu{ display:flex; align-items: center; justify-content: space-between; padding-left:50px; }
header .h_menu > li{ padding:0 20px; font-family: 'GmarketSansMedium'; font-size: 16px; color:#fff;  }
header .h_menu > li:last-child{ margin-right:0; }
header .h_menu > li.link > a {  display:block; background-color:#0270B9; padding:7px 14px; border-radius:4px; font-family: 'GmarketSansLight'; font-weight: 600; }
header.on .h_menu > li > a { color:#222; }
header.on .h_menu > li.link > a{ color:#fff; }

header .mo_menu{ display:none; width:30px; height:30px; cursor: pointer; }
header .mo_menu span{ display:block; width:100%; height:3px; background-color:#fff; margin-bottom:5px; transition: all 0.5s; }
header .mo_menu.on span{ background-color:rgba(25, 152, 191, 1); }
header.on .mo_menu span{ background-color:rgba(25, 152, 191, 1);  }

header .mo_menu.on span:first-child{ 
    transform: translateY(10px) rotate(-45deg);
    -webkit-transform: translateY(10px) rotate(-45deg);
}
header .mo_menu.on span:nth-child(2){ opacity:0;  }
header .mo_menu.on span:last-child{ 
    transform: translateY(-6px) rotate(45deg);
    -webkit-transform: translateY(-6px) rotate(45deg);
}


@media screen and (max-width: 1250px) { 
    header .menu_wrap{ 
        position:fixed; display:flex; opacity:0; visibility: hidden; 
        align-items: center; justify-content: center; 
        left:0; top:0; width:100%; height:100%; 
        transition:opacity 1s;
    }
    header .menu_wrap.on{ opacity:1; visibility: visible; }
    header .menu_wrap .h_menu{ flex-direction: column; }
    header .menu_wrap .h_menu li{ margin:0 0 5vh 0; text-align: center; width:100%; font-size: 40px; }

    header .menu_wrap .menu_bg{ position:fixed;  width:100%; height:100%; }
    header .menu_wrap .menu_bg > span{ display:block; width:0; height:calc(100% / 4); background-color:#fff; border-bottom:1px solid #e0e0e0; }
    header .menu_wrap .menu_bg > span:nth-child(1){ transition:all 0.5s; }
    header .menu_wrap.on .menu_bg > span:nth-child(1){ width:100%; }
    header .menu_wrap .menu_bg > span:nth-child(2){ transition:all 0.7s; }
    header .menu_wrap.on .menu_bg > span:nth-child(2){ width:100%; }
    header .menu_wrap .menu_bg > span:nth-child(3){ transition:all 0.9s; }
    header .menu_wrap.on .menu_bg > span:nth-child(3){ width:100%;  }
    header .menu_wrap .menu_bg > span:nth-child(4){ transition:all 1.1s; }
    header .menu_wrap.on .menu_bg > span:nth-child(4){ width:100%; }

    header .h_menu{ z-index:1; padding-left:0; }
    header .h_menu > li{ color:#222; font-family: 'GmarketSansBold'; }
    header .mo_menu{ display:block; position:fixed; right:10px; top:25px; }

    header .menu_wrap .h_menu li.link a{ background-color: unset; font-family: 'GmarketSansBold' }
    header.on .menu_wrap .h_menu li.link a{ color:#222; }
}
@media screen and (max-width: 650px) { 
    header{ padding:15px 0; }
    header .logo_box img{ width:150px; }
    header .mo_menu{ top:17px; }

    header .menu_wrap .h_menu li{ font-size: 25px; }
    
}




/* main banner */
.main_banner { 
    display:flex; justify-content: center; align-items: center;
    position:relative; overflow: hidden; 
    background-image: url('../img/main_banner_background.png'); background-size: cover; 
    background-repeat: no-repeat; background-position: center; padding:1.5vh 0 10vh 0; 
}
.main_banner .inner{ 
    position:relative; background-image: url('../img/main_banner_circle.png'); height:100%;
    background-repeat: no-repeat; background-position: bottom center; background-size: contain; 
}
.main_banner .logo{ width:100%; position:absolute; left: 0; top:10%;  animation: opacity 5s ease-in-out infinite; }

.main_banner .icon_contain{ width:100%; height:700px; position:relative; z-index: 1; }
.main_banner .icon_contain > li { position:absolute;   }
.main_banner .icon_contain > li a{ display: block; animation: ani 5s ease-in-out infinite;  }


.main_banner .icon_contain > li img.icon{ display:block; width:90%;  }

.main_banner .icon_contain > li.link_btn .bubble{ display:block; margin:0 auto; width:130px;  }
.main_banner .icon_contain > li.link_btn .bubble img{ width:100%; }

.main_banner .icon_contain > li.cion01{ bottom:16%; left:10%; }
.main_banner .icon_contain > li.cion02{ bottom:10%; left:30%; }
.main_banner .icon_contain > li.cion03{ bottom:18%; left:27%; }
.main_banner .icon_contain > li.cion04{ bottom:12%; right:20%; }

.main_banner .icon_contain > li.about{ left:3%; bottom:30%; }
.main_banner .icon_contain > li.company{ left:17%; bottom:51%; }
.main_banner .icon_contain > li.solution{ left:28%; bottom:30%; }
.main_banner .icon_contain > li.business{ left:17%; bottom:15%; }
.main_banner .icon_contain > li.newsroom{ left:51%; bottom:40%; }
.main_banner .icon_contain > li.protfolio{ left:38%; bottom:7%; }
.main_banner .icon_contain > li.link{ right:3%; bottom:18%; z-index:1; }
.main_banner .icon_contain > li.inquiry{ right:30%; bottom:10%; z-index:1; }

.main_banner .icon_contain > li.link img.icon{ height:300px; }

.main_banner .click_produce{ color:#fff; text-align: center; position:absolute; bottom:-5vh; width:100%; }

@media screen and (max-width: 1250px) { 
    .main_banner .icon_contain{ height:70vw; }
    .main_banner .icon_contain > li img.icon{ height:17vw; width:auto; }

    .main_banner .icon_contain > li.link_btn .bubble{ width:12vw; max-width: 140px; opacity:1; }

    .main_banner .icon_contain > li.cion01 img{ height:5vw; }
    .main_banner .icon_contain > li.cion02 img{ height:4vw; }
    .main_banner .icon_contain > li.cion03 img{ height:5vw; }
    .main_banner .icon_contain > li.cion04 img{ height:27vw; }

    .main_banner .icon_contain > li.about{ bottom:25%; z-index: 2; }
    .main_banner .icon_contain > li.company{ left: 18%; bottom: 50%; }
    .main_banner .icon_contain > li.company img.icon{ height: 11vw; }
    .main_banner .icon_contain > li.link img.icon{ height:25vw; }
    .main_banner .icon_contain > li.newsroom{ bottom:39%; }
    .main_banner .icon_contain > li.solution{ left: 31%; bottom: 33%; }

    .main_banner .icon_contain > li.link_btn .bubble{ width:14vw; }
    .main_banner .icon_contain > li.protfolio{ left: 33%; }
    .main_banner .icon_contain > li.protfolio img.icon{height: 13vw;}
}

@media screen and (max-width: 650px) { 
    .main_banner { padding:80px 0 40px 0; }
    .main_banner .click_produce{ font-size:2.5vw; bottom:-5vw; }
}



/* footer */
footer { padding:40px 0; }

footer .f_top{ display:flex; justify-content: space-between; align-items: flex-end; }
footer .f_top .btn_list{ display:flex;  }
footer .f_top .btn_list li{ margin-right:10px; border:1px solid #ECECEC; font-size: 14px; font-weight: 600; color:#7f7f7f; }
footer .f_top .btn_list li:last-child{ margin-right:0; }
footer .f_top .btn_list li a{ display:flex; justify-content: space-between; align-items: center; height:100%; padding:10px 15px; }
footer .f_top .btn_list li a img{ transition : transform 0.5s;  }
footer .f_top .btn_list li a:hover img{ transform: rotate(180deg); }
footer .f_top .btn_list li a p{ margin-right:15px; }

footer .f_bottom{ margin-top:40px; display:flex; align-items: flex-end;  }
footer .f_bottom .company_info{ width:50%;  }
footer .f_bottom .company_info .info_list{ display:flex; align-items: center; margin-bottom:5px; }
footer .f_bottom .company_info .info_list li{ margin:0 10px; display:block; font-size:16px; color:#7f7f7f; line-height: 1.5rem; }
footer .f_bottom .company_info .info_list li::after{ content:'|'; margin-left:10px;  }
footer .f_bottom .company_info .info_list li:first-child{margin-left:0; }
footer .f_bottom .company_info .info_list li:last-child::after{ display:none; }
footer .f_bottom .copy_right{ display:flex; width:50%; align-items: flex-end; justify-content: flex-end; font-size: 14px; color:rgba(127, 127, 127, 0.4); }

@media screen and (max-width: 1250px) { 

    footer .f_top .logo_box{ width:214px; }
    footer .f_top .logo_box img{ width:100%; }

    footer .f_bottom{ flex-wrap: wrap; }    
    footer .f_bottom .company_info{ width:100%; }
    footer .f_bottom .company_info .info_list{ flex-wrap: wrap; }
    footer .f_bottom .company_info .info_list li{ margin:0; width:100%;  }
    footer .f_bottom .company_info .info_list li::after{ display:none; }


    footer .f_bottom .copy_right{ width:100%; }
} 
@media screen and (max-width: 650px) { 
    footer .f_top{ flex-wrap: wrap; }
    footer .f_top .logo_box{ width:100%; display:flex; align-items: center; justify-content: center; }
    footer .f_top .logo_box img{ width:150px; }

    footer .f_top .btn_list{ width:100%; margin-top:20px; justify-content: center; }
    footer .f_top .btn_list li{ font-size: 13px; }
    
    footer .f_bottom{ margin-top: 20px; }
    footer .f_bottom .company_info .info_list li{ font-size: 14px; text-align: center; }
    footer .f_bottom .copy_right{ justify-content: center; margin-top:10px; }
    footer .f_top .btn_list{ flex-wrap:wrap; }
    footer .f_top .btn_list li{ margin:5px; }

} 


/*============================ sub common =========================*/
.sub_sec .sub_bnr{ 
    background-image: url('../img/sub01_banner_background.png'); position: relative;
    background-size:cover; background-position: center; height:290px; overflow: hidden;
    display:flex; align-items: center; justify-content: center;
}
.sub_sec .sub_bnr .sub_background{ 
    position: absolute; top:0; left:0; width:100%; height:100%;  transform:scale(1.4); 
    transition: transform 2.5s , opacity 2s; background-image: url('../img/sub01_banner_background.png');
    background-size:cover; background-position: center;
}
.sub_sec .sub_bnr.on .sub_background{ transform: scale(1); }
.sub_sec .sub_bnr .titleWrap{ width:100%; position:relative; }
.sub_sec .sub_bnr .titleWrap p.title{ 
    font-size: 40px; text-align: center; font-family: 'GmarketSansBold'; 
    background: linear-gradient(270.51deg, #F1922F 1.62%, rgba(241, 146, 47, 0) 99.71%), #1998BF;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sub_sec .sub_bnr .step_box{ display:flex; align-items: center; justify-content:center; width:100%; margin-top:80px; position:relative; }
.sub_sec .sub_bnr .step_box .line{ width:100%; height:1px; background-color:#797A91;  }
.sub_sec .sub_bnr .step_box .step_wrap{ position:absolute; display:flex; align-items: center; justify-content: center;  }

.sub_sec .sub_bnr .step_box .step_wrap > li{  margin-top:-30px; width:calc(100% / 5); }
.sub_sec .sub_bnr .step_box .step_wrap > li a{ display:flex; align-items: center; justify-content: center; flex-direction: column; }
.sub_sec .sub_bnr .step_box .step_wrap > li p{ color:#fff; font-weight: 600; transition:text-shadow 0.5s; }
.sub_sec .sub_bnr .step_box .step_wrap > li:hover p{ text-shadow: 0 0 5px #7bc7de; }
.sub_sec .sub_bnr .step_box .step_wrap > li.on p{ color:rgba(25, 152, 191, 1); }
.sub_sec .sub_bnr .step_box .step_wrap > li .circle{ display:flex; justify-content: center; align-items: center; width:20px; height:20px; border-radius:50%; background-color:#797A91; margin-top:10px; transition:box-shadow 0.5s; }
.sub_sec .sub_bnr .step_box .step_wrap > li:hover .circle{ box-shadow: 0 0 5px #7bc7de; }
.sub_sec .sub_bnr .step_box .step_wrap > li .circle::before{ content:''; display:block; width:12px; height:12px; border-radius:50%; background-color:#fff; opacity:0; transition:opacity 0.5s; }
.sub_sec .sub_bnr .step_box .step_wrap > li:hover .circle::before{ opacity:1; }
.sub_sec .sub_bnr .step_box .step_wrap > li.on .circle::before{ opacity:1; }

@media screen and (max-width: 1250px) {
    .sub_sec .sub_bnr{ height:auto; padding:50px 0; }

    .sub_sec .sub_bnr .step_box{ margin-top:30px; flex-wrap: wrap; }
    .sub_sec .sub_bnr .step_box .line{ display:none; }
    .sub_sec .sub_bnr .step_box .step_wrap{ position: static; flex-wrap: wrap; }
    .sub_sec .sub_bnr .step_box .step_wrap > li{ margin-top:0; padding:10px; line-height: 1.5em; width:165px; }
    .sub_sec .sub_bnr .step_box .step_wrap > li a{ 
        display:block; height:100%; text-align: center; padding:5px 10px; 
        font-size: 13px; position:relative;
    }
    .sub_sec .sub_bnr .step_box .step_wrap > li a:after {
        content: ""; position: absolute;
        width: 0; height: 1px; bottom: 0; right: 0;
        background: rgba(255,255,255,0.5); transition: all 0.5s ease;
    }
    .sub_sec .sub_bnr .step_box .step_wrap > li a:before {
        content: ""; position: absolute;
        width: 0; height: 1px; top: 0; left: 0;
        background: rgba(255,255,255,0.5); transition: all 0.5s ease;
    }
    .sub_sec .sub_bnr .step_box .step_wrap > li a:hover:before,
    .sub_sec .sub_bnr .step_box .step_wrap > li a:hover:after {
        width: 100%;
        transition: all 0.5s ease;
    }
    .sub_sec .sub_bnr .step_box .step_wrap > li .circle{ display:none; }
} /* tablet */
@media screen and (max-width: 650px) { 
    .sub_sec .sub_bnr .titleWrap p.title{ font-size: 25px; }

} /* mobile */

/*============================ sub01_1 ============================*/
.sub01_1 .art_01 { 
    padding:40px 0; background-image: url('../img/sub01_1_arti01.png'); 
    background-position: center; background-size:cover; background-repeat: no-repeat;
    height:520px; font-weight: 600; font-size: 40px;
}
.sub01_1 .art_01 .inner{ display:flex; height:100%; align-items: flex-end; }
.sub01_1 .art_01 p{ animation: fade-up 1s ease-in-out; }


.sub01_1 .s_title{ text-align: center; font-family: 'GmarketSansBold'; font-size:30px; }
.sub01_1 .art_02 { margin:10px 0; padding:100px 0; } 
.sub01_1 .art_02 .ct_01{ display:flex; margin-top:50px; opacity:0; transform: translateY(5%); transition:opacity 1.5s ,transform 1s;  }
.sub01_1 .art_02.on .ct_01{ opacity: 1; transform: translateY(0); }
.sub01_1 .ct_01{ display:flex; margin-top:50px;  }
.sub01_1 .ct_01 .left_ct{ width:50%; }
.sub01_1 .ct_title{ font-size: 18px; font-weight: 600; }
.sub01_1 .bold_title{ margin-top:10px; font-family:'GmarketSansBold'; font-size: 40px;  }
.sub01_1 .ct_content{ margin-top:20px; font-size: 20px; color:rgba(127, 127, 127, 1); font-weight: 600; }
.sub01_1 .ct_content b.blue{ color:rgba(25, 152, 191, 1); }
.sub01_1 .ct_content b.green{ color:rgba(70, 181, 160, 1); }
.sub01_1 .ct_content b.orange{ color:rgba(241, 146, 47, 1); }
.sub01_1 .ct_01 .right_logo{ width:50%; display:flex; align-items: center; justify-content: center; }
.sub01_1 .ct_01 .right_logo>img{ max-width: 100%; }

.sub01_1 .art_03{ padding:60px 0; }
.sub01_1 .art_03 .list_wrap{ position:relative; display:flex; align-items: center; justify-content: center; }
.sub01_1 .art_03 .step_list{ display:flex; width:100%; margin-top:60px; }
.sub01_1 .art_03 .step_list > li { width:calc(100% / 3); display:flex; align-items: center; justify-content: center; }
.sub01_1 .art_03 .step_list > li .step_wrap{ display:flex; flex-direction: column; align-items: center; }
.sub01_1 .art_03 .step_list > li .step_wrap .circle{ 
    width:300px; height:300px; border-radius:50%; background-color:#fff;
    display:flex; align-items: center; justify-content: center; border:2px solid #fff;
    flex-direction: column; font-size: 26px; position: relative;
    transition:margin 2s , opacity 1s; font-weight: 600;
}
.sub01_1 .art_03 .step_list > li:nth-child(1) .step_wrap .circle{ border-color:#1998BF; margin-left:200%; opacity:0;  }
.sub01_1 .art_03.on .step_list > li:nth-child(1) .step_wrap .circle{ margin-left:0; opacity:1; }
.sub01_1 .art_03 .step_list > li:nth-child(2) .step_wrap .circle{ border-color:#46B5A0; position:relative; z-index: 1;  }
.sub01_1 .art_03 .step_list > li:nth-child(3) .step_wrap .circle{ border-color:#F1922F; margin-left:-200%; opacity:0; }
.sub01_1 .art_03.on .step_list > li:nth-child(3) .step_wrap .circle{  margin-left:0; opacity:1; }

.sub01_1 .art_03 .step_list > li .step_wrap .circle b{ margin-top:10px; font-weight: 600; }
.sub01_1 .art_03 .step_list > li:nth-child(1) .step_wrap .circle b{ color:#1998BF; }
.sub01_1 .art_03 .step_list > li:nth-child(2) .step_wrap .circle b{ color:#46B5A0; }
.sub01_1 .art_03 .step_list > li:nth-child(3) .step_wrap .circle b{ color:#F1922F; }

.sub01_1 .art_03 .step_list > li .step_wrap p{ 
    margin-top:40px; text-align: center; font-size: 18px; 
    opacity:0; transition:opacity 1.5s; font-weight: 600;
}
.sub01_1 .art_03.on .step_list > li .step_wrap p{ opacity:1; }

.sub01_1 .art_03 p.line{ 
    width:600px; height:2px; position:absolute; margin-top:-25px; opacity:0; 
    background: linear-gradient(270deg, #F1922F -11.98%, rgba(241, 146, 47, 0) 104.88%), #1998BF;  
    transition:opacity 0.5s;  transition-delay: 2s;
}
.sub01_1 .art_03.on p.line{
    opacity:1; 
}

.sub01_1 .art_04{ padding:100px 0; background-image: url('../img/sub01_1_art03_background.png'); background-repeat: no-repeat; background-size:50%; background-position: right bottom 65%; background-attachment: fixed; }

.sub01_1 .art_04 .inner{ opacity:0; transform: translateY(5%); transition:opacity 1.5s , transform 1.5s; }
.sub01_1 .art_04.on .inner{ opacity:1; transform: translateY(0); }

@media screen and (max-width: 1250px) { 
    
    .sub01_1 .art_01{ font-size: 30px; height:250px; }
    .sub01_1 .ct_title{ font-size: 16px; }
    .sub01_1 .bold_title{ font-size:30px; }
    .sub01_1 .ct_content{ font-size: 16px; }
    
    .sub01_1 .art_03 .step_list > li .step_wrap .circle{ width:200px; height:200px; font-size: 20px; }
    .sub01_1 .art_03 p.line{ width:50%; }
    .sub01_1 .art_03 .step_list > li .step_wrap p{ font-size: 16px; }
    
} /* tablet */
@media screen and (max-width: 920px) { 

    .sub01_1 .ct_01{ flex-wrap: wrap; }
    .sub01_1 .ct_01 .left_ct{ width:100%; }
    .sub01_1 .ct_01 .right_logo{ width:100%; margin-top:40px; }
    .sub01_1 .ct_01 .right_logo>img{ max-width:300px; width:100%; }
    .sub01_1 .ct_01 .ct_title{ text-align: center; }
    .sub01_1 .ct_01 .bold_title{ text-align: center; }
    .sub01_1 .ct_01 .ct_content{ text-align: center; }


    .sub01_1 .art_03 p.line{ display:none; }
    .sub01_1 .art_03 .step_list{ flex-wrap: wrap; }
    .sub01_1 .art_03 .step_list > li{ width:100%; margin-bottom:40px; }
    .sub01_1 .art_03 .step_list > li .step_wrap p{ margin-top:15px; }
    .sub01_1 .art_03 .step_list > li .step_wrap .circle{ width:40vw; height:40vw; font-size: 4vw; }

    .sub01_1 .art_03 .step_list > li:nth-child(1) .step_wrap .circle{ margin-left:0; transform: translateY(15%); transition:opacity 1s, transform 1s; }
    .sub01_1 .art_03.on .step_list > li:nth-child(1) .step_wrap .circle{  transform: translateY(0); }
    .sub01_1 .art_03 .step_list > li:nth-child(2) .step_wrap .circle{ opacity:0; transform: translateY(15%);  transition:opacity 2s, transform 2s; }
    .sub01_1 .art_03.on .step_list > li:nth-child(2) .step_wrap .circle{ opacity:1;  transform: translateY(0); }
    .sub01_1 .art_03 .step_list > li:nth-child(3) .step_wrap .circle{ margin-left:0; transform: translateY(15%); transition:opacity 3s, transform 3s; }
    .sub01_1 .art_03.on .step_list > li:nth-child(3) .step_wrap .circle{ transform: translateY(0); }


}
@media screen and (max-width: 650px) { 
    .sub01_1 .art_02{ padding:50px 0; }
    .sub01_1 .art_01{ font-size: 5vw; }

    .sub01_1 .art_03 .step_list > li .step_wrap p{font-size:14px; }

    .sub01_1 .ct_01 .right_logo>img{ max-width:200px; width:80%; }

    .sub01_1 .ct_title{ font-size: 14px; }
    .sub01_1 .bold_title{ font-size: 25px; }
    .sub01_1 .ct_content{ font-size: 14px; }

    .sub01_1 .art_04{ background-size: 70%; }
    .sub01_1 .art_04 .ct_content br{ display:none; }

} /* mobile */


/*============================ sub01_2 ============================*/

.sub01_2 .art_01{ padding:100px 0; background-size: 80%; background-repeat: no-repeat; background-position: center; }
.sub01_2 .art_01 .org_wrap .logo{  display:block; margin:0 auto; max-width:400px; width:60%; animation:fade-up ease-in-out 1s;  }

.sub01_2 .art_01 .org_divide{ display:flex; padding-top:80px; line-height: 1.5rem; position:relative; }
.sub01_2 .art_01 .org_divide::before{ 
    content:''; display:block; position:absolute; width:0%;  height:1px; 
    background: linear-gradient(90deg, #1998BF 0%, rgba(25, 152, 191, 0) 100%), #F1922F; 
    left:16.7%; top:50px; opacity:0; transition:opacity 1s, left 1s, width 1s; transition-delay: 0.5s;
}
.sub01_2 .art_01.on .org_divide::before{ opacity:1; left:16.7%; width:66.7%; }
.sub01_2 .art_01 .org_divide>li{ width:calc(100% / 3); text-align: center; padding:10px; font-size: 16px; font-weight: 600; opacity:0; transform: translateY(5%); }
.sub01_2 .art_01.on .org_divide>li{ opacity:1; transform: translateY(0); transition:opacity 1s, transform 1s; }
.sub01_2 .art_01 .org_divide>li:nth-child(2){ transition-delay: 0.5s; }
.sub01_2 .art_01 .org_divide>li:nth-child(3){ transition-delay: 1s; }
.sub01_2 .art_01 .org_divide>li .boxWrap{ position:relative;  }

.sub01_2 .art_01 .org_divide>li .boxWrap::before{ content:''; display:block; width:1px; height:100%; position: absolute; top:-40px; left:calc(50%); }
.sub01_2 .art_01 .org_divide>li:nth-child(1) .boxWrap::before{ background-color: #1998BF; }
.sub01_2 .art_01 .org_divide>li:nth-child(2) .boxWrap::before{ background-color: #19946B; height:100%; top:-70px; }
.sub01_2 .art_01 .org_divide>li:nth-child(3) .boxWrap::before{ background-color: #F1922F; height:40%; }

.sub01_2 .art_01 .org_divide>li .boxWrap>li{ position:relative; }

.sub01_2 .art_01 .org_divide>li .boxWrap>li.full p{ background-color:#fff; margin-bottom:30px; display:block; padding:22px 25px; position:relative; border:1px solid #7F7F7F; }
.sub01_2 .art_01 .org_divide>li .boxWrap p::before{ 
    content:''; display:block; position:absolute;
    width:8px; height:10px; top : -10px; left:calc(50% - 4px);
}
.sub01_2 .art_01 .org_divide>li .boxWrap>li.full p.blue{ background-color:#1998BF; color:#fff; border:none; }
.sub01_2 .art_01 .org_divide>li .boxWrap>li.full p.green{ background-color:#19946B; color:#fff; border:none; }
.sub01_2 .art_01 .org_divide>li .boxWrap>li.full p.orange{ background-color:#F1922F; color:#fff; border:none; }

.sub01_2 .art_01 .org_divide>li .boxWrap p.blue_circle::before{ background-color:#1998BF; }
.sub01_2 .art_01 .org_divide>li .boxWrap p.green_circle::before{ background-color:#19946B; }
.sub01_2 .art_01 .org_divide>li .boxWrap p.orange_circle::before{ background-color:#F1922F;  }

.sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul { display:flex; align-items: center; justify-content: center; position:relative; }
.sub01_2 .art_01 .org_divide>li .boxWrap>li.half:nth-child(2) > ul::before{ content:''; width:calc(50% + 10px); height:1px; background-color:#F1922F; position:absolute; top:-20px; }
.sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li{ margin-bottom:30px; display:block; width:50%; position:relative; }
.sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li::before{ content:''; display:block; position:absolute; background-color:#F1922F; width:1px; height:50px; top:-40px; left:calc(50% + 5px); }
.sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li:first-child:before{ left:calc(50% - 5px); }
.sub01_2 .art_01 .org_divide>li .boxWrap>li.half:nth-child(2) > ul > li:before{ background: #F1922F; top:-20px; }
.sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li p{ background-color:#fff; display:block; width:100%; padding:22px 25px; position:relative; z-index: 1; border:1px solid #7f7f7f; }
.sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li:first-child{ padding-right:10px; }
.sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li:last-child{ padding-left:10px; }

@media screen and (max-width: 820px) { 
    .sub01_2 .art_01 .org_divide{ flex-wrap: wrap; }
    .sub01_2 .art_01 .org_divide>li{ width:100%; }
    .sub01_2 .art_01 .org_divide::before{ display:none; }
    .sub01_2 .art_01 .org_divide>li .boxWrap::before{ top:0; }
    .sub01_2 .art_01 .org_divide>li:nth-child(2) .boxWrap::before{ top:0; }
    .sub01_2 .art_01 .org_divide>li:nth-child(3) .boxWrap::before{ top:0; height:27%; }

    .sub01_2 .art_01 .org_divide>li .boxWrap p:first-child::before{ display:none; }
    .sub01_2 .art_01 .org_divide>li .boxWrap>li.full p{ width:80%; max-width:400px; margin:0 auto 30px auto; }
    .sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li:first-child{ justify-content: flex-end; }
    .sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li{ display:flex; align-items: center;  }
    .sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li p{ width:80%; max-width: 190px; }
    .sub01_2 .art_01 .org_divide>li .boxWrap>li.half:nth-child(2) > ul::before{ width:30%; }
    .sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li::before{ left:30%; }
    .sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li:first-child:before{ left:70%; }
    
}

@media screen and (max-width: 650px) { 
    .sub01_2 .art_01{ padding:50px 0; }
    .sub01_2 .art_01 .org_divide{ padding-top:50px; }
    .sub01_2 .art_01 .org_divide>li{ margin-bottom:40px; }
    .sub01_2 .art_01 .org_divide>li:last-child{ margin-bottom:0; }
    .sub01_2 .art_01 .org_divide>li p{ font-size: 13px; }
    .sub01_2 .art_01 .org_divide>li .boxWrap>li.full p{ padding:10px 15px; max-width:300px; margin:0 auto 20px auto; }

    .sub01_2 .art_01 .org_divide>li:nth-child(3) .boxWrap::before{ height:28.5%; }
    .sub01_2 .art_01 .org_divide>li .boxWrap>li.half:nth-child(2) > ul::before{ top:-10px; }
    .sub01_2 .art_01 .org_divide>li .boxWrap>li.half:nth-child(2) > ul > li:before{ top:-10px; }
    .sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li{ margin-bottom:20px;}
    .sub01_2 .art_01 .org_divide>li .boxWrap>li.half > ul > li p{ padding:10px 15px; max-width:140px; }
}


/*============================ sub01_3 ============================*/
.sub01_3 .art_01{ padding:100px 0; }
.sub01_3 .art_01 .logo{ display:block; margin:0 auto; width:60%; max-width: 400px; animation:fade-up ease-in-out 1s; }

.sub01_3 .art_02 .history_wrap{ position:relative; }
.sub01_3 .art_02 .history_wrap .background{ width:200px; height:100%; background-color:#79B1EE; position:absolute; top:0; left:0; }
.sub01_3 .art_02 .history_wrap .day_wrap{ position:relative; }
.sub01_3 .art_02 .history_wrap .day_wrap .year{ display:flex; justify-content: flex-start; opacity:0; transition:opacity 1s;  }
.sub01_3 .art_02 .history_wrap .day_wrap .year.on{ opacity:1; }
.sub01_3 .art_02 .history_wrap .day_wrap .year p{ width:200px; text-align: center; padding:20px 10px; font-family: 'GmarketSansBold'; font-size: 30px; color:#fff; }
.sub01_3 .art_02 .history_wrap .day_wrap .day{ display:flex; }
.sub01_3 .art_02 .history_wrap .day_wrap .day .month{ 
    width:200px; text-align: right; padding:10px 10px; color:#fff; 
    font-family: 'GmarketSansBold'; font-size: 25px; 
    transform: translateX(3%); opacity:0; transition: opacity 1s , transform 1s;
}
.sub01_3 .art_02 .history_wrap .day_wrap .day.on .month{ opacity:1; transform:translateX(0); }
.sub01_3 .art_02 .history_wrap .day_wrap .day .content{ 
    position:relative; width:calc(100% - 200px); padding:10px 20px 10px 80px; 
    font-weight: 600; transform: translateX(-3%); opacity:0; transition: opacity 1s , transform 1s;
}
.sub01_3 .art_02 .history_wrap .day_wrap .day.on .content{ opacity:1; transform:translateX(0); }
.sub01_3 .art_02 .history_wrap .day_wrap .day .content::before{ content:''; display:block; position:absolute; width:30px; height:1px; background-color:#222; left:10px; top:0; margin-top: 26px; }
.sub01_3 .art_02 .history_wrap .day_wrap .day .content p{ position:relative; padding:5px 0; }
.sub01_3 .art_02 .history_wrap .day_wrap .day .content p::after{ content:''; display:block; position:absolute; width:15px; height:15px; background-color:#222; left:-30px; top:0; margin-top:8px; border-radius:50%; }
.sub01_3 .art_02 .history_wrap .day_wrap .day:last-child{ padding-bottom:40px; }

.sub01_3 .art_02 .history_wrap.right .background{ left:auto; right:0; top:0; }
.sub01_3 .art_02 .history_wrap.right .day_wrap .year{ justify-content: flex-end; }
.sub01_3 .art_02 .history_wrap.right .day_wrap .day{ flex-direction: row-reverse; }
.sub01_3 .art_02 .history_wrap.right .day_wrap .day .month{ text-align: left; transform: translateX(-3%);  }
.sub01_3 .art_02 .history_wrap.right .day_wrap .day.on .month{ transform: translateX(0);  }
.sub01_3 .art_02 .history_wrap.right .day_wrap .day .content{ padding:10px 80px 10px 20px; transform: translateX(3%); }
.sub01_3 .art_02 .history_wrap.right .day_wrap .day.on .content{ transform: translateX(0); }
.sub01_3 .art_02 .history_wrap.right .day_wrap .day .content::before{ left:auto; right:10px; }
.sub01_3 .art_02 .history_wrap.right .day_wrap .day .content p{ text-align:right; }
.sub01_3 .art_02 .history_wrap.right .day_wrap .day .content p::after{ left:auto; right: -30px; }

.sub01_3 .art_03{ background-color:#222; padding:100px 0; background-image: url('../img/sub01_3_art03_bg.png'); background-size: contain; background-repeat: no-repeat; background-position: right center; }
.sub01_3 .art_03 p { color:#fff; font-size: 40px; font-weight: 600; transform: translateY(8%); opacity:0; transition:transform 1s, opacity 1s; }
.sub01_3 .art_03.on p{ opacity:1; transform: translateY(0); }


@media screen and (max-width: 1250px) { 
    .sub01_3 .art_02 .inner{ padding:0; }
    .sub01_3 .art_03 p{ font-size: 30px; }
}

@media screen and (max-width: 900px) {
    .sub01_3 .art_02 .history_wrap .background{ width:150px; }
    .sub01_3 .art_02 .history_wrap .day_wrap .year p{ width:150px; }
    .sub01_3 .art_02 .history_wrap .day_wrap .day .month{ width:150px; }
    .sub01_3 .art_02 .history_wrap .day_wrap .day .content{ width:calc(100% - 150px); }
}

@media screen and (max-width: 650px) {
    .sub01_3 .art_01{ padding:50px 0; }

    .sub01_3 .art_02 .history_wrap .day_wrap .year p{ font-size: 18px; }
    .sub01_3 .art_02 .history_wrap .day_wrap .day .month{ font-size: 16px; }
    .sub01_3 .art_02 .history_wrap .background{ width:80px; }
    .sub01_3 .art_02 .history_wrap .day_wrap .year p{ width:80px; padding:15px 0; }
    .sub01_3 .art_02 .history_wrap .day_wrap .day .month{ width:80px; font-size: 16px; }
    .sub01_3 .art_02 .history_wrap .day_wrap .day .content{ width:calc(100% - 80px); font-size: 13px; padding: 10px 20px 10px 20px; }
    .sub01_3 .art_02 .history_wrap .day_wrap .day .content::before{ width:5px;left:2px; top:0; margin-top:20px;  }
    .sub01_3 .art_02 .history_wrap .day_wrap .day .content p::after{ width:5px; height:5px; left:-8px; margin-top:9px;  }

    .sub01_3 .art_02 .history_wrap.right .day_wrap .day .content{ padding: 10px 20px 10px 20px; }  
    .sub01_3 .art_02 .history_wrap.right .day_wrap .day .content::before{ right:2px; }
    .sub01_3 .art_02 .history_wrap.right .day_wrap .day .content p::after{ right:-10px; }

    .sub01_3 .art_03 p{font-size:5vw ;}
}


/*============================ sub01_4 ============================*/
.sub01_4 .art_01{ padding:100px 0; }
.sub01_4 .art_01 .logo{ display:block; margin:0 auto; width:60%; max-width: 400px; animation:fade-up ease-in-out 1.5s; }
.sub01_4 .art_01 .part_wrap{ background:#F3F4F8; margin-top:100px; border-radius: 20px; overflow: hidden; padding:78px 100px; }
.sub01_4 .art_01 .part_wrap .part_list{ border-radius:30px; overflow: hidden; display:flex; flex-wrap: wrap;  } 
.sub01_4 .art_01 .part_wrap .part_list > li{ width:calc(100% / 3); padding:2px ;  }
.sub01_4 .art_01 .part_wrap .part_list > li > div{ padding:50px 10px; height:100%; background-color:#fff; overflow: hidden; }
.sub01_4 .art_01 .part_wrap .part_list > li .logo_box{ margin:0 auto; width:100%; max-width:250px; height:120px; background-repeat: no-repeat; background-size: contain; background-position: center; transition:transform 0.5s; }
.sub01_4 .art_01 .part_wrap .part_list > li:hover .logo_box{ transform:scale(1.1); }
.sub01_4 .art_01 .part_wrap .part_list > li .title{ text-align: center; padding:25px 0 0 0; font-weight: 600; font-size: 22px; transition:color 0.5s; }
.sub01_4 .art_01 .part_wrap .part_list > li:hover .title{ color:#1998BF; }

@media screen and (max-width: 1250px) {
    .sub01_4 .art_01 .part_wrap{ padding:2%; }
    .sub01_4 .art_01 .part_wrap .part_list > li > div{ padding:10% 10px; }
    .sub01_4 .art_01 .part_wrap .part_list > li .title{ font-size: 18px; }
}
@media screen and (max-width: 650px) {
    .sub01_4 .art_01{ padding:50px 0; }
    .sub01_4 .art_01 .part_wrap{ margin-top:50px; }
    .sub01_4 .art_01 .part_wrap .part_list > li{ width:calc(100% / 2); }
    .sub01_4 .art_01 .part_wrap .part_list > li .title{ font-size: 3.5vw; }
    .sub01_4 .art_01 .part_wrap .part_list > li .logo_box{ height:20vw; }
    .sub01_4 .art_01 .part_wrap .part_list > li .title{ padding-top:5vw; }
}

/*============================ sub01_5 ============================*/
.sub01_5 .art_01{ padding:100px 0; }
.sub01_5 .art_01 .logo{ display:block; margin:0 auto; width:60%; max-width: 400px; animation:fade-up ease-in-out 1.5s; }

.sub01_5 .art_01 .map_box{ margin-top:100px; padding:8px 10px; background: linear-gradient(270.51deg, #F1922F 1.62%, rgba(241, 146, 47, 0) 99.71%), #1998BF; }
.sub01_5 .art_01 .map_box iframe{ height:500px; background-color: #222; }

.sub01_5 .art_01 .map_produce{ display:flex; flex-wrap: wrap; } 
.sub01_5 .art_01 .map_produce .ct_01{ width:50%; padding-top:50px; background-image: url('../img/sub01_5_produce_bg.png'); background-repeat: no-repeat; background-size: 50%; background-position: center; }
.sub01_5 .art_01 .map_produce .ct_01 p{ font-size: 33px; font-weight: 600; opacity:0; transform: translateY(5%); transition:opacity 1s , transform 1.5s; }
.sub01_5 .art_01 .map_produce.on .ct_01 p{ opacity:1; transform: translateY(0); }
.sub01_5 .art_01 .map_produce .ct_02{ width:50%; padding-top:50px; padding-left:30px; border-left:1px solid #E4E4E4; opacity:0; transform: translateY(5%); transition:opacity 1s, transform 1.5s; }
.sub01_5 .art_01 .map_produce.on .ct_02{ opacity:1; transform: translateY(0); }
.sub01_5 .art_01 .map_produce .ct_02 .produce .title{ font-family: 'GmarketSansBold'; font-size: 24px; }
.sub01_5 .art_01 .map_produce .ct_02 .produce .title.blue{ color: #1998BF;}
.sub01_5 .art_01 .map_produce .ct_02 .produce .title.green{ color: #46B5A0;}
.sub01_5 .art_01 .map_produce .ct_02 .produce .title.orange{ color: #F1922F;}
.sub01_5 .art_01 .map_produce .ct_02 .produce .content{ padding:10px 0; font-weight: 600; }
.sub01_5 .art_01 .map_produce .ct_02 .produce .content br{ display:none; }


@media screen and (max-width: 1250px) {
    .sub01_5 .art_01 .map_produce .ct_01 p{ font-size: 30px; }
}
@media screen and (max-width: 955px) {
    .sub01_5 .art_01 .map_produce .ct_01{ width:100%; margin-bottom:40px; padding:50px 0; background-size: 30%; }
    .sub01_5 .art_01 .map_produce .ct_01 p{ text-align: center; }
    .sub01_5 .art_01 .map_produce .ct_02{ width:100%; }
    .sub01_5 .art_01 .map_produce .ct_02 .produce { text-align: center; }
    .sub01_5 .art_01 .map_produce .ct_02{ padding:0; }
}
@media screen and (max-width: 650px) {
    .sub01_5 .art_01{ background-size: 100% 80vw; padding:50px 0; }
    .sub01_5 .art_01 .map_box{ margin-top:50px; }
    .sub01_5 .art_01 .map_box iframe{ height:55vw; }
    .sub01_5 .art_01 .map_produce .ct_01 p{ font-size:5vw ; }

    .sub01_5 .art_01 .map_produce .ct_02 .produce .title{ font-size: 18px; }
    .sub01_5 .art_01 .map_produce .ct_02 .produce .content{ font-size: 14px; }
    .sub01_5 .art_01 .map_produce .ct_02 .produce .content br{ display:inline-block; }
}


/*============================ sub02_1 ============================*/
.sub_sec.sub02 .sub_bnr .sub_background{ background-image: url('../img/sub02_banner_background.png'); }
.sub_sec.sub02 .art_01{ padding:100px 0; background-image: url('../img/sub04_bg.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; }
.sub_sec.sub02_1 .art_01{ padding:100px 0 0 0; }
.sub_sec.sub02 .art_01 .content_container{ display:flex; flex-wrap: wrap; align-items:flex-start; opacity:0; transform:translateY(10%); transition:opacity 1.5s ,transform 1.5s; }
.sub_sec.sub02 .art_01 .content_container.on{ opacity:1; transform:translateY(0); }
.sub_sec.sub02 .art_01 .content_container.left_img{ flex-direction: row-reverse; }
.sub_sec.sub02 .art_01 .content_container + .content_container{ margin-top:100px; }

.sub_sec.sub02 .art_01 .content_container .content-box{ width:40%; position:relative; }
.sub_sec.sub02.sub02_4 .art_01 .content_container .content-box{ width: 60%; }

.sub_sec.sub02.sub02_4 .art_01 .content_container .content-box .mobile_img{ display: none; }

.sub_sec.sub02 .art_01 .content_container .content-box .small_title{ color:#7f7f7f; }
.sub_sec.sub02 .art_01 .content_container .content-box .small_title span{ background: linear-gradient(to top, rgba(217, 217, 217, 0.4) 50%, transparent 50%); }
.sub_sec.sub02 .art_01 .content_container .content-box .titleBox{ padding:20px 0; }
.sub_sec.sub02 .art_01 .content_container .content-box .title{ font-family: 'GmarketSansBold'; font-size: 30px; }
.sub_sec.sub02 .art_01 .content_container .content-box .tag_box{ font-size: 20px; color:#7F7F7F; display:flex; flex-wrap: wrap; }
.sub_sec.sub02 .art_01 .content_container .content-box .content{ color:#7f7f7f; font-size:18px;  }
.sub_sec.sub02 .art_01 .content_container .content-box .content b.blue{ color:#79B1EE; }
.sub_sec.sub02 .art_01 .content_container .content-box .hunting_list{ margin-top: 40px;  text-align: left; }
.sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li { 
    width: 100%; display: flex; flex-wrap: wrap; align-items: center; 
    padding-bottom: 20px; background-size: 80px; background-repeat: no-repeat; 
    background-position:left 20px center; opacity: 0; transform: translateY(50px); transition: opacity 1s , transform 1s;
}
.sub_sec.sub02 .art_01 .content_container.on .content-box .hunting_list > li{ opacity: 1; transform: translateY(0); }
.sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(1){ background-image: url('../img/sub04_4_icon01.png'); }
.sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(2){ transition-delay: 0.2s; background-image: url('../img/sub04_4_icon02.png'); }
.sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(3){ transition-delay: 0.4s; background-image: url('../img/sub04_4_icon03.png'); }
.sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(4){ transition-delay: 0.6s; background-image: url('../img/sub04_4_icon04.png'); }
.sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .h_title{ font-family: 'GmarketSansMedium'; color:#79B1EE; width:340px; font-size:24px; }
.sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .hunting_list{ width: calc(100% - 340px); }

.sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(2n) .h_title{ padding-left: 20px;  }
.sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .h_content{ padding-left: 20px; }
.sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .h_content span{ display: block; padding: 5px 0 0 10px; position: relative; font-size: 16px; }
.sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .h_content span::before{ content:'·'; position: absolute; left: 0; }


.sub_sec.sub02 .art_01 .content_container .img-box{ width:60%; }
.sub_sec.sub02.sub02_4 .art_01 .content_container .img-box{ width: 40%; }
.sub_sec.sub02 .art_01 .content_container .img-box>img{ display:block; margin:0 auto; max-width: 100%; padding:0 30px; }
.sub_sec.sub02 .art_01 .content_container .img-box.right{ display:flex; justify-content: flex-end; }
.sub_sec.sub02 .art_01 .content_container .img-box.right > img{ margin: 0; padding: 0 0 0 30px; }

.sub_sec.sub02 .art_01 .content_container .img-box .category{ display:flex; flex-wrap: wrap; }
.sub_sec.sub02 .art_01 .content_container .img-box .category > li { width:calc(100% / 3); padding:10px;  }
.sub_sec.sub02 .art_01 .content_container .img-box .category > li > img{ width:100%; }
.sub_sec.sub02 .art_01 .content_container .img-box p{ color:#7F7F7F; }
.sub_sec.sub02 .art_01 .content_container .img-box p.big{ font-size: 18px; font-weight: 600; }

.sub_sec.sub02 .art_01 .float_imgbox{ background-color:#fff; padding-top:35%; padding-bottom:100px; margin-top:100px; position:relative; display:flex; flex-wrap: wrap; justify-content: flex-end; opacity:0; transition:all 1.5s; } 
.sub_sec.sub02 .art_01 .float_imgbox.on{ opacity:1; }
.sub_sec.sub02 .art_01 .float_imgbox .imgbox{ position:absolute; top:13%; left:0; max-width: 100%; padding-right: 20px; }
.sub_sec.sub02 .art_01 .float_imgbox .imgbox img{ max-width: 100%; display:block; margin:0 auto; border-right:10px solid #fff; }
.sub_sec.sub02 .art_01 .float_imgbox .content_box{ width:600px; border: 1px solid #D9D9D9; padding:5px 15px 15px 15px; }
.sub_sec.sub02 .art_01 .float_imgbox .content_box .title{ font-family: 'GmarketSansBold'; font-size: 30px; padding-left:25%; }
.sub_sec.sub02 .art_01 .float_imgbox .content_box .content{ margin-top:20px; color:#7f7f7f; border-top:1px solid #d9d9d9; padding-top:20px;  }

.sub_sec.sub02 .art_01 .produce{ margin-top: 100px; opacity:0; transform:translateY(10%); transition:opacity 1.5s , transform 1.5s;; }

.sub_sec.sub02 .art_01 .produce.on{ opacity:1; transform:translate(0); }
.sub_sec.sub02 .art_01 .produce img{ max-width: 100%; margin-bottom:40px; }
.sub_sec.sub02 .art_01 .produce img:last-child{ margin-bottom:0; }

@media screen and (max-width: 1250px) {
    .sub_sec.sub02 .art_01 .float_imgbox{ padding-top: 0; }
    .sub_sec.sub02 .art_01 .float_imgbox .imgbox{ width:50%; position:unset;  }
    .sub_sec.sub02 .art_01 .float_imgbox .imgbox img{ border-right: none; }
    .sub_sec.sub02 .art_01 .float_imgbox .content_box{ width:50%; }
    .sub_sec.sub02 .art_01 .float_imgbox .content_box .title{ padding-left: 0; padding:10px 0; }
    .sub_sec.sub02 .art_01 .float_imgbox .content_box .content{ margin:0; }

    .sub_sec.sub02 .art_01 .content_container .content-box .content{ font-size: 16px; }
    .sub_sec.sub02.sub02_4 .art_01 .content_container .content-box{ width:100%; }
    .sub_sec.sub02.sub02_4 .art_01 .content_container .img-box.right{ position: absolute; right: 0; bottom: -5vw; width: 35vw; overflow:hidden; }
    .sub_sec.sub02.sub02_4 .art_01 .content_container .img-box.right img{ transform:translateX(35px) }
}

@media screen and (max-width: 1000px) {
    .sub_sec.sub02 .art_01 .content_container .content-box{ width:100%; text-align: center; }
    .sub_sec.sub02 .art_01 .content_container .content-box .tag_box{ justify-content: center; }
    .sub_sec.sub02 .art_01 .content_container .img-box{ width:100%; margin-top:40px; }

    .sub_sec.sub02 .art_01 .float_imgbox .imgbox{ padding-right:0; width:100%; }
    .sub_sec.sub02 .art_01 .float_imgbox .content_box{ width:100%; margin-top:40px; text-align: center; }

    .sub_sec.sub02 .art_01 .content_container .img-box p{ text-align:center;}
    .sub_sec.sub02.sub02_4 .art_01 .content_container .img-box.right{ display: none; }
    .sub_sec.sub02.sub02_4 .art_01 .content_container .content-box .mobile_img{ display: block; width: 100%; max-width: 350px; margin: 20px auto; }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .h_title{ font-size:2.5vw; width: 40vw; }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .hunting_list{ width: calc(100% - 40vw); }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .h_content span{ font-size:2vw;  } 

    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(1){ transition-delay: 0.8s; }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(2){ transition-delay: 1s; }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(3){ transition-delay: 1.2s; }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(4){ transition-delay: 1.4s; }
}

@media screen and (max-width: 650px) {
    .sub_sec.sub02 .art_01 .content_container .content-box .small_title{ font-size:14px; }
    .sub_sec.sub02 .art_01 .content_container .content-box .title{ font-size: 25px; }
    .sub_sec.sub02 .art_01 .content_container .content-box .tag_box{ font-size:16px; }
    .sub_sec.sub02 .art_01 .content_container .content-box .content{ font-size:14px; }
    .sub_sec.sub02 .art_01 .content_container .content-box .content br{ display:none; }
    .sub_sec.sub02 .art_01 .content_container .content-box .content br.mo_br{ display:inline-block; }

    .sub_sec.sub02 .art_01 .content_container .img-box p{ font-size: 12px; }
    .sub_sec.sub02 .art_01 .content_container .img-box p.big{ font-size: 14px; }

    .sub_sec.sub02 .art_01 .produce{ margin-top: 50px; }
    
    .sub_sec.sub02 .art_01 .float_imgbox .content_box .title{ font-size:25px; }
    .sub_sec.sub02 .art_01 .float_imgbox .content_box .content{ font-size:14px; }
    .sub_sec.sub02 .art_01 .float_imgbox .content_box .content br{ display:none; }
    .sub_sec.sub02 .art_01 .float_imgbox .content_box .content br.mo_br{ display:inline-block; }

    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li{ display:flex;  }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .h_title{ font-size: 16px;  }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(1){ background-image: unset; }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(2){ background-image: unset; }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(3){ background-image: unset; }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(4){ background-image: unset; }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .h_content span{ font-size: 14px; }

    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .h_title{ width: 100%;  }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .h_title br{ display: none; }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li:nth-child(2n) .h_title{ padding-left:0; }
    .sub_sec.sub02 .art_01 .content_container .content-box .hunting_list > li .h_content{ width:auto; padding-left: 0;}
}

/*============================ sub03 ============================*/
.sub_sec.sub03 .sub_bnr .sub_background{ background-image: url('../img/sub03_banner_background.png'); }
.sub_sec.sub03 .art_01{ padding:100px 0; }

/*============================ sub03_1 ============================*/
.sub03_1 .art_01 .ct_title{ display:flex; align-items: center; justify-content: center; padding:40px 0; width: 100%; }
.sub03_1 .art_01 .ct_title > span{ font-family: 'GmarketSansBold'; font-size:24px; display:flex; align-items: center; flex-basis: 700px;  }
.sub03_1 .art_01 .ct_title > span b{ padding:0 40px; text-align: center; }
.sub03_1 .art_01 .ct_title > span b > span{ color:#59669D; }
.sub03_1 .art_01 .ct_title > span::before{ content:''; flex-grow: 1; height:1px; background-color: #D9D9D9; }
.sub03_1 .art_01 .ct_title > span::after{ content:''; flex-grow: 1; height:1px; background-color: #D9D9D9; }

.sub03_1 .art_01 .ct01{ animation:fade-up ease-in-out 1s; }
.sub03_1 .art_01 .ct01 .banner{ background: linear-gradient(270.05deg, #8C96BE -0.51%, rgba(140, 150, 190, 0) 99.96%), #59669D;  padding:40px 10px; color:#fff; text-align: center; }
.sub03_1 .art_01 .ct01 .banner .title{ font-size: 30px; }
.sub03_1 .art_01 .ct01 .banner .produce{ margin-top: 10px; font-size: 18px; }
.sub03_1 .art_01 .ct01 .banner .produce br{ display:none; }
.sub03_1 .art_01 .ct01 img{ max-width: 100%; }

.sub03_1 .art_01 .ct02{ margin-top: 40px; opacity:0; transform:translateY(10%); transition:opacity 1.5s , transform 1.5s; }
.sub03_1 .art_01 .ct02.on{ opacity:1; transform:translateY(0); }
.sub03_1 .art_01 .ct02 .half_box > li{ display:flex; flex-wrap: wrap; margin-bottom:40px; } 
.sub03_1 .art_01 .ct02 .half_box > li:last-child{ margin-bottom:0; } 
.sub03_1 .art_01 .ct02 .half_box > li .imgBox{ width:50%; }
.sub03_1 .art_01 .ct02 .half_box > li .imgBox img{ width: 100%; }
.sub03_1 .art_01 .ct02 .half_box > li .contentBox{ width:50%; padding-left: 40px; display:flex; align-items: center; }
.sub03_1 .art_01 .ct02 .half_box > li .contentBox .number{ font-family: 'GmarketSansBold'; color:#59669D; font-size:60px; text-shadow: 7px 4px 1px rgba(89, 102, 157, 0.2); }
.sub03_1 .art_01 .ct02 .half_box > li .contentBox .title{ padding:10px 0; font-size:20px; font-family:"GmarketSansBold";  }
.sub03_1 .art_01 .ct02 .half_box > li .contentBox .title b{ color:#59669D; }
.sub03_1 .art_01 .ct02 .half_box > li .contentBox .content{ color:#7f7f7f; }
.sub03_1 .art_01 .ct02 .half_box > li .contentBox .content b{ color:#F1922f; display:block; }

.sub03_1 .art_01 .ct02 .check_container{ margin-top: 40px; padding:40px 20px; border: 1px solid #D9D9D9;  }
.sub03_1 .art_01 .ct02 .check_container > li { position:relative; padding-left:35px; margin-bottom:20px; color:#7f7f7f; }
.sub03_1 .art_01 .ct02 .check_container > li:last-child{ margin-bottom:0; }
.sub03_1 .art_01 .ct02 .check_container > li b{ color:#F1922F; display:block; }
.sub03_1 .art_01 .ct02 .check_container > li::before{ content:''; display:block; width:25px; height:25px; position:absolute; top:0; left:0; background-image: url('../img/sub03_1_checkicon.png'); background-repeat: no-repeat; background-size: contain; background-position: center; }

.sub03_1 .art_01 .ct03{ opacity:0; transform:translateY(10%); transition:opacity 1.5s , transform 1.5s;  }
.sub03_1 .art_01 .ct03.on{ opacity:1; transform:translateY(0); }
.sub03_1 .art_01 .ct03 .step_list{ display:flex; flex-wrap: wrap; justify-content: center; }
.sub03_1 .art_01 .ct03 .step_list > li { width:calc(100% / 5); position:relative; padding:10px;  }
.sub03_1 .art_01 .ct03 .step_list > li::after{ content:'▶'; display:block; position:absolute; right: -9px; top:calc(50% - 30px); color:#59669D; font-size: 20px;} 
.sub03_1 .art_01 .ct03 .step_list > li:last-child:after{ display:none; }
.sub03_1 .art_01 .ct03 .step_list > li .iconBox{ padding:40px 0; border:2px solid #59669D; display:flex; align-items: center; justify-content: center; }
.sub03_1 .art_01 .ct03 .step_list > li .iconBox img{ max-width: 90%; }
.sub03_1 .art_01 .ct03 .step_list > li .title{ background-color:#59669D; text-align: center; padding:10px 0; color:#fff; font-size: 18px; }
.sub03_1 .art_01 .ct03 .step_list > li .produce{ text-align: center; padding:10px 0; color:#59669D; }

.sub03_1 .art_01 .ct03 .half_box{ display:flex; flex-wrap: wrap; margin-top:40px; }
.sub03_1 .art_01 .ct03 .half_box > li { width:25%; padding:0 10px; }
.sub03_1 .art_01 .ct03 .half_box > li:first-child{ width:50%; }
.sub03_1 .art_01 .ct03 .half_box > li > .title{ background-color:#59669D; color:#fff; text-align: center; padding:10px 0; font-size: 20px; line-height: 1.5rem; }
.sub03_1 .art_01 .ct03 .half_box > li > .s_half_box{ display:flex; flex-wrap: wrap; } 
.sub03_1 .art_01 .ct03 .half_box > li > .s_half_box.full > li{ width:100%; }
.sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li { width:50%; padding: 0 0; text-align: center; }
.sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .s_title{ padding:10px 0; color:#fff; font-size: 20px; background-color:#59669D; line-height: 1.5rem; }
.sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .imgBox{ margin-top: 10px; }

.sub03_1 .art_01 .ct03 .half_box > li:first-child > .s_half_box > li > .imgBox{ padding:0 5px; }
.sub03_1 .art_01 .ct03 .half_box > li:first-child > .s_half_box > li:nth-child(1) > .imgBox{ padding-left:0; }
.sub03_1 .art_01 .ct03 .half_box > li:first-child > .s_half_box > li:nth-child(2) > .imgBox{ padding-right:0; }
.sub03_1 .art_01 .ct03 .half_box > li:first-child > .s_half_box > li:first-child{ position:relative; } 
.sub03_1 .art_01 .ct03 .half_box > li:first-child > .s_half_box > li:first-child::after{ content:'&'; color:#59669D; position:absolute; right:-6px; top:calc(50% - 25px); font-family: 'GmarketSansBold'; } 

.sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .imgBox img{ width: 98%; height:200px;  }
.sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .title{ padding-top:10px; font-size:18px; }
.sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .big{ font-size: 18px; padding-top:10px; }
.sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .gray{ color:#7f7f7f; }

@media screen and (max-width: 1250px) {
    .sub03_1 .art_01 .ct03 .step_list > li .iconBox{ padding:4vw 0; }
    .sub03_1 .art_01 .ct03 .step_list > li .iconBox img{ height:5vw;  }
    .sub03_1 .art_01 .ct03 .step_list > li .title{ font-size:1.5vw; }
    .sub03_1 .art_01 .ct03 .step_list > li .produce{ font-size:1.4vw; }


    .sub03_1 .art_01 .ct03 .half_box > li > .title{ font-size:1.6vw; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .s_title{ font-size:1.6vw; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .imgBox img{ height:17vw; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .big{ font-size:1.4vw; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .gray{ font-size:1.4vw; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .title{ font-size:1.4vw; }
}
@media screen and (max-width: 800px) {
    .sub03_1 .art_01 .ct01 .banner .produce br{ display:inline-block; }

    .sub03_1 .art_01 .ct02 .half_box > li .imgBox{ width:100%; }
    .sub03_1 .art_01 .ct02 .half_box > li .contentBox{ width:100%; padding:20px 0; text-align:center; justify-content: center; }

    .sub03_1 .art_01 .ct03 .step_list > li{ width:calc(100% / 3); }
    .sub03_1 .art_01 .ct03 .step_list > li .iconBox img{ height:13vw; }
    .sub03_1 .art_01 .ct03 .step_list > li .title{ font-size:2.3vw; }
    .sub03_1 .art_01 .ct03 .step_list > li .produce{ font-size: 2.2vw; }

    .sub03_1 .art_01 .ct03 .step_list > li::after{ font-size: 2.5vw; right: -1vw; }
    .sub03_1 .art_01 .ct03 .half_box > li{ width:50%; padding:2px; }
    .sub03_1 .art_01 .ct03 .half_box > li:first-child{ width:100%; }
    .sub03_1 .art_01 .ct03 .half_box > li > .title{ font-size:2.3vw; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li{ margin-bottom:10px; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .imgBox img{ height:auto; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .big{ font-size:2.2vw; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .gray{ font-size:2.2vw; }

    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .s_title{ font-size:2.3vw;  }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .title{ font-size:2.2vw; }

}
@media screen and (max-width: 650px) {
    .sub_sec.sub03 .art_01{ padding-top: 50px; }
    .sub03_1 .art_01 .ct01 .banner .title{ font-size:25px; }
    .sub03_1 .art_01 .ct01 .banner .produce{ font-size:14px; }


    .sub03_1 .art_01 .ct_title > span{ font-size:16px; }
    .sub03_1 .art_01 .ct02 .half_box > li .contentBox .number{ font-size: 35px; text-shadow: 4px 2px 1px rgb(89 102 157 / 20%); }
    .sub03_1 .art_01 .ct02 .half_box > li .contentBox .title{ font-size:16px; }
    .sub03_1 .art_01 .ct02 .half_box > li .contentBox .content{ font-size:14px; }


    .sub03_1 .art_01 .ct02 .check_container{ font-size:14px; }
}
@media screen and (max-width: 400px) {
    .sub03_1 .art_01 .ct03 .step_list > li{ width:calc(100% / 2); padding:5px; } 
    .sub03_1 .art_01 .ct03 .step_list > li::after{ right:-1.5vw; }
    .sub03_1 .art_01 .ct03 .step_list > li .iconBox{ padding:10vw 0; }

    .sub03_1 .art_01 .ct01 .banner .title{ font-size:7vw; }
    .sub03_1 .art_01 .ct01 .banner .produce{ font-size: 3.5vw; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li{ padding:2px; }

    .sub03_1 .art_01 .ct03 .step_list > li .title{ font-size:3.5vw; }
    .sub03_1 .art_01 .ct03 .step_list > li .produce{ font-size:3vw; }
    
    .sub03_1 .art_01 .ct03 .half_box > li > .title{ font-size:3.5vw; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .big{ font-size:3.5vw; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .gray{ font-size:3vw; }

    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .s_title{ font-size:3.5vw; }
    .sub03_1 .art_01 .ct03 .half_box > li > .s_half_box > li > .title{ font-size:3vw; }

}


/*============================ sub03_2 ============================*/
.sub03_2 .ct_01{ padding:80px 0; background-color:#3466FF; overflow: hidden; }
.sub03_2 .ct_01 .inner{ animation:fade-up ease-in-out 1s; }


.sub03_2 .ct_01 .ct_title{ display:flex; align-items: center; justify-content: center; }
.sub03_2 .ct_01 .ct_title > span{ font-family: 'GmarketSansBold'; font-size: 24px; display: flex; align-items: center; flex-basis: 700px; color:#fff; }
.sub03_2 .ct_01 .ct_title > span::before { content: ''; flex-grow: 1; height: 1px; background-color: #D9D9D9; }
.sub03_2 .ct_01 .ct_title > span::after { content: ''; flex-grow: 1; height: 1px; background-color: #D9D9D9; }
.sub03_2 .ct_01 .ct_title > span b{ padding: 0 40px; text-align: center; }

.sub03_2 .ct_01 .hafl_contain{ display:flex; flex-wrap: wrap;  color:#fff; margin-top:40px; }
.sub03_2 .ct_01 .hafl_contain > li { width:50%; position:relative; }
.sub03_2 .ct_01 .hafl_contain .title{ text-align:center; font-size: 26px; font-family: 'GmarketSansBold';  }
.sub03_2 .ct_01 .hafl_contain .step_contain{ margin-top:40px; display:flex; flex-wrap: wrap; }
.sub03_2 .ct_01 .hafl_contain .step_contain > li { width:calc(100% / 2); padding:5px; }
.sub03_2 .ct_01 .hafl_contain .step_contain > li > img{ width: 100%;  }
.sub03_2 .ct_01 .hafl_contain .step_contain > li > .content{ text-align: center; padding:10px 0; font-size:18px; }
.sub03_2 .ct_01 .hafl_contain > li .addition { margin-top: 40px; }
.sub03_2 .ct_01 .hafl_contain > li .phone{ position:absolute; width:100%; bottom:-81px; right:-40px; }

.sub03_2 .ct_02{ padding:100px 0; opacity:0; transform:translateY(10%); transition:opacity 1.5s , transform 1.5s; }
.sub03_2 .ct_02.on{ opacity:1; transform:translateY(0);  }
.sub03_2 .ct_02 .art_title{ text-align: center; font-size:25px; }
.sub03_2 .ct_02 .art_title b{ color:#3466FF; font-weight: 900; }
.sub03_2 .ct_02 .half_step{ display:flex; flex-wrap: wrap; margin-top:40px; }
.sub03_2 .ct_02 .half_step > li { width:calc(100% / 2); padding:10px; position:relative; }
.sub03_2 .ct_02 .half_step > li:first-child::after{ content:'▶'; position:absolute; top:30%; right:0; font-size: 20px; color:#3466FF; }
.sub03_2 .ct_02 .half_step > li > img{ width: 100%; }

.sub03_2 .ct_03{ display:flex; flex-wrap: wrap;  opacity:0; transform:translateY(10%); transition:opacity 1.5s , transform 1.5s;  }
.sub03_2 .ct_03.on{ opacity:1; transform:translateY(0); }
.sub03_2 .ct_03>.item{ width:50%; }
.sub03_2 .ct_03>.left_contain img{ width: 100%; }
.sub03_2 .ct_03>.right_contain{ padding:20px 40px; padding-right: calc( (100% - 1200px ) / 2); display:flex; justify-content: center; flex-direction: column; }
.sub03_2 .ct_03>.right_contain .title{ text-align:center; font-size:25px; color:#3466FF; font-family: 'GmarketSansBold';  }
.sub03_2 .ct_03>.right_contain .content{ margin-top:20px; text-align: center; color:#7f7f7f; }

.sub03_2 .ct_03>.right_contain .produce_list{ margin-top:20px; }
.sub03_2 .ct_03>.right_contain .produce_list > li { display:flex; margin-bottom:40px; align-items: center;  }
.sub03_2 .ct_03>.right_contain .produce_list > li > img{ width:120px; }
.sub03_2 .ct_03>.right_contain .produce_list > li > .content{ width:calc(100% - 120px); padding-left:20px;  text-align: left;  }
.sub03_2 .ct_03>.right_contain .produce_list > li > .content .p_title{ font-size:20px; color:#222; }
.sub03_2 .ct_03>.right_contain .produce_list > li > .content .p_content{ margin-top:10px; }


.sub03_2 .ct_04{ padding:80px 0; opacity:0; transform:translateY(10%); transition:opacity 1.5s , transform 1.5s; }
.sub03_2 .ct_04.on{ opacity:1; transform:translateY(0); }
.sub03_2 .ct_04 .half_contain{ display:flex; flex-wrap: wrap; }
.sub03_2 .ct_04 .half_contain > li { width:50%; padding:10px; }

.sub03_2 .ct_04 .half_contain > .left_contain .title{ font-family: 'GmarketSansBold'; color:#3466FF; font-size:25px; }
.sub03_2 .ct_04 .half_contain > .left_contain .content{ margin-top:10px; color:#7f7f7f;  }
.sub03_2 .ct_04 .half_contain > .left_contain .content b{ color:#3466FF; }
.sub03_2 .ct_04 .half_contain > .left_contain > img{ max-width: 100%; margin-top:40px;  }

.sub03_2 .ct_04 .half_contain > .right_contain .title{ font-size:18px; color:#3466FF; }
.sub03_2 .ct_04 .half_contain > .right_contain .step_list{ margin-top:40px;  }
.sub03_2 .ct_04 .half_contain > .right_contain .step_list > li { display:flex; align-items: flex-start; margin-bottom:20px;  }
.sub03_2 .ct_04 .half_contain > .right_contain .step_list > li > .number{ background-color: #222; color:#fff; width:100px; height:100px; border-radius:10px; display:flex; align-items: center; justify-content: center; font-size: 50px;  }
.sub03_2 .ct_04 .half_contain > .right_contain .step_list > li > .number.blue{ background-color:#3466FF; }
.sub03_2 .ct_04 .half_contain > .right_contain .step_list > li > .content_wrap{ padding-left:20px; width:calc(100% - 100px);  }

.sub03_2 .ct_05{ padding:80px 0; transform:translateY(10%); transition:opacity 1.5s , transform 1.5s; }
.sub03_2 .ct_05.on{ opacity:1; transform:translateY(0); }
.sub03_2 .ct_05 .produce{ text-align: center; font-size: 20px; }
.sub03_2 .ct_05 .produce b{ color:#3466FF; }
.sub03_2 .ct_05 .produce br{ display:none; }
.sub03_2 .ct_05 img{ display:block; margin:0 auto; margin-top:40px; max-width: 100%; }

@media screen and (max-width: 1250px) {
    .sub03_2 .ct_01{ padding-bottom:0; }
    .sub03_2 .ct_01 .hafl_contain > li{ width:100%; margin-bottom:100px; }
    .sub03_2 .ct_01 .hafl_contain > li:last-child{ margin-bottom:0; }
    .sub03_2 .ct_01 .hafl_contain > li .phone{ position:static; }

    .sub03_2 .ct_01 .hafl_contain .step_contain > li{ width:calc(100% / 4); }
    .sub03_2 .ct_01 .hafl_contain > li .phone{ width:50%; display:block; margin:0 auto; margin-top:40px; min-width:650px; }

    .sub03_2 .ct_03>.item{ width:100%; margin-bottom:100px; }
    .sub03_2 .ct_03>.item:last-child{ margin-bottom:0; }
    .sub03_2 .ct_03>.right_contain{ padding-right:10px; }
    .sub03_2 .ct_03>.right_contain .produce_list > li{ justify-content: center; }
    .sub03_2 .ct_03>.right_contain .produce_list > li > .content{max-width:50%;}

    .sub03_2 .ct_04 .half_contain > .right_contain .step_list > li > .number{ font-size: 3vw; width:6vw; height:6vw; }
    .sub03_2 .ct_04 .half_contain > .right_contain .step_list > li > .content_wrap{ width:calc(100% - 6vw); }
    
    .sub03_2 .ct_05 img{ width:50%; }

}
@media screen and (max-width: 1000px) {
    .sub03_2 .ct_01 .hafl_contain .step_contain > li{ width:calc(100% / 2); }
    .sub03_2 .ct_01 .hafl_contain > li .phone{ width:60%; }

    .sub03_2 .ct_04 .half_contain > li{ width:100%; text-align: center; }
    .sub03_2 .ct_04 .half_contain > .right_contain .step_list > li{ text-align: left; }

}
@media screen and (max-width: 650px) {
    .sub03_2 .ct_01 .ct_title > span{ font-size: 18px; }
    .sub03_2 .ct_01 .hafl_contain .title{ font-size: 18px; }

    .sub03_2 .ct_02 .half_step > li{ width:100%; }
    .sub03_2 .ct_02 .half_step > li:first-child::after{ display:none; }
    .sub03_2 .ct_01 .hafl_contain .step_contain > li > .content{ font-size:3vw; }
    .sub03_2 .ct_01 .hafl_contain > li .phone{ min-width:unset; width:100%;  }
    .sub03_2 .ct_01 .hafl_contain > li .addition{ font-size:14px; }

    .sub03_2 .ct_02 .art_title{ font-size: 16px; }
    
    .sub03_2 .ct_03>.right_contain{ padding:0 10px; }
    .sub03_2 .ct_03>.right_contain .title{ font-size: 18px; }
    .sub03_2 .ct_03 > .right_contain .content{ font-size: 14px; }
    .sub03_2 .ct_03>.right_contain .produce_list > li > img{ width:20vw; }
    .sub03_2 .ct_03 > .right_contain .produce_list > li > .content{ max-width: unset; width:calc(100% - 20vw); padding-left:2vw; }
    .sub03_2 .ct_03>.right_contain .produce_list > li > .content .p_title{ font-size: 16px; }
    .sub03_2 .ct_03>.right_contain .produce_list > li > .content .p_content{ font-size:14px; margin-top:5px; }

    .sub03_2 .ct_04 .half_contain > .left_contain .title{ font-size:18px; }
    .sub03_2 .ct_04 .half_contain > .left_contain .content{ font-size:14px; }

    .sub03_2 .ct_04 .half_contain > .right_contain .step_list > li > .number { font-size: 5vw; width: 10vw; height: 10vw; }
    .sub03_2 .ct_04 .half_contain > .right_contain .step_list > li > .content_wrap{ font-size:14px; width:calc(100% - 10vw); padding-left:2vw; }

    
    .sub03_2 .ct_05{  padding-top:0; }
    .sub03_2 .ct_05 .produce{ font-size:14px; }
    .sub03_2 .ct_05 .produce br{ display:inline-block; } 
    .sub03_2 .ct_05 img{ width:95%; }
}

/*============================ sub04 ============================*/
.sub_sec.sub04 .sub_bnr .sub_background{ background-image: url('../img/sub04_banner_background.png'); }

/*============================ sub04_1 ============================*/


.sub04 .project_container{ padding:100px 0; animation:fade-up ease-in-out 1s; } 
.sub04 .project_container .project_title{ text-align: center; font-family: "GmarketSansBold"; font-size: 42px; }

.sub04 .project_container .project_list{ margin-top:100px; display:flex; flex-wrap: wrap; }
.sub04 .project_container .project_list.admin_list{ margin-top:10px; }
.sub04 .project_container .project_list > li { width:calc(100% / 3); padding:10px; margin-bottom:10px; }
.sub04 .project_container .project_list > li > a{ display:block; }

.sub04 .project_container .project_list > li .imgBox{ width:100%; height:320px; background-image: url('../img/example_img.png'); background-size:cover; background-position: center; background-repeat: no-repeat; }
.sub04 .project_container .project_list > li .title{ text-align: center ; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top:10px; font-size: 18px; transition:color 0.5s; }
.sub04 .project_container .project_list > li:hover .title{ color:#1998BF; }

@media screen and (max-width: 1250px) { 

    .sub04 .project_container{ padding:50px 0; }
    .sub04 .project_container .project_title{ font-size: 30px; }

    .sub04 .project_container .project_list{ margin-top:50px; }
    .sub04 .project_container .project_list > li .imgBox{ height:28vw; }

} /* tablet */
@media screen and (max-width: 850px) { 
    .sub04 .project_container .project_list > li{ width:calc(100% / 2); }
    .sub04 .project_container .project_list > li .imgBox{ height:43vw; }
} 
@media screen and (max-width: 650px) { 
    .sub04 .project_container .project_title{ font-size: 30px; }

    .sub04 .project_container .project_list > li{ padding:5px; }
    .sub04 .project_container .project_list > li .title{ font-size: 14px; }
} /* mobile */


/*============================ sub04_2 ============================*/
.sub04_2 .art_01{ padding:100px 0; animation:fade-up ease-in-out 1s; }
.sub04_2 .art_01 .art_title{ font-size: 35px; font-family: "GmarketSansBold"; }
.sub04_2 .art_01 .port_list{ margin-top:20px; display:flex; flex-wrap: wrap; border-top:1px solid #D9D9D9; }
.sub04_2 .art_01 .port_list > li { align-items: flex-start; padding: 40px 0; border-bottom:1px solid #D9D9D9; width:100%; display:flex; }
.sub04_2 .art_01 .port_list > li .imgBox{ 
    padding:20px; height:320px;
    width:20%;  border-radius:8px;  overflow: hidden; position: relative;
    background-size: cover; background-position: center; background-repeat: no-repeat; 
    background-image: url('../img/example_img.png'); 
}
.sub04_2 .art_01 .port_list > li .imgBox input[type=checkbox]{ position: absolute; left: 10px; top: 10px; }
.sub04_2 .art_01 .port_list > li .imgBox img{ width: 100%; }
.sub04_2 .art_01 .port_list > li .imgBox .modify_btn{ 
    position: absolute; right: 10px; bottom: 10px;
    padding:5px 10px; margin-left:5px; background-color:#fff; 
    font-size:13px; border-radius:5px; border:1px solid #e6e6e6; 
}

.sub04_2 .art_01 .port_list > li .contentBox{ width:80%; padding-left:40px; }
.sub04_2 .art_01 .port_list > li .contentBox .title{ font-size: 20px; font-family: "GmarketSansBold"; }
.sub04_2 .art_01 .port_list > li .contentBox .content{ margin-top:10px; font-weight: 600; color:#7F7F7F; }

.sub04_2 .art_01 .port_list + .paging_box{ margin-top: 20px; }

.sub04_2 .art_01 .more_view{ display:block; margin: 40px auto; padding:15px 60px; background-color:#fff; border-radius:60px; font-family: "GmarketSansBold"; border:2px solid #222; transition:color 0.5s, background 0.5s;   }
.sub04_2 .art_01 .more_view:hover{ background-color:#F1922F; color:#fff; }

@media screen and (max-width: 1250px) { 
    .sub04_2 .art_01 .port_list > li .imgBox{ height:25vw; }
    .sub04_2 .art_01 .port_list > li .contentBox{ padding-left:2.5vw; }
}
@media screen and (max-width: 1000px) { 
    .sub04_2 .art_01 .port_list > li .imgBox{ width: 30%; height:35vw; }
    .sub04_2 .art_01 .port_list > li .contentBox{ width: 70%; }
}
@media screen and (max-width: 650px) { 
    .sub04_2 .art_01{ padding:50px 0; }
    .sub04_2 .art_01 .art_title{ font-size:25px; }


    .sub04_2 .art_01 .port_list > li{ display:flex; flex-wrap: wrap; justify-content: center; }

    .sub04_2 .art_01 .port_list > li .imgBox{ width:50%; min-width: 200px; height:65vw; min-height: 300px;  }
    .sub04_2 .art_01 .port_list > li .contentBox{ margin-top:10px;  width:100%; padding-left:0; margin-top:40px; }
    .sub04_2 .art_01 .port_list > li .contentBox .title{ font-size: 18px; text-align: center; }
    .sub04_2 .art_01 .port_list > li .contentBox .content{ font-size:14px; }

    .sub04_2 .art_01 .more_view{ font-size: 14px; }
}

/*============================ sub04_view ============================*/
.sub04_view .sec04_contain{ padding:100px 0; }
.sub04_view .sec04_contain .view_wrap{ display:flex; flex-wrap: wrap; }
.sub04_view .sec04_contain .content_box{ width:70%; padding:5px;  }
.sub04_view .sec04_contain .content_box img{ max-width: 100%; display:block; }
.sub04_view .sec04_contain .info_box{ width:30%; padding:5px; }
.sub04_view .sec04_contain .info_box .title{ 
    font-weight: 600; color:#fff; background-color:#2C89A9; 
    padding:20px 15px; text-align: center; font-size: 18px; 
    border:2px solid #222; border-bottom:none;
}
.sub04_view .sec04_contain .info_box .content{ border:2px solid #222; border-bottom:none; padding:10px; }
.sub04_view .sec04_contain .info_box .content .bold{ font-weight: 600; font-size: 18px; }
.sub04_view .sec04_contain .info_box .content .lite{ color:#7f7f7f; padding-top:5px; font-size: 16px; }
.sub04_view .sec04_contain .info_box .content .lite.lite_list > li { margin-bottom:10px; position:relative; padding-left:10px;  }
.sub04_view .sec04_contain .info_box .content .lite.lite_list > li::before{ content:'-'; display:inline-block; position:absolute; margin-left:-10px; top:5px;}
.sub04_view .sec04_contain .info_box .content.event{ border-bottom:2px solid #222; }

.sub04_view .sec04_contain .info_box .appli_btn{ 
    margin:20px 0 50px 0;  display:block; border:2px solid #222; 
    text-align: center; padding:15px; font-weight: 600; color:#fff; 
    background-color: #F1922F; font-size: 18px;
}

@media screen and (max-width: 1250px) { 
    .sub04_view .sec04_contain .view_wrap{ flex-direction: column-reverse; }
    .sub04_view .sec04_contain .content_box{ width:100%; padding:0; }
    .sub04_view .sec04_contain .info_box{ width:100%; padding:0; }
}
@media screen and (max-width: 650px) { 
    .sub04_view .sec04_contain .info_box .title{ font-size: 16px; }
    .sub04_view .sec04_contain .info_box .content .bold{ font-size: 16px; } 
    .sub04_view .sec04_contain .info_box .content .lite{ font-size: 14px; }

    .sub04_view .sec04_contain .info_box .appli_btn{ font-size: 16px; }
}


/*============================ sub05 ============================*/
.sub_sec.sub05 .sub_bnr .sub_background{ background-image: url('../img/sub05_banner_background.png'); }

/*============================ sub05_1 ============================*/
.sub05 .art_01{ padding:100px 0; animation:fade-up ease-in-out 1s; }
@media screen and (max-width: 650px) { 
    .sub05 .art_01{ padding:50px 0; }
}

/*============================ application ============================*/
.application .art01{ padding:100px 0; }
.application .art01 .inner{ display:flex; flex-wrap: wrap; }

.application .art01 .input_contain{ width:50%; padding:10px 20px 10px 10px; }
.application .art01 .input_contain>.title{ font-size: 40px; font-weight: 600; }
.application .art01 .input_contain>.produce{ margin-top:10px; font-size: 16px; }

.application .art01 .input_contain .input_wrap{ margin:20px 0; display:flex; flex-wrap: wrap; }
.application .art01 .input_contain .input_wrap > li{ padding:5px; }
.application .art01 .input_contain .input_wrap > li .bold{ font-weight: 600; margin-bottom:5px;  }
.application .art01 .input_contain .input_wrap > li .bold b{ color:#F47C25; }
.application .art01 .input_contain .input_wrap > li input[type=text]{ width:100%; border:1px solid #c4c4c4; padding:10px 15px; font-size: 14px;  }
.application .art01 .input_contain .input_wrap > li input[type=email]{ width:100%; border:1px solid #c4c4c4; padding:10px 15px; font-size: 14px;  }
.application .art01 .input_contain .input_wrap > li textarea{ width:100%; height:180px; border:1px solid #c4c4c4; padding:10px 15px; font-size: 14px; }
.application .art01 .input_contain .input_wrap > li.half{ width:50%; }
.application .art01 .input_contain .input_wrap > li.full{ width:100%; }

.application .art01 .input_contain .send_btn{ display:flex; justify-content: flex-start; align-items: center; background:none; border: none; color:#F47C25; font-weight: 600 ; position:relative; }
.application .art01 .input_contain .send_btn::after{ 
    content:'';  position:absolute; display:block; 
    width:0; height:1px; background-color:#F47C25; 
    bottom:-5px; transition:width 0.5s; 
}
.application .art01 .input_contain .send_btn:hover::after{ 
    content:'';  position:absolute; display:block; 
    width:100%; height:1px; background-color:#F47C25; 
    bottom:-5px; 
}
.application .art01 .input_contain .send_btn img{ margin-right:10px; }

.application .art01 .img_contain{ 
    width:50%; display:flex; align-items: center; justify-content: center; 
    background-image: url('../img/application_bg.png'); background-size: cover;
    overflow: hidden; border-radius: 20px; 
    background-position: center; background-repeat: no-repeat; 
}
.application .art01 .img_contain img{ transform:scale(0.9); transition:transform 1.5s; }
.application .art01.on .img_contain img{ transform:scale(1); }

@media screen and (max-width: 1250px) { 
    .application .art01 .input_contain{ width:100%; margin-bottom:50px; padding:0;  }
    .application .art01 .img_contain{ width:100% }
    .application .art01 .img_contain img{ display:block; max-width: 70%; }
}
@media screen and (max-width: 650px) { 
    .application .art01{ padding:50px 0; }
    .application .art01 .input_contain > .title{ font-size: 30px; }
    .application .art01 .input_contain>.produce{ font-size: 13px; }
    .application .art01 .input_contain .input_wrap{ font-size: 14px; }
    .application .art01 .input_contain .input_wrap > li.half{ width:100%; }
    .application .art01 .img_contain img{ max-width: 50%; }
}
/*--------------- basic list ------------*/
.basic_list{ font-weight: 300; font-family: 'Noto Sans KR', sans-serif; }
.basic_list .basic_list_table{border-collapse: collapse; table-layout: fixed; width:100%; margin-top:10px;  }

.basic_list .basic_list_table tr .list_number{text-align: center; width:10%; }
.basic_list .basic_list_table tr .list_title{width:100%; }
.basic_list .basic_list_table tr .list_title a{display:flex; }
.basic_list .basic_list_table tr .list_writer{text-align: center; width:10%; white-space:nowrap; }
.basic_list .basic_list_table tr .list_hit{text-align: center; width:10%; }
.basic_list .basic_list_table tr .list_date{text-align: center; width:10%;}

.basic_list .basic_list_table tr .list_title a .titleBox{display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;  vertical-align: middle; }
.basic_list .basic_list_table tr .list_title .reple_box{background:#666; color:#fff; display:inline-block; padding:0px 6px; font-size: 13px; border-radius:4px;  }
.basic_list .basic_list_table tr .list_title a .iconWrap{  width:40px; flex-shrink: 0;}
.basic_list .basic_list_table tr .list_title a .iconWrap2{ width:110px; flex-shrink: 0; padding-left:5px;}

.basic_list .basic_list_table tr input[type=checkbox]{ margin:0 auto 10px auto; display:block; }
.basic_list .basic_list_table tr th{padding:16px 5px; border-top:1px solid #e6e6e6;  }
.basic_list .basic_list_table tr td{padding:15px 5px; border-top:1px solid #e6e6e6; }
.basic_list.adm .basic_list_table tr td{ padding:10px 0; }
.basic_list .basic_list_table tr td.list_number.on{color:#40647D; font-size:14px;  }
.basic_list .basic_list_table tr:last-child td{ border-bottom:1px solid #e6e6e6; }


@media screen and (max-width: 1250px) { 
    .basic_list .basic_list_table tr .list_hit{display:none; }
    .basic_list .basic_list_table tr .list_writer{display:none; }
    .basic_list .basic_list_table tr .list_title a .iconWrap2{display:none; }
} 
@media screen and (max-width: 650px) {
    .basic_list .table_th{ display:none; }
    .basic_list .basic_list_table tr .list_date{display:none; }
    .basic_list .basic_list_table tr .list_number{ font-size: 13px; }
    .basic_list .basic_list_table tr .list_title a .titleBox{ font-size: 13px; }

    .basic_list .basic_list_table tr td.list_number.on{ font-size: 13px; }
} 
/*
@media screen and (max-width: 500px) {
    .basic_list .basic_list_table tr .list_date{display:none; }
    .basic_list .basic_list_table tr .list_number{width:20%; }
    .basic_list .basic_list_table tr .list_title{width:80%; }

}
*/
/*---------------- basic list end ---------------*/

/*---------------- write ---------------*/
.write_page .title_box{display:flex; }
.write_page .title_box li{display:flex; border-bottom:1px solid #e5e5e5;  }
.write_page .title_box li:first-child{border-top:1px solid #e5e5e5; }
.write_page .title_box li .label_content input[type=text]{padding:13px; font-size:14px; border: 1px solid #E6E6E6; border-radius: 4px; width:100%;  }
.write_page .title_box li .label_content input[type=password]{padding:13px; font-size:14px; border: 1px solid #E6E6E6; border-radius: 4px; width:100%;  }
.write_page .title_box li .label_content input[type=email]{padding:13px; font-size:14px; border: 1px solid #E6E6E6; border-radius: 4px; width:100%;  }

.write_page .title_box .label{width:120px; background:#F7F7F7; padding:20px 16px; font-size:14px; display:flex; align-items: center; }
.write_page .title_box .label_content{padding:8px 16px;}
.write_page .title_box.full_box li{width:100%; }
.write_page .title_box.full_box li .label_content{width:calc(100% - 120px); font-size:14px; display:flex; align-items: center;  }
.write_page .title_box.half_box li{width:50%; }
.write_page .title_box.half_box li .label_content{width:calc(100% - 120px); font-size:14px;  }
.write_page .title_box li .label_content select{ padding:13px; width:100%; max-width:300px; border: 1px solid #E6E6E6; border-radius: 4px;}
.write_page .title_box li .label_content label{ margin-right:5px; }
.write_page .title_box li .label_content label input[type=checkbox]{ margin-right:2px; }

.write_page .dhtml_box { margin-top:40px; }
.write_page .dhtml_box .sub_title{display:block; font-size:14px; margin-top:10px;  }
.write_page .dhtml_box textarea{ width:100%; border-radius: 4px; height:130px; border: 1px solid #E6E6E6; padding:15px 10px; font-size:14px; margin-top:5px;  }

.write_page .add_form{ margin-top:20px; }
.write_page .add_form .add_help{ padding:5px 0; }
.write_page .add_form .add_box input{background-repeat: no-repeat; background-position: left 20px center; }
.write_page .add_form .add_box input[type="text"]{ border:1px solid #e6e6e6; margin-bottom:10px; padding:20px 20px 20px 56px; width:100%; border-radius:8px; background-image: url('../img/board_img/write_link_icon.png');  }
.write_page .add_form .add_box input[type="file"]{ border:1px solid #e6e6e6; margin-bottom:10px; padding:20px 20px 20px 56px; width:100%; border-radius:8px; background-image: url('../img/board_img/write_file_icon.png');  }
.write_page .add_form .file_del_box{display:flex; justify-content: flex-end; margin-bottom:5px; font-size:14px;  } 
.write_page .add_form .file_del_box label{color:#999;} 
.write_page .add_form .file_del_box input[type=checkbox]{margin-right:3px; }

.write_page .write_btn_box{display:flex; justify-content: flex-end; margin-top:20px; }
.write_page .write_btn_box .cancelBtn{display:block; padding:16px 20px; border: 1px solid #CCCCCC; border-radius: 4px; margin-right:10px;  }
.write_page .write_btn_box .submitBtn{padding:16px 20px; border-radius:4px; border:none; background: #F1922F ; color:#fff; }

@media screen and (max-width: 1250px) { 
    .write_page .title_box{flex-wrap: wrap;}
    .write_page .title_box.half_box li{width:100%; }
} 

@media screen and (max-width: 650px) {
    .write_page .title_box .label{ width:100px; font-size:12px; }
    .write_page .title_box li .label_content select{ font-size:13px;}
    .write_page .title_box li .label_content label{ font-size:13px; }
    .write_page .title_box li .label_content input[type=text]{ font-size:13px; }
    .write_page .title_box li .label_content input[type=password]{ font-size:13px; }
    .write_page .title_box li .label_content input[type=email]{ font-size:13px; }
    .write_page .add_form .file_del_box label{ font-size:13px; }

    .write_page .title_box.half_box li .label_content{width:calc(100% - 100px); }
    .write_page .write_btn_box .submitBtn{ font-size: 13px; }
    .write_page .add_form .add_help{ font-size: 13px; }
} 

/*------------------ write end ------------------*/

/*-------------- view page -------------*/
.view_page .adminBox{ padding:10px 0; }
.view_page{margin-top:50px; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; }
.view_page .titleBox li{ display:flex; border-bottom:1px solid #dfdfdf; }
.view_page .titleBox:first-child li:first-child{border-top:1px solid #dfdfdf; }
.view_page .titleBox .label{background:#f7f7f7; display:block; padding:16px 10px; width:120px; font-size:14px; display:flex; align-items: center;  }
.view_page .titleBox .label_content{padding:16px 10px; font-size:14px; width:calc(100% - 120px); display:flex; align-items: center;}

.view_page .full_title .label_content{display:block; width:calc(100% - 120px);  }
.view_page .three_title{display:flex; flex-wrap: wrap;}
.view_page .three_title li{width:calc(100% / 3); }

.view_page .share_title{display:flex; border-bottom:1px solid #dfdfdf; }
.view_page .share_title>li:first-child{width:50%; display:flex; align-items: center; }
.view_page .share_title>li:last-child{ width:50%; display:flex; justify-content: flex-end;}
.view_page .share_title .share_label{background:#F2F2F2; padding:5px; color:#4d4d4d; border-radius:4px; font-size:13px; margin-right:5px;   }
.view_page .share_title .share_label > img{margin-right:5px; }
.view_page .share_title .share_icon{margin-right:5px; }

.view_page .view_content{ padding:20px 0; color:#333; }
.view_page .view_content img{max-width:100%; margin-bottom:10px; display:block;  }

.view_page .add_box{margin-top:20px; }
.view_page .add_box a.add_item{
    display:block; border:1px solid #e6e6e6; padding:19px 20px 19px 60px; border-radius:8px; 
    background-repeat: no-repeat; background-position: left 20px center; 
}
.view_page .add_box a.add_item + a.add_item{margin-top:10px; }
.view_page .add_box a.add_item span{display:block; }
.view_page .add_box a.add_item span.add_title{font-size:15px; }
.view_page .add_box a.add_item span.add_content{font-size:13px; color:#999999; }
.view_page .add_box a.file{background-image: url('../img/board_img/file_icon.png');}
.view_page .add_box a.link{background-image: url('../img/board_img/link_icon.png');}

.view_page .p_n_box{margin-top:20px; }
.view_page .p_n_box .p_n_item {border-top:1px solid #dfdfdf; display:flex;  }
.view_page .p_n_box .p_n_item:last-child{border-bottom:1px solid #dfdfdf; }
.view_page .p_n_box .p_n_item span.label{
    display:block; width:120px; padding:13px 10px 13px 50px; background:#F7F7F7; font-size:14px; 
    background-repeat: no-repeat; background-position: left 20px center;
}
.view_page .p_n_box .p_n_item.prev_box span.label{background-image: url('../img/board_img/prev_icon.png');}
.view_page .p_n_box .p_n_item.next_box span.label{background-image: url('../img/board_img/next_icon.png');}
.view_page .p_n_box .p_n_item span.p_n_title{
    display:block; padding:13px 20px; font-size:14px; width:calc(100% - 120px); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;  
} 
.view_page .go_list_box{margin-top:40px; display:flex; align-items: center; justify-content: center; }
.view_page .go_list_box .go_list_btn{
    padding:19px 0px; text-align: center; background:#40647D; width:240px; 
    border-radius: 60px; color:#fff; font-size:16px; font-family: 'GmarketSans'; 
}


.view_page .comment_page{ margin-top:40px; }
.view_page .comment_page .comment_title_box{ padding:21px 0; border-bottom:1px solid #e6e6e6; cursor: pointer; display:flex; justify-content: space-between;}
.view_page .comment_page h1.title{ font-weight: 400;  }
.view_page .comment_page h1.title span.blue{ color:#425999; }
.view_page .comment_page .comment_title_box .arrow_box{ display:flex; align-items: center; }
.view_page .comment_page .comment_title_box .arrow_box .arrow_icon{ 
    display:block; width:15px; height:15px; margin-left:10px; 
    background-image:url('../img/board_img/comment_arrow.png'); background-repeat: no-repeat; background-position: center;
}

.view_page .comment_page .comment_list .comment_item .comment_title{padding:15px 10px; background:#F7F7F7; display:flex; justify-content: space-between; position:relative;  }
.view_page .comment_page .comment_list .comment_item .comment_title .nick_name{font-size:15px; }
.view_page .comment_page .comment_list .comment_item .comment_title .date{font-size:13px; margin-left:10px; color:#999;  }

.view_page .comment_page .comment_list .comment_item .comment_title .menu_box{ 
    width:10px; height:30px; margin-right:10px; cursor: pointer; background-image: url('../img/board_img/comment_menu.png'); 
    background-repeat: no-repeat; background-position: center; background-size:cover; 
}

.view_page .comment_page .comment_list .comment_item .comment_title .comment_menu{ position:absolute; right:10px; top:40px; display:none;  }
.view_page .comment_page .comment_list .comment_item .comment_title .comment_menu.on{display:block; }
.view_page .comment_page .comment_list .comment_item .comment_title .comment_menu a{
    display:block; background:#fff; padding:12px 21px;  
    box-shadow: 0px 16px 20px rgba(0, 0, 0, 0.05); border:1px solid #e6e6e6; color:#666; 
    font-size:13px; 
}
.view_page .comment_page .comment_list .comment_item .comment_title .comment_menu::before{
    content: ""; position: absolute; top: -8px;
    right: 15px; width: 0; height: 0; border-style: solid;
    border-width: 0 6px 8px 6px; border-color: transparent transparent #e6e6e6 transparent;
}
.view_page .comment_page .comment_list .comment_item .comment_title .comment_menu::after{
    content: ""; position: absolute; top: -6px;
    right: 15px; width: 0; height: 0;
    border-style: solid; border-width: 0 6px 8px 6px; border-color: transparent transparent #fff transparent;
}
.view_page .comment_page .comment_list .comment_item .comment_title .comment_menu a:last-child{ border-top:none; }
.view_page .comment_page .comment_list .comment_item .comment_content{padding:20px 15px; font-size:15px; }
.view_page .comment_page .comment_list .comment_item .comment_content .screet_box{text-decoration: underline; color:#EB5757; }
.view_page .comment_page .comment_list .comment_item.reply .comment_title{ padding-left:50px; background-image: url('../img/board_img/comment_reple_icon.png'); background-repeat: no-repeat; background-position: left 20px center; ;}
.view_page .comment_page .comment_list .comment_item.reply .comment_title .left_box{display:flex; align-items: center;}
.view_page .comment_page .comment_list .comment_item.reply .comment_content{padding-left:50px;  }

.view_page .comment_page .comment_write_page{ margin:20px 0; }
.view_page .comment_page .comment_write_page textarea{width:100%; height:200px; border-radius:4px; border:1px solid #e6e6e6; padding:12px 16px; font-size:14px; margin-bottom:10px; }
.view_page .comment_page .comment_write_page .humman_box input{border:1px solid #e6e6e6; padding:8px 10px; border-radius:4px; font-size:14px; margin-bottom:10px; }
.view_page .comment_page .comment_write_page .humman_box input:first-child{margin-right:10px; }
.view_page .comment_page .comment_write_page .scecret_label{font-size:14px; }
.view_page .comment_page .comment_write_page .buttonWrap{ margin-top:10px; display:flex; justify-content: space-between; }
.view_page .comment_page .comment_write_page .buttonWrap .ok_btn{padding:16px 24px; background:#222; color:#fff; border:none; font-size:14px; border-radius:4px;  }

.view_page .comment_page .comment_content_box{display:none; }
.view_page .comment_page.on .comment_content_box{display:block; }
.view_page .comment_page.on .comment_title_box .arrow_box .arrow_icon{transform: rotate( 180deg );}

@media screen and (max-width: 1250px) { 
    .view_page .three_title{display:block; }
    .view_page .three_title li{width:100%; }
} 

@media screen and (max-width: 650px) {
    .view_page .three_title li{ border-bottom:none; }

    .view_page .titleBox .label{width:60px; font-size:12px; }
    .view_page .titleBox .label_content{ width: calc(100% - 60px); font-size:13px; }
    .view_page .share_title{flex-wrap: wrap;}
    .view_page .share_title>li:first-child{width:100%; border-bottom: 1px solid #dfdfdf; }
    .view_page .share_title>li:last-child{width:100%; }
    .view_page .p_n_box .p_n_item span.label{width:100px; }
    .view_page .p_n_box .p_n_item span.p_n_title{width:calc(100% - 100px); }
    .view_page .share_title .share_label{padding:16px 10px; width:60px; font-size:14px; color:#333;  }
    .view_page .share_title .share_label img{display:none; }

    .view_page .go_list_box .go_list_btn{padding:10px 0; width:200px; }

    .view_page .comment_page .comment_list .comment_item .comment_title{ padding:10px; }
    .view_page .comment_page .comment_list .comment_item .comment_title .nick_name{font-size:13px; }
    .view_page .comment_page .comment_list .comment_item .comment_title .comment_menu a{font-size:13px;}
    .view_page .comment_page .comment_list .comment_item .comment_content{ font-size:13px; }
    .view_page .comment_page .comment_list .comment_item.reply .comment_content{ padding-left:40px; }

    .view_page .comment_page .comment_write_page textarea{ font-size:13px; }
    .view_page .comment_page .comment_write_page .humman_box input{ font-size:13px; }
    .view_page .comment_page .comment_write_page .scecret_label{ font-size:13px; }
    .view_page .comment_page .comment_write_page .buttonWrap .ok_btn{font-size:13px; padding:10px 20px;}

    .view_page .go_list_box .go_list_btn{ font-size:14px; }

    .view_page .p_n_box .p_n_item span.label{font-size:13px; }
    .view_page .add_box a.add_item span.add_title{font-size:13px; }
} 
/*-------------- view page end-------------*/

/*-------------- search-box --------------*/
.search-box{ padding:20px 0; max-width:400px; } 
.search-box .serach-form{ display:flex; }
.search-box .serach-form select{ display:block; width:30%; padding:7px 10px; border: 1px solid #E6E6E6; border-radius:4px; }
.search-box .serach-form .search-ipt-box{ width:70%; position:relative; padding-left:5px;  }
.search-box .serach-form .search-ipt-box .search-ipt{ display:block; width:100%; padding:7px 30px 7px 10px; border: 1px solid #E6E6E6; border-radius:4px; }
.search-box .serach-form .search-ipt-box .search-btn{ position:absolute; top:0; right:2px; height:100%; background:none; border: none; display:flex; align-items: center; justify-content: center; padding:0 10px; }

@media screen and (max-width: 650px) {
    .search-box{ width:100%; max-width: 100%; padding:20px 10px; font-size: 13px; }
    .search-box .serach-form select{ width: 110px; }
    .search-box .serach-form .search-ipt-box{ width: calc(100% - 110px); }
}
/*-------------- search-box end-----------*/ 

/*-------------- ballery_list ---------------*/ 

.gellary_list{ display:flex; flex-wrap: wrap; }
.gellary_list > li { width:calc(100% / 3); padding:5px; margin-bottom:10px; }
.gellary_list > li > a{ 
    display:block; background-color:#fff; width:100%; height:100%; 
    border-radius:10px; overflow: hidden; 
    box-shadow: 10px 10px 18px rgba(0, 0, 0, 0.04);
}

.gellary_list > li .imgBox{ 
    background-image: url('../img/example_img.png'); width:100%; height:280px; 
    background-repeat: no-repeat; background-size: cover; background-position: center;
}
.gellary_list > li .imgBox > input[type=checkbox]{ margin:10px; width:16px; height:16px; }
.gellary_list > li .info_box{ padding:10px 15px; }
.gellary_list > li .info_box .title{  
    font-weight: 600; padding-bottom:5px; border-bottom:1px solid #F0F0F0; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    font-size: 16px; transition:color 0.5s;
}
.gellary_list > li:hover .info_box .title{ color:#1998BF; }
.gellary_list > li .info_box .content{ 
    font-size: 16px; padding-top:10px;
    white-space: normal; word-wrap: break-word;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

@media screen and (max-width: 1250px) { 
    .gellary_list > li .imgBox{ height:22vw; }
}
@media screen and (max-width: 950px) { 
    .gellary_list > li{ width:calc(100% / 2); }
    .gellary_list > li .imgBox{ height:30vw; }
}
@media screen and (max-width: 650px) { 
    .gellary_list > li{ width:100%; }
    .gellary_list > li .imgBox{ height:55vw; }
    .gellary_list > li .info_box .title{ font-size: 14px; }
    .gellary_list > li .info_box .content{ font-size: 13px; }
}

/*-------------- ballery_list end------------*/ 


/*============================ sub06_1 ============================*/
.sub_sec.sub06 .sub_bnr .sub_background{ background-image: url('../img/sub06_banner_background.png'); }
.sub_sec.sub06 .sub_bnr .titleWrap p.title{ color:#fff; -webkit-text-fill-color:unset;}
.sub_sec.sub06 .sub_bnr .step_box .step_wrap > li.on p{ color: #fff; }
.sub_sec.sub06 .sub_bnr .step_box .line{ background-color:#fff; }

.sub06_1 .art_01{ padding:100px 0; font-family: 'Noto Sans KR', sans-serif; font-weight: 500; }
.sub06_1 .art_01 .blue{ color:#0270B9; }

.sub06_1 .art_01 .art_title{ text-align: center; font-family: 'GmarketSansLight';  font-size: 35px; color:#0270B9; font-weight: 600; }
.sub06_1 .art_01 .art_title b{ font-weight: 600; }
.sub06_1 .art_01 .art_produce{ text-align: center; padding:20px 0; font-size: 20px; }

.sub06_1 .art_01 .art_contain{ padding:20px; background-color:#fff; font-size: 18px; box-shadow: 4px 10px 10px rgba(0, 0, 0, 0.1); border-radius:10px; color:#7f7f7f; }
.sub06_1 .art_01 .art_contain .title{ margin-bottom:10px; font-size: 20px; color:#222; font-weight: 500; }
.sub06_1 .art_01 .art_contain .bold{ font-weight: 500; }

.sub06_1 .art_01 .produce{ margin-top:40px; }
.sub06_1 .art_01 .produce > li { margin-bottom:10px; padding:40px 0; border-bottom:1px solid #e4e4e4; display:flex; justify-content: center; }
.sub06_1 .art_01 .produce > li >img { max-width: 100%; }

@media screen and (max-width: 650px) { 
    .sub06_1 .art_01{ padding:50px 0; }
    .sub06_1 .art_01 .art_title{ font-size:5vw; }
    .sub06_1 .art_01 .art_produce{ font-size:16px; }
    .sub06_1 .art_01 .art_contain .title{ font-size:16px; }
    .sub06_1 .art_01 .art_contain{ font-size:14px; }
}

/*============================ privacy ============================*/
.f_popup_bg{ 
    background-color:rgba(0,0,0,0.5); position:fixed;
    left:0; top:0; width:100%; height:100%; z-index:10; 
    display:flex; align-items: center; justify-content: center;
    padding:10px; font-family: 'Noto Sans KR', sans-serif;
    opacity:0; visibility: hidden; transition: all 0.5s;

}
.f_popup_bg.on{ opacity:1; visibility: visible; }
.f_popup_bg .popup_box{ width:90%; max-width:480px; }
.f_popup_bg .btn_wrap{ width:100%; display:flex; justify-content: flex-end; }
.f_popup_bg .btn_wrap .btn{ width:30px; height:30px; cursor:pointer; padding:0; }
.f_popup_bg .btn_wrap .btn span{ display:block; width:100%; height:2px; background-color:#fff;  }
.f_popup_bg .btn_wrap .btn span:nth-child(1){ transform: translateY(14px) rotate(-45deg); -webkit-transform: translateY(14px) rotate(-45deg); }
.f_popup_bg .btn_wrap .btn span:nth-child(2){ transform: translateY(12px) rotate(45deg); -webkit-transform: translateY(12px) rotate(45deg); }
.f_popup_bg .content_wrap{ background-color:#fff; overflow-y: scroll; max-height: 60vh; padding:40px 30px; margin-top:10px; }
.f_popup_bg .content_wrap p.title{ text-align:center; font-weight: 600; font-size: 20px;  }
.f_popup_bg .content_wrap p.content{ font-size: 16px; margin-top:30px; font-weight: 300;  }

/* animation */
@keyframes ani{
    0%{transform:translate(0,0);}
    50%{transform:translate(0,5px);}
    100%{transform:translate(0,0);}
}  
@keyframes opacity{
    0%{ opacity:0; }
    50%{ opacity:1; }
    100%{ opacity:0; }
}  
@keyframes bubble-opacity{
    0%{ opacity:1; }
    80%{ opacity:1; }
    100%{ opacity:0; }
}
@keyframes fade-up{
    0%{
        transform:translateY(3vh);
        opacity:0
    }
    100%{
        transform:translateY(0);
        opacity:1;
    }
}