
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
 font-family: 'Noto Sans KR', sans-serif;
 
/*@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

/*나눔스퀘어라운드 *//*
@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');
/* */
/*@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
/*  다음체 *//*
@font-face{
font-family:’Daum’;
font-style:normal;
font-weight:400;
src:url(‘//cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-Regular.woff2’) format(‘woff2’),
url(‘//cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-Regular.woff’) format(‘woff’);
}
/*
@font-face{
font-family:’Daum’;
font-style:normal;
font-weight:700;
src:url(‘//cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-SemiBold.woff2’) format(‘woff2’),
url(‘//cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-SemiBold.woff’) format(‘woff’);
}

*/
/* 다음체 */
/*
@font-face {  
 font-family:'aritadm';  
 src: url('AritaDotumMedium.eot');  
 src: local(※), url('AritaDotumMedium.eot?#iefix') format('embedded-opentype'),  
   url('AritaDotumMedium.woff') format('woff'),  
   url('AritaDotumMedium.ttf') format('truetype');  
 font-weight: normal;  
 font-style: normal;  
}  
@font-face {  
 font-family:'aritadl';  
 src: url('AritaDotumLight.eot');  
 src: local(※), url('AritaDotumLight.eot?#iefix') format('embedded-opentype'),  
   url('AritaDotumLight.woff') format('woff'),  
   url('AritaDotumLight.ttf') format('truetype');  
 font-weight: normal;  
 font-style: normal;  
}  
@font-face {  
 font-family:'aritasm';  
 src: url('AritaSansMedium.eot');  
 src: local(※), url('AritaSansMedium.eot?#iefix') format('embedded-opentype'),  
   url('AritaSansMedium.woff') format('woff'),  
   url('AritaSansMedium.ttf') format('truetype');  
 font-weight: normal;  
 font-style: normal;  
}  
@font-face {  
 font-family:'aritadsb';  
 src: url('AritaDotumSemiBold.eot');  
 src: local(※), url('AritaDotumSemiBold.eot?#iefix') format('embedded-opentype'),  
   url('AritaDotumSemiBold.woff') format('woff'),  
   url('AritaDotumSemiBold.ttf') format('truetype');  
 font-weight: normal;  
 font-style: normal;  
}  
*/
/*
.nanummyeongjo{
 font-family: 'Nanum Myeongjo', serif !important;
}
*/
/** 이하는 공통 **/
.normal {
 font-style: normal;
}

.w250 {
 font-weight: 250;
}

.w300 {
 font-weight: 300;
}

.w350 {
 font-weight: 350;
}

.w400 {
 font-weight: 400;
}

.w500 {
 font-weight: 500;
}

.w600 {
 font-weight: 600;
}

.w700 {
 font-weight: 700;
}

.w800 {
 font-weight: 800;
}

.w900 {
 font-weight: 900;
}




body div, a, span, table {	
		font-family: 'Noto Sans KR', sans-serif !important; 
}
.new_section {
	
	width: 100%;
	margin: 0px auto;
	text-align: center;s
	}
	.first_section{
	background-color:#FFA44A;	
/*	background-color: #F44A32; */
	color: white;
	height: auto;
}
#livi_circle_w{
	margin:0px auto;
	width:50px !important;
	height:50px;
	padding:5px;
	border-radius:50%;
	background-color:white;	
	opacity:1;
}
#livi_box{
	width:120px;
	height:120px;
	opacity:1;
}
.new_section_title{
	padding-top:80px;
	font-weight:bolder;
}
.second_section {
	background-color: white;
	color: #F44A32;
}

.second_section_wrap {
	height: auto;
	max-width: 1000px;
	margin: 0px auto;
}
.second_section_bold {
	color: #F44A32;
	font-size: 18px;
	font-weight: bolder;
	font-family: 나눔고딕;
	line-height: 1.5;
}
.third_section {
	background-color: #F4F4F4;
	color: white;
	height: auto;
	font-family: 'Noto Sans KR', sans-serif !important;
}
.third_section_wrap {
	height: auto;
	max-width: 1000px;
	margin: 0px auto;
	height: auto;
}
.third_logo_contents {
	width: 200px;
	padding: 40px;
	display: inline-block;
}
.third_logo_contents img {
	width: 100%;
}
.third_logo_contents div {
	padding-top: 20px;
	width: 200px;
	text-align: center;
	font-size: 20px;
	height: 45px;
	color: #282828;
	line-height: 1.3;
}
.fourth_section {
	background-color: #F44A32;
	color: white;
	height: auto;
}
.fourth_section_wrap {
	height: auto;
	max-width: 1000px;
	margin: 0px auto;
	height: auto;
}
.fourth_logo_contents {
	width: 300px;
	height: 430px;
	padding: 40px;
	margin-top: 60px;
	display: inline-block;
	background-color: #f4f4f4;
	margin: 20px;
}
.fourth_logo_contents img {
	width: 300px;
	height: 300px;
}

.fourth_logo_contents_mtitle {
	padding-top: 20px;
	width: 350px;
	text-align: center;
	font-size: 30px;
	height: 30px;
	color: #666;
	line-height: 1.3;
	font-weight: 700;
}
.fourth_logo_contents_text {
	padding-top: 20px;
	width: 300px;
	text-align: center;
	font-size: 17px;
	height: 60px;
	color: #666;
	line-height: 1.3;
}
.fifth_section {
	background-color: white;
	color: white;
	height: auto;
}
.fifth_section_wrap {
	height: auto;
	max-width: 1000px;
	margin: 0px auto;
	height: auto;
}
.fifth_logo_contents {
	width: 200px;
	padding: 40px;
	margin-top: 60px;
	display: inline-block;
}

.fifth_logo_contents div {
	padding-top: 20px;
	width: 200px;
	text-align: center;
	font-size: 20px;
	height: 45px;
	color: #282828;
	line-height: 1.3;
}
.sixth_section {
	background-color: #F4F4F4;
	color: white;
	height: auto;
}
.sixth_section_wrap {
	height: auto;
	max-width: 1000px;
	margin: 0px auto;
	height: auto;
}
.sixth_logo_contents {
	width: 200px;
	padding: 40px;
	display: inline-block;
}
.sixth_logo_contents img {
	width: 100%;
}
.sixth_logo_contents div {
	padding-top: 20px;
	width: 200px;
	text-align: center;
	font-size: 20px;
	height: 45px;
	color: #282828;
	line-height: 1.3;
}
.circles_wrap {

}
.Mtitle {
	font-size: 25px;
	width: 240px;
	height: 50px;
	vertical-align: middle;
	line-height: 1.3;
	margin: 0px auto;
	padding-bottom: 100px;
	clear:both;
}
.circle_wrap1 {
	display: inline-block;
	margin: 20px;
}
.circle_contents {

	background-color: rgba(0,0,0,0.8);
	display: table-cell;
	-ms-display: table-cell;
	height: 200px;
	width: 200px;
	text-align: center;
	vertical-align: middle;
	border-radius: 50%;
	color: white;
	font-size: 13px;
	border: 0px;
}
.circle_title {
	color: #F44A32;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 10px;
}
.new_section_title {
	line-height: 1.7;
/*	border-bottom: 3px solid #F44A32; */

	height: auto;
	vertical-align: middle;
	font-family: 'Noto Sans KR', sans-serif !important;	font-size:45px;
}
.new_section_title_w {
	line-height: 3;
	border-bottom: 3px solid white;
	
	vertical-align: middle;
	font-family: 'Noto Sans KR', sans-serif !important;

	 font-size:45px;
}
.new_section_title1 {

	color: white;
	font-size: 45px;
	
	font-weight: bolder;

	
	padding: 2px;
	font-family: 'Noto Sans KR', sans-serif !important;
}
.new_section_title2 {

	color: black;
	font-size: 45px;
	
	font-weight: bolder;

	
	padding: 2px;
	font-family: 'Noto Sans KR', sans-serif !important;
}
.span_title{
	font-family: 'Noto Sans KR', sans-serif !important;
	font-size:45px;
}
.new_section_contents {
	max-width: 1000px;
}
.fifth_new {
	max-width: 1000px;
	margin:0px auto;
	  position:relative;
}

.analytics_animation {
	width: 100%;
	max-width: 1000px;
	height: 300px;
	margin: 0px auto;
}
.analytics_form {
	
	width: 40%;
	color: white;
	padding: 20px;
	
}
.daily_a {
	font-size: 20px;
	line-height: 2.7;
	width: 400px;
	float: left;
	text-align:right;
}
.analytics_txt{
	width:200px;float:right;font-size: 20px;line-height: 2.7;color: white;
}
.analytics_daily {
	font-size: 45px;
	color: white;text-align: right;
	
}
.users_a {
	width: 400px;
	font-size: 20px;
	line-height: 2.7;
	float: left;
	text-align:left;
}
.analytics_users {
	font-size: 45px;
	color: white;
	text-align: left;
}

.search_a {
		float: left;
	text-align:right;
	font-size: 20px;
}
.analytics_search {
	font-size: 45px;
	color: white;
	text-align: right;
}

.growth_a {
		width: 400px;
	font-size: 20px;
	line-height: 2.7;
	float: left;
	text-align:left;
}
.analytics_growth {
	font-size: 45px;
	color: white;
	
text-align: left;
}

.main_wrap_new {
	width: 100%;
	margin: 0 auto;
	height: auto;
}
.renew_visual_new {
	position: relative;
	padding-bottom: 56.25%;
	overflow: hidden;
	
	
	
	&:hover + .video-control {
    opacity: 0.5;
  }

  iframe #player .controls-wrapper {
    display: none;
  }
}

.renew_visual_new iframe, .renew_visual_new object, .renew_visual_new embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/*비디오 컨트롤러 */


.video-control {
  opacity: 0!important;
  position: absolute;
  width: 50px!important;
  height: 50px!important;
  top: 50px!important;
  left: 0px!important;
  transition: opacity 0.3s!important;

  &:hover {
    opacity: 1!important;;
  }

  &:before, &:after {
    content: '';
    width: 100%!important;
    height: 100%!important;
    max-width: 131px!important;
    background-repeat: no-repeat!important;
    background-size: 100%!important;
    display: block!important;
    position: absolute!important;
  }

  &:before {
    background-image: url("img/unmute.png");
    background-size: 60px
  

    /*content: "\ea1c";*/
  }

  &:after {
    background-image: url("img/mute.png");

    background-size: 60px

    /*content: "\ea1d";*/
  }

  &.paused:after, &.playing:before {
    opacity: 0!important;
  }
}

.video-control-show {
  opacity: 0.5!important;
}

/* audio button style */

.audio-control {
  opacity: 1!important;
  position: absolute;
  width: 6% !important;
  height: 50px !important;
  top:100px !important;
  left:30px !important;
  transition: opacity 0.3s !important;

  &:hover {
    opacity: 1;
  }

  &:before, &:after {
    position: absolute;
    content: '';
    width: 100% !important;
    height: 100% !important;
    max-width: 36px !important;
    background-repeat: no-repeat;
    background-size: 100% !important;
    display: block !important;
  }

  &:before {
    background-image: url("img/mute.png");
    background-size: 254% !important;
  }

  &:after {
    background-image: url("img/unmute.png");
    background-size: 60px
  }

  &.unmuted:after, &.muted:before {
    opacity: 0 !important;
  }
}



/*비디오 컨트롤러 종료 */
.animationGetViewed {

	opacity: 0;
}
.for_ani {
	opacity: 0;
}

.onViewPoint {
	-webkit-animation-duration: 0.6s;
	-webkit-animation-name: fadeIn;
	-webkit-animation-fill-mode: forwards;
	-ms-animation-duration: 0.6s;
	-ms-animation-name: fadeIn;
	-ms-animation-fill-mode: forwards;
}
.fadeInDown {
	-webkit-animation-duration: 0.6s;
	-webkit-animation-name: fadeInDown;
	-webkit-animation-fill-mode: both;
	-ms-animation-duration: 0.6s;
	-ms-animation-name: fadeInDown;
	-ms-animation-fill-mode: both;
}

.fadeInLeft {
	-webkit-animation-duration: 0.5s;
	-webkit-animation-name: fadeInLeft;
	-webkit-animation-fill-mode: both;
	-ms-animation-duration: 0.5s;
	-ms-animation-name: fadeInLeft;
	-ms-animation-fill-mode: both;
}

@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

.fadeInRight {
	-webkit-animation-duration: 0.5s;
	-webkit-animation-name: fadeInRight;
	-webkit-animation-fill-mode: both;
	-ms-animation-duration: 0.5s;
	-ms-animation-name: fadeInRight;
	-ms-animation-fill-mode: both;
}

@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(+100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

.vimeo {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.vimeo iframe {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.vimeo .overlay {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../img/overlay-pattern.png) repeat;
}
.iframe-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

/* Make the iframe keep an aspect ratio, and
 position it in the middle of its parent wrapper*/

.bar_card_wrap{
	max-width:450px;
	margin:0px auto;
	width:100%;
}
#bar_card{
	margin:0px auto;
	width:450px;
	text-align: left;
	
	
	height:60px;
	margin-top:20px;
	
}
.left_foreign_bar{
	display:inline-block;
	width:350px;
	height:40px;
	background-color:gray;
	text-align: center;
	padding-top:20px;
	font-size:20px;
	color:white;
}
.left_korean_bar{
	display:inline-block;
	width:220px;
	height:40px;
	background-color:gray;
		text-align: center;
	padding-top:20px;
	font-size:20px;
	color:white;
}
.left_korean_bar_plus{
display:inline-block;
width:0px;
height:40px;
background-color:red;
	text-align: center;
	padding-top:20px;
	
}
.bar_name_card{
	height: 40px;
    display:inline-block;
    width: 45px;
    padding-top:20px;
    text-align:center;
   font-size:20px;
   
}
.iframe-wrapper iframe {
	width: 100vw;
	height: 56.25 vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: 100vh;
	min-width: 177.77 vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.video_4grid{
	max-width:900px;
	width:100%;
	margin:0px auto;
}
.video_2grid{
	max-width:900px;
	width:100%;
	height:auto;
}
.video_grid_box{

width: 400px;
display:inline-block;	
}
.video_grid_box2{
	width:300px;
	margin:0px auto;
}

.curri_title{
	width:300px;
	margin-top:20px;
	margin-bottom:20px;
	font-size:20px;
	color:#F44A32;
}

.curri_wrap{
	width:300px;
	display:inline-block;
	height:auto;
	padding:10px;
}
.curri_cstep{
	width:300px;
	height:500px;
	position:relative;
	
}
.cstep_bar{
	position:absolute;
	bottom:0px;
	left:0px;
	width:280px;
	background-color:#F44A32;
	color:white;
	padding:10px;
	font-size:19px;
	line-height:1.6;
}

.cstep_recom{
	color:white;
	padding:4px;
	font-size:15px;
	line-height:1.6;
	font-weight:bolder;
	position:absolute;
	width:100%;
	bottom:20px;
	left:0px;
}
.cstep1_bar{
	height:150px;
}
.hide_curri{
	opacity: 0;
}
.fill_left{
	width:130px;height:40px ;
    -ms-transition: width 2s ;
    -webkit-transition: width 2s;  
    transition: width 2s ;
}
#fill_left_text{
	font-size:20px;
	color:white;
}
.cstep1_bar_after{
	
	 width:280px;height:200px ;
    -ms-transition: height 2s ;
    -webkit-transition: height 2s;  
    transition: height 2s ;
}
.cstep2_bar{
	height:150px;
}
.cstep2_bar_after{
	 width:280px;height:300px ;
    -ms-transition: height 2s ;
    -webkit-transition: height 2s ; 
    transition: height 2s ;
}
.cstep3_bar{
	height:150px;
}
.cstep3_bar_after{
	 width:280px;height:450px ;
    -ms-transition: height 2s ;
    -webkit-transition: height 2s ; 
    transition: height 2s ;
}
.curri_video{
	width:300px;
	height:180px;
}
.curri_onesay{
	width:100%;
	font-size:13px;
	color:darkred;
}
.curri_section{
	max-width:900px;
	width:100%;
	margin:0px auto;
}



.review_video_wrap{
	margin: 0px auto;
	max-width:600px;
	width:100%;
}
.img_text_review_wrap{
	max-width:960px;
	width:100%;
	margin:0px auto;
}
.img_text_review{
	background-color: #394f66;
	max-width:280px;
	width:100%;
	float:left;
	margin:10px;
	padding:10px;
	height:350px;
	border-radius:8px;
}
.img_text_review_top{
	width:100%;
	height:50px;
}
.img_text_review_top_img{
	float:left;
	width:100px;
	text-align:right;

}
.img_text_review_top_name{
	float:right;
	width:180px;
	height:20px;
	vertical-align:bottom !important;
	text-align:center;
	font-size:20px;
	color:white;
	line-height:1.8;
	
	
}
.img_text_review_bottom{
	width:280px;
	padding:2px;
	text-align:left;
	color:white;
	font-size:15px;
	clear:both;
	margin-top:10px;
	font-weight:200;
	
	
}
.review_bottom_title{
	color:white;
	font-weight:200;
}
.rolling_review_wrap{
	
	margin: 0px auto;
	width:100%;
	height:300px;
	margin-top:30px;
}
.rolling_review{
	max-width:450px;
	width:100%;
	margin:10px;
	padding:10px;
	display:inline-block;
	background-color:white;
	height:230px;
	overflow:hidden;
}
.rolling_review_contents{
	position:relative;
	width:100%;
	height:200px;
	overflow:hidden;
}
.rolling_review_title{
	height:30px;
	font-size:23px;
	padding-top:10px;
	
	
}
#textup{
	text-align:center; position:absolute; top:0;
      left:0; width:100%;
      height:40px;
}
#textup1{
	text-align:center; position:absolute; top:0;
      left:0; width:100%;
      height:40px;
}
.scrolltextup{
	overflow:hidden;
     position:relative; width:100%; height:100%;
}

.hide_answer{
	display:none;
}
.help_wrap{
	max-width:800px;
	width:100%;
	margin:0px auto;
	position:relative;
	
	
}
.help_answer{
	display:inline-block;
	padding:30px;
	max-width:500px;
	width:100%;
}
.question_answer_bottom{
	width:90%;
	padding:5%;
	background-color:rgba(255,255,255,0.3);
	color:white;
	font-size:18px;
	line-height:1.3;
}
.question_answer{
	width:90%;
	padding:5%;
	background-color:rgba(255,255,255,0.6);	
	pointer:cursor;
	color:black;
	font-size:20px;
	line-height:1.4;
}

.help_wrap ul li {
	margin-top:3px;
	margin-bottom:7px;
	pointer:cursor;

}
.help_wrap ul{
	margin-top:3px;
	margin-bottom:7px;

	top:0px;
}
.hdlog img{
	width: 200px !important;
    line-height: 145px;
    padding-top: 28px;
}


.title_sub_small_text{
	color:white;
	font-size:18px;
	
}
.quick_menu_size{
	width:106px;
}
.Rquick > ul > li {
	height: auto !important;
}
