/* Rizon Potal - produce */
@font-face { font-family: 'GmarketSans'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'GmarketSans'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'GmarketSans'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: 700; font-style: normal; }

@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff'); font-weight: 100; font-style: normal;}
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal;}
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal;}
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff'); font-weight: 500; font-style: normal;}
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Pretendard-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal;}
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff'); font-weight: 700; font-style: normal;}
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal;}

/* Resets */
*,
*:after,
*:before {	box-sizing: border-box; margin: 0; padding: 0}
html, body { height: 100%}
img{max-width: 100%; vertical-align: middle;}
ul, ol, li { list-style: none}
table{width:100%;border-collapse:collapse;border-spacing:0;}
caption{width: 0; height: 0; margin: 0; padding: 0; overflow: hidden; border: 0; text-indent: -999em;}
th, td {word-break:break-all;}
/* 공통 */
a{text-decoration:none; color: inherit}
a:focus{outline:2px solid black;}
input[type="text"],input[type="password"],textarea{
	appearance:none;
	border:1px solid #ccc;
	border-radius: 0;
	font: inherit;
}
input[type="button"],input[type="submit"]{
	appearance:none ;
	/* border-radius: 0; */
	font: inherit;
	/* border: 0 */
	cursor: pointer;
}
input[type="checkbox"]{margin: 0;}
input[type="radio"],input[type="checkbox"],label{vertical-align: middle;}
select{
	border: 1px solid #ccc;
	border-radius: 0px;
	appearance: none;
	font: inherit;
	font-size: 1em;
	background: #fff url('/images/common/select.png') 95% center no-repeat;
	padding: 0 25px 0 10px; color: inherit
}
select::-ms-expand {
    display: none;
}
button, label {cursor: pointer;margin: 0;padding: 0;border: none;}
.hide, caption, legend, .hidden, .sr-only {
    position: absolute;
    left: -300px;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    background: none;
    line-height: 0;
    overflow: hidden;
}

/********************************************************
* Animation
*********************************************************/
html:not(.old-ie) .animate-element{transition:width .3s ease, height .3s ease, visibility 1.1s ease, opacity 1.1s ease, transform 1.1s ease;}
html:not(.old-ie) .fadeIn{visibility:hidden;opacity:0}
html:not(.old-ie) .fadeIn.animated, html:not(.old-ie) body.is_mobile .fadeIn{visibility:visible;opacity:1}
html:not(.old-ie) .fadeInUp{visibility:hidden;opacity:0;transform:translateY(110px)}
html:not(.old-ie) .fadeInUpY{visibility:hidden;opacity:0;transform:translateY(-40%)}
html:not(.old-ie) .fadeInUp.animated, html:not(.old-ie) body.is_mobile .fadeInUp{visibility:visible;opacity:1;transform:translateY(0)}
html:not(.old-ie) .fadeInUpY.animated, html:not(.old-ie) body.is_mobile .fadeInUpY{visibility:visible;opacity:1;transform:translateY(-50%)}
html:not(.old-ie) .fadeInDown{visibility:hidden;opacity:0;transform:translateY(-110px)}
html:not(.old-ie) .fadeInDown.animated, html:not(.old-ie) body.is_mobile .fadeInDown{visibility:visible;opacity:1;transform:translateY(0)}
html:not(.old-ie) .fadeInRight{visibility:hidden;opacity:0;transform:translateX(-110px)}
html:not(.old-ie) .fadeInRightY{visibility:hidden;opacity:0;transform:translate(-110px, -50%)}
html:not(.old-ie) .fadeInRight.animated, html:not(.old-ie) body.is_mobile .fadeInRight{visibility:visible;opacity:1;transform:translateX(0)}
html:not(.old-ie) .fadeInRightY.animated, html:not(.old-ie) body.is_mobile .fadeInRightY{visibility:visible;opacity:1;transform:translate(0, -50%)}
html:not(.old-ie) .fadeInLeft{visibility:hidden;opacity:0;transform:translateX(110px)}
html:not(.old-ie) .fadeInLeft.animated, html:not(.old-ie) body.is_mobile .fadeInLeft{visibility:visible;opacity:1;transform:translateY(0)}

@media (max-width:970px) {
	html:not(.old-ie) .fadeInUp{visibility:visible;opacity:1;transform:translateY(0)}
	html:not(.old-ie) .fadeInRight{visibility:visible;opacity:1;transform:translateX(0)}
	html:not(.old-ie) .fadeInLeft{visibility:visible;opacity:1;transform:translateX(0)}
}




/* LAYOUT */
body{font-family:'Lato','Pretendard', 'AppleGothic', 'Apple SD Gothic Neo', 'Malgun Gothic','맑은 고딕', '돋음','Dotum',Tahoma, sans-serif; color: #444}
#mainVisual{word-break:keep-all; position: relative; height: 100%;}
#mainVisual{background: #fff url('../images/produce/bg.jpg') center top no-repeat; background-size:cover; transition: all ease-in-out .4s; position: relative;animation:visualAnimation 1s forwards linear;    height: 100vh;
    overflow: hidden;}
@keyframes visualAnimation {0%{transform:scale(1.1);}100%{transform:scale(1);}}
#mainVisual.wheel .h100{display: table; width: 100%; height: 100%; table-layout: fixed; max-width:1180px; margin:  auto;}
#mainVisual.wheel .v{display: table-cell;vertical-align: middle; text-align: center; color: #fff}
#mainVisual.wheel .v h1 {position: absolute;	top: 3em;	left: 50%;	margin-left: -96px;}
#mainVisual.wheel .v h2 { font-size: 4em; font-family: 'GmarketSans';font-weight: 700;line-height: 1.2;margin-bottom: 1em; animation:visualTextAnimation 1s forwards linear;}
#mainVisual.wheel .v p {font-size: 1.6em; line-height: 1.4;animation:visualTextAnimation 1s forwards linear;}
@keyframes visualTextAnimation {0%{visibility:hidden; opacity:0; transform:translateY(40px);}100%{visibility:visible; opacity:1; transform:translateY(0);}}

.scroll-down{position: absolute; left: 50%; color: #fff; font-size: 12px; bottom: 5%; z-index: 3; animation: scroll 2.5s infinite}
.scroll-down img{display: block; margin: 45px auto 0}
.scroll-down .arrow{position: relative; width: 8px; height: 52px; margin: 18px auto 0}
.scroll-down .arrow:after,.scroll-down .arrow:before{position:absolute; content:''}
.scroll-down .arrow:before{width:1px; height:100%; background:#ccc; left:50%; top:0}
.scroll-down .arrow:after{width:8px; height:8px; border:1px solid #ccc;transform:rotate(-135deg); border-right:0; border-bottom:0; bottom:0;}
.scroll-down .txt{transform: rotate(180deg); display: block; writing-mode: tb-rl; position: relative; white-space: nowrap}

.scroll-down .txt{position: relative; display: inline-block; overflow: hidden;}
.scroll-down .txt span{position: absolute;
  top: 0;
  left: 0;
  color: #333;
  overflow: hidden;  height: 0; white-space: nowrap;}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #aaa;
  }
}

@keyframes scroll {
  0%,100%{
  bottom:4%
  }
  50% {
  bottom:5%
  }
} 

.page h3 { text-align: center;font-family: 'GmarketSans';font-weight: 400; font-size: 2.5em; line-height: 1.1; clear: both; margin-bottom: 1em;color: #111;letter-spacing: -.06em;}
.page h3 strong {font-weight: 700; display: block;letter-spacing: normal;}
.page h3 span { display: block; color: #18abc1; text-transform: uppercase; font-size: .4em; font-family:'Lato';letter-spacing: .3em;margin-bottom: 1em; }
.page ul { overflow: hidden}
.container { margin: 7em auto; max-width:1200px; position: relative}


.keyPoint {}
.keyPoint li { float: left; width: 49%; border-top: 1px solid #ddd;padding: 1.25em .5em; position: relative; padding-left: 4.5em; min-height: calc(2.5em + 50px) ;line-height: 55px; font-size: 1.15em; font-weight: 500;letter-spacing: -.05em}
.keyPoint li:nth-child(even) { float: right}
.keyPoint li:nth-child(5),.keyPoint li:nth-child(6),.keyPoint li:nth-child(7),.keyPoint li:nth-child(8) {line-height: 30px;}
.keyPoint li:nth-child(8),.keyPoint li:nth-child(9) {border-bottom: 1px solid #ddd;}
.keyPoint li img { width: 50px; position: absolute; left: 1em; top:1em;top: 50%;margin-top: -25px;}
.keyPoint li small { display: block;line-height: 1em; font-weight: 400; font-size: 14px; position: relative; color: #666;margin-left: 2.2em; }
.keyPoint li span { color: #18abc1; display: inline-block;margin-right: 5px; font-weight: 400; }


.process {}
.process h4 { color: #16bddf; font-size: 1.5em}
.process li ul { margin-top: 5px}
.process li li { font-weight: 300; padding-left: 10px; position: relative; margin-top: 3px}
.process li li:before {content: '';position: absolute;top: 8px;left: 0;width: 5px;height: 1px;background: #fff; }
.process > ul > li { float: left; width: 32%; margin-left: 2%; background: #6a6a6a url("../images/produce/processBg_01.jpg") no-repeat 50% 50%; background-size: cover; min-height: 270px;
	padding: 9em 1.5em 0 1.5em; color: #fff; margin-bottom: 2%}
.process > ul > li:nth-child(1), .process > ul > li:nth-child(4) {margin-left: 0}
.process > ul > li:nth-child(1) {background-image: url("../images/produce/processBg_01.jpg")}
.process > ul > li:nth-child(2) {background-image: url("../images/produce/processBg_02.jpg")}
.process > ul > li:nth-child(3) {background-image: url("../images/produce/processBg_03.jpg")}
.process > ul > li:nth-child(4) {background-image: url("../images/produce/processBg_04.jpg");padding-top: 7.5em}
.process > ul > li:nth-child(5) {background-image: url("../images/produce/processBg_05.jpg");padding-top: 7.5em}
.process > ul > li:nth-child(6) {background-image: url("../images/produce/processBg_06.jpg");padding-top: 7.5em}



.produceCopy { background: #007492 url("../images/produce/bg_txt.jpg") center top no-repeat; background-size:cover; text-align: center; color: #fff; padding: 5em 15px;font-size: 2em;}

.produceWrite{}
.produceWrite .inputWrap { overflow: hidden}
.produceWrite .inputWrap > ul {float: left;width: calc(50% - 1.125rem);}
.produceWrite .inputWrap > div{float: right;width: calc(50% - 1.125rem);}
.produceWrite .inputWrap .item{border:1px solid #ccc;  margin: 0 0 1.125rem 0;}
.produceWrite input[type="text"],.produceWrite input[type="password"],.produceWrite select{width: 100%; height: 60px; padding: 0 30px; border:0}
.produceWrite input[type="text"]:focus::placeholder{color: #000}
.produceWrite textarea{display: block; padding: 30px; height: 220px; width: 100%; border:0}
.produceWrite li{float: left; width:100%}

.agree_box_w{font-size: 14px;}
.agree_box_w .t{display: block; font-size: 1.25rem;  font-weight: 500; margin-bottom: 10px;margin-top: 20px;}
.agree_box_w .tit{font-size: 1.25rem; margin-bottom: 2em; font-weight: 500; line-height: 1.15;}
.agree_box_w .box{border:1px solid #ccc; padding: 30px; background: #fff; max-height: 300px; overflow-y: auto; font-size: 14px;}
.agree_box_w .agree{margin-top: 1.25rem; text-align: left;  color: #666}
.agree_box_w .agree > *{display: inline-block; vertical-align: middle;}
/* .agree_box_w .radio-st1{margin-left: 1em;}
.agree_box_w .radio-st1 label{background: #f7f7f7} */

.radio-st2{margin-bottom:-5px}
.radio-st2 > *{display: inline-block; margin: 0 1em 5px 0;}
.radio-st2 > *:last-child{margin-right: 0;}
.radio-st2 input{border: 0;  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 0;} /* clip: rect(0 0 0 0); */
.radio-st2 input:focus + label:before{border:1px dotted #000;z-index:1;content: '';left: 0;right: 0;bottom: 0;top:0;margin: auto;position: absolute;}
.radio-st2 label{position: relative;display: block;background: #fff;padding-left: 1.8rem}
.radio-st2 input + label span{position: absolute; display: block; width: 1.25rem; height: 1.25rem; top:50%; margin-top: -.625rem;; left: 0; border:1px solid #dedede; background: #fff;}
.radio-st2 input:checked + label span:before{position: absolute; width: .625rem; height: .625rem; background:#18b3d3; content: ''; top:50%; left: 50%; transform:translate(-50%,-50%);}
.radio-st2.ck  input + label span,.radio-st2.ck input:checked + label span:before{border-radius:0}
.radio-st2.block > *{display: block;}

.btn-submit_w{margin-top: 59px; text-align: center; font-size: 14px; font-weight: 300;}
.btn-submit{ color:  #fff; width: 9.375rem; height: 2.813rem; text-align: center; border-radius:100px; transition:all ease-in-out .15s;background-color: #18abc1;}
.btn-submit:hover,.btn-submit:focus{background: #333; color: #fff}
a.btn-submit{display: inline-block; line-height: 2.750rem;}

.produceTel { background-color: #222; color: #fff; text-align: center; padding: 3em 15px}
.produceTel ul {margin: 0 auto; max-width: 1200px; display: flex; justify-content: center; align-items: center; letter-spacing: -0.03em; }
.produceTel li:first-child {font-size: 40px;font-weight: 900;letter-spacing: -0.03em;}
.produceTel li:last-child {color: #999;font-size: 1.25rem;font-weight: 400;position: relative;padding-left: 50px;margin-left: 50px;letter-spacing: -0.07em;}
.produceTel li:last-child:before{position: absolute; left: 0; top:50%; width: 1px; height: 2em; margin-top: -1em;; background: #3e3e3e; content: ''}



.site-footer { text-align: center; padding:2em 0; border-top: 1px solid #eee}
.site-footer .container {margin: 0 auto; font-size: 12px;text-transform: uppercase;font-weight: 300;letter-spacing: 0;}
.site-footer .biz-info  {font-size: 13px;}
.site-footer .biz-info { font-size: 13px;  }
.site-footer .biz-info span { display: inline-block; margin-left: 5px;font-weight: 300; }
.site-footer .biz-info span:first-child {margin-left: 0px}
.site-footer .biz-info span strong {font-weight: 400; }
.site-footer  p{margin-bottom: 5px; line-height: 1.4;}


@media only screen and (max-width: 1200px){
	#mainVisual.wheel .v h1 { width: 150px; margin-left: -75px;}
	.container { padding: 0 15px}
	.keyPoint li { float: none !important ; width: inherit !important; margin: 0!important}
	.keyPoint li:nth-child(8) {border-bottom: none;}
	.keyPoint > ul { margin: 0 auto; max-width: calc(700px + 2%) }
	.process > ul { text-align: center}
	.process > ul > li { float: none; display: inline-block; margin: 0 1% 2% !important; text-align: left; font-size: 14px;vertical-align: top; width: 350px}

}
@media only screen and (max-width: 768px){ 
	#mainVisual.wheel .v h1 { width: 120px; margin-left: -60px;}
	#mainVisual.wheel .v h2 { font-size: 2.7em;}
	#mainVisual.wheel .v p {  font-size: 1.3em;}
	
	.page h3 {font-size: 1.5em;}
	.process > ul > li {width: 100%; margin: 0 0 2% !important; display:block;min-height: inherit; padding: 9em 1.5em 1.5em 1.5em !important;}
	.produceCopy { font-size: 1.3em;}
	
	.keyPoint li {line-height: 1.3 !important; padding-top: 2em;padding-left: 5em; font-size: 1.06em;}
	.keyPoint li span { position: absolute;top: 1.2em; font-size: 13px;}
	.keyPoint li small {margin-left:0; margin-top: 5px;}
	
	
	.produceWrite .inputWrap > ul,
	.produceWrite .inputWrap > div{float: none;width:100%;}
	.produceWrite .inputWrap .item {margin: 0 0 0.5rem 0;}
	.produceWrite input[type="text"], .produceWrite input[type="password"], .produceWrite select {height: 50px;
    padding: 0 15px;}
	.produceWrite textarea {padding: 15px;}
	.agree_box_w .box {padding: 15px;}
	.agree_box_w .t {font-size: 1rem;}
	
	.produceTel ul { display: block; text-align: center;}
	.produceTel li:first-child {font-size: 1.7rem;letter-spacing: -0.05em;white-space: nowrap;}
	.produceTel li:last-child {padding: 0; margin: 10px 0 0;font-size: 1rem;}
	.produceTel li:last-child:before{background: none;}

}
@media only screen and (max-width: 500px){ 
	#mainVisual.wheel .v h1 { top: 2em; width: 100px; margin-left: -50px;}
	#mainVisual.wheel .v h2 { font-size: 2em;}
	#mainVisual.wheel .v p {  font-size: 1.15em;}
	.container {margin: 3em auto;}
	
	.produceCopy { font-size: 1.15em;padding: 5em 1.5em;}
	.produceCopy br { display: none}
}

@media only screen and (max-width: 340px){ 
	#mainVisual.wheel .v h2 { font-size: 1.5em;}
	#mainVisual.wheel .v p {  font-size: 1em;}
	
}