@charset "utf-8";
/* CSS Document */

/*Normalize css reset*/
@import url('normalize.css');
/*bootstrap styles*/
@import url('bootstrap.min.css');
@import url('owl.carousel.css');
@import url('owl.theme.default.css');
@import url('animate.css');
@import url('bulma.css');
@import url('app.css');
@import url('core.css');
@import url('simple-line-icons.css');


@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 300;
  src: local("NanumSquareRoundL"), /* computer */
    url("../fonts/NanumSquareRoundL.eot"), /* IE9 Compat Modes */
    url("../fonts/NanumSquareRoundL.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/NanumSquareRoundL.woff2") format("woff2"), /* Modern Browsers */
    url("../fonts/NanumSquareRoundL.woff") format("woff"), /* Modern Browsers */
    url("../fonts/NanumSquareRoundL.ttf") format("truetype"); /* Safari, Android, iOS */
}
@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 400;
  src: local("NanumSquareRoundR"), /* computer */
    url("../fonts/NanumSquareRoundR.eot"), /* IE9 Compat Modes */
    url("../fonts/NanumSquareRoundR.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/NanumSquareRoundR.woff2") format("woff2"), /* Modern Browsers */    
    url("../fonts/NanumSquareRoundR.woff") format("woff"), /* Modern Browsers */
    url("../fonts/NanumSquareRoundR.ttf") format("truetype"); /* Safari, Android, iOS */
}
@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 700;
  src: local("NanumSquareRoundB"), /* computer */
    url("../fonts/NanumSquareRoundB.eot"), /* IE9 Compat Modes */
    url("../fonts/NanumSquareRoundB.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/NanumSquareRoundB.woff2") format("woff2"), /* Modern Browsers */
    url("../fonts/NanumSquareRoundB.woff") format("woff"), /* Modern Browsers */
    url("../fonts/NanumSquareRoundB.ttf") format("truetype"); /* Safari, Android, iOS */
}
@font-face {
  font-family: "NanumSquareRound";
  font-style: normal;
  font-weight: 800;
  src: local("NanumSquareRoundEB"), /* computer */
    url("../fonts/NanumSquareRoundEB.eot"), /* IE9 Compat Modes */
    url("../fonts/NanumSquareRoundEB.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/NanumSquareRoundEB.woff2") format("woff2"), /* Modern Browsers */
    url("../fonts/NanumSquareRoundEB.woff") format("woff"), /* Modern Browsers */
    url("../fonts/NanumSquareRoundEB.ttf") format("truetype"); /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Recipekorea';
    src: url('../fonts/Recipekorea.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*@font-face {
    font-family: 'NEXEN_TIRE_Bold';
    src: url('../fonts/NEXEN-TIRE_Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}*/

@font-face {
    font-family: 'NexenTire';
    font-weight: 700;
    font-style: normal;
    src: url('../fonts/NexenTireBold.eot');
    src: url('../fonts/NexenTireBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/NexenTireBold.woff2') format('woff2'),
        url('../fonts/NexenTireBold.woff') format('woff'),
        url('../fonts/NexenTireBold.ttf') format("truetype");
    font-display: swap;
}


*, *:before, *:after {
    margin:0px;
    padding:0px;
    /*font-family: 'Nanum Gothic', Arial, "돋움", Dotum, sans-serif;*/
    font-family: 'NanumSquareRound', Arial, "돋움", Dotum, sans-serif;
    letter-spacing: -0.05em;
    color: #333;
    word-break: keep-all;
}

html, body {
    min-width: 992px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;  
    line-height: 1.42857143;
    font-size: 16px;
    overflow-x: hidden;
}

/*modal 실행시 스크롤바 고정*/
/*body{
	padding-right:0 !important;
}*/

p, ul, ol, li, dl, dt, dd, form {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	border:0px;
	margin:0px;
	padding:0px;
}

ul, ol{
	list-style-type:none;
	/*width:100%;*/
	margin:0;
	padding:0;	
}

label, th img, td img {
	vertical-align:middle;
}

img {
	border:0;
	margin:0;
	padding:0;
	vertical-align:middle;
}

/* ie antialiasing */
img {-ms-interpolation-mode: bicubic;}


/*form */
textarea {
	padding:10px 5px;
	border:1px solid #d0d0d0;
	background:#fff;
	width:100%;
	color:#333;
    font-family: 'NanumSquareRound', Arial, "돋움", Dotum, sans-serif;
	resize:none;
}

input[type=checkbox] {
	border:none;
	height:13px;
}
input[type=radio] {
	border:none;
	height:13px;
	margin-top:-1px;
}

select {
	vertical-align: middle;
	margin:0;
	padding-left:5px;
	font-family: 'NanumSquareRound', Arial, "돋움", Dotum, sans-serif;
	color:#333;
	font-size:14px;
}

span.button, img.button, a.button {
	cursor: pointer;
	vertical-align: middle;
}

input[type=text], textarea, input[type=email] {
	vertical-align: middle;
	font-family: 'NanumSquareRound', Arial, "돋움", Dotum, sans-serif;
    font-size: 14px;
    line-height: 100%;
    color: #333;
    /*background-color: #fcfcfc;*/
    transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
	/*padding:3px 5px 6px 5px;*/
	/**padding:4px 5px 0 5px;*/
}
/*input[type=text]:focus, textarea:focus, input[type=email]:focus {
	background-color: #f3f3f3;
}*/
input[type=text]::-ms-clear {
	display: none;
}

/*링크테두리 삭제*/
a,img,input,.btn{
	outline:0 !important;
    box-shadow: none !important;
}
a {
	text-decoration: none;
	-moz-transition: 0.2s color linear;
	-webkit-transition: 0.2s color linear;
	transition: 0.2s color linear;
}
a:hover,
a:focus {
	color: #333;
}
a, a:link, a:active, a:visited, a:hover
{
	text-decoration: none;
}

a, a:hover, a:focus, a:active {
	text-decoration: none;
	outline: none !important;
    box-shadow: none !important;
}
ul, ol {
	padding: 0;
	margin: 0;
}
ul li, ol li {
	list-style-type: none;
}

h1, h2, h3 {
    margin: 0;
	text-transform: uppercase;
    font-weight: 800;
}

h1 {
	font-size: 50px;
}
h2 {
	font-size: 32px;
}
h3 {
	font-size: 22px;
}

iframe
{
	overflow: hidden;
}


/*여러줄 말줄임*/
.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4; /* 라인수 */
	-webkit-box-orient: vertical;
	word-wrap:break-word;
}

.ellipsis.multiline {
	white-space: normal;
}


.btn{
    -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
         -o-transition: all 0.5s;
            transition: all 0.5s;
}

.btn:hover{
    -webkit-box-shadow: 0 14px 26px -12px rgb(0 0 0 / 42%), 0 4px 23px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%) !important;
       -moz-box-shadow: 0 14px 26px -12px rgb(0 0 0 / 42%), 0 4px 23px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%) !important;
        -ms-box-shadow: 0 14px 26px -12px rgb(0 0 0 / 42%), 0 4px 23px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%) !important;
         -o-box-shadow: 0 14px 26px -12px rgb(0 0 0 / 42%), 0 4px 23px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%) !important;
            box-shadow: 0 14px 26px -12px rgb(0 0 0 / 42%), 0 4px 23px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%) !important;
    opacity: 0.8;
}



header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
    z-index: 999;
}

.container{
    min-width: 992px;
}

header.stick{
    background: #fff;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 16%);
}

.navbar{
    background: none;
}

.navbar-brand{
    width: 134px;
    padding: 0;
    font-size: 26px;
    font-weight: 800;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    color: rgba(0,0,0,.55);
    border-color: rgba(0,0,0,.1);
    border-radius: 0.25rem;
    transition: box-shadow .15s ease-in-out;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background: url("../images/navbar_ham.svg") no-repeat;
    background-position: center;
    background-size: 100%;
}

.navbar-nav li a{
    font-weight: 800;
}

.navbar-nav li + li{
    margin-left: 40px;
}

.navbar-nav .nav-link{
    color: #333;
}

.navbar-nav .nav-link.free span{
    display: inline-block;
    position: relative;
    top: -3px;
    margin-left: 8px;
    padding: 1px 10px;
    border-radius: 50px;
    background: #e41f1f;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    text-align: center;
}

.navbar-text{
    margin-left: 50px;
}

.navbar-text .btn{
    padding: 5px 20px;
    border: 1px solid #666;
    border-radius: 50px;
}

header.stick .navbar-text .btn{
    border-color: transparent;
    background: #0092ff;
    color: #fff;
}

.contents.sub{
    min-height: 700px;
    padding: 130px 0 0;
}

.contents.sub:before{
    content: "";
    width: 100%;
    height: 100px;
    background: #b6ddf1;
    position: fixed;
    top: 68px;
    left: 0;
}

.contents.sub .container{
    padding: 30px 20px;
    border-radius: 10px 10px 0 0;
    background: #fff;
}


/*------------------------------------ Main visual ------------------------------------*/
.main-visual{
    position: relative;
    padding: 130px 0 0;
    background: #b6ddf1;
}

.main-visual .main-visual-txt{
    position: absolute;
    top: 130px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
       -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
         -o-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    margin: 0;
    font-size: 56px;
    font-weight: 800;
    text-align: center;
}

.main-visual .main-visual-img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    text-align: center;
    background: url("../images/bg_main.svg") no-repeat 50% 50% fixed;
}

.main-visual .main-visual-img .mainSlide,
.main-visual .main-visual-img .mainSlide .owl-stage-outer,
.main-visual .main-visual-img .mainSlide .owl-stage-outer .owl-stage,
.main-visual .main-visual-img .mainSlide .owl-stage-outer .owl-stage .owl-item,
.main-visual .main-visual-img .mainSlide .item{
    height: 100%;
}

.main-visual .main-visual-img .slideButton-group{
    position: absolute;
    bottom: 0;
    left: calc(50% + 190px);
    -webkit-transform: translate(-50%, 0);
       -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
         -o-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    z-index: 99;
}

.main-visual .main-visual-img .slideButton-group .btn:hover{
    box-shadow: none !important;
}

.main-visual .main-visual-img .slideButton-group .btn:before,
.main-visual .main-visual-img .slideButton-group .btn:before{
    content: "";
    width: 22px;
    height: 22px;
    display: inline-block;
    border-radius: 100%;
}

.main-visual .main-visual-img .slideButton-group .btn.play:before{
    background: url("../images/play.svg") no-repeat 50% 50%;
    background-size: 9px;
}

.main-visual .main-visual-img .slideButton-group .btn.stop:before{
    background: url("../images/stop.svg") no-repeat 50% 50%;
    background-size: 9px;
}

.main-visual .main-visual-img .slideButton-group .btn.play,
.main-visual .main-visual-img .slideButton-group.pause .btn.stop{
    display: none;
}

.main-visual .main-visual-img .slideButton-group.pause .btn.play{
    display: inline-block;
}

.main-visual .main-visual-img .mainSlide .item{
    height: 100%;
}

.main-visual .main-visual-img .mainSlide .item .slide-img{
    width: 750px;
    /*width: 42%;*/
    position: absolute;
    top: 15%;
    left: calc(50% + 18%);
    transform: translate(-50%, 0);
    display: inline-block;
}

.main-visual .main-visual-img .mainSlide .item .slide-img img.slide-top{
    animation-delay: 0.3s;
}

.main-visual .main-visual-img .mainSlide .item.item-all .slide-img{
    width: 50%;
    top: 37%;
}

/*.main-visual .main-visual-img .mainSlide .item.item-all .slide-img{
    width: 52%;
    top: 37%;
    left: 50%;
    transform: translate(-50%, 0);
}*/

/*.main-visual .main-visual-img .mainSlide .item.item-all .text-wrap{
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
}*/

.main-visual .main-visual-img .mainSlide .item.item-all .text-wrap .txt1 span{
    display: block;
    font-family: 'NexenTire';
    line-height: 1.2;
}

.main-visual .main-visual-img .mainSlide .item .text-wrap{
    position: absolute;
    top: 25%;
    left: calc(50% - 540px);
    text-align: left;
    z-index: 99;
}

.main-visual .main-visual-img .mainSlide .item .text-wrap .txt1{
    font-family: 'NexenTire';
    font-size: 50px;
}

.main-visual .main-visual-img .mainSlide .item .text-wrap .txt1 span{
    font-family: 'NexenTire';
    font-size: 40px;
}

.main-visual .main-visual-img .mainSlide .item .text-wrap .txt2{
    width: 490px;
    margin-top: 30px;
    font-size: 25px;
    animation-delay: 0.1s;
}

.main-visual .main-visual-img .mainSlide .owl-dots{
    position: absolute;
    bottom: 15px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
       -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
         -o-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
}

.main-visual .main-visual-img .mainSlide .owl-nav button{
    position: absolute;
    top: 0;
    height: 100%;
    margin: 0;
    transition: all 0.2s ease-in-out;
    opacity: 0;
}

.main-visual .main-visual-img .mainSlide .owl-nav button:hover{
    background: none;
    opacity: 1;
}

.main-visual .main-visual-img .mainSlide .owl-nav button span{
    display: block;
    padding: 0 30px;
    font-size: 0;
}

.main-visual .main-visual-img .mainSlide .owl-nav .owl-prev span:before,
.main-visual .main-visual-img .mainSlide .owl-nav .owl-next span:before{
    content: "";
    width: 60px;
    height: 102px;
    display: inline-block;
}

.main-visual .main-visual-img .mainSlide .owl-nav .owl-prev span:before{
    background: url("../images/left-arrow.svg") no-repeat 0 0;
    background-size: 100%;
}

.main-visual .main-visual-img .mainSlide .owl-nav .owl-next span:before{
    background: url("../images/right-arrow.svg") no-repeat 0 0;
    background-size: 100%;
}


.main-visual .main-visual-img .mainSlide .owl-nav .owl-prev{
    left: 0;
}

.main-visual .main-visual-img .mainSlide .owl-nav .owl-next{
    right: 0;
}

.owl-theme .owl-dots .owl-dot span{
    width: 40px;
    height: 3px;
    margin: 0 3px;
    border-radius: 0;
    background: rgba(0,0,0,0.2);
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span{
    background: rgba(0,0,0,0.8);
}




.main-explanation,
.main-appraisal{
    padding: 80px 0;
    background: #f2f2f2;
}

.container .intro{
    margin-bottom: 50px;
    text-align: center;
}

.container .intro h2{
    margin-bottom: 20px;
}

.container .intro p{
    width: 70%;
    margin: 0 auto;
    font-size: 18px;
}

.container .intro .btn.more{
    margin-top: 20px;
    padding: 10px 60px;
    border-radius: 50px;
    background: #0092ff;
    color: #fff;
}

.img-cont{
    text-align: center;
}

.img-cont img{
    width: 100%;
    height: auto;
}


.function-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px 0;
}

.function-item:nth-child(even){
    flex-direction: row-reverse;
}

.function-item + .function-item{
    border-top: 1px solid #ddd;
}

.function-item .intro{
    width: 50%;
    text-align: left;
}

.function-item .intro p{
    width: 100%;
}

.function-item .img-cont{
    margin: 0;
}


footer{
    margin-top: 80px;
    padding: 30px 0;
    background: #333;
}

footer address{
    margin: 20px 0 0;
}

footer a,
footer p,
footer span{
    color: #fff !important;
}

footer address p{
    margin: 0;
    padding: 3px 0 !important;
    font-size: 14px;
}

footer address p span{
    position: relative;
}

footer address p span + span{
    margin-left: 18px;
}

footer address p span + span:before{
    content: "";
    width: 1px;
    height: 10px;
    position: absolute;
    top: 2px;
    left: -9px;
    background: #999;
}


#backtotop{
    position:fixed;
    right:0;
    opacity:0;
    visibility:hidden;
    bottom:25px;
    margin:0 25px 0 0;
    z-index:9999;
    -webkit-transform:scale(0.7);
    transform:scale(0.7);
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
}

#backtotop.visible{
    opacity:1;
    visibility:visible;
    -webkit-transform:scale(1);
    transform:scale(1)
}

#backtotop.visible a:hover{
    outline:none;
    opacity:0.9;
    background:#0092ff;
}

#backtotop a{
    outline:none;
    text-decoration:none;
    border:0 none;
    display:block;
    width:46px;
    height:46px;
    background-color:#66676b;
    opacity:1;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
    border-radius:50%;
    text-align:center;
    font-size:26px;
}

#backtotop a:after{
    color:#fff;
}

body #backtotop a{
    outline:none;
    color:#fff;
}





/*------------------------------------ Loader ------------------------------------*/
.pageloader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #b6ddf1 !important;
    z-index: 999998;
    -webkit-transition: transform 0.35s ease-out;
            transition: transform 0.35s ease-out;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    will-change: transform;
}

.pageloader::before{
    width: 460px;
    height: 140px;
    margin-top: -70px;
    margin-left: -230px;
    background: none;
    animation: none;
    border-radius: 0;
}

.pageloader::after{
    display: none;
}

.pageloader #animation_container #canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: transparent;
}

.pageloader.is-active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
.pageloader::after,
.pageloader::before {
    display: none;
}
.pageloader::after {
    margin-top: -100px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 3px solid rgba(255, 255, 255, 0.75);
    -webkit-animation: page-loader-inner 1.5s infinite ease-out;
            animation: page-loader-inner 1.5s infinite ease-out;
}
.pageloader::before {
    margin-top: -30px;
    margin-left: -30px;
    width: 60px;
    height: 60px;
    background-color: #fff;
    -webkit-animation: page-loader-outer 1.5s infinite ease-in;
            animation: page-loader-outer 1.5s infinite ease-in;
}
@-webkit-keyframes page-loader-inner {
    0%, 40% {
    -webkit-transform: scale(0);
            transform: scale(0);
    }
    100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
    }
}
@keyframes page-loader-inner {
    0%, 40% {
    -webkit-transform: scale(0);
            transform: scale(0);
    }
    100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
    }
}
@-webkit-keyframes page-loader-outer {
    0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    }
    100%, 40% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
    }
}
@keyframes page-loader-outer {
    0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    }
    100%, 40% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
    }
}



/*------------------------------------ Upload ------------------------------------*/
.upload-wrap{
    width: 420px;
    min-height: 132px;
    display: inline-block;
    position: absolute;
    top: 60%;
    left: calc(50% - 330px);
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    z-index: 99;
}

.upload-wrap .control .toggler{
    width: 54px;
    height: 30px;
}

.upload-wrap .control .slide-toggle{
    float: left;
}

.upload-wrap .control .slide-toggle .toggler .active,
.upload-wrap .control .slide-toggle .toggler .inactive{
    width: 24px;
    height: 24px;
    top: 1px;
    left: 1px;
}

.upload-wrap .btn.help{
    position: absolute;
    top: -25px;
    right: -25px;
    z-index: 9999;
}

.upload-wrap .btn.help:hover,
.upload-wrap .btn.help:focus{
    box-shadow: none !important;
}

.upload-wrap .btn.regist{
    width: 100%;
    margin-top: 5px;
    padding: 10px;
    background: #0092ff;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.upload-wrap .left-group{
    float: left;
    width: 100%;
    text-align: left;
}

.upload-wrap .control{
    width: 100%;
    display: inline-block;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid rgba(159,165,189,0.4);
}

.upload-wrap .control:first-child{
    margin-top: 0;
    padding-top: 0;
    border: none;
}

.upload-wrap .button.button-cta{
    height: auto;
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -46px;
    display: inline-block;
    padding: 18px 30px !important;
    border-color: #00aa9d;
    background-color: #00aa9d;
}

.upload-wrap .button.button-cta span{
    display: block;
    font-size: 18px;
    font-weight: 700;
}


.upload-wrap .fileuploader,
.fileuploader{
    margin: 0;
    padding: 0;
}

.fileuploader-item .column-thumbnail{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.upload-wrap .fileuploader .fileuploader-input,
.fileuploader .fileuploader-input{
    padding: 0;
    border-radius: 10px;
}

.upload-wrap .fileuploader.fileuploader-theme-dragdrop .fileuploader-input img,
.upload-wrap .fileuploader.fileuploader-theme-dragdrop .fileuploader-input h3,
.upload-wrap .fileuploader.fileuploader-theme-dragdrop .fileuploader-input p,
.upload-wrap .fileuploader.fileuploader-theme-dragdrop .fileuploader-input-button,
.fileuploader.fileuploader-theme-dragdrop .fileuploader-input img,
.fileuploader.fileuploader-theme-dragdrop .fileuploader-input h3,
.fileuploader.fileuploader-theme-dragdrop .fileuploader-input p,
.fileuploader.fileuploader-theme-dragdrop .fileuploader-input-button{
    display: none !important;
}

.upload-wrap .fileuploader.fileuploader-theme-dragdrop .fileuploader-input .fileuploader-input-inner,
.fileuploader.fileuploader-theme-dragdrop .fileuploader-input .fileuploader-input-inner{
    padding: 15px 0;
}

.upload-wrap .fileuploader.fileuploader-theme-dragdrop .fileuploader-input .fileuploader-input-inner:before,
.fileuploader.fileuploader-theme-dragdrop .fileuploader-input .fileuploader-input-inner:before{
    content: "";
    width: 12px;
    height: 12px;
    display: block;
    margin: 0 auto;
    background: url("../images/upload_plus.svg") no-repeat 50% 50%;
    background-size: 12px 12px;
}

.upload-wrap .fileuploader.fileuploader-theme-dragdrop .fileuploader-input .fileuploader-input-inner:after,
.fileuploader.fileuploader-theme-dragdrop .fileuploader-input .fileuploader-input-inner:after{
    content: "파일을 추가해 주세요. (100MB이하)";
    width: 100%;
    display: inline-block;
    margin-top: 5px;
    font-size:  0.8571rem;
    color: #6e798c;
}

.fileuploader.fileuploader-theme-dragdrop .fileuploader-items .columns{
    display: block;
    margin: 0 auto !important;
    max-width: 960px;
}

.fileuploader-item.upload-failed {
    background: #c3d4e1;
}

.upload-wrap .fileuploader.fileuploader-theme-dragdrop .fileuploader-items .fileuploader-item,
.fileuploader.fileuploader-theme-dragdrop .fileuploader-items .fileuploader-item{
    padding: 10px 15px;
}

.upload-wrap .fileuploader.fileuploader-theme-dragdrop .fileuploader-items .fileuploader-items-list,
.fileuploader.fileuploader-theme-dragdrop .fileuploader-items .fileuploader-items-list{
    max-height: 267px;
    margin: 0;
    border-radius: 10px;
    overflow-y: auto;
}

.upload-wrap .fileuploader.fileuploader-theme-dragdrop .fileuploader-items .fileuploader-items-list .fileuploader-item,
.fileuploader.fileuploader-theme-dragdrop .fileuploader-items .fileuploader-items-list .fileuploader-item{
    margin-bottom: 0;
}

.upload-wrap .fileuploader.fileuploader-theme-dragdrop .fileuploader-items .fileuploader-items-list .columns,
.fileuploader.fileuploader-theme-dragdrop .fileuploader-items .fileuploader-items-list .columns{
    margin: 0 -.75rem 0 0;
}

.upload-wrap .fileuploader .fileuploader-item .column-actions,
.fileuploader .fileuploader-item .column-actions{
    right: 0;
}

.upload-wrap .fileuploader .fileuploader-item .column-title,
.fileuploader .fileuploader-item .column-title{
    padding-right: 60px;
}



/*Guide*/
.upload-wrap .guide-group{
    width: calc(100% - 10px);
    height: 0;
    position: absolute;
    top: -180px;
    left: 10px;
    z-index: 99;
}

.upload-wrap.uploadOpen .guide-group.guideOpen{
    display: block;
}


.upload-wrap.uploadOpen .guide-group.guideOpen{
    height: auto;
    /*animation: scale-up-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;*/
    animation: scale-up-bottom 0.3s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
}

.upload-wrap .left-group.guideOpen .btn.help{
    opacity: 0;
}

@keyframes scale-up-bottom {
  0% {
    transform: translateZ(-100px) translateY(200px) translateX(200px) scale(0);
    opacity: 0;
  }
  100% {
    transform: translateZ(0) translateY(0) translateX(0) scale(1);
    opacity: 1;
  }
}

.upload-wrap .guide-group.guideOpen .txt-box{
	/*animation: wobble-ver-right 0.5s 0.1s both;*/
    animation: wobble-ver-right 0.5s ease-in-out 0.2s both;
}

@keyframes wobble-ver-right {
  0%,
  100% {
    transform: translateY(0) rotate(0);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateY(-30px) rotate(6deg);
  }
  30% {
    transform: translateY(15px) rotate(-5.5deg);
  }
  45% {
    transform: translateY(-10px) rotate(3deg);
  }
  60% {
    transform: translateY(5px) rotate(-1.8deg);
  }
  75% {
    transform: translateY(-3px) rotate(0.6deg);
  }
}

.upload-wrap .guide-group .txt-box{
    animation: scale-out-br 0.5s cubic-bezier(0.895, 0.030, 0.685, 0.220) both;
}

@keyframes scale-out-br {
  0% {
    transform: scale(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    transform: scale(0);
    transform-origin: 80% 200%;
    opacity: 0;
  }
}

.upload-wrap .guide-group .txt-box{
    width: calc(100% - 10px);
    position:relative;    
    padding: 20px;
    color: #fff;
    background: #172644;
    border-radius: 15px;
    box-shadow: 4px 4px 8px rgb(0,0,0,0.3);
    transform: scale(0.0);
}

.upload-wrap .guide-group .txt-box li{
    padding: 5px 0;
}

.upload-wrap .guide-group .txt-box span{
    font-size: 16px;
    font-weight: 300;
    color: #fff;
    text-align: left;
    letter-spacing: 0;
}

.upload-wrap .guide-group .txt-box span.dt{
    font-weight: 700;
}

.upload-wrap .guide-group .txt-box span.att{
    margin-left: 10px;
    font-weight: 700;
    color: #ff8361;
}

.upload-wrap .guide-group .txt-box:after{
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    left: 50%;
    bottom: -15px;
    margin-left: -12px;
    border-top: 15px solid #172644;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    filter: drop-shadow(4px 8px 4px rgb(0,0,0,0.2));
}

.upload-wrap .guide-group .txt-box .button{
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    background: none;
    border: none;
    align-items: flex-start;
}

.upload-wrap .guide-group .txt-box .button:hover{
    opacity: 0.7;
}

.upload-wrap .guide-group .txt-box .button > img{
    width: 24px;
    height: auto;
}

.upload-wrap .guide-group:before{
    content: "";
    width: 380px;
    height: 67px;
    position: absolute;
    top: 200px;
    left: 10px;
    background: rgba(195,212,225,0.35);
    border-radius: 5px;
    border: 2px dashed #0984E3;
    transform: scale(0.0);
}

.upload-wrap .guide-group > .button{
    height: auto;
    position: absolute;
    top: 210px;
    left: 50%;
    margin-left: -20px;
    padding: 0;
    filter: drop-shadow(4px 4px 8px rgb(0,0,0,0.3));
    transform: scale(0.0);
    background: none;
    border: none;
}

.upload-wrap .guide-group > .button img{
    width: 69px;
    height: auto;
}

.upload-wrap .guide-group.guideOpen:before{
    animation: slide-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
}

.upload-wrap .guide-group.guideOpen > .button{
    animation: slide-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
}

@keyframes slide-top {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.upload-wrap .guide-group:before,
.upload-wrap .guide-group > .button{
    animation: slide-bottom 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
}

@keyframes slide-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  90% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}



/*------------------------------------ Login & signUp ------------------------------------*/
.login-wrapper{
    width: 60%;
    margin: 0 auto;
    padding: 0 20px 20px;
}

.login-wrapper .title:not(.is-spaced)+.subtitle{
    font-size: 1.25rem;
}

.login-wrapper .auth-content{
    width: 100%;
    margin: 0 auto;
    margin-bottom: 40px;
    text-align: center;
}

.login-wrapper .auth-content a{
    display: block;
    margin-top:15px;
    color: #0092ff;
}

.login-wrapper .control.has-icons-right .input{
    font-size: 1.143rem;
    font-weight: 300;
}

.login-wrapper #signin-form .control.login > .button,
.login-wrapper #signin-form .control.kakao-login > .button,
.login-wrapper #recover-form .control.login > .button{
    height: 48px;
    padding: 8px 15px;
    border-radius: 12px !important;
    font-weight: 400;
    background: #0092ff;
    border-color: #0092ff;
}

.login-wrapper #signin-form .control.kakao-login > .button{
    background: #ffe500;
    border-color: #ffe500;
    border-radius: 12px !important;
    font-weight: 400;
    color: #000;
}

.login-wrapper #signin-form .control.kakao-login > .button img{
    width: 24px;
    height: auto;
    position: relative;
    top: 0;
    margin-right: 5px;
}

.login-wrapper .hero .button.btn-outlined.light-btn{
    border-color: #fff;
    color: #fff;
    font-family: 'S-CoreDream', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.login-wrapper .button.btn-outlined.light-btn:hover{
    background: #fff;
    color: #444f60;
}

.login-wrapper #signin-form .slide-toggle{
    float: left;
}

.login-wrapper #signin-form .slide-toggle .toggler{
    width: 54px;
    height: 30px;
    border-color: #aaa;
}

.login-wrapper #signin-form .slide-toggle .toggler .active,
.login-wrapper #signin-form .slide-toggle .toggler .inactive {
    width: 24px;
    height: 24px;
    top: 1px;
    left: 1px;
}

.login-wrapper #signin-form .slide-toggle .toggler .active{
    background: #0092ff;
    border-color: #0092ff;
}

.login-wrapper #signin-form .control > span.txt {
    position: relative;
    top: 4px;
    font-size: 1.071rem;
    font-weight: 400;
    color: #444f60;
}




/*------------------------------------ takePart Login ------------------------------------*/
.takePart-wrapper{
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #90a5ca;
}

.takePart-wrapper .form-wrapper{
    position: relative;
    margin: 0 auto;
    display: grid;
    grid-template-areas: 'login pw';
}

.takePart-wrapper .form-wrapper > input{
    position: absolute;
    width: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}

.takePart-wrapper .takePart-login:before,
.takePart-wrapper .takePart-pw:before{
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    border-radius: 10px 0 10px 10px;
    cursor: pointer;
}

#tpLogin:checked ~ .selector .takePart-login,
#tpPassword:checked ~ .selector .takePart-pw{
    filter: none;
    top: 20px;
}

#tpLogin:checked ~ .selector .takePart-login:before,
#tpPassword:checked ~ .selector .takePart-pw:before{
    content: none;
    border-radius: 10px;
}

.takePart-wrapper .takePart-login form,
.takePart-wrapper .takePart-pw form{
    margin-top: 40px;
}

.takePart-wrapper .takePart-login .control.has-icons-right .input{
    font-weight: 300;
}

.takePart-wrapper .takePart-login form .control.login > .button{
    border-radius: 12px !important;
}

.takePart-wrapper .takePart-login form .control.kakao-login > .button{
    height: 48px;
    padding: 8px 15px 18px 15px;
    background: #ffe500;
    border-color: #ffe500;
    border-radius: 12px;
    font-family: 'S-CoreDream', sans-serif;
    font-size: 1.143rem;
    font-weight: 400;
    color: #000;
}

.takePart-wrapper .takePart-login form .control.kakao-login > .button img{
    width: 24px;
    height: auto;
    position: relative;
    top: 5px;
    margin-right: 5px;
}

.takePart-wrapper .form-title h3{
    text-align: center;
}

.takePart-wrapper .form-title h3 img{
    width: 190px;
    height: auto;
}

.takePart-wrapper .form-title h3 span{
    display: block;
    margin-top: 10px;
    font-size: 1.143rem;
    font-weight: 600;
    color: #5a74c2;
}

.takePart-wrapper .s-title{
    position: relative;
    margin-top: 50px;
    font-size: 1rem;
    color: #999;
    text-align: center;
}

.takePart-wrapper .s-title span:first-child{
    display: inline-block;
    margin: 0;
    padding: 0 15px;
    font-family: 'S-CoreDream', sans-serif !important;
    font-size: 1.286rem;
    font-weight: 600;
    color: #444f60;
    background: #fff;
}

.takePart-wrapper .s-title span{
    position: relative;
    display: block;
    margin-top: 6px;
    font-weight: 300;
}

.takePart-wrapper .s-title:before{
    content: "";
    width: 100%;
    height: 1px;
    background: #e8e8e8;
    position: absolute;
    top: 12px;
    left: 0;
}

.takePart-wrapper .form-wrapper .selector{
    display: grid;
    grid-template-areas: 'login pw';
}

.takePart-wrapper .form-wrapper .selector > label{
    font-weight: 700;
    opacity: 0.7;
}

.takePart-wrapper .form-wrapper .selector label.takePart-login,
.takePart-wrapper .form-wrapper .selector label.takePart-pw{
    position: relative; /* for iOS */
    width: 400px;
    padding: 35px;
    border-radius: 10px;
    background: #fff;
    -webkit-box-shadow: 4px 4px 8px rgb(0 0 0 / 30%);
            box-shadow: 4px 4px 8px rgb(0 0 0 / 30%);
    animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#tpLogin:checked ~ .selector .takePart-login,
#tpPassword:checked ~ .selector .takePart-pw{
    left: -12px;
    border-radius: 10px;
}
.takePart-wrapper .form-wrapper .selector label.takePart-login{
    grid-area: login;
    margin-right: -400px;
    --swing: -200px;
    /*--overlap: 25px;*/
    border-radius: 10px 0 10px 10px;
}

.takePart-wrapper .form-wrapper .selector label.takePart-pw{
    grid-area: pw;
    margin-left: 0;
    --swing: 200px;
    /*--overlap: -25px;*/
    border-radius: 10px 0 10px 10px;
}

#tpLogin:checked ~ .selector .takePart-login .tab,
#tpPassword:checked ~ .selector .takePart-pw .tab{
    display: none;
}

.takePart-wrapper .form-wrapper .selector .tab{
    width: 145px;
    height: 26px;
    position: absolute;
    top: -26px;
    right: 0;
    border-radius: 10px 10px 0 0;
    background: #fff;
    font-family: 'S-CoreDream', sans-serif;
    font-size: 0.929rem;
    font-weight: 400;
    color: #5a74c2;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.takePart-wrapper .form-wrapper .selector label.takePart-pw .title{
    float: left;
    margin: 0 10px 0 0;
}

.takePart-wrapper .form-wrapper .selector label.takePart-pw .title > i{
    position: relative;
    top: 4px;
    font-size: 1.125rem;
    font-weight: bold;
    color: #444f60;
}

.takePart-wrapper .form-wrapper .selector label.takePart-pw .pw-input{
    float: left;
    width: calc(100% - 30px);
    display: inline-block;
}

.takePart-wrapper .form-wrapper .selector label.takePart-pw .pw-input #enterPwd{
    float: left;
    width: calc(100% - 90px);
    font-size: 1.143rem;
    color: #333;
    border: 1px solid #c2cdda;
}

.takePart-wrapper .form-wrapper .selector label.takePart-pw .pw-input .b-checkbox{
    float: left;
    position: relative;
    top: 10px;
    margin-left: 10px;
}

.takePart-wrapper .form-wrapper .selector label.takePart-pw .pw-input .b-checkbox input{
    float: left;
    margin-right: 5px;
}

.takePart-wrapper .b-checkbox label{
    font-family: 'S-CoreDream', sans-serif;
    font-size: 0.929rem;
    font-weight: 400;
    color: #444f60;
}

.takePart-wrapper .takePart-pw form .control{
    width: calc(100% - 70px);
    position: absolute;
    bottom: 35px;
}

.takePart-wrapper .takePart-pw form .control > .button {
    font-family: 'S-CoreDream', sans-serif;
    font-size: 1.143rem;
    font-weight: 400;
    border-radius: 12px;
}

#tpLogin:checked ~ .selector .takePart-login,
#tpPassword:checked ~ .selector .takePart-pw{
    animation-name: swing-forwards;
    opacity: 1;
}

@keyframes swing-forwards {
  0% {
    z-index: 1;
    transform: scale(1);
  }
  50% {
    transform: translateX(var(--swing));
  }
  100% {
    z-index: 2;
    transform: translateX(var(--overlap)) scale(1);
  }
}

#tpLogin:checked ~ .selector .takePart-pw,
#tpPassword:checked ~ .selector .takePart-login{
    animation-name: swing-backwards;
    left: 12px;
}

@keyframes swing-backwards {
  0% {
    z-index: 2;
    transform: translateX(var(--overlap)) scale(1);
  }
  50% {
    transform: translateX(var(--swing));
  }
  100% {
    z-index: 1;
    transform: scale(1);
  }
}


/*------------------------------------ Tos & Policy ------------------------------------*/
#tos-modal dl,
#policy-modal dl{
    margin-bottom: 20px;
}

#tos-modal dl dt,
#policy-modal dl dt{
    font-size: 20px;
    font-weight: 700;
}

#tos-modal dl ol,
#tos-modal dl ul,
#policy-modal dl ol,
#policy-modal dl ul{
    padding-left: 24px;
}

#tos-modal dl > dd > ol > li,
#tos-modal dl > dd > ul > li,
#policy-modal dl > dd > ol > li,
#policy-modal dl > dd > ul > li,
#policy-modal dl dd .txt{
    margin-bottom: 10px;
}
    
#tos-modal dl ol li .first-letter,
#tos-modal dl ul li .first-letter,
#policy-modal dl ol li .first-letter,
#policy-modal dl ul li .first-letter{
    margin: 0 5px 0 -22px;
}



/*------------------------------------ Modal ------------------------------------*/
.modal.is-active .modal-background {
    background: rgba(0, 0, 0, 0.7);
}

.modal-card {
    max-height: calc(100vh - 100px);
}

.modal-card-title{
    font-family: 'S-CoreDream', sans-serif !important;
}

.modal.is-active .modal-card .modal-card-head p,
.button.is-link{
    font-weight: 600;
}

.modal-card{
    max-height: calc(100vh - 100px);
}

.modal .button.accent-btn{
    border-color: #5a74c2;
    background-color: #5a74c2;
}

.button.accent-btn.raised:hover{
    -webkit-box-shadow: 0 14px 26px -12px rgb(140 140 249 / 42%), 0 4px 23px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(140 140 249 / 20%) !important;
            box-shadow: 0 14px 26px -12px rgb(140 140 249 / 42%), 0 4px 23px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(140 140 249 / 20%) !important;
}
    
.modal.is-active .modal-card .modal-card-head .delete:before,
.modal.is-active .modal-card .modal-card-head .delete:after{
    background: #999ca6;
}

.modal.is-active .modal-card .modal-card-foot{
    justify-content: center;
}

.modal-card-foot .button{
    padding: 3px 15px;
}

#card-modal .modal-card-body #searchText{
    width: calc(100% - 95px);
    height: 35px;
    font-size: 16px;
}

.modal .button.is-link{
    background: #ddd !important;
}

.modal .button.is-link:hover{
    background: #eee !important;
    color: #444f60;
}

.modal footer{
    margin: 0;
}



















.phrase {
    margin-bottom: 45px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% + 4000px);
    margin-left: -2000px;
    margin-top: 105px;
    color: #000;
        font-size: 134px;
    white-space: nowrap;
}


.phrase > p:nth-of-type(2n-1) {
    animation: rightMove 20s linear 0s infinite alternate;
}

.phrase > p:nth-of-type(2n-2) {
    animation: leftMove 20s linear 0s infinite alternate;
}

@keyframes rightMove {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(2000px);
	}
}

@keyframes leftMove {
	0% {
		transform: translateX(2000px);
	}

	100% {
		transform: translateX(0);
	}
}

.owl-item.active .slide-top {
	-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@keyframes slide-top{
  0% {
    -webkit-transform: translate(70px, 50px);
            transform: translate(70px, 50px);
      opacity: 0;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
      opacity: 1;
  }
}




    
@media(max-width:1199px){
    .main-visual .main-visual-img .mainSlide .item .text-wrap,
    .upload-wrap{
        left: 50px;
        transform: none;
    }
    
    .main-visual .main-visual-img .mainSlide .item .slide-img{
        width: 600px;
        left: 450px;
        transform: none;
    }
}

@media(min-width: 992px){
    header .navbar-text .btn:hover{
        border-color: transparent;
        background: #0092ff;
        color: #fff;
    }
}





.temp{
    
}

.temp h2{
    margin-bottom: 50px;
    font-size: 48px;
    text-align: center;
}