@charset "utf-8";
/* common & pc */
*{margin:0; padding:0; box-sizing:border-box;}
html{font-size:10px;}
body{font-family: 'Nunito Sans', sans-serif; font-size:1.4rem; color:#444;}
li{list-style:none;}
strong{font-weight:normal;}
a{text-decoration:none;}
.blind{position:absolute; left:-9999px;}
.font_ko{font-family: 'Noto Sans KR', sans-serif;}
.small_con{display:none;}
#hd{padding:20px 115px; margin:0px 0px 80px 0px;}
#hd>div{position:fixed; z-index:9999; top:0px; left:0px; width:100%; display:flex; align-items:center; padding:20px 115px; background:#fff;}
#hd>div>h1{margin-right:auto;}
#hd>div>a:last-child{margin-right:0px;}
#hd>div>a{display: flex; font-size:1.6rem; font-weight:600; color:#fff; line-height:40px; padding:3px 18px; border-radius:25px; background:#004ea2; transition:0.5s; margin-right: 20px;}
#hd>div>a:hover, #hd>div>a:focus{background:#82c025;}
#hd>div>a>span{align-self: center; margin-right: 8px;}
#hd>div>a>span>img{vertical-align: middle; padding-bottom: 4px;}
#hd>h2{font-size:7rem; font-weight:600; margin-top:110px;}
#hd>h2>span{font-size:8rem; font-weight:600; color:#0091db;}
#hd>h3{font-weight:400;}
.material-symbols-outlined{vertical-align:middle; margin-right:8px; font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 24}
.wrap{position: relative; padding:0px 95px;}
.wrap_cate{overflow: auto;position: sticky; top:86px; z-index: 9980; background-color: #fff;}
.cate{display:flex; margin:0px 0px 0px; padding:0px 0px 20px; background: #fff;}
/*.cate.on{border-bottom:1px solid #666;}*/
.cate>li{margin:0px 15px 0px 0px; flex: 0 0 auto;}
.cate>li:first-child{margin-left:20px;}
.cate>li>button{padding:6px 20px; border:1px solid #353535; border-radius:40px; text-align:center; display:block; width:100%; font-size:1.6rem; font-family: 'Nunito Sans', sans-serif; font-weight:500; color:#353535; cursor:pointer; transition:0.3s; background:#fff;}
.cate>li>button:hover,.cate>li>button:focus{border-color:#0091db; background:#0091db; color:#fff;}
.cate>li>button.active{font-weight:700; color:#fff; border-color:#004ea2; background:#004ea2;}
.brochure{position: sticky; z-index: 9999; top:145px; padding:0px 20px 20px; margin-bottom: 20px; background-color: #fff;}
.brochure a:first-child{font-size:0px; height:0px; overflow:hidden;}
.brochure a{display: none; padding: 0px 16px; line-height: 40px; background-color: #004ea2; color:#fff; border:1px solid #004ea2; text-align: center; font-size: 1.6rem; font-weight: 500; border-radius: 20px; cursor: pointer; border:none;}
.brochure a.on{display: block;}
.brochure a>img{vertical-align: middle; animation: ani_button 1s alternate infinite;}
.sub_wrap{position: relative;}
.btn_view_port{
    display: block;
    position:sticky;
    top:86px;
    right:0px;
    background: #82c025;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
    padding:12px 0px;
}

@keyframes ani_button{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(40%);
    }
}

.con{display:flex; flex-wrap:wrap; justify-content:space-between;}
.con>div{width:33.33333%; margin-bottom:60px; text-align:center; padding:0px 20px;}
.all>div:nth-of-type(1)>a{display: block; overflow: hidden; border-radius: 20px; border:1px solid #ccc;}
.all>div:nth-of-type(1)>a>img{max-width:100%; border-radius: 20px; transition: 0.4s; vertical-align: top;}
.all>div:nth-of-type(1)>a:hover>img{transform: scale(1.1);}
.link_port{display:flex; justify-content:center;}
.link_port>a{position:relative; justify-content:space-between; text-align:center; margin:10px 30px 0px; padding:5px 16px; font-size:1.6rem; font-weight:500; transform:rotate(-5deg); color:#fff; transition:0.3s;}
.link_port>a:before{content:''; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); width:100%; height:100%; border-radius:25px 4px; background:#0091db; z-index:-1; transition:0.3s;}
.link_port>a:hover, .link_port>a:focus{transform:rotate(0deg);}
.link_port>a:hover:before, .link_port>a:focus:before{border-radius:4px; background:#004ea2;}
#go_top{display:none; position:fixed; bottom:50px; right:40px;}
#go_top>a{display:block; background:#82c025; color:#fff; width:40px; height:40px; border-radius:50%; text-align:center; padding-top:8px; transition:0.3s;}
#go_top>a>span{margin-right:0px; vertical-align:middle;}
#ft{position: relative; text-align:center; padding:16px 0px; background:#004ea2; color:#fff; font-size:1.6rem;}
.sub_wrap{text-align: center;}
.btn_expression{position: absolute; top:50%; left:0px; padding: 16px; transform: translateY(-50%); transition: 0.3s; color:#004ea2}
.btn_expression:hover{background-color: #fff; color: #004ea2;}

/* tablet */
@media screen and (max-width:1279px) and (min-width:767px){
    .not_small_con{display:none;}
    #hd{padding:20px 30px; margin:0px 0px 30px 0px;}
    #hd>div{padding:16px 30px;}
    #hd>div>h1>a>img{width:75%;}
    #hd>div>a:last-child{margin-right:0px;}
    #hd>div>a{font-size:1.4rem; line-height:34px; padding:0px 14px; margin-right: 20px;}
    #hd>h2{font-size:5rem; margin-top:70px;}
    #hd>h2>span{font-size:6rem;}
    .wrap{padding:0px 30px;}
    .wrap_cate{top:70px;}
    .cate>li:first-child{margin-left: 0px;}
    .cate>li{margin-right: 8px;}
    .cate>li:last-child{margin-right: 0px;}
    .cate>li>button{font-size:1.4rem; line-height:36px; padding:0px 16px;}
    .link_port>a{font-size:1.4rem;}
    .con>div{width:50%; padding:0px 20px;}
    #go_top{bottom:50px; right:10px;}
    #go_top>a{width:36px; height:36px; padding-top:6px;}
    .sub_wrap img{max-width: 100%;}
    .brochure{top:120px; padding: 0px 0px 12px;}
    .brochure a{padding: 0px 8px; font-size: 1.5rem;}
    .btn_view_port{
        top:70px;
        right:0px;
        font-size: 1.4rem;
        font-weight: 500;
        padding:8px 0px;
    }
}   /* tablet E */

@media screen and (max-width:767px){
    .small_con{display:block;}
    .not_small_con{display:none;}
    #hd{padding:20px 20px; margin:0px 0px 0px 0px;}
    #hd>div{padding:8px 20px 0px;}
    #hd>div>h1>a>img{width:75%;}
    #hd>div>a:last-child{margin-right:0px;}
    #hd>div>a{font-size:1.6rem; line-height:32px; height:32px; width:36px; padding:0px; display:block;text-align:center; margin-right: 10px;}
    #hd>div>a>span{padding-bottom:4px; margin-right: 0px;}
    #hd>h2{font-size:3rem; margin-top:48px; margin-bottom: 0px;}
    #hd>h2>span{font-size:4rem;}
    #hd>h3{font-size:1.3rem;}
    .wrap{padding:0px 20px;}
    .wrap_cate{top:44px;}
    .cate{top:46px; margin-bottom:0px; padding-bottom: 12px;}
    .cate.on{border-bottom:none;}
    .cate>li{margin:10px 10px 0px 0px;}
    .cate>li:first-child{margin-left:0px;}
    .cate>li>button{font-size:1.4rem; padding:6px 10px;}
    .material-symbols-outlined, .material-symbols-outlined{margin-right:0px;}
    .con{justify-content:center;}
    .con>div{position:static; padding:0px; margin:0px 0px 40px 0px; border-radius:20px; transition:.7s; width:initial;}    
    .con>div:last-child{padding-bottom:0px; margin-bottom:30px;}
    .link_port>a{font-size:1.3rem;}
    #go_top{bottom:30px; right:10px;}
    #go_top>a{width:36px; height:36px; padding-top:6px;}
    #ft{padding:10px 0px; font-size:1.2rem;}
    #hd.sub_hd>div{padding: 6px 20px 8px; border-bottom: 1px solid #999;}
    .sub_wrap img{max-width: 100%;}
    .brochure{top:90px; padding: 4px 0px 10px;}
    .brochure a{padding: 0px 8px; font-size: 1.5rem; width: 100%;}
    .btn_view_port{
        top:53px;
        right:0px;
        font-size: 1.4rem;
        font-weight: 500;
        padding:8px 0px;
    }
} /* mobile E */