@charset "utf-8";

@import url('base.css');

/************************************************
	skipLink
************************************************/
#skipLink{ width:100%; overflow:hidden; position:relative; z-index:1000;}
#skipLink a{ margin:0px -1px -1px 0px; width:1px; height:1px; text-align:center; line-height:0; overflow:hidden; font-size:0px; display:block;}
#skipLink a:focus{ background:rgb(32, 38, 44); margin:0px; padding:8px 0px 8px 15px; width:auto; height:30px; color:rgb(255, 255, 255); line-height:1; font-size:12px; font-weight:700;}
#skipLink a:hover{ background:rgb(32, 38, 44); margin:0px; padding:8px 0px 8px 15px; width:auto; height:30px; color:rgb(255, 255, 255); line-height:1; font-size:12px; font-weight:700;}
#skipLink a:active{ background:rgb(32, 38, 44); margin:0px; padding:8px 0px 8px 15px; width:auto; height:30px; color:rgb(255, 255, 255); line-height:1; font-size:12px; font-weight:700;}

*[tabindex] {
  outline:none;
}

/* --------------------------------------------
 * layout
/* ------------------------------------------ */
.mbg{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5; z-index:3;}
body.ovf_hdn, .ovf_hdn{ overflow:hidden; height:100%;}

#wrap{ position:relative; width:100%; min-width: 1200px; margin:0 auto; overflow:hidden; }

#header{ position: fixed; top: 0; left: 0; width:100%; background-color: #fff; border-bottom: #efefef 1px solid; z-index:5; -webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }
#header .inner{ position: relative; max-width: 1280px; margin: 0 auto; padding: 0 0 0 320px;}
#header h1.logo{ position: absolute; top:30px; left:30px; width: 208px; }
#header h1.logo a{ display: block; height: 38px; background:url('../images/logo.png') 50% 50% no-repeat; text-indent: -9999px; }
#header .bt-mn{ position: absolute; width: 4rem; height: 4rem; top: 50%; right: 5vw; margin-top: -2rem; display: none;}
#header .bt-mn span{ position: absolute; top: -9999px; left: -9999px;}
#header .bt-mn i{ position: absolute; right: 0; width: 30px; height: 2px; background-color: #222; display: block;}
#header .bt-mn i:nth-child(1){ top: 12px;}
#header .bt-mn i:nth-child(2){ top: 19px;}
#header .bt-mn i:nth-child(3){ top: 26px;}
#header .lang{ position: absolute; top: 50%; right: 0; margin-top: -17px; font-size: 14px; text-align: center; border-radius: 20px; overflow: hidden; z-index: 2;}
#header .lang .bt{ position: relative; display: block; width: 50px; float: left; font-size: 14px; height: 34px; line-height: 34px; padding: 0; text-align: center; color: #444; background-color: #f0f0f0; text-transform: uppercase;}
#header .lang .bt.active{ background-color: #e30613; color: #fff;}
#header .subBg{ position: fixed; top: 101px; left: 0; width: 100%; height: 220px; background-color: #fff; display: none;}

#gnbWrap{ position: relative; width: 100%; margin: 0; z-index: 2; }
#gnbWrap::after{ content: ''; display: block; clear: both;}
#gnbWrap #gnb::after{ content: ''; display: block; clear: both;}
#gnbWrap #gnb > li{ position: relative; float: left; padding: 0 40px; }
#gnbWrap #gnb > li > a{ position: relative; display: block; font-size: 20px; color: #222; letter-spacing: -.01em; text-align: center; line-height: 100px;}
#gnbWrap #gnb > li > a::after{ content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #77b416; opacity: 0; -webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }
#gnbWrap #gnb > li:hover > a,
#gnbWrap #gnb > li.active > a{ color: #77b416;}
#gnbWrap #gnb > li:hover > a::after,
#gnbWrap #gnb > li.active > a::after{ opacity: 1;}
#gnbWrap #gnb > li .subDepth{ position: absolute; top: 100px; left: 0; width: 100%; padding:30px 0 0 0; display: none;}
#gnbWrap #gnb > li .subDepth > li + li{ margin-top: 5px;}
#gnbWrap #gnb > li .subDepth > li > a{ display: block; font-size: 16px; color: #666; text-align: center;}
#gnbWrap #gnb > li .subDepth > li > a:hover{ color: #77b416;}


/* siteFunctions */
#siteFunctions{ position:fixed; top:0; right:-100%; width:100%; bottom:0; padding-left: 7rem; height:100%; z-index:10; background-color: rgba(0,0,0,.7); display: none;}
#siteFunctions .inner{ position:relative; overflow-y:auto; background-color:#fff; padding:0 2rem; height: 100vh;}
#siteFunctions .hd{ position:relative; height: 6rem; overflow:hidden; padding: 0;}
#siteFunctions .hd .lang{ display: inline-block; margin-top: 14px; font-size: 14px; text-align: center; border-radius: 20px; overflow: hidden; z-index: 2;}
#siteFunctions .hd .lang .bt{ position: relative; display: block; width: 60px; float: left; font-size: 14px; height: 34px; line-height: 34px; padding: 0; text-align: center; color: #444; background-color: #f0f0f0; text-transform: uppercase;}
#siteFunctions .hd .lang .bt.active{ background-color: #e30613; color: #fff;}
#siteFunctions .bt-close{ position:absolute; right:3vw; top:2rem; display:block; width:1.8rem; height:1.8rem; -webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
#siteFunctions .bt-close span{ position:absolute; top:-9999px; left:-9999px;}
#siteFunctions .bt-close::before{ content:""; position:absolute; top:50%; left:0; margin-top:-1px; width:100%; height:2px; background-color:#222; display:block;}
#siteFunctions .bt-close::after{ content:""; position:absolute; top:0; left:50%; margin-left:-1px; width:2px; height:100%; background-color:#222; display:block;}

.mobMenu{ padding: 0; border-top: #efefef 1px solid;}
.mobMenu a,
.mobMenu span{ display:block; color:#222;}
.mobMenu > li{ border-bottom: #efefef 1px solid;}
.mobMenu > li > a{ position:relative; font-size: 1.8rem; padding: 1.8rem 0; color: #222; display:block; text-align: center; font-weight: 500;}
.mobMenu > li.active > a{ color:#e30613;}
.mobMenu > li > .subDepth{ padding: 10px 0; background-color: #f5f5f5; border-top: #efefef 1px solid;}
.mobMenu > li > .subDepth > li > a{ color: #666; font-size: 1.6rem; padding: 0 5.5vw; line-height: 1.2; text-align: center;}
.mobMenu > li > .subDepth > li + li{ margin-top: 1.8rem;}

#container{ position: relative; z-index: 1; padding: 100px 0 0 0;}
#indexWrap{ position: relative; z-index: 1; padding: 0;}

#footer{ background-color: #3f3f3f; padding: 35px 0; }
#footer .inner{ position: relative; max-width: 1280px; margin: 0 auto; font-size: 14px; color: #999; text-align: center;}
#footer .inner address{ display: block; margin-top: 10px; font-size: 14px; } 
#footer .inner p + p{ margin-top: 3px;}
#footer .inner address span{ position: relative; display: inline-block;}
#footer .inner address span + span{ margin-left: 1rem; padding-left: 1rem;}
#footer .inner address span + span::before{ content: ''; display: block; width: 1px; height: 10px; background-color: #999; position: absolute; top: 50%; left: 0; margin-top: -5px;}
#footer .inner .copy{ margin-top:10px; }
#footer .footer-link{ text-align: center;}
#footer .footer-link > li{ display: inline-block; position: relative;}
#footer .footer-link > li + li{ margin-left: 15px; padding-left: 15px;}
#footer .footer-link > li + li::before{ content: ''; display: block ;position: absolute; top: 50%; left: 0; width: 1px; height: 10px; background-color: #999; margin-top: -5px;}
#footer .footer-link > li a{ display: block; font-size: 16px; color: #999;}
#footer .footer-link > li.privacy a{ color: #fff; font-weight: 600;}

.subVis{ position: relative; height: 180px; background-color:#000; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
body.sub01 .subVis{ background-image: url(../images/sub_vis01.jpg);}
body.sub02 .subVis{ background-image: url(../images/sub_vis02.jpg);}
body.sub03 .subVis{ background-image: url(../images/sub_vis03.jpg);}
body.sub04 .subVis{ background-image: url(../images/sub_vis04.jpg);}
.subVis h2{ color: #fff; text-align: center; font-size: 30px; font-weight: 600; line-height: 180px;}

@media screen and (min-width:1024px) and (max-width:1200px){
    #wrap{ min-width: 100%;}
    #header h1.logo{ left: 20px;}
    #gnbWrap #gnb{ float: none; text-align: center;}
    #gnbWrap #gnb > li{ float: none; display: inline-block;}
    #gnbWrap #gnb > li{ padding: 0 1vw 0 0;}
    
    #container{ width: 100%; padding: 90px 0;}
    
}

@media screen and (min-width:641px) and (max-width:1023px){    
    #wrap{ min-width: 100%;}
    #header{ height: 90px;}
    #header::before{ top: 90px;}
    .fixed #header{ height: 90px;}
    #header h1.logo{ left: 4.5vw; }
    #header h1.logo a{ height: 38px; background-image: url(../images/logo.png); background-size: 100% auto;}
    #header .dv-utill,
    #header .lang,
    #gnbWrap{ display: none;}    
    #header .bt-mn{ width: 40px; height: 40px; top: 50%; right: 5vw; margin-top: -20px; display: block;}
    #header .bt-mn i{ position: absolute; right: 0; width: 38px; height: 4px;  display: block;}
    #header .bt-mn i:nth-child(1){ top: 8px;}
    #header .bt-mn i:nth-child(2){ top: 19px;}
    #header .bt-mn i:nth-child(3){ top: 30px;}
    #header .bt-mn{ display: block;}
    
    #container{ width: 100%; padding: 90px 0;}
    
    #footer{ padding: 4rem 5.5vw;}
    #footer .inner address{ margin-top: 1.8rem; font-size: 1.1rem; padding-bottom: 0; border-bottom: none;}
    #footer .inner .copy{ margin-top: 2.5rem; font-size: 1.1rem;}
    
    #siteFunctions{ display: block;}
    #siteFunctions .hd{ height:90px; padding-top: 24px; }
    #siteFunctions .bt-close{ top: 30px;}
    
    .subVis{ padding: 0; height: auto;}
    .subVis h2{ font-size: 3rem; padding-top: 0;line-height: 14rem;}
}

@media screen and (max-width:640px){
    #wrap{ padding-top: 0; min-width: 100%;}
    #header{ height: 7rem;}
    #header h1.logo{ left: 4.5vw; top: 25px; margin:0; width: 190px;}
    #header h1.logo a{ height: 38px; background-image: url(../images/logo.png); background-size: 100% auto;} 
    .fixed #header h1.logo a, 
    #header.on h1.logo a{ background-size: 100% auto;}
    #header .dv-utill,
    #header .lang,
    #gnbWrap{ display: none;}    
    #header .bt-mn{ display: block;}
    
    #container{ padding: 7rem 0 0 0;}
    
    #contents{ width: 100%; padding: 55px 5vw;}
    
    #footer{ padding: 4rem 4.5vw;}
    #footer .inner{ font-size: 1.2rem;}
    #footer .footer-link > li a{ font-size: 1.3rem;}
    #footer .inner address{ font-size: 1.2rem;}
    #footer .inner address span + span::before{ display: none;}
    
    #siteFunctions{ display: block; }
    
    .subVis{ padding: 0; height: auto;}
    .subVis h2{ font-size: 3rem; padding-top: 0;line-height: 14rem;}
}

/* --------------------------------------------
 * common
/* ------------------------------------------ */
div.paging{ text-align:center; padding:0; margin:50px 0 0 0; position:relative; clear:both;}
div.paging a,
div.paging strong{ position: relative; display:inline-block; height:28px; line-height:28px; font-size: 18px; color:#888; text-align:center; vertical-align:middle; background-color: #fff; overflow: hidden; font-family: 'Roboto', 'Noto Sans KR';  margin: 0 12px;}
div.paging .on{ font-weight:600; color: #eb515a; }
div.paging .on::after{ content: ''; position: absolute; display: block; bottom: 0; left: 0; width: 100%; background-color: #ec0928; height: 2px;}
div.paging .direction{ position:relative; width: 20px; margin: 0 8px;}
div.paging .direction > span{ position:absolute; top:-9999px; left:-9999px;}
div.paging .direction.prev{ margin-right: 40px;}
div.paging .direction.next{ margin-left: 40px;}
div.paging .direction.first:before{ content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 0px; width:8px; height:8px; display:block;  border:1px solid #777; border-top:none;border-right:none;-webkit-transform:rotate(45deg);transform:rotate(45deg); }
div.paging .direction.first:after{ content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 -4px; width:8px; height:8px; display:block;  border:1px solid #777; border-top:none;border-right:none;-webkit-transform:rotate(45deg);transform:rotate(45deg); }
div.paging .direction.prev:after{ content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 -4px; width:8px; height:8px; display:block;  border:1px solid #777; border-top:none;border-right:none;-webkit-transform:rotate(45deg);transform:rotate(45deg); }
div.paging .direction.next:after{ content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 -4px; width:8px; height:8px; display:block;  border:1px solid #777; border-top:none;border-right:none;-webkit-transform:rotate(-135deg);transform:rotate(-135deg); }
div.paging .direction.last:before{ content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 -8px; width:8px; height:8px; display:block;  border:1px solid #777; border-top:none;border-right:none;-webkit-transform:rotate(-135deg);transform:rotate(-135deg); }
div.paging .direction.last:after{ content:""; position:absolute; top:50%; left:50%; margin:-4px 0 0 -4px; width:8px; height:8px; display:block;  border:1px solid #777; border-top:none;border-right:none;-webkit-transform:rotate(-135deg);transform:rotate(-135deg); }


.tit-area{ position: relative; margin: 60px auto 80px; }
.tit-area .dv-loc{ position: absolute; bottom: 0; right: 0; font-size: 14px;}
.tit-area .dv-loc span,
.tit-area .dv-loc strong{ position: relative; display: inline-block; padding: 0 0 0 15px; margin-left: 8px; height: 16px; line-height: 16px;}
.tit-area .dv-loc span::before,
.tit-area .dv-loc strong::before{ content: ''; display: block; position: absolute; top: 50%; left: 0; margin-top: -3px; width: 6px; height: 6px; border-top: #999 1px solid; border-right: #999 1px solid; transform: rotate(45deg); }
.tit-area .dv-loc strong{ color: #444;}
.tit-area .dv-loc span.h{ padding-left: 0; background:url(../images/ic_h.png) 50% 50% no-repeat; width: 21px; }
.tit-area .dv-loc span.h::before{ display: none;}

.sub-tit{ margin: 0 auto; font-size: 40px; color: #111; font-weight: 600; text-align: center; letter-spacing: -.05em;}

.contents{ max-width: 1200px; margin: 0 auto; padding: 0 0 240px;}

table.data{ width: 100%; table-layout: fixed; border-top: #222 2px solid; }
table.data thead th{ text-align: center; background-color: #fcfcfc; color: #222; padding: 20px; border-bottom: #eee 1px solid; border-left: #eee 1px solid;}
table.data tbody td{ text-align: center; padding: 15px 30px; border-bottom: #eee 1px solid; border-left: #eee 1px solid;}
table.data .brdLn{ border-left: none;}

.viewBottomList{ max-width: 1200px; margin:0 auto; border-bottom:#000 1px solid; }
.viewBottomList ul{ display:block; width:100%;}
.viewBottomList .viewBottomPrev{display:block; padding:0 10px 0 190px; height:78px; line-height:78px; position:relative; border-bottom:#ddd 1px solid;}
.viewBottomList .viewBottomNext{display:block; padding:0 10px 0 190px; height:78px; line-height:78px; position:relative;}
.viewBottomList .orderPrev{ vertical-align:middle; position:absolute; top:0; left:0; width:120px; line-height:78px; color:#111; text-align: center;}
.viewBottomList .orderNext{ vertical-align:middle; position:absolute; top:0; left:0; width:120px; line-height:78px; padding-right:0; color:#111; text-align: center;}
.viewBottomList .orderPrev::after{ content: ''; position: absolute; top: 50%; right: 0; margin-top: -2px; transform: rotate(45deg); display: block; width: 8px; height: 8px; border-top: #05acef 2px solid; border-left: #05acef 2px solid;}
.viewBottomList .orderNext::after{ content: ''; position: absolute; top: 50%; right: 0; margin-top: -4px; transform: rotate(-135deg); display: block; width: 8px; height: 8px; border-top: #05acef 2px solid; border-left: #05acef 2px solid;}
.viewBottomList a{ color:#666; text-overflow:ellipsis; overflow:hidden; display:block; white-space:nowrap; height:78px; line-height:78px;}
.viewBottomList .viewBottomPrev:hover a,
.viewBottomList .viewBottomNext:hover a{ text-decoration:underline;}

.div-tab{ display: table; table-layout: fixed; width: 100%; margin-bottom: 80px;}
.div-tab > li{ display: table-cell; }
.div-tab > li > a{ display: block; text-align: center; height: 60px; line-height: 60px; border: #eee 1px solid; background-color: #fff;}
.div-tab > li.active > a{ color: #fff; background-color: #ed1c24; border-color:#ed1c24;}

.div-tab2{ display: table; table-layout: fixed; width: 100%; }
.div-tab2 > li{ display: table-cell;}
.div-tab2 > li > a{ position: relative; background-color: #fcfcfc; height: 70px; line-height: 70px; text-align: center; display: block; border-bottom: #eee 1px solid; font-size: 20px;}
.div-tab2 > li + li > a{ border-left: #eee 1px solid;}
.div-tab2 > li.on > a{ background-color: #fff; background-color: #fff; border-bottom: #fff 1px solid; color: #ed1c24}
.div-tab2 > li.on > a::after{ content: ''; display: block; height: 1px; width: 100%; position: absolute; top: 0; left: 0; background-color: #ed1c24}

ul.ul-list01 > li{ text-indent: -10px; padding-left: 10px;}
ul.ul-list01 > li::before{ content: ''; display: inline-block; width: 3px; height: 3px; vertical-align: middle; margin-right: 5px; background-color: #ed1c24; border-radius: 50%;}
ul.ul-list01 > li + li{ margin-top: 5px;}



@media screen and (min-width:641px) and (max-width:1023px){        
    
    .contents{ padding: 0 4.5vw 10rem;}
    
    .sub-tit{ font-size: 3.4rem;}
    .tit-area .dv-loc{ position: relative; margin-top: 1rem; text-align: center; bottom: auto; right: auto;}
}

@media screen and (max-width:640px){    
    
    .contents{ padding: 0 4.5vw 10rem;}
    
    .tit-area{ margin: 5rem 0 3rem;}
    .sub-tit{ font-size: 3.4rem;}
    .tit-area .dv-loc{ position: relative; margin-top: 1rem; text-align: center; bottom: auto; right: auto;}
    
    .div-tab{  margin-bottom: 5rem;}
    .div-tab > li > a{ height: 4rem; line-height: 4rem;}
    
    table.data thead th{ padding: 1rem;}
    table.data tbody td{ padding: .8rem;}
    
    div.paging a, 
    div.paging strong{ margin: 0 1rem;}
    div.paging .direction{ margin: 0;}
    div.paging .direction.prev{ margin-right: 0;}
    div.paging .direction.next{ margin-left: 0;}
}

/* about */
.desc01{ color: #222; font-size: 30px; text-align: center; margin-bottom: 80px; }
.desc01 p{ font-size: 16px; margin-top: 30px;}

.full-bg{ padding: 80px 0; position: relative;}
.full-bg::before{ content: ''; background: #f8f8f8; position: absolute; top: 0; bottom: 0; left: 50%; width: 1920px; transform: translateX(-50%); z-index: -1;}

.about01-wr{ text-align: center;}
.about01-wr .thumb{ position: relative; margin: 0 0 70px 0;}
.about01-wr .thumb img{ display: block; position: relative; z-index: 2;}
.about01-wr .thumb::before{ content: ''; display: block; width: 100px; height: 100px; position: absolute; background-color: #fe404b; bottom: -50px; left: -40px;}
.about01-wr .thumb::after{ content: ''; display: block; width: 100px; height: 100px; position: absolute; background-color: #fe404b; top: 60px; right: -40px;}
.about01-wr .tx02{ margin-top: 30px; padding: 0 160px; line-height: 1.8;}
.about01-wr .tx03{ margin-top: 30px; font-size: 20px; color: #222;}

.about02-wr{ margin-bottom: -240px;}
.about02-wr .full-bg::before{ background: #f8f8f8 url(../images/bg.jpg) 50% 50% no-repeat;}
.about02-wr .full-bg .tit{ font-size: 26px; color: #222; margin-bottom: 40px;}
.about02-wr .full-bg table{ table-layout: fixed; width: 100%;}
.about02-wr .full-bg table th{ padding: 15px; width: 25%; border-bottom: #ddd 1px solid; background-color: #fff; text-align: center;}
.about02-wr .full-bg table td{ padding: 15px;border-bottom: #ddd 1px solid;}
.about02-wr .full-bg table tr:first-child th{ border-top: #e30613 2px solid;}
.about02-wr .full-bg table tr:first-child td{ border-top: #444 2px solid;}

.history-bx{ border-top: #e5e5e5 1px solid; background-color: #fcfcfc; overflow: hidden;}
.history-bx .itm{ padding: 60px 60px 60px 310px; position: relative; box-shadow: inset 0 -1rem 1rem rgba(0,0,0,.03); }
.history-bx .itm:nth-child(even){ background-color: #fff;}
.history-bx .itm::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 310px; width: 1px; display: block;  border-left: #fe5861 1px dashed;}
.history-bx .itm h4{ position: absolute; top: 55px; left: 60px;}
.history-bx .itm h4 b{ display:block; color: #e30613; font-size: 30px;}
.history-bx .itm h4 span{ display: block; margin-top: 1rem; font-size: 20px; color: #222;}
.history-bx .itm > ul > li{ display: flex;}
.history-bx .itm > ul > li + li{ margin-top: 15px;}
.history-bx .itm > ul > li h5{ flex: none; width: 130px; font-size: 18px; padding: 0 0 0 35px; position: relative; color: #222;}
.history-bx .itm > ul > li h5::before{ content: ''; display: block; position: absolute; top:50%; left: 0; margin-top: -8px; border: #e30613 3px solid; border-radius: 50%; width: 1rem; height: 1rem; margin-left: -.45rem; background-color: #fff;}
.history-bx .itm > ul > li div{ flex: 1; }

.about05-wr .thumb{ text-align: center;}

.map-bx .map{ width: 100%; height: 540px;}
.loc-tx{ margin-top: 60px; display: flex;}
.loc-tx > li{ flex: 1; padding: 15px 0 15px 110px; position: relative;}
.loc-tx > li:first-child{ flex: none; width: 620px;}
.loc-tx > li i{ position: absolute; display: inline-block; top: 0; left: 0;}
.loc-tx > li h4{ color: #222; text-transform: uppercase;}
.loc-tx > li p{ margin-top: 10px;}

@media screen and (min-width:641px) and (max-width:1023px){  
    .about01-wr .tx02{ padding: 0;}
    
    .loc-tx{ margin-top: 3rem; display: block;}
    .loc-tx > li,
    .loc-tx > li:first-child{ flex: none; width: 100%; padding: 1rem 0 1rem 6rem;}
    .loc-tx > li i{ width: 5rem; height: 5rem;}
    .loc-tx > li + li{ margin-top: 2rem;}
    
    .history-bx .itm{ padding-left: 250px;}
    .history-bx .itm::before{ left: 249px;}
}

@media screen and (max-width:640px){ 
    .desc01{ font-size: 2rem; margin-bottom: 4rem;}
    .desc01 p{ font-size: 1.4rem; margin-top: 2rem;}
    
    .full-bg{ padding: 3rem 0;}
    
    .about01-wr .thumb::before{ width: 6rem; height: 6rem; left: -4.5vw; bottom: -4.5vw;}
    .about01-wr .thumb::after{ width: 6rem; height: 6rem; right: -4.5vw; top: 2rem;}
    .about01-wr .tx02{ padding: 0;}
    .about01-wr .tx03{ font-size: 1.6rem;}
    
    .about02-wr{ margin-bottom: -10rem;}
    .about02-wr .tx01{ margin-bottom: 3rem;}
    .about02-wr .full-bg{  padding: 3rem 0;}
    .about02-wr .full-bg .tit{ font-size: 1.8rem; margin-bottom: 2rem;}
    .about02-wr .full-bg table th{ width: 35%;}
    
    .map-bx .map{ height: 30rem}
    .loc-tx{ margin-top: 3rem; display: block;}
    .loc-tx > li,
    .loc-tx > li:first-child{ flex: none; width: 100%; padding: 0 0 0 6rem;}
    .loc-tx > li i{ width: 5rem; height: 5rem;}
    .loc-tx > li + li{ margin-top: 2rem;}
    
    .history-bx .itm{ padding: 1rem 2rem 3rem;}
    .history-bx .itm::before{ display: none;}
    .history-bx .itm h4{ position: relative; top: auto; left: auto; margin-bottom: 1rem;}
    .history-bx .itm h4 b{ display: inline-block; font-size: 2.4rem;}
    .history-bx .itm h4 span{ display: inline-block; font-size: 2rem;}
    .history-bx .itm > ul > li h5{ padding-left: 1.4rem;}
    .history-bx .itm > ul > li h5::before{ margin-top: -5px;}
    .history-bx .itm > ul > li{ display: block;}
}


/* business */
h4.h4-tit{ position: relative; font-size: 20px; color: #222; font-weight: 600; line-height: 1; padding-left: 40px; margin: 45px 0 25px;}
h4.h4-tit::before{ content: ''; display: block; position: absolute; top: 10px; left: 0; height: 3px; width: 23px; background-color: #222;}
h4.h4-tit2{ position: relative; font-size: 20px; color: #222; font-weight: 600; line-height: 1; margin: 45px 0 20px;}

.business-wr > ul{ display: flex; height: 330px; background-color: #000; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; padding: 30px;}
.business-wr > ul > li{ flex: 1; border: rgba(255,255,255,.4) 1px solid; background-color: rgba(255,255,255,.05); padding: 35px 20px 0; text-align: center; color: #fff;}
.business-wr > ul > li + li{ margin-left: 30px;}
.business-wr > ul > li h5{ font-size: 20px; font-weight: 600;}
.business-wr > ul > li h5 a {color:#fff }
.business-wr > ul > li h5::before{ content: ''; display: block; margin:0 auto 5px; width: 70px; height: 70px; background-repeat: no-repeat; background-position: 50% 50%;}
.business-wr > ul.tx01 > li.itm1 h5::before{ background-image: url(../images/business_ic1.png);}
.business-wr > ul.tx01 > li.itm2 h5::before{ background-image: url(../images/business_ic2.png);}
.business-wr > ul.tx02 > li.itm1 h5::before{ background-image: url(../images/business_ic3.png);}
.business-wr > ul.tx02 > li.itm2 h5::before{ background-image: url(../images/business_ic4.png);}
.business-wr > ul.tx03 > li.itm1 h5::before{ background-image: url(../images/business_ic5.png);}
.business-wr > ul.tx03 > li.itm2 h5::before{ background-image: url(../images/business_ic6.png);}
.business-wr > ul > li > div{ margin-top: 20px;}
.business-wr > ul > li > div span{ display: inline-block;}
.business-wr > ul.tx01{ background-image: url(../images/business_img01.jpg);}
.business-wr > ul.tx02{ background-image: url(../images/business_img02.jpg);}
.business-wr > ul.tx03{ background-image: url(../images/business_img03.jpg);}

.business01-wr{ margin-bottom: -240px;}
.business01-tx01{ margin: -20px 0 80px -2%;}
.business01-tx01::after{ content: ''; display: block; clear: both;}
.business01-tx01 > li{ float: left; width: 23%; margin: 20px 0 0 2%; border: #ddd 1px solid; height: 60px; line-height: 60px; text-align: center; color: #222;}

.business-tit { margin: 80px 0;}
.business-tit .tit{ font-size: 26px; color: #222; padding-top: 20px; position: relative;}
.business-tit .tit::before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 60px; height: 2px; background-color: #ed1c24;}
.business-tit p{ color: #222; font-size: 20px; margin-top: 20px;}

.businrss0101-tx1{ margin: 80px 0 0 -2%;}
.businrss0101-tx1::after{ content: ''; display: block; clear: both;}
.businrss0101-tx1 > li{ float: left; background-color: #fff; padding: 70px 30px; border: #eee 1px solid; width: 48%; margin: 0 0 30px 2%;}
.businrss0101-tx1 > li i{ display: block; text-align: center;}
.businrss0101-tx1 > li b{ display: block; margin: 25px 0 15px; text-align: center; color: #222; font-size: 20px;}

.businessTabwr{ background-color: #fff; border: #eee 1px solid;}
.businessTabwr .tm{ padding: 80px 30px;}

.business01-dl{ text-align: center; margin-bottom: 60px;}
.business01-dl dt{ font-size: 20px; color: #222; }
.business01-dl dd{ margin-top: 20px;}
.logo-bx{ margin-top: 50px; text-align: center;}
.logo-bx span{ display: inline-block; margin: 2px 7px;}

.business02-wr{ margin-bottom: -240px;}
.business02-tx01{ display: flex;}
.business02-tx01 > li{ position: relative; flex: 1; border: #eee 1px solid; text-align: center; padding: 35px 0;}
.business02-tx01 > li + li{ margin-left: 30px;}
.business02-tx01 > li > i{ display: block; color: #ed1c24; font-weight: 600; font-size: 18px;}
.business02-tx01 > li > b{ display: block; color: #222; font-size: 20px; margin-top: 5px;}
.business02-tx01 > li > div{  margin-top: 10px;}
.business02-tx01 > li > div span{ display: block;}
.business02-tx01 > li::after{ content: ''; display: block; width: 70px; height: 70px; margin: 60px auto 0; background-position: 50% 50%; background-repeat: no-repeat;}
.business02-tx01 > li + li::before{ content: ''; width: 66px; height: 66px; display: block; background: url(../images/ic_aw.png); position: absolute; top: 50%; left: 0; margin: -33px 0 0 -48px;}
.business02-tx01 > li.itm1::after{ background-image: url(../images/business02_ic1.png); }
.business02-tx01 > li.itm2::after{ background-image: url(../images/business02_ic2.png); }
.business02-tx01 > li.itm3::after{ background-image: url(../images/business02_ic3.png); }
.business02-tx01 > li.itm4::after{ background-image: url(../images/business02_ic4.png); }
.business02-tx02{ margin-top: 40px; margin-bottom: 80px; text-align: center; color: #1994d3; padding: 35px; font-size: 22px; border: #1994d3 1px dashed;}
.business02-tx02::before{ content: ''; display: inline-block; width: 31px; height: 31px; background: url(../images/ic_ck.png) 50% 50% no-repeat; margin-right: 1rem; vertical-align: middle;}

.business03-wr .tx01{ background-color: #fff; border: #eee 1px solid; padding: 80px 30px;}

@media screen and (min-width:641px) and (max-width:1023px){ 
    .business-wr > ul{ height: auto;} 
    .business-wr > ul > li{ padding: 1rem 2rem;}
}

@media screen and (max-width:640px){ 
    
    h4.h4-tit2{ font-size: 1.8rem; margin: 3rem 0 1rem;}
    
    .business-wr > ul{ display: block; height: auto;}
    .business-wr > ul > li{ flex: none; padding: 1rem 2rem;}
    .business-wr > ul > li + li{ margin: 1rem 0 0 0;}
    .business-wr > ul > li h5{ font-size: 1.6rem;}
    .business-wr > ul > li > div span{ display: inline;}
    
    .business01-wr{ margin-bottom: -10rem;}
    
    .business01-tx01{ margin: -1rem 0 3rem -1%;}
    .business01-tx01 > li{ width: 32.3%; margin-left: 1%; margin-top: 1rem; height: 4rem ;line-height: 4rem;}
    
    .business-tit{ margin-top: 5rem; margin-bottom: 3rem;}
    .business-tit .tit{ font-size: 2rem; padding-top: 1rem;}
    .business-tit p{ font-size: 1.4rem; margin-top: 1rem;}
    
    .businrss0101-tx1{ margin: 3rem 0 0 0;}
    .businrss0101-tx1 > li{ width: 100%; margin: 0; padding: 2rem ;}
    .businrss0101-tx1 > li + li{ margin-top: 2rem;}
    .businrss0101-tx1 > li i img{  width: 5rem;}
    .businrss0101-tx1 > li b{ font-size: 1.8rem; margin: 2rem 0 1rem;}
    
    .div-tab2 > li > a{ height: 5rem; line-height: 5rem; font-size: 1.2rem;}
    .businessTabwr .tm{ padding: 2rem 1rem;}
    
    .business01-dl{ margin-bottom: 3rem;}
    .logo-bx{ margin-top: 1rem;}
    .logo-bx span{ margin: .4rem 1rem;}
    .logo-bx span img{ height: 3rem;}
    
    .business02-tx01{ display: block;}
    .business02-tx01::after{ content: ''; display: block; clear: both;}
    .business02-tx01 > li{ flex: none; width: 100%;}
    .business02-tx01 > li + li{ margin: 1rem 0 0 0;}
    .business02-tx01 > li + li::before{ top: -48px; left: 50%; margin: 0 0 0 -33px; transform: rotate(90deg);}
    .business02-tx02{ font-size: 1.8rem; padding: 1rem;}
    .business02-tx02::before{ width: 1.4rem; height: 1.4rem; background-size: 100%;}
    
    .business03-wr .tx01{ padding: 2rem;}
}


/* customer */
.customer01-wr .hd-img{ text-align: center;}
.customer01-wr .tx01{ margin: 60px 0 0 0; display: flex;}
.customer01-wr .tx01 > li{ flex: 1; border: #ddd 1px solid; border-top: #222 2px solid; padding: 25px 30px;}
.customer01-wr .tx01 > li + li{ margin-left: 30px;}
.customer01-wr .tx01 > li h4{ font-size: 20px; color: #222; }
.customer01-wr .tx01 > li b{ display: block; margin-top: 10px; color: #222;}
.customer01-wr .tx01 > li div{margin-top: 15px;}

.notice-bx{ border-top: #222 2px solid;}
.notice-bx .itm{ position: relative; border-bottom: #ddd 1px solid;}
.notice-bx .itm a{ padding: 40px 25px; display: block;}
.notice-bx .itm b{ display: block; color: #222; font-size: 20px;}
.notice-bx .itm span{ display: block;}
.notice-bx .itm a:hover{ background-color: #f8f8f8;}
.notice-bx .itm a::after{ content: ''; display: block; width: 30px; height: 30px; border-top: #eee 2px solid; border-right: #eee 2px solid; position: absolute; top: 50%; right: 30px; margin-top: -15px; transform: rotate(45deg);}
.notice-bx .itm a:hover::after{ border-color:#222;}

.tbl-view{ border-top: #222 2px solid;}
.tbl-view > .hd{ background-color: #f7f7f7;}
.tbl-view > .hd .tit{ padding: 20px 30px; color: #222; font-size: 20px; font-weight: 600; border-bottom: #ddd 1px solid;}
.tbl-view > .hd .date-tx{ border-bottom: #ddd 1px solid; padding: 15px 30px; text-align: right;}
.tbl-view > .hd .date-tx > li{ position: relative; display: inline-block;}
.tbl-view > .hd .date-tx > li b{ display: inline-block; margin-right: .5rem;}
.tbl-view > .hd .date-tx > li + li{ margin-left: 20px; padding-left: 20px;}
.tbl-view > .hd .date-tx > li + li::before{ content: ''; display: block; width: 1px; height: 10px; background-color: #e0e0e0; position: absolute; top: 50%; left: 0; margin-top: -5px;}
.tbl-view > .vew-td{ padding: 30px; border-bottom: #ddd 1px solid;}

.recruit-tx01{ display: flex;}
.recruit-tx01 > li{ position: relative; flex: 1; text-align: center; padding: 35px 0;}
.recruit-tx01 > li + li{ margin-left: 40px;}
.recruit-tx01 > li > i{ display: block; color: #ed1c24; font-weight: 600; font-size: 18px;}
.recruit-tx01 > li + li::before{ content: ''; width: 66px; height: 66px; display: block; background: url(../images/ic_aw2.png); position: absolute; top: 50%; left: 0; margin: -33px 0 0 -48px;}

.recruit-wr > dl{ display: flex;}
.recruit-wr > dl dt{ width: 180px; height: 50px; font-size: 20px; font-weight: 600; color: #fff; text-align: center; line-height: 50px; background-color: #97c13d}
.recruit-wr > dl dd{ flex: 1; padding: 0 0 0 20px;}
.recruit-wr > dl dd ul{ margin-left: -10px;}
.recruit-wr > dl dd ul::after{ content: ''; display: block; clear: both;}
.recruit-wr > dl dd ul li{ float: left; width: 180px; height: 50px; line-height: 50px; text-align: center; border: #97c13d 1px solid; margin: 0 0 20px 10px; color:#333;}
.recruit-wr > dl.recruit-tx0202 dt{ background-color: #1994d3;}
.recruit-wr > dl.recruit-tx0202 dd ul li{ border-color:#1994d3;}
.recruit-wr > dl.recruit-tx0203 dt{ background-color: #d3c819;}
.recruit-wr > dl.recruit-tx0204 dd ul li{ border-color:#d3c819;}

@media screen and (min-width:641px) and (max-width:1023px){ 
    .customer01-wr .tx01{ display: block; margin-left: -2%;}
    .customer01-wr .tx01::after{content: ''; display: block ;clear: both;}
    .customer01-wr .tx01 > li{ width: 48%; margin: 0 0 20px 0; float: left; flex: none;}
    .customer01-wr .tx01 > li + li{ margin-left: 0;}
    .customer01-wr .tx01 > li:nth-child(2n){ margin-left: 4%;}
}

@media screen and (max-width:640px){ 
    .customer01-wr .tx01{ margin: 3rem 0 0 0; display: block;}
    .customer01-wr .tx01 > li{ flex: none; width: 100%; padding: 2rem;}
    .customer01-wr .tx01 > li + li{ margin: 2rem 0 0 0;}
    .customer01-wr .tx01 > li h4{ font-size: 1.8rem;}
    
    .notice-bx .itm a{ padding: 1rem 4rem 1rem 1rem;}
    .notice-bx .itm b{ font-size: 1.6rem;}
    .notice-bx .itm a::after{ width: 2rem; height: 2rem; right: 1rem; margin-top: -1rem;}
    
    .tbl-view > .hd .tit{ padding: 1rem; font-size: 1.6rem;}
    .tbl-view > .hd .date-tx{ padding: .5rem 1rem; text-align: left;}
    .tbl-view > .vew-td{ padding: 1rem;}
    
    .recruit-tx01{ display: block;}
    .recruit-tx01 > li{ width: 100%; margin: 0; padding: 0;}
    .recruit-tx01 > li + li{ margin-top: 2rem; margin-left: 0;}
    .recruit-tx01 > li + li::before{ top: -48px; left: 50%; margin: 0 0 0 -33px; transform: rotate(90deg);}
    
    .recruit-wr > dl { display: block;}
    .recruit-wr > dl + dl{ margin-top: 3rem;}
    .recruit-wr > dl dt{ width: 100%; }
    .recruit-wr > dl dd{ flex: none; padding: 0; margin: 2rem 0 0 0;}
    .recruit-wr > dl dd ul{ margin-left: -2%;}
    .recruit-wr > dl dd ul li{ width: 48%; margin-left: 2%; margin-bottom: 1rem;}
}


/* main */
.main-vis{ position: relative; background-color: #000;}
.main-vis .swiper-slide{ height: 100vh; position: relative;}
.main-vis .bg{ position: absolute; top:0; left: 0; width: 100vw; height: 100vh; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;}
.main-vis .itm1 .bg{ background-image: url(../images/main_vis01.jpg);}
.main-vis .itm2 .bg{ background-image: url(../images/main_vis02.jpg);}
.main-vis .itm3 .bg{ background-image: url(../images/main_vis03.jpg);}
.main-vis .copy{ position: relative; text-align: center; color: #fff; display: table; width: 100%; height: 100vh;}
.main-vis .copy .inbx{ display: table-cell; vertical-align: middle; text-align: center;}
.main-vis .copy b{ display: block; font-size: 76px; font-weight: 600; font-family: 'Roboto';}
.main-vis .copy p{ margin-top: 30px;}
.main-vis .copy p span{ display: block; font-size: 40px;}
.main-vis .copy .view{ display: block; text-align: center; margin: 70px auto 0; width: 220px; height: 56px; line-height: 56px; color: #fff; border: #fff 1px solid; text-transform: uppercase; border-radius: 30px; font-weight: 600; font-size: 18px; font-weight: 600; font-family: 'Roboto';}
.main-vis .copy .view::after{ content: ''; display: inline-block; width: 16px; height: 12px; background: url(../images/ic_arr.png) 50% 50% no-repeat; margin-left: 1rem; vertical-align: 1px;}
.main-vis .copy .view:hover{ background-color: #e30613; border-color: #e30613;}
.main-vis .pag{ position: absolute; bottom: 50px; left: 0; width: 100%; z-index: 5; text-align: center;}
.main-vis .pag .swiper-pagination-bullet{ width: 12px; height: 12px; border-radius: 50%; opacity: 1; background-color: #fff; margin: 0 5px;}
.main-vis .pag .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color: #e30613;}
.main-vis .prev{ position: absolute; display: block; width: 40px; height: 40px; border-top: #fff 2px solid; border-right: #fff 2px solid; top: 50%; left: 60px; margin-top: -20px; transform: rotate(-134deg); z-index: 9;}
.main-vis .next{ position: absolute; display: block; width: 40px; height: 40px; border-top: #fff 2px solid; border-right: #fff 2px solid; top: 50%; right: 60px; margin-top: -20px; transform: rotate(45deg); z-index: 9;}


.m-serv{ padding: 140px 0; background: url(../images/main_bg.jpg) 50% 50% no-repeat; background-size: cover;}
.m-serv .m-tit{ text-align: center; margin-bottom: 60px; }
.m-serv .m-tit .tit{ font-size: 60px; color: #222; font-weight: 900; font-family: 'Roboto';}
.m-serv .m-tit .tit span{ display: inline-block; position: relative;}
.m-serv .m-tit .tit span::after{ content: ''; position: absolute; top: 5px; right: -20px; display: block; width: 12px; height: 12px; border-radius: 50%; background-color: #e30613;}
.m-serv .tx01{ max-width: 1200px; margin: 0 auto;}
.m-serv .tx01::after{ content: ''; display: block; clear: both;}
.m-serv .tx01 > li{ position: relative; float: left; width: 50%; padding: 40px; background-color: #000; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; text-align: center;}
.m-serv .tx01 > li::before{ content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background-color:rgba(119,180,22,.35); border: #77b416 10px solid; opacity: 0; -webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition:all 0.2s ease-in-out;}
.m-serv .tx01 > li:hover::before{ opacity: 1;}
.m-serv .tx01 > li.itm1{ background-image: url(../images/m_serv1.jpg); }
.m-serv .tx01 > li.itm2{ background-image: url(../images/m_serv2.jpg); }
.m-serv .tx01 > li.itm3{ background-image: url(../images/m_serv3.jpg); }
.m-serv .tx01 > li.itm4{ background-image: url(../images/m_serv4.jpg); }
.m-serv .tx01 > li h3{ color: #fff; font-size: 30px; text-align: center; padding-bottom: 15px; position: relative;}
.m-serv .tx01 > li h3::after{ content: ''; position: absolute; width: 30px; height: 2px; background-color: #e30613; bottom: 0; left: 50%; margin-left: -15px;}
.m-serv .tx01 > li p{ position: relative; opacity: .75; color: #fff; margin-top: 15px; }
.m-serv .tx01 > li .view{ position: relative; display: block; margin-top: 25px; font-size: 18px; color: #fff; font-weight: 900; font-family: 'Roboto'; text-transform: uppercase;}
.m-serv .tx01 > li .view:after{ content: ''; display: inline-block; width: 16px; height: 12px; background: url(../images/ic_arr.png) 50% 50% no-repeat; margin-left: 1rem; vertical-align: 1px;}

.m-vision{ padding: 140px 0; position: relative; background: url(../images/main_bg2.jpg) 50% 50% no-repeat; background-size: cover;}
.m-vision .m-tit{ text-align: center; margin-bottom: 60px; }
.m-vision .m-tit .tit{ font-size: 60px; color: #fff; font-weight: 900; text-transform: uppercase; font-family: 'Roboto';}
.m-vision .m-tit .tit span{ display: inline-block; position: relative;}
.m-vision .m-tit .tit span::after{ content: ''; position: absolute; top: 5px; right: -20px; display: block; width: 12px; height: 12px; border-radius: 50%; background-color: #fff;}
.m-vision .tx01{ font-size: 40px; color: #fff; text-align: center;}
.m-vision .tx01 span{ display: block;}
.m-vision .tx02{ font-size: 22px; color: #fff; text-align: center; margin-top: 25px;}
.m-vision .tx02 span{ display: block;}
.m-vision .view{ display: block; text-align: center; margin: 70px auto 0; width: 220px; height: 56px; line-height: 56px; color: #fff; border: #fff 1px solid; text-transform: uppercase; border-radius: 30px; font-weight: 600; font-size: 18px; font-weight: 600; font-family: 'Roboto';}
.m-vision .view::after{ content: ''; display: inline-block; width: 16px; height: 12px; background: url(../images/ic_arr.png) 50% 50% no-repeat; margin-left: 1rem; vertical-align: 1px;}
.m-vision .view:hover{ background-color: #77b416; border-color: #77b416;}

@media screen and (min-width:641px) and (max-width:1023px){ 
    .main-vis .copy{ padding: 0 4.5vw;}
    .main-vis .copy p span{ display: inline;}
}

@media screen and (max-width:640px){ 
    .main-vis .copy{ padding: 0 4.5vw;}
    .main-vis .copy b{ font-size: 3rem;}
    .main-vis .copy p{ padding: 0 3rem;}
    .main-vis .copy p span{ font-size: 1.8rem; display: inline;}
    .main-vis .copy .view{ margin-top: 3rem; height: 4rem; line-height: 4rem; width: 16rem; font-size: 1.4rem;}
    .main-vis .copy .view::after{ vertical-align: -1px;}
    .main-vis .prev{ left: 1rem; width: 2rem; height: 2rem; margin-top: -1rem;}
    .main-vis .next{ right: 1rem; width: 2rem; height: 2rem; margin-top: -1rem;}

    .m-serv{ padding: 7rem 4.5vw;}
    .m-serv .m-tit{ margin-bottom: 3rem;}
    .m-serv .m-tit .tit{ font-size: 3.4rem;}
    .m-serv .m-tit .tit span::after{ width: .8rem; height: .8rem;}
    .m-serv .tx01 > li{ width: 100%; float: none; padding: 3.5rem 1rem;}
    .m-serv .tx01 > li h3{ font-size: 2.4rem;}
    .m-serv .tx01 > li p{ margin-top: 1rem;}
    .m-serv .tx01 > li .view{ font-size: 1.4rem; margin-top: 1.5rem;}
    
    .m-vision{ padding: 7rem 4.5vw;}
    .m-vision .m-tit{ margin-bottom: 3rem;}
    .m-vision .m-tit .tit{ font-size: 3.4rem;}
    .m-vision .m-tit .tit span::after{ width: .8rem; height: .8rem;}
    .m-vision .tx01{ font-size: 2.4rem;}
    .m-vision .tx01 span{ display: inline;}
    .m-vision .tx02{ font-size: 1.6rem;}
    .m-vision .tx02 span{ display: inline;}
    .m-vision .view{ margin-top: 3rem; height: 4rem; line-height: 4rem; width: 16rem; font-size: 1.4rem;}
    .m-vision .view::after{ vertical-align: -1px;}
}