@media (max-width:375px) {
    :root {
        --mc:#F47520;
    }
    
    #wrap {min-width: auto;}
    
    /* * {outline: 1px solid #369;} */
    
    /* --------------------- header ---------------------------- */
    .header {display: flex;position: fixed;top: 0;left: 0;
    justify-content: space-between;padding: 0 6rem;line-height: 8rem;
    z-index: 999;width: 100%;color: #333;transition: 0.3s;align-items: center;background: #fff;
    min-width:auto;}
    
    .header h1>a {display: block; background: url(../imges/simbol.png)no-repeat left /50%;}
    
    .header:hover {background: #fff;color: #333;}
    .header:hover h1>a {background: url(../imges/simbol.png)no-repeat left/50%;}
    
    
    .header .gnb {position: fixed;top: 0;left: -100%;width: 100%;height: 100vh;background: #fff;border-right: 1px solid var(--mc);
    padding: 3rem;transition: 0.3s;display: none;}

    .header .gnb.on {left: 0;}

    .header .gnb>ul {display: flex;flex-direction: column;}
    .header .gnb>ul>li {position: relative;padding: 0 3rem;}
    .header .gnb>ul>li>a {display: block;font-size: 1.8rem;font-weight: 500;
    }
    
    
    .header .gnb>ul>li:nth-child(2) {color: var(--mc);transition: 0.3s;}
    .header:hover .gnb>ul>li:nth-child(2) {color: var(--mc);transition: 0.3s;}
    
    
    .header .gnb>ul>li .subMenu {position:static;top: 8rem;left: 50%;
    transform: translateX(-50%);line-height: 2;text-align: center;
    display: block;background: #fff;width: 100%;border-top: none;
    height: 0;overflow: hidden;}
    .header .gnb>ul>li:hover .subMenu {display: block;}
    .header .gnb>ul>li .subMenu.on {height: 100%;}
    
    .header .gnb>ul>li .subMenu>li~li {border-top: 1px solid #999;}
    .header .gnb>ul>li .subMenu>li>a {font-size: 1.8rem;display: block;
    padding: 0.5rem 0;}
    .header .gnb>ul>li .subMenu>li>a:hover {background: var(--mc);color: #fff;}
    
    .header .full_menu {display: none;}
    .header .full_menu i {font-size: 4rem;line-height: 10rem;cursor: pointer;}
    



    /* --------------------- con01 ---------------------------- */
    
    
    .con01 {position: relative;overflow: hidden;}
    
    .con01 .leftMenu {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%)
    translateY(70%);display: none;}
    .con01 .leftMenu>div {padding: none;border: none;}
    .con01 .leftMenu>div i {font-size: 3rem;color: #333;transition: 0.3s;
    display: none;}
    .con01 .leftMenu.hover i {color: #333;}
    .con01 .leftMenu>div.on i {color: #333;}
    
    .con01 .searchMenu {border-left: 1px solid #fff;}
    .con01 .searchMenu form {background: #fff;position: absolute;
    top: 1.2rem;left: -50%;display: flex;transition: 0.5s;
    padding-bottom: 12rem;z-index: 1;padding: 5rem}
    .con01 .searchMenu form input {border: none;outline: none;background: none;
    border-bottom: 1px solid #333;transition: 0.5s;font-size: 1.2rem;}
    .con01 .searchMenu form i {display: block;}

    .con01 .searchMenu:hover form {left:-50%;}

    .con01 .noticeMenu {border-bottom: 1px solid #fff;}
    .con01 .noticeMenu .notice {position: absolute;width: 100rem;
    top: 0;left: -100rem;background: #fff;padding: 5rem 20rem;
    transition: 0.5s; z-index: -1;display: none;}
    .con01 .noticeMenu:hover .notice {left: 0;}
    
    .con01 .noticeMenu .notice strong {display: flex;font-size: 3rem;
    font-weight: 700;margin-bottom: 5rem;color: #333;position: relative;}
    .con01 .noticeMenu .notice strong::after {content: "";display: block;
    width: 30%;height: 0.1rem;position: absolute;bottom:-1rem ;left: 0;
    background: #3B5998;}
    
    .con01 .noticeMenu .notice a {display: flex;line-height: 2;
    justify-content: space-between;border-bottom: 1px solid transparent;}
    .con01 .noticeMenu .notice a:hover {border-bottom: 1px solid #F47520;}
    
    
    
    
    /* --------------------- con02 ---------------------------- */
    
    .con02 {overflow: hidden;position: relative;}
    .con02:after {content: "";display: block;width: 100%;height: 100%;
    position: absolute;bottom: 0;left: 0;z-index: 9999;}
    .con02.on:after {z-index: -1;transition: 1.5s;}
    
    .con02 .container {display: grid;grid-template-columns: 1fr;}
    .con02 .container>div {display: flex;position: relative; flex: none;
    height: 25vh;overflow: hidden;transition: 0.3s;}
    .con02 .container>div::after {content: "";width: 100%;height: 100%;
    position: absolute;top: 0;left: 0;background: rgba(0, 0, 0, 0.3);
    transition: 0.3s;display: none;}
    .con02 .container>div:hover:after {background:rgba(0, 0, 0, 0.3);}
    
    
    .con02 .container .case01 {background: #FA413A;opacity: 0;}
    .con02 .container .case02 {background: #FF7277;opacity: 0;}
    .con02 .container .case03 {background: #74D1EB;opacity: 0;}
    .con02 .container .case04 {background: #0099CE;opacity: 0;}
    
    .con02.on .container .case01 {animation:fadeInLeft 0.5s;opacity: 1;}
    .con02.on .container .case02 {animation:fadeInLeft 0.7s;opacity: 1;}
    .con02.on .container .case03 {animation:fadeInLeft 0.9s;opacity: 1;}
    .con02.on .container .case04 {animation:fadeInLeft 1.2s;opacity: 1;}
    
    .con02 .container>div:hover {flex: 1;}
    .con02 .container .case02:hover {background: #FF7277;}
 
    .con02 .container>div.on .slogan {opacity: 0;}
    .con02 .container .case02.on {background: url(../imges/con02_item02.png)
    no-repeat center center/cover;}

    
    .con02 .slogan {text-align: center;color: #fff;position: absolute;
    top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1;white-space: nowrap;}
    .con02 .slogan h2 {font-size: 4rem;font-weight: 700;margin-bottom: 2rem;}
    .con02 .slogan p {font-size: 2rem;font-weight: 300;}
    
    .con02 .container .case02:hover .slogan {display: block;}
    
    
    .con02 .container .case01 .con02_item {position: relative;padding:2rem;margin: 0 auto;
    text-align: center;visibility: hidden;z-index: 1;transform: translateX(0);
    font-family: 'Noto Serif KR', serif;}

    .con02 .container .case01.on .con02_item {visibility: visible;}

    .con02 .container .case01 .con02_item img {margin-bottom: 2rem;display: none;}
    .con02 .container .case01 .con02_item h3 {font-size: 2rem;font-weight: 700;
    color: #fff;margin-bottom: 2rem;}
    .con02 .container .case01 .con02_item strong {display: block;
    font-weight: 300;line-height: 1.2;color: #ddd;font-size: 1.2rem;
    margin-bottom: 4rem;}
    .con02 .container .case01 .con02_item a {padding: 0.5rem;background: #fff;
    font-size: 1.5rem;font-weight: 500;color: var(--mc);}
    .con02 .container .case01 .con02_item a:hover {background: #fff;color: var(--mc);}
    .con02 .container .case01:hover figure {visibility: hidden;transform: translateY(0);
    transition: 0.3s;}

    
    .con02 .container .case02 .link {padding: 17rem 0;margin: 0 auto;position: relative;
    z-index: 1;transform: translateY(0);opacity: 0;visibility: hidden;}
    .con02 .container .case02.on .link {visibility: visible;opacity: 1;}

    .con02 .container .case02 .link a {display: block;padding: 1rem;background: var(--mc);
    font-size: 1.5rem;color: #fff;font-weight: 500;}
    .con02 .container .case02:hover .link {transform: translateY(0);opacity: 1;
    transition: none;}
    
    
    
    .con02 .container .case03 .link {display: flex; padding-top: 15rem;
    margin: 0 auto;position: relative;z-index: 1;}
    .con02 .container .case03 .link>div {margin: 0 0.5rem;transform: translateY(0);
    opacity: 1;visibility: hidden;}
    .con02 .container .case03 .link>div>a {display: block; font-size: 1.3rem;padding: 1rem;
    background: #fff;font-weight: 500;border-radius: 1rem;border: 1px solid #999;}
    .con02 .container .case03 .link>div>a:hover {background: #fff;border: 1px solid #999;
    color: #333;}
    
    .con02 .container .case03:hover .link>div {transform: translateY(0);opacity: 1;}
    .con02 .container .case03:hover .link01 {transition: 0.5s;}
    .con02 .container .case03:hover .link02 {transition: 0.75s;}
    .con02 .container .case03:hover .link03 {transition: 1s;}
    
    .con02 .container .case03 .icon {position: absolute;top: 5rem;left: 50%;
    opacity: 0;visibility: hidden;transform: translateX(-50%);}
    .con02 .container .case03:hover .icon {animation:none;opacity: 1;}
    .con02 .container .case03 .icon i {font-size: 6rem;color: var(--mc);}
    
    .con02 .container .case03.on .link>div {visibility:visible ;}
    .con02 .container .case03.on .icon {opacity: 1;visibility: visible;}
    
    .con02 .container .case04 .case {display:block;position: relative;z-index: 999;margin: 0 auto;
    display: flex;visibility: hidden;}
    .con02 .container .case04 .case figure {flex: 1;transform: translateY(0);
    opacity: 1;padding:10rem 0.5rem;}
    .con02 .container .case04 .case figure img {width: 100%;transition: none;}
    .con02 .container .case04 .case figure:hover img {transform: scale(1);}
    .con02 .container .case04:hover .case figure {transform: translateY(0);
    opacity: 1;}
    .con02 .container .case04:hover .case .info01 {transition: none;}
    .con02 .container .case04:hover .case .info02 {transition: none;}
    .con02 .container .case04:hover .case .info03 {transition: none;}
    
    .con02 .container .case04.on .case {visibility: visible;}
    
    /* --------------------- con03 ---------------------------- */
    
    
    .con03 {position: relative;}
    
    .con03 h2 {font-size: 2.4rem;font-weight: 500;width: auto; margin: 0 auto;text-align: center;}
    .con03 h2:after {content: "";display: inline-block;width: 60%;
    height: 0.1rem;background: #0099CE;margin: 1rem 0 2rem 0;}
    
    .con03 .container {position: relative; width: auto;margin: 0 auto;
    border-top:none;opacity: 0;
    transform: translateY(100rem);}
    .con03.on .container {opacity: 1;transform: translateY(0);transition: 0.5s;}
    
    .con03 .itemSlider {width: auto;}
    .con03 .itemSlider figure {display: flex;flex-direction: column;
    padding: 0 1.5rem;}
    .con03 .itemSlider figure img {width: 100%;}
    
    .con03 .itemSlider .item_slogan {padding: 4rem;}
    .con03 .itemSlider .item_slogan h3 {font-size: 2rem;font-weight: 500;margin-bottom: 1rem;}
    .con03 .itemSlider .item_slogan h3::before {content: "#";color: var(--mc);
    font-size: 2rem;margin-right: 0.5rem;}


    .con03 .itemSlider .item_slogan p {display: block;font-size: 1.5rem;font-weight: 300;
    margin-bottom: 4rem;line-height: 1.4;}
    .con03 .itemSlider .item_slogan a {padding: 0.5rem;
    background: var(--mc);text-align: center;color: #fff;font-size: 1.5rem;
    font-weight: 500;display: block;}
    
    .con03 .sitemSlider {position: absolute;bottom: 0;left: 35.7%;z-index: 999;
    width: 120rem;display: none;}
    
    .con03 .btn {text-align: center;padding: 2.5rem 0;opacity: 0;
    transform: translateY(100rem)}
    .con03 .btn i {padding: 0.7rem;background: #333;font-size: 2rem;
    color: #fff;border-radius: 50%;margin: 0 3rem;cursor: pointer;}
    
    .con03.on .btn {opacity: 1;transform: translateY(0);transition: 0.5s;}
    
    /* --------------------- con04 ---------------------------- */
    
    .con04 {background: url(../imges/bg.png)no-repeat center center/cover;}
    .con04 .container {display: flex; width: auto;margin: 0 auto;
    flex-direction: column;}
    
    .con04 .leftTxt {flex: 1;border-right: none;margin-bottom: 5rem;}
    .con04 .rightBanner {flex: 1;margin-left: 0;}
    
    .con04 .leftTxt h2 {font-size: 2.4rem;font-weight: 500;margin-bottom: 2.5rem;color: #333;text-align: center;}
    .con04 .leftTxt a {padding: 1rem;font-size: 1.6rem;color: #333;
    border: 1px solid #333;transition: 0.3s;display: block;text-align: center;width: 50%;margin: 0 auto;}
    .con04 .leftTxt a:hover {background: none;color: #333;border: 1px solid #333;}
    
    
    .con04 .rightBanner .con04_slider {width: auto;
    padding-bottom: 5rem;padding: 0 1.5rem;}
    .con04 .rightBanner figure {margin-right:0;text-align: center;}
    .con04 .rightBanner figure img {width: 100%;}
    .con04 .rightBanner h3 {margin-top: 1.8rem;font-size: 2rem;font-weight: 500;
    margin-bottom: 1rem;white-space:pre-wrap;}
    .con04 .rightBanner p {font-size: 1.3rem;font-weight: 300;line-height: 1.5;margin-bottom: 2.5rem;}
    
    .con04 .rightBanner .ck_sns {display: flex;justify-content: center;border-bottom:none;flex-flow: row wrap;}
    .con04 .rightBanner .ck_sns a {display: block;border-right:none;border-top:none;padding: 1rem;}
    .con04 .rightBanner .ck_sns i {font-size: 4rem;color: #fff;
    padding: 1rem;background: #F47520;border-radius: 50%;}
    
    
    
    
    
    
    
    /* --------------------- footer ---------------------------- */
    
    
    .footer {background: #222;color: #fff;padding: 3rem 0;}
    
    .footer .ft_top>ul {display: flex;justify-content: center;border-bottom: 1px solid #999;flex-direction: column;
    text-align: center;
    margin-bottom: 5rem;}
    .footer .ft_top>ul>li {padding: 0 3rem;}
    .footer .ft_top>ul>li>a {display: block;font-size: 1.5rem;font-weight: 300;
    margin-bottom: 2rem;}
    .footer .ft_top>ul>li:nth-child(2)>a {color: var(--mc);}
    
    .footer .service {display: flex;width: auto;margin: 0 auto;
    flex-direction: column;padding: 0 1.5rem;}
    .footer .service img {width: 100%;;margin:0 auto;
    margin-bottom: 2.5rem;}
    .footer .service address {font-size: 1.2rem;font-weight: 100;
    line-height: 1.8;text-align: center;}
    
    
    /* --------------------- totop ---------------------------- */
    
    
    .toTop {position: fixed;bottom: 0;right: 1rem;}
    .toTop i {font-size: 3rem;padding: 1rem;background: var(--mc);color: #fff;}
    
    /* --------------------- navbar ---------------------------- */
    
    .navbar {position: fixed;top: 50%;right: 1rem;transform: translateY(-50%);}
    
    .navbar li {margin: 1rem 0;}
    .navbar li>a {display: inline-block; padding: 0.5rem;background: #fff;
    border-radius: 50%;transition: 0.3s;border: 1px solid #999;
    text-align: center;color: #333;font-weight: 500;font-size: 0;}
    
    .navbar li.on>a {background: var(--mc);color: #fff;}
    
    
    /* --------------------- all_menu ---------------------------- */
    
    .all_menu {position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);
    visibility: hidden;opacity: 0;transition: 0.5s;background: rgba(255,255,255,0.8);
    width: 100%;height: 100%;z-index: 9999;}
    
    .all_menu .container {width: 120rem;margin: 0 auto;padding: 20rem 0;}
    .all_menu .container>ul {display: flex;justify-content: space-between;}
    
    .all_menu dt {font-size: 2.4rem;font-weight: 700;margin-bottom: 3rem;}
    .all_menu dd {font-size: 1.8rem;font-weight: 300;line-height: 1.8;}
    .all_menu li:nth-child(2) {color: var(--mc);}
    
    
    .all_menu.on {visibility:visible;opacity: 1;}
    
    .all_menu i {cursor: pointer;position: absolute;top: 10rem;right: 10rem;
    font-size: 4rem;}
    
    /* -------------------------------------- mopen ------------------------ */
    
    .mopen {display: block;position: fixed;top: 3rem;right: 1rem;z-index: 9999;}
    .mopen i {font-size: 2.5rem;padding: 0.5rem;background: var(--mc);
    color: #fff;border-radius: 50%;}
    
    /* -------------------------------------- mgnb ------------------------ */
    
    .mgnb {position: fixed;top: 0;left: -100%;width: 100%;
    height: 100vh;background: #fff;border-right: 3px solid var(--mc);
    padding: 5rem;transition: 0.3s;z-index: 999;}

    .mgnb.on {left: 0;}

    .mgnb>ul {display: flex;flex-direction: column;}
    .mgnb>ul>li {position: relative;padding: 2rem 0;}
    .mgnb>ul>li>a {display: block;font-size: 1.8rem;font-weight: 500;
    }
    
    
    .mgnb>ul>li:nth-child(2) {color: var(--mc);transition: 0.3s;}
    
    .mgnb>ul>li .subMenu {position:static;top: 8rem;left: 50%;line-height: 1;
    display: none;background: #fff;border-top: none;
    padding-top: 2rem;}

    .mgnb>ul>li .subMenu>li~li {border-top: 1px solid #999;}
    .mgnb>ul>li .subMenu>li>a {font-size: 1.5rem;display: block;
    padding: 1rem 0;text-align:left;font-weight: 300;}
    
    .msearch {position: fixed;bottom: 5rem;left: -100%;transition: 0.3s;width: 100;
    z-index: 9999;}
    .msearch.on {left: 0.5rem;}
    .msearch input {border: none;outline: none;border-bottom: 1px solid #333;}
    .msearch  i {font-size: 2.4rem;}
    
    
}