@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;text-align:center;}

.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%;
    }
.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;padding:0}

.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;}




/* 소개 */
.content-wrap {min-height:650px;padding:50px 0;box-sizing:border-box;font-size:12px;}
.introduce {max-width:1456px;margin:0 auto 50px auto;padding:20px;color:#d9d9d9}
.content-wrap dl {width:100%}
.content-wrap dt {width:150px;display:inline-block;text-align:right}
.content-wrap dd {display:inline-block}

.codrops-header h1 {position:relative;margin:0 auto;font-size:2rem;font-weight:900;/* font-family:'Noto_R','Sq_R','MG','dotum'; */color:#fff;padding:90px 0 20px 0;}
.codrops-header h1 a {color:#111;font-weight:300}
.codrops-header h3 {margin:0;font-size:.9rem;color:#bfbfbf;padding:20px 50px 0;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 {height:49px;line-height:50px;}
.codrops-demos ul {position:relative;padding:0;margin:0 auto;max-width:1456px;height:50px}
.codrops-demos ul li {display:inline-block;position:relative;margin:0 10px}
.codrops-demos a {
    text-transform:uppercase;
    letter-spacing:-.2px;
    margin:0;
    padding:10px;
    font-family:'Noto_R','Sq_R','MG','dotum';
    color:#777;
    transition:.2s
}
.codrops-demos a.current-on {
    color:#000;
    transition:all ease .2s 0s;
    font-weight:600;
    letter-spacing:-.5px
}
.codrops-demos a:hover {color:#555}
.codrops-demos ul li span {color:#f9ff00;margin-left:-8px;}

.codrops-demos a:after {
    display:inline-block;
    content:"";
    width:0;
    height:36px;
    background:rgba(255,255,255,.1);
    position:absolute;
    left:0;
    bottom:10px;
    border-radius:3px;
    transition:all ease .2s 0s;
}

.codrops-demos a:hover:after {
    width:100%;
}

.codrops-demos a.current-on:after {
    width:100%;
    transition:all ease .2s 0s;
}


/* 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 {position:absolute;right:20px;top:20px;font-size:12px;background:#1e78ff;padding:5px 15px 5px 15px;z-index:5;line-height:20px;transition:ease-in-out .2s;border-radius:3rem}
.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 {color:#fff}

.new_stk:hover {background:#000}
.new_stk:hover:after {border-color:#502b88 transparent transparent transparent}

@media screen and (min-width: 1200px) {
.codrops-demos a {font-size:1.5rem;padding:10px 7px;}
.codrops-demos ul li {margin:0 10px}
}

@media screen and (max-width: 480px) {
    .top-menu {}
    .m_fl {float:left}
    .codrops-header h3 {text-align:left;padding:30px 30px}
    .container {}
    /* .container {background:#111 url(../img/pattern_4_1.png) !important;} */
	.codrops-icon span {display:none;}
    .codrops-demos {border:none}
    .codrops-demos ul {padding:0 20px;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;height:60px}
    .codrops-demos ul li {margin:0 7px}
    .codrops-demos a{margin:0;padding:2px 5px;font-size:18px}
    .header-text {width:90%}
    .content-wrap {width:94%;margin:20px auto;background:transparent;padding:0}
    .footer {}
    .footer li {}
    .new_stk {position:relative;width:100%;top:auto;right:auto;border-radius:0}
    .new_stk a {display:block;padding:5px 0;font-size:.9rem}
    .codrops-header h1 {font-size:1.5rem;letter-spacing:-1px}
    .codrops-header h1 span.condition {right:45px}
    .title {}

    .introduce {display:block;width:100%;height:auto;padding:10px;margin:0 auto 20px auto}
    .content-wrap dl {float:none;border-bottom:1px solid #e7ebf2;display:block;height:auto;line-height:1.4;margin:0;padding:10px;}
    .content-wrap dt {display:block;width:100%;text-align:left;height:30px;line-height:30px}
    .content-wrap dd {display:block;width:100%;padding:0;margin:0;height:auto;}
    .m_intro_dl {float:left;height:100px !important;}
    .m_intro_dl > dd {margin-top:7px;line-height:1.5}

    .odongtong-top span.right {display:none}
    .title_wrap .phone {font-size:12px}
}

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

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

}