@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'); /* 웹폰트:NotoSansKR(한국어-고딕) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap'); /* 웹폰트:NotoSerifKR(한국어-명조) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap'); /* 웹폰트:Roboto(영어) */

.header h1 a {background-color:transparent; background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/renew/logo_white.svg); background-repeat:no-repeat; background-position:center 16px; background-size:contain;}
.header .active h1 a {background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/renew/logo_b.svg);}

ul.list-gnb.mobile.main>li {color:#fff;}
ul.list-gnb.mobile.main>li {color:#000;}
.active ul.list-gnb.mobile>li {color:#000;}

ul.list-gnb.mobile>li.cart {background-color:transparent; background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_cart_w.svg); background-repeat:no-repeat; background-position:center top; background-size:28px 28px;}
ul.list-gnb.mobile>li.cart .cart-count {color:#fff;}
ul.list-gnb.mobile>li.login {background-color:transparent; background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/toun/renew/icons/ico_login-w.svg); background-repeat:no-repeat; background-position:center top; background-size:28px 28px;}
ul.list-gnb.mobile li.ico-lang button {background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_lang_w.svg);}

.active ul.list-gnb.mobile>li.cart,.cover ul.list-gnb.mobile>li.cart {background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_cart_bk.svg);}
.active ul.list-gnb.mobile>li.login,.cover ul.list-gnb.mobile>li.login {background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/toun/renew/icons/ico_login.svg);}
.active ul.list-gnb.mobile>li.cart .cart-count,.cover ul.list-gnb.mobile>li.cart .cart-count {color:#000;}
ul.list-gnb.mobile>li.like {background-color:transparent; background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_like_w.svg); background-repeat:no-repeat; background-position:center top; background-size:28px 28px;}
.active ul.list-gnb.mobile>li.like {background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_like_bk.svg);}
ul.list-gnb.gt-780>li.ico-cart a {color:#fff; background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_cart_w.svg);}
ul.list-gnb.gt-780>li.ico-like a {background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_like_w.svg);}
ul.list-gnb.gt-780>li.ico-lang button {background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_lang_w.svg);}

.active ul.list-gnb.gt-780>li.ico-cart a {background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_cart_bk.svg);}
.active ul.list-gnb.gt-780>li.ico-like a {background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_like_bk.svg);}
.active ul.list-gnb.gt-780>li.ico-lang button {background-image:url(https://toun28.s3.ap-northeast-2.amazonaws.com/img/renew/ico_lang_bk.svg);}
.navTrigger i {background-color:#fff;}
.active .navTrigger i,.cover .navTrigger i {background-color:#000;}

ul.list-filter>li,ul.list-gnb>li {color:#fff;}
ul.list-gnb.mobile.m-sub-menu>li>a {color:#fff;}
.active ul.list-gnb.mobile.m-sub-menu>li>a {color:#000;}
ul.list-gnb>li {color:#fff;}
.active ul.list-gnb>li {color:#1b1b1b;}
ul.list-snb>li {color:#fff;}

.mission .full_screen {height:100vh !important;}

.mission .videoBox {display:block; width:100%; height:100%;}
.mission .videoBox video {position:relative; top:0; left:0; width:100%; height:100%; border:none; outline:none; object-fit:cover; pointer-events:none;}
.mission .videoBox video::-webkit-media-controls-fullscreen-button {display:none !important;}/* 전체화면 버튼 */
.mission .videoBox video::-webkit-media-controls-play-button {display:none !important;}/* 일시정지, 재생 버튼 */
.mission .videoBox video::-webkit-media-controls-timeline {display:none !important;}/* 재생 슬라이드 */
.mission .videoBox video::-webkit-media-controls-current-time-display{display:none !important;}/* 현재 진행 시간 */
.mission .videoBox video::-webkit-media-controls-time-remaining-display {display:none !important;}/* 전체 시간 */
.mission .videoBox video::-webkit-media-controls-mute-button {display:none !important;}/* 음소거 버튼 */
.mission .videoBox video::-webkit-media-controls-volume-slider {display:none !important;}/* 볼륨 조절 슬라이드 */
.mission .videoBox video::-webkit-media-controls-fullscreen-button {display:none !important;}/* 전체화면 */

.mission .missionBoard {display:block; width:100%; height:100%; text-align:center; background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/mission_poster_pc.png") no-repeat right center/cover;}
.mission .missionBoard .inner {display:inline-block; position:relative; width:1180px; min-width:1180px; height:100%; box-sizing:border-box;}
.mission .missionBoard .inner .current_time {position:absolute; top:125px; left:10%; color:#fff; font-family:'Roboto',sans-serif; font-size:45px; font-weight:700; letter-spacing:0.25px;}
.mission .missionBoard .inner .campaign {position:absolute; top:125px; right:10%; text-align:right;}
.mission .missionBoard .inner .campaign .tit {display:block; margin:0 0 25px 0; color:#fff; font-family:'Roboto',sans-serif; font-size:45px; font-weight:500; letter-spacing:0px;}
.mission .missionBoard .inner .campaign .num {display:block; color:#fff; font-family:'Roboto',sans-serif; font-size:65px; font-weight:500; letter-spacing:0px}
.mission .missionBoard .inner .campaign .desc {display:block; margin:0 0 25px 0; color:#fff; font-family:"Noto Sans KR",NanumGothic,Dotum,Arial,sans-serif; font-size:26px; font-weight:500; letter-spacing:-0.5px;}

.mission .enviBox {display:block; width:100%; height:100%; text-align:center; background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/img_mission_pc13.jpg") no-repeat right center/cover;}
.mission .enviBox .inner {display:inline-block; position:relative; width:1180px; min-width:1180px; height:100%; box-sizing:border-box;}
.mission .enviBox .inner .current_time {position:absolute; top:125px; left:10%; color:#fff; font-family:'Roboto',sans-serif; font-size:45px; font-weight:700; letter-spacing:0.25px;}
.mission .enviBox .inner .midBox {position:absolute; top:125px; right:10%; margin:0; text-align:right;}
.mission .enviBox .inner .midBox .counter {display:block; margin:0; color:#fff; font-family:'Roboto',sans-serif; font-size:65px; font-weight:500; letter-spacing:0.25px;}
.mission .enviBox .inner .midBox .tit {display:block; margin:0 0 25% 0; color:#fff; font-size:26px; font-weight:500; letter-spacing:-1px;}
.mission .enviBox .inner .midBox .txt {display:block; margin:0 0 15% 0;}
.mission .enviBox .inner .midBox .txt p {color:#fff; font-size:30px; font-weight:300; line-height:46px; letter-spacing:0;}
.mission .enviBox .inner .midBox .txt p strong {font-weight:700;}
.mission .enviBox .inner .midBox .txt p:first-child {margin:0 0 30px 0;}
.mission .enviBox .inner .midBox .btnBox {margin:0;  text-align:right;}
.mission .enviBox .inner .midBox .btnBox a {margin:0; color:#1b1b1b; font-family:"Noto Sans KR",NanumGothic,Dotum,Arial,sans-serif; font-weight:700; text-align:center; border:none;}

.mission .stnType01 {display:block; position:relative; width:100%; height:100vh; text-align:center;}
.mission .stnType01 dl.infoBox {display:inline-block; position:relative; width:1180px; min-width:1180px; margin:0 auto; padding:50px 0 0 0; font-family:"Noto Sans KR",NanumGothic,Dotum,Arial,sans-serif;}
.mission .stnType01 dl.infoBox dt {display:block; margin:0 0 5px 0; color:#1b1b1b; font-size:30px; font-weight:400; text-align:center; line-height:40px; letter-spacing:-0.5px;}
.mission .stnType01 dl.infoBox dd {display:block; position:relative; margin:0 0 25px 0; color:#1b1b1b; font-size:20px; font-weight:300; text-align:center; line-height:28px;            letter-spacing:-0.5px;}
.mission .stnType01 dl.infoBox dd:last-child {margin:0;}
.mission .stnType01 dl.infoBox dd a {display:inline-block; color:#1b1b1b; font-size:20px; font-weight:400; letter-spacing:-1px;}
.mission .stnType01 dl.infoBox dd a:after {content:''; display:inline-block; width:16px; height:16px; margin:-2px 0 0 5px; vertical-align:middle; background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/arw_left_bk.svg") no-repeat center center/cover; transform:rotate(-90deg);}
.mission .stnType01 .imgBox {display:block; position:absolute; bottom:0; left:0; width:100%; height:calc(100% - 225px);}
.mission .stnType01 .imgBox .img_mo {display:none;}

.mission .stnType01.bg01 .imgBox {background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/img_mission_pc02.jpg") no-repeat center center/cover;}
.mission .stnType01.bg02 .imgBox {background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/img_mission_pc03.png") no-repeat center top;}
.mission .stnType01.bg03 .imgBox {background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/img_mission_pc04.png") no-repeat center bottom;}

.mission .stnType02 {display:block; position:relative; width:100%; height:100vh; text-align:center;}
.mission .stnType02 dl.infoBox {display:inline-block; position:relative; width:1180px; min-width:1180px; margin:0 auto; padding:70px 0 0 0; font-family:"Noto Sans KR",NanumGothic,Dotum,Arial,sans-serif; }
.mission .stnType02 dl.infoBox dt {display:block; margin:0 0 10px 0; color:#1b1b1b; font-size:30px; font-weight:400; text-align:left; line-height:40px; letter-spacing:-0.5px;}
.mission .stnType02 dl.infoBox dd {display:block; position:relative; margin:0 0 25px 0; color:#1b1b1b; font-size:20px; font-weight:400; text-align:left; line-height:28px;letter-spacing:-0.5px;}
.mission .stnType02 dl.infoBox dd:last-child {margin:0;}
.mission .stnType02 dl.infoBox dd a {display:inline-block; color:#1b1b1b; font-family:'Roboto',sans-serif; font-size:20px; font-weight:400; letter-spacing:-1px;}
.mission .stnType02 dl.infoBox dd a:after {content:''; display:inline-block; width:16px; height:16px; margin:-2px 0 0 5px; vertical-align:middle; background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/arw_left_bk.svg") no-repeat center center/cover; transform:rotate(-90deg);}

.mission .stnType02 .imgBox {display:block; position:absolute; bottom:0; left:0; width:100%; height:calc(100% - 320px);}
.mission .stnType02 .imgBox .img_mo {display:none;}
.mission .stnType02.bg04 .imgBox {background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/img_mission_pc05.jpg") no-repeat center center/cover;}
.mission .stnType02.bg05 .imgBox {background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/img_mission_pc06.jpg") no-repeat center center/cover;}

.mission .stn_crew {display:block; position:relative; width:100%; padding:90px 0 70px; text-align:center;}
.mission .stn_crew ul.item {display:flex;}
.mission .stn_crew ul.item li {position:relative; width:calc(100% / 3);}
.mission .stn_crew ul.item li img {width:100%;}
.mission .stn_crew dl.infoBox {display:inline-block; position:relative; width:1180px; min-width:1180px; margin:0 auto; padding:50px 0 0 0; font-family:"Noto Sans KR",NanumGothic,Dotum,Arial,sans-serif;}
.mission .stn_crew dl.infoBox dt {display:block; margin:0 0 30px 0; color:#1b1b1b; font-size:30px; font-weight:400; text-align:left; line-height:40px; letter-spacing:-0.5px;}
.mission .stn_crew dl.infoBox dd {display:block; position:relative; margin:0 0 25px 0; color:#1b1b1b; font-size:20px; font-weight:300; text-align:left; line-height:28px; letter-spacing:-0.5px;}
.mission .stn_crew dl.infoBox dd:last-child {margin:0;}
.mission .stn_crew dl.infoBox dd a {display:inline-block; position:relative; padding:0 20px 0 0; color:#1b1b1b; font-family:'Roboto',sans-serif; font-size:26px; font-weight:400; letter-spacing:0.5px;}
.mission .stn_crew dl.infoBox dd a:after {content:''; position:absolute; top:36px; right:0; width:16px; height:16px; margin:-2px 0 0 5px; vertical-align:middle; background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/arw_left_bk.svg") no-repeat center center/cover; transform:rotate(-90deg);}
.mission .stn_crew dl.infoBox dd a span {display:block; font-family:"Noto Sans KR",NanumGothic,Dotum,Arial,sans-serif; font-size:20px; letter-spacing:-0.25px;}

.mission .stn_msg {display:block; position:relative; width:100%; padding:360px 0; text-align:center;}
.mission .stn_msg .tit {display:block; margin:0 0 145px 0; color:#1b1b1b; font-size:30px; font-weight:400; text-align:center; line-height:40px; letter-spacing:-0.5px;}
.mission .stn_msg .txt {display:block; margin:0 0 45px 0;}
.mission .stn_msg .name {display:block; font-family:"Noto Sans KR",NanumGothic,Dotum,Arial,sans-serif; font-size:40px; letter-spacing:-0.5px; opacity:0.6;}

.farm {}
.farm .stn {position:relative; text-align:center;}
.farm .stn:nth-child(1) {overflow:hidden; height:100vh;}
.farm .stn:nth-child(1) .titBox {position:absolute; top:50%; left:50%; width:1180px; text-align:left; transform: translate(-50%,-50%)}
.farm .stn:nth-child(1) .titBox .tit {display:block; padding:0 40% 0 0;}
.farm .stn:nth-child(1) .titBox .tit img {width:100%;}
.farm .stn:nth-child(1) .titBox .tit:after {content:'실제 톤28 무농약 해남404 농장 전경'; display:block; margin:20px 0 0 0; color:#FFFEF1; font-size:13px; font-weight:400; text-align:left;}
.farm .stn:nth-child(1)>img {width:100%; object-fit:cover;}
.farm .stn:nth-child(1)>img.pc {display:block;}
.farm .stn:nth-child(1)>img.mo {display:none;}
.farm .stn .inner {display:inline-block; width:780px;}
.farm .stn:nth-child(2) {}
.farm .stn:nth-child(3) {}
.farm .stn:nth-child(4) {}

@media screen and (max-width:768px) {
.mission .missionBoard {position:relative; background:url("https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/mission_poster_mo.png") no-repeat right center/cover;}
.mission .missionBoard .inner {position:absolute; bottom:150px; left:0; width:100%; min-width:100%; height:auto;}
.mission .missionBoard .inner .current_time {position:relative; top:0; left:0; margin:0 0 10px 0; font-size:20px; font-weight:400; text-align:center;}
.mission .missionBoard .inner .campaign {position:relative; top:0; left:0; text-align:center;}
.mission .missionBoard .inner .campaign .tit {font-size:26px; text-align:center;}
.mission .missionBoard .inner .campaign .num { font-size:46px;}
.mission .missionBoard .inner .campaign .desc {font-size:20px;}
	
.mission .enviBox {position:relative; background:url(https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/img_mission_mo13.jpg) no-repeat right center/cover;}
.mission .enviBox .inner {width:100%; min-width:100%;}
.mission .enviBox .inner .current_time {top:25%; left:0; width:100%; margin:0 0 10px 0; font-size:1.25rem; font-weight:400; text-align:center; text-shadow:0 0 3px rgba(27,27,27,0.3);}
.mission .enviBox .inner .midBox {top:30%; left:0; width:100%; text-align:center;}
.mission .enviBox .inner .midBox .counter {font-size:3rem; text-shadow:0 0 5px rgba(27,27,27,0.3);}
.mission .enviBox .inner .midBox .tit {margin:0 0 15% 0; font-size:1.1rem; letter-spacing:0;}
.mission .enviBox .inner .midBox .txt p {font-size:1.2rem; line-height:30px; text-shadow:0 0 3px rgba(27,27,27,0.5);}

.mission .stnType01 {height:auto;}
.mission .stnType01 dl.infoBox {display:block; width:100%; min-width:100%; margin:0; padding:120px 20px 60px 20px;}
.mission .stnType01 dl.infoBox dt {margin:0 0 15px 0; font-size:24px; font-weight:500; text-align:left; line-height:32px;}
.mission .stnType01 dl.infoBox dd {font-size:16px; text-align:left; font-weight:400; line-height:26px; opacity:0.8;}
.mission .stnType01 dl.infoBox dd a {font-size:16px; font-weight:500;}
.mission .stnType01 dl.infoBox dd a:after {position:absolute; top:8px; right:0;}
.mission .stnType01 .imgBox {position:relative; height:auto; background:none !important;}
.mission .stnType01 .imgBox img.img_mo {display:block; width:100%;}

.mission .stnType02 {height:auto;}
.mission .stnType02 dl.infoBox {display:block; width:100%; min-width:100%; margin:0; padding:120px 20px 60px 20px;}
.mission .stnType02 dl.infoBox dt {margin:0 0 15px 0; font-size:24px; font-weight:500; text-align:left; line-height:32px;}
.mission .stnType02 dl.infoBox dd {font-size:16px; font-weight:400; text-align:left; line-height:26px; opacity:0.8;}
.mission .stnType02 dl.infoBox dd a {font-size:16px; font-weight:500;}
.mission .stnType02 dl.infoBox dd a:after {position:absolute; top:8px; right:0;}
.mission .stnType02 .imgBox {position:relative; height:auto; background:none !important;}
.mission .stnType02 .imgBox img.img_mo {display:block; width:100%;}

.mission .stn_crew {padding:90px 0 0 0;}
.mission .stn_crew ul.item li {height:220px;}
.mission .stn_crew ul.item li:nth-child(1) {background:url(https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/img_mission_mo07.jpg) no-repeat right center/cover;}
.mission .stn_crew ul.item li:nth-child(2) {background:url(https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/img_mission_mo08.jpg) no-repeat right center/cover;}
.mission .stn_crew ul.item li:nth-child(3) {background:url(https://toun28.s3.ap-northeast-2.amazonaws.com/renew/mission/img_mission_mo09.jpg) no-repeat right center/cover;}
.mission .stn_crew ul.item li img {display:none;}
.mission .stn_crew dl.infoBox {display:block; width:100%; min-width:100%; margin:0; padding:30px 20px;}
.mission .stn_crew dl.infoBox dt {margin:0 0 15px 0; font-size:24px; font-weight:500; text-align:left; line-height:32px;}
.mission .stn_crew dl.infoBox dd a {display:block; font-size:16px; font-weight:500; text-align:left; line-height:20px;}
.mission .stn_crew dl.infoBox dd a:after {top:27px; width:12px; height:12px;}
.mission .stn_crew dl.infoBox dd a span {margin:5px 0 0 0; font-size:14px; font-weight:400;}

.mission .stn_msg {padding:100px 20px;}
.mission .stn_msg .tit {margin:0 0 120px 0; font-size:26px; line-height:34px;}
.mission .stn_msg .txt {margin:0 0 20px 0;}
.mission .stn_msg .txt img {width:100%; height:auto;}
.mission .stn_msg .name {font-size:16px;}
}