/* CSS Document */
@import url(../css/plugins/animation.css);
@import url(../css/plugins/bootstrap.min.css);
@import url(../css/plugins/date-picker.css);
@import url(../css/plugins/dropzone.css);
@import url(../css/plugins/light-box.css);
@import url(../css/plugins/ion.rangeSlider.min.css);
@import url(../css/plugins/magnifypopup.css);
@import url(../css/plugins/select2.css);
@import url(../css/plugins/slick.css);
@import url(../css/plugins/slick-theme.css);
@import url(../css/plugins/themify.css);
@import url(../css/plugins/morris.css);
@import url(../css/plugins/line-icons.css);
@import url(../css/plugins/iconfont.css);
@import url(../css/plugins/font-awesome.css);
@import url(../css/plugins/flaticon.css);

/*------------------ Fonts -----------------*/
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,600,700');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* --------------- GLobal Settings -------------------- */
* {outline: none;}

.modal-open {overflow: hidden !important;}

input:focus {outline:none !important;}

html {position: relative; min-height: 100%; background: #fff;}

a, a:hover, a:focus, a:visited {text-decoration: none !important;}

.img-responsive {width: 100%; height: auto; display: inline-block;}
.img-rounded {border-radius: 4px;}

html body .mdi:before, html body .mdi-set {line-height: initial;}

section {padding:20px 0; position:relative;}
section.min {padding:30px 0; position:relative;}

.light-bg {background: #ecf7f3;}

p {line-height:1.8;}

.btn {border: 2px solid transparent; color: #fff; padding: 8px 0; cursor: pointer; transition: 0.3s all; border-radius:0.2rem;}
.btn:hover {color: #fff;}
.btn:focus {box-shadow: none;}

.form-control {height:54px; border-radius: 5px; font-size:14px; box-shadow: none; padding:.5rem .75rem; border:1px solid #e0ecf5; background-clip: initial;}

/*---------------- Preloader --------------------*/
.preloader {display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: center; background-color: #fff; background-image: url("../img/loader.svg"); background-position: center center; background-repeat: no-repeat; height: 100%; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; z-index: 99999;}
.preloader__image {-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}

i.req {color: #e41515;}

@-webkit-keyframes anim-francisco {
	50% {opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}
	51% {opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
	100% {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

@keyframes anim-francisco {
	50% {opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}
	51% {opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
	100% {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

/*  ============== Top header ===============  */
.top-header {background: #01161C; padding: 8px 0; color: #fff; height: 42px !important;}
.top-social {padding: 0; vertical-align: middle; margin-left: -60px;}
.top-social li {list-style: none; display: inline-block; margin-right: 15px;}
.top-social li:last-child {margin-right: 0;}
.top-social li a {width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; background: #025949; color: #fff; font-size: 12px; border-radius: 50%; vertical-align: top; margin-bottom: 2px; transition: 0.3s all; padding-top: 0;}
.top-social li a:hover {background: #ebebff; color: #002A30;}

@media (min-width: 576px) {
	.col-sm-4 {-ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%;}
	.col-sm-8 {-ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%;}
}

/*-------------- Search Button ---------------*/
.btn.search-btn {padding: 8px 15px; box-shadow: 1px 1px 2px #333; text-shadow: 0.5px 0.5px 1px #333; height: 40px; margin: 12px 6px;}
.btn.search-btn:hover, .btn.search-btn:focus {color: #fff !important;}

/*-------------- slick-next arrow ----------------*/
.slick-next, .slick-prev {width: 40px; height: 40px;}
.list-img-slide .slick-track {padding: 0;}
.slick-next {right: 20px;}
.slick-prev {left: 20px; z-index: 1;}
.slick-arrow:before {top: 0; width: 40px; height: 40px; display: inline-block; cursor: pointer; border-radius:50px; -webkit-box-shadow: 1px 1px 3px rgb(31 37 59 / 50%); transition: 0.2s; background: #fff;}
.slick-next:focus:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-prev:hover:before {opacity: 1; color: #e42d29;}

/*============== Bottom To top Scroll ==============*/

#back2Top.top-scroll1 {width: 60px; height: 60px; line-height: 3; overflow: hidden; z-index: 999; cursor: pointer; position: fixed; bottom: 15px; right: 10%; text-align: center; font-size: 18px; border: 4px solid #fff; border-radius: 30px; box-shadow: 0 0 7px #282d37; text-decoration: none !important; background: #006600; color: #fff; transition: 0.3s all; opacity:1 !important;}
#back2Top.top-scroll1:hover {background-color: #9751FF !important; color: #fff;}
#back2Top.top-scroll2 {width: 60px; height: 60px; line-height: 2.8; overflow: hidden; z-index: 999; cursor: pointer; position: fixed; bottom: 83px; right: 10%; text-align: center; font-size: 18px; border: 4px solid #fff; border-radius: 30px; box-shadow: 0 0 7px #282d37; text-decoration: none !important; background: #339999; color: #fff; transition: 0.3s all; opacity:1 !important;}
#back2Top.top-scroll2:hover {background-color: #9751FF !important; color: #fff;}
#back2Top.top-scroll3 {width: 60px; height: 60px; line-height: 2.8; overflow: hidden; z-index: 999; cursor: pointer; position: fixed; bottom: 151px; right: 10%; text-align: center; font-size: 18px; border: 4px solid #fff; border-radius: 30px; box-shadow: 0 0 7px #282d37; text-decoration: none !important; background: #ff0000; color: #fff; transition: 0.3s all; opacity:1 !important;}
#back2Top.top-scroll3:hover {background-color: #9751FF !important; color: #fff;}

#back2Top.top-scroll4 {width: 60px; height: 60px; line-height: 2.8; overflow: hidden; z-index: 999; cursor: pointer; position: fixed; bottom: 219px; right: 10%; text-align: center; font-size: 18px; border: 4px solid #fff; border-radius: 30px; box-shadow: 0 0 7px #282d37; text-decoration: none !important; background: #fae301; color: #fff; transition: 0.3s all; opacity:1 !important;}
#back2Top.top-scroll4:hover {background-color: #9751FF !important; color: #fff;}
#back2Top.top-scroll5 {width: 60px; height: 60px; line-height: 2.8; overflow: hidden; z-index: 999; cursor: pointer; position: fixed; bottom: 287px; right: 10%; text-align: center; font-size: 18px; border: 4px solid #fff; border-radius: 30px; box-shadow: 0 0 7px #282d37; text-decoration: none !important; background: #660099; color: #fff; transition: 0.3s all; opacity:1 !important;}
#back2Top.top-scroll5:hover {background-color: #9751FF !important; color: #fff;}
#back2Top.top-scroll6 {width: 60px; height: 60px; line-height: 2.8; overflow: hidden; z-index: 999; cursor: pointer; position: fixed; bottom: 355px; right: 10%; text-align: center; font-size: 18px; border: 4px solid #fff; border-radius: 30px; box-shadow: 0 0 7px #282d37; text-decoration: none !important; background: #0066cc; color: #fff; transition: 0.3s all; opacity:1 !important;}
#back2Top.top-scroll6:hover {background-color: #9751FF !important; color: #fff;}


#back2Top.top-scroll4 img {width: 80%;}

@media (max-width: 1599px) {
	#back2Top.top-scroll1, #back2Top.top-scroll2, #back2Top.top-scroll3, #back2Top.top-scroll4, #back2Top.top-scroll5, #back2Top.top-scroll6 {right: 5%;}
}
@media (max-width: 1399px) {
	#back2Top.top-scroll1, #back2Top.top-scroll2, #back2Top.top-scroll3, #back2Top.top-scroll4, #back2Top.top-scroll5, #back2Top.top-scroll6  {right: 3%;}
}
@media (max-width: 767px) {
	#back2Top.top-scroll1 {width: 50px; height: 50px; line-height: 2.6; font-size: 16px; right: 1%; bottom: 15px;}
	#back2Top.top-scroll2 {width: 50px; height: 50px; line-height: 2.6; font-size: 16px; right: 1%; bottom: 73px;}
	#back2Top.top-scroll3 {width: 50px; height: 50px; line-height: 2.6; font-size: 16px; right: 1%; bottom: 131px;}
	#back2Top.top-scroll4 {width: 50px; height: 50px; line-height: 2.6; font-size: 16px; right: 1%; bottom: 189px;}
	#back2Top.top-scroll5 {width: 50px; height: 50px; line-height: 2.6; font-size: 16px; right: 1%; bottom: 247px;}
	#back2Top.top-scroll6 {width: 50px; height: 50px; line-height: 2.6; font-size: 16px; right: 1%; bottom: 305px;}
}


body {font-size: 14px; font-weight: normal; color: #55545b; line-height: 24px;}

a {text-decoration: none;}

/*-- Common Classes ------------------*/
.fix {overflow: hidden;}
.clear {clear: both;}
.f-left {float: left;}
.f-right {float: right;}
.p-relative {position: relative;}

/*-- Background color ---------------*/
.grey-bg-16 {background: #f5f5f7 !important; padding:0 0 10px; border-radius:10px; margin-top:20px;}
.white-bg {background: #fff;}

/*-- btn -------------------*/
.m-btn {display: inline-block; height: 60px; line-height: 60px; padding: 0 35px; color: #fff; background: #5f3afc; text-align: center; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-weight: 500; font-size: 16px; text-transform: capitalize; position: relative; z-index: 1;}
.m-btn:hover {color: #fff; -webkit-box-shadow: 0px 14px 20px 0px rgba(37, 17, 124, 0.16); -moz-box-shadow: 0px 14px 20px 0px rgba(37, 17, 124, 0.16); box-shadow: 0px 14px 20px 0px rgba(37, 17, 124, 0.16); text-decoration: none;}
.m-btn-2 {height: 44px; line-height: 42px; font-size: 14px;}
.m-btn-3 {height: 46px; line-height: 42px; padding: 0 15px;}
.m-btn-4 {height: 50px; line-height: 46px; padding: 0 30px;}
.m-btn-5 {height: 34px; line-height: 2.4; padding: 0 15px; font-size: 14px;}

.m-btn-border {height: 46px; line-height: 40px; font-size: 14px; font-weight: 700; border: 2px solid #e7e6ef; color: #5f3afc; background: transparent;}
.m-btn-border:hover {color: #fff; border-color: #5f3afc; background: #5f3afc;}
.m-btn-border-2 {height: 50px; line-height: 46px; border: 2px solid #e7e6ef; color: #1a152e; padding: 0 30px; font-size: 14px; background: transparent;}
.m-btn-border-5 {height: 40px; line-height: 32px;}
.m-btn-border-6 {height: 34px; line-height: 26px; padding: 0 15px;}

/* Row */
@media screen and (max-width: 1199px) {
	.col-xxl-4.col-md-3 {flex: 0 0 33.33333%; max-width: 33.33333333%;}
}
@media screen and (max-width: 991px) {
	.col-xxl-4.col-md-3 {flex: 0 0 50%; max-width: 50%;}
}
@media screen and (max-width: 767px) {
	.col-xxl-4.col-md-3 {flex: 0 0 100%; max-width: 100%;}
}

.mt-25 {margin-top: 25px;}
.mb-20 {margin-bottom: 20px;}
.mb-30 {margin-bottom: 30px;}