/* layout */
body {font-size: 12px;}

header {position: absolute; top: 0; left: 0; ; width: 100%; height: 120px; z-index: 100}
header > div {position:relative; width: 1100px; height: 120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between}
header h1 {width: 80px; height: 60px; background: url("../images/logo_web.png") no-repeat}
header h1 a {width: inherit; height: inherit; display: block; text-indent: -9000px}
header nav {color: #fff; font-size: 1.3em}
header nav a {display: inline-block; margin:0 5px; color: #fff}
footer{width:100%; height: 200px; display: flex; align-items:flex-start; justify-content: space-between}
footer > div {max-width: 1100px; margin: 0 auto; padding-top: 30px; font-size: 1em; color: #747879}
footer ul {margin-bottom: 20px}
.main article {padding: 50px 0}
.main article > div {width: 1200px; margin: 0 auto; padding: 0 50px}

.up {color: #e7200f}
.dn {color: #007bf5}

.fix {position: fixed; bottom: 0; left: 0; width: 100%; height: 80px; text-align: center; padding-top: 10px; background: #fff; z-index: 1000}
.fix button {width:540px; height: 60px; line-height: 60px; border-radius: 10px; text-align: center; color: #fff; font-size: 2em; background: #f6881d;}

.visual {width: 100%; height: 720px; font-family: 'NanumSquare', sans-serif}
/*.visual .vsl1 {background-image: url("../images/visual_01.jpg")}
.visual .vsl2 {background-image: url("../images/visual_02.jpg")}
.visual .vsl3 {background-image: url("../images/visual_03.jpg")}
.visual .vsl4 {background-image: url("../images/visual_04.jpg")}*/
.visual dl {max-width: 50%; min-width: 690px; margin: 0 auto; font-style: italic}
.visual dt {font-size: 3.6em; color: #ea2965; font-weight: 600; margin-bottom: 10px; white-space: nowrap}
.visual dd {font-size: 2.4em; white-space: pre-line}
.swiper-container {width: 100%; height: 100%;}
.swiper-container .swiper-slide {display: flex; align-items: center; justify-content:center; color: #fff; background-repeat: no-repeat; background-size: cover; background-color: #0e0f13}
.swiper-pagination-bullet {width: 10px; height: 10px; background: #fff}
.swiper-pagination-bullet-active {background: #23aaff}

.review {width: 100%; min-height: 720px; background: #f2f4f8}
.review-top dt {display: none}
.review-top dt textarea {width: calc(100% - 2px); height: 300px}
.review-top dd {display: flex; justify-content: flex-end; margin-bottom: 10px; column-gap: 5px}
.review-top dd button {border: none; border-radius: 5px; padding: 5px 10px; font-size: 1.25em; color: #fff; background: #3754d1}
.review-top dd input[type='button'] {border: none; border-radius: 5px; padding: 5px 10px; font-size: 1.25em; color: #fff; background: #3754d1; display: none}
.review-top dd button:after {display: block; content: '후기작성'}
.review-top dl.on dt {display: block}
.review-top dl.on dd  input[type='button'] {display: block}
.review-top dl.on dd button {color: #3754d1; border: 1px solid #3754d1; background: #fff}
.review-top dl.on dd button:after {display: block; content: '취소'}
.review-top span {color: #ea2965}
.review-body dl {padding: 10px 20px; border-radius: 10px; margin-bottom: 20px; box-shadow: 1px 1px 2px rgba(0, 0, 0, .1); background: #fff}
.review-body dl dt {position: relative; display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid #eaebec; font-size: 1.25em; padding-bottom: 10px}
.review-body dl dt span {padding-left: 20px}
.review-body dl dt p.date {position: absolute; right: 0; color: #999}
.review-body dl dt p button {margin-left: 10px; padding: 0 5px; border: 1px solid #ccc; border-radius: 15px; color: #777; background: #fff}
.review-body dl dd {position: relative; padding: 10px 0; overflow: hidden}
.review-body dl dd .mlp {white-space: pre-line; font-size: 1.25em; -webkit-line-clamp: 5; margin-bottom: 20px}
.review-body dl dd .mlp + div {position: absolute; top: 120px; width: 100%; text-align: center}
.review-body dl dd .mlp + div button {background-color: transparent}
.review-body dl dd .mlp + div button:after {display: block; content: '\251B'; transform: rotate(45deg)}
.review-body dl dd.on .mlp {display: block}
.review-body dl dd.on .mlp + div {position: static}
.review-body dl dd.on .mlp + div button:after {transform: rotate(225deg)}
.review-bot  {text-align: center}
.review-bot button {padding: 10px 50px; border-radius: 10px; margin-bottom: 20px; box-shadow: 1px 1px 2px rgba(0, 0, 0, .1); background: #fff}
.review-write {position: relative}
.review-write.on {margin-bottom: 30px}
.review-write.on .emt-box {display: block}
.review-write.on iframe {background: #fff}
.emt {width: 50px; height: 50px; border-radius: 50%; background-image: url("../images/emt.png"); background-size: 240px auto; background-color: #cfeaeb}
.emt:hover {background-color: #9aeaeb}
.emt.ty1 {background-position: -5px -6px}
.emt.ty2 {background-position: -62px -5px}
.emt.ty3 {background-position: -123px -4px}
.emt.ty4 {background-position: -187px -4px}
.emt.ty5 {background-position: -4px -64px}
.emt.ty6 {background-position: -64px -65px}
.emt.ty7 {background-position: -124px -65px}
.emt.ty8 {background-position: -185px -65px}
.emt.ty9 {background-position: -4px -126px}
.emt.ty10{background-position: -66px -122px}
.emt.ty11{background-position: -124px -125px}
.emt.ty12{background-position: -187px -123px}
.emt-box {position: absolute; left: 0; bottom: 0; display: none}
.emt-box ul {position: relative}
.emt-box .emt-btn button {display: flex; padding: 1px; align-items: center; justify-content: space-between; border-radius: 15px; background: #fff}
.emt-box .emt-btn figure {zoom:.6}
.emt-box .emt-btn span {width: 30px; text-align: center; color: #99a4d1}
.emt-box .emt-lst {position: absolute; width: 250px; display: none; flex-wrap: wrap; gap: 10px; border: 1px solid #cacbcd; padding: 10px 0 10px 10px; border-radius: 5px; background: #fff; z-index: 10}
.emt-box.on .emt-lst {display: flex}
.emt-box.on .emt-btn span {transform: rotate(180deg)}

.title {font-size: 4em; text-transform: uppercase; font-weight: 600; text-align: center; margin-bottom: 10px}
.explan {font-size: 2em; text-align: center; color: #767778; margin-bottom: 30px}
.process {width: 100%; height: 720px; background: #ebedef}
.process ul {position: relative; height: 450px;}
.process ul:before {content: ''; display: block; position: absolute; top: 75px; left: 150px; width: 260px; height: 310px; background: url("../images/prc_bg.png") no-repeat; z-index: 10}
.process ul li {position: absolute; border-radius: 15px; background: #fff; z-index: 50}
.process ul li p {position: relative; width: inherit; height: inherit; display: flex; align-items: center; justify-content:center; }
.process ul li p:before {content:''; display: block; width: 100px; height: 100px; background-image: url("../images/prc_icon.png"); background-repeat: no-repeat}
.process ul li p:after {content:''; display: block; position: absolute; left: -80px; width: 100px; height: 100px; background-image: url("../images/prc_arr.png"); background-repeat: no-repeat}
.process ul li p span {position: absolute; left: 0; bottom: 10%; width: 100%; text-align: center; font-size: 2em; text-transform: uppercase; z-index: 100} 
.process ul li:nth-child(1) {top: 20px; left: 0; width: 300px; height: 200px;}
.process ul li:nth-child(1) p:before {background-position: 0 0}
.process ul li:nth-child(1) p:after {display: none}
.process ul li:nth-child(2) {bottom: 0; left: 0; width: 300px; height: 200px;}
.process ul li:nth-child(2) p:before {background-position: -100px 0}
.process ul li:nth-child(2) p:after {display: none}
.process ul li:nth-child(3) {top: 80px; left: 430px; width: 300px; height: 300px; z-index: 60}
.process ul li:nth-child(3) p:before {background-position: -200px 0}
.process ul li:nth-child(4) {top: 80px; right: 0; width: 300px; height: 300px;}
.process ul li:nth-child(4) p:before {background-position: -300px 0}
.process ul li:hover {color: #fff; background: #4c648c}
.process ul li:hover:nth-child(1) p:before {background-position: 0 -100px}
.process ul li:hover:nth-child(2) p:before {background-position: -100px -100px}
.process ul li:hover:nth-child(3) p:before {background-position: -200px -100px}
.process ul li:hover:nth-child(3) p:after {left: -70px; transition:all .3s}
.process ul li:hover:nth-child(4) p:before {background-position: -300px -100px}
.process ul li:hover:nth-child(4) p:after {left: -70px; transition:all .3s}

.material {background: #f2f4f8}
.material ul {display: flex; align-items: center; justify-content:flex-start; flex-wrap: wrap; margin-bottom: 30px; padding:10px 0; border: 1px solid #e8ebee; background: #fff}
.material ul h3 {width: 90%; margin: 0 5% 10px; line-height: 40px; font-size: 2em; color: #213967; border-bottom: 1px solid #e8ebee}
.material ul li {width: 40%; margin: 0 5% 10px; display: flex; align-items: center; justify-content: space-between;}
.material ul li label {flex: 1; font-size: 1.4em}
.material ul li p {flex: 1; font-size: 1.4em; text-align: right}

.estate {width: 100%; height: 540px; color: #fff; padding-top: 80px; background: url("../images/estate_bg.jpg") no-repeat center; background-size: cover}
.estate h3 {color: #dadbdf}
.estate > div {text-align: center; padding-top: 90px}
.estate a {display: inline-block; width: 540px; height: 80px; line-height: 80px; border-radius: 20px; font-size: 2.5em; color: #fff; background: #ff7800}

.info {width: 100%; height: 640px}
.info > div {padding:80px 0 0;}
.info ul {display: flex; align-items:flex-start; justify-content:center; padding-top: 60px;}
.info ul li { margin: 0 20px}
.info ul li p {width: 80%; margin: 0 auto; text-align: center; font-size: 1.5em}

.feature {width: 100%; height: 700px; background: #ebedef}
.feature > div {padding:80px 0 0;}
.feature ul {display: flex; align-items:flex-start; justify-content:center; padding-top: 60px}
.feature ul li {margin: 0 20px}
.feature ul li p {width: 100%; height: 80px; margin: 0 auto; text-align: center; font-size: 1.5em}
.feature ul li figure {max-height: 1000px; overflow: hidden}
.feature ul li img {width: 360px; height:auto;}

.class {color: #fff; background: #242f4c}
.class div {width: 1000px; padding-top: 50px}
.class dl {font-size: 1.5em; margin-bottom: 50px}
.class dl dt {font-size: 1.6em; color: #88e7ff; margin-bottom: 20px}
.class dl dd {font-size: 1.1em}
.class dl dd span {font-size: .8em}

.product {background: #f1f2f5}
.product div {padding-top: 30px}
.product ul {display: flex; align-items:flex-start; justify-content:space-between; margin-bottom: 50px}
.product ul li {position: relative; flex: 1; height: 240px; display: flex; align-items: center; justify-content:center; flex-direction: column; margin: 0 20px; padding-top: 50px; border-radius: 20px; background: #fff}
.product ul li:first-child h3 {background: #de3f19}
.product ul li h3 {position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: 60px; line-height: 60px; border-radius: 10px; text-align: center; color: #fff; font-size: 2em; background: #f6881d}
.product ul li p {font-size: 2em; color: #646771}
.product dl {display: flex; align-items: center; justify-content:center; flex-wrap: wrap; padding: 20px}
.product dl dt {width: 100%; margin-bottom: 20px}
.product dl dt h3 {font-size: 2.5em; color: #242f4c; margin-bottom: 5px}
.product dl dt p {font-size: 1.5em; margin-bottom: 5px}
.product dl dd {height: 100px; flex: 1; display: flex; align-items: center; justify-content:center; flex-direction: column; margin-right: 20px; border: 1px solid #e8ebee; border-radius: 10px; background: #fff}
.product dl dd label {font-size: 1.5em; text-align: center}
.product dl dd p {font-size: 2.5em; text-align: center}

.exp dl {width: 1000px; margin: 0 auto; font-size: 1.25em; padding-top: 20px}
.exp dt {color: #e7200f; margin-bottom: 5px}
.exp dd {font-size: .935em}

/* mobile */
@media only screen and (max-width:741px){
    header > div {width: 100%; height: 60px; padding:0 5%}
    footer > div {max-width: 100%}
    .main article > div {width: 100%; padding: 0 10px}

    .visual {height: 60vh; font-size: 8px}
    .visual dl {max-width: 75%; min-width: 50%}
    .visual dt {white-space: normal; padding-left:5%}
    .visual dd {white-space: normal; padding-left:5%}
    .swiper-container .swiper-slide {background-position: center}
    
    .title {font-size: 3em}
    .explan {font-size: 1.5em; margin: 0 10%}
    
    .process ul:before {left: 50%; width: 190px; height: 190px; margin-left: -95px; transform: rotate(90deg); background-size: contain}
    .process ul li p {width: 100%; flex-direction: column; justify-content: flex-start; padding-top: 10px}
    .process ul li p:before {width: 80px; height: 70px; background-size: auto 160px}
    .process ul li p:after {top: -40px; left: auto; width: 60px; height: 60px; transform: rotate(90deg); background-size: contain}
    .process ul li:nth-child(1) {top: 30px; left: 5%; width: 40%; height: 120px}
    .process ul li:nth-child(1) p:before {background-position: 0 0}
    .process ul li:nth-child(2) {top: 30px; left: auto; bottom: auto; right: 5%; width: 40%; height: 120px}
    .process ul li:nth-child(2) p:before {background-position: -80px 0}
    .process ul li:nth-child(3) {top: 250px; left:50%; width: 60%; height: 120px; margin-left: -30%; z-index: 60}
    .process ul li:nth-child(3) p:before {background-position: -160px -5px}
    .process ul li:nth-child(4) {top: 400px; left:50%; width: 60%; height: 120px; margin-left: -30%; }
    .process ul li:nth-child(4) p:before {background-position: -240px 0}
    .process ul li:hover:nth-child(1) p:before {background-position: 0 -80px}
    .process ul li:hover:nth-child(2) p:before {background-position: -80px -80px}
    .process ul li:hover:nth-child(3) p:before {background-position: -160px -85px}
    .process ul li:hover:nth-child(3) p:after {left: auto}
    .process ul li:hover:nth-child(4) p:before {background-position: -240px -80px}
    .process ul li:hover:nth-child(4) p:after {left: auto}
    .process ul li p span {font-size: 1.5em}
    
    .material div {padding-top: 30px}
    .material ul {font-size:10px}
    .material ul li {width: 100%}
    
    .estate {height: 50vh}
    .estate > div {padding-top: 60px !important}
    .estate a {width: 80%; font-size:1.8em}
    
    .info {height: auto}
    .info > div {padding-top: 30px}
    .info ul {flex-direction: column; align-items:center; margin: 0 30px}
    .info ul li {margin-bottom: 20px}
    .info figure img {width: 100%}
    .info ul li p {width: 100%;}
    .class div {width: 90%; font-size: 10px}
    
    .product {font-size: 10px}
    .product ul {flex-direction: column; align-items:center}
    .product ul li {flex:auto; width: 90%; height: 180px; margin-bottom: 20px}
    .product ul li h3 {height: 40px; line-height: 40px}
    .product dl dd {flex:auto; width: 80%; height: 70px; margin-bottom: 5px}
    
    .feature {height: auto}
    .feature ul {flex-direction: column; }
    .feature ul li {width: 100%; margin:0 0 20px; padding: 0 20px}
	.feature ul li img {width: 100%;}

    .fix {position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; text-align: center; padding-top: 5px; background: #fff; z-index: 1000}
    .fix button {width:80%; height: 40px; line-height: 40px; border-radius: 10px; text-align: center; color: #fff; font-size: 1.5em; background: #f6881d;}
    
    .exp dl {width: 90%}
    .exp dd {font-size: .875em}
    .exp dd p {margin-bottom: 10px}
    
    .review-body dl dt p.date {display: flex; flex-direction: column-reverse; align-items: flex-end}
    .review-body dl dt p.date span {font-size: .8em}
}