@charset "utf-8";
@font-face {
     font-family: 'CoreDream1';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'CoreDream3';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'CoreDream4';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'CoreDream5';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'CoreDream7';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

*{
	margin: 0;
	padding: 0;
}

body{
	font-family: 'CoreDream4';
	font-size: 13px;
	color:#000;
	background-color:#fff;
     overflow-x: hidden;
}
input,textarea{ font-family: 'CoreDream4';}
img{ border:0px;}



body,ul,dl,ol,li{margin:0px; padding:0px; list-style-type:none;}

a{ text-decoration:none; color:#fff;}



/*공통*/

.fend{clear:both;}
img{ vertical-align:top; border:0px;}

html,body{ margin:0; padding:0; width:100%; height:100%; min-width:1400px;}
.notScroll {overflow: hidden;width: 100%;height: 100vh;touch-action:none;}

#hd_login_msg{ display: none;}

.top_wrap{ height: 100px;}
.top_wrap .top_box{ position: fixed; top:0px; left: 0px; width:100%; height: 99px; border-bottom: solid 1px rgba(0,0,0,0.05); background-color: #fff; z-index: 1000;}
.top_wrap .top_box .inbox{ position: relative; width:1400px; margin: 0 auto;}
.top_wrap .top_box .inbox .logo{ position: absolute; top:26px; left: 0px; cursor: pointer;}
.top_wrap .top_box .inbox .menu{ position: absolute; top:24px; left: 160px; width:calc(100% - 160px)}
.top_wrap .top_box .inbox .menu ul{ position:relative; display: inline-table; margin-right: 20px;}
.top_wrap .top_box .inbox .menu ul li a{color: #000;}
.top_wrap .top_box .inbox .menu ul li a:hover{color: #c40006;}
.top_wrap .top_box .inbox .menu ul li:nth-child(1){ margin-right: 30px; font-size: 16px; font-family: 'CoreDream5'; height: 50px; line-height: 50px; padding: 0 15px 0 15px; cursor: pointer;}
.top_wrap .top_box .inbox .menu ul li.sub{ display: none; position: absolute; top:48px; left: 0px; height: 60px; background-color: #c40006; color: #fff; border-radius: 46px;}
.top_wrap .top_box .inbox .menu ul li.sub dt{ display: inline-table; height: 40px; line-height: 40px; margin: 10px 0 0 20px; font-size: 14px; font-family: 'CoreDream5'; cursor:pointer;}
.top_wrap .top_box .inbox .menu ul li.sub dt:nth-child(1){ margin-left: 30px;}
.top_wrap .top_box .inbox .menu ul li.sub.mt{ width:580px;}
.top_wrap .top_box .inbox .menu ul li.sub.st{ width:340px;}
.top_wrap .top_box .inbox .menu ul:hover li:nth-child(1){ color: #c40006;}
/*
.top_wrap .top_box .inbox .menu ul:hover li.sub{ display: block;}
*/
.top_wrap .top_box .inbox .menu ul li.sub dt:hover{ opacity: 0.6;}
.top_wrap .top_box .inbox .menu ul li.sub dt.on{ opacity: 0.6;}
.top_wrap .top_box .inbox .menu ul.on li:nth-child(1){ color: #c40006;}
.top_wrap .top_box .inbox .menu .btn{ position: absolute; top:20px; font-size: 15px; right: 0px;}
.top_wrap .top_box .inbox .menu .btn dt{ position: relative; display: inline-table; margin-left: 40px; letter-spacing: -1px; cursor: pointer;}
.top_wrap .top_box .inbox .menu .btn dt:hover{ color: #c40006;}
.top_wrap .top_box .inbox .menu .btn dt.pdf::before{ content: ''; position: absolute; top:2px; left: -20px; width:20px; height: 20px; background: url('/sub/img/ico_top_pdf.png');}
.top_wrap .top_box .inbox .menu .btn dt a{ color: #000;}
.top_wrap .top_box .inbox .menu .btn dt:hover a{ color: #c40006;}
.top_wrap .top_box .inbox .menu .btn dt.stax::before{ content: ''; position: absolute; top:1px; left: -23px; width:20px; height: 20px; background: url('/sub/img/ico_top_stax.png');}
.top_wrap .top_box .inbox .menu .btn dt.wisemob::before{ content: ''; position: absolute; top:1px; left: -23px; width:20px; height: 20px; background: url('/sub/img/ico_top_wisemob.png');}

.float{ position:fixed; top:calc(50% - 50px); right: 20px; width:81px; text-align: center;}
.float img{ margin-bottom: 15px; cursor: pointer;}

.footer{ background-color: #303030; color: #fff; height: 220px;}
.footer .inbox{ position: relative; width:1400px; margin: 0 auto;}
.footer .inbox .logo{ position: absolute; top: 50px; left: 0px;}
.footer .inbox .sns{ position: absolute; top:50px; right: 0px;}
.footer .inbox .sns img{ cursor: pointer;}
.footer .inbox .txt{ padding: 55px 0 0 150px; width:850px;}
.footer .inbox .txt div{ display: inline-table; margin-right: 15px; font-family: 'CoreDream3'; font-size: 12px; opacity: 0.7;}
.footer .inbox .txt .copy{ font-size: 12px; padding: 10px 0 0 0;}

.pop_layer{ position:fixed; top:150px; left: 50px; z-index: 2000;}
.pop_layer .bot{ position:relative; height:40px; line-height:40px; background-color:#000; color:#fff; font-size:14px;}
.pop_layer .bot .check{ position:absolute; top:0px; left:15px; cursor:pointer;}
.pop_layer .bot .btn{ position:absolute; top:0px; right:0px; width:60px; text-align:center; cursor:pointer;}

@media screen and (max-width:680px){

     html,body{ margin:0; padding:0; width:100%; height:100%; min-width:100%;}
     .top_wrap{ height: 60px;}
     .top_wrap .top_box{ position: fixed; top:0px; left: 0px; width:100%; height: 60px; background-color: #fff; z-index: 1200;}
     .top_wrap .top_box .inbox{ position: relative; width:100%; margin: 0 auto;}
     .top_wrap .top_box .inbox .logo{ position: absolute; top:12px; left: calc(50% - 37px); cursor: pointer;}
     .top_wrap .top_box .inbox .logo img{ height: 36px;}
     .top_wrap .top_box .inbox .menu{ position: fixed; top:59px; left: 0px; width:100%; height: calc(100% - 59px); background-color: #fff; display: none;}
     .top_wrap .top_box .inbox .menu ul{ position:relative; display: block; margin-right: 0px; border-top:solid 1px #eee;}
     .top_wrap .top_box .inbox .menu ul:nth-child(1){ border-top: solid 1px #c40006;}
     .top_wrap .top_box .inbox .menu ul:nth-child(4){ border-bottom: solid 1px #eee;}
     .top_wrap .top_box .inbox .menu ul li:nth-child(1){ position: relative; margin-right: 0px; font-size: 16px; font-family: 'CoreDream5'; height: 50px; line-height: 50px; padding: 0 15px 0 15px; cursor: pointer;}
     .top_wrap .top_box .inbox .menu ul li:nth-child(1)::after{ content: '\276F'; position: absolute; font-size: 16px; top:0px; right: 15px; color: #ccc;}
     .top_wrap .top_box .inbox .menu ul li.sub{ display: block; position:relative; top:0px; left: 0px; height: auto; background-color: #fff; color: #000; border-radius: 0px;}
     .top_wrap .top_box .inbox .menu ul li.sub dt{ display: inline-table; height: 40px; line-height: 40px; border-radius: 40px; border: solid 1px #eee; color: #999; padding: 0 15px 0 15px; margin: 0 0 10px 15px; font-size: 12px; font-family: 'CoreDream5'; cursor:pointer;}
     .top_wrap .top_box .inbox .menu ul li.sub dt:nth-child(1){ margin-left: 15px;}
     .top_wrap .top_box .inbox .menu ul li.sub.mt{ width:auto;}
     .top_wrap .top_box .inbox .menu ul li.sub.st{ width:auto;}
     .top_wrap .top_box .inbox .menu ul:hover li:nth-child(1){ color: #c40006;}
     .top_wrap .top_box .inbox .menu ul:hover li.sub{ display: block;}
     .top_wrap .top_box .inbox .menu ul:hover li.sub dt:hover{ opacity: 0.6;}
     .top_wrap .top_box .inbox .menu ul.on li:nth-child(1){ color: #c40006;}
     .top_wrap .top_box .inbox .menu .btn{ position:absolute; top:auto; bottom: 30px; right: calc(50% - 100px); width:200px;}
     .top_wrap .top_box .inbox .menu .btn dt{ display:block; width:100%; border-radius: 36px; line-height: 36px; text-align: center; margin-left: 0px; margin-top: 10px; cursor: pointer; background-color: #c40006; color: #fff;}
     .top_wrap .top_box .inbox .menu .btn dt:hover{ color: #c40006;}
     .top_wrap .top_box .inbox .menu .btn dt.pdf::before{ content: ''; display: none;}
     .top_wrap .top_box .inbox .menu .btn dt.stax::before{ content: ''; display: none;}
     .top_wrap .top_box .inbox .menu .btn dt.wisemob::before{ content: ''; display: none;}
     .top_wrap .btn_side{ position:fixed; top:10px; right: 15px;  width:40px; height: 40px; z-index: 1300;}
     .top_wrap .btn_side::before{ content: '\2630'; position: absolute; font-size: 26px; left: 10px; color: #888;}
     .top_wrap .btn_side.on::before{ content: '\2715'; position: absolute; font-size: 26px; left: 10px; color: #888;}
     .top_wrap .top_box .inbox .menu .btn dt a{ color: #fff;}

     .float{ position:fixed; top:auto; bottom: 10px; right: 15px; height: 50px; width:calc(100% - 20px); text-align: right; z-index: 1000;}
     .float img{ margin-bottom: 15px; cursor: pointer; margin-left: 5px;}
     .float .contact{ width:50px;}
     .float .toktok{ width:50px;}
     .float .top{ width:30px; margin:10px 0 0 10px;}

     .footer{ background-color: #303030; color: #fff; height: auto; padding-bottom: 80px;}
     .footer .inbox{ position: relative; width:100%; margin: 0 auto;}
     .footer .inbox .logo{ position: absolute; top: 30px; left: 15px;}
     .footer .inbox .logo img{ height: 36px;}
     .footer .inbox .sns{ position: absolute; top:26px; right: 15px;}
     .footer .inbox .sns img{ cursor: pointer; height: 34px;}
     .footer .inbox .txt{ padding: 90px 15px 0 15px; width:calc(100% - 30px);}
     .footer .inbox .txt div{ display: inline-table; margin-right: 15px; font-family: 'CoreDream3'; font-size: 11px; opacity: 0.7;}
     .footer .inbox .txt .copy{ font-size: 11px; padding: 10px 0 0 0;}

     .pop_layer{ position:fixed; top:100px; left: 20px; width:calc(100% - 40px); z-index: 2000;}
     .pop_layer img{ width:100%;}
     .pop_layer .bot{ position:relative; height:40px; line-height:40px; background-color:#000; color:#fff; font-size:14px;}
     .pop_layer .bot .check{ position:absolute; top:0px; left:15px; cursor:pointer;}
     .pop_layer .bot .btn{ position:absolute; top:0px; right:0px; width:60px; text-align:center; cursor:pointer;}

}

.main{ position: relative;}
.main .video{ position: relative; overflow: hidden;}
.main .video .txt{ position: absolute; top:250px; left: 50% !important;width: 100%;transform: translate(-50%, -50%); text-align: center; color: #fff; font-size: 82px; font-family: 'CoreDream1'; letter-spacing: -5px; line-height: 85px; z-index: 1000; opacity: 0;}
.main .video .txt div{ display: inline-table; margin-left: 4px;}
.main .video .txt span{ font-family: 'CoreDream7'; display: block;}
.main .video .btn_main_top { background: none; border: none; cursor: pointer; padding: 100px 0 0; transition: transform 0.3s;display: block; margin:0 auto;}
.main .video .btn_main_top:hover { transform: scale(1.1); }
.main .video .btn_main_top img { width: 400px; height: auto; }
.main .video .mask{ position: absolute; width:100%;height: 100%; bottom: 0px; left: 0px;;background: rgba(0, 0, 0, 0.5);z-index: 100;}
.main .video .mask img{ width:100%;}
.main .video video{ display: block;}
/* 반응형 */
@media (max-width: 1024px) { 
    .main .video .txt { top:50% !important;font-size: 60px; line-height: 70px; gap: 25px; } 
    .main .video .btn_main_top img { max-width:400px;width: 100%; } 
}

@media (max-width: 768px) { 
    .main .video .txt { top:50% !important;font-size: 42px; line-height: 50px; gap: 20px; } 
    .main .video .btn_main_top img { max-width:400px;width: 100%;  } 
}

@media (max-width: 480px) { 
    .main .video .txt { top:50% !important;font-size: 28px; line-height: 35px; gap: 15px; } 
    .main .video .btn_main_top img { max-width:400px;width: 100%;  } 
}

.main .video .mask{ /*animation:mainmask 1.5s forwards;*/}
@keyframes mainmask {
     0%{ opacity:0; bottom:-600px;}
     100%{ opacity:1; bottom:0px;}
}
.main .video .txt{ animation:maintxt 2s forwards;}
@keyframes maintxt {
     0%{ opacity:0; left:calc(50% + 200px);}
     60%{ opacity:0; left:calc(50% + 200px);}
     100%{ opacity:1; left:calc(50% - 165px);}
}

.main .solution{ background-color: #000; color: #fff; padding: 120px 0 150px 0;}
.main .solution .inbox{ position: relative; width:100%; margin: 0 auto; height: 700px; text-align: center; font-size: 50px; letter-spacing: -5px; font-family: 'CoreDream1';}
.main .solution .inbox .txt1{ position: absolute; top:0px; left: 0px; width:100%; opacity: 0;}
.main .solution .inbox .txt1 span{ letter-spacing: -1px; font-family: 'CoreDream7'; font-size: 74px; color: #c40006;}
.main .solution .inbox .txt1 div{ display: inline-table; margin-left: 4px;}
.main .solution .inbox .txt2{ position: absolute; top:84px; left: 0px; width:100%; opacity: 0;}
.main .solution .inbox .txt2 span{ font-family: 'CoreDream7';}
.main .solution .inbox .txt2 div{ display: inline-table; margin-left: 4px;}
.main .solution .inbox .box{ position: absolute; top:250px; width:434px; height: 434px; border-radius: 0px; overflow: hidden; cursor: pointer;}
.main .solution .inbox .box .tit{ position: absolute; top:20px; left: 20px; font-size: 28px; letter-spacing: -2px; font-family:'CoreDream5'; z-index: 200; text-shadow: #000 1px 0 10px;}
.main .solution .inbox .box .btn{ position: absolute; bottom: 20px; right: 20px; width:39px; height: 39px; background: url('/sub/img/btn_arw.png'); background-size: contain; z-index: 200;}
.main .solution .inbox .box .mask{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background-color: #000; opacity: 0; z-index: 100;}
.main .solution .inbox .box.b1{left: calc(50% - 700px);}
.main .solution .inbox .box.b2{left: calc(50% - 217px);}
.main .solution .inbox .box.b3{left: calc(50% + 266px);}
.main .solution .inbox .box:hover{ animation:sol01 1s forwards;}
.main .solution .inbox .box:hover .tit{ animation:sol02 0.5s forwards;}
.main .solution .inbox .box:hover .btn{ animation:sol03 0.5s forwards;}
.main .solution .inbox .box:hover .mask{ animation:sol04 1s forwards;}

@keyframes sol01 {
     0%{ border-radius: 0px;}
     100%{ border-radius: 434px;}
}
@keyframes sol02 {
     0%{ top:20px; left: 20px; transform: translate(0%, 0%);}
     100%{ top:40%; left: 50%; transform: translate(-50%, -50%);}
}
@keyframes sol03 {
     0%{ bottom:20px; right: 20px;}
     100%{ bottom:calc(50% - 30px); right: calc(50% - 20px);}
}
@keyframes sol04 {
     0%{ opacity: 0;}
     100%{ opacity: 0.3;}
}

.main .solution.active .inbox .txt1{ animation:sol05 1s forwards;}
@keyframes sol05 {
     0%{ opacity: 0; left: 50%;}
     100%{ opacity: 1; left: 0px;}
}
.main .solution.active .inbox .txt2{ animation:sol06 1s forwards;}
@keyframes sol06 {
     0%{ opacity: 0; left: -50%;}
     100%{ opacity: 1; left: 0px;}
}

.main .marketing .inbox{ position: relative; width:1400px; margin: 0 auto; padding: 100px 0 400px 0;}
.main .marketing .inbox .txt{ position: absolute; top:150px; left: 0px; font-size: 46px; line-height: 54px; letter-spacing: -4px; font-family: 'CoreDream3'; opacity: 0;}
.main .marketing .inbox .txt .b{ font-family: 'CoreDream7';}
.main .marketing .inbox .txt .r{ font-family: 'CoreDream7'; letter-spacing: -1px; color: #c40006; font-size: 66px;}
.main .marketing .inbox .bg{ text-align: right;}
.main .marketing .inbox .banner{ position: relative; padding: 0 0 0 0;}
.main .marketing .inbox .banner .box{ position: absolute; opacity: 0; overflow: hidden; border-radius: 15px; cursor: pointer;}
.main .marketing .inbox .banner .box.search{ top:280px; left: 0px;}
.main .marketing .inbox .banner .box.display{ top:200px; left: 560px;}
.main .marketing .inbox .banner .box.viral{ top:250px; left: 960px;}
.main .marketing .inbox .banner .box.youtube{ top:695px; left: 198px;}
.main .marketing .inbox .banner .box.cpa{ top:575px; left: 560px;}
.main .marketing .inbox .banner .box.sns{ top:710px; left: 960px;}
.main .marketing .inbox .banner .box .tit_k{ position: absolute; top:calc(50% - 26px); left: 0px; width:100%; color: #fff; text-align: center; z-index: 200; font-size: 20px; font-family: 'CoreDream5'; letter-spacing: -1px;}
.main .marketing .inbox .banner .box .tit_e{ position: absolute; top:50%; left: 0px; width:100%; color: #fff; text-align: center; z-index: 200; font-size: 11px; letter-spacing: 1px; opacity: 0.7;}
.main .marketing .inbox .banner .box .tit_b{ opacity: 0; position: absolute; bottom:16px; left: 20px; color: #fff; z-index: 200; font-size: 18px; font-family: 'CoreDream5'; letter-spacing: -1px;}
.main .marketing .inbox .banner .box .btn{ opacity: 0; position: absolute; bottom: 10px; right: 10px; height: 36px; line-height: 36px; border-radius: 36px; border: solid 1px rgba(255,255,255,0.5); font-size: 11px; letter-spacing: 1px; padding:0 45px 0 15px; color: #fff; z-index: 200;}
.main .marketing .inbox .banner .box .btn::after{ content: ''; position: absolute; top:8px; right: 8px; width:20px; height: 20px; background: url('/sub/img/btn_arw.png'); background-size: contain;}
.main .marketing .inbox .banner .box .mask{ position: absolute; bottom:0px; left: 0px; width:100%; height: 100%; background-color: #000; opacity: 0.5;}

.main .marketing.active .inbox .txt{ animation:mar01 1s forwards;}
@keyframes mar01 {
     0%{ opacity: 0; left: -300px;}
     100%{ opacity: 1; left: 0px;}
}
.main .marketing.active .inbox .box.ft{ animation:mar02 2s forwards;}
@keyframes mar02 {
     0%{ opacity: 0;}
     100%{ opacity: 1;}
}
.main .marketing.active .inbox .box.sd{ animation:mar03 2s forwards;}
@keyframes mar03 {
     0%{ opacity: 0;}
     30%{ opacity: 0;}
     100%{ opacity: 1;}
}
.main .marketing .inbox .banner .box:hover .mask{ animation:mar04 1s forwards;}
@keyframes mar04 {
     0%{ opacity: 0.5; height: 100%;}
     100%{ opacity: 0.7; height: 60px;}
}
.main .marketing .inbox .banner .box:hover .tit_k{ animation:mar05 0.5s forwards;}
@keyframes mar05 {
     0%{ opacity: 1; left: 0px;}
     100%{ opacity: 0; left: -100%;}
}
.main .marketing .inbox .banner .box:hover .tit_e{ animation:mar06 0.5s forwards;}
@keyframes mar06 {
     0%{ opacity: 1; left: 0px;}
     100%{ opacity: 0; left: 100%;}
}
.main .marketing .inbox .banner .box:hover .tit_b{ animation:mar07 1s forwards;}
@keyframes mar07 {
     0%{ opacity: 0; left: -400px;}
     20%{ opacity: 0; left: -400px;}
     100%{ opacity: 1; left: 20px;}
}
.main .marketing .inbox .banner .box:hover .btn{ animation:mar08 1s forwards;}
@keyframes mar08 {
     0%{ opacity: 0; right: -400px;}
     20%{ opacity: 0; right: -400px;}
     100%{ opacity: 1; right: 10px;}
}

.main .contact{ padding: 80px 0 100px 0;}
.main .contact .inbox{ position: relative; width:1400px; margin: 0 auto;}
.main .contact .inbox .tit{ position: relative; font-size: 40px; font-family: 'CoreDream7'; padding: 0 0 60px 0;}
.main .contact .inbox .tit span{ position: relative; z-index: 200;}
.main .contact .inbox .tit .roll{ animation:roll 4s infinite; position: absolute; top:-100px; left: -100px; width:252px; height: 252px; background: url('../img/main_roll_contact.png'); transform:rotate(0deg);}
.main .contact .inbox .list{text-align: center;}
.main .contact .inbox .list ul{ display: inline-table; margin: 0 30px 0 30px; cursor:pointer;}

@keyframes roll {
     0%{transform:rotate(0deg);}
     100%{ transform:rotate(360deg);}
}


.location{ padding: 80px 0 100px 0;}
.location .inbox{ position: relative; width:1400px; margin: 0 auto;}
.location .inbox .tit{ position: relative; font-size: 40px; font-family: 'CoreDream7'; padding: 0 0 60px 0;}
.location .inbox .box{ position: relative; height: 640px; overflow: hidden;}
.location .inbox .box .map{ position: absolute; top:0px; left: 0px; width:825px; height: 640px; opacity: 0;}
.location .inbox .box .map iframe{ width:100%; height: 100%;}
.location .inbox .box .info{ position: absolute; top:0px; right: 0px; width:490px; font-size: 14px; color: #555; opacity: 0;}
.location .inbox .box .info .name{ font-size: 26px; font-family: 'CoreDream7'; letter-spacing: -2px; padding: 0 0 20px 0; color: #000;}
.location .inbox .box .info .tel{ padding: 10px 0 5px 0;}
.location .inbox .box .info .tel span{ color: #000; font-family: 'CoreDream7'; margin-right: 3px;}
.location .inbox .box .info .tel span.f{ margin-left: 20px;}
.location .inbox .box .info .bus{ padding: 60px 0 0 0;}
.location .inbox .box .info .bus .stit{ line-height: 51px; font-size: 18px; font-family: 'CoreDream7'; color: #000; margin-bottom: 15px;}
.location .inbox .box .info .bus .stit img{ margin-right: 10px;}
.location .inbox .box .info .bus .list dt{ position: relative; padding: 0 0 0 70px; line-height: 24px; margin-bottom: 10px;}
.location .inbox .box .info .bus .list dt div{ position:absolute; top:0px; left: 0px; width:60px; height: 24px; line-height: 24px; border-radius: 24px; text-align: center; color: #fff; background-color: #444; font-size: 12px;}
.location .inbox .box .info .bus .list dt div.g{ background-color: #1c981b;}
.location .inbox .box .info .bus .list dt div.r{ background-color: #c43f3a;}
.location .inbox .box .info .bus .list dt div.b{ background-color: #197ac7;}
.location .inbox .box .info .bus .list dt div.l{ background-color: #13af87;}
.location .inbox .box .info .subway{ padding: 40px 0 0 0;}
.location .inbox .box .info .subway .stit{ line-height: 51px; font-size: 18px; font-family: 'CoreDream7'; color: #000; margin-bottom: 15px;}
.location .inbox .box .info .subway .stit img{ margin-right: 10px;}
.location .inbox .box .info .subway .list dt{ position: relative; padding: 0 0 0 40px; line-height: 24px; margin-bottom: 10px;}
.location .inbox .box .info .subway .list dt div{ position:absolute; top:0px; left: 5px; width:24px; height: 24px; line-height: 24px; border-radius: 24px; text-align: center; color: #fff; background-color: #444; font-size: 12px;}
.location .inbox .box .info .subway .list dt div.l2{ background-color: #1c981b;}
.location .inbox .box .info .subway .list dt div.l7{ background-color: #5d6519;}

.location.active .inbox .box .map{ animation:loc01 1s forwards;}
@keyframes loc01 {
     0%{ opacity: 0; left: -100%;}
     100%{ opacity: 1; left: 0px;}
}
.location.active .inbox .box .info{ animation:loc02 1s forwards;}
@keyframes loc02 {
     0%{ opacity: 0; right: -100%;}
     100%{ opacity: 1; right: 0px;}
}

@media screen and (max-width:680px){

     .main{ position: relative;}
     .main .video{ position: relative; height: 600px; overflow: hidden;}
     .main .video .txt{ position: absolute; top:150px; left: 0px; width:100%; color: #fff; font-size: 54px; font-family: 'CoreDream1'; letter-spacing: -5px; line-height: 64px; z-index: 1000; text-align: center;}
     .main .video .txt div{ display: block; margin-left: 0px;}
     .main .video .txt span{ font-family: 'CoreDream7'; }
     .main .video .mask{ position: absolute; width:100%; bottom: 0px; left: 0px;}
     .main .video .mask img{ width:100%;}

     .main .video .mask{ animation:mainmask 1.5s forwards;}
     @keyframes mainmask {
          0%{ opacity:0; left:100%;}
          100%{ opacity:1; left:0px;}
     }
     .main .video .txt{ animation:maintxt 2s forwards;}
     @keyframes maintxt {
          0%{ opacity:0; top:-300px;}
          60%{ opacity:0; top:-300px;}
          100%{ opacity:1; top:150px;}
     }

     .main .solution{ background-color: #000; color: #fff; padding: 360px 0 80px 0;}
     .main .solution .inbox{ position: relative; width:100%; margin: 0 auto; height: auto; text-align: center; font-size: 30px; line-height: 34px; letter-spacing: -2px; font-family: 'CoreDream1';}
     .main .solution .inbox .txt1{ position: absolute; top:-250px; left: 0px; width:100%;}
     .main .solution .inbox .txt1 span{ letter-spacing: -1px; font-family: 'CoreDream7'; font-size: 40px; color: #c40006;}
     .main .solution .inbox .txt1 img{ height: 30px; vertical-align: middle; margin: 0 0 12px 0;}
     .main .solution .inbox .txt1 div{ display:block; margin-left: 4px;}
     .main .solution .inbox .txt2{ position: absolute; top:-170px; left: 0px; width:100%; font-size: 26px;}
     .main .solution .inbox .txt2 span{ font-family: 'CoreDream7';}
     .main .solution .inbox .txt2 div{ display: block; margin-left: 4px;}
     .main .solution .inbox .box{ position:relative; top:0px; width:300px; height: 200px; margin: 0 auto; margin-bottom: 40px; border-radius: 0px; overflow: hidden; cursor: pointer;}
     .main .solution .inbox .box .tit{ position: absolute; top:20px; left: 20px; font-size: 20px; letter-spacing: -2px; font-family:'CoreDream5'; z-index: 200; text-shadow: #000 1px 0 10px;}
     .main .solution .inbox .box .btn{ position: absolute; bottom: 20px; right: 20px; width:39px; height: 39px; background: url('/sub/img/btn_arw.png'); background-size: contain; z-index: 200;}
     .main .solution .inbox .box .mask{ position:absolute; top:0px; left: 0px; width:100%; height: 100%; background-color: #000; opacity: 0; z-index: 100;}
     .main .solution .inbox .box.b1{left:0px;}
     .main .solution .inbox .box.b2{left:0px;}
     .main .solution .inbox .box.b3{left:0px;}
     .main .solution .inbox .box:hover{ animation:sol01 1s forwards;}
     .main .solution .inbox .box:hover .tit{ animation:sol02 0.5s forwards;}
     .main .solution .inbox .box:hover .btn{ animation:sol03 0.5s forwards;}
     .main .solution .inbox .box:hover .mask{ animation:sol04 1s forwards;}

     @keyframes sol01 {
          0%{ border-radius: 0px;}
          100%{ border-radius: 434px;}
     }
     @keyframes sol02 {
          0%{ top:20px; left: 20px; transform: translate(0%, 0%);}
          100%{ top:40%; left: 50%; transform: translate(-50%, -50%);}
     }
     @keyframes sol03 {
          0%{ bottom:20px; right: 20px;}
          100%{ bottom:calc(50% - 30px); right: calc(50% - 20px);}
     }
     @keyframes sol04 {
          0%{ opacity: 0;}
          100%{ opacity: 0.3;}
     }

     .main .marketing .inbox{ position: relative; width:100%; margin: 0 auto; padding: 50px 0 80px 0;}
     .main .marketing .inbox .txt{ position: absolute; top:150px; left: 0px; width:100%; text-align: center; font-size: 26px; line-height: 32px; letter-spacing: -2px; font-family: 'CoreDream3';}
     .main .marketing .inbox .txt .b{ font-family: 'CoreDream7';}
     .main .marketing .inbox .txt .r{ font-family: 'CoreDream7'; letter-spacing: -1px; color: #c40006; font-size: 36px;}
     .main .marketing .inbox .txt .r img{ height: 30px; vertical-align: middle; margin: 0 0 8px 0;}
     .main .marketing .inbox .bg{ position: absolute; top:50px; left: 20px; width:calc(100% - 40px); opacity: 0.5;}
     .main .marketing .inbox .bg img{ width:100%;}
     .main .marketing .inbox .banner{ position: relative; padding: 250px 0 0 0; z-index: 100; display: flex; align-content: stretch;  flex-wrap:wrap;}
     .main .marketing .inbox .banner .lot{ position: relative; width:calc(50% - 15px); margin-left: 10px;}
     .main .marketing .inbox .banner .lot .box{ position: relative; margin-bottom: 10px; border-radius: 10px;}
     .main .marketing .inbox .banner .lot .box .img{ width:100%;}
     .main .marketing .inbox .banner .lot .box .img img{ width:100%;}
     .main .marketing .inbox .banner .box .tit_k{ position: absolute; top:calc(50% - 20px); left: 0px; width:100%; color: #fff; text-align: center; z-index: 200; font-size: 16px; font-family: 'CoreDream5'; letter-spacing: -1px;}
     .main .marketing .inbox .banner .box .tit_e{ position: absolute; top:50%; left: 0px; width:100%; color: #fff; text-align: center; z-index: 200; font-size: 10px; letter-spacing: 1px; opacity: 0.7;}
     .main .marketing .inbox .banner .box.search{ top:0px; left: 0px;}
     .main .marketing .inbox .banner .box.display{ top:0px; left: 0px;}
     .main .marketing .inbox .banner .box.viral{ top:0px; left: 0px;}
     .main .marketing .inbox .banner .box.youtube{ top:0px; left: 0px;}
     .main .marketing .inbox .banner .box.cpa{ top:0px; left: 0px;}
     .main .marketing .inbox .banner .box.sns{ top:0px; left: 0px;}

     .main .contact{ padding: 60px 0 100px 0;}
     .main .contact .inbox{ position: relative; width:100%; margin: 0 auto;}
     .main .contact .inbox .tit{ position: relative; font-size: 26px; font-family: 'CoreDream7'; padding: 0 0 60px 0; width:100%; text-align: center;}
     .main .contact .inbox .tit span{ position: relative; z-index: 200;}
     .main .contact .inbox .tit .roll{ animation:roll 4s infinite; position: absolute; top:-110px; left:calc(50% - 126px); width:252px; height: 252px; background: url('/sub/img/main_roll_contact.png'); transform:rotate(0deg);}
     .main .contact .inbox .list{text-align: center; padding: 60px 0 0 0;}
     .main .contact .inbox .list ul{ display: block; float: left; width:calc(50% - 30px); margin: 0 0 20px 20px; cursor:pointer;}
     .main .contact .inbox .list ul img{ width:100%;}

     .location{ padding: 0px 0 100px 0;}
     .location .inbox{ position: relative; width:100%; margin: 0 auto;}
     .location .inbox .tit{ position: relative; font-size: 26px; font-family: 'CoreDream7'; padding: 0 0 60px 0; text-align: center;}
     .location .inbox .box{ position: relative; height: auto; overflow:auto;}
     .location .inbox .box .map{ position: relative; top:0px; left: 0px; width:100%; height: 300px; opacity: 0;}
     .location .inbox .box .map iframe{ width:100%; height: 100%;}
     .location .inbox .box .info{ position: relative; top:0px; right: 0px; width:calc(100% - 30px); margin-left: 15px; font-size: 13px; color: #555; margin-top: 40px; opacity: 0;}
     .location .inbox .box .info .name{ font-size: 20px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 0 0 10px 0; color: #000;}
     .location .inbox .box .info .tel{ padding: 5px 0 5px 0;}
     .location .inbox .box .info .tel span{ color: #000; font-family: 'CoreDream7'; margin-right: 3px;}
     .location .inbox .box .info .tel span.f{ margin-left: 20px;}
     .location .inbox .box .info .bus{ padding: 30px 0 0 0;}
     .location .inbox .box .info .bus .stit{ line-height: 51px; font-size: 18px; font-family: 'CoreDream7'; color: #000; margin-bottom: 15px;}
     .location .inbox .box .info .bus .stit img{ margin-right: 10px;}
     .location .inbox .box .info .bus .list dt{ position: relative; padding: 0 0 0 70px; line-height: 24px; margin-bottom: 10px;}
     .location .inbox .box .info .bus .list dt div{ position:absolute; top:0px; left: 0px; width:60px; height: 24px; line-height: 24px; border-radius: 24px; text-align: center; color: #fff; background-color: #444; font-size: 12px;}
     .location .inbox .box .info .bus .list dt div.g{ background-color: #1c981b;}
     .location .inbox .box .info .bus .list dt div.r{ background-color: #c43f3a;}
     .location .inbox .box .info .bus .list dt div.b{ background-color: #197ac7;}
     .location .inbox .box .info .bus .list dt div.l{ background-color: #13af87;}
     .location .inbox .box .info .subway{ padding: 40px 0 0 0;}
     .location .inbox .box .info .subway .stit{ line-height: 51px; font-size: 18px; font-family: 'CoreDream7'; color: #000; margin-bottom: 15px;}
     .location .inbox .box .info .subway .stit img{ margin-right: 10px;}
     .location .inbox .box .info .subway .list dt{ position: relative; padding: 0 0 0 40px; line-height: 24px; margin-bottom: 10px;}
     .location .inbox .box .info .subway .list dt div{ position:absolute; top:0px; left: 5px; width:24px; height: 24px; line-height: 24px; border-radius: 24px; text-align: center; color: #fff; background-color: #444; font-size: 12px;}
     .location .inbox .box .info .subway .list dt div.l2{ background-color: #1c981b;}
     .location .inbox .box .info .subway .list dt div.l7{ background-color: #5d6519;}
     

     .location.active .inbox .box .map{ animation:loc01 1s forwards;}
     @keyframes loc01 {
          0%{ opacity: 1; left: 0px;}
          100%{ opacity: 1; left: 0px;}
     }
     .location.active .inbox .box .info{ animation:loc02 1s forwards;}
     @keyframes loc02 {
          0%{ opacity: 1; right: 0px;}
          100%{ opacity: 1; right: 0px;}
     }

}


.sub_top{ height: 320px;}
.sub_top.marketing_keyword{ background: url('/sub/img/bg_subtop_keyword.png');}
.sub_top.marketing_display{ background: url('/sub/img/bg_subtop_display.png');}
.sub_top.marketing_sns{ background: url('/sub/img/bg_sns_marketing.png');}
.sub_top.marketing_cpa{ background: url('/sub/img/bg_subtop_cpa.png');}
.sub_top.marketing_youtube{ background: url('/sub/img/bg_youtube_marketing.png');}
.sub_top.marketing_viral{ background: url('/sub/img/bg_viral_marketing.png');}
.sub_top.marketing_hospital{ background: url('/sub/img/bg_hospital_marketing.png');}
.sub_top.marketing_portfolio{ background: url('/sub/img/bg_portfolio_marketing.png');}
.sub_top.dev{ background: url('/sub/img/bg_subtop_dev.png');}
.sub_top.solution{ background: url('/sub/img/bg_subtop_solution.png');}
.sub_top.design{ background: url('/sub/img/bg_subtop_design.png');}
.sub_top.marketing_wisemob{ background: url('/sub/img/bg_subtop_wisemob.png');}

.sub_top .inbox{ position: relative; width:1400px; margin: 0 auto; height: 320px;}
.sub_top .inbox .txt{ animation:subtop01 2s forwards; position:absolute; bottom: -5px; left: 0px; font-size: 120px; line-height: 110px; font-family: 'CoreDream7'; color: rgba(255,255,255,0.4);}
.sub_top .inbox .btn{  position: absolute; bottom: 30px; right: 0px; height: 50px; line-height: 50px; border-radius: 50px; border: solid 1px rgba(255,255,255,0.5); font-size: 14px; letter-spacing: -1px; padding:0 60px 0 30px; color: #fff; z-index: 200; cursor: pointer;}
.sub_top .inbox .btn::after{ content: ''; position: absolute; top:12px; right: 15px; width:24px; height: 24px; background: url('/sub/img/btn_arw.png'); background-size: contain;}
@keyframes subtop01 {
     0%{ left: -100%;}
     100%{ left: 0px;}
}
.sub_top .inbox .btn:hover{ background-color: #c40006; border: solid 1px #c40006;}

.sub_default{ width:1400px; margin: 0 auto; padding: 80px 0 0 0;}
.sub_default .sub_tit{ position: relative; font-size: 50px; line-height: 54px; font-family: 'CoreDream7'; letter-spacing: -2px; color: #000; padding: 0 0 40px 0;}
.sub_default .sub_tit::after{ content: ''; position: absolute; bottom: 25px; left: 0px; width:46px; height: 5px; background-color: #c40006;}
.sub_default .sub_tit span{ font-size: 30px; font-family: 'CoreDream3'; color: #c40006; letter-spacing: 0px;}
.sub_default .sub_txt{ font-size: 30px; line-height: 40px; font-family: 'CoreDream3'; letter-spacing: -2px; color: #666; padding: 30px 0 0 0;}
.sub_default .sub_txt span.b{font-family: 'CoreDream7'; color: #000;}
.sub_default .sub_tit .btn{ display: inline-table; font-size: 14px; height: 40px; line-height: 40px; border-radius: 40px; background-color: #c40006; color: #fff; margin: 0 0 0 30px; padding: 0 20px 0 20px; cursor: pointer;}
.sub_tit01{font-size: 24px !important;}
.sub_tit02{font-size: 34px !important;}

.tab{ border-bottom: solid 1px #e1e1e1; margin: 80px 0 0 0; height: 60px; overflow-y: hidden;}
.tab .inbox{ width:1400px; margin: 0 auto;}
.tab .swiper-slide{ position: relative; display: inline-table; height: 60px; line-height: 60px; font-size: 19px; font-family: 'CoreDream7'; letter-spacing: -1px; text-align: center; color: #888; cursor: pointer;}
.tab .swiper-slide.on{ color: #c40006;}
.tab .swiper-slide.on::after{ content: ''; position: absolute; bottom: 0px; left: 0px; width:100%; height: 5px; background-color: #c40006;}
.tab .swiper-slide:hover{ color: #c40006;}

.tab.sns{ margin: 0px 0 0 0;}


@media screen and (max-width:680px){

     .sub_top{ height: 200px;}
     .sub_top.marketing_keyword{ background: url('/sub/img/bg_subtop_keyword.png'); background-size: cover; background-position: -200px;}
     .sub_top.marketing_display{ background: url('/sub/img/bg_subtop_display.png'); background-size: cover; background-position: -300px;}
     .sub_top.marketing_sns{ background: url('/sub/img/bg_subtop_sns.png'); background-size: cover; background-position: -550px;}
     .sub_top.marketing_cpa{ background: url('/sub/img/bg_subtop_cpa.png'); background-size: cover; background-position: -300px;}
     .sub_top.marketing_youtube{ background: url('/sub/img/bg_subtop_youtube.png'); background-size: cover; background-position: -300px;}
     .sub_top.marketing_viral{ background: url('/sub/img/bg_subtop_viral.png'); background-size: cover; background-position: -300px;}
     .sub_top.dev{ background: url('/sub/img/bg_subtop_dev.png'); background-size: cover; background-position: -300px;}
     .sub_top.solution{ background: url('/sub/img/bg_subtop_solution.png'); background-size: cover; background-position: -100px;}
     .sub_top.design{ background: url('/sub/img/bg_subtop_design.png'); background-size: cover; background-position: -400px;}
     .sub_top.marketing_wisemob{ background: url('/sub/img/bg_subtop_wisemob.png'); background-size: cover; background-position: -600px;}

     .sub_top .inbox{ position: relative; width:100%; margin: 0 auto; height: 200px;}
     .sub_top .inbox .txt{ animation:subtop01 2s forwards; position:absolute; bottom: 70px; left: 0px; font-size: 54px; line-height: 50px; font-family: 'CoreDream7'; color: rgba(255,255,255,0.4);}
     .sub_top.dev .inbox .txt{ font-size: 44px; line-height: 44px; bottom: 20px;}
     .sub_top.solution .inbox .txt{ font-size: 44px; line-height: 44px; bottom: 20px;}
     .sub_top.design .inbox .txt{ font-size: 44px; line-height: 44px; bottom: 20px;}
     .sub_top .inbox .btn{  position: absolute; bottom: 20px; right: 2px; height: 40px; line-height: 40px; border-radius: 40px; border: solid 1px rgba(255,255,255,0.5); font-size: 12px; letter-spacing: -1px; padding:0 50px 0 15px; color: #fff; z-index: 200; cursor: pointer;}
     .sub_top .inbox .btn::after{ content: ''; position: absolute; top:8px; right: 15px; width:24px; height: 24px; background: url('/sub/img/btn_arw.png'); background-size: contain;}
     @keyframes subtop01 {
          0%{ left: -100%;}
          100%{ left: 20px;}
     }
     .sub_top .inbox .btn:hover{ background-color: #c40006; border: solid 1px #c40006;}

     .sub_default{ width:100%; margin: 0 auto; padding: 30px 0 0 0;}
     .sub_default .sub_tit{ position: relative; font-size: 30px; line-height: 34px; font-family: 'CoreDream7'; letter-spacing: -2px; color: #000; padding: 0 15px 40px 15px;}
     .sub_default .sub_tit::after{ content: ''; position: absolute; bottom: 25px; left: 15px; width:46px; height: 5px; background-color: #c40006;}
     .sub_default .sub_tit span{ font-size: 16px; font-family: 'CoreDream3'; color: #c40006; letter-spacing: 0px;}
     .sub_default .sub_txt{ font-size: 18px; line-height: 24px; font-family: 'CoreDream3'; letter-spacing: -1px; color: #666; padding: 0 15px 0 15px;}
     .sub_default .sub_txt span.b{font-family: 'CoreDream7'; color: #000;}
     .sub_default .sub_txt .br{ display: inline-table;}
     .sub_default .sub_tit .btn{ position: absolute; top:0px; right: 15px; display: inline-table; font-size: 12px; height: 30px; line-height: 30px; letter-spacing: -0.5px; border-radius: 30px; background-color: #c40006; color: #fff; margin: 0 0 0 30px; padding: 0 15px 0 15px; cursor: pointer;}

     .sub_default .sub_tit.solution{ position: relative; font-size: 26px; line-height: 30px; font-family: 'CoreDream7'; letter-spacing: -2px; color: #000; padding: 0 15px 40px 15px;}

     .tab{ border-bottom: solid 1px #e1e1e1; margin: 30px 0 0 0; height: 50px; overflow-y: hidden;}
     .tab .inbox{ width:100%; margin: 0 auto;}
     .tab .swiper-slide{ position: relative; display: inline-table; height: 50px; line-height: 50px; font-size: 15px; font-family: 'CoreDream7'; letter-spacing: -1px; color: #888; text-align: center; cursor: pointer;}
     .tab .swiper-slide.on{ color: #c40006;}
     .tab .swiper-slide.on::after{ content: ''; position: absolute; bottom: 0px; left: 0px; width:100%; height: 5px; background-color: #c40006;}
     .tab .swiper-slide:hover{ color: #c40006;}

}

.mt_search{ background-color: #f8f8f8;}
.mt_search .txt{ width:1400px; margin: 0 auto; padding:  80px 0 80px 0; font-size: 20px; letter-spacing: -1px; color: #333; text-align: center;}
.mt_search .img{ padding: 0px 0 100px 0;}
.mt_search .img .inbox{ width:1400px; margin: 0 auto; display: flex; text-align: center;}
.mt_search .img .inbox ul li:nth-child(1){ color: #c40006; font-size: 18px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 0 0 20px 0;}
.mt_search.b1 .img .inbox ul{ flex-grow: 4;}
.mt_search.b2 .img .inbox ul{ flex-grow: 3;}
.mt_search.b3 .img .inbox ul{ flex-grow: 2;}
.mt_search .img .inbox ul img{ width:80%;}
.mt_search.b3 .img .inbox ul img{ width:40%;}

.mt_display{ background-color: #f8f8f8;}
.mt_display .txt{ width:1400px; margin: 0 auto; padding:  80px 0 80px 0; font-size: 20px; letter-spacing: -1px; color: #333; text-align: center;}
.mt_display .img{ padding: 0px 0 100px 0;}
.mt_display .img .inbox{ width:1400px; margin: 0 auto; display: flex; text-align: center;}
.mt_display .img .inbox ul li:nth-child(1){ color: #c40006; font-size: 20px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 0 0 0 0;}
.mt_display .img .inbox ul li:nth-child(2){ font-size: 15px; letter-spacing: -1px; padding: 0 0 20px 0; color: #888;}
.mt_display.b1 .img .inbox ul{ flex-grow: 3;}
.mt_display.b2 .img .inbox ul{ flex-grow: 2;}
.mt_display.b3 .img .inbox ul{ flex-grow: 2;}
.mt_display.b4 .img .inbox ul{ flex-grow: 2;}
.mt_display.b5 .img .inbox ul{ flex-grow: 2;}

.temptxt{ text-align: center;}
.temptxt ul:nth-child(1){ color: #c40006; font-size: 20px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 0 0 0 0;}
.temptxt ul:nth-child(2){ font-size: 15px; letter-spacing: -1px; padding: 0 0 20px 0; color: #888;}

.sns_top{ position: relative; width:986px; margin: 0 auto; margin-top: 50px;}
.sns_top .pop{ position: absolute;}
.sns_top .pop.p1{ top:70px; left: 20px;}
.sns_top .pop.p2{ top:170px; right: 0px;}
.sns_top .pop.p3{ top:310px; left: 60px;}
.sns_top .pop.p4{ top:450px; right: 20px;}

.mt_sns{ background-color: #f8f8f8;}
.mt_sns .txt{ width:1400px; margin: 0 auto; padding:  80px 0 80px 0; font-size: 20px; letter-spacing: -1px; color: #333; text-align: center;}
.mt_sns .img{ padding: 0px 0 100px 0;}
.mt_sns .img .inbox{ width:1400px; margin: 0 auto; display: flex; text-align: center;}
.mt_sns .img .inbox.bot{ margin-top: 80px;}
.mt_sns .img .inbox ul li:nth-child(2){ color: #000; font-size: 18px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 20px 0 0 0;}
.mt_sns .img .inbox ul li:nth-child(3){ font-size: 15px; letter-spacing: -1px; padding: 0 0 0 0; color: #888;}
.mt_sns .img .inbox ul li.btit{ color: #c40006; font-size: 18px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 20px 0 0 0;}
.mt_sns .img .inbox ul{ flex-grow: 4;}

.cpa_wrap{ position: relative; width:1400px; margin: 0 auto;}
.cpa_wrap .step1{ display: flex; text-align: center; margin: 260px 0 0 0;}
.cpa_wrap .step1 ul{ position: relative; flex-grow: 5;}
.cpa_wrap .step1 ul .point{ position: absolute; top:-180px; left: 60px;}
.cpa_wrap .txt{ text-align: center; padding: 100px 0 100px 0; font-size: 26px; letter-spacing: -2px; font-family: 'CoreDream3';}
.cpa_wrap .txt span{ font-family: 'CoreDream7';}
.cpa_wrap .step2{ display: flex; text-align: center; margin: 0px 0 100px 0;}
.cpa_wrap .step2 ul{ position: relative; flex-grow: 4;}
.cpa_wrap .step2 ul li:nth-child(1){ padding: 0 0 15px 0; font-family: 'CoreDream7'; font-size: 18px; letter-spacing: -1px;}

.youtube_wrap .imgbox{ position: relative; margin-top: 200px; background-color: #fc5e63;}
.youtube_wrap .imgbox .pop{ position: relative; width:1400px; margin: 0 auto;}
.youtube_wrap .imgbox .pop img{ position: absolute; z-index: 100;}
.youtube_wrap .imgbox .pop .pop1{ top:80px; left: 0px;}
.youtube_wrap .imgbox .pop .pop2{ top:150px; right: 0px;}
.youtube_wrap .imgbox .pop .pop3{ top:300px; left: 0px;}
.youtube_wrap .imgbox .pop .pop4{ top:350px; right: 0px;}
.youtube_wrap .imgbox .img{ position: relative; width:1000px; height: 550px; margin: 0 auto;}
.youtube_wrap .imgbox .img img{ position: absolute; bottom:40px; left: 0px; width:1000px;}
.youtube_wrap .ex{ width:1400px; margin: 0 auto; display: flex; text-align: center; padding: 80px 0 100px 0;}
.youtube_wrap .ex ul{ position: relative; flex-grow: 3;}
.youtube_wrap .ex ul li:nth-child(2){ padding: 15px 0 0 0;font-family: 'CoreDream7'; font-size: 18px; letter-spacing: -1px;}

.viral_wrap{ width:1400px; margin: 0 auto; display: flex; padding: 80px 0 100px 0;}
.viral_wrap ul{ flex-grow: 4; text-align: center; width:25%;}
.viral_wrap ul li:nth-child(2){font-family: 'CoreDream7'; font-size: 18px; letter-spacing: -1px; padding: 20px 0 15px 0;}
.viral_wrap ul li:nth-child(3){ font-size: 15px; padding: 0 35px 0 35px;}

@media screen and (max-width:680px){
     .mt_search .txt{ width:calc(100% - 30px); margin: 0 auto; padding: 30px 15px 30px 15px; font-size: 13px; letter-spacing: -1px; color: #333;}
     .mt_search .img{ padding: 0px 0 40px 0;}
     .mt_search .img .inbox{ width:100%; margin: 0 auto; display: flex; flex-wrap: wrap; text-align: center;}
     .mt_search .img .inbox ul li:nth-child(1){ color: #c40006; font-size: 16px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 0 0 10px 0;}
     .mt_search .img .inbox ul img{ width:100%;}
     .mt_search.b1 .img .inbox ul{ flex-grow: 2; width:calc(50% - 40px); margin: 0 20px 30px 20px;}
     .mt_search.b2 .img .inbox ul{ flex-grow: 2; width:calc(50% - 40px); margin: 0 20px 30px 20px;}
     .mt_search.b3 .img .inbox ul{ flex-grow: 2; width:calc(50% - 40px); margin: 0 20px 30px 20px;}
     .mt_search.b3 .img .inbox ul img{ width:100%;}

     .mt_display .txt{  width:calc(100% - 30px); margin: 0 auto; padding: 30px 15px 30px 15px; font-size: 13px; letter-spacing: -1px; color: #333; text-align: center;}
     .mt_display .img{ padding: 0px 0 40px 0;}
     .mt_display .img .inbox{ width:100%; margin: 0 auto; display: flex; flex-wrap: wrap; text-align: center;}
     .mt_display .img .inbox ul li:nth-child(1){ color: #c40006; font-size: 16px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 0 0 0 0;}
     .mt_display .img .inbox ul li:nth-child(2){ font-size: 12px; letter-spacing: -1px; padding: 5px 0 20px 0; color: #888; min-height: 30px;}
     .mt_display .img .inbox ul img{ width:100%;}
     .mt_display.b1 .img .inbox ul{ flex-grow: 2; width:calc(50% - 40px); margin: 0 20px 30px 20px;}
     .mt_display.b2 .img .inbox ul{ flex-grow: 1; width:calc(80% - 0px); margin: 0 10% 30px 10%;}
     .mt_display.b3 .img .inbox ul{ flex-grow: 1; width:calc(80% - 0px); margin: 0 10% 30px 10%;}
     .mt_display.b4 .img .inbox ul{ flex-grow: 2; width:calc(50% - 40px); margin: 0 20px 30px 20px;}
     .mt_display.b5 .img .inbox ul{ flex-grow: 1; width:calc(80% - 0px); margin: 0 10% 30px 10%;}

     .sns_top{ position: relative; width:100%; margin: 0 auto; margin-top: 30px; text-align: center;}
     .sns_top .pop{ position:relative; max-width:90%;}
     .sns_top .bg{ width:100%;}
     .sns_top .pop.p1{ top:0px; left: 0px;}
     .sns_top .pop.p2{ top:0px; right: 0px;}
     .sns_top .pop.p3{ top:0px; left: 0px; margin-top: 30px;}
     .sns_top .pop.p4{ top:0px; right: 0px; margin-bottom: 20px;}

     .mt_sns{ background-color: #f8f8f8;}
     .mt_sns .txt{ width:calc(100% - 30px); margin: 0 auto; padding: 30px 15px 30px 15px; font-size: 13px; letter-spacing: -1px; color: #333; text-align: center;}
     .mt_sns .img{ padding: 0px 0 40px 0;}
     .mt_sns .img .inbox{ width:100%; margin: 0 auto; display: flex; flex-wrap: wrap; text-align: center;}
     .mt_sns .img .inbox.bot{ margin-top: 30px;}
     .mt_sns .img .inbox ul img{ width:100%;}
     .mt_sns .img .inbox ul li:nth-child(2){ color: #000; font-size: 16px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 20px 0 0 0;}
     .mt_sns .img .inbox ul li:nth-child(3){ font-size: 12px; letter-spacing: -1px; padding: 0 0 0 0; color: #888;}
     .mt_sns .img .inbox ul li.btit{ color: #c40006; font-size: 16px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 20px 0 0 0;}
     .mt_sns .img .inbox ul{ flex-grow: 2; width:calc(50% - 40px); margin: 0 20px 30px 20px;}

     .cpa_wrap{ position: relative; width:100%; margin: 0 auto;}
     .cpa_wrap .step1{ display: flex; flex-wrap: wrap; text-align: center; margin: 50px 0 0 0;}
     .cpa_wrap .step1 ul{ position: relative; flex-grow: 2;}
     .cpa_wrap .step1 ul img{ width:100%;}
     .cpa_wrap .step1 ul .point{ position: absolute; top:-100px; left: 40px; width:200px;}
     .cpa_wrap .step1 ul .point img{ width:200px;}
     .cpa_wrap .step1 ul{ flex-grow: 2; width:calc(50% - 40px); margin: 0 20px 30px 20px;}
     .cpa_wrap .step1 ul:nth-child(3){ margin: 80px 20px 30px 20px;}
     .cpa_wrap .step1 ul:nth-child(4){ margin: 80px 20px 30px 20px;}
     .cpa_wrap .txt{ text-align: center; padding: 50px 20px 50px 20px; font-size: 18px; letter-spacing: -1px; font-family: 'CoreDream3';}
     .cpa_wrap .txt span{ font-family: 'CoreDream7';}
     .cpa_wrap .step2{ display: flex; flex-wrap: wrap; text-align: center; margin: 0px 0 50px 0;}
     .cpa_wrap .step2 ul{ position: relative; flex-grow: 2;}
     .cpa_wrap .step2 ul li:nth-child(1){ padding: 0 0 8px 0; font-family: 'CoreDream5'; font-size: 14px; letter-spacing: -1px;}
     .cpa_wrap .step2 ul{ flex-grow: 2; width:calc(50% - 40px); margin: 0 20px 30px 20px;}
     .cpa_wrap .step2 ul img{ width:100%;}

     .youtube_wrap .imgbox{ position: relative; margin-top: 50px; background-color: #fc5e63;}
     .youtube_wrap .imgbox .pop{ position: relative; width:100%; margin: 0 auto; text-align: center; padding: 40px 0 0 0;}
     .youtube_wrap .imgbox .pop img{ position: relative; z-index: 100; width:90%;}
     .youtube_wrap .imgbox .pop .pop1{ top:0px; left: 0px;}
     .youtube_wrap .imgbox .pop .pop2{ top:0px; right: 0px;}
     .youtube_wrap .imgbox .pop .pop3{ top:0px; left: 0px;}
     .youtube_wrap .imgbox .pop .pop4{ top:0px; right: 0px;}
     .youtube_wrap .imgbox .img{ position: relative; width:100%; height: auto; margin: 0 auto; text-align: center; padding: 0 0 50px 0;}
     .youtube_wrap .imgbox .img img{ position: relative; bottom:0px; left: 0px; width:90%;}
     .youtube_wrap .ex{ width:100%; margin: 0 auto; display: flex; flex-wrap: wrap; text-align: center; padding: 80px 0 50px 0;}
     .youtube_wrap .ex ul{ position: relative; flex-grow: 1; width:calc(100% - 40px); margin: 0 20px 40px 20px;}
     .youtube_wrap .ex ul img{ width:100%;}
     .youtube_wrap .ex ul li:nth-child(2){ padding: 15px 0 0 0; font-family: 'CoreDream7'; font-size: 14px; letter-spacing: -1px;}

     .viral_wrap{ width:100%; margin: 0 auto; display: flex; flex-wrap: wrap; padding: 50px 0 50px 0;}
     .viral_wrap ul{ flex-grow: 1; text-align: center; width:100%; margin-bottom: 80px;}
     .viral_wrap ul img{ width:180px;}
     .viral_wrap ul li:nth-child(2){font-family: 'CoreDream7'; font-size: 16px; letter-spacing: -1px; padding: 15px 0 10px 0;}
     .viral_wrap ul li:nth-child(3){ font-size: 13px; padding: 0 35px 0 35px;}

}

.dev_wrap{ width:1400px; margin: 0 auto; margin-top: 80px; padding: 0 0 50px 0;}
.dev_wrap ul{ position: relative; margin-bottom: 80px; height: 492px;}
.dev_wrap ul li{ position: absolute;}
.dev_wrap ul li.img{ top:0px; left: 0px;}
.dev_wrap ul li.txt{ position: absolute; top:0px; left: 50%; width:calc(50% - 60px); padding: 180px 30px 0 30px;}
.dev_wrap ul li.txt dt:nth-child(1){ font-size: 36px; font-family: 'CoreDream7'; padding: 0 0 15px 0;}
.dev_wrap ul li.txt dt:nth-child(2){ font-size: 26px; line-height: 30px; font-family: 'CoreDream3';color: #333;}
.dev_wrap ul li.txt dt:nth-child(2) div{ display: inline-table;}
.dev_wrap ul:nth-child(2) li.img{ left: auto; right: 0px;} 
.dev_wrap ul:nth-child(2) li.txt{ left: 0px;}

.sol_wrap{ width:1400px; margin: 0 auto; margin-top: 80px; padding: 0 0 50px 0;}
.sol_wrap .box1{ margin-bottom: 80px;}
.sol_wrap .box1 ul:nth-child(1) li:nth-child(1){ font-size: 36px; font-family: 'CoreDream7'; padding: 0 0 15px 0;}
.sol_wrap .box1 ul:nth-child(1) li:nth-child(2){ font-size: 18px; line-height: 22px; font-family: 'CoreDream3';color: #999; padding: 0 0 30px 0;}
.sol_wrap .box1 ul:nth-child(2){ position: relative;}
.sol_wrap .box1 ul:nth-child(2) img:nth-child(2){ position: absolute; top:0px; right: 0px;}

.sol_wrap .box2 ul{ position: relative; margin-bottom: 80px; height: 492px;}
.sol_wrap .box2 ul li{ position: absolute;}
.sol_wrap .box2 ul li.img{ top:0px; left: 0px;}
.sol_wrap .box2 ul li.txt{ position: absolute; top:0px; left: 50%; width:calc(50% - 60px); padding: 180px 30px 0 30px;}
.sol_wrap .box2 ul li.txt dt:nth-child(1){ font-size: 36px; font-family: 'CoreDream7'; padding: 0 0 15px 0;}
.sol_wrap .box2 ul li.txt dt:nth-child(2){ font-size: 18px; line-height: 22px; font-family: 'CoreDream3';color: #999;}
.sol_wrap .box2 ul li.txt dt:nth-child(2) div{ display: inline-table;}
.sol_wrap .box2 ul:nth-child(2) li.img{ left: auto; right: 0px;} 
.sol_wrap .box2 ul:nth-child(2) li.txt{ left: 0px;}

.design_wrap{ width:1400px; margin: 0 auto; margin-top: 80px; padding: 0 0 50px 0;}
.design_wrap ul{ position: relative; margin-bottom: 80px; height: 492px;}
.design_wrap ul li{ position: absolute;}
.design_wrap ul li.img{ top:0px; right: 0px;}
.design_wrap ul li.txt{ position: absolute; top:0px; left: 0px; width:calc(50% - 60px); padding: 150px 30px 0 30px;z-index: 1000; background-color: #fff;}
.design_wrap ul li.txt dt:nth-child(1){ font-size: 36px; font-family: 'CoreDream7'; padding: 0 0 15px 0; letter-spacing: -1px;}
.design_wrap ul li.txt dt:nth-child(2){ font-size: 26px; line-height: 30px; font-family: 'CoreDream3';color: #333;}
.design_wrap ul li.txt dt:nth-child(2) div{ display: inline-table;}
.design_wrap ul.right li.img{ left: 0px; right: auto;} 
.design_wrap ul.right li.txt{ right: 0px; left: auto;}

.design_wrap ul li.txt.t1{ font-size: 44px; line-height: 50px; font-family: 'CoreDream3'; letter-spacing: -2px; color: #666; padding: 150px 0 0 0;}
.design_wrap ul li.txt.t1 span{font-family: 'CoreDream7'; color: #000;}

.design_wrap .playbox{ position: relative; width:680px; margin: 0 auto; padding-top: 0px; padding-left: 0px;}
.design_wrap .playbox .framebox{ width:680px; height: 380px; background-color: #000;}
.design_wrap .playbox .thumb{ position:relative; top:0px; left: 0px; margin-top: 15px;}
.design_wrap .playbox .thumb dt{ float:left; width:calc(33.33333333333333% - 17px); border: solid 5px #eee; margin-bottom: 7.5px; cursor:pointer; margin-left: 10px;}
.design_wrap .playbox .thumb dt:nth-child(1){ margin-left: 0px;}
.design_wrap .playbox .thumb img{ width:100%; height: auto; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.6;}
.design_wrap .playbox .thumb dt.on{ border: solid 5px #fd3537;}
.design_wrap .playbox .thumb dt.on img{-webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); opacity: 1;}

.design_wrap ul li .slide{ background-color: #f8f8f8; width:680px; height: 492px; border-radius: 15px; text-align: center;}
.design_wrap ul li .slide .swiper { height: calc(100% - 20px);}
.design_wrap ul li .slide .swiper .swiper-wrapper{ padding: 100px 0 0 0;}
:root{--swiper-theme-color:#fd3537}
.swiper-button-prev{ left: 50px; color:#ccc;}
.swiper-button-next{ right: 50px; color:#ccc;}

@media screen and (max-width:680px){

     .dev_wrap{ width:100%; margin: 0 auto; margin-top: 50px; padding: 0 0 50px 0;}
     .dev_wrap ul{ position: relative; margin-bottom: 80px; height: auto;}
     .dev_wrap ul li{ position:relative;}
     .dev_wrap ul li.img{ top:0px; left: 0px;}
     .dev_wrap ul li img{ width:100%;}
     .dev_wrap ul li.txt{ position:relative; top:0px; left: 0px; width:calc(100% - 60px); padding: 30px 30px 0 30px;}
     .dev_wrap ul li.txt dt:nth-child(1){ font-size: 28px; font-family: 'CoreDream7'; padding: 0 0 10px 0;}
     .dev_wrap ul li.txt dt:nth-child(2){ font-size: 14px; line-height: 16px; font-family: 'CoreDream3';color: #999;}
     .dev_wrap ul li.txt dt:nth-child(2) div{ display: inline-table;}
     .dev_wrap ul:nth-child(2) li.img{ left: auto; right: 0px;} 
     .dev_wrap ul:nth-child(2) li.txt{ left: 0px;}

     .sol_wrap{ width:100%; margin: 0 auto; margin-top: 50px; padding: 0 0 50px 0;}
     .sol_wrap .box1{ margin-bottom: 80px;}
     .sol_wrap .box1 ul:nth-child(1){width:calc(100% - 60px); margin-left: 30px;}
     .sol_wrap .box1 ul:nth-child(1) li:nth-child(1){ font-size: 24px; font-family: 'CoreDream7'; padding: 0 0 10px 0;}
     .sol_wrap .box1 ul:nth-child(1) li:nth-child(2){ font-size: 14px; line-height: 16px; font-family: 'CoreDream3';color: #999; padding: 0 0 30px 0;}
     .sol_wrap .box1 ul:nth-child(2){ position: relative;}
     .sol_wrap .box1 ul:nth-child(2) img:nth-child(2){ position: relative; top:0px; right: 0px; margin-top: 30px;}
     .sol_wrap .box1 ul:nth-child(2) img{ width:calc(100% - 60px); margin-left: 30px;}

     .sol_wrap .box2 ul{ position: relative; margin-bottom: 80px; height: auto;}
     .sol_wrap .box2 ul li{ position: relative;}
     .sol_wrap .box2 ul li.img{ top:0px; left: 0px;}
     .sol_wrap .box2 ul li img{ width:calc(100% - 60px); margin-left: 30px;}
     .sol_wrap .box2 ul li.txt{ position: relative; top:0px; left: 0px; width:calc(100% - 60px); padding: 20px 30px 0 30px;}
     .sol_wrap .box2 ul li.txt dt:nth-child(1){ font-size: 24px; font-family: 'CoreDream7'; padding: 0 0 10px 0;}
     .sol_wrap .box2 ul li.txt dt:nth-child(2){ font-size: 14px; line-height: 16px; font-family: 'CoreDream3';color: #999;}
     .sol_wrap .box2 ul li.txt dt:nth-child(2) div{ display: inline-table;}
     .sol_wrap .box2 ul:nth-child(2) li.img{ left: auto; right: 0px;} 
     .sol_wrap .box2 ul:nth-child(2) li.txt{ left: 0px;}

     .design_wrap{ width:100%; margin: 0 auto; margin-top: 50px; padding: 0 0 50px 0;}
     .design_wrap ul{ position: relative; margin-bottom: 80px; height: auto;}
     .design_wrap ul li{ position: relative;}
     .design_wrap ul li.img{ top:0px; right: 0px;}
     .design_wrap ul li.txt{ position: relative; top:0px; left: 0px; width:calc(100% - 60px); padding: 20px 30px 0 30px;}
     .design_wrap ul li.txt dt:nth-child(1){ font-size: 24px; font-family: 'CoreDream7'; padding: 0 0 10px 0; letter-spacing: -1px;}
     .design_wrap ul li.txt dt:nth-child(2){ font-size: 14px; line-height: 16px; font-family: 'CoreDream3';color: #333;}
     .design_wrap ul li.txt dt:nth-child(2) div{ display: inline-table;}
     .design_wrap ul.right li.img{ left: 0px; right: auto;} 
     .design_wrap ul.right li.txt{ right: 0px; left: auto;}

     .design_wrap ul li.txt.t1{ font-size: 28px; line-height: 34px; font-family: 'CoreDream3'; letter-spacing: -1px; color: #666; padding: 50px 30px 0 30px;}
     .design_wrap ul li.txt.t1 span{font-family: 'CoreDream7'; color: #000;}

     .design_wrap .playbox{ position: relative; width:300px; margin: 0 auto; padding-top: 0px; padding-left: 0px;}
     .design_wrap .playbox .framebox{ width:300px; height: 168px; background-color: #000;}
     .design_wrap .playbox .thumb{ position:relative; top:0px; left: 0px; margin-top: 15px;}
     .design_wrap .playbox .thumb dt{ float:left; width:calc(33.33333333333333% - 17px); border: solid 5px #eee; margin-bottom: 7.5px; cursor:pointer; margin-left: 10px;}
     .design_wrap .playbox .thumb dt:nth-child(1){ margin-left: 0px;}
     .design_wrap .playbox .thumb img{ width:100%; height: auto; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.6;}
     .design_wrap .playbox .thumb dt.on{ border: solid 5px #fd3537;}
     .design_wrap .playbox .thumb dt.on img{-webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); opacity: 1;}

     .design_wrap ul li .slide{ background-color: #f8f8f8; width:100%; height: 350px; border-radius: 15px; text-align: center;}
     .design_wrap ul li .slide .swiper { height: calc(100% - 10px);}
     .design_wrap ul li .slide .swiper .swiper-wrapper{ padding: 40px 0 0 0;}
     :root{--swiper-theme-color:#fd3537}
     .swiper-button-prev{ left: 50px; color:#ccc; display: none;}
     .swiper-button-next{ right: 50px; color:#ccc; display: none;}

}

.contact_wrap{ width:1400px; margin: 0 auto; padding: 50px 0 0 0;}
.contact_wrap .top ul:nth-child(1){ font-size: 50px; line-height: 56px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 30px 0 20px 0;}
.contact_wrap .top ul:nth-child(2){ font-size: 34px; line-height: 40px; font-family: 'CoreDream1';}
.contact_wrap .form{ display:inline-table; width:100%; margin: 20px 0 50px 0;}
.contact_wrap .form .lbox{ display: table-cell; width:50%;}
.contact_wrap .form .rbox{ display: table-cell; width:50%;}
.contact_wrap .form ul.tit{ position: relative; padding-left: 35px; height: 26px; font-size: 20px; line-height: 26px; font-family: 'CoreDream7'; letter-spacing: -1px; margin: 50px 0 10px 0;}
.contact_wrap .form ul.tit div{ position: absolute; top:0px; left: 0px;}
.contact_wrap .form ul.tit span{ font-size: 16px; font-family: 'CoreDream3'; color: #c40006;}
.contact_wrap .form ul li{ display: inline-table;}
.contact_wrap .form ul li label{ display: inline-table; width:calc(100% - 2px); height: 38px; line-height: 38px; border-radius: 38px; border: solid 1px #e1e1e1; text-align: center; cursor: pointer;}
.contact_wrap .form ul li [type="radio"] { display: none;}
.contact_wrap .form ul li [type="radio"]:checked ~ label {background:#fdebeb; border: solid 1px #c04242; color:#df1818;}
.contact_wrap .form ul li.d1{ width:18%; margin-right: 10px;}
.contact_wrap .form .t100_sub{ width:600px; padding: 25px; margin-top: 15px; border: dashed 1px #e1e1e1; border-radius: 15px; background-color: #fafafa; display: none;}
.contact_wrap .form .t100_sub .stit{ font-size: 16px; font-family: 'CoreDream5'; padding: 0 0 10px 0;}
.contact_wrap .form .t100_sub .stit span{ font-size: 13px; font-family: 'CoreDream3'; color: #c04242; margin-left: 10px;}
.contact_wrap .form .t100_sub li{ display: inline-table; width:32%; margin: 10px 0 0 0;}
.contact_wrap .form .t100_sub li input[type=checkbox]{ width:18px; height: 18px; vertical-align:middle; margin: 0 5px 2px 0;}
.contact_wrap .form ul input[type="text"]{ border: 0px; border-bottom: solid 1px #ccc; height: 38px; line-height: 38px; font-size: 16px; outline: none; text-indent: 10px;}
.contact_wrap .form ul input[type="text"]::placeholder{ color: #ccc;}
.contact_wrap .form ul input[type="email"]{ border: 0px; border-bottom: solid 1px #ccc; height: 38px; line-height: 38px; font-size: 16px; outline: none; text-indent: 10px;}
.contact_wrap .form ul input[type="email"]::placeholder{ color: #ccc;}
.contact_wrap .form ul input[type="tel"]{ border: 0px; border-bottom: solid 1px #ccc; height: 38px; line-height: 38px; font-size: 16px; outline: none; text-indent: 10px;}
.contact_wrap .form ul input[type="tel"]::placeholder{ color: #ccc;}
.contact_wrap .form ul textarea{ border: solid 1px #ccc; border-radius: 5px; width:calc(100% - 42px); height: 300px; padding: 20px; outline: none; resize: none;}
.contact_wrap .form ul input[name="companyName"]{ width:200px;}
.contact_wrap .form ul input[name="siteUrl"]{ width:450px;}
.contact_wrap .form ul input[name="name"]{ width:100px;}
.contact_wrap .form ul input[name="phone"]{ width:150px;}
.contact_wrap .form ul input[name="email"]{ width:400px;}
.contact_wrap .form ul input[name="adinprogress"]{ width:650px;}
.ysuploadbox{ margin: 15px 0 20px 0;}
.ysuploadbox span{ margin: 0 10px 0 0;}
.file{ display: none;}
.btn_ysfindfile{ display: inline-table; font-size: 12px; height: 26px; line-height: 26px; border: solid 1px #e1e1e1; border-radius: 5px; padding: 0 7px 0 7px; background-color: #fafafa; color: #888; cursor: pointer;}
.ysfileinfo{ display: none; border-bottom: solid 1px #ccc; height: 26px; line-height: 26px; color: #000; font-size: 13px; margin: 0 0 0 5px; padding: 0 10px 0 10px;}
.contact_wrap .form .privacy{ border-bottom: solid 1px #eee; padding:  0 0 15px 0;}
.contact_wrap .form .privacy input[type=checkbox]{ width:20px; height: 20px; vertical-align: middle; margin: 0 0 2px 0;}
.contact_wrap .form .privacy span{ margin-left: 20px; font-size: 12px; color: #999; cursor: pointer;}
.contact_wrap .form .btn{ width:400px; height: 60px; line-height: 60px; border-radius: 60px; text-align: center; background-color: #df1818; color: #fff; font-family: 'CoreDream7'; font-size: 20px; letter-spacing: -1px; margin: 0 auto; margin-top: 30px; cursor: pointer;}

@media screen and (max-width:680px){
     .contact_wrap{ width:100%; margin: 0 auto; padding: 30px 0 0 0;}
     .contact_wrap .top{ padding: 0 15px 0 15px;}
     .contact_wrap .top ul:nth-child(1){ font-size: 26px; line-height: 30px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 30px 0 20px 0;}
     .contact_wrap .top ul:nth-child(2){ font-size: 20px; line-height: 24px; font-family: 'CoreDream1';}
     .contact_wrap .top img{ width:240px;}
     .contact_wrap .form{ display:inline-table; width:calc(100% - 30px); margin: 20px 15px 50px 15px;}
     .contact_wrap .form .lbox{ display: inline-table; width:100%;}
     .contact_wrap .form .rbox{ display: inline-table; width:100%;}
     .contact_wrap .form ul.tit{ position: relative; padding-left: 35px; height: 26px; font-size: 16px; line-height: 20px; font-family: 'CoreDream7'; letter-spacing: -1px; margin: 30px 0 10px 0;}
     .contact_wrap .form ul.tit div{ position: absolute; top:0px; left: 0px;}
     .contact_wrap .form ul.tit span{ font-size: 16px; font-family: 'CoreDream3'; color: #c40006;}
     .contact_wrap .form ul li{ display: inline-table;}
     .contact_wrap .form ul li label{ display: inline-table; width:calc(100% - 2px); height: 38px; line-height: 38px; border-radius: 38px; border: solid 1px #e1e1e1; text-align: center; cursor: pointer;}
     .contact_wrap .form ul li [type="radio"] { display: none;}
     .contact_wrap .form ul li [type="radio"]:checked ~ label {background:#fdebeb; border: solid 1px #c04242; color:#df1818;}
     .contact_wrap .form ul li.d1{ width:46%; margin-right: 10px; margin-bottom: 10px;}
     .contact_wrap .form .t100_sub{ width:calc(100% - 52px); padding: 25px; margin-top: 10px; border: dashed 1px #e1e1e1; border-radius: 15px; background-color: #fafafa; display: none;}
     .contact_wrap .form .t100_sub .stit{ font-size: 16px; font-family: 'CoreDream5'; padding: 0 0 10px 0;}
     .contact_wrap .form .t100_sub .stit span{ font-size: 13px; font-family: 'CoreDream3'; color: #c04242; margin-left: 10px;}
     .contact_wrap .form .t100_sub li{ display: inline-table; width:48%; margin: 10px 0 0 0;}
     .contact_wrap .form .t100_sub li input[type=checkbox]{ width:18px; height: 18px; vertical-align:middle; margin: 0 5px 2px 0;}
     .contact_wrap .form ul input[type="text"]{ border: 0px; border-bottom: solid 1px #ccc; height: 38px; line-height: 38px; font-size: 16px; outline: none; text-indent: 10px;}
     .contact_wrap .form ul input[type="text"]::placeholder{ color: #ccc;}
     .contact_wrap .form ul input[type="email"]{ border: 0px; border-bottom: solid 1px #ccc; height: 38px; line-height: 38px; font-size: 16px; outline: none; text-indent: 10px;}
     .contact_wrap .form ul input[type="email"]::placeholder{ color: #ccc;}
     .contact_wrap .form ul input[type="tel"]{ border: 0px; border-bottom: solid 1px #ccc; height: 38px; line-height: 38px; font-size: 16px; outline: none; text-indent: 10px;}
     .contact_wrap .form ul input[type="tel"]::placeholder{ color: #ccc;}
     .contact_wrap .form ul textarea{ border: solid 1px #ccc; border-radius: 5px; width:calc(100% - 42px); height: 150px; padding: 20px; outline: none; resize: none;}
     .contact_wrap .form ul input[name="companyName"]{ width:100%;}
     .contact_wrap .form ul input[name="siteUrl"]{ width:100%;}
     .contact_wrap .form ul input[name="name"]{ width:100%;}
     .contact_wrap .form ul input[name="phone"]{ width:100%;}
     .contact_wrap .form ul input[name="email"]{ width:100%;}
     .contact_wrap .form ul input[name="adinprogress"]{ width:100%;}
     .ysuploadbox{ margin: 15px 0 20px 0;}
     .ysuploadbox span{ margin: 0 10px 0 0;}
     .file{ display: none;}
     .btn_ysfindfile{ display: inline-table; font-size: 12px; height: 26px; line-height: 26px; border: solid 1px #e1e1e1; border-radius: 5px; padding: 0 7px 0 7px; background-color: #fafafa; color: #888; cursor: pointer;}
     .ysfileinfo{ display: none; border-bottom: solid 1px #ccc; height: 26px; line-height: 26px; color: #000; font-size: 13px; margin: 0 0 0 5px; padding: 0 10px 0 10px;}
     .contact_wrap .form .privacy{ border-bottom: solid 1px #eee; padding:  0 0 15px 0;}
     .contact_wrap .form .privacy input[type=checkbox]{ width:20px; height: 20px; vertical-align: middle; margin: 0 0 2px 0;}
     .contact_wrap .form .privacy span{ margin-left: 20px; font-size: 12px; color: #999; cursor: pointer;}
     .contact_wrap .form .btn{ width:calc(100% - 50px); height: 60px; line-height: 60px; border-radius: 60px; text-align: center; background-color: #df1818; color: #fff; font-family: 'CoreDream7'; font-size: 20px; letter-spacing: -1px; margin: 0 auto; margin-top: 30px; cursor: pointer;}
       
}
.agree_layer{ display: none;}
.agree_layer .inbox{ position:fixed; top:calc(50% - 240px); left: calc(50% - 290px); width:500px; height: 480px; padding: 30px 40px 40px 40px; border-radius: 10px; background-color: #fff; z-index: 500; color: #777; box-shadow:1px 1px 5px rgba(0, 0, 0, .5); z-index: 3000;}
.agree_layer .inbox .close{ position: absolute; top:-10px; right: 15px; cursor: pointer;}
.agree_layer .inbox .close:after {display: inline-block; content: "\00d7"; font-size:50px; color: rgba(20,35,54,1);}
.agree_layer .inbox .ag_top{ font-size: 18px; font-family: 'CoreDream7'; letter-spacing: -1px; color: #0a1e3c; padding-bottom: 20px;}
.agree_layer .bg{ position: fixed; top:0px; left: 0px; width:100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 2000;}

@media screen and (max-width:680px){
.agree_layer .inbox{ position:fixed; top:70px; left:20px; width:calc(100% - 80px); height: calc(100% - 160px); padding: 30px 20px 40px 20px; border-radius: 10px; background-color: #fff; z-index: 500; color: #777; box-shadow:1px 1px 5px rgba(0, 0, 0, .5); z-index: 3000;}
.agree_layer .inbox .close{ position: absolute; top:-10px; right: 15px; cursor: pointer;}
.agree_layer .inbox .close:after {display: inline-block; content: "\00d7"; font-size:50px; color: rgba(20,35,54,1);}
.agree_layer .inbox .ag_top{ font-size: 16px; font-family: 'CoreDream7'; letter-spacing: -1px; color: #0a1e3c; padding-bottom: 20px;}
.agree_layer .inbox .ag_txt{ position:absolute; top:80px; left: 20px; width:calc(100% - 40px); height: calc(100% - 110px); padding-bottom: 30px; overflow-y: auto; font-size: 12px; line-height: 14px;}
}


.wise_wrap .view{ width:1400px; margin: 0 auto; text-align: center; padding: 100px 0 50px 0;}
.wise_wrap .view ul{ float: left;}
.wise_wrap .view ul li:nth-child(1){color: #c40006; font-size: 20px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 0 0 30px 0;}
.wise_wrap .view ul:nth-child(2) img{ margin-left: 50px;}

.wise_wrap .icon{ width:1400px; margin: 0 auto; display: flex; text-align: center; padding: 50px 0 100px 0;}
.wise_wrap .icon ul{ flex-grow: 6; width:16.66666666%;}
.wise_wrap .icon ul li:nth-child(2){ color: #000; font-size: 18px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 20px 0 0 0;}
.wise_wrap .icon ul li:nth-child(3){ font-size: 15px; letter-spacing: -1px; padding: 0 0 0 0; color: #888;}
.wise_wrap .icon ul li.btit{ color: #c40006; font-size: 18px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 20px 0 0 0;}


@media screen and (max-width:680px){

     .wise_wrap .view{ width:100%; margin: 0 auto; text-align: center; padding: 50px 0 0 0;}
     .wise_wrap .view ul{ float: left; width:calc(100% - 40px); margin-left: 20px; margin-bottom: 50px;}
     .wise_wrap .view ul:nth-child(1) img{ width:100%;}
     .wise_wrap .view ul li:nth-child(1){color: #c40006; font-size: 18px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 0 0 10px 0;}
     .wise_wrap .view ul:nth-child(2) img{ margin-left: 15px; width:calc(50% - 10px);}
     .wise_wrap .view ul:nth-child(2) img:nth-child(1){ margin-left: 0px;}
     
     .wise_wrap .icon{ width:100%; margin: 0 auto; display: flex; flex-wrap: wrap; text-align: center; padding: 20px 0 70px 0;}
     .wise_wrap .icon ul{ flex-grow: 6; width:16.66666666%; flex: 1 1 40%; margin-bottom: 30px;}
     .wise_wrap .icon ul li:nth-child(2){ color: #000; font-size: 15px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 10px 0 0 0;}
     .wise_wrap .icon ul li:nth-child(3){ font-size: 13px; letter-spacing: -1px; padding: 0 0 0 0; color: #888;}
     .wise_wrap .icon ul li.btit{ color: #c40006; font-size: 18px; font-family: 'CoreDream7'; letter-spacing: -1px; padding: 20px 0 0 0;}

}

.more_wisemob{ text-align: center; padding: 0 0 150px 0;}
.more_wisemob ul:nth-child(1){ font-size: 40px; font-family: 'CoreDream7'; letter-spacing: -2px;}
.more_wisemob ul:nth-child(2){ width:500px; height: 80px; line-height: 80px; border-radius: 80px; background-color: #c40006; color: #fff; font-size: 26px; letter-spacing: -2px; font-family: 'CoreDream7';  margin: 0 auto; margin-top: 50px; cursor: pointer;}

@media screen and (max-width:680px){
     .more_wisemob{ text-align: center; padding: 0 0 100px 0;}
     .more_wisemob ul:nth-child(1){ font-size: 20px; font-family: 'CoreDream7'; letter-spacing: -2px;}
     .more_wisemob ul:nth-child(2){ width:calc(100% - 40px); height: 50px; line-height: 50px; border-radius: 50px; background-color: #c40006; color: #fff; font-size: 16px; letter-spacing: -1px; font-family: 'CoreDream7';  margin: 0 auto; margin-top: 40px; cursor: pointer;}

}