/* PC */ @media screen and (min-width:1201px) { /* */ /* common */ /* */ /* pnb */ .pnb{position: relative; margin-top: -40px; z-index: 1;} .pnb .pnb_inner{position: relative; transition-duration: 0.5s; width: 50%; background-color: #06793e; border-radius: 0 20px 20px 0;} .pnb .pnb_inner ul{display: flex; height: 80px; align-items: center; justify-content: right; margin-right: 10%;} .pnb .pnb_inner ul li{position: relative;} .pnb .pnb_inner ul li a{position: relative; color: #ccc;text-align: center; margin-left: 50px;} .pnb .pnb_inner ul li a::after{content: ""; display: block; position: absolute; background-color: #F9E5C4; width: 4px; height: 4px; border-radius: 50%;top: 50%; transform: translateY(-50%); right: -25px;} .pnb .pnb_inner ul li:last-child a::after{display: none;} /* pnb link_ok */ .pnb .pnb_inner ul li a.link_ok{color: #F9E5C4;} .pnb .pnb_inner ul li.select a.link_ok{color: #fff; font-weight: 600;} .pnb .pnb_inner ul li.select a.link_ok::before{content: ""; display: block; position: absolute; width: 120%; height: 2px; background-color: #F9E5C4; bottom: -4px; left: 50%; transform: translateX(-50%);} /* 페이지 탑 타이틀 */ .page_top_box{position: relative; width: 100%; height: 750px; overflow: hidden;} .page_top{transition-duration: 0.5s; position: absolute; width: 80%; height: 400px; background-position: center; background-size: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 200px; transition-delay: 0.3s; transition-timing-function: ease;} .page_top .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.2); text-align: center; transition-duration: 0.5s; opacity: 0;} .page_top .top_text h2{ transition-duration:0.5s; font-size: 3.5em; font-weight: bold; color: #fff;} /* */ /* 온라인 견학 */ /* */ .page_top{background-image: url(../img/top_online.jpg);} .page{margin-bottom: 200px;} /* pager */ .online_pager{position: sticky; width: 200px; height: 0; left: 30px; top: 50%; z-index: 10; transform: translateY(-50%);} .online_pager ul{position: absolute; display: flex; height: 150px; flex-direction: column; justify-content: space-between; align-items: flex-start;} .online_pager ul li{min-width: 24px; height: 24px; box-sizing: border-box; border-radius: 13px; padding: 0 10px; line-height: 24px; background-color: #fff; border: 1px solid #06793e; transition-duration: 0.5s;} .online_pager ul li a{color: #06793e; font-size: 0.9em; display: block;} .online_pager ul li a span{font-weight: 600; margin-right: 4px;} .online_pager ul li.select{background-color: #F9E5C4; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);} /* 컨텐츠 시작 */ #onlineContent{position: relative; background-color: #06793e; margin-top: -40px; overflow: hidden;} /* 전체 페이지 설정 */ #onlineContent .page .page_inner{position: relative; max-width: 1600px; width: 92%; margin: 0 auto; border: 4px solid #06793e; background-color: #fff; padding: 0 120px 80px 120px; box-sizing: border-box; margin-bottom: 80px;} #onlineContent .index_title{font-size: 2.7em; background-color: #fff; color: #06793e; border: 4px solid #06793e; border-radius: 32px; font-weight: 700; width: 300px; height: 60px; line-height: 60px; text-align: center; margin: -32px auto 80px auto;} #onlineContent .page p{font-size: 1.2em; text-align: center; line-height: 1.6em; word-break: keep-all;} #onlineContent .page p span{background-color: #06793e; color: #fff;} /* 0페이지 */ #onlineContent .page0{position: relative; background-image: url(../img/online_header_bg.jpg); background-size: cover; padding: 300px 0 10px 0;} #onlineContent .page0::after{content: ""; display: block; position: absolute; width: 100%; height: 200px; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(6,121,62,1) 100%);} #onlineContent .page0 .page_inner{border: none; background: none; margin: 0 auto;} #onlineContent .page0 p{text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); z-index: 1;} #onlineContent .page0 p:first-child{position: relative; font-size: 2em; color: #fff; font-weight: 900; text-align: center; top: -50px; opacity: 0;} #onlineContent .page0 h2{width: 700px; text-align: center; margin: 50px auto; position: relative; top: 50px; opacity: 0;} #onlineContent .page0 h2 img{width: 100%} #onlineContent .page0 p:last-child{position: relative; font-size: 1.4em; color: #fff; text-align: center; line-height: 1.6em; top: 50px; opacity: 0;} /* 1페이지 */ #onlineContent .page1 .page_inner p:last-of-type{margin-top: 1.2em;} #onlineContent .page1 .page_inner:last-child h4{position: relative; font-size: 2.5em; color: #06793e; font-weight: 700; text-align: center; margin-top: 80px;} #onlineContent .page1 .page_inner:last-child img{width: 700px; margin: 50px auto; transform: scale(0.5); transition-duration: 0.5s;} #onlineContent .page1 .page_inner:last-child h4::after{content: ""; display: block; position: absolute; width: 380px; height: 7px; background-image: url(../img/line.png); background-size: contain; bottom: -8px; left: 50%; transform: translateX(-50%); background-repeat: repeat-x;} #onlineContent .page1 p{opacity: 0; top: 50px;} /* 2페이지 */ #onlineContent .page2 .process_list li{position: relative; opacity: 0;} #onlineContent .page2 .process_list li>div{position: relative; display: flex; align-items: center; justify-content: space-between; padding: 40px 0;} #onlineContent .page2 .process_list li>div::after{content: ""; display: block; position: absolute; width: 8px; height: 100%; background-color: #06793e; left: 50%; transform: translateX(-50%); top: 0;} /* 이미지 */ #onlineContent .page2 .process_list li>div .online_step_img{width: 40%;} #onlineContent .page2 .process_list li>div .online_step_img img{width: 100%;} /* 텍스트 */ #onlineContent .page2 .process_list li>div div:last-child{width: 40%;} #onlineContent .page2 .process_list li>div div:last-child h4{color: #06793e; font-weight: 700; font-size: 1.4em; border-bottom: 2px solid #06793e; line-height: 2em;} #onlineContent .page2 .process_list li>div div:last-child p{text-align: left; margin-top: 20px;} /* 2n번째 배치 */ #onlineContent .page2 .process_list li:nth-child(2n)>div{flex-direction: row-reverse;} #onlineContent .page2 .process_list li:nth-child(2n)>div h4{text-align: right;} /* 과정 순서 표기 */ #onlineContent .page2 .process_list li .process_num{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #06793e; width: 60px; height: 60px; text-align: center; line-height: 60px; border-radius: 50%; color: #fff; font-size: 2em; z-index: 1;} /* 3페이지 */ #onlineContent .page3 .page_inner>p:nth-of-type(2){margin-top: 1.2em; margin-bottom: 100px;} #onlineContent .page3 .page_inner .process_wrap{position: relative; overflow: hidden;} /* 제조공정 탭 */ #onlineContent .page3 .page_inner .process_wrap .process_tab{position: relative; margin: 0 auto 20px auto; width: 400px; height: 40px; border: 4px solid #06793e; border-radius: 24px; overflow: hidden;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul{display: flex; justify-content: space-between;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul li{cursor: pointer; position: relative; width: 50%; line-height: 40px;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul li p{display: none;} #onlineContent .page3 .page_inner .process_wrap .process_tab>div{position: absolute; top: 0; left: 0; background-color: #06793e; border-radius: 20px; width: 50%; height: 100%; z-index: 0; transition-duration: 0.5s;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul li.tab_select h4{color: #fff; z-index: 1;} #onlineContent .page3 .page_inner .process_wrap .process_tab h4{position: relative; font-size: 2em; color: #06793e; font-weight: 700; text-align: center; transition-duration: 0.5s;} /* 탭 컨텐츠 */ #onlineContent .page3 .page_inner .process_wrap .process_tab_content{position: relative; width: 200%; display: flex; left: 0;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content ul{ position: relative; width:50%; display: flex; align-items: center; flex-wrap: wrap;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content ul>li{cursor: pointer; width: 26.6666%; position: relative; display: flex; flex-direction: column; justify-content: space-between; margin-right: 10%; opacity: 0; top: -50px;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li:nth-child(3n){margin-right: 0;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li div{border: 4px solid #ccc; border-radius: 50%; overflow: hidden; position: relative;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li img{width: 100%;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li p:first-of-type{ height: 30px; line-height: 30px; background-color: #06793e; border-radius: 15px; width: 50%; text-align: center; margin: 20px auto; color: #fff; position: relative;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li p.help{background-color: #F9E5C4; padding: 5px 10px; word-break: keep-all; position: absolute; width: 100%; z-index: 1; border-radius: 20px; bottom: 60px; display: none;} #onlineContent .page3 .page_inner .process_wrap .premix{position: relative;} #onlineContent .page3 .page_inner .process_wrap .premix>p.help{background-color: #F9E5C4; padding: 5px 10px; word-break: keep-all; position: absolute; width: 30%; z-index: 1; border-radius: 20px; top: -40px; left: 50%; transform: translateX(-50%); display: none;} /* 4페이지 */ #onlineContent .page4 .index_title {width: 400px;} #onlineContent .page4 .page_inner h4{position: relative; font-size: 2.5em; color: #06793e; font-weight: 700; text-align: center; margin-top: 100px;} #onlineContent .page4 .page_inner h4::after{content: ""; display: block; position: absolute; width: 400px; height: 7px; background-image: url(../img/line.png); background-size: contain; bottom: -8px; left: 50%; transform: translateX(-50%); background-repeat: repeat-x;} #onlineContent .page4 .page_inner p{margin-bottom: 1.2em;} /* 제분공정에 따른 밀의 변화 */ #onlineContent .page4 .page_inner .milling_list{position: relative; display: flex; justify-content: space-between; margin-top: 80px;} #onlineContent .page4 .page_inner .milling_list li{position: relative; width: 28%; padding:0 4%; top: 50px; opacity: 0;} #onlineContent .page4 .page_inner .milling_list li:first-child{padding-left: 0;} #onlineContent .page4 .page_inner .milling_list li:last-child{padding-right: 0;} #onlineContent .page4 .page_inner .milling_list li::after{content: ""; display: block; position: absolute; width: 30px; height: 30px; background-image: url(../img/arrow_right_c.png); background-size: cover; right: -1%; top: 50%;} #onlineContent .page4 .page_inner .milling_list li:last-child::after{display: none;} #onlineContent .page4 .page_inner .milling_list li>div{position: relative;} #onlineContent .page4 .page_inner .milling_list li>div img{width: 100%;} #onlineContent .page4 .page_inner .milling_list p{width: 100px; height: 30px; line-height: 30px; background-color: #06793e; color: #fff; font-weight: 700; text-align: center; margin: 0 auto; border-radius: 15px;} /* 오버박스 */ #onlineContent .page4 .page_inner .milling_list li .over_box{position: absolute; top: 50%; left: 50%; width: 80%; transform: translate(-50%, -50%); background-color: rgba(255,255, 255, 0.8); border-radius: 50%; border: 4px solid #ccc; opacity: 0; transition-duration: 0.5s;} #onlineContent .page4 .page_inner .milling_list li:hover .over_box{opacity: 1;} /* 5페이지 */ #onlineContent .page5 .index_title {width: 480px;} #onlineContent .page5 .page_inner h4{position: relative; font-size: 2.5em; color: #06793e; font-weight: 700; text-align: center; margin-top: 100px; margin-bottom: 40px;} #onlineContent .page5 .page_inner h4::after{content: ""; display: block; position: absolute; width: 220px; height: 7px; background-image: url(../img/line.png); background-size: contain; bottom: -8px; left: 50%; transform: translateX(-50%); background-repeat: repeat-x;} #onlineContent .page5 .page_inner p{margin-bottom: 1.2em;} /* 밀가루의 종류, 아코디언 */ #onlineContent .page5 .page_inner .wheat_list{position: relative; display: flex; align-items: center; height: 550px; border: 2px solid #06793e; border-width: 4px 0 4px 0; overflow: hidden;} #onlineContent .page5 .page_inner .wheat_list li{width: 15%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding-top: 100px; cursor: pointer; justify-content: baseline; position: relative; z-index: 1; opacity: 0; left: -100px; transition-duration: 0.5s; } #onlineContent .page5 .page_inner .wheat_list li::before{content:""; display: block; position: absolute; width: 2px; height: 90%; background-color: #06793e; top: 50%; transform: translateY(-50%); right: 0;} #onlineContent .page5 .page_inner .wheat_list li:last-child::before{display: none;} #onlineContent .page5 .page_inner .wheat_list li h5{font-size: 1.8em; font-weight: 700; transform: rotate(90deg); margin-top: 100px; text-align: left; width: 150px; transition-duration: 0.5s; color: #06793e;} #onlineContent .page5 .page_inner .wheat_list li p{font-size: 1.1em; text-align: center; width: 92%; box-sizing: border-box; display: none; transition-duration: 0.5s; margin: 0 auto; height: 5em} #onlineContent .page5 .page_inner .wheat_list li img{width: 124px; transition-duration: 0.5s;} /* 오버박스 */ #onlineContent .page5 .page_inner .wheat_list li .over_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center;opacity: 0; transition: 0.5s;} #onlineContent .page5 .page_inner .wheat_list li .over_box div{height: 8px; width: 100%; position: relative; background-color: #F9E5C4;border-radius: 0 0 6px 6px; } #onlineContent .page5 .page_inner .wheat_list li .over_box div:last-child{border-radius: 6px 6px 0 0;} #onlineContent .page5 .page_inner .wheat_list li:hover .over_box{opacity: 1;} /* 선택된 아코디언 */ #onlineContent .page5 .page_inner .wheat_list li.select{width: 40%; padding: 20px 0; justify-content: center;} #onlineContent .page5 .page_inner .wheat_list li.select h5{transform: rotate(0); text-align: center; margin: 10px auto; font-size: 1.5em; background-color: #06793e; color: #fff;} #onlineContent .page5 .page_inner .wheat_list li.select img{width: 250px;} #onlineContent .page5 .page_inner .wheat_list li.select p{display: block;} #onlineContent .page5 .page_inner .wheat_list li.select .over_box{opacity: 1;} #onlineContent .page5 .page_inner .wheat_list li.select .over_box div{background-color: #06793e;} /* 밀가루의 등급 */ #onlineContent .page5 .page_inner .wheat_grade{position: relative; display: flex; justify-content: space-between; margin-top: 40px;} #onlineContent .page5 .page_inner .wheat_grade li{position: relative; width: 22%; opacity: 0; top: 50px;} #onlineContent .page5 .page_inner .wheat_grade li img{position: relative; width: 100%; border: 4px solid #ccc; border-radius: 50%; margin-bottom: 20px; opacity: 0.5; transition-duration: 0.5s;} #onlineContent .page5 .page_inner .wheat_grade li div p{background-color: #06793e; color: #fff; margin-bottom: 20px; line-height: 30px; border-radius: 15px;} #onlineContent .page5 .page_inner .wheat_grade li:hover img{opacity: 1;} /* 6페이지 */ #onlineContent .page6 {position: relative; padding-bottom: 300px; background-image: url(../img/online_bg_bot.jpg); background-size: cover; background-repeat: no-repeat; background-position: bottom; margin-bottom: 0;} #onlineContent .page6::after{content: ""; display: block; position: absolute; width: 100%; height: 150px; top: 0; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(6,121,62,1) 100%);} #onlineContent .page6 .page_inner h3{font-size: 2.7em; font-weight: 900; color: #06793e; text-align: center; transition-duration: 0.5s; transform: scale(0.5);} #onlineContent .page6 .page_inner{padding: 80px 120px;margin-bottom: 0; z-index: 1;} } /* Tablet 가로 */ @media screen and (min-width:801px) and (max-width:1200px) { /* */ /* common */ /* */ /* pnb */ .pnb{position: relative; margin-top: -40px; z-index: 1;} .pnb .pnb_inner{position: relative; transition-duration: 0.5s; width: 76%; background-color: #06793e; border-radius: 0 20px 20px 0;} .pnb .pnb_inner ul{display: flex; height: 80px; align-items: center; justify-content: right; margin-right: 10%;} .pnb .pnb_inner ul li a{position: relative; color: #ccc;text-align: center; margin-left: 50px;} .pnb .pnb_inner ul li.select a{color: #fff; font-weight: bold;} .pnb .pnb_inner ul li a::after{content: ""; display: block; position: absolute; background-color: #F9E5C4; width: 4px; height: 4px; border-radius: 50%;top: 50%; transform: translateY(-50%); right: -25px;} .pnb .pnb_inner ul li:last-child a::after{display: none;} /* pnb link_ok */ .pnb .pnb_inner ul li a.link_ok{color: #F9E5C4;} .pnb .pnb_inner ul li.select a.link_ok{color: #fff; font-weight: bold;} .pnb .pnb_inner ul li.select a.link_ok::before{content: ""; display: block; position: absolute; width: 120%; height: 2px; background-color: #F9E5C4; bottom: -4px; left: 50%; transform: translateX(-50%);} /* 페이지 탑 타이틀 */ .page_top_box{overflow: hidden; position: relative; width: 100%; height: 700px;} .page_top{transition-duration: 0.5s; position: absolute; width: 80%; height: 380px; background-position: center; background-size: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 190px; transition-delay: 0.3s; transition-timing-function: ease;} .page_top .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.2); text-align: center; transition-duration: 0.5s; opacity: 0; width: 100%;} .page_top .top_text h2{ transition-duration:0.5s; font-size: 3em; font-weight: bold; color: #fff;} /* */ /* 온라인 견학 */ /* */ .page_top{background-image: url(../img/top_online.jpg);} .page{margin-bottom: 200px;} /* pager */ .online_pager{position: sticky; width: 200px; height: 0; left: 26px; top: 50%; z-index: 10; transform: translateY(-50%);} .online_pager ul{position: absolute; display: flex; height: 150px; flex-direction: column; justify-content: space-between; align-items: flex-start;} .online_pager ul li{min-width: 24px; height: 24px; box-sizing: border-box; border-radius: 13px; padding: 0 10px; line-height: 24px; background-color: #fff; border: 1px solid #06793e; transition-duration: 0.5s;} .online_pager ul li a{color: #06793e; font-size: 0.9em; display: none;} .online_pager ul li a span{font-weight: 600; margin-right: 4px;} .online_pager ul li.select{background-color: #F9E5C4; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); width: 48px;} /* 컨텐츠 시작 */ #onlineContent{position: relative; background-color: #06793e; margin-top: -40px; overflow: hidden;} /* 전체 페이지 설정 */ #onlineContent .page .page_inner{position: relative; max-width: 1600px; width: 92%; margin: 0 auto; border: 4px solid #06793e; background-color: #fff; padding: 0 60px 60px 60px; box-sizing: border-box; margin-bottom: 80px;} #onlineContent .index_title{font-size: 2.4em; background-color: #fff; color: #06793e; border: 4px solid #06793e; border-radius: 32px; font-weight: 700; width: 300px; height: 50px; line-height: 50px; text-align: center; margin: -27px auto 60px auto;} #onlineContent .page p{font-size: 1.2em; text-align: center; line-height: 1.6em; word-break: keep-all;} #onlineContent .page p span{background-color: #06793e; color: #fff;} /* 0페이지 */ #onlineContent .page0{position: relative; background-image: url(../img/online_header_bg.jpg); background-size: cover; padding: 300px 0 10px 0;} #onlineContent .page0::after{content: ""; display: block; position: absolute; width: 100%; height: 200px; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(6,121,62,1) 100%);} #onlineContent .page0 .page_inner{border: none; background: none; margin: 0 auto;} #onlineContent .page0 p{text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); z-index: 1;} #onlineContent .page0 p:first-child{position: relative; font-size: 2em; color: #fff; font-weight: 900; text-align: center; top: -50px; opacity: 0;} #onlineContent .page0 h2{width: 600px; text-align: center; margin: 50px auto; position: relative; top: 50px; opacity: 0; overflow: hidden;} #onlineContent .page0 h2 img{width: 100%;} #onlineContent .page0 p:last-child{position: relative; font-size: 1.4em; color: #fff; text-align: center; line-height: 1.6em; top: 50px; opacity: 0;} /* 1페이지 */ #onlineContent .page1 .page_inner p:last-of-type{margin-top: 1.2em;} #onlineContent .page1 .page_inner:last-child h4{position: relative; font-size: 2em; color: #06793e; font-weight: 700; text-align: center; margin-top: 80px;} #onlineContent .page1 .page_inner:last-child img{width: 550px; margin: 50px auto; transform: scale(0.5); transition-duration: 0.5s;} #onlineContent .page1 .page_inner:last-child h4::after{content: ""; display: block; position: absolute; width: 300px; height: 7px; background-image: url(../img/line.png); background-size: contain; bottom: -8px; left: 50%; transform: translateX(-50%); background-repeat: repeat-x;} #onlineContent .page1 p{opacity: 0; top: 50px;} /* 2페이지 */ #onlineContent .page2 .process_list li{position: relative; opacity: 0;} #onlineContent .page2 .process_list li>div{position: relative; display: flex; align-items: center; justify-content: space-between; padding: 40px 0;} #onlineContent .page2 .process_list li>div::after{content: ""; display: block; position: absolute; width: 8px; height: 100%; background-color: #06793e; left: 50%; transform: translateX(-50%); top: 0;} /* 이미지 */ #onlineContent .page2 .process_list li>div .online_step_img{width: 40%;} #onlineContent .page2 .process_list li>div .online_step_img img{width: 100%;} /* 텍스트 */ #onlineContent .page2 .process_list li>div div:last-child{width: 40%;} #onlineContent .page2 .process_list li>div div:last-child h4{color: #06793e; font-weight: 700; font-size: 1.4em; border-bottom: 2px solid #06793e; line-height: 2em;} #onlineContent .page2 .process_list li>div div:last-child p{text-align: left; margin-top: 20px;} /* 2n번째 배치 */ #onlineContent .page2 .process_list li:nth-child(2n)>div{flex-direction: row-reverse;} #onlineContent .page2 .process_list li:nth-child(2n)>div h4{text-align: right;} /* 과정 순서 표기 */ #onlineContent .page2 .process_list li .process_num{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #06793e; width: 60px; height: 60px; text-align: center; line-height: 60px; border-radius: 50%; color: #fff; font-size: 2em; z-index: 1;} /* 3페이지 */ #onlineContent .page3 .page_inner>p:nth-of-type(1) br{display: none;} #onlineContent .page3 .page_inner>p:nth-of-type(2){margin-top: 1.2em; margin-bottom: 100px;} #onlineContent .page3 .page_inner .process_wrap{position: relative; overflow: hidden;} /* 제조공정 탭 */ #onlineContent .page3 .page_inner .process_wrap .process_tab{position: relative; margin: 0 auto 20px auto; width: 360px; height: 34px; border: 4px solid #06793e; border-radius: 24px; overflow: hidden;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul{display: flex; justify-content: space-between;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul li{cursor: pointer; position: relative; width: 50%; line-height: 34px;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul li p{display: none;} #onlineContent .page3 .page_inner .process_wrap .process_tab>div{position: absolute; top: 0; left: 0; background-color: #06793e; border-radius: 20px; width: 50%; height: 100%; z-index: 0; transition-duration: 0.5s;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul li.tab_select h4{color: #fff; z-index: 1;} #onlineContent .page3 .page_inner .process_wrap .process_tab h4{position: relative; font-size: 1.6em; color: #06793e; font-weight: 700; text-align: center; transition-duration: 0.5s;} /* 탭 컨텐츠 */ #onlineContent .page3 .page_inner .process_wrap .process_tab_content{position: relative; width: 200%; display: flex; left: 0;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content ul{ position: relative; width:50%; display: flex; align-items: center; flex-wrap: wrap;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content ul>li{cursor: pointer; width: 30%; position: relative; display: flex; flex-direction: column; justify-content: space-between; margin-right: 5%; opacity: 0; top: -50px;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li:nth-child(3n){margin-right: 0;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li div{border: 4px solid #ccc; border-radius: 50%; overflow: hidden; position: relative;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li img{width: 100%;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li p:first-of-type{ height: 30px; line-height: 30px; background-color: #06793e; border-radius: 15px; width: 90%; text-align: center; margin: 10px auto 30px auto; color: #fff; position: relative;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li p.help{background-color: #F9E5C4; padding: 5px 10px; word-break: keep-all; position: absolute; width: 100%; z-index: 1; border-radius: 20px; bottom: 60px; display: none;} #onlineContent .page3 .page_inner .process_wrap .premix{position: relative;} #onlineContent .page3 .page_inner .process_wrap .premix>p.help{background-color: #F9E5C4; padding: 5px 10px; word-break: keep-all; position: absolute; width: 30%; z-index: 1; border-radius: 20px; top: -40px; left: 50%; transform: translateX(-50%); display: none;} /* 4페이지 */ #onlineContent .page4 .index_title {width: 400px;} #onlineContent .page4 .page_inner h4{position: relative; font-size: 2em; color: #06793e; font-weight: 700; text-align: center; margin-top: 100px;} #onlineContent .page4 .page_inner h4::after{content: ""; display: block; position: absolute; width: 320px; height: 7px; background-image: url(../img/line.png); background-size: contain; bottom: -8px; left: 50%; transform: translateX(-50%); background-repeat: repeat-x;} #onlineContent .page4 .page_inner p{margin-bottom: 1.2em;} /* 제분공정에 따른 밀의 변화 */ #onlineContent .page4 .page_inner .milling_list{position: relative; display: flex; justify-content: space-between; margin-top: 80px;} #onlineContent .page4 .page_inner .milling_list li{position: relative; width: 30%; padding:0 5%; top: 50px; opacity: 0;} #onlineContent .page4 .page_inner .milling_list li:first-child{padding-left: 0;} #onlineContent .page4 .page_inner .milling_list li:last-child{padding-right: 0;} #onlineContent .page4 .page_inner .milling_list li::after{content: ""; display: block; position: absolute; width: 30px; height: 30px; background-image: url(../img/arrow_right_c.png); background-size: cover; right: 0; top: 50%;} #onlineContent .page4 .page_inner .milling_list li:last-child::after{display: none;} #onlineContent .page4 .page_inner .milling_list li>div{position: relative;} #onlineContent .page4 .page_inner .milling_list li>div img{width: 100%;} #onlineContent .page4 .page_inner .milling_list p{width: 100px; height: 30px; line-height: 30px; background-color: #06793e; color: #fff; font-weight: 700; text-align: center; margin: 0 auto; border-radius: 15px;} /* 오버박스 */ #onlineContent .page4 .page_inner .milling_list li .over_box{position: absolute; top: 50%; left: 50%; width: 80%; transform: translate(-50%, -50%); background-color: rgba(255,255, 255, 0.8); border-radius: 50%; border: 4px solid #ccc; opacity: 0; transition-duration: 0.5s;} #onlineContent .page4 .page_inner .milling_list li:hover .over_box{opacity: 1;} /* 5페이지 */ #onlineContent .page5 .index_title {width: 480px;} #onlineContent .page5 .page_inner h4{position: relative; font-size: 2em; color: #06793e; font-weight: 700; text-align: center; margin-top: 100px; margin-bottom: 40px;} #onlineContent .page5 .page_inner h4::after{content: ""; display: block; position: absolute; width: 180px; height: 7px; background-image: url(../img/line.png); background-size: contain; bottom: -8px; left: 50%; transform: translateX(-50%); background-repeat: repeat-x;} #onlineContent .page5 .page_inner p{margin-bottom: 1.2em;} /* 밀가루의 종류, 아코디언 */ #onlineContent .page5 .page_inner .wheat_list{position: relative; display: flex; align-items: center; height: 500px; border: 2px solid #06793e; border-width: 4px 0 4px 0; overflow: hidden;} #onlineContent .page5 .page_inner .wheat_list li{width: 15%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding-top: 100px; cursor: pointer; justify-content: baseline; position: relative; z-index: 1; opacity: 0; left: -100px; transition-duration: 0.5s;} #onlineContent .page5 .page_inner .wheat_list li::before{content:""; display: block; position: absolute; width: 2px; height: 90%; background-color: #06793e; top: 50%; transform: translateY(-50%); right: 0;} #onlineContent .page5 .page_inner .wheat_list li:last-child::before{display: none;} #onlineContent .page5 .page_inner .wheat_list li h5{font-size: 1.6em; font-weight: 700; transform: rotate(90deg); margin-top: 100px; text-align: left; width: 150px; transition-duration: 0.5s; color: #06793e;} #onlineContent .page5 .page_inner .wheat_list li p{font-size: 1.1em; text-align: center; width: 92%; box-sizing: border-box; display: none; transition-duration: 0.5s; margin: 0 auto; height: 5em} #onlineContent .page5 .page_inner .wheat_list li img{width: 80px; transition-duration: 0.5s;} /* 오버박스 */ #onlineContent .page5 .page_inner .wheat_list li .over_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center;opacity: 0; transition: 0.5s;} #onlineContent .page5 .page_inner .wheat_list li .over_box div{height: 8px; width: 100%; position: relative; background-color: #F9E5C4;border-radius: 0 0 6px 6px; } #onlineContent .page5 .page_inner .wheat_list li .over_box div:last-child{border-radius: 6px 6px 0 0;} #onlineContent .page5 .page_inner .wheat_list li:hover .over_box{opacity: 1;} /* 선택된 아코디언 */ #onlineContent .page5 .page_inner .wheat_list li.select{width: 40%; padding: 10px 0; justify-content: center;} #onlineContent .page5 .page_inner .wheat_list li.select h5{transform: rotate(0); text-align: center; margin: 10px auto; font-size: 1.4em; background-color: #06793e; color: #fff;} #onlineContent .page5 .page_inner .wheat_list li.select img{width: 200px;} #onlineContent .page5 .page_inner .wheat_list li.select p{display: block;} #onlineContent .page5 .page_inner .wheat_list li.select .over_box{opacity: 1;} #onlineContent .page5 .page_inner .wheat_list li.select .over_box div{background-color: #06793e;} /* 밀가루의 등급 */ #onlineContent .page5 .page_inner .wheat_grade{position: relative; display: flex; justify-content: space-between; margin-top: 40px;} #onlineContent .page5 .page_inner .wheat_grade li{position: relative; width: 22%; opacity: 0; top: 50px;} #onlineContent .page5 .page_inner .wheat_grade li img{position: relative; width: 100%; border: 4px solid #ccc; border-radius: 50%; margin-bottom: 20px; opacity: 0.5; transition-duration: 0.5s;} #onlineContent .page5 .page_inner .wheat_grade li div p{background-color: #06793e; color: #fff; margin-bottom: 20px; line-height: 30px; border-radius: 15px;} #onlineContent .page5 .page_inner .wheat_grade li:hover img{opacity: 1;} /* 6페이지 */ #onlineContent .page6 {position: relative; padding-bottom: 300px; background-image: url(../img/online_bg_bot.jpg); background-size: cover; background-repeat: no-repeat; background-position: bottom; margin-bottom: 0;} #onlineContent .page6::after{content: ""; display: block; position: absolute; width: 100%; height: 150px; top: 0; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(6,121,62,1) 100%);} #onlineContent .page6 .page_inner h3{font-size: 2.2em; font-weight: 900; color: #06793e; text-align: center; transition-duration: 0.5s; transform: scale(0.5);} #onlineContent .page6 .page_inner{padding: 80px 60px; margin-bottom: 0; z-index: 1;} } /* Tablet 세로 */ @media screen and (min-width:601px) and (max-width:800px) { /* */ /* common */ /* */ /* pnb */ .pnb{position: relative; margin-top: -30px; z-index: 1;} .pnb .pnb_inner{position: relative; transition-duration: 0.5s; width: 80%; background-color: #06793e; border-radius: 0 20px 20px 0;} .pnb .pnb_inner ul{display: flex; height: 60px; align-items: center; justify-content: right; margin-right: 10%;} .pnb .pnb_inner ul li a{position: relative; color: #ccc;text-align: center; margin-left: 30px; font-size: 0.9em;} .pnb .pnb_inner ul li.select a{color: #fff; font-weight: bold;} .pnb .pnb_inner ul li a::after{content: ""; display: block; position: absolute; background-color: #F9E5C4; width: 4px; height: 4px; border-radius: 50%;top: 50%; transform: translateY(-50%); right: -17px;} .pnb .pnb_inner ul li:last-child a::after{display: none;} /* pnb link_ok */ .pnb .pnb_inner ul li a.link_ok{color: #F9E5C4;} .pnb .pnb_inner ul li.select a.link_ok{color: #fff; font-weight: bold;} .pnb .pnb_inner ul li.select a.link_ok::before{content: ""; display: block; position: absolute; width: 120%; height: 2px; background-color: #F9E5C4; bottom: -4px; left: 50%; transform: translateX(-50%);} /* 페이지 탑 타이틀 */ .page_top_box{overflow: hidden; position: relative; width: 100%; height: 600px;} .page_top{transition-duration: 0.5s; position: absolute; width: 80%; height: 320px; background-position: center; background-size: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 160px; transition-delay: 0.3s; transition-timing-function: ease;} .page_top .top_text{position: absolute; top: 50%; left: 50%; width:80%; transform: translate(-50%, -50%) scale(0.2); text-align: center; transition-duration: 0.5s; opacity: 0;} .page_top .top_text h2{ transition-duration:0.5s; font-size: 2.8em; font-weight: bold; color: #fff;} /* */ /* 온라인 견학 */ /* */ .page_top{background-image: url(../img/top_online.jpg);} .page{margin-bottom: 150px;} /* pager */ .online_pager{position: sticky; width: 40px; height: 0; left: 24px; top: 50%; z-index: 10; transform: translateY(-50%);} .online_pager ul{position: absolute; display: flex; height: 150px; flex-direction: column; justify-content: space-between; align-items: flex-start;} .online_pager ul li{min-width: 20px; height: 20px; box-sizing: border-box; border-radius:11px; line-height: 20px; background-color: #fff; border: 1px solid #06793e; transition-duration: 0.5s;} .online_pager ul li a{color: #06793e; font-size: 0.9em; display: none;} .online_pager ul li a span{font-weight: 600; margin-right: 4px;} .online_pager ul li.select{background-color: #F9E5C4; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); width: 40px;} /* 컨텐츠 시작 */ #onlineContent{position: relative; background-color: #06793e; margin-top: -40px; overflow: hidden;} /* 전체 페이지 설정 */ #onlineContent .page .page_inner{position: relative; max-width: 1600px; width: 92%; margin: 0 auto; border: 4px solid #06793e; background-color: #fff; padding: 0 30px 60px 30px; box-sizing: border-box; margin-bottom: 80px;} #onlineContent .index_title{font-size: 2em; background-color: #fff; color: #06793e; border: 4px solid #06793e; border-radius: 32px; font-weight: 700; width: 250px; height: 50px; line-height: 50px; text-align: center; margin: -27px auto 60px auto;} #onlineContent .page p{font-size: 1em; text-align: center; line-height: 1.6em; word-break: keep-all;} #onlineContent .page p span{background-color: #06793e; color: #fff;} /* 0페이지 */ #onlineContent .page0{position: relative; background-image: url(../img/online_header_bg.jpg); background-size: cover; padding: 200px 0 10px 0;} #onlineContent .page0::after{content: ""; display: block; position: absolute; width: 100%; height: 200px; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(6,121,62,1) 100%);} #onlineContent .page0 .page_inner{border: none; background: none; margin: 0 auto;} #onlineContent .page0 p{text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); z-index: 1;} #onlineContent .page0 p:first-child{position: relative; font-size: 1.6em; color: #fff; font-weight: 900; text-align: center; top: -50px; opacity: 0;} #onlineContent .page0 h2{width: 400px; text-align: center; margin: 50px auto; position: relative; top: 50px; opacity: 0; overflow: hidden;} #onlineContent .page0 h2 img{width: 100%;} #onlineContent .page0 p:last-child{position: relative; font-size: 1.2em; color: #fff; text-align: center; line-height: 1.6em; top: 50px; opacity: 0;} /* 1페이지 */ #onlineContent .page1 .page_inner p:last-of-type{margin-top: 1.2em;} #onlineContent .page1 .page_inner:last-child h4{position: relative; font-size: 1.6em; color: #06793e; font-weight: 700; text-align: center; margin-top: 80px;} #onlineContent .page1 .page_inner:last-child img{width: 400px; margin: 50px auto; transform: scale(0.5); transition-duration: 0.5s;} #onlineContent .page1 .page_inner:last-child h4::after{content: ""; display: block; position: absolute; width: 240px; height: 7px; background-image: url(../img/line.png); background-size: contain; bottom: -8px; left: 50%; transform: translateX(-50%); background-repeat: repeat-x;} #onlineContent .page1 p{opacity: 0; top: 50px;} /* 2페이지 */ #onlineContent .page2 .process_list li{position: relative; opacity: 0;} #onlineContent .page2 .process_list li>div{position: relative; display: flex; align-items: center; justify-content: space-between; padding: 20px 0;} #onlineContent .page2 .process_list li>div::after{content: ""; display: block; position: absolute; width: 4px; height: 100%; background-color: #06793e; left: 50%; transform: translateX(-50%); top: 0;} /* 이미지 */ #onlineContent .page2 .process_list li>div .online_step_img{width: 49%;} #onlineContent .page2 .process_list li>div .online_step_img img{width: 100%;} /* 텍스트 */ #onlineContent .page2 .process_list li>div div:last-child{width: 49%;} #onlineContent .page2 .process_list li>div div:last-child h4{color: #06793e; font-weight: 700; font-size: 1.4em; border-bottom: 2px solid #06793e; line-height: 2em;} #onlineContent .page2 .process_list li>div div:last-child p{text-align: left; margin-top: 20px;} /* 2n번째 배치 */ #onlineContent .page2 .process_list li:nth-child(2n)>div{flex-direction: row-reverse;} #onlineContent .page2 .process_list li:nth-child(2n)>div h4{text-align: right;} /* 과정 순서 표기 */ #onlineContent .page2 .process_list li .process_num{position: absolute; top: 16%; left: 50%; transform: translate(-50%, -50%); background-color: #06793e; width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; color: #fff; font-size: 1.4em; z-index: 1;} /* 3페이지 */ #onlineContent .page3 .page_inner>p:nth-of-type(1) br{display: none;} #onlineContent .page3 .page_inner>p:nth-of-type(2){margin-top: 1.2em; margin-bottom: 100px;} #onlineContent .page3 .page_inner .process_wrap{position: relative; overflow: hidden;} /* 제조공정 탭 */ #onlineContent .page3 .page_inner .process_wrap .process_tab{position: relative; margin: 0 auto 20px auto; width: 300px; height: 30px; border: 2px solid #06793e; border-radius: 26px; overflow: hidden;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul{display: flex; justify-content: space-between;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul li{cursor: pointer; position: relative; width: 50%; line-height: 34px;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul li p{display: none;} #onlineContent .page3 .page_inner .process_wrap .process_tab>div{position: absolute; top: 0; left: 0; background-color: #06793e; border-radius: 26px; width: 50%; height: 100%; z-index: 0; transition-duration: 0.5s;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul li.tab_select h4{color: #fff; z-index: 1;} #onlineContent .page3 .page_inner .process_wrap .process_tab h4{position: relative; font-size: 1.2em; color: #06793e; font-weight: 700; text-align: center; transition-duration: 0.5s;} /* 탭 컨텐츠 */ #onlineContent .page3 .page_inner .process_wrap .process_tab_content{position: relative; width: 200%; display: flex; left: 0;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content ul{ position: relative; width: 50%; display: flex; align-items: center; flex-wrap: wrap;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content ul>li{cursor: pointer; width: 50%; position: relative; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; top: -50px; box-sizing: border-box; padding-right: 1%;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content ul>li:nth-child(2n){padding-left: 1%; padding-right: 0;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li div{border: 4px solid #ccc; border-radius: 50%; overflow: hidden; position: relative;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li img{width: 100%;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li p:first-of-type{ height: 30px; line-height: 30px; background-color: #06793e; border-radius: 15px; width: 90%; text-align: center; margin: 10px auto 30px auto; color: #fff; position: relative;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li p.help{background-color: #F9E5C4; padding: 5px 10px; word-break: keep-all; position: absolute; width: 100%; z-index: 1; border-radius: 20px; bottom: 60px; display: none;} #onlineContent .page3 .page_inner .process_wrap .premix{position: relative;} #onlineContent .page3 .page_inner .process_wrap .premix>p.help{background-color: #F9E5C4; padding: 5px 10px; word-break: keep-all; position: absolute; width: 30%; z-index: 1; border-radius: 20px; top: -40px; left: 50%; transform: translateX(-50%); display: none;} /* 4페이지 */ #onlineContent .page4 .index_title {width: 300px;} #onlineContent .page4 .page_inner h4{position: relative; font-size: 1.6em; color: #06793e; font-weight: 700; text-align: center; margin-top: 100px;} #onlineContent .page4 .page_inner h4::after{content: ""; display: block; position: absolute; width: 260px; height: 7px; background-image: url(../img/line.png); background-size: contain; bottom: -8px; left: 50%; transform: translateX(-50%); background-repeat: repeat-x;} #onlineContent .page4 .page_inner p{margin-bottom: 1.2em;} /* 제분공정에 따른 밀의 변화 */ #onlineContent .page4 .page_inner .milling_list{position: relative;margin-top: 80px;} #onlineContent .page4 .page_inner .milling_list li{position: relative; top: 50px; opacity: 0; width: 80%; margin: 0 auto 50px auto;} #onlineContent .page4 .page_inner .milling_list li:first-child{padding-left: 0;} #onlineContent .page4 .page_inner .milling_list li:last-child{padding-right: 0;} #onlineContent .page4 .page_inner .milling_list li::after{content: ""; display: block; position: absolute; width: 40px; height: 40px; background-image: url(../img/arrow_down_c.png); background-size: cover; left: 50%; bottom: 0; transform: translateX(-50%);} #onlineContent .page4 .page_inner .milling_list li:last-child::after{display: none;} #onlineContent .page4 .page_inner .milling_list li>div{position: relative;} #onlineContent .page4 .page_inner .milling_list li>div img{width: 100%;} #onlineContent .page4 .page_inner .milling_list p{width: 120px; height: 30px; line-height: 30px; background-color: #06793e; color: #fff; font-weight: 700; text-align: center; margin: 0 auto; border-radius: 15px;} /* 오버박스 */ #onlineContent .page4 .page_inner .milling_list li .over_box{position: absolute; top: 50%; left: 50%; width: 80%; transform: translate(-50%, -50%); background-color: rgba(255,255, 255, 0.8); border-radius: 50%; border: 4px solid #ccc; opacity: 0; transition-duration: 0.5s; box-sizing: border-box;} #onlineContent .page4 .page_inner .milling_list li:hover .over_box{opacity: 1;} /* 5페이지 */ #onlineContent .page5 .index_title {width: 340px;} #onlineContent .page5 .page_inner h4{position: relative; font-size: 1.6em; color: #06793e; font-weight: 700; text-align: center; margin-top: 100px; margin-bottom: 40px;} #onlineContent .page5 .page_inner h4::after{content: ""; display: block; position: absolute; width: 150px; height: 7px; background-image: url(../img/line.png); background-size: contain; bottom: -8px; left: 50%; transform: translateX(-50%); background-repeat: repeat-x;} #onlineContent .page5 .page_inner p{margin-bottom: 1.2em;} /* 밀가루의 종류, 아코디언 */ #onlineContent .page5 .page_inner .wheat_list{position: relative; border: 2px solid #06793e; border-width: 2px 0 2px 0; overflow: hidden; height: 500px;} #onlineContent .page5 .page_inner .wheat_list li{box-sizing: border-box; display: flex; align-items: center; cursor: pointer; justify-content: baseline; position: relative; z-index: 1; opacity: 0; left: -100px; transition-duration: 0.5s; overflow: hidden; height: 80px;} #onlineContent .page5 .page_inner .wheat_list li:last-child::before{display: none;} #onlineContent .page5 .page_inner .wheat_list li .mil_text {display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: 40px;} #onlineContent .page5 .page_inner .wheat_list li h5{font-size: 1.4em; font-weight: 700; text-align: left; width: 150px; transition-duration: 0.5s; color: #06793e; margin-bottom: 10px;} #onlineContent .page5 .page_inner .wheat_list li p{font-size: 1em; text-align: center; box-sizing: border-box; display: none; transition-duration: 0.5s; margin: 0 auto; line-height: 1.4em;} #onlineContent .page5 .page_inner .wheat_list li img{width: 60px; margin: 10px; transition-duration: 0.5s;} /* 선택된 아코디언 */ #onlineContent .page5 .page_inner .wheat_list li.select{height: 180px;} #onlineContent .page5 .page_inner .wheat_list li.select .mil_text{margin-left: 0;} #onlineContent .page5 .page_inner .wheat_list li.select h5{text-align: center; font-size: 1.2em; background-color: #06793e; color: #fff;} #onlineContent .page5 .page_inner .wheat_list li.select img{width: 140px;} #onlineContent .page5 .page_inner .wheat_list li.select p{display: block;} #onlineContent .page5 .page_inner .wheat_list li.select .over_box{opacity: 1;} #onlineContent .page5 .page_inner .wheat_list li.select .over_box div{background-color: #06793e;} /* 오버박스 */ #onlineContent .page5 .page_inner .wheat_list li .over_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center;opacity: 0; transition: 0.5s;} #onlineContent .page5 .page_inner .wheat_list li .over_box div{height: 8px; width: 100%; position: relative; background-color: #F9E5C4;border-radius: 0 0 6px 6px; } #onlineContent .page5 .page_inner .wheat_list li .over_box div:last-child{border-radius: 6px 6px 0 0;} #onlineContent .page5 .page_inner .wheat_list li:hover .over_box{opacity: 1;} /* 밀가루의 등급 */ #onlineContent .page5 .page_inner .wheat_grade{position: relative; display: flex; justify-content: space-between; margin-top: 40px; flex-wrap: wrap;} #onlineContent .page5 .page_inner .wheat_grade li{position: relative; width: 46%; opacity: 0; top: 50px;} #onlineContent .page5 .page_inner .wheat_grade li img{position: relative; width: 100%; border: 4px solid #ccc; border-radius: 50%; margin-bottom: 20px; opacity: 0.5; transition-duration: 0.5s;} #onlineContent .page5 .page_inner .wheat_grade li div p{background-color: #06793e; color: #fff; margin-bottom: 20px; line-height: 30px; border-radius: 15px;} #onlineContent .page5 .page_inner .wheat_grade li:hover img{opacity: 1;} /* 6페이지 */ #onlineContent .page6 {position: relative; padding-bottom: 300px; background-image: url(../img/online_bg_bot.jpg); background-size: cover; background-repeat: no-repeat; background-position: bottom; margin-bottom: 0;} #onlineContent .page6::after{content: ""; display: block; position: absolute; width: 100%; height: 150px; top: 0; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(6,121,62,1) 100%);} #onlineContent .page6 .page_inner h3{font-size: 1.6em; font-weight: 900; color: #06793e; text-align: center; transition-duration: 0.5s; transform: scale(0.5);} #onlineContent .page6 .page_inner{padding: 80px 60px; margin-bottom: 0; z-index: 1;} } /* Mobile */ @media screen and (max-width:600px) { /* */ /* common */ /* */ /* pnb */ .pnb{position: relative; margin-top: -30px; z-index: 1;} .pnb .pnb_inner{position: relative; transition-duration: 0.5s; width: 100%; background-color: #06793e;} .pnb .pnb_inner ul{display: flex; height: 60px; align-items: center; justify-content: center; } .pnb .pnb_inner ul li a{position: relative; color: #ccc;text-align: center; margin: 0 10px; font-size: 0.9em;} .pnb .pnb_inner ul li.select a{color: #fff; font-weight: bold;} .pnb .pnb_inner ul li a::after{content: ""; display: block; position: absolute; background-color: #F9E5C4; width: 4px; height: 4px; border-radius: 50%;top: 50%; transform: translateY(-50%); right: -12px;} .pnb .pnb_inner ul li:last-child a::after{display: none;} /* pnb link_ok */ .pnb .pnb_inner ul li a.link_ok{color: #F9E5C4;} .pnb .pnb_inner ul li.select a.link_ok{color: #fff; font-weight: bold;} .pnb .pnb_inner ul li.select a.link_ok::before{content: ""; display: block; position: absolute; width: 120%; height: 2px; background-color: #F9E5C4; bottom: -4px; left: 50%; transform: translateX(-50%);} /* 페이지 탑 타이틀 */ .page_top_box{overflow: hidden; position: relative; width: 100%; height: 560px;} .page_top{transition-duration: 0.5s; position: absolute; width: 90%; height: 200px; background-position: center; background-size: cover; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 100px; transition-delay: 0.3s; transition-timing-function: ease;} .page_top .top_text{position: absolute; top: 50%; left: 50%; width:80%; transform: translate(-50%, -50%) scale(0.2); text-align: center; transition-duration: 0.5s; opacity: 0;} .page_top .top_text h2{ transition-duration:0.5s; font-size: 2.2em; font-weight: bold; color: #fff;} /* */ /* 온라인 견학 */ /* */ .page_top{background-image: url(../img/top_online.jpg);} .page{margin-bottom: 100px;} /* pager */ .online_pager{position: sticky; width: 20px; height: 0; left: 10px; top: 50%; z-index: 10; transform: translateY(-50%);} .online_pager ul{position: absolute; display: flex; height: 180px; flex-direction: column; justify-content: space-between; align-items: flex-start;} .online_pager ul li{min-width: 20px; height: 20px; box-sizing: border-box; border-radius:11px; line-height: 20px; background-color: #fff; border: 1px solid #06793e; transition-duration: 0.5s;} .online_pager ul li a{color: #06793e; font-size: 0.9em; display: none;} .online_pager ul li a span{font-weight: 600; margin-right: 4px;} .online_pager ul li.select{background-color: #F9E5C4; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); height: 40px;} /* 컨텐츠 시작 */ #onlineContent{position: relative; background-color: #06793e; margin-top: -40px; overflow: hidden;} /* 전체 페이지 설정 */ #onlineContent .page .page_inner{position: relative; width: 92%; margin: 0 auto; border: 4px solid #06793e; background-color: #fff; padding: 0 20px 50px 20px; box-sizing: border-box; margin-bottom: 50px;} #onlineContent .index_title{font-size: 1.6em; background-color: #fff; color: #06793e; border: 4px solid #06793e; border-radius: 32px; font-weight: 700; width: 200px; height: 40px; line-height: 40px; text-align: center; margin: -24px auto 50px auto;} #onlineContent .page p{font-size: 0.9em; text-align: center; line-height: 1.6em; word-break: keep-all;} #onlineContent .page p span{background-color: #06793e; color: #fff;} /* 0페이지 */ #onlineContent .page0{position: relative; background-image: url(../img/online_header_bg.jpg); background-size: cover; padding: 150px 0 0;} #onlineContent .page0::after{content: ""; display: block; position: absolute; width: 100%; height: 150px; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(6,121,62,1) 100%);} #onlineContent .page0 .page_inner{border: none; background: none; margin: 0 auto;} #onlineContent .page0 p{text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); z-index: 1;} #onlineContent .page0 p:first-child{position: relative; font-size: 1.4em; color: #fff; font-weight: 900; text-align: center; top: -50px; opacity: 0;} #onlineContent .page0 h2{width: 300px; text-align: center; margin: 50px auto; position: relative; top: 50px; opacity: 0; overflow: hidden;} #onlineContent .page0 h2 img{width: 100%;} #onlineContent .page0 p:last-child{position: relative; font-size: 1em; color: #fff; text-align: center; line-height: 1.6em; top: 50px; opacity: 0;} /* 1페이지 */ #onlineContent .page1 .page_inner p:first-of-type br{display: none;} #onlineContent .page1 .page_inner p:last-of-type{margin-top: 1.2em;} #onlineContent .page1 .page_inner:last-child h4{position: relative; font-size: 1.4em; color: #06793e; font-weight: 700; text-align: center; margin-top: 80px;} #onlineContent .page1 .page_inner:last-child img{width: 300px; margin: 50px auto; transform: scale(0.5); transition-duration: 0.5s;} #onlineContent .page1 .page_inner:last-child h4::after{content: ""; display: block; position: absolute; width: 200px; height: 7px; background-image: url(../img/line.png); background-size: contain; bottom: -8px; left: 50%; transform: translateX(-50%); background-repeat: repeat-x;} #onlineContent .page1 p{opacity: 0; top: 50px;} /* 2페이지 */ #onlineContent .page2 .process_list li{position: relative; opacity: 0; margin-bottom: 20px;} #onlineContent .page2 .process_list li>div{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between;} /* 과정 순서 표기 */ #onlineContent .page2 .process_list li .process_num{position: relative; background-color: #06793e; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 50%; color: #fff; font-size: 1.2em;} /* 이미지 */ #onlineContent .page2 .process_list li>div .online_step_img img{width: 100%;} /* 텍스트 */ #onlineContent .page2 .process_list li>div div:last-child h4{color: #06793e; font-weight: 700; font-size: 1.4em; border-bottom: 2px solid #06793e; line-height: 2em; text-align: center;} #onlineContent .page2 .process_list li>div div:last-child p{text-align: left; margin-top: 10px; text-align: center;} /* 3페이지 */ #onlineContent .page3 .page_inner>p:nth-of-type(1) br{display: none;} #onlineContent .page3 .page_inner>p:nth-of-type(2){margin-top: 1.2em; margin-bottom: 60px;} #onlineContent .page3 .page_inner .process_wrap{position: relative; overflow: hidden;} /* 제조공정 탭 */ #onlineContent .page3 .page_inner .process_wrap .process_tab{position: relative; margin: 0 auto 20px auto; width: 240px; height: 30px; border: 2px solid #06793e; border-radius: 26px; overflow: hidden;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul{display: flex; justify-content: space-between;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul li{cursor: pointer; position: relative; width: 50%; line-height: 34px;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul li p{display: none;} #onlineContent .page3 .page_inner .process_wrap .process_tab>div{position: absolute; top: 0; left: 0; background-color: #06793e; border-radius: 26px; width: 50%; height: 100%; z-index: 0; transition-duration: 0.5s;} #onlineContent .page3 .page_inner .process_wrap .process_tab ul li.tab_select h4{color: #fff; z-index: 1;} #onlineContent .page3 .page_inner .process_wrap .process_tab h4{position: relative; font-size: 1.2em; color: #06793e; font-weight: 700; text-align: center; transition-duration: 0.5s;} /* 탭 컨텐츠 */ #onlineContent .page3 .page_inner .process_wrap .process_tab_content{position: relative; width: 200%; display: flex; left: 0;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content ul{ position: relative; width: 50%; display: flex; align-items: center; flex-wrap: wrap;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content ul>li{cursor: pointer; width: 50%; position: relative; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; top: -50px; box-sizing: border-box; padding-right: 1%;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content ul>li:nth-child(2n){padding-left: 1%; padding-right: 0;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li div{border: 4px solid #ccc; border-radius: 50%; overflow: hidden; position: relative;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li img{width: 100%;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li p:first-of-type{ height: 30px; line-height: 30px; background-color: #06793e; border-radius: 15px; width: 90%; text-align: center; margin: 10px auto 30px auto; color: #fff; position: relative;} #onlineContent .page3 .page_inner .process_wrap .process_tab_content >ul>li p.help{background-color: #F9E5C4; padding: 5px 10px; word-break: keep-all; position: absolute; width: 100%; z-index: 1; border-radius: 20px; bottom: 60px; display: none;} #onlineContent .page3 .page_inner .process_wrap .premix{position: relative;} #onlineContent .page3 .page_inner .process_wrap .premix>p.help{background-color: #F9E5C4; padding: 5px 10px; word-break: keep-all; position: absolute; width: 30%; z-index: 1; border-radius: 20px; top: -40px; left: 50%; transform: translateX(-50%); display: none;} /* 4페이지 */ #onlineContent .page4 .index_title {width: 240px;} #onlineContent .page4 .page_inner h4{position: relative; font-size: 1.4em; color: #06793e; font-weight: 700; text-align: center; margin-top: 50px;} #onlineContent .page4 .page_inner h4::after{content: ""; display: block; position: absolute; width: 220px; height: 7px; background-image: url(../img/line.png); background-size: contain; bottom: -8px; left: 50%; transform: translateX(-50%); background-repeat: repeat-x;} #onlineContent .page4 .page_inner p{margin-bottom: 1.2em;} /* 제분공정에 따른 밀의 변화 */ #onlineContent .page4 .page_inner .milling_list{position: relative;margin-top: 30px;} #onlineContent .page4 .page_inner .milling_list li{position: relative; top: 50px; opacity: 0; width: 80%; margin: 0 auto 40px auto;} #onlineContent .page4 .page_inner .milling_list li:first-child{padding-left: 0;} #onlineContent .page4 .page_inner .milling_list li:last-child{padding-right: 0;} #onlineContent .page4 .page_inner .milling_list li::after{content: ""; display: block; position: absolute; width: 40px; height: 40px; background-image: url(../img/arrow_down_c.png); background-size: cover; left: 50%; bottom: -10px; transform: translateX(-50%);} #onlineContent .page4 .page_inner .milling_list li:last-child::after{display: none;} #onlineContent .page4 .page_inner .milling_list li>div{position: relative;} #onlineContent .page4 .page_inner .milling_list li>div img{width: 100%;} #onlineContent .page4 .page_inner .milling_list p{width: 120px; height: 30px; line-height: 30px; background-color: #06793e; color: #fff; font-weight: 700; text-align: center; margin: 0 auto; border-radius: 15px;} /* 오버박스 */ #onlineContent .page4 .page_inner .milling_list li .over_box{position: absolute; top: 50%; left: 50%; width: 70%; transform: translate(-50%, -50%); background-color: rgba(255,255, 255, 0.8); border-radius: 50%; border: 4px solid #ccc; opacity: 0; transition-duration: 0.5s; box-sizing: border-box;} #onlineContent .page4 .page_inner .milling_list li:hover .over_box{opacity: 1;} /* 5페이지 */ #onlineContent .page5 .index_title {width: 260px;} #onlineContent .page5 .page_inner h4{position: relative; font-size: 1.4em; color: #06793e; font-weight: 700; text-align: center; margin-bottom: 30px;} #onlineContent .page5 .page_inner h4::after{content: ""; display: block; position: absolute; width: 120px; height: 7px; background-image: url(../img/line.png); background-size: contain; bottom: -8px; left: 50%; transform: translateX(-50%); background-repeat: repeat-x;} #onlineContent .page5 .page_inner p{margin-bottom: 1.2em;} /* 밀가루의 종류, 아코디언 */ #onlineContent .page5 .page_inner .wheat_list{position: relative; border: 2px solid #06793e; border-width: 2px 0 2px 0; overflow: hidden; height: 500px; margin-top: 20px;} #onlineContent .page5 .page_inner .wheat_list li{box-sizing: border-box; display: flex; align-items: center; cursor: pointer; justify-content: baseline; position: relative; z-index: 1; opacity: 0; left: -100px; transition-duration: 0.5s; overflow: hidden; height: 80px;} #onlineContent .page5 .page_inner .wheat_list li:last-child::before{display: none;} #onlineContent .page5 .page_inner .wheat_list li .mil_text {display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: 30px;} #onlineContent .page5 .page_inner .wheat_list li h5{font-size: 1.4em; font-weight: 700; text-align: left; width: 150px; transition-duration: 0.5s; color: #06793e; margin-bottom: 10px;} #onlineContent .page5 .page_inner .wheat_list li p{font-size: 0.9em; text-align: center; box-sizing: border-box; display: none; transition-duration: 0.5s; margin: 0 auto; line-height: 1.4em;} #onlineContent .page5 .page_inner .wheat_list li img{width: 40px; margin: 10px; transition-duration: 0.5s;} /* 선택된 아코디언 */ #onlineContent .page5 .page_inner .wheat_list li.select{height: 180px;} #onlineContent .page5 .page_inner .wheat_list li.select .mil_text{margin-left: 0;} #onlineContent .page5 .page_inner .wheat_list li.select h5{text-align: center; font-size: 1em; background-color: #06793e; color: #fff;} #onlineContent .page5 .page_inner .wheat_list li.select img{width: 80px;} #onlineContent .page5 .page_inner .wheat_list li.select p{display: block;} #onlineContent .page5 .page_inner .wheat_list li.select .over_box{opacity: 1;} #onlineContent .page5 .page_inner .wheat_list li.select .over_box div{background-color: #06793e;} /* 오버박스 */ #onlineContent .page5 .page_inner .wheat_list li .over_box{position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center;opacity: 0; transition: 0.5s;} #onlineContent .page5 .page_inner .wheat_list li .over_box div{height: 8px; width: 100%; position: relative; background-color: #F9E5C4;border-radius: 0 0 6px 6px; } #onlineContent .page5 .page_inner .wheat_list li .over_box div:last-child{border-radius: 6px 6px 0 0;} #onlineContent .page5 .page_inner .wheat_list li:hover .over_box{opacity: 1;} /* 밀가루의 등급 */ #onlineContent .page5 .page_inner .wheat_grade{position: relative; display: flex; justify-content: space-between; margin-top: 40px; flex-wrap: wrap;} #onlineContent .page5 .page_inner h4:nth-of-type(2){margin-top: 40px;} #onlineContent .page5 .page_inner .wheat_grade li{position: relative; width: 46%; opacity: 0; top: 50px;} #onlineContent .page5 .page_inner .wheat_grade li img{position: relative; width: 100%; border: 4px solid #ccc; border-radius: 50%; margin-bottom: 20px; opacity: 0.5; transition-duration: 0.5s;} #onlineContent .page5 .page_inner .wheat_grade li div p{background-color: #06793e; color: #fff; margin-bottom: 20px; line-height: 30px; border-radius: 15px;} #onlineContent .page5 .page_inner .wheat_grade li:hover img{opacity: 1;} /* 6페이지 */ #onlineContent .page6 {position: relative; padding-bottom: 300px; background-image: url(../img/online_bg_bot.jpg); background-size: cover; background-repeat: no-repeat; background-position: bottom; margin-bottom: 0;} #onlineContent .page6::after{content: ""; display: block; position: absolute; width: 100%; height: 150px; top: 0; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(6,121,62,1) 100%);} #onlineContent .page6 .page_inner h3{font-size: 1.4em; font-weight: 900; color: #06793e; text-align: center; transition-duration: 0.5s; transform: scale(0.5); word-break: keep-all;} #onlineContent .page6 .page_inner{padding: 80px 60px; margin-bottom: 0; z-index: 1;} }