@charset "utf-8";

@import url('../mfd/f3d96ec7f0e8f034cc22ea73b3797b59/raw/856f1dbb8d807aabceb80b6d4f94b464df461b3e/gotham.css');
@import url('../spoqa-han-sans/css/SpoqaHanSansNeo.css');
@import url('aos.css');
@import url('slick.css');

@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 200;
    src: local('Noto Sans Thin'), local('NotoSans-Thin'),
    url(../fonts/NotoSansKR-Thin-Hestia.eot),
    url(../fonts/NotoSansKR-Thin-Hestia.eot#iefix) format('embedded-opentype'),
    url(../fonts/NotoSansKR-Thin-Hestia.woff) format('woff'),
    url(http://snawide.com/fonts/NotoSansKR-Thin-Hestia.otf) format('opentype');
}

@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 300;
    src: local('Noto Sans Light'), local('NotoSans-Light'),
    url(http://snawide.com/fonts/NotoSansKR-Light-Hestia.eot),
    url(http://snawide.com/fonts/NotoSansKR-Light-Hestia.eot#iefix) format('embedded-opentype'),
    url(http://snawide.com/fonts/NotoSansKR-Light-Hestia.woff) format('woff'),
    url(http://snawide.com/fonts/NotoSansKR-Light-Hestia.otf) format('opentype');
}

@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans DemiLight'), local('NotoSans-DemiLight'),
    url(http://snawide.com/fonts/NotoSansKR-DemiLight-Hestia.eot),
    url(http://snawide.com/fonts/NotoSansKR-DemiLight-Hestia.eot#iefix) format('embedded-opentype'),
    url(../fonts/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
    url(http://snawide.com/fonts/NotoSansKR-DemiLight-Hestia.otf) format('opentype');
}

@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 500;
    src: local('Noto Sans Regular'), local('NotoSans-Regular'),
    url(http://snawide.com/fonts/NotoSansKR-Regular-Hestia.eot),
    url(http://snawide.com/fonts/NotoSansKR-Regular-Hestia.eot#iefix) format('embedded-opentype'),
    url(../fonts/NotoSansKR-Regular-Hestia.woff) format('woff'),
    url(../fonts/NotoSansKR-Regular-Hestia.otf) format('opentype');
}

@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 600;
    src: local('Noto Sans Medium'), local('NotoSans-Medium'),
    url(../fonts/NotoSansKR-Medium-Hestia.eot),
    url(../fonts/NotoSansKR-Medium-Hestia.eot#iefix) format('embedded-opentype'),
    url(http://snawide.com/fonts/NotoSansKR-Medium-Hestia.woff) format('woff'),
    url(http://snawide.com/fonts/NotoSansKR-Medium-Hestia.otf) format('opentype');
}

@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans Bold'), local('NotoSans-Bold'),
    url(http://snawide.com/fonts/NotoSansKR-Bold-Hestia.eot),
    url(http://snawide.com/fonts/NotoSansKR-Bold-Hestia.eot#iefix) format('embedded-opentype'),
    url(http://snawide.com/fonts/NotoSansKR-Bold-Hestia.woff) format('woff'),
    url(http://snawide.com/fonts/NotoSansKR-Bold-Hestia.otf) format('opentype');
}

@font-face {
    font-family: 'noto';
    font-style: normal;
    font-weight: 800;
    src: local('Noto Sans Black'), local('NotoSans-Black'),
    url(http://snawide.com/fonts/NotoSansKR-Black-Hestia.eot),
    url(http://snawide.com/fonts/NotoSansKR-Black-Hestia.eot#iefix) format('embedded-opentype'),
    url(http://snawide.com/fonts/NotoSansKR-Black-Hestia.woff) format('woff'),
    url(http://snawide.com/fonts/NotoSansKR-Black-Hestia.otf) format('opentype');
}

html,body,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,big,cite,code,del,dfn,em,font,img,ins,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,ul,ol,li,dl,dt,dd,table,caption,tbody,tfoot,thead,tr,th,td,fieldset,fo7m,label,legend,input,button,textarea,select{margin:0;padding:0}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;margin:0;padding:0}
legend{display:block;overflow:hidden;position:absolute;width:1px;height:1px;font-size:1px;line-height:0;text-indent:-999em;white-space:nowrap; }
fieldset,img,table,caption,tbody,tfoot,thead,tr,th,td,button,hr{border:0 none}
img{vertical-align:sub;}
body li{*vertical-align:top}
ul li{list-style:none; padding:0; margin:0;}
table{border-collapse:collapse}
caption{visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
button{overflow:visible;border:0 none;cursor:pointer}
button::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="reset"]::-moz-focus-inner {padding: 0;border: 0 none}
a { text-decoration:none; color:var(--color-black);  }
address,
em { font-style:normal }
body,input,select,textarea,button,h1,h2,h3,h4,h5,h6 { font-family: 'Spoqa Han Sans Neo', 'noto', sans-serif; font-size:16px; color: var(--color-black); font-weight: 400;text-decoration: none; }
a:hover,a:link, a:visited{ text-decoration: none;}
textarea, .inp, select { border: 0; outline: none; border-radius: 0; resize: none; box-shadow: none; -webkit-appearance: none; appearance: none; font-weight: normal; }

/**************************************************************************************************************
	공통
**************************************************************************************************************/
.mb0 { margin-bottom:0 !important }
.mb5 { margin-bottom:5px !important }
.mb10 { margin-bottom:10px !important }
.mb15 { margin-bottom:15px !important }
.mb20 { margin-bottom:20px !important }
.mb25 { margin-bottom:25px !important }
.mb30 { margin-bottom:30px !important }
.mb35 { margin-bottom:35px !important }
.mb40 { margin-bottom:40px !important }
.mb45 { margin-bottom:45px !important }
.mb50 { margin-bottom:50px !important }
.mb55 { margin-bottom:55px !important }
.mb60 { margin-bottom:60px !important }
.mb70 { margin-bottom:70px !important }
.mb75 { margin-bottom:75px !important }
.mb80 { margin-bottom:80px !important }
.mb90 { margin-bottom:90px !important }
.mr30 { margin-right:30px !important; }
.mr40 { margin-right:40px !important; }
.mr100 { margin-right:100px !important; }
.blue { color:#009bdf !important; }
.blue2 { color:#3f5cff !important; }
.white { color:#fff !important; }
.green { color:#049d42 !important; }
.red { color:#ff1966 !important; }
.gray { color:#8b8b8b !important; }
.black { color:#444 !important; }
.yellow { color:#ffe950 !important; }
.under { text-decoration:underline !important }
.f11 { font-size:11px !important }
.f14 { font-size:14px !important }
.f15 { font-size:15px !important }
.f16 { font-size:16px !important }
.f18 { font-size:18px !important }
.f20 { font-size:20px !important }
.f21 { font-size:21px !important }
.f24 { font-size:24px !important }
.f26 { font-size:26px !important }
.clear { clear:both; }
.fl { float:left !important }
.fr { float:right !important }
.w30 { width:30% !important }
.w35 { width:35% !important }
.w40 { width:40% !important }
.w45 { width:45% !important }
.w50 { width:50% !important }
.w53 { width:53% !important }
.w55 { width:55% !important }
.w60 { width:60% !important }
.w70 { width:70% !important }
.w65 { width:65% !important }
.pdt10 { padding-top:10px !important; }
.pdt15 { padding-top:15px !important; }
.pdt20 { padding-top:20px !important; }
.pdt25 { padding-top:25px !important; }
.pdt30 { padding-top:30px !important; }
.pdt40 { padding-top:40px !important; }
.pdt50 { padding-top:50px !important; }
.pdt60 { padding-top:60px !important; }
.pdt70 { padding-top:70px !important; }
.pdb10 { padding-bottom:10px !important; }
.pdb15 { padding-bottom:15px !important; }
.pdb20 { padding-bottom:20px !important; }
.pdb25 { padding-bottom:25px !important; }
.pdb30 { padding-bottom:30px !important; }
.pdb40 { padding-bottom:40px !important; }
.pdb50 { padding-bottom:50px !important; }
.pdb60 { padding-bottom:60px !important; }
.pdb70 { padding-bottom:70px !important; }
.pdb0 { padding-bottom:0 !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align:left !important; }
.clear:after { display: block; content: ''; clear: both; }
.fl { float:left; }
.fr { float:right; }
form { padding:0; margin:0; }
input[type="checkbox"], input[type="radio"],select { vertical-align:middle }
img { max-width:100%;}
.hidden { position: absolute; left: -9999px; }
bold, strong { font-weight: 700; }
* { box-sizing: border-box;  -webkit-overflow-scrolling: touch; }
.block { display: block; width:100%;}
.ib { display: inline-block; vertical-align: middle; }
.select { vertical-align:middle; padding:0 35px 0 15px; height:48px; background:#fff url(http://snawide.com/img/bu_select_bk.png) no-repeat 100% 50%; background-position: right 12px center; border:1px solid var(--color-border); }
.select.wh { background:transparent url(../img/bu_select_wh.png) no-repeat 100% 50%; background-position: right 12px center; color:#bbb; }
.select option { color: #222; }

:root {
	--color-black : #2c2d2d;
	--color-gray : #888888;
	--color-main : #d00e19;
	--color-sub : #f89399;
	--color-border : #dedede;
	--color-bg : #f3f3f3;

	--font-title : 'GothamPro', 'Spoqa Han Sans Neo', 'noto', sans-serif; 

	--transition-all : all 0.3s ease;
}

/***********************************************************************************************
	MODAL
***********************************************************************************************/
.hidden { overflow:hidden; }
.modal-backdrop {position: fixed; top:0; right:0; bottom:0; left:0; background:#000; z-index:7500; opacity:.7; filter:alpha(opacity=70);}
.modal {display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:8000; overflow:auto; -webkit-overflow-scrolling:touch; outline:0; }
.modal-dialog {position:relative; width:auto;margin:0 auto 15px;  padding:0 15px; }
.modal-content {position:relative; background-color:#fff; outline:none;  overflow:hidden;  border-radius:8px; box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1); }
.modal-header { position: relative; height:44px; line-height: 43px; padding-left: 15px;  background: #31333f; }
.modal-header h4 { font-size:14px; color: #fff; }
.modal-header h4 small { font-size:11px; color:#848796; vertical-align: bottom; margin-right:2px; }
.modal-header .close {position: absolute; right:0; top:0; background: url(http://snawide.com/img/common/ico_modal_close.png) no-repeat 50% 50%; width:44px; height: 44px;}
.modal-body { }

/***********************************************************************************************
	Form
***********************************************************************************************/
.inp {height:50px; border:0; border-radius:0;  font-size:18px; background: none; color: #454c59; -webkit-appearance:none; box-shadow:none; transition: var(--transition-all); -webkit-transition: var(--transition-all); outline:none; }
.inp:disabled { background: #efefef; }

::-webkit-input-placeholder { color: #b9bcc6;}
:-ms-input-placeholder { color: #b9bcc6; }
::-ms-input-placeholder { color: #b9bcc6; }
::-ms-clear { display: none; }

.inner { width:100%; padding:0 15px; max-width:1030px; margin: 0 auto; }
@media only screen and (max-width: 1000px) {
	br.pc { display:none; }
}
@media only screen and (max-width: 560px) {
	br.mo { display:none; }
}

.btn-icon { display: inline-block; vertical-align: middle; text-align: center; font-size:32px; font-weight:600; height:42px; line-height: 39px; background:transparent;
	transition: var(--transition-all); -webkit-transition: var(--transition-all); }
.btn-icon:hover { color:var(--color-main); }
.btn-round { display: inline-block; vertical-align: middle; min-width:140px; text-align: center; font-size:18px; font-weight:500; height:42px; line-height: 39px; border-radius:42px; border: 1px solid;
	transition: var(--transition-all); -webkit-transition: var(--transition-all); }
.btn-round.lg { display: block; width:350px; height: 64px; line-height: 63px; text-align: center; margin:0 auto; font-size:24px; color:#fff; background:var(--color-black); border-radius:64px; }
.btn-round.lg:hover { background:var(--color-main); }
@media only screen and (max-width: 1000px) {
	.btn-round.lg { width:100%; font-size:18px; height: 48px; line-height: 47px; }
}

/*#header { position: absolute; left: 50%; top:0; width:1000px; margin-left:-500px; padding-top:27px;  text-align: right; z-index:1; }*/
/*#header h1 { position: absolute; left: 0; top: 40px; }*/
#header { position:fixed; left:0; right:0; top:0; height:60px; z-index:100; border-bottom:1px solid transparent; transition: var(--transition-all); -webkit-transition: var(--transition-all); }
#header.scrolled { background:#fff; border-color:var(--color-border); }
#header .inner { display:flex; align-items:center; height:60px; }
#header .btn-menu { margin-left:auto; }

#gnb { position: fixed; right: -260px; top: 0; bottom: 0; width: 260px; background: #000; z-index: 200; padding:30px; padding-top:0; transition: var(--transition-all); -webkit-transition: var(--transition-all); }
#gnb .btn-box { display:flex; align-items:center; height:60px; } 
#gnb .btn-close { color:#fff; margin-left:auto; margin-right:-15px; }
#gnb .btn-close:hover { color:var(--color-sub); }
#gnb .menus { margin-bottom:30px; }
#gnb .menus li { margin-bottom:1rem; }
#gnb .menus li a { font-family: var(--font-title); font-size: 24px; text-transform: uppercase; color:#fff; transition: var(--transition-all); -webkit-transition: var(--transition-all); } 
#gnb .menus li a:hover { color:var(--color-sub); }
#gnb .btn-download { color:#fff; border-color:#fff; }
#gnb .btn-download:hover { color:var(--color-sub); border-color:var(--color-sub); }
.bg-gnb { display: none; position: fixed; left: 0; right:0; top:0; bottom:0; background:#000; opacity:0.25; z-index:199; }

body.fixed #gnb { right:0; }
body.fixed .bg-gnb { display: block; }

.section { padding: 100px 0; }
.section h3 { text-align: center; margin-bottom: 0.5em; font-family: var(--font-title); font-weight: 600; font-size:36px; color:var(--color-main); text-transform: uppercase; word-break:keep-all; }
.section .h3-desc { text-align: center; font-size:20px; line-height: 1.5; color:var(--color-black); margin-bottom: 2.5em; letter-spacing: -0.01em; word-break:keep-all; }
.section .btn-round.lg { margin-top:50px; }
@media only screen and (max-width: 1000px) {
	.section { padding: 80px 0; }
	.section .h3-desc { font-size:16px; }
}

.section1 { /*position:absolute; left: 0; right:0; top:0; bottom:0;*/ position:relative; width:100%; height:100vh; background-size:cover; overflow:hidden; }
.section1:before { content:''; position:absolute; top: 0; left: 0; right:0; bottom:0; background:#fff; opacity:0.75; z-index:2; }
.section1 .intro { position: absolute; left: 0; right:0; top:50%; text-align: center; transform:translateY(-50%); z-index:3; }
.section1 .intro .txt { font-size:24px; line-height: 1.5; padding-top:30px; word-break:keep-all; }
.section1 .intro .txt-en { padding-top:15px; font-family: var(--font-title); font-weight: 600; color:var(--color-main); text-transform: uppercase; word-break:keep-all; }
.section1 .scroll { position: absolute; left: 50%; bottom:30px; margin-left:-16px; z-index:4; -webkit-animation: mover 1s infinite alternate; animation: mover 1s infinite alternate; }
.section1 .back_vid { object-fit: cover; width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index:1; }
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@media only screen and (max-width: 1000px) {
	.section1 { height:80vh; }
	.section1 .intro .txt { font-size:18px; }
}

.list-flex { width:100%; display:flex; flex-wrap:wrap; justify-content:center; }
.list-flex li { flex:1; display:flex; flex-wrap:wrap; flex-direction:column; align-items:center; word-break:keep-all; }
.list-flex.col1 li { flex:1 1 100%; }
.list-flex.col4 li { flex:1 1 25%; }
.list-flex.col5 li { flex:none; }
.list-flex.center li { justify-content:center; }
.list-icons { margin-bottom:-40px; }
.list-icons li { padding:0 20px 40px; }
.list-icons li a { width:100%; }
.list-icons li .ico { margin:0 auto; text-align: center; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;
	width:100%; height:auto; transition: var(--transition-all); -webkit-transition: var(--transition-all); }
.list-icons li .ico.circle { width:250px; height:auto; aspect-ratio:1 / 1; border-radius:100%; border:1px solid var(--color-border); }
.list-icons li .ico p { width:100%; }
.list-icons li .ico p i { font-size:3em; }
.list-icons li strong { padding:10px 0 5px; }
.list-dotted { display:flex; flex-wrap:wrap; flex-direction:column; align-items:center; gap:0.5rem; margin-top:50px; }
.list-dotted li { display:flex; justify-content:space-between; align-items:center; font-size:24px; min-width:16em; position:relative; } 
.list-dotted li:after { content: ""; display: block; position: absolute; top: 60%; width: 100%; height: 1px; border-bottom:2px dotted var(--color-main); }
.list-dotted li strong,
.list-dotted li h4 { background:#fff; z-index: 1; padding:0 0.25em; }
.list-banner { gap:20px; }
.list-banner li { flex:none; }
.list-banner li img { border:1px solid var(--color-border); }
.list-style li strong { font-family: var(--font-title); font-size:18px; color:var(--color-main); font-style:italic; display:inline-block; }
.list-style li dl { width:100%; text-align:center; }
.list-style li dl dt { font-size:24px; font-weight: 500; padding-bottom: 15px; margin-bottom: 15px; position: relative; letter-spacing: -0.01em; transition: var(--transition-all); -webkit-transition: var(--transition-all); }
.list-style li dl dt:before { content: ''; position: absolute;left: 50%; bottom: 0; width:30px; height: 2px;  margin-left: -15px; background:var(--color-main);}
.list-style li dl dd { color:var(--color-gray); line-height: 1.5; }
.list-style li h4 { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; word-break:keep-all; display:inline-block; }
.list-style li a:hover .ico.circle { background:var(--color-bg); }
.list-style li a:hover dl dt { color:#000; }
@media only screen and (max-width: 1000px) {
	.list-flex.col3 li,
	.list-flex.col6 li { flex:1 1 33.3333%; }
	.list-flex.col2 li { flex:1 1 100%; }	
	.list-icons li .ico.circle { width:200px; }
	.list-dotted { margin-top:30px; }
	.list-dotted li,
	.list-style li dl dt,
	.list-style li h4 { font-size:18px; }
	.list-style li dl dd { font-size:14px;}
}
@media only screen and (max-width: 560px) {
	.list-dotted li { width:100%; }
	.list-flex.col3 li { flex:1 1 100%; }
	.list-flex.col4 li,
	.list-flex.col5 li,
	.list-flex.col6 li { flex:1 1 50%; }
	.list-icons { margin-bottom:-20px; }
	.list-icons li { padding:0 10px 20px; }
	.list-icons li .ico.circle { width:140px; }
}
.flexbox { display:flex; flex-direction:column; margin:-10px; }
.flexbox > li { background:#fff; margin:10px; }
.flexbox.reverse > li { display:flex; flex-direction:row-reverse; align-items:center; }
.flexbox.reverse > li:nth-child(odd) { flex-direction:row; }
.flexbox.reverse > li > div,
.flexbox.reverse > li > article { width:50%; }
.flexbox > li > article { padding:30px; }
.flexbox > li .img { padding:30px 30px 0 30px; text-align:center; position:relative; }
.flexbox.reverse > li .img { padding:0; }
.flexbox > li strong { font-family: var(--font-title); font-size:18px; color:var(--color-main); font-style:italic; display: block; padding:0 0 5px; }
.flexbox > li h4 { padding-bottom: 15px; margin-bottom: 15px; font-size: 24px; font-weight: 500; position: relative; letter-spacing: -0.01em; word-break:keep-all; }
.flexbox > li h4:before { content: ''; position: absolute; left:0; bottom: 0; width:30px; height:2px; background:var(--color-main); }
.flexbox > li .txt { color:var(--color-gray); line-height: 1.5; word-break:keep-all; }
.check > li { margin-left: 1em; margin-bottom:0.25em; }
.check > li:before { content: '\2714'; color:var(--color-sub); margin-left: -1em; padding-right: 5px; }
@media only screen and (max-width: 1000px) {
	.flexbox > li,
	.flexbox.reverse > li,	
	.flexbox.reverse > li:nth-child(odd) { display:block; }
	.flexbox > li article { margin-top:20px; }
	.flexbox > li .img { max-width:100% !important; padding:0 !important; }
	.flexbox > li .img img { width:auto; }
	.flexbox > li { padding:20px; }
	.flexbox > li > div,
	.flexbox > li > article,
	.flexbox.reverse > li > div,
	.flexbox.reverse > li > article { width:100%; }
	.flexbox > li > article { padding:0 !important; }
	.flexbox > li h4 { font-size:18px; }
	.flexbox > li .txt { font-size:14px; }
}

.list-slick .slick-list { width:calc(100% - 140px); margin: 0 auto !important; }
.list-slick .slick-slide img { border:1px solid var(--color-border); border-radius:5px; overflow:hidden; }
.list-slick .slick-slide div:nth-child(1) { margin-bottom: 10px; }
.list-slick .slick-slide div div { display:flex !important; justify-content:center; }
.list-slick { position: relative; }
.list-slick > .slick-arrow { top: 20px; position: absolute; display: inline-block; vertical-align: middle; z-index: 50;
	border: none; text-indent: -999em; cursor: pointer; top: 50%; transform: translateY(-50%); }
.list-slick > .slick-prev { width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; background:var(--color-sub); border-radius:50%; left: 0; }
.list-slick > .slick-prev:before { content: '\e93b'; font-family:xeicon; color:#fff; font-size:1.5rem; font-weight:100; text-indent:0; }
.list-slick > .slick-next {	width: 60px; height: 60px; display:flex; align-items:center; justify-content:center; background:var(--color-sub); border-radius:50%; right: 0; }
.list-slick > .slick-next:before { content: '\e93e'; font-family:xeicon; color:#fff; font-size:1.5rem; font-weight:100; text-indent:0; }
@media only screen and (max-width: 1000px) {
	.list-slick .slick-slide div div { padding:0 5px; }
}
@media only screen and (max-width: 560px) {
	.list-slick .slick-list { width:calc(100% - 100px); }
	.list-slick > .slick-prev,
	.list-slick > .slick-next { width:40px; height:40px; }
}

/*#container { position: absolute; left: 0; right:0; top:100%; }*/
.section2 { text-align: center; }
.process ul:after { display: block; content: ''; clear: both; }
.process ul li { display: inline-block; vertical-align: top; }
.process ul li + li { padding-left: 45px; position: relative; }
.process ul li + li:before { content: ''; position: absolute; left: 14px; top:70px; background: url(http://snawide.com/img/section1_arr.png) no-repeat 0 0; width:19px; height: 20px; }
.process ul li strong { display: block;  font-size:18px; margin:10px 0 3px; }
.process ul li span { display: block; font-size:16px; line-height: 22px; }
.step-box { text-align: center; font-size:0; display: flex; justify-content:center; clear:both; margin:0 -10px; }
.step-box .article { display: flex; width:235px; height: 235px; align-items: center; border-radius:100%; background:var(--color-bg); margin:0 10px; position: relative; }
.step-box .article + .article:before { content: '\e90b'; font-family:xeicon; position: absolute;left: 0; top:50%; width:48px; height: 48px; margin: -23px 0 0 -33px; background:#fff; border-radius:50%; line-height:46px; font-size:1.5rem; font-weight:100; }
.step-box .article > div { flex: 1; }
.step-box .article strong { display: block; font-size:18px; font-weight:700; font-style:italic; line-height: 1; margin:0; }
.step-box .article div div { font-size:32px; line-height: 1.2; margin:10px 0; vertical-align:middle; }
.step-box .article p { font-size:16px; line-height: 1.5; }
@media only screen and (max-width: 1000px) {
	.step-box { margin:-10px 0; }
	.step-box { flex-direction: column; align-items: center; }
	.step-box .article { margin:10px 0; }
	.step-box .article + .article:before { content: '\e90a'; left:50%; top:0; margin:-33px 0 0 -23px; }
}

.section3 { background:var(--color-bg); }
.section3 .list:after { display: block; content: ''; clear:  both;}
.section3 .list li { float:left; width:236px; height: 320px; background-repeat: no-repeat; }
.section3 .list li + li { margin-left: 18px; }
.section3 .list li strong { display: block; font-size:32px; color: #fff; padding:100px 0 15px;  }
.section3 .list li p { font-size:18px; line-height: 22px; color: #fff; }
/*
.section3 .list li.l1 { background-image: url(http://snawide.com/img/section2_img1.jpg); }
.section3 .list li.l2 { background-image: url(http://snawide.com/img/section2_img2.jpg); }
.section3 .list li.l3 { background-image: url(http://snawide.com/img/section2_img3.jpg); }
.section3 .list li.l4 { background-image: url(http://snawide.com/img/section2_img4.jpg); }
*/

.section4 .current { text-align: center; font-size:18px; }
.monitor { text-align: center; display: block; width:444px; height: 851px; position: relative; margin:0 auto; }
.monitor .hp { display: block; width:444px; height: 851px; background: url(http://snawide.com/img/section4_hp.png) no-repeat 0 0; padding-top:72px; position: relative; z-index:10; }
.monitor .h1 { position: absolute; left: -317px; top:123px; }
.monitor .h2 { position: absolute; left: -267px; top:107px; }
.monitor .h3 { position: absolute; left: -218px; top:89px; }
.monitor .h4 { position: absolute; left: -167px; top:72px; }
.monitor .h8 { position: absolute; left: 447px; top:123px; width:347px; height: 621px; z-index:2; }
.monitor .h7 { position: absolute; left: 377px; top:107px; width:364px; height: 653px; z-index:3; }
.monitor .h6 { position: absolute; left: 307px; top:89px; width:383px; height: 687px; z-index:4;  }
.monitor .h5 { position: absolute; left:227px; top:72px; width:402px; height: 722px;z-index:5; }

.section5 { background:var(--color-sub); }
.section5 .clear div { width:50%; text-align: center; height: 300px; background-repeat: no-repeat; background-position: 50% 50%; background-size:cover; }
/*
.section5 .clear .fl { background-image:url(http://snawide.com/img/section5_bg1.jpg); }
.section5 .clear .fr { background-image:url(http://snawide.com/img/section5_bg2.jpg); }
*/
.section5 .clear strong { font-size:32px; color: var(--color-sub); opacity:0.8; display: block; padding:80px 0 10px; }
.section5 .clear p { font-size:24px; line-height:32px; color: #fff; }

.section .count { margin-top:50px; }
.section .count ul li { display: inline-block;vertical-align:top; }
.section .count ul li + li { padding-left:30px; margin-left:30px; border-left:1px solid var(--color-border); }
.section .count .num { font-size:48px; line-height: 1; color:var(--color-main); font-weight: 600; font-family: var(--font-title);}
.section .count p { font-size:24px; padding-top:0.5em; }
@media only screen and (max-width: 1000px) {
	.section .count ul li + li { padding-left:12px; margin-left:12px; }
	.section .count .num { font-size:24px; }
	.section .count p { font-size:14px; }
}

.section6 { background:var(--color-bg); }
.section6 .list-dotted li strong,
.section6 .list-dotted li h4 { background:var(--color-bg); }

.section7 { background-size:cover; }
.section7 .round { width:733px; margin: 0 auto; position: relative; }
.section7 .round .list div { position: absolute; border-radius:100%; border: 3px solid #fff; text-align: center; font-size:18px; color: #fff; }
.section7 .round .bg-red { background: #e53433; }
.section7 .round .bg-black { background: #474645; }
.section7 .round .bg-white { background: #fcfaf9; }
.section7 .round .bg-white { color: var(--color-black) !important; }
.section7 .round .small { width:80px; height: 80px; line-height: 73px;  }
.section7 .round .medium { width:100px; height: 100px; line-height: 94px; }
.section7 .round .large { width:120px; height: 120px; line-height: 116px; }

.section7 .round .list div:nth-child(1) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:1s } 
.section7 .round .list div:nth-child(2) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:.3s }  
.section7 .round .list div:nth-child(3) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:.2s }  
.section7 .round .list div:nth-child(4) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:.7s }  
.section7 .round .list div:nth-child(5) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:.3s }  
.section7 .round .list div:nth-child(6) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:1.2s }  
.section7 .round .list div:nth-child(7) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:3s }  
.section7 .round .list div:nth-child(8) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:2s }  
.section7 .round .list div:nth-child(9) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:1.3s }  
.section7 .round .list div:nth-child(10) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:.7s }  
.section7 .round .list div:nth-child(11) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:.3s }  
.section7 .round .list div:nth-child(12) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:.1s }  
.section7 .round .list div:nth-child(13) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:.2s }  
.section7 .round .list div:nth-child(14) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:2.5s }  
.section7 .round .list div:nth-child(15) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:3.2s }  
.section7 .round .list div:nth-child(16) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:1.3s }  
.section7 .round .list div:nth-child(17) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:3.2s }  
.section7 .round .list div:nth-child(18) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:.2s }  
.section7 .round .list div:nth-child(19) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:.5s }  
.section7 .round .list div:nth-child(20) {  -webkit-animation: round1 2s infinite; -webkit-animation-delay:1.2s }  

@-webkit-keyframes round1 {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
@keyframes round1 {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.section8 { padding-bottom:0; text-align: center; }
.section8 .list:after { display: block; content: ''; clear: both; }
.section8 .list li { float:left; position: relative; }
.section8 .list li + li{ margin-left: 17px; }
.section8 .list li .txt { position: absolute; left: 0; right:0; top:50%; margin-top:-15px; text-align: center; font-size:26px; line-height:36px; font-weight: 600; color: #fff; }

.sns { text-align: center; padding: 54px 0; background:var(--color-black); margin-top:60px; }
.sns ul { width:100%; margin: 0 auto; display:flex; flex-wrap:wrap; justify-content:center; }
.sns ul:after { display: block; content: ''; clear: both; }
.sns ul li { flex:1; text-align: center; position: relative; }
.sns ul li a { display: block; padding:0 10px; }
.sns ul li a span { display: block; font-size:18px; color: #fff; padding-top:20px; }
.sns ul li.active:before { content: ''; position: absolute; left: 50%; top:-54px; /*background: url(http://snawide.com/img/bu_select.png) no-repeat 0 0; width:39px; height: 19px;*/
	width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top:20px solid #fff; margin-left: -20px; }
@media only screen and (max-width: 1000px) {
	.sns ul li a span { font-size:14px; display:none; }
}

.section9 { background: var(--color-bg); }
.section9 .form { }
.section9 .form dl dt { font-size:18px; margin-bottom:0.5em;  }
.section9 .form dl dd { margin-bottom:1.25em; }
.section9 .inp { width:100%; height: 48px; border: 1px solid #bababa; padding-left: 10px; background:#fff; }
.section9 textarea { width:100%;border: 1px solid #bababa; padding:5px 10px;}
@media only screen and (max-width: 1000px) {
	.section9 .form dl dt { font-size:14px;  }
	.section9 .inp { height: 40px; }
}

.download .img { text-align:center; }
.download .img img { width:100%; }
.download .img.mo { display:none; }
@media all and (max-width:1000px) {
	.download .img.pc { display:none; }
	.download .img.mo { display:block; }
}

.go-top { position: fixed; bottom: 2rem; right: 5%; z-index: 100; opacity:0; transition: var(--transition-all); -webkit-transition: var(--transition-all); }
.go-top.scrolled { opacity:1; }
.go-top .btn-top { display: flex; justify-content:center; align-items:center; height: 60px; width: 60px; font-size:24px; background:var(--color-black); color: #fff; border-radius: 50%; cursor:default;
	transition: var(--transition-all); -webkit-transition: var(--transition-all); }
.go-top .btn-top:hover { color:var(--color-sub); }
.go-top.scrolled .btn-top { cursor:pointer; }
@media only screen and (max-width: 1000px) {
	.go-top { bottom:15px; right:15px; }
	.go-top .btn-top { height:40px; width:40px; }
}

#footer { padding:30px 0; background: #555; }
#footer .inner { padding: 0 200px 0 200px; position: relative; border-top:1px solid var(--color-bd-wh); }
#footer .lnb { margin-bottom: 10px; }
#footer .lnb a { margin-right:10px; font-size:14px; color:#eee; }
#footer .addr { font-size:14px; color:#999; line-height: 1.4; }
#footer .addr a { color:#ccc; }
#footer .logo { position: absolute;left:15px; top:0; }
#footer .logo img { max-height:60px; }
#footer .select { position: absolute; right:15px; top:0; font-size:14px; }
@media all and (max-width:1000px) {
	#footer { text-align:center; }
	#footer .inner { padding: 0 15px; }
	#footer .logo { position: static; margin-bottom: 15px; }
	#footer .logo img { height: 20px; }
	#footer .select { position: static;  height: 40px; font-size:12px;  }
	#footer .lnb a { font-size:11px; }
	#footer .addr { font-size:11px; margin-bottom: 15px;  }
}