#subBanner{position: relative; height: 600px; overflow: hidden;} .sub_banner_img{position: absolute; left: 50%; top: -200px; transform: translateX(-50%);} #subBanner .text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} #subBanner .text h2{font-size: 2.5vw; text-align: center; color: #FFF; position: relative; top: -20px; opacity: 0;} #subBanner .text p{font-size: 1.3em; text-align: center; color: #FFF; position: relative; margin-top: 20px; top: 20px; opacity: 0;} #subBanner .tabs{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 80px; border-top: 1px solid #fff; width: 100%;} #subBanner .tabs_wrap{position: absolute; display: flex; top: 0; left: 50%; transform: translateX(-50%);} #subBanner .tabs_wrap li a{color: #fff; width: 180px; line-height: 80px; text-align: center; height: 100%; position: relative; font-size: 1.1em;} #subBanner .tabs_wrap li a::after{content:'';position: absolute; left: 0; top:-1px; width: 100%; height: 1px; background-color: #049880; opacity: 0;} #subBanner .tabs_wrap li a::before{content:''; opacity: 0; position: absolute; background-image: url(../img/before.png); width: 7px; height: 6px; background-position: center; background-size: cover; bottom: 15px; left: 50%; transform: translateX(-50%);} #subBanner .tabs_wrap li.select a::after{opacity: 1;} #subBanner .tabs_wrap li.select a::before{opacity: 1;} #subBanner .tabs_wrap li.select a{background-color: rgba(225,225,225,.2);} /*subBanner*/ /*tablet 큰 가로*/ @media screen and (min-width:811px) and (max-width:1200px){ #subBanner .text h2{font-size: 3.5vw; text-align: center; color: #FFF; position: relative; top: -20px; opacity: 0;} #subBanner .text p{font-size: 1em; text-align: center; color: #FFF; position: relative; margin-top: 20px; top: 20px; opacity: 0;} #subBanner .tabs{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 80px; border-top: 1px solid #fff; width: 100%;} #subBanner .tabs_wrap{position: absolute; display: flex; top: 0; left: 50%; transform: translateX(-50%);} #subBanner .tabs_wrap li a{color: #fff; width: 120px; line-height: 80px; text-align: center; height: 100%; position: relative; font-size: 1.1em;} #subBanner .tabs_wrap li a::after{content:'';position: absolute; left: 0; top:-1px; width: 100%; height: 1px; background-color: #049880; opacity: 0;} #subBanner .tabs_wrap li a::before{content:''; opacity: 0; position: absolute; background-image: url(../img/before.png); width: 7px; height: 6px; background-position: center; background-size: cover; bottom: 15px; left: 50%; transform: translateX(-50%);} #subBanner .tabs_wrap li.select a::after{opacity: 1;} #subBanner .tabs_wrap li.select a::before{opacity: 1;} #subBanner .tabs_wrap li.select a{background-color: rgba(225,225,225,.2);} } /*mobile*/ @media screen and (max-width:810px){ #subBanner .text h2{font-size: 24px; text-align: center; color: #FFF; position: relative; top: -20px; opacity: 0;} #subBanner .text p{font-size:14px; text-align: center; color: #FFF; position: relative; margin-top: 20px; top: 20px; opacity: 0; width: 284px;} #subBanner .tabs{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 80px; border-top: 1px solid #fff; width: 100%;} #subBanner .tabs_wrap{position: absolute; display: flex; top: 0; left: 50%; transform: translateX(-50%);} #subBanner .tabs_wrap li a{color: #fff; width: 120px; line-height: 80px; text-align: center; height: 100%; position: relative; font-size: 1.1em;} #subBanner .tabs_wrap li a::after{content:'';position: absolute; left: 0; top:-1px; width: 100%; height: 1px; background-color: #049880; opacity: 0;} #subBanner .tabs_wrap li a::before{content:''; opacity: 0; position: absolute; background-image: url(../img/before.png); width: 7px; height: 6px; background-position: center; background-size: cover; bottom: 15px; left: 50%; transform: translateX(-50%);} #subBanner .tabs_wrap li.select a::after{opacity: 1;} #subBanner .tabs_wrap li.select a::before{opacity: 1;} #subBanner .tabs_wrap li.select a{background-color: rgba(225,225,225,.2);} } #overviewTextBox div p:first-child{opacity: 0; left: -100px;} #overviewTextBox div p:last-child{opacity: 0; left: 100px;} #overviewArea{overflow: hidden;} #overviewArea .mids:nth-child(1){opacity: 0; left: -80px;} #overviewArea .mids:nth-child(2){opacity: 0; top: 80px;} #overviewArea .mids:nth-child(3){opacity: 0; left: 80px;} #overviewVision{overflow: hidden;} #overviewVision .v_mids_p{opacity: 0; top: 80px;} #overviewVision .v_mids_h3:nth-child(1){opacity: 0;} #overviewVision .v_mids_h3:nth-child(2){opacity: 0;} #overviewVision .v_mids_ul{opacity: 0; top: 80px;} #overviewVision .vision_mid>p{position: relative;} /* #overviewTextBox */ #overviewTextBox{position: relative; padding: 130px 0; border-bottom: 1px solid #241E20; overflow: hidden;} .sub_main_h2 h2{text-align: center; position: relative; font-weight: 400; opacity: 0;} #overviewTextBox div{position: relative; top: 110px; margin: 0 auto; width: 90%; max-width: 1036px; display: flex; justify-content: space-between; padding-bottom: 130px;} #overviewTextBox div p{width: 488px; text-align: center; color: #606060; font-size: 1.3em;} #overviewTextBox div p::after{content: ''; width: 1px; height: 100px; position: absolute;top: 0px; left: 50%; transform: translateX(-50%); background-color: #606060;} /* #overviewArea */ #overviewArea{position: relative; border-bottom: 1px solid #241E20; padding-bottom: 50px;} .overviewArea_inner{position: relative; width:90%; max-width:1620px; margin: 0 auto;} #overviewArea .area_top{position: relative; margin-top: 50px; display: flex; justify-content: space-between; align-items: flex-end;} #overviewArea .area_top p{font-size: 1.1em; color: #444;} #overviewArea .area_mid{position: relative; margin-top: 50px; display: flex; justify-content: space-between; align-items: center;} #overviewArea .area_mid ul{position: relative; display: flex; flex-direction: column; justify-content: space-between;} #overviewArea .area_mid ul li{width: 323px; margin-top: 30px;} #overviewArea .area_mid ul li:first-child{margin-top: 0;} #overviewArea .area_mid ul li h3{color: #049880; font-size: 1.6em; font-weight: 500;} #overviewArea .area_mid ul li h3 span{font-size: 1rem; color: #049880; font-weight: 500;} #overviewArea .area_mid ul li p{font-size: 1.2em; color: #444; position: relative; margin-top: 15px;} #overviewArea .area_mid ul li p span{color: #777; font-size: 1.1rem;} #overviewArea .area_mid .area_mid2{position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 300px;} #overviewArea .area_mid .area_mid2 li h3{color: #D9952A; text-align: right;} #overviewArea .area_mid .area_mid2 li h3 span{color: #D9952A;} #overviewArea .area_mid .area_mid2 li p{text-align: right;} #overviewArea .area_mid .area_mid1{position: relative; display: flex; flex-direction: column; align-items: center; height: 420px; justify-content: space-between;} #overviewArea .area_mid .area_mid1 .b2{width: 168px; display: flex; justify-content: space-between; position: relative;} #overviewArea .area_mid .area_mid1 .b2 p{font-size: 1.6em; font-weight: 500; color: #049880;} #overviewArea .area_mid .area_mid1 .b2 p:last-child{color: #D9952A; position: absolute; right:3px;} #overviewArea .area_mid .area_mid1 h3{text-align: center; font-size: 1.6em; font-weight: 500; width: 450px; padding: 5px 40px; position: relative;} #overviewArea .area_mid .area_mid1 h3::before{content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background-color: #555; border-radius: 2px;} #overviewArea .area_mid .area_mid1 h3::after{content: ''; position: absolute; right: 0; top: 0; width: 2px; height: 100%; background-color: #555; border-radius: 2px;} #overviewArea .area_mid .area_mid1 .sourcing{position: relative;} #overviewArea .area_mid .area_mid1 .sourcing h4{position: relative; text-align: center; font-size: 1.6em; color: #049880; font-weight: 500;} #overviewArea .area_mid .area_mid1 .sourcing h4 span{font-size: 1.3rem; color: #D9952A; font-weight: 500;} #overviewArea .area_mid .area_mid1 .sourcing p{text-align: center; color: #444; font-size: 1.2em; position: relative; margin-top: 15px;} /* #overviewVision */ #overviewVision{position: relative; width:90%; max-width:1620px; margin: 0 auto; padding-bottom: 100px;} #overviewVision .vision_top{position: relative; margin-top: 50px;} #overviewVision .vision_top p{font-size: 1.2em; color: #444; margin-top: 20px;} #overviewVision .vision_mid{position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 100px;} #overviewVision .vision_mid>p{font-weight: 700; font-size: 1.1em;} #overviewVision .vision_mid>p .green{font-weight: 700; font-size: 1em; color:#049880;} #overviewVision .vision_mid>p .yellow{font-weight: 700; font-size: 1em; color:#D9952A;} .vision_mid .sero_text{position: absolute; left: 50%; transform: translateX(-50%); display: flex; width: 143px; justify-content: space-between; padding: 5px 0; top: 0; height: 380px; } .vision_mid .sero_text::after{content: ''; height: 100%; width: 1px; background-color:#241E20; top: 0; left: 50%; transform: translateX(-50%); position: absolute;} .vision_mid .sero_text h3{font-weight: 700; font-size: 3em; width: 1px; position: relative; top: 15.5%;} .vision_mid .sero_text h3:first-child{top: 0;} .vision_mid .sero_text h3:last-child{right: 40px;} .vision_mid ul{position: relative; width: 443px; margin-top: 50px; padding-bottom: 100px;} .vision_mid ul li{position: relative;} .vision_mid ul li:last-child{margin-top: 53px;} .vision_mid ul li h4{font-size: 1.3em; font-weight: 500; color:#049880;} .vision_mid ul li:last-child h4{color:#D9952A;} .vision_mid ul li p{position: relative; margin-top: 20px; color: #444; font-size: 1.1em;} /* overview_scroll */ #lifeStyle,#activity{border-top: 1px solid #241E20;} .overview_scroll_wrap{position: relative; height: 1800px; width:90%; max-width:1620px; margin: 0 auto;} #lifeStyle .overview_scroll{position: sticky; width: 400px; left:15%; top: 1px; padding:200px 0 300px 0;} .overview_scroll .green_text{font-weight: 500; font-size: 1.5em; color:#049880;} .overview_scroll h2{margin-top: 4px;} .overview_scroll .just_text{color: #444; font-size: 1.3em; margin-top: 30px;} .overview_scroll_ul{position: absolute; right: 0; top: 380px; width: 50%;} .overview_scroll_ul li{position: relative; margin-top: 20px;} .overview_scroll_ul li:first-child{margin-top: 0;} .overview_scroll_ul li img{width: 100%;} /* activity */ #activity .overview_scroll{margin-left: calc(100% - 500px); position: sticky; width: 400px; top: 1px; padding:200px 0 400px 0;} #activity .overview_scroll h2{text-align: right;} #activity .overview_scroll .just_text{text-align: right;} #activity .overview_scroll .img3block{position: absolute; right: 0;} #activity .overview_scroll_ul{left: 0;} /*overviewTextBox*/ /*tablet 큰 가로*/ @media screen and (min-width:1081px) and (max-width:1500px){ #overviewTextBox{position: relative; padding: 50px 0; border-bottom: 1px solid #241E20; overflow: hidden;} .sub_main_h2 h2{text-align: center; position: relative; font-weight: 400; opacity: 0; font-size: 1.6em;} #overviewTextBox div{position: relative; top: 50px; margin: 0 auto; width: 90%; max-width: 1036px; display: flex; justify-content: space-between; padding-bottom: 100px;} #overviewTextBox div p{width: 450px; text-align: center; color: #606060; font-size: 1.1em;} #overviewTextBox div p::after{content: ''; width: 1px; height: 70px; position: absolute;top: 0px; left: 50%; transform: translateX(-50%); background-color: #606060;} } /*tablet 세로*/ @media screen and (min-width:911px) and (max-width:1080px){ #overviewTextBox{position: relative; padding: 80px 0; border-bottom: 1px solid #241E20; overflow: hidden;} .sub_main_h2 h2{text-align: center; position: relative; font-weight: 400; opacity: 0; font-size: 1.3em;} #overviewTextBox div{position: relative; top: 30px; margin: 0 auto; width: 90%; max-width: 1036px; display: flex; justify-content: space-between; padding-bottom: 50px;} #overviewTextBox div p{width: 380px; text-align: center; color: #606060; font-size: 1em;} #overviewTextBox div p::after{content: ''; width: 1px; height: 60px; position: absolute;top: 0px; left: 50%; transform: translateX(-50%); background-color: #606060;} } /*mobile*/ @media screen and (max-width:910px){ #overviewTextBox{position: relative; padding: 70px 0; border-bottom: 1px solid #241E20; overflow: hidden;} .sub_main_h2 h2{text-align: center; position: relative; font-weight: 400; opacity: 0; font-size: 1.2em; width: 90%; margin: 0 auto;} #overviewTextBox div{position: relative; top: 30px; margin: 0 auto; width: 90%; max-width: 1036px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding-bottom: 50px; height: 201px;} #overviewTextBox div p{width: 90%; text-align: center; color: #606060; font-size: 1em;} #overviewTextBox div p::after{content: ''; width: 100px; height: 1px; position: absolute;top: 44%; left:50%; transform: translate(-50%,-50%); background-color: #606060;} } /*overviewArea*/ /*tablet 큰 가로*/ @media screen and (min-width:1101px) and (max-width:1460px){ #overviewArea{position: relative; border-bottom: 1px solid #241E20; padding-bottom: 50px; overflow: hidden;} #overviewArea .area_top{position: relative; margin-top: 50px; display: flex; justify-content: space-between; align-items: flex-end;} #overviewArea .area_top p{font-size: 1em; color: #444;} #overviewArea .area_mid{position: relative; margin-top: 50px; display: flex; justify-content: space-between; align-items: center;} #overviewArea .area_mid ul{position: relative; display: flex; flex-direction: column; justify-content: space-between;} #overviewArea .area_mid ul li{width: 240px; margin-top: 30px;} #overviewArea .area_mid ul li:first-child{margin-top: 0;} #overviewArea .area_mid ul li h3{color: #049880; font-size: 1.3em; font-weight: 500;} #overviewArea .area_mid ul li h3 span{font-size: .8rem; color: #049880; font-weight: 500;} #overviewArea .area_mid ul li p{font-size: 1em; color: #444; position: relative; margin-top: 15px;} #overviewArea .area_mid ul li p span{color: #777; font-size: .8rem;} #overviewArea .area_mid .area_mid2{position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 300px;} #overviewArea .area_mid .area_mid2 li h3{color: #D9952A; text-align: right;} #overviewArea .area_mid .area_mid2 li h3 span{color: #D9952A;} #overviewArea .area_mid .area_mid2 li p{text-align: right;} #overviewArea .area_mid .area_mid1{position: relative; display: flex; flex-direction: column; align-items: center; height: 420px; justify-content: space-between;} #overviewArea .area_mid .area_mid1 .b2{width: 137px; display: flex; justify-content: space-between; position: relative;} #overviewArea .area_mid .area_mid1 .b2 p{font-size: 1.3em; font-weight: 500; color: #049880;} #overviewArea .area_mid .area_mid1 .b2 p:last-child{color: #D9952A; position: absolute; right:3px;} #overviewArea .area_mid .area_mid1 h3{text-align: center; font-size: 1.3em; font-weight: 500; width: 350px; padding: 5px 30px; position: relative;} #overviewArea .area_mid .area_mid1 h3::before{content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: #555; border-radius: 2px;} #overviewArea .area_mid .area_mid1 h3::after{content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: #555; border-radius: 2px;} #overviewArea .area_mid .area_mid1 .sourcing{position: relative;} #overviewArea .area_mid .area_mid1 .sourcing h4{position: relative; text-align: center; font-size: 1.3em; color: #049880; font-weight: 500;} #overviewArea .area_mid .area_mid1 .sourcing h4 span{font-size: 1.1rem; color: #D9952A; font-weight: 500;} #overviewArea .area_mid .area_mid1 .sourcing p{text-align: center; color: #444; font-size: 1em; position: relative; margin-top: 15px;} } /*mobile*/ @media screen and (max-width:1100px){ #overviewArea{position: relative; border-bottom: 1px solid #241E20; padding-bottom: 160px;overflow: hidden;} #overviewArea .area_top{position: relative; margin-top: 50px; display: flex; justify-content: space-between; align-items: flex-end;} #overviewArea .area_top p{font-size: 1em; color: #444;} #overviewArea .area_mid{position: relative; margin-top: 50px; display: flex; flex-direction: column; align-items: center;} #overviewArea .area_mid ul{position: relative; display: flex; flex-direction: column; justify-content: space-between;} #overviewArea .area_mid ul li{width: 240px; margin-top: 30px;} #overviewArea .area_mid ul li:first-child{margin-top: 0;} #overviewArea .area_mid ul li h3{color: #049880; font-size: 1.3em; font-weight: 500;} #overviewArea .area_mid ul li h3 span{font-size: .8rem; color: #049880; font-weight: 500;} #overviewArea .area_mid ul li p{font-size: 1em; color: #444; position: relative; margin-top: 15px;} #overviewArea .area_mid ul li p span{color: #777; font-size: .8rem;} #overviewArea .area_mid .area_mid2{ position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 200px;} #overviewArea .area_mid .area_mid2 li h3{color: #D9952A; text-align: right; position: relative; padding-top:100px;} #overviewArea .area_mid .area_mid2 li:last-child h3{padding-top: 0;} #overviewArea .area_mid .area_mid2 li h3 span{color: #D9952A;} #overviewArea .area_mid .area_mid2 li p{text-align: right;} #overviewArea .area_mid .area_mid1{position: relative; display: flex; flex-direction: column; align-items: center; height: 320px; justify-content: space-between; margin-top: 80px;} #overviewArea .area_mid .area_mid1 .b2{width: 137px; display: flex; justify-content: space-between; position: relative;} #overviewArea .area_mid .area_mid1 .b2 p{font-size: 1.3em; font-weight: 500; color: #049880;} #overviewArea .area_mid .area_mid1 .b2 p:last-child{color: #D9952A; position: absolute; right:3px;} #overviewArea .area_mid .area_mid1 h3{text-align: center; font-size: 1.2em; font-weight: 500; width: 300px; padding: 5px 30px; position: relative;} #overviewArea .area_mid .area_mid1 h3::before{content: ''; position: absolute; left: 50%; top: -25px; width: 60px; height: 1px; background-color: #555; border-radius: 2px; transform: translateX(-50%);} #overviewArea .area_mid .area_mid1 h3::after{content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 135px;; width: 60px; height: 1px; background-color: #555; border-radius: 2px;} #overviewArea .area_mid .area_mid1 .sourcing{position: relative;} #overviewArea .area_mid .area_mid1 .sourcing h4{position: relative; text-align: center; font-size: 1.3em; color: #049880; font-weight: 500;} #overviewArea .area_mid .area_mid1 .sourcing h4 span{font-size: 1.1rem; color: #D9952A; font-weight: 500; position: relative;} #overviewArea .area_mid .area_mid1 .sourcing p{text-align: center; color: #444; font-size: 1em; position: relative; top: 20px; width: 90%; margin: 0 auto;} } /*overviewVision*/ /*tablet 큰 가로*/ @media screen and (min-width:1081px) and (max-width:1300px){ #overviewVision{position: relative; width:90%; max-width:1620px; margin: 0 auto; padding-bottom: 100px;overflow: hidden;} #overviewVision .vision_top{position: relative; margin-top: 50px;} #overviewVision .vision_top p{font-size: 1em; color: #444; margin-top: 20px;} #overviewVision .vision_mid{position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 100px;} #overviewVision .vision_mid>p{font-weight: 700; font-size: 1em;} #overviewVision .vision_mid>p .green{font-weight: 700; font-size: 1em; color:#049880;} #overviewVision .vision_mid>p .yellow{font-weight: 700; font-size: 1em; color:#D9952A;} .vision_mid .sero_text{position: absolute; left: 50%; transform: translateX(-50%); display: flex; width: 123px; justify-content: space-between; padding: 5px 0; top: 0; height: 380px;} .vision_mid .sero_text::after{content: ''; height: 100%; width: 1px; background-color:#241E20; top: 0; left: 50%; transform: translateX(-50%); position: absolute;} .vision_mid .sero_text h3{font-weight: 700; font-size: 2.4em; width: 1px; position: relative; top: 15.5%;} .vision_mid .sero_text h3:first-child{top: 0;} .vision_mid .sero_text h3:last-child{right: 30px;} .vision_mid ul{position: relative; width: 343px; margin-top: 50px; padding-bottom: 100px;} .vision_mid ul li{position: relative;} .vision_mid ul li:last-child{margin-top: 53px;} .vision_mid ul li h4{font-size: 1.3em; font-weight: 500; color:#049880;} .vision_mid ul li:last-child h4{color:#D9952A;} .vision_mid ul li p{position: relative; margin-top: 20px; color: #444; font-size: 1em;} } /*mobile*/ @media screen and (max-width:1080px){ #overviewVision{position: relative; width:90%; max-width:1620px; margin: 0 auto; padding-bottom: 0px;overflow: hidden;} #overviewVision .vision_top{position: relative; margin-top: 50px;} #overviewVision .vision_top p{font-size: .9em; color: #444; margin-top: 20px;} #overviewVision .vision_mid{position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 60px;} #overviewVision .vision_mid>p{font-weight: 500; font-size: 1em;} #overviewVision .vision_mid>p .green{font-weight: 500; font-size: 1em; color:#049880;} #overviewVision .vision_mid>p .yellow{font-weight: 500; font-size: 1em; color:#D9952A;} .vision_mid .sero_text{position: relative; width: 170px; height: 90px; display: flex; flex-direction: column; justify-content: space-between; margin-top: 40px; left:76px;} .vision_mid .sero_text::after{content: ''; height: 1px; width: 100%; background-color:#241E20; top: 50%; left: 0; transform: translateY(-50%); position: absolute;} .vision_mid .sero_text h3{font-weight: 700; font-size:24px; width:70%; position: relative; top: 15.5%; position: absolute;} .vision_mid .sero_text h3:first-child{left: 15px;} .vision_mid .sero_text h3:last-child{text-align: right; right: 15px; top: 65px;} .vision_mid ul{position: relative; width: 320px; margin-top: 40px; padding-bottom: 80px;} .vision_mid ul li{position: relative;} .vision_mid ul li:last-child{margin-top: 20px;} .vision_mid ul li h4{font-size: 1.1em; font-weight: 500; color:#049880;} .vision_mid ul li:last-child h4{color:#D9952A;} .vision_mid ul li p{position: relative; margin-top: 10px; color: #444; font-size: .9em;} } /*overview_scroll*/ /*tablet 큰 가로*/ @media screen and (min-width:891px) and (max-width:1260px){ #lifeStyle,#activity{border-top: 1px solid #241E20;} .overview_scroll_wrap{position: relative; height: 1400px; width:90%; max-width:1620px; margin: 0 auto;} #lifeStyle .overview_scroll{position: sticky; width: 350px; left:5%; top: 1px; padding:200px 0 300px 0;} .overview_scroll .green_text{font-weight: 500; font-size: 1.2em; color:#049880;} .overview_scroll h2{margin-top: 4px;} .overview_scroll .just_text{color: #444; font-size: 1.1em; margin-top: 10px;} .overview_scroll_ul{position: absolute; right: 0; top: 300px; width: 50%;} .overview_scroll_ul li{position: relative; margin-top: 20px;} .overview_scroll_ul li:first-child{margin-top: 0;} .overview_scroll_ul li img{width: 100%;} /* activity */ #activity .overview_scroll{margin-left: calc(100% - 300px); position: sticky; width: 350px; top: 1px; padding:200px 0 430px 0;} #activity .overview_scroll h2{text-align: right;} #activity .overview_scroll .just_text{text-align: right;} #activity .overview_scroll .img3block{position: absolute; right: 0;} #activity .overview_scroll_ul{left: 0;} } /*tablet 세로*/ @media screen and (min-width:631px) and (max-width:890px){ #lifeStyle,#activity{border-top: 1px solid #241E20;} .overview_scroll_wrap{position: relative; height: 1700px; width:90%; max-width:1620px; margin: 0 auto;} #lifeStyle .overview_scroll{position: sticky; width: 350px; left:5%; top: 1px; padding:120px 0 120px 0;} .overview_scroll .green_text{font-weight: 500; font-size: 1.2em; color:#049880;} .overview_scroll h2{margin-top: 4px;} .overview_scroll .just_text{color: #444; font-size: 1.1em; margin-top: 10px;} .overview_scroll_ul{position: absolute; right: 0; top: 300px; width: 100%;z-index: -10;} .overview_scroll_ul li{position: relative; margin-top: 20px; } .overview_scroll_ul li:first-child{margin-top: 0;} .overview_scroll_ul li img{width: 100%; opacity: 0.2;} /* activity */ #activity .overview_scroll{margin-left: calc(100% - 350px); position: sticky; width: 350px; top: 1px; padding:120px 0 120px 0;} #activity .overview_scroll h2{text-align: right; color: #049880;} #activity .overview_scroll .just_text{text-align: right;} #activity .overview_scroll .img3block{display: none;} #activity .overview_scroll_ul{left: 0;} } /*mobile*/ @media screen and (max-width:630px){ #lifeStyle,#activity{border-top: 1px solid #241E20;} .overview_scroll_wrap{position: relative; height: 1200px; width:90%; max-width:1620px; margin: 0 auto;} #lifeStyle .overview_scroll{position: sticky; width: 300px; left:5%; top: 1px; padding:120px 0 120px 0;} .overview_scroll .green_text{font-weight: 500; font-size: 1.2em; color:#049880;} .overview_scroll h2{margin-top: 4px;} .overview_scroll .just_text{color: #444; font-size: 1.1em; margin-top: 10px;} .overview_scroll_ul{position: absolute; right: 0; top: 300px; width: 100%;z-index: -10;} .overview_scroll_ul li{position: relative; margin-top: 20px; } .overview_scroll_ul li:first-child{margin-top: 0;} .overview_scroll_ul li img{width: 100%; opacity: 0.2;} /* activity */ #activity .overview_scroll{margin-left: calc(100% - 300px); position: sticky; width: 300px; top: 1px; padding:120px 0 120px 0;} #activity .overview_scroll h2{text-align: right; color: #049880;} #activity .overview_scroll .just_text{text-align: right;} #activity .overview_scroll .img3block{display: none;} #activity .overview_scroll_ul{left: 0;} } /*history start*/ #pointHistory{position: relative; width: 100%; background-image: url(../img/top_main1.jpg); background-position: center; background-size: cover; background-attachment: fixed; overflow: hidden;} .history_wrap{position: relative; background-color:rgba(0,0,0,.7);} .history_inner{position: relative; width:90%; max-width:1350px; margin: 0 auto;} .history_inner h2{position: relative; color: #fff; text-align: center; padding-top: 130px; opacity: 0;} .history_inner .first_circle{position: absolute; width: 13px; height: 13px; border-radius: 50%; background-color: #fff; left: 50%; transform: translateX(-50%); margin-top: 100px;} .history_inner .long_line{position: absolute; width:1px; height: 100%; background-color: #fff; left: 50%; margin-top: 101px;} .history_list{position: relative;display: flex; flex-direction: column; } .history_list li{width: 50%; box-sizing: border-box; margin-top: 80px; position: relative;} .history_list li:first-child{margin-top: 230px;} .history_list li:last-child{margin-bottom: 100px;} .history_list li:nth-child(2n+1){align-self: flex-end; padding-left: 180px;} .history_list li:nth-child(2n){align-self: flex-start; padding-right: 180px; text-align: right;} .history_list li:nth-child(2n) img{display: inline-block; text-align: right;} .history_list li p{color: #fff; font-size: 1.3em; font-weight: 500; } .history_list li p span{color: #fff; font-size: .9em;} .history_list li .box p:first-of-type{margin-top: 16px;} .history_list li:nth-child(2n+1)::before{content: ''; width: 9px; height: 9px; border-radius: 50%; background-color: #fff; left: -4px; top:12px; position: absolute;} .history_list li:nth-child(2n)::before{content: ''; width: 9px; height: 9px; border-radius: 50%; background-color: #fff; right: -5px; top:12px; position: absolute;} .history_list li:nth-child(2n+1)::after{content: ''; width: 158px; height: 1px; border-bottom: 1px dashed #fff; position: absolute; left: 0; top: 15px;} .history_list li:nth-child(2n)::after{content: ''; width: 158px; height: 1px; border-bottom: 1px dashed #fff; position: absolute; right: 0; top: 15px;} /*pointHistory*/ /*tablet 큰 가로*/ @media screen and (min-width:881px) and (max-width:1175px){ #pointHistory{position: relative; width: 100%; background-image: url(../img/top_main1.jpg); background-position: center; background-size: cover; background-attachment: fixed; overflow: hidden;} .history_wrap{position: relative; background-color:rgba(0,0,0,.7);} .history_inner{position: relative; width:90%; max-width:1350px; margin: 0 auto;} .history_inner h2{position: relative; color: #fff; text-align: center; padding-top: 90px; opacity: 0;} .history_inner .first_circle{position: absolute; width: 13px; height: 13px; border-radius: 50%; background-color: #fff; left: 50%; transform: translateX(-50%); margin-top: 30px;} .history_inner .long_line{position: absolute; width:1px; height: 100%; background-color: #fff; left: 50%; margin-top: 31px;} .history_list{position: relative;display: flex; flex-direction: column;} .history_list li{width: 50%; box-sizing: border-box; margin-top: 80px; position: relative;} .history_list li:first-child{margin-top: 130px;} .history_list li:last-child{margin-bottom: 100px;} .history_list li:nth-child(2n+1){align-self: flex-end; padding-left: 70px;} .history_list li:nth-child(2n){align-self: flex-start; padding-right: 70px; text-align: right;} .history_list li:nth-child(2n) img{display: inline-block; text-align: right;} .history_list li p{color: #fff; font-size: 1.3em; font-weight: 500; } .history_list li p span{color: #fff; font-size: .9em;} .history_list li .box p:first-of-type{margin-top: 16px;} .history_list li:nth-child(2n+1)::before{content: ''; width: 9px; height: 9px; border-radius: 50%; background-color: #fff; left: -4px; top:12px; position: absolute;} .history_list li:nth-child(2n)::before{content: ''; width: 9px; height: 9px; border-radius: 50%; background-color: #fff; right: -5px; top:12px; position: absolute;} .history_list li:nth-child(2n+1)::after{content: ''; width: 50px; height: 1px; border-bottom: 1px dashed #fff; position: absolute; left: 0; top: 15px;} .history_list li:nth-child(2n)::after{content: ''; width: 50px; height: 1px; border-bottom: 1px dashed #fff; position: absolute; right: 0; top: 15px;} } /*mobile*/ @media screen and (max-width:880px){ #pointHistory{position: relative; width: 100%; background-image: url(../img/top_main1.jpg); background-position: center; background-size: cover; background-attachment: fixed; overflow: hidden;} .history_wrap{position: relative; background-color:rgba(0,0,0,.7);} .history_inner{position: relative; width:90%; max-width:1350px; margin: 0 auto;} .history_inner h2{position: relative; color: #fff; text-align: center; padding-top: 90px; opacity: 0;} .history_inner .first_circle{position: absolute; width: 13px; height: 13px; border-radius: 50%; background-color: #fff; left: 50%; transform: translateX(-50%); margin-top: 30px;} .history_inner .long_line{position: absolute; width:1px; height: 100%; background-color: #fff; left: 50%; margin-top: 31px;} .history_list{position: relative;display: flex; flex-direction: column;} .history_list li{width: 50%; box-sizing: border-box; margin-top: 80px; position: relative;} .history_list li:first-child{margin-top: 130px;} .history_list li:last-child{margin-bottom: 100px;} .history_list li:nth-child(2n+1){align-self: flex-end; padding-left: 20px;} .history_list li:nth-child(2n+1) img{display: inline-block; text-align: left; left: -180px; position: relative;} .history_list li:nth-child(2n){align-self: flex-start; padding-right: 20px; text-align: right;} .history_list li:nth-child(2n) img{display: inline-block; text-align: left; position: relative;} .history_list li p{color: #fff; font-size: 1.1em; font-weight: 500; } .history_list li p span{color: #fff; font-size: .9em;} .history_list li .box p:first-of-type{margin-top: 16px;} .history_list li:nth-child(2n+1)::before{content: ''; display: none;} .history_list li:nth-child(2n)::before{content: ''; display: none;} .history_list li:nth-child(2n+1)::after{content: ''; display: none;} .history_list li:nth-child(2n)::after{content: ''; display: none;} } /*distribution start*/ /*mobile*/ @media screen and (max-width:560px){ #subBanner.subBanner1{position: relative; height: 600px; overflow: hidden;} .sub_banner_img{position: absolute; left: 50%; top: -200px; transform: translateX(-50%);} #subBanner.subBanner1 .text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} #subBanner.subBanner1 .text h2{font-size: 24px; text-align: center; color: #FFF; position: relative; top: -20px; opacity: 0;} #subBanner.subBanner1 .text p{font-size:14px; text-align: center; color: #FFF; position: relative; margin-top: 20px; top: 20px; opacity: 0; width: 284px;} #subBanner.subBanner1 .tabs{position: absolute; bottom:80px; left: 50%; transform: translateX(-50%); height: 80px; border-top: 1px solid #fff; width: 100%;} #subBanner.subBanner1 .tabs_wrap{position: absolute; display: flex; top: 0; left: 50%; transform: translateX(-50%); flex-wrap: wrap; width: 100%; justify-content: center; } #subBanner.subBanner1 .tabs_wrap li a{color: #fff; width: 110px; line-height: 80px; text-align: center; height: 100%; position: relative; font-size: 1.1em;} #subBanner.subBanner1 .tabs_wrap li a::after{content:'';position: absolute; left: 0; top:-1px; width: 100%; height: 1px; background-color: #049880; opacity: 0;} #subBanner.subBanner1 .tabs_wrap li a::before{content:''; opacity: 0; position: absolute; background-image: url(../img/before.png); width: 7px; height: 6px; background-position: center; background-size: cover; bottom: 15px; left: 50%; transform: translateX(-50%);} #subBanner.subBanner1 .tabs_wrap li.select a::after{opacity: 1;} #subBanner.subBanner1 .tabs_wrap li.select a::before{opacity: 1;} #subBanner.subBanner1 .tabs_wrap li.select a{background-color: rgba(225,225,225,.2);} } /*distributionTextBox*/ #distributionTextBox{position: relative; width: 90%; margin: 0 auto; overflow: hidden;} #distributionTextBox h2{padding-top: 130px;} #distributionTextBox .num_list{position: relative; height: 230px; width: 996px; border: 2px solid #049880; margin: 0 auto; margin-top: 100px; display: flex; justify-content: space-around; align-items: center;} #distributionTextBox .num_list li .bigger{font-size: 3em; color: #049880; font-weight: 700; text-align: center;} #distributionTextBox .num_list li .bigger span{font-size: 1em; color: #049880; font-weight: 700; } #distributionTextBox .num_list li p:last-child{text-align: center; font-size: 1.2em; margin-top: 10px;} /*distributionMidbanner*/ #distributionMidbanner{position: relative; margin-top: 130px; overflow: hidden;} #distributionMidbanner .bg_box{height: 100vh; position: relative; background-image: url(../img/food_bg.jpg); background-size: cover; background-position: center; width:90%; margin: 0 auto; filter: grayscale(100%); transition-duration: 1s; top: 100px;} #distributionMidbanner .text_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} #distributionMidbanner .text_box h2{color: #fff; text-align: center;} #distributionMidbanner .text_box p{color: #fff; text-align: center; margin-top: 60px; font-size: 1.4em; max-width: 680px; width: 90%;} /*distributionSticky*/ #distributionSticky{position: relative; margin-top: 130px;} #distributionSticky .top{position: relative; width:90%; max-width:1620px; margin: 0 auto;} #distributionSticky .top p{font-size: 1.3em; margin-top: 10px;} .sticky_wrap{position: relative; margin-top: 100px; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; height: 300vh; } .sticky_wrap .sticky_imglist{position: absolute; width: 50%; left: 0;} .sticky_wrap .sticky_imglist li{height: 100vh; background-position: center; background-size: cover;} .sticky_wrap .sticky_imglist li:nth-child(1){background-image: url(../img/food_scroll0.jpg);} .sticky_wrap .sticky_imglist li:nth-child(2){background-image: url(../img/food_scroll1.jpg);} .sticky_wrap .sticky_imglist li:nth-child(3){background-image: url(../img/food_scroll2.jpg);} .sticky_wrap .sticky_text{left: calc(100% - 650px); position: sticky; width: 400px; top:1px; padding:300px 0 300px 0;} .sticky_wrap .sticky_text h3{font-weight: 700; font-size: 2.2em;} .sticky_wrap .sticky_text p{font-size: 1.2em; margin-top: 24px;} /*bestQuality*/ #bestQuality{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 130px; overflow: hidden;} #bestQuality>p{font-size: 1.3em; margin-top: 10px;} #bestQuality .box{position: relative; margin: 0 auto; margin-top: 80px; display: flex; width: 1043px; justify-content: space-between;} #bestQuality .box li{cursor: pointer; position: relative; width: 321px; height: 400px; border-radius: 20px; overflow: hidden; top: 80px; opacity: 0;} #bestQuality .box li img{width: 100%;} #bestQuality .box li .text{position: absolute; padding: 30px 0 10px 30px; border-bottom: 1px solid #fff; width: 100%; z-index: 1;} #bestQuality .box li .text h3{font-weight: 500; font-size: 1.3em; color: #fff;} #bestQuality .box li .text p{font-size: 1.1em; color: #fff;} #bestQuality .box li .over_bg_color{width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; transition-duration: .3s;} #bestQuality .box li:nth-child(1) .over_bg_color{background-color: rgba(255,57,84,.3);} #bestQuality .box li:nth-child(2) .over_bg_color{background-color: rgba(22,58,176,.3);} #bestQuality .box li:nth-child(3) .over_bg_color{background-color: rgba(72,169,110,.3);} #bestQuality .box li:hover .over_bg_color{opacity: 1;} /*qualityCtrl*/ #qualityCtrl{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 130px; overflow: hidden;} #qualityCtrl ul{position: relative; margin: 0 auto; margin-top: 80px; display: flex; width: 1043px; justify-content: space-between;} #qualityCtrl ul li{position: relative; top: 80px; opacity: 0;} #qualityCtrl ul li div{width: 110px; position: relative; margin: 0 auto;} #qualityCtrl ul li div::after{content: ''; width: 100%; height: 2px; position: absolute; top: 130px; left: 50%; transform: translateX(-50%); background-color: #049880; border-radius: 3px;} #qualityCtrl ul li:nth-child(2n) div::after{background-color: #D9952A;} #qualityCtrl ul li div img{width: 100%;} #qualityCtrl ul li h3{text-align: center; font-weight: 500; font-size: 1.6em; margin-top: 40px;} #qualityCtrl ul li h4{text-align: center; font-size: 1.3em; margin-top: 12px;} #qualityCtrl ul li p{text-align: center; font-size: 1.1em; margin-top: 4px;} /*distributionBottom*/ #distributionBottom{position: relative; margin-top: 130px; overflow: hidden;} #distributionBottom .bg_bottom{height: 100vh; position: relative; background-image: url(../img/food_bottom_bg.jpg); background-size: cover; background-position: center; width:90%; margin: 0 auto; filter: grayscale(100%);transition-duration: 1s; top: 100px;} #distributionBottom .text{position: absolute; left: 50%; width:90%; max-width:1620px; transform: translate(-50%,-50%); top: 220px;} #distributionBottom .text p{font-size: 1.1em; margin-top: 35px; width: 457px;} #distributionBottom .text p:last-child{margin-top: 20px;} /*distributionTextBox*/ /*tablet 큰 가로*/ @media screen and (min-width:581px) and (max-width:1120px){ #distributionTextBox{position: relative; width: 90%; margin: 0 auto; overflow: hidden;} #distributionTextBox .num_list{position: relative; height: 180px; width: 90%; border: 2px solid #049880; margin: 0 auto; margin-top: 50px; display: flex; justify-content: space-around; align-items: center;} #distributionTextBox .num_list li .bigger{font-size: 1.6em; color: #049880; font-weight: 700; text-align: center;} #distributionTextBox .num_list li .bigger span{font-size: 1em; color: #049880; font-weight: 700; } #distributionTextBox .num_list li p:last-child{text-align: center; font-size: 1.1em; margin-top: 10px;} } /*mobile*/ @media screen and (max-width:580px){ #distributionTextBox{position: relative; width: 90%; margin: 0 auto; overflow: hidden;} #distributionTextBox .num_list{position: relative; height: 180px; width: 90%; border: 2px solid #049880; margin: 0 auto; margin-top: 50px; display: flex; justify-content: space-around; align-items: center; padding: 0 10px;} #distributionTextBox .num_list li{position: absolute;} #distributionTextBox .num_list li:nth-child(1){top: 20px; left: 27.5%; transform: translateX(-30%);} #distributionTextBox .num_list li:nth-child(2){top: 20px; right: 17%; transform: translateX(-30%);} #distributionTextBox .num_list li:nth-child(3){bottom: 20px; left: 27%; transform: translateX(-30%);} #distributionTextBox .num_list li:nth-child(4){bottom: 20px; right:11%; transform: translateX(-20%);} #distributionTextBox .num_list li .bigger{font-size: 1.4em; color: #049880; font-weight: 700; text-align: center;} #distributionTextBox .num_list li .bigger span{font-size: 1em; color: #049880; font-weight: 700; } #distributionTextBox .num_list li p:last-child{text-align: center; font-size: 1.1em; margin-top: 10px;} } /*distributionMidbanner*/ /*tablet 큰 가로*/ @media screen and (min-width:641px) and (max-width:1050px){ #distributionMidbanner{position: relative; margin-top: 100px; overflow: hidden;} #distributionMidbanner .bg_box{height: 100vh; position: relative; background-image: url(../img/food_bg.jpg); background-size: cover; background-position: center; width:90%; margin: 0 auto; filter: grayscale(100%); transition-duration: 1s; top: 100px;overflow: hidden;} #distributionMidbanner .text_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } #distributionMidbanner .text_box h2{color: #fff; text-align: center;} #distributionMidbanner .text_box p{color: #fff; text-align: center; margin-top: 40px; font-size: 1.1em; width: 500px;} } /*tablet 큰 가로*/ @media screen and (max-width:640px){ #distributionMidbanner{position: relative; margin-top: 100px; overflow: hidden;} #distributionMidbanner .bg_box{height: 100vh; position: relative; background-image: url(../img/food_bg.jpg); background-size: cover; background-position: center; width:90%; margin: 0 auto; filter: grayscale(100%); transition-duration: 1s; top: 100px;overflow: hidden;} #distributionMidbanner .text_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } #distributionMidbanner .text_box h2{color: #fff; text-align: center;} #distributionMidbanner .text_box p{color: #fff; text-align: center; margin-top: 40px; font-size: 1em; width: 330px;} } /*distributionSticky*/ /*tablet 큰 가로*/ @media screen and (min-width:971px) and (max-width:1360px){ #distributionSticky{position: relative; margin-top: 130px;} #distributionSticky .top{position: relative; width:90%; max-width:1620px; margin: 0 auto;} #distributionSticky .top p{font-size: 1.2em; margin-top: 10px;width: 90%;} .sticky_wrap{position: relative; margin-top: 100px; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; height: 300vh; } .sticky_wrap .sticky_imglist{position: absolute; width: 50%; left: 0;} .sticky_wrap .sticky_imglist li{height: 100vh; background-position: center; background-size: cover;} .sticky_wrap .sticky_imglist li:nth-child(1){background-image: url(../img/food_scroll0.jpg);} .sticky_wrap .sticky_imglist li:nth-child(2){background-image: url(../img/food_scroll1.jpg);} .sticky_wrap .sticky_imglist li:nth-child(3){background-image: url(../img/food_scroll2.jpg);} .sticky_wrap .sticky_text{left: calc(100% - 450px); position: sticky; width: 400px; top:1px; padding:250px 0 200px 0;} .sticky_wrap .sticky_text h3{font-weight: 700; font-size: 1.6em;} .sticky_wrap .sticky_text p{font-size: 1.2em; margin-top: 24px;} } /*mobile*/ @media screen and (min-width:1px) and (max-width:970px){ #distributionSticky{position: relative; margin-top: 100px;} #distributionSticky .top{position: relative; width:90%; max-width:1620px; margin: 0 auto;} #distributionSticky .top h2{font-size: 1.4em;} #distributionSticky .top p{font-size: 1.1em; margin-top: 10px;width: 90%;} .sticky_wrap{position: relative; margin-top: 80px; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; height: 300vh; } .sticky_wrap .sticky_imglist{position: absolute; width: 100%; left: 0; opacity: 0.3;} .sticky_wrap .sticky_imglist li{height: 100vh; background-position: center; background-size: cover; } .sticky_wrap .sticky_imglist li:nth-child(1){background-image: url(../img/food_scroll0.jpg);} .sticky_wrap .sticky_imglist li:nth-child(2){background-image: url(../img/food_scroll1.jpg);} .sticky_wrap .sticky_imglist li:nth-child(3){background-image: url(../img/food_scroll2.jpg);} .sticky_wrap .sticky_text{left: calc(100% - 450px); position: sticky; width: 400px; top:1px; padding:300px 20px 200px 20px;} .sticky_wrap .sticky_text h3{font-weight: 700; font-size: 1.3em; width: 300px;} .sticky_wrap .sticky_text p{font-size: 1.1em; margin-top: 24px; width: 300px;} } /*bestQuality*/ /*tablet 큰 가로*/ @media screen and (min-width:911px) and (max-width:1170px){ #bestQuality{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 130px; overflow: hidden;} #bestQuality>p{font-size: 1.2em; margin-top: 10px;} #bestQuality .box{position: relative; margin: 0 auto; margin-top: 80px; display: flex; width: 90%; justify-content: space-between;overflow: hidden;} #bestQuality .box li{cursor: pointer; position: relative; width: 241px; height: 300px; border-radius: 20px; top: 80px; opacity: 0;} #bestQuality .box li img{width: 100%;} #bestQuality .box li .text{position: absolute; padding: 20px 0 10px 20px; border-bottom: 1px solid #fff; width: 100%; z-index: 1;} #bestQuality .box li .text h3{font-weight: 500; font-size: 1.2em; color: #fff;} #bestQuality .box li .text p{font-size: 1em; color: #fff;} } /*mobile*/ @media screen and (max-width:910px){ #bestQuality{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 130px;overflow: hidden;} #bestQuality>p{font-size: 1.1em; margin-top: 10px;} #bestQuality .box{position: relative; margin: 0 auto; margin-top: 80px; display: flex; width: 90%; flex-direction: column; align-items: center; height: 960px; justify-content: space-between;overflow: hidden;} #bestQuality .box li{cursor: pointer; position: relative; width: 241px; height: 300px; border-radius: 20px; top: 80px; opacity: 0;} #bestQuality .box li img{width: 100%;} #bestQuality .box li .text{position: absolute; padding: 20px 0 10px 20px; border-bottom: 1px solid #fff; width: 100%; z-index: 1;} #bestQuality .box li .text h3{font-weight: 500; font-size: 1.2em; color: #fff;} #bestQuality .box li .text p{font-size: 1em; color: #fff;} } /*qualityCtrl*/ /*tablet 큰 가로*/ @media screen and (min-width:801px) and (max-width:1170px){ #qualityCtrl{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 100px;overflow: hidden;} #qualityCtrl ul{position: relative; margin: 0 auto; margin-top: 80px; display: flex; width: 90%; justify-content: space-between;overflow: hidden;} #qualityCtrl ul li{position: relative; opacity: 0;} #qualityCtrl ul li div{width: 80px; position: relative; margin: 0 auto;} #qualityCtrl ul li div::after{content: ''; width: 100%; height: 2px; position: absolute; top: 100px; left: 50%; transform: translateX(-50%); background-color: #049880; border-radius: 3px;} #qualityCtrl ul li:nth-child(2n) div::after{background-color: #D9952A;} #qualityCtrl ul li div img{width: 100%;} #qualityCtrl ul li h3{text-align: center; font-weight: 500; font-size: 1.3em; margin-top: 40px;} #qualityCtrl ul li h4{text-align: center; font-size: 1.1em; margin-top: 12px;} #qualityCtrl ul li p{text-align: center; font-size: 1em; margin-top: 4px;} } /*mobile*/ @media screen and (max-width:800px){ #qualityCtrl{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 100px;overflow: hidden;} #qualityCtrl ul{position: relative; margin: 0 auto; margin-top: 80px; display: flex; width: 90%; flex-direction: column; align-items: center;overflow: hidden;} #qualityCtrl ul li{position: relative; opacity: 0; margin-top: 50px;} #qualityCtrl ul li:first-child{margin-top: 0px;} #qualityCtrl ul li div{width: 80px; position: relative; margin: 0 auto;} #qualityCtrl ul li div::after{content: ''; width: 100%; height: 2px; position: absolute; top: 100px; left: 50%; transform: translateX(-50%); background-color: #049880; border-radius: 3px;} #qualityCtrl ul li:nth-child(2n) div::after{background-color: #D9952A;} #qualityCtrl ul li div img{width: 100%;} #qualityCtrl ul li h3{text-align: center; font-weight: 500; font-size: 1.3em; margin-top: 40px;} #qualityCtrl ul li h4{text-align: center; font-size: 1.1em; margin-top: 12px;} #qualityCtrl ul li p{text-align: center; font-size: 1em; margin-top: 4px;} } /*distributionBottom*/ /*tablet 큰 가로*/ @media screen and (min-width:641px) and (max-width:1050px){ #distributionBottom{position: relative; margin-top: 100px;overflow: hidden;} #distributionBottom .bg_bottom{height: 100vh; position: relative; background-image: url(../img/food_bottom_bg.jpg); background-size: cover; background-position: center; width:90%; margin: 0 auto; filter: grayscale(100%);transition-duration: 1s; top: 100px;overflow: hidden;} #distributionBottom .text{position: absolute; left: 50%; width:90%; max-width:1620px; transform: translate(-50%,-50%); top: 220px;} #distributionBottom .text p{font-size: 1.1em; margin-top: 35px; width: 457px;} #distributionBottom .text p:last-child{margin-top: 20px;} } /*mobile*/ @media screen and (max-width:640px){ #distributionBottom{position: relative; margin-top: 100px;overflow: hidden;} #distributionBottom .bg_bottom{height: 100vh; position: relative; background-image: url(../img/food_bottom_bg.jpg); background-size: cover; background-position: center; width:90%; margin: 0 auto; filter: grayscale(100%);transition-duration: 1s; top: 100px; opacity: 0.5;overflow: hidden;} #distributionBottom .text{position: absolute; left: 50%; width:90%; max-width:1620px; transform: translate(-50%,-50%); top: 220px;} #distributionBottom .text p{font-size: 1em; margin-top: 35px; width: 457px; width: 330px;} #distributionBottom .text p:last-child{margin-top: 20px;} } /*retail*/ /*retailTextBox*/ #retailTextBox{position: relative; width: 90%; margin: 0 auto;} #retailTextBox h2{padding-top: 130px;} #retailTextBox .list_num{position: relative; height: 230px; width: 996px; border: 2px solid #049880; margin: 0 auto; margin-top: 100px; display: flex; justify-content: space-around; align-items: center;} #retailTextBox .list_num li .bigger{font-size: 3em; color: #049880; font-weight: 700; text-align: center;} #retailTextBox .list_num li .bigger span{font-size: 1em; color: #049880; font-weight: 700; } #retailTextBox .list_num li p:last-child{text-align: center; font-size: 1.2em; margin-top: 10px;} /*retailMidbanner*/ #retailMidbanner{position: relative; margin-top: 130px;} #retailMidbanner .bg_box{height: 100vh; position: relative; background-image: url(../img/retail_bg.jpg); background-size: cover; background-position: center; width:90%; margin: 0 auto; filter: grayscale(100%); transition-duration: 1s; top: 100px;} #retailMidbanner .text_box{position: absolute; left: 50%; transform: translateX(-50%); width: 90%; max-width:1620px; top: 0;} #retailMidbanner .text_box p{margin-top: 30px; font-size: 1.4em; width: 670px;} /*retailContents*/ #retailContents{position: relative; width:90%; max-width:1200px; margin: 0 auto; display: flex; justify-content: space-between; margin-top: 230px; overflow: hidden;} #retailContents .con_box{position: relative; width: 530px;} #retailContents .con_box:first-child{opacity: 0; left: -100px;} #retailContents .con_box:last-child{opacity: 0; left:100px;} #retailContents .con_box:last-child{margin-top: 150px;} #retailContents .con_box img{width: 100%; border-radius: 20px;} #retailContents .con_box img:last-child{width: 350px;} #retailContents .con_box h3{font-size: 1.3em; font-weight: 500; height: 77px; line-height: 77px; border-bottom: 1px solid #ccc; padding-left: 30px;} #retailContents .con_box p{font-size: 1.2em; margin-top: 20px;} /*retailInline*/ #retailInline{position: relative; padding: 130px 0 230px 0; background-image: url(../img/retail_inline.jpg); background-position:0 bottom; background-repeat: no-repeat;} #retailInline h2{text-align: center; margin-bottom: 50px;} #retailInline div{position: relative; display: flex; width: 90%; justify-content: space-between; max-width: 950px; margin: 0 auto; margin-top: 40px; margin-bottom:200px;} #retailInline div p{width: 440px; font-size: 1.2em;} /*retailAccordion*/ #retailAccordion{position: relative; padding: 130px 0; width:85%; margin: 0 auto;} #retailAccordion h2{text-align: center; margin-bottom: 100px;} #retailAccordion .retail_list{position: relative; height: 600px; display: flex;justify-content: space-between;} #retailAccordion .retail_list li{width: 13%; background-position: center; background-size: cover; box-shadow: -3px 0 3px rgba(0,0,0,0.2); cursor: pointer;display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; left: -100px; opacity:0;} #retailAccordion .retail_list li .retail_list_inner{display: flex; justify-content: center; align-items: center; flex-direction: column; transition-duration: 0.5s;} #retailAccordion .retail_list li .retail_list_inner div{width: 90px; height:90px; position: relative;} #retailAccordion .retail_list li .retail_list_inner div img{width: 100%; position: absolute; top: 0; left: 0; transition-duration: .3s;} #retailAccordion .retail_list li .retail_list_inner div img:last-child{opacity: 0;} #retailAccordion .retail_list li .retail_list_inner h3{font-size: 1.6em;transition-duration: 0.5s; text-align: center; font-weight: 700; margin-top: 10px;} #retailAccordion .retail_list li .retail_list_inner p{margin-top: 10px; font-size: 1.2em;} #retailAccordion .retail_list li.retail_select{width: 65%; display: flex; justify-content: center; align-items: center;} #retailAccordion .retail_list li.retail_select .retail_list_inner div img:last-child{opacity: 1;} #retailAccordion .retail_list li.retail_select .retail_list_inner div img:first-child{opacity:0;} #retailAccordion .retail_list li.retail_select .retail_list_inner h3{color: #fff;} #retailAccordion .retail_list li.retail_select .retail_list_inner p{color: #fff;} #retailAccordion .retail_list li.retail_select:nth-child(1){background-image: url(../img/retail_nemo0.jpg);} #retailAccordion .retail_list li.retail_select:nth-child(2){background-image: url(../img/retail_nemo1.jpg);} #retailAccordion .retail_list li.retail_select:nth-child(3){background-image: url(../img/retail_nemo2.jpg);} #retailAccordion .retail_list li.retail_select:nth-child(4){background-image: url(../img/retail_nemo3.jpg);} /*retailTextBox*/ /*tablet 큰 가로*/ @media screen and (min-width:651px) and (max-width:1120px){ #retailTextBox{position: relative; width: 90%; margin: 0 auto; overflow: hidden;} #retailTextBox h2{padding-top: 130px;} #retailTextBox .list_num{position: relative; height: 180px; width: 90%; border: 2px solid #049880; margin: 0 auto; margin-top: 50px; display: flex; justify-content: space-around; align-items: center;} #retailTextBox .list_num li .bigger{font-size: 1.6em; color: #049880; font-weight: 700; text-align: center;} #retailTextBox .list_num li .bigger span{font-size: 1em; color: #049880; font-weight: 700; } #retailTextBox .list_num li p:last-child{text-align: center; font-size: 1.1em; margin-top: 10px;} } /*mobile*/ @media screen and (min-width:441px) and (max-width:650px){ #retailTextBox{position: relative; width: 90%; margin: 0 auto; overflow: hidden;} #retailTextBox .list_num{position: relative; height: 180px; width: 90%; border: 2px solid #049880; margin: 0 auto; margin-top: 50px; display: flex; justify-content: space-around; align-items: center; padding: 0 10px;} #retailTextBox .list_num li{position: absolute;} #retailTextBox .list_num li:nth-child(1){top: 20px; left: 13%;} #retailTextBox .list_num li:nth-child(2){top: 20px; right: 13%; } #retailTextBox .list_num li:nth-child(3){bottom: 20px; left: 17%; } #retailTextBox .list_num li:nth-child(4){bottom: 20px; right:16%;} #retailTextBox .list_num li .bigger{font-size: 1.4em; color: #049880; font-weight: 700; text-align: center;} #retailTextBox .list_num li .bigger span{font-size: 1em; color: #049880; font-weight: 700; } #retailTextBox .list_num li p:last-child{text-align: center; font-size: 1.1em; margin-top: 10px;} } /*mobile*/ @media screen and (max-width:440px){ #retailTextBox{position: relative; width: 90%; margin: 0 auto; overflow: hidden;} #retailTextBox .list_num{position: relative; height: 180px; width: 90%; border: 2px solid #049880; margin: 0 auto; margin-top: 50px; display: flex; justify-content: space-around; align-items: center; padding: 0 10px;} #retailTextBox .list_num li{position: absolute;} #retailTextBox .list_num li:nth-child(1){top: 20px; left: 5%;} #retailTextBox .list_num li:nth-child(2){top: 20px; right: 5%; } #retailTextBox .list_num li:nth-child(3){bottom: 20px; left: 12%; } #retailTextBox .list_num li:nth-child(4){bottom: 20px; right:10%;} #retailTextBox .list_num li .bigger{font-size: 1.4em; color: #049880; font-weight: 700; text-align: center;} #retailTextBox .list_num li .bigger span{font-size: 1em; color: #049880; font-weight: 700; } #retailTextBox .list_num li p:last-child{text-align: center; font-size: 1.1em; margin-top: 10px;} } /*retailMidbanner*/ /*tablet 큰 가로*/ @media screen and (min-width:641px) and (max-width:1050px){ #retailMidbanner{position: relative; margin-top: 100px; overflow: hidden;} #retailMidbanner .bg_box{height: 100vh; position: relative; background-image: url(../img/retail_bg.jpg); background-size: cover; background-position: center; width:90%; margin: 0 auto; filter: grayscale(100%); transition-duration: 1s; top: 100px; overflow: hidden;} #retailMidbanner .text_box{position: absolute; left: 50%; transform: translateX(-50%); width: 90%; max-width:1620px; top: 0;} #retailMidbanner .text_box p{margin-top: 30px; font-size: 1.1em; width: 500px;} } /*mobile*/ @media screen and (max-width:640px){ #retailMidbanner{position: relative; margin-top: 100px; overflow: hidden;} #retailMidbanner .bg_box{height: 100vh; position: relative; background-image: url(../img/retail_bg.jpg); background-size: cover; background-position: center; width:90%; margin: 0 auto; filter: grayscale(100%); transition-duration: 1s; top: 100px; overflow: hidden;} #retailMidbanner .text_box{position: absolute; left: 50%; transform: translateX(-50%); width: 90%; max-width:1620px; top: 0;} #retailMidbanner .text_box p{margin-top: 30px; font-size: 1em; width: 330px;} } /*retailContents*/ /*tablet 큰 가로*/ @media screen and (min-width:991px) and (max-width:1240px){ #retailContents{position: relative; width:90%; max-width:1200px; margin: 0 auto; display: flex; justify-content: space-between; margin-top: 130px;} #retailContents .con_box{position: relative; width: 420px;} #retailContents .con_box:last-child{margin-top: 150px;} #retailContents .con_box img{width: 100%; border-radius: 20px;} #retailContents .con_box img:last-child{width: 320px;} #retailContents .con_box h3{font-size: 1.3em; font-weight: 500; height: 77px; line-height: 77px; border-bottom: 1px solid #ccc; padding-left: 30px;} #retailContents .con_box p{font-size: 1.1em; margin-top: 20px;} } /*tablet 세로*/ @media screen and (min-width:781px) and (max-width:990px){ #retailContents{position: relative; width:90%; max-width:1200px; margin: 0 auto; display: flex; justify-content: space-between; margin-top: 130px;} #retailContents .con_box{position: relative; width: 330px;} #retailContents .con_box:last-child{margin-top: 150px;} #retailContents .con_box img{width: 100%; border-radius: 20px;} #retailContents .con_box img:last-child{width: 320px;} #retailContents .con_box h3{font-size: 1.3em; font-weight: 500; height: 77px; line-height: 77px; border-bottom: 1px solid #ccc; padding-left: 30px;} #retailContents .con_box p{font-size: 1.1em; margin-top: 20px;} } /*mobile*/ @media screen and (max-width:780px){ #retailContents{position: relative; width:90%; max-width:1200px; margin: 0 auto; display: flex; justify-content: space-between; margin-top: 130px; flex-direction: column; align-items: center;} #retailContents .con_box{position: relative; width: 330px;} #retailContents .con_box:last-child{margin-top: 100px;} #retailContents .con_box img{width: 100%; border-radius: 20px;} #retailContents .con_box img:last-child{width: 320px;} #retailContents .con_box h3{font-size: 1.3em; font-weight: 500; height: 77px; line-height: 77px; border-bottom: 1px solid #ccc; padding-left: 30px;} #retailContents .con_box p{font-size: 1.1em; margin-top: 20px;} } /*retailInline*/ /*tablet 큰 가로*/ @media screen and (max-width:1030px){ #retailInline{position: relative; padding: 100px 0 230px 0; background-image: url(../img/retail_inline.jpg); background-position:0 bottom; background-repeat: no-repeat;} #retailInline h2{text-align: center; margin-bottom: 50px;} #retailInline div{position: relative; display: flex; width:80%; margin: 0 auto; margin-top: 40px; margin-bottom:200px; flex-direction: column; align-items: center;} #retailInline div p{width: 100%; font-size: 1.1em;} #retailInline div p:last-child{margin-top: 30px;} } /*retailContents*/ /*tablet 큰 가로*/ @media screen and (max-width:1280px){ #retailAccordion{position: relative; padding: 100px 0; width:90%; margin: 0 auto;} #retailAccordion h2{text-align: center; margin-bottom: 70px;} #retailAccordion .retail_list{position: relative; height: 600px; display: flex;justify-content: space-between;} #retailAccordion .retail_list li{width: 13%; background-position: center; background-size: cover; box-shadow: -3px 0 3px rgba(0,0,0,0.2); cursor: pointer;display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; left: -100px; opacity:0;} #retailAccordion .retail_list li .retail_list_inner{display: flex; justify-content: center; align-items: center; flex-direction: column; transition-duration: 0.5s;} #retailAccordion .retail_list li .retail_list_inner div{width: 60px; height:60px; position: relative;} #retailAccordion .retail_list li .retail_list_inner div img{width: 100%; position: absolute; top: 0; left: 0; transition-duration: .3s;} #retailAccordion .retail_list li .retail_list_inner div img:last-child{opacity: 0;} #retailAccordion .retail_list li .retail_list_inner h3{font-size: 1.3em;transition-duration: 0.5s; text-align: center; font-weight: 700; margin-top: 10px;} #retailAccordion .retail_list li .retail_list_inner p{margin-top: 10px; font-size: 1.1em;} } /*ethics start*/ /*mobile*/ @media screen and (min-width:459px) and (max-width:785px){ #subBanner.subBanner2{position: relative; height: 600px; overflow: hidden;} .sub_banner_img{position: absolute; left: 50%; top: -200px; transform: translateX(-50%);} #subBanner.subBanner2 .text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} #subBanner.subBanner2 .text h2{font-size: 24px; text-align: center; color: #FFF; position: relative; top: -20px; opacity: 0;} #subBanner.subBanner2 .text p{font-size:14px; text-align: center; color: #FFF; position: relative; margin-top: 20px; top: 20px; opacity: 0; width: 284px;} #subBanner.subBanner2 .tabs{position: absolute; bottom:80px; left: 50%; transform: translateX(-50%); height: 80px; border-top: 1px solid #fff; width: 100%;} #subBanner.subBanner2 .tabs_wrap{position: absolute; display: flex; top: 0; left: 50%; transform: translateX(-50%); flex-wrap: wrap; width: 100%; justify-content: center; } #subBanner.subBanner2 .tabs_wrap li a{color: #fff; width: 110px; line-height: 80px; text-align: center; height: 100%; position: relative; font-size: 1.1em;} #subBanner.subBanner2 .tabs_wrap li a::after{content:'';position: absolute; left: 0; top:-1px; width: 100%; height: 1px; background-color: #049880; opacity: 0;} #subBanner.subBanner2 .tabs_wrap li a::before{content:''; opacity: 0; position: absolute; background-image: url(../img/before.png); width: 7px; height: 6px; background-position: center; background-size: cover; bottom: 15px; left: 50%; transform: translateX(-50%);} #subBanner.subBanner2 .tabs_wrap li.select a::after{opacity: 1;} #subBanner.subBanner2 .tabs_wrap li.select a::before{opacity: 1;} #subBanner.subBanner2 .tabs_wrap li.select a{background-color: rgba(225,225,225,.2);} } @media screen and (max-width:458px){ #subBanner.subBanner2{position: relative; height: 600px; overflow: hidden;} .sub_banner_img{position: absolute; left: 50%; top: -200px; transform: translateX(-50%);} #subBanner.subBanner2 .text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} #subBanner.subBanner2 .text h2{font-size: 24px; text-align: center; color: #FFF; position: relative; top: -20px; opacity: 0;} #subBanner.subBanner2 .text p{font-size:14px; text-align: center; color: #FFF; position: relative; margin-top: 20px; top: 20px; opacity: 0; width: 284px;} #subBanner.subBanner2 .tabs{position: absolute; bottom:120px; left: 50%; transform: translateX(-50%); height: 60px; border-top: 1px solid #fff; width: 100%;} #subBanner.subBanner2 .tabs_wrap{position: absolute; display: flex; top: 0; left: 50%; transform: translateX(-50%); flex-wrap: wrap; width: 100%; justify-content: center; } #subBanner.subBanner2 .tabs_wrap li a{color: #fff; width: 110px; line-height: 60px; text-align: center; height: 100%; position: relative; font-size: 1.1em;} #subBanner.subBanner2 .tabs_wrap li a::after{content:'';position: absolute; left: 0; top:-1px; width: 100%; height: 1px; background-color: #049880; opacity: 0;} #subBanner.subBanner2 .tabs_wrap li a::before{content:''; opacity: 0; position: absolute; background-image: url(../img/before.png); width: 7px; height: 6px; background-position: center; background-size: cover; bottom:10px; left: 50%; transform: translateX(-50%);} #subBanner.subBanner2 .tabs_wrap li.select a::after{opacity: 1;} #subBanner.subBanner2 .tabs_wrap li.select a::before{opacity: 1;} #subBanner.subBanner2 .tabs_wrap li.select a{background-color: rgba(225,225,225,.2);} } /*ethicsTextBox*/ #ethicsTextBox{position: relative; width: 90%; margin: 0 auto; overflow: hidden;} #ethicsTextBox h2{padding-top: 100px;} /*ethicsMidbanner*/ #ethicsMidbanner{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 140px; overflow: hidden;} #ethicsMidbanner .text_box{position: absolute; left: 50%; transform: translate(-50%,-40%); top: 50%; display: flex; flex-wrap: wrap; width:576px; height: 585px; z-index: 1; justify-content: space-between;} #ethicsMidbanner .text_box li{position: relative;} #ethicsMidbanner .text_box li:nth-child(4){padding-right: 55px;} #ethicsMidbanner .text_box li h3{font-weight: 500; color: #fff; font-size: 1.8em; position: relative;} #ethicsMidbanner .text_box li h3::after{content: ''; position: absolute; width: 50px; height: 1px; background-color: #fff; top: 50px; left: 0;} #ethicsMidbanner .text_box li p{color: #fff; font-size: 1.2em; margin-top: 30px;} #ethicsMidbanner .bg_box{position: relative; height: 100vh;} #ethicsMidbanner .bg_box li{position: absolute; width: 100%; height: 100vh; background-position: center; background-size: cover; top: 0; left: 0; display: none;} #ethicsMidbanner .bg_box li:first-child{display: block;} #ethicsMidbanner .bg_box li:nth-child(1){background-image: url(../img/ethics0.jpg);} #ethicsMidbanner .bg_box li:nth-child(2){background-image: url(../img/ethics1.jpg);} #ethicsMidbanner .bg_box li:nth-child(3){background-image: url(../img/ethics2.jpg);} #ethicsMidbanner .bg_box li:nth-child(4){background-image: url(../img/ethics3.jpg);} /*ethicsCharter*/ #ethicsCharter{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 130px; overflow: hidden;} #ethicsCharter .top p{font-size: 1.2em; margin-top: 20px; width: 780px;} #ethicsCharter .mid{position: relative; margin-top: 80px;} #ethicsCharter .mid li{position: relative; margin-top: 20px; width: 1180px; top: 100px;} #ethicsCharter .mid li:first-child{margin-top: 0;} #ethicsCharter .mid li>p{font-weight: 700; font-size: 2.5em; color: #ccc; transition-duration: .2s;} #ethicsCharter .mid li .show_box{position: absolute; width: 600px; padding: 40px 30px; box-shadow: 4px 6px 15px rgba(0,0,0,.2); z-index: 2; right: 0; top: 65px; border-radius: 30px; opacity: 0; backdrop-filter: blur(1px); transition-duration: .2s;} #ethicsCharter .mid li .show_box p{font-size: 1.2em; font-weight: 500;} #ethicsCharter .mid li.select>p{color: #241E20;} #ethicsCharter .mid li.select .show_box{opacity: 1;} #ethicsCharter .bottom{position: relative; margin: 0 auto; margin-top: 230px; margin-bottom: 130px; height: 50px; width:584px; justify-content: space-between; display: flex;} #ethicsCharter .bottom button{height: 100%; width: 277px; border-radius: 3px; border: 1px solid #888; line-height: 50px; text-align: left; cursor: pointer; padding-left: 15px; position: relative;} #ethicsCharter .bottom button::after{content: ''; position: absolute; background-image: url(../img/download_icon.png); background-position: center; background-size: cover; width: 29px; right: 15px; top: 9px; height: 29px;} #ethicsCharter .bottom button p{font-weight: 500; font-size: 1.3em;} /*ethicsMidbanner*/ /*mobile*/ @media screen and (max-width:840px){ #ethicsMidbanner{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 60px; overflow: hidden;} #ethicsMidbanner .text_box{position: absolute; left: 50%; transform: translate(-50%,-46%); top: 50%; display: flex; flex-wrap: wrap; width:212px; height: 100%; z-index: 1; justify-content: space-between;} #ethicsMidbanner .text_box li{position: relative;} #ethicsMidbanner .text_box li h3{font-weight: 500; color: #fff; font-size: 1.3em; position: relative;} #ethicsMidbanner .text_box li h3::after{content: ''; position: absolute; width: 35px; height: 1px; background-color: #fff; top: 40px; left: 0;} #ethicsMidbanner .text_box li p{color: #fff; font-size: 1em; margin-top: 25px;} } /*ethicsCharter*/ /*tablet 큰 가로*/ @media screen and (min-width:821px) and (max-width:1350px){ #ethicsCharter{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 100px; overflow: hidden;} #ethicsCharter .top p{font-size: 1.1em; margin-top: 20px; width: 600px;} #ethicsCharter .mid{position: relative; margin-top: 60px;} #ethicsCharter .mid li{position: relative; margin-top: 20px; width: 700px; top: 100px;} #ethicsCharter .mid li:first-child{margin-top: 0;} #ethicsCharter .mid li>p{font-weight: 700; font-size: 1.8em; color: #ccc; transition-duration: .2s;} #ethicsCharter .mid li .show_box{position: absolute; width: 400px; padding: 40px 30px; box-shadow: 4px 6px 15px rgba(0,0,0,.2); z-index: 2; right: 0; top: 50px; border-radius: 30px; opacity: 0; backdrop-filter: blur(1px); transition-duration: .2s;} #ethicsCharter .mid li .show_box p{font-size: 1.1em; font-weight: 500;} #ethicsCharter .mid li.select>p{color: #241E20;} #ethicsCharter .mid li.select .show_box{opacity: 1;} #ethicsCharter .bottom{position: relative; margin: 0 auto; margin-top: 200px; margin-bottom: 100px; height: 40px; width:470px; justify-content: space-between; display: flex;} #ethicsCharter .bottom button{height: 100%; width: 220px; border-radius: 3px; border: 1px solid #888; line-height: 40px; text-align: left; cursor: pointer; padding-left: 10px; position: relative;} #ethicsCharter .bottom button::after{content: ''; position: absolute; background-image: url(../img/download_icon.png); background-position: center; background-size: cover; width: 24px; right: 10px; top: 8px; height: 24px;} #ethicsCharter .bottom button p{font-weight: 500; font-size: 1.1em;} } /*mobile*/ @media screen and (max-width:820px){ #ethicsCharter{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 100px; overflow: hidden;} #ethicsCharter .top p{font-size: 1.1em; margin-top: 20px; width: 100%;} #ethicsCharter .mid{position: relative; margin-top: 60px;} #ethicsCharter .mid li{position: relative; margin-top: 20px; width: 100%; top: 100px;} #ethicsCharter .mid li:first-child{margin-top: 0;} #ethicsCharter .mid li>p{font-weight: 700; font-size: 1.3em; color: #241E20; transition-duration: .2s;} #ethicsCharter .mid li .show_box{display: none;} #ethicsCharter .bottom{position: relative; margin: 0 auto; margin-top: 100px; margin-bottom: 100px; height: 40px; width:330px; justify-content: space-between; display: flex; flex-direction: column; align-items: center; } #ethicsCharter .bottom button{height: 100%; width: 220px; border-radius: 3px; border: 1px solid #888; line-height: 40px; text-align: left; cursor: pointer; padding-left: 10px; position: relative; } #ethicsCharter .bottom button:last-child{margin-top: 10px;} #ethicsCharter .bottom button::after{content: ''; position: absolute; background-image: url(../img/download_icon.png); background-position: center; background-size: cover; width: 24px; right: 10px; top: 8px; height: 24px;} #ethicsCharter .bottom button p{font-weight: 500; font-size: 1.1em;} } /*news*/ /*news_wrap*/ .news_wrap{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 130px; margin-bottom: 300px;} .news_wrap .input{position: relative; opacity: 0;} .news_wrap .input::after{content: ''; position: absolute; right: 0; top: 10px; width: 36px; height: 36px; background-image: url(../img/search.png); background-position: center; background-size: cover; cursor: pointer;} .news_wrap #search{position: absolute; right: 0; top: 0; width: 260px; border: none; border-bottom: 2px solid #241E20; background: none; height: 56px;} /*table*/ .news_wrap table{position: relative; top: 120px; border-top: 2px solid #241E20; border-collapse: collapse; width: 100%;} .news_wrap table tbody tr{position: relative; cursor: pointer;opacity: 0;} .news_wrap table tbody tr td{position: relative; border-bottom: 1px solid #D9D9D9; padding: 26px 0;} .news_wrap table tbody tr td:first-child{padding-left: 130px; padding-right: 40px;} .news_wrap table tbody tr td:last-child{padding-right: 130px; padding-left:40px;} .news_wrap table tbody tr td:first-child div{position: relative; display: flex; } .news_wrap table tbody tr td:first-child div p{color: #049880; font-size: 1.3em;} .news_wrap table tbody tr td:first-child div h3{font-size: 1.3em; margin-left: 40px; font-weight: 500;} .news_wrap table tbody tr td:first-child>p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 30px; color: #666; font-size: 1.2em; width: 924px;} .news_wrap table tbody tr td:last-child{font-size: 1.3em;} .news_wrap table tbody tr td:nth-child(2){width: 253px;} .news_wrap table tbody tr td:nth-child(2) img{width: 100%;} /*button*/ .news_wrap button{position: relative; width: 171px; left: 50%; transform: translateX(-50%);margin-top: 100px; top: 100px; margin-left: -10px; cursor: pointer;} .news_wrap button::after{content: ''; position: absolute; right:-10px; top: 3px; width: 25px; height: 25px; background-image: url(../img/note_plus.png); background-position: center; background-size: cover;} .news_wrap button p{font-size: 1.4em; font-weight:700; } /*news_wrap*/ /*tablet 큰 가로*/ @media screen and (min-width:981px) and (max-width:1640px){ /*news_wrap*/ .news_wrap{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 80px; margin-bottom: 260px;} .news_wrap .input{position: relative; opacity: 0;} .news_wrap .input::after{content: ''; position: absolute; right: 0; top: 16px; width: 26px; height: 26px; background-image: url(../img/search.png); background-position: center; background-size: cover; cursor: pointer;} .news_wrap #search{position: absolute; right: 0; top: 0; width: 200px; border: none; border-bottom: 2px solid #241E20; background: none; height: 56px;} /*table*/ .news_wrap table{position: relative; top: 120px; border-top: 2px solid #241E20; border-collapse: collapse; width: 100%;} .news_wrap table tbody tr{position: relative; cursor: pointer; opacity: 0;} .news_wrap table tbody tr td{position: relative; border-bottom: 1px solid #D9D9D9; padding: 16px 0;} .news_wrap table tbody tr td:first-child{padding-left: 30px; padding-right: 10px;} .news_wrap table tbody tr td:last-child{padding-right: 10px; padding-left:10px;} .news_wrap table tbody tr td:first-child div{position: relative; display: flex; } .news_wrap table tbody tr td:first-child div p{color: #049880; font-size: 1.2em;} .news_wrap table tbody tr td:first-child div h3{font-size: 1.2em; margin-left: 20px; font-weight: 500;} .news_wrap table tbody tr td:first-child>p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 30px; color: #666; font-size: 1.1em; width: 640px;} .news_wrap table tbody tr td:last-child{font-size: 1.1em;} .news_wrap table tbody tr td:nth-child(2){width: 200px;} .news_wrap table tbody tr td:nth-child(2) img{width: 100%;} /*button*/ .news_wrap button{position: relative; width: 171px; left: 50%; transform: translateX(-50%);margin-top: 80px; top: 80px; margin-left: -8px; cursor: pointer;} .news_wrap button::after{content: ''; position: absolute; right:-8px; top: 3px; width: 24px; height: 24px; background-image: url(../img/note_plus.png); background-position: center; background-size: cover;} .news_wrap button p{font-size: 1.3em; font-weight:700; } } /*mobile*/ @media screen and (max-width:980px){ /*news_wrap*/ .news_wrap{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 80px; margin-bottom: 260px;} .news_wrap .input{position: relative; opacity: 0;} .news_wrap .input::after{content: ''; position: absolute; right: 0; top: 16px; width: 26px; height: 26px; background-image: url(../img/search.png); background-position: center; background-size: cover; cursor: pointer;} .news_wrap #search{position: absolute; right: 0; top: 0; width: 200px; border: none; border-bottom: 2px solid #241E20; background: none; height: 56px;} /*table*/ .news_wrap table{position: relative; top: 120px; border-top: 2px solid #241E20; border-collapse: collapse; width:100%; margin: 0 auto;} .news_wrap table tbody tr{position: relative; cursor: pointer; opacity: 0;} .news_wrap table tbody tr td{position: relative; border-bottom: 1px solid #D9D9D9; padding: 16px 0;} .news_wrap table tbody tr td:first-child{padding-left: 10px; } .news_wrap table tbody tr td:last-child{padding-right: 10px;} .news_wrap table tbody tr td:first-child div{position: relative; display: flex; flex-direction: column;} .news_wrap table tbody tr td:first-child div p{color: #049880; font-size: 1.1em;} .news_wrap table tbody tr td:first-child div h3{font-size: 1.2em; margin-top: 10px; font-weight: 500; margin-left: 0;} .news_wrap table tbody tr td:first-child>p{display: none;} .news_wrap table tbody tr td:last-child{font-size: 1em;} .news_wrap table tbody tr td:nth-child(2){display: none;} .news_wrap table tbody tr td:nth-child(2) img{width: 100%;} /*button*/ .news_wrap button{position: relative; width: 171px; left: 50%; transform: translateX(-50%);margin-top: 80px; top: 80px; margin-left: -8px; cursor: pointer;} .news_wrap button::after{content: ''; position: absolute; right:-8px; top: 3px; width: 24px; height: 24px; background-image: url(../img/note_plus.png); background-position: center; background-size: cover;} .news_wrap button p{font-size: 1.3em; font-weight:700; } } /*cs*/ #cs{position: relative; width:90%; max-width:1620px; margin: 0 auto; margin-top: 130px; overflow: hidden;} .cs_wrap{position: relative; border-top: 2px solid #241E20; border-bottom: 2px solid #241E20; margin-top: 80px; padding-bottom: 130px;} .cs_inner{position: relative; padding: 60px 130px;} .cs_wrap input[type=text]{position: relative; height: 80px; width:1258px; background-color: #F5F5F5; border: none; margin-left: 50px;} .cs_wrap label{font-weight: 500; font-size: 1.3em; line-height: 80px;} .cs_wrap label span{color: #ff5050; font-weight: 500; font-size: 1em;} #cs input[type=checkbox]{width: 24px; height: 24px; border: 1px solid #666;} /*cs_top*/ .cs_top{position: relative; display: flex; justify-content: space-between;} .cs_top .cate_box{position: relative; display: flex;} .cs_top .cate_box .radio_bg{position: relative; width: 557px; height: 80px; background-color: #F5F5F5; padding: 0 70px 0 40px; box-sizing: border-box; display: flex; align-items: center; margin-left: 50px;} .cs_top .cate_box .radio_bg div{position: relative; display: flex; align-items: center;} .cs_top .cate_box .radio_bg label{color: #666; margin-left: 10px;} .cs_wrap input[type=radio]{width: 24px; height: 24px; margin-left: 40px;} .cs_wrap input[type=text]{margin-top: 20px;} .cs_top .age{position: relative;} .cs_top .age label{margin-right: 40px; position: relative;} .cs_top .age button{position: relative; width: 521px; border: 1px solid #666; height: 80px; bottom: 14px; cursor: pointer; margin-right: 5px;} .cs_top .age button h3{font-weight: 500; color: #444; font-size: 1.2em;} .cs_top .age button p{color: #666;} .cs_wrap #myName{margin-top: 10px;} /*phone*/ .cs_wrap .phone{position: relative; display: flex; justify-content: space-between; height: 80px;} .cs_wrap .phone label{margin-top:17px;} .cs_wrap .phone p{line-height:120px; text-align: center; padding-right: 10px; box-sizing: border-box;} .cs_wrap .phone .phone_input{position: relative; display: flex; justify-content: space-between; width: 1258px; height: 80px;} .cs_wrap .phone .phone_input::after{content: ''; position: absolute; left: -5px; top: 20px; width: 100%; height: 100%; background-color: #F5F5F5; z-index: -10;} .cs_wrap .phone .phone_input input[type=text]{position: relative; margin-right: 60px;} /*e_mail*/ .cs_wrap .e_mail{position: relative; display: flex; justify-content: space-between;} .cs_wrap .e_mail label{margin-top: 40px; } .cs_wrap .e_mail >div{position: relative; width: 1289px; display: flex; justify-content: space-between; left: -5px;} .cs_wrap .e_mail .e_div{width: 870px; display: flex; justify-content: space-between; position: relative; margin-top: 20px; left: -0px;} .cs_wrap .e_mail .e_div::after{content: ''; position: absolute; left: 30px; top: 20px; width: 90%; height:80px; background-color: #F5F5F5; z-index: -10;} .cs_wrap .e_mail .e_div input[type=text]{position: relative;} .cs_wrap .e_mail .e_div p{position: relative; left: -3px; top: 47px;} .cs_wrap .e_mail select{position: relative; width: 400px; height: 80px; top: 40px; background-color: #F5F5F5; border: none; box-sizing: border-box; padding:0 30px; color: #444; font-size: 1.1em; } /*titleText*/ .titleText{position: relative; } .titleText input[type=text]{position: relative; left: 9px;} /*summeryText*/ .summeryText{position: relative; } .summeryText input[type=text]{position: relative; left: 13px;} .summeryText input[type=text]{position: relative; overflow-y: auto; height: 200px;} /*file*/ .myFile label{position: relative; top: 18px;} .filebox{position: relative; left: 95px; top: -60px;} .filebox .upload-name {display: inline-block; height: 80px; padding: 0 10px; vertical-align: middle; border: 1px solid #dddddd; width: 83.8%; color: #999999; box-sizing: border-box;} .filebox label {display: inline-block; padding: 10px 20px; color: #fff; vertical-align: middle; background-color: #999999; cursor: pointer; height: 80px; margin-left: 10px; box-sizing: border-box; line-height: 60px; top: -0px;} .filebox input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;} /*info*/ .cs_wrap h2 span{color: #ff5050; font-size: 1.2rem;} .cs_wrap .info{position: relative; width: 1350px;; margin: 0 auto; height: 220px; overflow-y: auto; background-color: #F5F5F5; margin-top: 60px; padding: 23px; box-sizing: border-box;} .cs_wrap .info li{position: relative; margin-top: 15px;} .cs_wrap .info li h3{font-size: 1.1em;} .cs_wrap .info li p{font-size: 1.1em; color: #666;} /*agree*/ .agree{position: relative; max-width: 1350px;; margin: 0 auto; width: 90%;} .agree input[type=checkbox]{right: 45px; position: absolute; top: 29px;} .agree label{right: 0; position: absolute; color: #666;} /*email_wrap*/ .cs_bottom_wrap{position: relative; max-width: 1350px; margin: 0 auto; width: 90%; margin-top: 30px; padding-bottom: 300px;} .email_wrap{position: absolute; width: 200px; display: flex; align-items: center; justify-content: space-between; right: 0;} .email_wrap p{font-weight: 500; font-size: 1.3em;} .email_wrap input[type=checkbox]{margin-left: 25px;} .email_wrap label{font-weight: 500; font-size: 1.3em; color: #666;} .cs_bottom{position: relative; top: 80px; width: 340px; height: 70px; margin: 0 auto; display: flex; justify-content: space-between;} .cs_bottom input[type=reset]{position: relative; width: 150px; height: 100%; background-color: #F5F5F5; border: none; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 1.3em; border-radius: 60px; cursor: pointer;} .cs_bottom input[type=submit]{position: relative; width: 150px; height: 100%; background-color: #241E20; border: none; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 1.3em; border-radius: 60px; color: #fff; cursor: pointer;} /*cs*/ /*tablet 큰 가로*/ @media screen and (min-width:451px) and (max-width:1795px){ #cs{position: relative; width:95%; margin: 0 auto; margin-top: 80px; overflow: hidden;} .cs_wrap{position: relative; border-top: 2px solid #241E20; border-bottom: 2px solid #241E20; margin-top:40px; padding-bottom: 100px;} .cs_inner{position: relative; padding: 10px 10px;} .cs_wrap input[type=text]{position: relative; height: 80px; width:100%; background-color: #F5F5F5; border: none;} .cs_wrap label{font-weight: 500; font-size: 1.3em; line-height: 80px;} .cs_wrap label span{color: #ff5050; font-weight: 500; font-size: 1em;} #cs input[type=checkbox]{width: 20px; height: 20px; border: 1px solid #666;} .input_box{display: flex; position: relative; flex-direction: column;} .input_box label{position: relative; height: 80px; margin-top: -10px;} /*cs_top*/ .cs_top{position: relative; display: flex; justify-content: space-between; flex-direction: column;} .cs_top .cate_box{position: relative; display: flex; flex-direction: column;} .cs_top .cate_box>label{position: relative; height: 80px;} .cs_top .cate_box .radio_bg{position: relative; width:100%; height: 80px; background-color: #F5F5F5; justify-content: space-evenly; box-sizing: border-box; display: flex; align-items: center; margin-left:0px;} .cs_top .cate_box .radio_bg div{position: relative; display: flex; align-items: center; width: 70px; justify-content: space-between;} .cs_top .cate_box .radio_bg label{color: #666; margin-left: 0px;} .cs_wrap input[type=radio]{width: 20px; height: 20px; margin-left: 0;} .cs_wrap input[type=text]{margin-top: 20px;} .cs_top .age{position: relative; display: flex; flex-direction: column;} .cs_top .age label{margin-right: 0px; position: relative;} .cs_top .age button{position: relative; width: 100%; border: 1px solid #666; height: 80px; bottom: 14px; cursor: pointer; margin-right: 0px; margin-top: 10px;} .cs_top .age button h3{font-weight: 500; color: #444; font-size: 1.2em;} .cs_top .age button p{color: #666;} /*cs_name*/ .cs_wrap #myName{margin-top:0px;} .cs_name input[type=text]{position: relative; margin-left: 0;} /*phone*/ .cs_wrap .phone{position: relative; display: flex; flex-direction: column;} .cs_wrap .phone label{margin-top:0px;} .cs_wrap .phone p{line-height:120px; padding: 0px; box-sizing: border-box;} .cs_wrap .phone .phone_input{position: relative; display: flex; justify-content: space-between; width: 100%; height: 80px; margin-top: -23px;} .cs_wrap .phone .phone_input::after{content: ''; position: absolute; left: 0px; top: 20px; width: 100%; height: 100%; background-color: #F5F5F5; z-index: -10;} .cs_wrap .phone .phone_input input[type=text]{position: relative; margin-right: 0px; width: 100%; z-index: 1;} /*e_mail*/ .cs_wrap .e_mail{position: relative; display: flex; flex-direction: column;} .cs_wrap .e_mail label{margin-top: 75px; position: relative;} .cs_wrap .e_mail >div{position: relative; width: 100%; display: flex; justify-content: space-between; left: -0px; margin-top: -45px;} .cs_wrap .e_mail .e_div{width: 100%; display: flex; justify-content: space-between; position: relative; margin-top: 20px; left: -0px;} .cs_wrap .e_mail .e_div::after{content: ''; position: absolute; left: 30px; top: 20px; width: 50%; height:80px; background-color: #F5F5F5; z-index: -10;} .cs_wrap .e_mail .e_div input[type=text]{position: relative; left: -50px; } .cs_wrap .e_mail .e_div p{position: relative; left: -25px; top: 47px; margin: 0;} .cs_wrap .e_mail select{position: relative; width:30%; height: 80px; top: 40px; background-color: #F5F5F5; border: none; box-sizing: border-box; padding:0 10px; color: #444; font-size: 1.1em; } /*titleText*/ .titleText{position: relative; } .titleText input[type=text]{position: relative; left: -50px; margin-top: -3px;} /*summeryText*/ .summeryText{position: relative; } .summeryText input[type=text]{position: relative; left: -50px; margin-top: -3px;} .summeryText input[type=text]{position: relative; overflow-y: auto; height: 200px;} /*file*/ .myFile{position: relative; display: flex; flex-direction: column; padding-bottom:60px; } .myFile label{position: relative; top: -0px;} .filebox{position: relative; left: 0px; top: 0px;} .filebox .upload-name {display: inline-block; height: 80px; padding: 0 10px; vertical-align: middle; border: 1px solid #dddddd; width: 72%; color: #999999; box-sizing: border-box;} .filebox label {display: inline-block; padding: 10px 20px; color: #fff; vertical-align: middle; background-color: #999999; cursor: pointer; height: 80px; margin-left: 10px; box-sizing: border-box; line-height: 60px; top: 0; width: 25%; right: 0; position: absolute;} .filebox input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;} /*info*/ .cs_wrap h2 span{color: #ff5050; font-size: 1.2rem; } .cs_wrap .info{position: relative; width: 100%; margin: 0 auto; height: 220px; overflow-y: auto; background-color: #F5F5F5; margin-top: 30px; padding: 10px 20px; box-sizing: border-box;} .cs_wrap .info li{position: relative; margin-top: 15px;} .cs_wrap .info li h3{font-size: 1.1em;} .cs_wrap .info li p{font-size: 1.1em; color: #666;} /*agree*/ .agree{position: relative; max-width: 1350px;; margin: 0 auto; width: 90%;} .agree input[type=checkbox]{right: 45px; position: absolute; top: 29px;} .agree label{right: 0; position: absolute; color: #666;} /*email_wrap*/ .cs_bottom_wrap{position: relative; max-width: 1350px; margin: 0 auto; width: 90%; margin-top: 30px; padding-bottom: 270px;} .email_wrap{position: absolute; width: 200px; display: flex; align-items: center; justify-content: space-between; right: 0;} .email_wrap p{font-weight: 500; font-size: 1.3em;} .email_wrap input[type=checkbox]{margin-left: 25px;} .email_wrap label{font-weight: 500; font-size: 1.3em; color: #666;} .cs_bottom{position: relative; top: 80px; width: 340px; height: 70px; margin: 0 auto; display: flex; justify-content: space-between;} .cs_bottom input[type=reset]{position: relative; width: 150px; height: 100%; background-color: #F5F5F5; border: none; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 1.3em; border-radius: 60px; cursor: pointer;} .cs_bottom input[type=submit]{position: relative; width: 150px; height: 100%; background-color: #241E20; border: none; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 1.3em; border-radius: 60px; color: #fff; cursor: pointer;} } /*mobile*/ @media screen and (max-width:450px){ #cs{position: relative; width:95%; margin: 0 auto; margin-top: 80px; overflow: hidden;} .cs_wrap{position: relative; border-top: 2px solid #241E20; border-bottom: 2px solid #241E20; margin-top:40px; padding-bottom: 100px;} .cs_inner{position: relative; padding: 10px 10px;} .cs_wrap input[type=text]{position: relative; height: 80px; width:100%; background-color: #F5F5F5; border: none;} .cs_wrap label{font-weight: 500; font-size: 1.3em; line-height: 80px;} .cs_wrap label span{color: #ff5050; font-weight: 500; font-size: 1em;} #cs input[type=checkbox]{width: 20px; height: 20px; border: 1px solid #666;} .input_box{display: flex; position: relative; flex-direction: column;} .input_box label{position: relative; height: 80px; margin-top: -10px;} /*cs_top*/ .cs_top{position: relative; display: flex; justify-content: space-between; flex-direction: column;} .cs_top .cate_box{position: relative; display: flex; flex-direction: column;} .cs_top .cate_box>label{position: relative; height: 80px;} .cs_top .cate_box .radio_bg{position: relative; width:100%; height: 160px; background-color: #F5F5F5; justify-content: space-evenly; box-sizing: border-box; display: flex; align-items: center; margin-left:0px; flex-wrap: wrap;} .cs_top .cate_box .radio_bg div{position: relative; display: flex; align-items: center; width: 70px; justify-content: space-between;} .cs_top .cate_box .radio_bg label{color: #666; margin-left: 0px;} .cs_wrap input[type=radio]{width: 20px; height: 20px; margin-left: 0;} .cs_wrap input[type=text]{margin-top: 20px;} .cs_top .age{position: relative; display: flex; flex-direction: column;} .cs_top .age label{margin-right: 0px; position: relative;} .cs_top .age button{position: relative; width: 100%; border: 1px solid #666; height: 80px; bottom: 14px; cursor: pointer; margin-right: 0px; margin-top: 10px;} .cs_top .age button h3{font-weight: 500; color: #444; font-size: 1.2em;} .cs_top .age button p{color: #666;} /*cs_name*/ .cs_wrap #myName{margin-top:0px;} .cs_name input[type=text]{position: relative; margin-left: 0;} /*phone*/ .cs_wrap .phone{position: relative; display: flex; flex-direction: column;} .cs_wrap .phone label{margin-top:0px;} .cs_wrap .phone p{line-height:120px; padding: 0px; box-sizing: border-box;} .cs_wrap .phone .phone_input{position: relative; display: flex; justify-content: space-between; width: 100%; height: 80px; margin-top: -23px;} .cs_wrap .phone .phone_input::after{content: ''; position: absolute; left: 0px; top: 20px; width: 100%; height: 100%; background-color: #F5F5F5; z-index: -10;} .cs_wrap .phone .phone_input input[type=text]{position: relative; margin-right: 0px; width: 100%; z-index: 1;} /*e_mail*/ .cs_wrap .e_mail{position: relative; display: flex; flex-direction: column;} .cs_wrap .e_mail label{margin-top: 75px; position: relative;} .cs_wrap .e_mail >div{position: relative; width: 100%; display: flex; justify-content: space-between; left: -0px; margin-top: -45px;} .cs_wrap .e_mail .e_div{width: 100%; display: flex; justify-content: space-between; position: relative; margin-top: 20px; left: -0px;} .cs_wrap .e_mail .e_div::after{content: ''; position: absolute; left: 30px; top: 20px; width: 50%; height:80px; background-color: #F5F5F5; z-index: -10;} .cs_wrap .e_mail .e_div input[type=text]{position: relative; left: -50px; } .cs_wrap .e_mail .e_div p{position: relative; left: -25px; top: 47px; margin: 0;} .cs_wrap .e_mail select{position: relative; width:30%; height: 80px; top: 40px; background-color: #F5F5F5; border: none; box-sizing: border-box; padding:0 10px; color: #444; font-size: 1.1em; } /*titleText*/ .titleText{position: relative; } .titleText input[type=text]{position: relative; left: -50px; margin-top: -3px;} /*summeryText*/ .summeryText{position: relative; } .summeryText input[type=text]{position: relative; left: -50px; margin-top: -3px;} .summeryText input[type=text]{position: relative; overflow-y: auto; height: 200px;} /*file*/ .myFile{position: relative; display: flex; flex-direction: column; padding-bottom:60px; } .myFile label{position: relative; top: -0px;} .filebox{position: relative; left: 0px; top: 0px;} .filebox .upload-name {display: inline-block; height: 80px; padding: 0 10px; vertical-align: middle; border: 1px solid #dddddd; width: 72%; color: #999999; box-sizing: border-box;} .filebox label {display: inline-block; padding: 10px 20px; color: #fff; vertical-align: middle; background-color: #999999; cursor: pointer; height: 80px; margin-left: 10px; box-sizing: border-box; line-height: 60px; top: 0; width: 25%; right: 0; position: absolute;} .filebox input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;} /*info*/ .cs_wrap h2 span{color: #ff5050; font-size: 1.2rem; } .cs_wrap .info{position: relative; width: 100%; margin: 0 auto; height: 220px; overflow-y: auto; background-color: #F5F5F5; margin-top: 30px; padding: 10px 20px; box-sizing: border-box;} .cs_wrap .info li{position: relative; margin-top: 15px;} .cs_wrap .info li h3{font-size: 1.1em;} .cs_wrap .info li p{font-size: 1.1em; color: #666;} /*agree*/ .agree{position: relative; max-width: 1350px;; margin: 0 auto; width: 90%;} .agree input[type=checkbox]{right: 45px; position: absolute; top: 29px;} .agree label{right: 0; position: absolute; color: #666;} /*email_wrap*/ .cs_bottom_wrap{position: relative; max-width: 1350px; margin: 0 auto; width: 90%; margin-top: 30px; padding-bottom: 200px;} .email_wrap{position: absolute; width: 200px; display: flex; align-items: center; justify-content: space-between; right: 0;} .email_wrap p{font-weight: 500; font-size: 1.3em;} .email_wrap input[type=checkbox]{margin-left: 25px;} .email_wrap label{font-weight: 500; font-size: 1.3em; color: #666;} .cs_bottom{position: relative; top: 80px; width: 340px; height: 140px; margin: 0 auto; display: flex; justify-content: space-between; flex-direction: column; align-items: center; margin-left: -15px;} .cs_bottom input[type=reset]{position: relative; width: 150px; height:60px; background-color: #F5F5F5; border: none; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 1.3em; border-radius: 60px; cursor: pointer;} .cs_bottom input[type=submit]{position: relative; width: 150px; height: 60px; background-color: #241E20; border: none; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 1.3em; border-radius: 60px; color: #fff; cursor: pointer;} }