@charset "UTF-8";
@font-face{
font-family:BH;
src:url('/webfont/BMDOHYEON.eot');
src:local(※), 
	url('/webfont/BMDOHYEON.woff') format('woff');
}
@font-face{
font-family:MG;
src:url('/webfont/malgun.eot');
src:local(※), 
	url('/webfont/malgun.woff') format('woff');
}
@font-face{
font-family:Noto_R;
src:url('/webfont/NotoSansCJKkr-Regular.otf.eot');
src:local(※), 
	url('/webfont/NotoSansCJKkr-Regular.woff') format('woff');
}
@font-face{
font-family:Noto_B;
src:url('/webfont/NotoSansCJKkr-Bold.otf.eot');
src:local(※), 
	url('/webfont/NotoSansCJKkr-Bold.woff') format('woff');
}

@font-face{
font-family:Sq_R;
src:url('/webfont/spoqa/SpoqaHanSansRegular.eot');
src:local(※), 
	url('/webfont/spoqa/SpoqaHanSansRegular.woff') format('woff');
}
@font-face{
font-family:Sq_B;
src:url('/webfont/spoqa/SpoqaHanSansBold.eot');
src:local(※), 
	url('/webfont/spoqa/SpoqaHanSansBold.woff') format('woff');
}
@font-face{
font-family:Sq_L;
src:url('/webfont/spoqa/SpoqaHanSansLight.eot');
src:local(※), 
	url('/webfont/spoqa/SpoqaHanSansLight.woff') format('woff');
}
@font-face{
font-family:Sq_T;
src:url('/webfont/spoqa/SpoqaHanSansThin.eot');
src:local(※), 
	url('/webfont/spoqa/SpoqaHanSansThin.woff') format('woff');
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

body {color:#33383f;font-size:100%;line-height:1.25;/* font-family:'Sq_R','dotum','돋움', sans-serif; */}

li {list-style:none}

.fl {float:left}
.line-height150 {line-height:150%}

a {color:#33383f;text-decoration:none;outline:none}
a:hover,a:focus {color:#070707}
.codrops-header {margin:0 auto;padding:0;}

.header-text {width:960px;margin:0 auto;padding:20px 0;text-align:center;font-family:'dotum','돋움';font-size:12px;border:1px dashed #eaeaea;background:#fafafa;display:none}

.title_wrap {
    position:relative;
    width:100%;
    padding-top:20px;
}
.title_wrap .phone {font-size:1rem;margin:-1px auto 0 auto;padding:0 0 20px;}
.title_wrap .phone a {color:#76ff03 !important}

.title {position:relative;max-width:1152px;padding:0;margin:0 auto;font-size:0}

/* logo */
.odh-logo-1 {
	display:flex;
    align-items: center;
    position:relative;
    width:100px;
    height:50px;
    justify-content: center;
}
.odh-logo-1 svg {line-height: 1;}
svg text {
  font-family:'Sq_B';
  letter-spacing: -.1rem;
  stroke: #000;
  font-size: 2.5rem;
  font-weight: 700;
  stroke-width: 2;
  animation: textAnimate 5s infinite alternate;
}
@keyframes textAnimate {
  0% {
    stroke-dasharray: 0 50%;
    stroke-dashoffset:  20%;
    fill:hsl(0, 0%, 75%)

  }
  100% {
    stroke-dasharray: 50% 0;
    stroke-dashoffstet: -20%;
    fill: hsla(0, 0%, 0%, 0.99)
  }
}
/* logo end */  

.logo{width:500px;height:120px;float:left;overflow:hidden;position:relative;}
.ani-bg{position:absolute;top:-500px;left:0;}
.frame{position:absolute;top:0;left:0;z-index:1!important;}
.d-none {display:none !important}


/* 소개 */
.content-wrap {max-width:1152px;min-height:400px;margin:0 auto;padding:30px 0;box-sizing:border-box;font-size:12px;}
.introduce {position:relative;font-size:1rem;padding:0;z-index:2}
.introduce.top {

}
.introduce.top .accordion {
    background:none;
    margin-top:0;
    padding:50px 0 10px 20px;
}
.introduce.top .accordion.active h1 b:after {
    background:rgba(255, 235, 155, 0.9);
    width:100%;
}
.introduce.top .accordion::after {
    display:none;
}
.introduce.top .accordion h1 {
    font-size:2rem;
    margin:0;
    padding:0;
    text-align: left;
    transition: ease-in-out .3s;
    letter-spacing: -.2rem;
    line-height:1.2;
}
.introduce.top .accordion h1 b {
    /* font-family:'BH' */
}
.introduce.top .accordion h1:hover > b {
    color:#000;
    transition: ease-in-out .3s;
}
.introduce.top .accordion h1 b:after {
    display:inline-block;
    content:"";
    width:0;
    height:30px;
    background:rgba(255, 224, 129, 0.9);
    position:absolute;
    left:0;
    bottom:4px;
    border-radius:3px;
    transition:all ease .2s .2s;
    z-index:-1
}
.introduce.top .accordion h1:hover > b:after {
    width:100%
}

.introduce h3 {font-size:1.5rem;color:#000}
.introduce a {color:#1747d7}
.introduce dl {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0;
}
.introduce dl::before {
    display:inline-block;
    content:"";
    clear:both;
    width:3px;
    height:3px;
    background:#282828;
    border-radius: 5px;
    margin-right:5px;
}
.introduce dt {
    display:inline-block;
    font-size:.8rem;
    font-weight:600;
    color:#8e8e8e;
}
.introduce dd {
    display:inline-block;
    font-size:.8rem;
    margin-left:5px;
    /* color:#fff */
    font-weight:600;
}
.introduce span.bold {
    font-weight:600;
    color:#000
}
.introduce p.gray {
    color:#5b5b5b
}
img.introduce_1 {
    width:300px;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px
}
img.introduce_2 {
    width:120px;
    margin-top:10px;
    margin-bottom:10px;
    border-radius:10px
}

/* 본문 소개 */
.introduce.acc_01 {}
.introduce.acc_01 .accordion {
    position:relative;
    display:block;
    margin:0 auto;
    font-size:1.2rem;
    font-weight:600;
    letter-spacing: -1px;
    padding:10px 30px;
    background:transparent;
    color:#000;
    border-radius:5px;
    z-index: 5;
}
.introduce.acc_01 .panel {
    position:relative;
    margin-top:-13px;
    background:#f7f7f7;
}
.introduce.acc_01 .accordion::after {
    font-size:20px;
    vertical-align: top;
}
.introduce.acc_01 .accordion.active {
    background:none;
    color:#000;
    border-radius:1px;
    margin-bottom:20px;
    transition:all ease .2s;
}
.introduce.acc_01 .accordion.active + .panel {
    padding:1rem 1rem 3rem 1rem;
    z-index:0
}
.introduce.acc_01 .panel .contents {
    max-width:96%;
    margin:0 auto;
    line-height:1.5;
}
.introduce.acc_01 .panel .contents hr {
    background-color:#f3f7ef;
    border-style:dotted
}
.introduce.acc_01 .panel .contents hr::before {
    background-color:#e6ebf0;
    border-style:dotted
}

/* highlight */
.introduce span {
    display:inline;
    background-position:left;
    background-size: 0% 100%;
    background-image: linear-gradient(yellow, yellow);
    transition: all 500ms ease-in-out;
    background-repeat: no-repeat;
}
.introduce span:hover {
    background-size: 100% 100%
}

/* 2024 06 04 */
.point-text {
    font-family: 'Roboto', sans-serif;
    font-size:18px;
    color:#222;
    font-weight:400;
    line-height:1.3;
    margin:1rem 0 3rem 0;
    text-align: center;
    padding:0 10px;
}
.point-text span {
    font-size:1.2rem;
}

.codrops-header h1 {position:relative;margin:0 auto;font-size:2.5rem;color:rgba(0 0 0 / 88%);padding:90px 0 20px 10px;}
.codrops-header h1 a {color:#fff;font-weight:600;letter-spacing:-1px}
.codrops-header h3 {margin:0;font-size:.98rem;color:#808080;margin-bottom:30px}
.codrops-header h4 {margin:0;font-size:1em;font-family:'Sq_R';margin-top:50px}

.codrops-header h1 span {display:block;padding:0;font-size:0.6em}
.codrops-header h1 span.condition:before {display:block;content:"";clear:both}
.codrops-header h1 span.condition {
    display:none;
    position: absolute;
    top: 17px;
    right: 25px;
    font-size: 11px;
    font-weight: 600;
    font-family: noto-sans;
    background: #1989cc;
    padding: 2px 7px;
    border-radius: 3px;
    color: #fff;}
.codrops-header h1 span a {color:#fff}

.blink {-webkit-animation:blink 0.7s linear infinite;}
@keyframes blink {
    0% {background:#173e55;}
    50% {background:#ff00a7;}
    100% {background:#173e55;}
}



/* Demo links */
.codrops-demos {display:flex;justify-content:space-between;align-items:center;height:50px;line-height:50px;max-width:1152px;margin:0 auto;}
.codrops-demos h2 {margin:0;line-height:1}


/* 2025 01 22 */
h1.logo_h1 {
    display: inline-block;
    color: white;
    font-family: 'BH';
    font-size: 2.5rem; 
    text-shadow: .03em .03em 0 hsla(230,100%,50%,1);
    margin:0;
    padding:0;
    font-weight:900;
    letter-spacing:-3px;
}
h1.logo_h1:after {
    content: attr(data-shadow);
    position: absolute;
    top: 3px; left: -3px;
    /* z-index: -1; */
    text-shadow: none;
    background-image:
    linear-gradient(
        45deg,
        transparent 45%,
        rgb(8, 8, 8) 45%,
        hsla(48,20%,90%,1) 55%,
        transparent 0
        );
    background-size: .05em .05em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: shad-anim 15s linear infinite;
}
  
  @keyframes shad-anim {
    0% {background-position: 0 0}
    0% {background-position: 100% -100%}
    }
h1.logo_h1 a {
    color:#000;
    font-family: 'BH';
    padding:0;
    font-size:2rem;
    letter-spacing: 1px;
}
h1.logo_h1 a:after {
    display:none;
}



.codrops-demos h2 img {}
.codrops-demos ul {position:relative;padding:0;height:50px;margin:0}
.codrops-demos ul h2 {display:inline-block}
.codrops-demos ul li {display:inline-block;position:relative;margin:0 10px}
.codrops-demos a.odh_logo {

}
.codrops-demos a.odh_logo:hover::after {
    display: none;
}
.codrops-demos a {
    position:relative;
    text-transform:uppercase;
    letter-spacing:-1px;
    margin:0;
    padding:10px;
    font-size:1.2rem;
    font-family:'Noto_R';
    color:#222;
    font-weight: 600;
    transition:.2s;
    z-index:10
}
.codrops-demos a.current-on {
    color:#000;
    transition:all ease .2s 0s;
    letter-spacing:-.5px
}
.codrops-demos a:hover {color:#000}
.codrops-demos ul li span {
    color: #fff;
    margin-left: -8px;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: -10px;
}

.codrops-demos a:after {
    display:inline-block;
    content:"";
    width:0;
    height:0;
    background:rgba(0, 0, 0, 0.1);
    position:absolute;
    left:0;
    top:10px;
    border-radius:5px;
    transition:all ease .2s .2s;
    /* z-index:-1 */
}

.codrops-demos a:hover:after {
    width:7px;
    height:7px;
    background:rgba(240, 6, 6, 0.3);
}

.codrops-demos a.current-on:after {
    width:10px;
    height:10px;
    background:rgba(240, 6, 6, 0.8);
    transition:all ease .2s .2s;
}


/* To Navigation Style */
.odongtong-top {width:100%;text-transform:uppercase;font-style:normal;line-height:1;}
.odongtong-top a {display:inline-block;padding:0 1em;text-decoration:none;letter-spacing:1px;font-family:'dotum';font-weight:normal}
.odongtong-top span.left {float:left}
.odongtong-top span.right {float:right;font-family:'dotum';font-size:11px;padding:8px 0;display:none}
.odongtong-top span.right a {display:block;float:left;}
.codrops-icon:before {margin:0 4px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'BH';line-height:1;speak:none;-webkit-font-smoothing: antialiased}
.codrops-icon-drop:before {content:"\e001"}
.codrops-icon-prev:before {content:"\e004"}

.top-menu {max-width:1456px;margin:0 auto}


section {padding:1em;text-align:center}
.related {padding:15em 0 3em;clear:both}
.related p {font-size: 1.5em}

.related > a {border:1px solid #2E3444;display:inline-block;text-align:center;margin:20px 10px;padding:25px;color:#2E3444}
.related a:hover {border-color: #FF2A48;color: #FF2A48}
.related a img {max-width:100%;opacity:0.8}
.related a:hover img,
.related a:active img {opacity:1}

.related a h3 {margin:0;padding:0.5em 0 0.3em;max-width:300px;text-align:left}

.new_stk {
    height:40px;
    line-height:40px;
    /* max-width:1152px; */
    max-width:1152px;
    margin:0 auto;
    text-align: right;
    padding:0;
    font-size:0;
    /* border-bottom:1px solid #252525; */
}
.new_stk::after {display:none;content:"";position:absolute;top:100%;left:40%;border-width:5px;border-style:solid;border-color:#150a24 transparent transparent transparent}
.new_stk a {
    position:relative;
    display:inline-block;
    color:rgba(0 0 0 / 80%);
    font-size:13px;
    font-weight:600;
    padding:0 20px;
    vertical-align: top;
    border-radius:0;
    transition:ease-in-out .2s;
    margin:0;
    text-align:center;
    outline: none;
    box-sizing: border-box;
}
.new_stk a img {
    height:20px;
    vertical-align: middle;
    margin-right:7px;
}
.new_stk > span {font-size:12px;padding-right:1rem;color:rgba(255 255 255 / 50%)}
.new_stk a:nth-child(2) {
    /* background:rgba(0 0 0 / 10%);
    border-left:1px solid #252525;
    border-right:1px solid #252525; */
}
.new_stk a:nth-child(3) {
    /* background:rgba(0 0 0 / 10%); */
}
.new_stk a:nth-child(2):before {
    background: hsl(0 90% 42%);
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.2s ease-in-out;
    z-index: -1;
}
.new_stk a:nth-child(2):hover:before {
    transform: scaleX(1);
    transform-origin: left;
    /* width:calc(100% + 10px);
    transform:translateX(-5px); */
}
.new_stk a:nth-child(3):before {
    background: hsl(0 90% 42%);
    content: "";
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.2s ease-in-out;
    z-index: -1;
}
.new_stk a:nth-child(3):hover:before {
    transform: scaleX(1);
    transform-origin: left;
    
}
.new_stk a:after {
    display:inline-block;
    content:"";
    position:absolute;
    width: 10px;
    background: #ff0b0b;
    top:0;
    height: 10px;
    left: -5px;
    z-index: -2;
}
.new_stk a:hover {
/*     box-shadow:0 0 4px #ff0707;
    transition:ease .3s */
    color:rgba(0 0 0 / 100%);
}
.new_stk a:hover:after {border-color:#502b88 transparent transparent transparent}

@media screen and (min-width: 1200px) {
.codrops-demos a {padding:10px 14px;}
.codrops-demos ul li {margin:0}
}
@media screen and (min-width:544px) and (max-width:1200px) { 
    .codrops-demos a::after {
        bottom:10px;
        height:26px;
    }
}
@media screen and (min-width:561px) and (max-width:640px) { 
    .codrops-demos ul li {margin:0}
}
@media screen and (max-width: 560px) {
    .top-menu {}
    .m_fl {float:left}
    
    .container {}
    .grid-wrap ul {width:100% !important;margin-top:10px}
    .grid li {width:50% !important}
    /* .container {background:#111 url(../img/pattern_4_1.png) !important;} */
	.codrops-icon span {display:none;}
    
    .no-scroll {
      -ms-overflow-style: none; /* IE, Edge */
      scrollbar-width: none; /* Firefox */
    }
    .no-scroll::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }
    .codrops-demos ul li {width:25%;margin:0;padding:0;border-radius:0;height:40px;line-height:40px;}
    .codrops-demos ul li.current-on {}
    .codrops-demos a{display:inline-block;margin:10px 0 0 0;padding:0;font-size:16px;line-height:1;}
    .codrops-demos a.current-on {}
    .codrops-demos a.current-on::after {
        /* top:6px;
        width:10px;
        height:10px;
        border-radius:5px;
        padding:0 0; */
        bottom:8px;
        height:16px;
    }
    .codrops-demos a::after {bottom:8px;height:16px;}
    .codrops-demos a:hover::after {}
    .header-text {width:90%}
    .content-wrap {width:100%;margin:20px auto;background:transparent;padding:20px 1rem !important}
    .footer {}
    .footer li {}
    .new_stk {position:relative;width:100%;top:auto;right:auto;border-radius:0;display:flex;justify-content:center;align-items:center;gap:1rem;padding-top:10px}
    .new_stk a {font-size:.9rem}
    .codrops-header h1 {font-size:2rem;letter-spacing:-1px;line-height:1.2;}
    .codrops-header h1 span.condition {right:45px}
    .grid li > a {clip-path:none !important}

    .introduce {display:block;width:100%;height:auto;padding:0 5px;}
    .content-wrap dl:not(:last-child) {float:none;display:block;height:auto;line-height:1.4;margin:0;padding:10px 0 0 0;}
    
    .content-wrap dt {display:block;width:100%;font-size:.8rem;text-align:left;height:30px;line-height:30px}
    .content-wrap dd {display:block;width:100%;font-size:.8rem;padding:0;margin:0;height:auto;}
    .m_intro_dl {}
    .m_intro_dl > dd {margin-top:7px;line-height:1.5}

    .odongtong-top span.right {display:none}
    .title_wrap .phone {font-size:12px;display:none}
    .introduce .panel {
        border-radius: 10px;
        margin-top: 10px;
    }
    .photo_area {
        /* width:calc(100% - 40px) !important; */
    }
    .tag li {
        font-size:.76rem;
        padding:5px 7px 3px 7px !important;
        font-weight:600;
    }

    img.introduce_1 {
        width:200px;
    }
    img.introduce_2 {
        width:80px;
    }
    .point-text {
        font-size:1.25rem;
        font-weight:600;
        text-align: left;
        padding:0 5px !important;
        margin:1rem 0 3.5rem 0;
        line-height:1.2;
    }
    .point-text span {font-size:1.2rem}
    .introduce.acc_01 .panel {
        background:none;
        padding:1rem 0 !important
    }
    .introduce.acc_01 .panel .contents {
        width:100%;
        max-width:100%;
        font-size:1rem
    }
    .introduce.acc_01 .accordion::after {
        font-size:18px;
        vertical-align: middle;
    }
}

@media screen and (min-width:25em) and (max-width:1200px) {

    .header-text {width:90%;margin:0 auto}
    .content-wrap {width:100%;margin:0 auto;padding:20px 30px}

}