@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
@import url('https://webfontworld.github.io/sunn/SUIT.css');
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

.cm-fl { float:left; }
.cm-fr { float:right; }
.clearfix{ *zoom: 1; }
.clearfix:after{content: ""; display: block; clear: both }
button{
    border:none;
    box-shadow:none;
    margin: 0;
    padding:0;
    background:transparent;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color:#242424;
    outline:none;
    font-family:'NanumSquare' ,Apple SD Gothic Neo, 'Malgun Gothic',"맑은고딕", 'dotum',"돋움",sans-serif;
    border-radius:0;
    font-size:100%;
}
p {word-break: keep-all;}

/* *******************************************************
 * filename : sub_style.css
 * description : 서브 레이아웃 CSS
******************************************************** */
.font62 { font-size: 62px !important; line-height: 1.1em !important; letter-spacing: 0 !important; }
.font62 span {font-weight: 800}
.font56 { font-size: 56px !important; line-height: 1.25em !important; }
.font48 { font-size: 48px !important; line-height: 1.15em !important; }
.font36 { font-size: 36px !important; line-height: 1.2em !important; }
.font32 { font-size: 32px !important; line-height: 1.3em !important; }
.font28 { font-size: 28px !important; line-height: 1.3em !important; }
.font24 { font-size: 24px !important; line-height: 1.4em !important; }
.font22 { font-size: 22px !important; line-height: 1.4em !important; }
.font20 { font-size: 20px !important; line-height: 1.4em !important; }
.font18 { font-size: 18px !important; line-height: 1.5em !important; }
.font16 { font-size: 16px !important; line-height: 1.5em !important; }
.font15 { font-size: 15px !important; line-height: 1.5em !important; }
.font14 { font-size: 14px !important; }

.pos-r { position: relative; }
.mtb170 { margin: 170px 0 !important; }
.flex-con { display:flex !important; display:-webkit-flex !important; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; }
.flex-con.top { align-items: flex-start; }

@media screen and ( max-width: 768px ){
    .font62 { font-size: 48px !important; line-height: 1.15em !important; letter-spacing: -0.02em !important; }
    .font56 { font-size: 32px !important; line-height: 1.3em !important; }
    .font48 { font-size: 28px !important; line-height: 1.3em !important; }
    .font36 { font-size: 24px !important; line-height: 1.4em !important; }
    .font32 { font-size: 24px !important; line-height: 1.4em !important; }
    .font28 { font-size: 20px !important; line-height: 1.4em !important; }
    .font24 { font-size: 20px !important; line-height: 1.4em !important; }
    .font20 { font-size: 18px !important; line-height: 1.5em !important; }
    .font18 { font-size: 16px !important; line-height: 1.5em !important; }
    
    .mtb170 { margin: 100px 0 !important; }
}

@media screen and ( max-width: 480px ){
    .font62 { font-size: 40px !important; line-height: 1.15em !important; letter-spacing: -0.02em !important; }
    .font56 { font-size: 29px !important; line-height: 1.3em !important; }
    .font48 { font-size: 25px !important; line-height: 1.3em !important; }
    .font36 { font-size: 21px !important; line-height: 1.4em !important; }
    .font32 { font-size: 21px !important; line-height: 1.4em !important; }
    .font28 { font-size: 17px !important; line-height: 1.4em !important; }
    .font24 { font-size: 17px !important; line-height: 1.4em !important; }
    .font20 { font-size: 15px !important; line-height: 1.5em !important; }
    .font18 { font-size: 13px !important; line-height: 1.5em !important; }
    
    .mtb170 { margin: 70px 0 !important; }
}



/* ****************** 서브페이지 :: 공통 ********************** */
#contents {overflow: hidden;}
.pageTop{padding:245px 0 0;}
.pageTitle {position: relative;}
.pageTitle h2{font-size:90px;color:#111111;font-weight:700;}
.pageTitle h2:after{content:''; width:108px; height:109px;  background:url('../../images/sub_title_bg.png') repeat center center; position:absolute; left: auto; margin-left: -65px; top:-25px; z-index:-1; transform: rotate(0deg); transition: all 1s linear; animation: 30s circle-rotate infinite linear;}
@keyframes circle-rotate {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(-360deg)
  }
}
.innerwrap{position:relative;max-width:1450px;width:100%;margin:0 auto;}
.innerwrap2{position:relative;max-width:1450px;width:100%;margin:0 auto 100px;}
.pageTop .pageSub {font-size: 24px; color: #111; padding-top: 30px;}
.pageTop .pageSub span {color: #146435; font-weight: 600;}
.pageTop .pageLocation{position:absolute;right:0;top:165px;}
.pageTop .pageLocation ul{display:flex;align-items:center;}
.pageTop .pageLocation ul li{
	position:relative;
	padding:0 0 0 15px;margin-left:7px;
	font-size:15px;color:#666666;
}
.pageTop .pageLocation ul li:before{
	display:block;content:">";
	position:absolute;left:0;top:0;
}
.pageTop .pageLocation ul li:first-child:before{display: none;}
.pageTop .pageLocation ul li:last-child {font-weight: 600}
.pageVisual{
	width:100%;height:480px;
	margin:70px 0 0 0;
}
.pageVisual2{
	width:100%;height:1px; background: #e3e3e3;
	margin:70px 0 150px 0;
}
.pageVisual .bg{
	width:100%;height:100%; 
}
.pageVisual.pn1 .bg{
	background:url(../../images/page_visual1.jpg) no-repeat center; background-size: cover;
}
.pageVisual.pn2 .bg{
	background:url(../../images/page_visual2.jpg) no-repeat center; background-size: cover;
}
.pageVisual.pn3 .bg{
	background:url(../../images/page_visual3.jpg) no-repeat center; background-size: cover;
}
.pageVisual.pn4 .bg{
	background:url(../../images/page_visual4.jpg) no-repeat center; background-size: cover;
}
.pageVisual.pn5 .bg{
	background:url(../../images/page_visual5.jpg) no-repeat center; background-size: cover;
}

@media screen and ( max-width: 1449px ){
    .innerwrap {padding: 0 3%;}
    .innerwrap2 {padding: 0 3%;}
    .pageTop .pageLocation{right:3%;top:140px;}
}

@media screen and ( max-width: 1200px ){
    .pageTitle h2{font-size:80px;}
}

@media screen and ( max-width: 1024px ){
    .pageTitle h2{font-size:70px;}
    .pageTitle h2:after{left: auto; margin-left: -55px; top:-45px;}
    .pageTop .pageSub {font-size: 22px; color: #111;}
    .pageVisual{height:400px;}
    .pageVisual2{margin:70px 0 150px 0;}
}

@media screen and ( max-width: 800px ){
    .pageTitle h2{font-size:60px;}
    .pageTitle h2:after{left: auto; margin-left: -55px; top:-45px;}
    .pageTop .pageSub {font-size: 20px; color: #111;}
    .pageVisual{height:350px;}
    .pageVisual2{margin:70px 0 100px 0;}
}

@media screen and ( max-width: 680px ){
    .pageTop{padding:170px 0 0;}
    .pageTitle h2{font-size:50px; line-height: 1.2}
    .pageTitle h2:after{left: auto; margin-left: -55px; top:-45px;}
    .pageTop .pageSub {font-size: 18px; color: #111;}
    .pageTop .pageLocation{top:120px;}
    .pageVisual{height:300px;}
    .pageVisual2{margin:50px 0 80px 0;}
    .pageTop .pageLocation {display: none;}
}

@media screen and ( max-width: 480px ){
    .pageTop{padding:170px 0 0;}
    .pageTitle h2{font-size:40px;}
    .pageTitle h2:after{left: auto; margin-left: -55px; top:-45px;}
    .pageTop .pageSub {font-size: 16px; color: #111;}
    .pageTop .pageLocation{display: none;}
    .pageVisual2{margin:40px 0 60px 0;}
    
}

@media screen and ( max-width: 368px ){
    .pageTop{padding:170px 0 0;}
    .pageTitle h2{font-size:30px;}
    .pageTitle h2:after{left: auto; margin-left: -45px; top:-55px;}
    .pageTop .pageSub {font-size: 13px; color: #111;}
    .pageVisual{height:280px; margin:40px 0 0 0;}
    .pageVisual2{margin:30px 0 50px 0;}
    
}

.pos-r .txt-wrap .font62 br {display: none;}
.sign {font-weight:bold; text-align:right; padding-top: 90px;}

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

@media screen and ( max-width: 1280px ){
    .pos-r .txt-wrap .font62 {font-size: 50px !important}
}

@media screen and ( max-width: 1180px ){
    .pos-r .txt-wrap .font62 br {display: block;}
}

@media screen and ( max-width: 1024px ){
    .pos-r .txt-wrap .font62 br {display: none;}
    .txt-wrap { display: block !important; }
    .pos-r .txt {padding-top: 30px}
    .pos-r .txt br {display: none;}
    .pos-r .txt span br {display: block;}
    .pos-r .txt-wrap .font62 {font-size: 40px !important}
    .sign {font-weight:bold; text-align:left; padding-top: 90px;}
}

@media screen and ( max-width: 380px ){
    .pos-r .txt-wrap .font62 br {display: block;}
}



.about_section2 {background: url("../../images/about_img1.jpg") center no-repeat; padding: 85px 0;}
.vibey_in{position:relative;}
.vibey_in ul{box-sizing:border-box; display:flex; flex-wrap:wrap; justify-content: space-between;}
.vibey_in ul:after{content:''; display:block; clear:both;}
.vibey_in ul li{position:relative; background:rgba(17,17,17,.5); border-radius:20px; padding:70px 20px; box-sizing:border-box; width: 30%; margin-right: 5%;}
.vibey_in ul li:last-child {margin-right: 0;}
.vibey_in ul li dl{text-align: center; color: #fff;}
.vibey_in ul li dl dt{width: 90px;}
.vibey_in ul li dl dt img{max-width:100%;}
.vibey_in ul li dl dd{width:100%; box-sizing:border-box;}
.vibey_in ul li dl dd h4{font-size: 30px; font-weight: normal; padding-top: 50px; word-break: keep-all;}
.vibey_in ul li dl dd h4.small{display:inline-block; font-size:24px; font-weight:400; letter-spacing:0; padding-top: 0;}
.vibey_in ul li dl dd h4.small.pt20 {padding-bottom: 20px;}
.vibey_in ul li dl dd .code{font-size:18px; letter-spacing:-0.75pt; line-height: 150%; padding-bottom: 5px}

@media screen and ( max-width: 680px ){
    .vibey_in ul li{position:relative; background:rgba(17,17,17,.5); border-radius:20px; padding:30px 20px; box-sizing:border-box; width: 100%; margin-right: 0; margin-bottom: 20px;}
    .vibey_in ul li:last-child {margin-right: 0; margin-bottom: 0px;}
    .vibey_in ul li dl dd h4{font-size: 23px; font-weight: normal; padding-top: 0px; word-break: keep-all;}
    .vibey_in ul li dl dd h4 br {display: none;}
    .vibey_in ul li dl dd h4.small{display:inline-block; font-size:20px; font-weight:400; letter-spacing:0; padding-top: 0;}
}

@media screen and ( max-width: 480px ){
    .vibey_in ul li dl dd h4{font-size: 20px; font-weight: normal; padding-top: 0px; word-break: keep-all;}
    .vibey_in ul li dl dd h4.small{display:inline-block; font-size:18px; font-weight:400; letter-spacing:0; padding-top: 0;}
    .vibey_in ul li dl dd .code{font-size:16px; letter-spacing:-0.75pt; line-height: 150%; padding-bottom: 5px}
}


.about_title {font-size: 36px; line-height: 46px; color: #111111; position: relative; padding-left: 17px; font-weight: bold;}
.about_title:before {content: ''; position: absolute; width: 4px; height: 36px; background: #146435; left: 0; top: 5px;}

@media screen and ( max-width: 1024px ){
    .about_title {font-size: 30px; line-height: 40px;}
    .about_title:before {height: 30px; top: 5px;}
}

@media screen and ( max-width: 680px ){
    .about_title {font-size: 28px; line-height: 38px;}
    .about_title:before {height: 28px; top: 5px;}
}

@media screen and ( max-width: 480px ){
    .about_title {font-size: 25px; line-height: 35px;}
    .about_title:before {height: 25px; top: 5px;}
}

.about_section3 {padding: 150px 0;}
.about_history {display: flex; flex-wrap:wrap; justify-content: space-between;}
.history-sec__list {position:relative; margin:0 120px 0 80px;}
.history-sec__wrap:last-child .history-sec__list {padding-bottom:0;}
.history-sec__list::before {content:"";position:absolute;top:0;left:205px;height:100%;border-right:1px solid #e5e5e5;transform:translateX(-50%);}
.history-sec__item {display:flex;margin-top:70px;}
.history-sec__item:first-child {margin-top:0;}
.history-sec__year {flex-shrink:0;position:relative;width:165px; font-size:36px;font-weight:600;line-height:1; color: #146435;}
.history-sec__year::before {content:"";position:absolute;top:5px;right:0;width:15px;height:15px;background:url("../../images/icon_history.png") no-repeat center center / cover;transform:translateX(50%);}
.history-sec__inner-list {position:relative;margin:0 0 0 50px;}
.history-sec__inner-item {display:flex;margin-top:15px;}
.history-sec__inner-item:first-child {margin-top:0;}
.history-sec__month {min-width:25px; font-size:18px;color:#222222;}
.history-sec__month.big {min-width:25px; font-size:24px;color:#146435;}
.history-sec__inner-item .text-medium {align-self:center;margin-left:20px;font-size:18px;color:#949494;}
.history-sec__inner-item .text-medium.big {font-size:24px;color:#146435; font-weight: 600}

@media screen and ( max-width: 1040px ){
    .about_history {display: block;} 
    .history-sec__list {position:relative; margin:50px 0 0 0;}
    .history-sec__list::before {left:165px;}
    
    ol {
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
    }
}

@media screen and ( max-width: 640px ){
    .about_section3 {padding: 80px 0;}
    .history-sec {padding:50px 0 70px;}
	.history-sec__wrap:not(:first-child) {margin-top:50px;}
	.history-sec__list {padding:0 40px;}
	.history-sec__list::before {left:15px;}
	.history-sec__item {flex-direction:column;}
	.history-sec__year {width:auto;padding-right:0;font-size:30px;}
	.history-sec__year::before {top:50%;left:-25px;right:auto;width:18px;height:18px;transform:translate(-50%, -50%);}
	.history-sec__inner-list {margin:20px 0 0;}
	.history-sec__inner-item {margin-top:10px;}
	.history-sec .text-medium {padding-left:10px;margin-left:15px;}
    .history-sec__month {min-width:25px; font-size:16px;color:#222222;}
    .history-sec__inner-item .text-medium {align-self:center;margin-left:20px;font-size:16px;color:#949494;}
    .history-sec__month.big {min-width:25px; font-size:20px;color:#146435;}
    .history-sec__inner-item .text-medium.big {font-size:20px;color:#146435; font-weight: 600}
}

@media screen and ( max-width: 480px ){
    .about_section3 {padding: 60px 0;}
    .history-sec {padding:50px 0 70px;}
	.history-sec__wrap:not(:first-child) {margin-top:50px;}
	.history-sec__list {padding:0 40px;}
	.history-sec__list::before {left:15px;}
	.history-sec__item {flex-direction:column;}
	.history-sec__year {width:auto;padding-right:0;font-size:25px;}
	.history-sec__year::before {top:50%;left:-25px;right:auto;width:18px;height:18px;transform:translate(-50%, -50%);}
	.history-sec__inner-list {margin:20px 0 0;}
	.history-sec__inner-item {margin-top:10px;}
	.history-sec .text-medium {padding-left:10px;margin-left:15px;}
    .history-sec__month {min-width:25px; font-size:13px;color:#222222;}
    .history-sec__inner-item .text-medium {align-self:center;margin-left:20px;font-size:13px;color:#949494;}
    .history-sec__month.big {min-width:25px; font-size:18px;color:#146435;}
    .history-sec__inner-item .text-medium.big {font-size:18px;color:#146435; font-weight: 600}
}


.about_section4 {padding: 100px 0;}
/* 모달창 */
#myModal { transition: all 0.2s; opacity: 0; visibility: hidden; width: 100%; height: 100%; background: rgba(0,0,0,0.8); position: fixed; top: 0; left: 0; z-index: 1000; }
.pop_bt { position: absolute; top: 10px; right: 1%; cursor: pointer; font-size: 36px; color: #fff; float: right;}
.modal_img img { position: absolute; width: 600px; left: 0; right: 0; margin: auto; top: 0; bottom: 0; }

#cer_gall_ul {margin:50px -10px 0;padding:0;list-style:none;zoom:1; display: flex; flex-wrap: wrap; } 
#cer_gall_ul:after {display:block;visibility:hidden;clear:both;content:""}
.cer_gall_li { width: calc(100% / 5 ); padding: 0 10px;}
.cer_gall_li .gall_chk {position:absolute;top:0;left:0;padding:5px;z-index:1}
.cer_gall_box {position:relative;margin:0 0 50px 0;border-radius:0 0 2px 2px}
.cer_gall_con {position:relative}
.cer_gall_row .col-gn-5 {width:20%; position:relative;min-height:1px;padding-left:10px;*padding-left:0;padding-right:10px;*padding-right:0;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-left:0}
.cer_gall_img {text-align:center; }
.cer_gall_img img { cursor: pointer; border: 1px solid #eee;}
.cer_gall_img a {display:block}
.cer_gall_img img {max-width:100%; height:auto !important}

.cer_gall_text_href {  }
.cer_gall_text_href a {font-weight:500; padding:20px 0; }
.cer_gall_text_href img {margin:0 0 0 4px}
.cer_bo_tit { padding:25px 0 0;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:block;line-height:20px;font-weight:600;color:#111;font-size:20px; letter-spacing: -1.0px; text-align: center;}

@media screen and ( max-width: 980px ){
    #cer_gall_ul {margin:40px -10px 0;}
    .cer_gall_li { width: calc(100% / 3 ); }
}
@media screen and (max-width : 780px){
    .about_section4 {padding: 80px 0;}
    #cer_gall_ul {margin:30px -10px 0;}
    .cer_gall_li { width: calc(100% / 2 ); }
    .cer_bo_tit { padding:20px 0 0; font-size:18px; }
}
@media screen and (max-width : 700px){
    .modal_img img { position: absolute; width: 94%; left: 0; right: 0; margin: auto; top: 0; bottom: 0; }
}
@media screen and (max-width : 480px){
    .about_section4 {padding: 60px 0;}
    #cer_gall_ul {margin:20px -10px 0;}
    .cer_gall_li { width: calc(100% / 1 ); }
    .cer_bo_tit { padding:15px 0 0; font-size:16px; }
}



.rnd_img {width: 100%; border: 1px solid #eee; text-align: center; padding: 80px 0; margin-top: 50px}
.business_img {width: 100%; border: 1px solid #eee; text-align: center; padding: 80px 0; margin-top: 50px}
.location {margin-top: 50px;}
.location_txt {font-size: 24px; line-height: 50px; color: #666666; padding-top: 30px;}

@media screen and ( max-width: 1240px ){
    .rnd_img {width: 100%; border: 1px solid #eee; text-align: center; padding: 80px 80px; margin-top: 50px}
    .rnd_img img {width: 100%;}
    .business_img {width: 100%; border: 1px solid #eee; text-align: center; padding: 80px 0; margin-top: 50px}
}

@media screen and ( max-width: 740px ){
    .rnd_img {width: 100%; border: 1px solid #eee; text-align: center; padding: 40px; margin-top: 30px}
    .business_img {width: 100%; border: 1px solid #eee; text-align: center; padding: 40px; margin-top: 30px}
    .location {margin-top: 30px;}
    .location_txt {font-size: 20px; line-height: 40px; color: #666666; padding-top: 30px;}
    .business_img img {width: 100%}
}

@media screen and ( max-width: 680px ){
    .rnd_img {width: 100%; border: 1px solid #eee; text-align: center; padding: 30px; margin-top: 20px}
    .business_img {width: 100%; border: 1px solid #eee; text-align: center; padding: 30px; margin-top: 20px}
    .location {margin-top: 20px;}
    .location_txt {font-size: 18px; line-height: 35px; color: #666666; padding-top: 20px;}
}

@media screen and ( max-width: 480px ){
    .location_txt {font-size: 16px; line-height: 30px; color: #666666; padding-top: 20px;}
}



.color {width: 100%; overflow: hidden;}
.color .left {float: left; width: 25%; height: 100%;}
.left .fix{position:fixed !important; top:100px;}
.color .right {float: right; width: 75%; position: relative;}
.color_choice ul {margin-left: -10px;}
.color_choice li {float: left; margin: 10px; width: 14.8%; font-size: 18px; text-align: center;}
.color_choice li img {width: 100%;}

.position {-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;}
.position.fixed {position: fixed !important; top: 90px; width: 56.55%}
.position > ul{margin-bottom: 30px;}
.position > ul:after{
	display: block;
	clear: both;
	content: '';
}
.position > ul > li{
	float: left;
	width: 33% !important;
	margin: 0 0px 0 0;
}
.position.four {margin-right: 10px;}
.position.four > ul > li{
	float: left;
	width: 25% !important;
	margin: 0 0px 0 0;
}
.position > ul > li > a{
	display: block;
	overflow: hidden;
	border: 1px solid #e2e2e2;
	background-color: #FFFFFF;
	font-size: 18px;
	line-height: 50px;
    font-weight: 600;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	color:#8c8c8c;
}
.position > ul > li > a:hover,
.position > ul > li.active > a{
	border: 2px solid #146435;
	background-color: #146435;
	color: #fff;
	line-height:48px;
}
.position > ul > li > a:hover{
	transition: all 0.2s linear;
}


#egg-container {
    width: 280px;
    height: 307px;
    display: flex;
    flex-direction: column;
    border-radius:50% / 50%;
    justify-content: space-between;
    background: url('../../images/color/color_default.png') center/cover no-repeat;
     background-blend-mode: multiply;
    overflow: hidden;
}
#egg-container2 {
    width: 280px;
    height: 307px;
    display: flex;
    flex-direction: column;
    border-radius:50% / 50%;
    justify-content: space-between;
    background: url('../../images/color/color_default2.png') center/cover no-repeat;
     background-blend-mode: multiply;
    overflow: hidden;
}

/*
#egg-container {
  width:280px;
  height:307px;
  border-radius:50% / 50%;
  position: absolute;
  top: 0%;
  left: 0%;
  margin: 0;
  white-space: nowrap;
  background: url('../../images/color/color_default.png') center/cover no-repeat;
}
*/
.egg-part {flex-grow: 1; display:table;}
#egg-container #top-part {height: 25%; background-position:center; background-size: cover;}
#egg-container #middle-part {height: 55%; background-position:center; background-size: cover;}
#egg-container #bottom-part {height: 25%; background-position:center; background-size: cover;}

#egg-container2 {position: relative;}
#egg-container2 #top-part {width: 100%; height: 100%; background-position:center; background-size: cover; position: absolute; top: 50%; transform: translateY(-50%);}
#egg-container2 #middle-part {width: 100%; height: 80%; background-position:center; background-size: cover; position: absolute; top: 50%; transform: translateY(-50%);}
#egg-container2 #bottom-part {width: 100%; height: 55%; background-position:center; background-size: cover; position: absolute; top: 50%; transform: translateY(-50%);}
#egg-container2 #bottom-part2 {width: 100%; height: 30%; background-position:center; background-size: cover; position: absolute; top: 50%; transform: translateY(-50%);}
.result-display {width: 100%; height: 100%; text-align: center; color: #fff; font-size: 25px; display:table-cell;vertical-align:middle;}
.result-display.t_top {position: absolute; top: 0;}
.result-display.t_middle {position: absolute; top: 0;}
.result-display.t_bottom {position: absolute; top: 0;}
.result-display.t_bottom2 {position: absolute; top: 70%; transform: translateY(-50%);}

.select_tab {padding-bottom: 50px; overflow: hidden; margin-right: 10px}
.select_tab > ul > li{float: left; width: 50% !important;margin: 0 0px 0 0;}
.select_tab > ul > li > a{display: block; overflow: hidden; border: 1px solid #e2e2e2; background-color: #FFFFFF; font-size: 18px; line-height: 60px; font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap; color:#8c8c8c;}
.select_tab > ul > li > a:hover,
.select_tab > ul > li.active > a{border: 2px solid #000; background-color: #000; color: #fff; line-height:58px;}
.select_tab > ul > li > a:hover{transition: all 0.2s linear;}

.color .left .btnArea {width:100%; position:relative; margin:20px 0 0; padding:0; left: 50px}
.color .left .btnArea a {display:inline-block; height:50px; line-height:50px; font-size:18px; font-weight:400; color:#000; border:1px solid #000; background:transparent; margin:0 15px 0 0; padding:0 60px; box-sizing:border-box;
  transition:all 0.3s ease;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  -o-transition:all 0.3s ease;
  -ms-transition:all 0.3s ease;
}
.color .left .btnArea a:hover,
.color .left .btnArea a:focus,
.color .left .btnArea a:active {color:#fff; background:#000;}
.color .left .btnArea a:last-child {margin:0;}

@media screen and ( max-width: 1449px ){
    .color_choice li {float: left; margin: 10px; width: 18%; font-size: 18px; text-align: center;}
    .position.fixed {position: fixed !important; top: 90px; width: 70.25%}
}
@media screen and ( max-width: 1404px ){
    .color_choice li {float: left; margin: 10px; width: 22.9%; font-size: 18px; text-align: center;}
}
@media screen and ( max-width: 1335px ){
    .color_choice li {float: left; margin: 10px; width: 22.8%; font-size: 18px; text-align: center;}
}
@media screen and ( max-width: 1274px ){
    .color_choice li {float: left; margin: 10px; width: 22.7%; font-size: 18px; text-align: center;}
}
@media screen and ( max-width: 1219px ){
    .color .left .btnArea {width:100%; position:relative; margin:50px 0 0; padding:0; left: 20px}
    .color_choice li {float: left; margin: 10px; width: 22.6%; font-size: 18px; text-align: center;}
    
    #egg-container, #egg-container2 {
    width: 220px;
    height: 241px;
    }
    .result-display {font-size: 23px;}
}
@media screen and ( max-width: 1166px ){
    .color_choice li {float: left; margin: 10px; width: 22.4%; font-size: 18px; text-align: center;}
    .position.fixed {position: fixed !important; top: 90px; width: 69.7%}
}
@media screen and ( max-width: 1076px ){
    .color_choice li {float: left; margin: 10px; width: 22.3%; font-size: 18px; text-align: center;}
    .position.fixed {position: fixed !important; top: 90px; width: 70%}
}
@media screen and ( max-width: 1035px ){
    .color_choice li {float: left; margin: 10px; width: 22.2%; font-size: 18px; text-align: center;}
}
@media screen and ( max-width: 1000px ){
    .position.fixed {position: fixed !important; top: 90px; width: 70.25%}
}
@media screen and ( max-width: 998px ){
    .color .left {width: 28%;}
    .color .right {width: 72%;}
    .color_choice li {float: left; margin: 10px; width: 30.4%; font-size: 16px; text-align: center;}
    .position.fixed {position: fixed !important; top: 90px; width: 67.3%}
}
@media screen and ( max-width: 992px ){
    .color_choice li {float: left; margin: 10px; width: 30.3%; font-size: 16px; text-align: center;}
    .position.fixed {position: fixed !important; top: 90px; width: 67.1%}
}
@media screen and ( max-width: 959px ){
    .color_choice li {float: left; margin: 10px; width: 30.2%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 927px ){
    .color_choice li {float: left; margin: 10px; width: 30.1%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 898px ){
    .color .left .btnArea {width:100%; position:relative; margin:30px 0 0; padding:0; left: 10px}
    .color_choice li {float: left; margin: 10px; width: 30%; font-size: 16px; text-align: center;}
    
    #egg-container, #egg-container2 {
    width: 200px;
    height: 219px;
    }
    .result-display {font-size: 20px;}
}
@media screen and ( max-width: 871px ){
    .color_choice li {float: left; margin: 10px; width: 29.9%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 845px ){
    .color_choice li {float: left; margin: 10px; width: 29.8%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 821px ){
    .color_choice li {float: left; margin: 10px; width: 29.7%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 797px ){
    .color_choice li {float: left; margin: 10px; width: 29.6%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 776px ){
    .color .left .btnArea {width:100%; position:relative; margin:30px 0 0; padding:0; left: 0px}
    .color .left .btnArea a {height:45px; line-height:45px; font-size:16px;}
    .color_choice li {float: left; margin: 10px; width: 29.5%; font-size: 16px; text-align: center;}
    
    #egg-container, #egg-container2 {
    width: 180px;
    height: 197px;
    }
    .result-display {font-size: 18px;}
}
@media screen and ( max-width: 768px ){
    .left .fix{position:fixed !important; top:80px;}
    .position.fixed {position: fixed !important; top: 70px; width: 67.1%}
}
@media screen and ( max-width: 755px ){
    .color_choice li {float: left; margin: 10px; width: 29.4%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 735px ){
    .color_choice li {float: left; margin: 10px; width: 29.3%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 717px ){
    .color_choice li {float: left; margin: 10px; width: 29.2%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 699px ){
    .color .left {width: 32%;}
    .color .right {width: 68%;}
    .color_choice li {float: left; margin: 10px; width: 28.9%; font-size: 16px; text-align: center;}
    .position.fixed {position: fixed !important; top: 70px; width: 63%}
}
@media screen and ( max-width: 689px ){
    .color .left {width: 32%;}
    .color .right {width: 68%;}
    .color_choice li {float: left; margin: 10px; width: 28.8%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 674px ){
    .color_choice li {float: left; margin: 10px; width: 28.7%; font-size: 16px; text-align: center;}
    .position > ul > li > a{font-size: 16px;}
}
@media screen and ( max-width: 659px ){
    .color_choice li {float: left; margin: 10px; width: 28.6%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 645px ){
    .color .left .btnArea {width:100%; position:relative; margin:30px 0 0; padding:0; left: 0px}
    .color .left .btnArea a {height:40px; line-height:40px; font-size:14px;}
    .color_choice li {float: left; margin: 10px; width: 28.4%; font-size: 16px; text-align: center;}
    .position.fixed {position: fixed !important; top: 70px; width: 62.55%}
    
    #egg-container, #egg-container2 {
    width: 170px;
    height: 186px;
    }
    .result-display {font-size: 16px;}
}
@media screen and ( max-width: 618px ){
    .color_choice li {float: left; margin: 10px; width: 28.3%; font-size: 16px; text-align: center;}
    .position.fixed {position: fixed !important; top: 70px; width: 62.75%}
}
@media screen and ( max-width: 611px ){
    .color .left {width: 34%;}
    .color .right {width: 66%;}
    .color_choice li {float: left; margin: 10px; width: 28.1%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 599px ){
    .color_choice li {float: left; margin: 10px; width: 28%; font-size: 16px; text-align: center;}
    .position.fixed {position: fixed !important; top: 70px; width: 61%}
}
@media screen and ( max-width: 587px ){
    .color_choice li {float: left; margin: 10px; width: 27.9%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 576px ){
    .color .left {width: 40%;}
    .color .right {width: 60%;}
    .color_choice li {float: left; margin: 10px; width: 27.3%; font-size: 16px; text-align: center;}
    .position.fixed {position: fixed !important; top: 70px; width: 55.5%}
}
@media screen and ( max-width: 569px ){
    .color_choice li {float: left; margin: 10px; width: 27.2%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 560px ){
    .color_choice li {float: left; margin: 10px; width: 27.1%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 550px ){
    .color_choice li {float: left; margin: 10px; width: 27%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 542px ){
    .color_choice li {float: left; margin: 10px; width: 26.9%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 533px ){
    .color_choice li {float: left; margin: 10px; width: 26.8%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 524px ){
    .color_choice li {float: left; margin: 10px; width: 26.7%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 516px ){
    .color_choice li {float: left; margin: 10px; width: 26.6%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 508px ){
    .color_choice li {float: left; margin: 10px; width: 26.5%; font-size: 16px; text-align: center;}
    .position.fixed {position: fixed !important; top: 70px; width: 55%}
}
@media screen and ( max-width: 501px ){
    .color_choice li {float: left; margin: 10px; width: 26.4%; font-size: 16px; text-align: center;}
}
@media screen and ( max-width: 493px ){
    .color_choice li {float: left; margin: 10px; width: 26.3%; font-size: 14px; text-align: center;}
}
@media screen and ( max-width: 486px ){
    .color_choice li {float: left; margin: 10px; width: 26.2%; font-size: 14px; text-align: center;}
}
@media screen and ( max-width: 480px ){
    .color .left {width: 45%;}
    .color .right {width: 55%;}
    .color_choice li {float: left; margin: 5px; width: 46%; font-size: 14px; text-align: center;}
    .position > ul > li > a{font-size: 14px;}
    .position.fixed {position: fixed !important; top: 70px; width: 52%; margin-left: -5px}
}
@media screen and ( max-width: 463px ){
    .color_choice li {float: left; margin: 5px; width: 45.9%; font-size: 14px; text-align: center;}
}
@media screen and ( max-width: 451px ){
    .color_choice li {float: left; margin: 5px; width: 45.8%; font-size: 13px; text-align: center;}
    .position.fixed {position: fixed !important; top: 70px; width: 52.5%; margin-left: -5px}
}
@media screen and ( max-width: 440px ){
    .color .left .btnArea {width:100%; position:relative; margin:30px 0 0; padding:0; left: 0px}
    .color .left .btnArea a {height:40px; line-height:40px; font-size:14px;padding:0 50px;}
    .color_choice li {float: left; margin: 5px; width: 45.7%; font-size: 13px; text-align: center;}
    
    #egg-container, #egg-container2 {
    width: 160px;
    height: 175px;
    }
    .result-display {font-size: 13px;}
}
@media screen and ( max-width: 429px ){
    .color_choice li {float: left; margin: 5px; width: 45.6%; font-size: 13px; text-align: center;}
}
@media screen and ( max-width: 419px ){
    .color .left .btnArea {width:100%; position:relative; margin:10px 0 0; padding:0; left: 0px}
    .color .left .btnArea a {height:40px; line-height:40px; font-size:13px;padding:0 50px;}
    .color_choice li {float: left; margin: 5px; width: 45.5%; font-size: 13px; text-align: center;}
    
    #egg-container, #egg-container2 {
    width: 150px;
    height: 164px;
    }
}
@media screen and ( max-width: 409px ){
    .color_choice li {float: left; margin: 5px; width: 45.4%; font-size: 13px; text-align: center;}
}
@media screen and ( max-width: 400px ){
    .color_choice li {float: left; margin: 5px; width: 45.3%; font-size: 13px; text-align: center;}
}
@media screen and ( max-width: 391px ){
    .color_choice li {float: left; margin: 5px; width: 45.2%; font-size: 13px; text-align: center;}
}
@media screen and ( max-width: 383px ){
    .color .left {width: 50%;}
    .color .right {width: 50%;}
    .color_choice li {float: left; margin: 5px; width: 44.7%; font-size: 13px; text-align: center;}
    .position > ul > li > a{font-size: 13px;}
    .position.fixed {position: fixed !important; top: 70px; width: 47.5%; margin-left: -5px}
}
@media screen and ( max-width: 379px ){
    .color_choice li {float: left; margin: 5px; width: 44.6%; font-size: 13px; text-align: center;}
}