@charset "utf-8";

/* reset */
html,body{width:100%;height:100%;}
html,body,blockquote,caption,dd,div,dl,dt,fieldset,form,frame,h1,h2,h3,h4,h5,h6,hr,
iframe,input,legend,li,object,ol,p,pre,q,select,table,textarea,ul,tr,td,figure,figcaption,header,article,section,aside,footer,button{margin:0;padding:0;font-weight:normal;}
fieldset,img{border:0 }
h1,h2,h3,h4,h5,h6{font-style:normal; font-weight:bold;}
hr{display:none}
li{list-style:none}
table{width:100%;border:0;border-spacing:0;empty-cells:show;border-collapse:collapse}
input{vertical-align:middle}
img{vertical-align:top}
legend,hr,figcaption{position:absolute;visibility:hidden;font-size:0;width:0;height:0;line-height:0}
caption{visibility:hidden;font-size:0;width:0;height:0;line-height:0}
fieldset *{vertical-align:middle}
table *{vertical-align:middle }
button{background-color:transparent}
article,aside,dialog,footer,header,section,footer,nav,figure{display:block} /* for html5 */


/* common */
body, input, select, option, textarea { font-family:brandon-grotesque,"Helvetica Neue",Helvetica,Arial,Apple SD Gothic Neo,sans-serif; font-size:14px; line-height:1.25em; color:#494949; -webkit-text-size-adjust:none; }
body { overflow-x:hidden; color:#333; }
a { color:#333; text-decoration:none; }

button { border:0; cursor:pointer; }
input[type="text"], input[type="button"], input[type="submit"], input[type="password"], input[type="search"], textarea {-webkit-appearance:none;
    -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;
}

/* facebook */
.login .thum {}
.login .btn_logout { display:none; }
.login.islogin {}

/*http://elearningwp.thimpress.com/wp-content/uploads/2015/06/logo-banner-search.jpg*/
.headerWrap { position:relative; text-align:center; color:#fff; background-image:url("/img/bg_visual.jpg"); background-repeat:no-repeat; background-position:50% 50%; background-size:cover;
    -webkit-transition: background 1s;
    transition: background 1s;
}
.headerWrap:before { background: rgba(45,51,57,0.85);content: "";position: absolute;right: 0;bottom: 0;left: 0;top: 0; }
.header { padding-top:3%; /* position:fixed; left:0; right:0; top:0;*/ position:relative; z-index:10; text-align:center; }
.container { position:relative; max-width:1080px; padding-left:10px; padding-right:10px; margin:0 auto; }

.active .headerWrap .header { position:fixed; z-index:100; left:0; top:0; right:0; padding:15px 0; color:#333; background-color:rgba(0,0,0,.8);
    box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.active .headerWrap .logo { float:left;}
.active .headerWrap .logo a { padding-top:11px;  }
.active .headerWrap .logo img { width:150px; height:auto; }
.active .headerWrap .gnb { float:left; margin-top:0; border:0; margin-left:20px; }
.active .headerWrap .gnb a { color:#fff; padding:0 20px; line-height:50px; font-size:1.2em; font-weight:200;}
.active .headerWrap .createLink {}
.active .headerWrap .login { top:50%; margin-top:-16px; }
.active .headerWrap .login .btn { padding:5px; background-color:#333;
    border-radius:100px;
}
.active .headerWrap .login .btn img { width:22px; height:22px; }
.active #redirect .titlearea { }

.logo { font-size:2.6em; }
.logo a { position:relative; display:block; margin:0 auto; text-align:center;}
.logo img { width:260px; height:47px; }

.gnb { display:inline-block; margin-top:3%; padding:0 15px; font-size:.9em; border-top:1px solid rgba(255,255,255,.4); border-bottom:1px solid rgba(255,255,255,.4); }
.gnb li { display:inline-block; }
.gnb a { position:relative; display:block; padding:10px 20px; color:#fff; }
.gnb .line { display:none; position:absolute; left:0; right:0; bottom:-1px; height:1px; background-color:rgb(93, 190, 89); line-height:0; }
.gnb .on .line { display:none; }

.login { position:absolute; right:10px; top:0; }
.login .btn { padding:5px 10px; border:0; color:#fff; }


.createLink .container { position:relative; z-index:2; padding:8% 0; }
.createLink .submit { cursor:pointer; margin-top:2%; color:#fff; font-size:1.1em; border:0; font-weight:bold; padding:12px 20px; text-transform:uppercase; border:2px solid rgb(93, 190, 89);  color:#fff; background-color:rgb(93, 190, 89);
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
.createLink .submit:hover { color:rgb(93, 190, 89); background-color:transparent; }

.linkTypeSelect {}
.linkTypeSelect label { position:relative; display:inline-block; margin:0 5px; padding-left:20px; cursor:pointer}
.linkTypeSelect input { position:absolute; left:0; top:50%; width:14px; height:14px; margin-top:-8px; }
.linkTypeSelect label span { opacity:.6 }
.linkTypeSelect input:checked + span { opacity:1 }

.originalurl { width:90%; margin:2% auto 0 auto; }
.originalurl input { width:100%; text-align:center; border:none; height:60px; line-height:60px; background:#fff; color:#728592; font-size:24px; font-style:italic;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}

.shortenurlbox { display:none; position:relative; width:80%; margin:5% auto 0 auto; }
.shortenurlbox .slink { display:block; width:100%; text-align:center; border:none; height:60px; line-height:60px; background:#fff; color:#728592; font-size:24px; font-style:italic;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}
.shortenurlbox .copytxt { position:absolute; left:50%; bottom:90%; width:200px; margin-left:-100px; padding:10px 0; font-size:1.2em; line-height:1.2; background-color:#000;
    box-shadow:1px 1px 2px rgba(0,0,0,.3);
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}
.shortenurlbox .arrow { position:absolute; left:50%; top:100%; margin-left:-6px; }

.customlinkWrap { position:relative; padding:0 46% 0 5%; display:none; margin:2% auto 0 auto; }
.customlink { position:relative; padding-left:2%; padding-right:2%; background-color:#fff; overflow:hidden;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}
.customlink input { text-align:center; border:none; height:60px; line-height:60px; background:#fff; color:#728592; font-size:20px; font-style:italic;}
.customlink input.hlink { float:left; width:16%  }
.customlink input.cid { float:right; width:38% }
.customlink .customSelectWrap { position:absolute; left:18%; right:40%; }
.customlink .customSelectWrap .txt { display:block; padding:0 20px; height:60px; line-height:60px; background-color:#fff; color:#728592; font-size:20px; font-style:italic; }
.customlink .domain { height:60px; line-height:60px; }
.customlink * { vertical-align:middle }



.previewlink { position:absolute; right:5%; top:0; width:39%; height:60px; line-height:60px; background-color:#fff; color:#728592; font-size:20px; overflow-x:auto; font-style:italic;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;}

.customSelectWrap { position:relative; display:inline-block; }
.customSelectWrap .txt { display:block; color:#fff; text-align:center; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; background-image:url('/img/select_arrow.png'); background-repeat:no-repeat; background-position:95% 50%; background-size:15px 13px; }
.customSelectWrap .customSelect { position:absolute; left:0; top:0; right:0; width:100%; min-height:100%; height:100%; opacity:0; cursor:pointer }

.serviceInfo { padding:5% 2%; color:#fff; background-color:rgb(93, 190, 89) }
.serviceInfo .item { float:left; width:21%; padding:0 2%; text-align:center; }
.serviceInfo .title { font-size:1.4em; line-height:1.2; }
.serviceInfo .txt { margin-top:2%; }
.serviceInfo .icon { display:inline-block; margin-bottom:10%;}

/* bbs */
.bbslinks { margin:5% 0; }
.bbs { }
.bbs-col { float:left; width:10%; padding:10px 0; text-align:center; text-overflow:ellipsis; white-space:nowrap; overflow:hidden }
.bbs-header { color:#fff; background-color:#323a45 }
.bbs-body {}
.bbs-body ul { border:1px solid #f6f6f6; }

.bbs-slinks {}

.bbs-col.checkbox { width:6%; }
.bbs-col.link { width:30%; padding-right:2%; }
.bbs-col.shorten { width:30%; padding-right:2%;}
.bbs-col.clicks {  }
.bbs-col.created {}
.bbs-col.share {}

.bbs-col.left { text-align:left; }

.subcontens { padding:2% 0; }
.subcontens .container { padding:80px 0; }
.titlearea {}
.titlearea .title { margin-bottom:.5%; color:#111; font-size:1.8em; line-height:1.2; font-weight:600; }
.titlearea .txt { color:#878787; font-size:1.2em; line-height:1.2; font-weight:normal; font-style:italic; }
.titlearea .line { display:block; width:20%; height:1px; margin-top:2%; line-height:0; background-color:#eaeaea; }

/* redirectTracker */
.redirectTracker { background-color:rgb(246, 249, 250) }

.traceurl { position:relative; background:#fff; margin:2% 0 0 0; padding-left:15%; overflow:hidden;
    -webkit-transition: padding .5s;
    transition: padding .5s;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}
.traceurl .customSelectWrap { position:absolute; left:0; top:0; min-height:100%; height:100%; width:14%; }
.traceurl .customSelectWrap .txt { display:block; padding-left:10px; padding-right:30px; font-style:italic; color:#728592; height:60px; line-height:60px; font-size:16px;}
.traceurl .link { width:100%; text-align:left; border:none; height:60px; line-height:60px; color:#728592; font-size:24px; font-style:italic;
    -webkit-transition: all .5s;
    transition: all .5s;
}
.traceurl .submit { position:absolute; right:-200px; top:0; width:200px; height:60px; cursor:pointer; color:#fff; font-size:1.1em; border:0; font-weight:bold; text-transform:uppercase; border:2px solid rgb(93, 190, 89);  color:#fff; background-color:rgb(93, 190, 89);
    -webkit-border-radius:0 5px 5px 0;
    -moz-border-radius:0 5px 5px 0;
    -ms-border-radius:0 5px 5px 0;
    -o-border-radius:0 5px 5px 0;
    border-radius:0 5px 5px 0;
    -webkit-transition: right .5s;
    transition: right .5s;
}
.traceurl.active { padding-right:200px;  }
.traceurl.active .link {
    -webkit-border-radius:5px 0 0 5px;
    -moz-border-radius:5px 0 0 5px;
    -ms-border-radius:5px 0 0 5px;
    -o-border-radius:5px 0 0 5px;
    border-radius:5px 0 0 5px;
}
.traceurl.active .submit { right:0;}
.codewrap { padding:2%; margin-top:2%;background:#000;color:white;font-size:12px;line-height:15px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}

/* footer */
.footer { text-align:center  }
.fblikearea { padding:2% 0; /*color:#fff; background-color:#2d3339 */ }
.copyrightarea { padding:2% 0; color:#999; border-top:1px solid #eaeaea; /*background-color:#23272d */}

#loading { text-align:center }
#loading img { width:35px; height:35px; }

.form-content {} 
.form-content.has-label { position: relative; background-color: #fff; margin-top:2%; padding-left: 14%;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
.form-content.has-label label { position:absolute; left:0; top:0; min-height:100%; height:100%; width:14%; display:block; font-style:italic; color:#728592; height:60px; line-height:60px; font-size:16px; border-right:1px solid #eaeaea; }
.form-content.has-label input { text-align: left; text-indent: 20px; }
.oslink { position: relative; }
.oslink .form-content { width: 35%; }
.oslink .form-content.has-label label { width:28.5%; }
.oslink .form-content.ioslink { position: absolute; right:0; top:0; margin-top:0; }
.oslink .form-content input { font-size: 20px; }


/** Code formatting */
pre, code { }
code { }
pre { overflow-x:auto;  }
pre > code { border: 0; padding-right: 0; padding-left: 0; }


/* clear float */
.gnb,
.container,
.bbs ul { *zoom:1; }
.gnb:after,
.container:after,
.bbs ul:after { display:block; content:''; clear:both; }

@media screen and ( max-width: 640px){
    .serviceInfo .item { width:46%; padding:2%; font-size:.8em; }
    .serviceInfo .icon img { width:25px; height:25px; }
}

@media screen and ( max-width: 767px){
    .container { padding-left:0; padding-right:0; }
    .active .headerWrap .header {  padding:6px 10px;  }
    /*.headerWrap .header { position:relative; z-index:100; padding:1.5%; color:#333; background-color:rgba(0,0,0.8);
        box-shadow:0 1px 3px rgba(0,0,0,.3);
    }*/
    /*.active .headerWrap .logo,
    .headerWrap .logo { }
    .active .headerWrap .logo a,
    .headerWrap .logo a { }
    .active .headerWrap .logo a img,
    .headerWrap .logo a img { width:120px; height:auto }
    .active .headerWrap .gnb,
    .headerWrap .gnb { float:left; margin-top:0; border:0; margin-left:20px; }
    .active .headerWrap .gnb a,
    .headerWrap .gnb a { color:#333; padding:0 20px; line-height:34px; font-size:1em; font-weight:200;}
    .active .headerWrap .createLink,
    .headerWrap .createLink { padding-top:3%; }
    .headerWrap .login { top:50%; margin-top:-13px; }
    .active .headerWrap .login .btn,
    .headerWrap .login .btn { padding:5px; background-color:#333;
        border-radius:100px;
    }
    .headerWrap .login.islogin { margin-top:-16px; }
    .active .headerWrap .login .btn img,
    .headerWrap .login .btn img { width:16px; height:16px; }*/

    .header { padding-top:5%; }

    .active .headerWrap .logo { float:left; }
    .active .headerWrap .logo a { padding-top:10px; }
    .active .headerWrap .logo img { width:100px; height:auto }
    .logo img { width:130px; height:24px; }
    .active .headerWrap .gnb { float:left; margin-left:10px; }
    .active .headerWrap .gnb,
    .gnb { font-size:.8em; }
    .active .headerWrap .gnb a { padding:0 10px; line-height:40px; font-size:1em; }
    .gnb a { padding:8px 10px; line-height:1.2}

    .active .headerWrap .login { right:0 }
    .active #redirect .titlearea {}

    .originalurl { width:94% }
    .originalurl input { height:40px; line-height:40px; font-size:18px; }
    .createLink .submit { padding:8px 14px; font-size:1em; }

    .customlinkWrap { padding:0 3%; }
    .customlink input { height:40px; line-height:40px; font-size:14px; }
    .customlink .customSelectWrap .txt { height:40px; line-height:40px; font-size:14px; background-size:7px 6px }
    .previewlink { margin-top:2%; position:static; width:auto; height:40px; line-height:40px; font-size:18px; }

    .bbslinks { margin:0; font-size:.9em; }

    .bbs-header { }
    .bbs-header ul,
    .bbs-body ul { position:relative; padding:2% 2% 2% 8%; border:0; border-bottom:1px solid #f6f6f6; }
    .bbs-col { padding:3px 0; }
    .bbs-col.checkbox { position:absolute; left:0; top:50%; margin-top:-9px; padding:0; width:8%; }
    .bbs-col.link { width:48%; padding-right:2%; }
    .bbs-col.shorten { width:48%; padding-right:2%;}
    .bbs-col.clicks { width:auto; margin-right:10px; color:#999; font-size:.9em;}
    .bbs-col.created { width:auto; margin-right:10px; color:#999; font-size:.9em;}
    .bbs-col.share { width:auto; margin-right:10px; color:#999; font-size:.9em;}

    .traceurl { background-color:transparent; padding-left:0;
        -webkit-transition: none;
        transition: none;
    }
    .traceurl .link { height:40px; line-height:40px; font-size:18px; text-indent:10px; text-align:center; margin-top:2%; background-color:#fff; }
    .traceurl .customSelectWrap { position:relative; width:100%; background-color:#fff; }
    .traceurl .customSelectWrap .txt { font-size:16px; line-height:40px; height:40px; }
    .traceurl .submit { display:block; position:static; width:100%; margin-top:2%; height:36px; font-size:.9em;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;
    }
    .traceurl.active { padding-right:0; }

    .shortenurlbox .slink { height:40px; line-height:40px; font-size:18px; }

    .subcontens { padding:2% 5%; }
    .subcontens .container { padding:52px 0; }
    .titlearea { font-size:.8em; }

    #loading {}
    #loading img { width:24px; height:24px; }

    .form-content {} 
    .form-content.has-label { padding-left: 18%; }
    .form-content.has-label label { width:18%; height:40px; line-height:40px; font-size:14px;}
    .form-content.has-label input { text-align: left; text-indent: 20px; }
    .oslink .form-content { width:auto; }
    .oslink .form-content.has-label label { width:18%; }
    .oslink .form-content.ioslink { position: relative; margin-top:2%; }
}