/* 넓이 1200px 맞춤 */
.clearfix:after {content: " ";visibility: hidden;display: block;height: 0;clear: both;}
#logo {float: left; padding: 20px 0;}
#logo a { display:block}

@media screen and (max-width:960px) {
    #logo{display:none}
}

#bo_gall .gall_img {
    max-height: 100% !important;
}

#tnb {float:right;border-bottom: 0;background: #fff; margin-top:10px; font-size: 15px;}
#tnb li {float:left; display:inline-block; padding: 0 10px;     border-left: 1px solid #ddd;}
#tnb li {float:left; display:inline-block; padding: 0 10px;     border-left: 1px solid #ddd;}
#tnb li:first-child { margin-left:0; border-left:0} 

#header #top{
    max-width: 1300px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 5px;
    padding-bottom: 15px;
}
#header .gubun { border-bottom:1px solid tomato;height:1px;}
#header .gnb_large {padding:0 10px 0 10px; }
.gnb_wrap{
    position: relative;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.gnb_wrap .gnb_large>li {float:left;padding:13px 30px;position:relative;background-image:url(../img/line.gif);background-repeat:no-repeat;background-position:0px 30px;}
.gnb_wrap .gnb_large>li:first-child { padding:13px 30px 13px 0; background-image:none}
.gnb_wrap .gnb_sub {position:absolute;left:-10px;top:79px;width:230px;display:none;background:#000;opacity:.8;z-index:100;padding:10px 10px 20px 20px}
.gnb_wrap .gnb_sub li a { color:#fff; font-size:16px; font-weight:400; letter-spacing:0}
.gnb_wrap .gnb_sub li a:hover { color:#ffd800;}
.gnb_wrap a {line-height:40px;font-size:19px; text-decoration:none; font-weight:bold; color:#333; letter-spacing:-1px}
.gnb_wrap a img{max-width: 270px;}
.gnb_wrap a:hover {color: #2776c0}
.gnb_wrap li.on > a {color: #2776c0}
.gnb_wrap .line {position:absolute;left: 0px; width: 0px;height:2px; overflow: hidden; background-color:#416391; z-index:1000;} /* javascript로 control */
.gnb_wrap .all {display:none; position:absolute; width:100%; z-index:20; background-color:#fff; top:87px; border-bottom:1px solid #ddd;}
.gnb_wrap .all>ul {list-style:none;margin:0;padding:0; width:1080px; margin:0 auto}
.gnb_wrap .all>ul>li:nth-child(6n+1){ padding-left:0; margin:0}
.gnb_wrap .all>ul>li {float:left; padding:16px; border-right:1px solid #ccc; width:180px; height:300px; box-sizing:border-box;}
.gnb_wrap .all>ul>li>a {color:#2a3b53; letter-spacing:-1px; font-weight:600}
.gnb_wrap .all>ul>li>ul{list-style:none;margin:0;padding:0;}
.gnb_wrap .all>ul>li>ul>li a {padding:0; font-size:16px; color:#555; font-weight:400}
.gnb_wrap .menu {cursor:pointer;text-indent:-9999px; position:absolute;top:25px;left:50%;width:25px;height:20px; background-image:url(../img/cate_more.gif); margin-left:580px; border:0;}
.gnb_wrap .menu.on {background-image:url(../img/cate_close.gif);}
.gnb_wrap #text_size {position:absolute;top:20px; right:50%; margin-right:-590px;float: right;}

@media screen and (max-width:640px) {
	.gnb_wrap { display:none}
	
}

@media screen and (max-width:959px) {
	.gnb_wrap { display:none}
	
}


#m-hd {display:none; height:75px; width:100%; position:fixed; top:0px; border-bottom:1px solid rgba(255, 255, 255, .3); z-index:2000;}
#m-hd .logo {position:absolute; left:10px; top:20px; display:inline-block; width:100px; height:40px; background-size:100% }
#m-hd .m-menu { width: 300px; background-color:#fff; position:absolute; z-index:10; right:-300px; top:0px; padding-top:50px; transition:right 0.5s;-webkit-transition: right 0.5s; overflow:auto;}
#m-hd .m-menu.on { right:0px;}
#m-hd .m-block {position:fixed; left:0; top:0; z-index:9; width:100%; height:100vh; background-color:#000; opacity:0.5; display:none;}
#m-hd .m-block.on {display:block;}
#m-hd .m-nav .logo_top { padding-top:50px}
#m-hd .m-nav > li {border-bottom:1px solid #f4f1f1; position:relative; }
#m-hd .m-nav > li .btn-down { position:absolute; right:20px; top:10px; font-size: 15px; width:30px; height:30px; line-height:30px; display:inline-block; text-align:center;  cursor:pointer; transform:rotate(-90deg);transition:transform 0.5s;-webkit-transition: transform 0.5s; overflow:auto;}
#m-hd .m-nav > li .btn-down.on {transform:rotate(90deg)}
#m-hd .m-nav > li > a { display:block; font-size:16px; padding:15px 10px 15px 35px;}
#m-hd .btn-menu { width: 40px; height:40px; line-height:40px; border:0; background-color:transparent; color:#fff; font-weight:bold; position:absolute; right:10px; top:17px; font-size:20px; z-index:9999}
#m-hd .btn-menu.on { color:#333}
#m-hd .m-sub-nav {display:none;}
#m-hd .m-sub-nav > li { border-top:1px solid #fff;  line-height:35px; }
#m-hd .m-sub-nav > li > a  {display:block; font-size:13px; padding:6px; background-color:#ddd; padding-left:38px}
.btn-menu{position:fixed;z-index:2000;right:5px;top:20px;width:40px;height:40px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer;display:block;}
.btn-menu .navicon-line{position:absolute;width:20px;height:2px;border-radius:1px;background-color:#333;-webkit-transition:all .7s ease-out;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out;transition:all .7s ease-out}
.btn-menu.on .navicon-line{background-color:#333;}
.btn-menu .nl1 {top: 11px;right: 10px; width:30px;}
.btn-menu .nl2 {top: 19px;right: 10px; width:24px;}
.btn-menu .nl3 {top: 27px;right: 10px; width:30px;}
.btn-menu.on>div{transform:rotate(225deg);-ms-transform:rotate(225deg);-webkit-transform:rotate(225deg);width:25px;position:absolute;top:15px;right:10px;margin:0;padding:0;background-color:#000;}
.btn-menu.on>div:first-child{transform:rotate(135deg);-ms-transform:rotate(135deg);-webkit-transform:rotate(135deg)}
body.scrolled .btn-menu .navicon-line {background-color: #666;}
body.scrolled .btn-menu.on >div{background-color:#666;}
.sub_navI_warp { display:none}

@media screen and (max-width:960px) {
	#header #top { height:75px}
	#header #tnb { display:none}
	/*#hd {display:none;}*/
	#m-hd {display:block; background-color:#fff; z-index:9999}
	#m-hd .logo { background-image:url(../img/logo.webp); background-repeat:no-repeat;width:200px;}
	.scrolled #m-hd { background-color:#fff; border-bottom:1px solid #ddd;}
	.scrolled #m-hd .logo { background-image:url(../img/logo-color.png); background-repeat:no-repeat}
}


@media screen and (max-width:640px) {
   .sub_navI_warp { display:block; width:90%; height:62px; margin:auto; top:-32px;  clear:both; background-attachment:scroll; position:relative; background-color:#000; z-index:3}
   .sub_navI_warp .all-wrap{transition:all .3s ease;}
   .sub_navI_warp .all-wrap .loca-wrap{width:100%;margin:0 auto;height:62px}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area { float: none;}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area i { display:none}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul {width: 100%; float:left; padding:0; margin:0}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li { position:relative; float:left; width: 50%; height:62px; border-left: 1px solid #00b5ff;}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li:first-child { border: 0;}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li button {width: 100%; height:62px; border: 0; position:relative; text-align:left; padding-left:1px; background-color: transparent;}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li button {background-image:url(../img/loca_arrow_off.png);background-position-y:50%;background-position-x:100%;background-repeat:no-repeat;-webkit-transition:background .3s ease;
   -moz-transition:background .3s ease;-o-transition:background .3s ease;-ms-transition:background .3s ease}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li button.active{background-image:url(../img/loca_arrow_on.png);background-position-y:50%;background-position-x:100%;background-repeat:no-repeat;}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li button span {padding-left: 19px;background-color: transparent; color:#fff; font-size:14px}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li div { overflow: hidden; height: 0; position: relative;}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li div ul{display:block;position:absolute;width:100%;left:0;border-top:1px solid #6c9bdb; padding:0}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li div ul li a{ border-bottom:1px solid #3583f0; background:#166ce3;height:46px;color:#fff;line-height:46px;display:block;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-o-transition:background .3s ease;-ms-transition:background .3s ease;padding-left:19px;box-sizing:border-box}

}


.btn-send-c {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.btn-send-c a{
    background-color: #012d7d;
    color: #fff;
    display: block;
    width: unset;
    padding: 17px 60px;
    border-radius: 10px;
    white-space: nowrap;
    font-size: 20px;
    line-height: unset;
    height: unset;
    opacity: 1;
}

.btn-send-c a:hover{
    color: #fff;
    opacity: 0.8;
}
    .detail {
        width: 100%;
        margin: 0 auto;
    }

    .detail>ul {
        width: 100%;
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 0 auto;
    }

    .detail>ul li {
      flex: 1 1 30%;
      text-align: center;
    }

    .detail>ul li img {
        margin: 30px auto 35px;
        border-radius: 5px;
    }

    .detail>ul li p {
        color: #666;
        font-size: 20px;
        margin-bottom: 26px;
        text-align: center;
    }

  

    section .box-container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        margin: 3.5rem 0 0;
    }

    section .box-container .box {
        flex: none;
        width: 11.5625rem;
    }

    section .box-container .box .thumb {
        margin: 0 auto;
        width: 10.3125rem;
        height: 10.3125rem;
        background: rgb(0 150 199);
        position: relative;
        z-index: 1;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        color: #fff;
    }

    section .box-container .box .thumb::before {
        content: '';
        display: block;
        border-radius: 50%;
        width: 11.5625rem;
        height: 11.5625rem;
        background: rgba(255, 255, 255, 0.2);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }

    section .box-container .box .img {
        margin: 0 0 0.75rem;
    }

    section .box-container .box .thumb h4 {
        font-size: 1.25rem;
        color: #222;
        font-weight: bold;
        letter-spacing: -0.045rem;
        width: 100%;
        text-align: center;
    }

    section .box-container .box .thumb h3 {
      font-size: 17px;
    }

    section .box-container .txt {
        width: 100%;
        text-align: center;
        margin: 2.125rem 0 0;
    }

    section .box-container .txt p {
        color: #fff;
        font-size: 1rem;
        letter-spacing: -0.045rem;
        line-height: 1.5rem;
    }

    @media only screen and (max-width: 1320px) {
        .inner {
            width: 100%;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            padding: 0 2.5rem;
        }
    }

    @media only screen and (max-width: 1279px) {
        section .box-container {
            width: 51.875rem;
            flex-wrap: wrap;
            justify-content: center;
            margin: 3.375rem auto 0;
        }
    }

    @media only screen and (max-width: 1279px) {
        section .box-container .box {
            margin: 0 2rem 2.75rem;
        }
    }

    @media only screen and (max-width: 900px) {
        section .inner {
            padding: 0;
        }
    }

    @media only screen and (max-width: 900px) {
        section .box-container {
            width: 100%;
        }
    }

    @media only screen and (max-width: 640px) {
        section .box-container .box {
          width: 45%;
          margin-bottom: 50px !important; 
        }
        section .box-container .box {
            margin: 0;
        }
        .inner {
            width: 100%;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
            padding: 0 0.8rem;
        }
    }

    @media only screen and (max-width: 640px) {
        section .box-container .box .thumb {
            width: 9.6875rem;
            height: 9.6875rem;
        }
        section .box-container .box .thumb::before {
            width: 10.9375rem;
            height: 10.9375rem;
        }
        section .box-container .box .thumb h4 {
            font-size: 1.125rem;
        }
    }

    @media only screen and (max-width: 500px) {
        #footer .menu {
            line-height: 30px;
        }
    }

    @media only screen and (max-width: 380px) {
        section .box-container .box {
            width: 50%;
        }
    }