@charset "utf-8";

/* CSS Document */
body,input,textarea,button,select{font-family:'Pretendard', sans-serif; color:#3c3835; font-weight:400; font-size:16px; letter-spacing: -.05rem; line-height: 1em;}

#container .inner {padding: 160px 10px;}
.inner {max-width: 1860px; padding:0 10px;}

.bg_video {position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; }
.bg_video::before {content: ''; display: block; width:100%; height:100%; position: absolute; background:rgba(0, 0, 0, 0.4);}
.bg_video_content {height: 100%; width: 100%; object-fit: cover; }
  

.w100 {width:100%;}

/* header */
#logo {margin:0; padding:0;}
.renew_hd {-webkit-transition: all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out -o-transition:all 0.3s ease-in-out; transition::all 0.3s ease-in-out;}
.renew_hd #hd_wrapper {display: flex; width:100%; justify-content: space-between; align-items: center; height:100px; max-width: none; padding:0;}
.renew_hd #hd_wrapper:after {display: none;}
.renew_hd #gnb:after {display: none;}
.renew_hd #gnb #menu > li {font-size:18px; font-weight: 600; padding:15px 57px; margin:0;}
.renew_hd #gnb #menu > li:before {display: none;}
.renew_hd #gnb #menu > li .subMenu {top:40px;}
.renew_hd #gnb #menu > li:nth-child(3) .subMenu {left:55px;}
.renew_hd #gnb #menu > li:nth-child(4) .subMenu {left:10px;}
.renew_hd .app_wrap {}
.renew_hd .app_wrap a {display: inline-block; background:#1f469e; color:#fff; font-weight: 600; padding:13px 24px; border-radius: 5px;}
.renew_hd .app_wrap a::after {content: ''; display: inline-block; width:16px; height:16px; background: url('/img/renew/icon_app.png') center no-repeat; margin-left:10px;}
.renew_hd .has_sub::after {content: ''; display: inline-block; width:13px; height:8px; background: url('/img/renew/gnb_arrow.png') center no-repeat; margin-left:10px;}
.renew_hd.on #gnb #menu > li a.has_sub::after {background: url('/img/renew/gnb_arrow_b.png') center no-repeat;}

/* 메인 비주얼 */
#container .main-swiper .swiper-slide.main01 {background:url('/img/renew/main01.jpg') center / cover no-repeat;}
#container .main-swiper .swiper-slide.main03 {background:url('/img/renew/main03.jpg') center / cover no-repeat;}
#container .main-swiper .swiper-slide.main04 {background:url('/img/renew/main04.jpg') center / cover no-repeat;}
#container .main-swiper .swiper-slide .title {font-size:70px; line-height: 80px; font-family:'Pretendard'; font-weight: 700; text-transform: uppercase ;}
#container .main-swiper .swiper-slide .txt {font-size:22px; line-height: 34px;}
#container .main-swiper .controller .visual-button-stop {background:url('/img/renew/main_visual_stop.png') center no-repeat; width:10px; height:15px; display: block;}
#container .main-swiper .controller .visual-button-play {background:url('/img/renew/main_visual_play.png') center no-repeat; width:10px; height:15px; display: none;}
#container .main-swiper .progress-bar {width: 527px; height: 1px; background: rgba(255,255,255,0.3); overflow: hidden;}
#container .main-swiper .progress-fill {width: 100%; height: 2px; background: white; animation: progress linear infinite;}
#container .main-swiper.paused .progress-fill {animation-play-state: paused;}


@keyframes progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

#container .main-swiper .controller {height:auto; bottom:60px; display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap:30px;}
#container .main-swiper .fix-area {bottom:80px;}

.visual_link {}
.visual_link ul {display: flex; align-items: center; gap:110px;}
.visual_link ul > li {}
.visual_link ul > li > a {display: flex; align-items: center; gap:19px; color:#fff;}
.visual_link ul > li > a::before {content: ''; display: inline-block; width:58px; height:58px; background:url('/img/renew/main_visual_icon.png') center / cover no-repeat;}
.visual_link .tit > div {font-size:24px; font-weight: 700; line-height: 38px; margin-bottom:11px;}


/* main 해외배송비 계산 */
#main01 {padding-bottom:90px;}
#main01 .inner {display: flex; gap:50px; justify-content: space-between;}
#main01 .lft_wrap {max-width: 60%; flex: auto;}
#main01 .lft_wrap .txt_wrap {}
#main01 .lft_wrap .txt_wrap h2 {font-family: 'Pretendard', sans-serif; color:#222222; font-size:70px; line-height: 80px; font-weight: 700; word-break: keep-all;}
#main01 .lft_wrap .txt_wrap p {display: block; margin-top:110px; text-align: right; font-size:26px; line-height: 40px; word-break: keep-all;}
#main01 .lft_wrap .img_wrap {display: flex; gap:16px; margin-top:35px;}
#main01 .lft_wrap .img_wrap > * {flex:0 0 calc(25% - 12px);}
#main01 .lft_wrap .img_wrap .item01 .img {background:url('/img/renew/m01_bg01.png') center / cover no-repeat;}
#main01 .lft_wrap .img_wrap .item02 .img {background:url('/img/renew/m01_bg02.png') center / cover no-repeat;}
#main01 .lft_wrap .img_wrap .item03 .img {background:url('/img/renew/m01_bg03.png') center / cover no-repeat;}
#main01 .lft_wrap .img_wrap .item04 .img {background:url('/img/renew/m01_bg04.png') center / cover no-repeat;}
#main01 .lft_wrap .img_wrap .img {position: relative; border-radius: 10px; overflow: hidden; height:274px;}
#main01 .lft_wrap .img_wrap .img span {position: absolute; left:16px; bottom:20px; display: inline-block; font-size: 26px; color:#fff; line-height: 40px;}
#main01 .lft_wrap .img_wrap .txt {font-size:18px; line-height: 28px; margin-top:25px;}
#main01 .rgh_wrap {flex:0 0;}
#main01 .rgh_wrap .caul_contain {max-width:614px; width:100%; -webkit-box-shadow: 3px 3px 15px 5px rgba(102,114,125,0.3); box-shadow: 3px 3px 15px 5px rgba(102,114,125,0.3); border:4px solid #13529a; border-radius: 14px;}
#main01 .rgh_wrap .caul_contain .caul {padding:36px;}
#main01 .rgh_wrap h3 {font-family: 'Pretendard', sans-serif; background:#13529a; color:#fff; font-size:26px; font-weight: 700; padding:18px;}
#main01 .rgh_wrap h3::before {content: ''; display: inline-block; width:15px; height:16px; background:url('/img/renew/m01_icon.png') center no-repeat; margin-right:18px;}
#main01 .rgh_wrap .row {display: flex; align-items: center; border-bottom:1px solid #d9d9d9; padding:15px 33px 14px 0;}
#main01 .rgh_wrap .row .title {flex:0 0 115px; width: 115px; font-size:18px; font-weight: 500;}
#main01 .rgh_wrap .row .con {flex:auto;}
#main01 .rgh_wrap .row button {font-size:14px; padding:8px 14px; border-radius: 5px; background:#222222; color:#fff; border:none; outline: none;}
#main01 .rgh_wrap .row.info {display: flex; justify-content: space-between; align-items: center; border-bottom:1px solid #222222; padding-bottom:15px;}
#main01 .rgh_wrap .row.info > span {}
#main01 .rgh_wrap .row.info > span.update {font-size:14px; text-align: right; color:#999999;}
#main01 .rgh_wrap .row .con > ul {display: flex; gap:5px;}
#main01 .rgh_wrap .row .con > ul > li {flex:0 0 calc(33.33333% - 3px);}
#main01 .rgh_wrap .row .con .in_row {display: flex; gap:4px;}
#main01 .rgh_wrap .row .con .weight {gap:8px; margin-bottom:5px;}
#main01 .rgh_wrap .row .con .volume {gap:10px; margin-bottom:5px;}
#main01 .rgh_wrap .row .con .volume > div {flex:0 0 calc(33.33333% - 3px); display: flex; align-items: center; gap:10px;}
#main01 .rgh_wrap .row .con .volume > div:last-child {flex:0 0 calc(33.333% - 15px);}
#main01 .rgh_wrap .row .con .volume input {width:100%;}
#main01 .rgh_wrap .notice {font-size:14px; line-height: 20px; color:#999999; margin-top:37px;}

#main01 .rgh_wrap input[type="text"] {height:51px; border-radius: 5px; outline: none; border:1px solid #5c5c5c; padding:0 20px;}
#main01 .rgh_wrap input[type="radio"] {display:none;}
#main01 .rgh_wrap input[type="radio"] + label {color:rgba(34, 34, 34, .5); font-size:18px; display:inline-block; border:1px solid rgba(94, 94, 94, 0.2); cursor:pointer; padding:16px 0; width:100%; border-radius: 5px; text-align: center;}
#main01 .rgh_wrap input[type="radio"]:checked + label {border:1px solid #5c5c5c; color:#222222;}
#main01 .rgh_wrap select {height:51px; border-radius: 5px; padding:0 40px 0 20px; background: url('/img/renew/icon_select.png') no-repeat calc(100% - 15px) 50% #fff;	-webkit-appearance: none; -moz-appearance: none; appearance: none;}
#main01 .rgh_wrap select:focus-visible,
#main01 .rgh_wrap input:focus-visible {outline:none; border:1px solid #5c5c5c; }
#main01 .rgh_wrap .btn_wrap {width:100%; text-align: center;}
#main01 .rgh_wrap .btn_wrap button {font-size:20px; font-weight: 700; color:#fff; background:#13529a; border-radius: 27px; margin-top:26px; border:none; outline: none; padding:15px 53px;}

#main01::after {content: 'Delivery to wordwide'; display: block; width:100%;  max-width: 1860px;  height:100px; font-size:6vw; line-height: 5vw; letter-spacing: -1.5px; color:#f3f3f3; font-weight: 700; text-transform: uppercase; padding:0 10px; margin:0 auto;}

/* 올해의 국민 브랜드 대상 */
#main02 {background:url(/img/renew/m02_bg.jpg) center / cover no-repeat;}
#main02 .contain {display: flex;}
#main02 .contain .lft_wrap {flex:0 0 39%; color:#fff;}
#main02 .contain .lft_wrap h2 {font-family:'Pretendard', sans-serif; font-size:70px; line-height: 80px; font-weight: 700;}
#main02 .contain .lft_wrap .txt_wrap {font-size:26px; margin-top:90px;}
#main02 .contain .lft_wrap .img_wrap {display: flex; gap:40px; align-items: center; margin-top:110px;}
#main02 .contain .lft_wrap .top_wrap {}
#main02 .contain .lft_wrap .bt_wrap {}
#main02 .contain .lft_wrap .bt_wrap > span {font-size:26px;}
#main02 .contain .lft_wrap .bt_wrap > p {font-size:20px; line-height: 30px; margin-top:38px;}
#main02 .contain .rgh_wrap {flex:0 0 61%}
#main02 .contain .rgh_wrap > ul {display: flex; flex-wrap: wrap; align-items: flex-start; gap:30px;}
#main02 .contain .rgh_wrap > ul > li {display: inline-block; border-radius: 10px; overflow: hidden;}
#main02 .contain .rgh_wrap > ul > li:nth-child(1) {flex:0 0 23.5%; height:20vw; background:url(/img/renew/m02_img01.jpg) center / cover no-repeat;}
#main02 .contain .rgh_wrap > ul > li:nth-child(2) {flex:0 0 calc(100% - 23.5% - 30px); height:20vw; background:url(/img/renew/m02_img02.jpg) center / cover no-repeat;}
#main02 .contain .rgh_wrap > ul > li:nth-child(3) {flex:0 0 calc(33.333% - 21px); height:16vw;}
#main02 .contain .rgh_wrap > ul > li:nth-child(4) {flex:0 0 calc(33.333% - 21px); height:16vw; background:url(/img/renew/m02_img04.jpg) center / cover no-repeat;}
#main02 .contain .rgh_wrap > ul > li:nth-child(5) {flex:0 0 calc(33.333% - 21px); height:16vw; background:url(/img/renew/m02_img05.jpg) center / cover no-repeat;}
#main02 .contain .rgh_wrap .m02_video {position: relative;}
/*#main02 .contain .rgh_wrap #m02_vi {position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); width:120%; height:304px; }*/
#main02 .contain .rgh_wrap #m02_vi[poster] {width:fit-content; height:304px; left: 50%; top: 50%; transform: translate(-50%, -50%); position: relative;}
#main02 .contain .rgh_wrap .m02_video_play {position: absolute; top:0; lefT:0; display: block; width:100%; height:100%; background:url('/img/renew/m02_video_play.png') center no-repeat;}
#main02 .contain .rgh_wrap .m02_video_play.on {display: none;}

/* 메인 03 premium service process */
#main03 {position: relative;}
#main03 .bg_video {z-index: 0;}
#main03 .inner {padding:160px 20px; z-index: 1; position: relative; color:#fff;}
#main03 .container h2 {font-family:'Pretendard', sans-serif; font-size:70px; font-weight: 700;}
#main03 .container p {font-size:26px; line-height: 40px; margin-top:80px;}
#main03 .container .grh_wrap {display: flex; gap:35px; margin-top:90px;}
#main03 .container .grh_wrap .graph {}
#main03 .container .grh_wrap .img_wrap {border-radius: 15px; overflow: hidden;}
#main03 .container .grh_wrap .img_wrap::after {content: ''; display: inline-block; width:15px; height:28px; background:url('/img/renew/m03_arrow.png') center no-repeat; margin-left:35px;}
#main03 .container .grh_wrap .graph:last-child .img_wrap::after {display: none;}
#main03 .container .grh_wrap .txt_wrap {}
#main03 .container .grh_wrap .txt_wrap .step {color:#1393ff; font-weight: 700; margin-top:25px;}
#main03 .container .grh_wrap .txt_wrap .tit {font-size:26px; margin-top:32px;}
#main03 .container .grh_wrap .txt_wrap .txt {font-size:18px; line-height: 28px; color:#a7b2c1; margin-top:32px;}

/* CONTACT US */
#contact {}
#contact .contain {display: flex; justify-content: space-between; align-items: center;}
#contact .contain .lft_wrap {flex:0 0 506px;}
#contact .lft_wrap h2 {font-family:'Pretendard', sans-serif; font-size:70px; font-weight: 700;}
#contact .lft_wrap .add_wrap {margin-top:80px; padding-bottom:30px; border-bottom:1px solid #d1d1d1;}
#contact .lft_wrap .add_wrap li {position: relative; font-size:20px; line-height: 30px; margin-bottom:20px; padding-left: 45px;}
#contact .lft_wrap .add_wrap li::before {content: ''; display: inline-block; vertical-align: middle; position: absolute; left:0; top:10px;}
#contact .lft_wrap .add_wrap .add::before {width:21px; height: 26px; background:url('/img/renew/icon_add.png') center no-repeat;}
#contact .lft_wrap .add_wrap .tel::before {width:21px; height:21px; background:url('/img/renew/icon_tel.png') center no-repeat;}
#contact .lft_wrap .add_wrap .mail::before {width:22px; height:17px;  background:url('/img/renew/icon_mail.png') center no-repeat;}
#contact .lft_wrap .bt_wrap {display: flex; justify-content: space-between; margin-top:45px;}
#contact .lft_wrap .time {}
#contact .lft_wrap .time span {font-size:18px; font-weight: 700;}
#contact .lft_wrap .time p {display: block; font-size:18px; line-height: 30px; margin-top:45px;}
#contact .lft_wrap .link {display: flex; gap:7px;  flex-direction: column;}
#contact .lft_wrap .link a {display: block; width:186px; height:60px; display: flex; justify-content: flex-start; gap:17px; align-items: center; border:1px solid #d3d3d3; border-radius: 30px; font-size:18px; padding:0 24px; }
#contact .lft_wrap .link .naver_map::before {content: ''; display: inline-block; width:30px; height:38px; background:url('/img/renew/icon_map_naver.png') center no-repeat;}
#contact .lft_wrap .link .kakao_map::before {content:''; display: inline-block; width:37px; height:37px; background:url('/img/renew/icon_map_kakao.png') center no-repeat;}
#contact .contain .rgh_wrap {flex:0 0 calc(100% - 506px); overflow: hidden; border-radius: 15px;}
#contact .root_daum_roughmap_landing {width:100%;}

/* footer */
footer {background:#090f1a; color:#878f9f; padding:110px 0;}
footer .fot_wrap {display: flex; justify-content: space-between; align-items: center;}
footer .fot_wrap .copy {font-size:18px; line-height: 30px;}
footer .fot_wrap .copy span {display: block;}
footer .fot_wrap .priv {display: flex; align-items: flex-start;  gap:60px;}
footer .fot_wrap .priv a {color:#fff; font-size:18px;}

/* quick menu*/
.quick_wrap {background:#13529a; position: fixed; right:0; bottom:0; border-radius: 13px 0 0 0; overflow: hidden; padding:18px 10px 11px 10px; z-index: 1;}
.quick_wrap > ul {display: flex; flex-direction: column; gap:30px;}
.quick_wrap > ul > li {}
.quick_wrap > ul > li a {color:#fff; font-size:14px; display: flex; flex-direction: column; align-items: center; gap:16px;}
.quick_wrap > ul > li.q01 .ico {width:24px; height:24px; background:url('/img/renew/q01_icon.png') center no-repeat;}
.quick_wrap > ul > li.q02 .ico {width:30px; height:21px; background:url('/img/renew/q02_icon.png') center no-repeat;}
.quick_wrap > ul > li.q03 .ico {width:21px; height:20px; background:url('/img/renew/q03_icon.png') center no-repeat;}

@media screen and (max-width: 1024px) {
	
	body, input, textarea, button, select {font-size:14px;}

	.inner {padding:0 20px;}
	
	/* 메인 비주얼 */	
	#container .main-swiper .swiper-slide .title {font-size:32px; letter-spacing: -1.5px;        line-height: 38px;}
	#container .main-swiper .swiper-slide .txt {font-size:18px; line-height: 20px;}
	.visual_link ul {align-items: flex-start; gap: 20px; flex-direction: column;}
	#container .main-swiper .swiper-slide .inner {height:670px;}
	.visual_link ul > li > a::before {width:35px; height:35px;}
	.visual_link .tit > div {font-size:18px; line-height: 18px;}
	.visual_link .tit > span {font-size:14px;}
	
	/* main 해외배송비 계산 */
	#main01 .inner {flex-direction: column; gap:50px;}
	#main01 .lft_wrap .txt_wrap h2 {font-size:40px; line-height: 46px;}
	#main01 .lft_wrap .txt_wrap p {font-size:18px; line-height: 20px;}
	#main01 .lft_wrap .img_wrap .img span {font-size:18px;}
	#main01 .lft_wrap .img_wrap .txt {font-size:16px; line-height: 20px;}
	
	#main01 .rgh_wrap h3 {font-size:20px;}
	#main01 .rgh_wrap .caul_contain {max-width: 100%; }
	#main01 .rgh_wrap .row .title {font-size:16px;}
	#main01 .rgh_wrap .notice {font-size:12px;}
	#main01 .rgh_wrap input[type="radio"] + label {font-size:14px;}
	#main01 .rgh_wrap .btn_wrap button {font-size:18px;}	
	
	#main01::after {font-size:11.2903vw; line-height:11vw; }
	
	/* 올해의 국민 브랜드 대상 */
	#main02 .contain {flex-direction: column;}
	#main02 .contain .lft_wrap h2 {font-size: 40px; line-height: 46px;}
	#main02 .contain .lft_wrap .txt_wrap {font-size: 18px; line-height: 20px; margin-top: 30px;}
	#main02 .contain .lft_wrap .bt_wrap > p {text-align: center; font-size:16px; line-height: 20px;}
	#main02 .contain .rgh_wrap {margin-top:20px;}
	#main02 img {width:100%;}
	#main02 .contain .rgh_wrap > ul {}
	#main02 .contain .rgh_wrap > ul > li:nth-child(1) {flex: 0 0 100% !important; width: fit-content; object-fit: cover; text-align: center;}
	#main02 .contain .rgh_wrap > ul > li:nth-child(1) img {width:auto;}
	#main02 .contain .rgh_wrap > ul > li:nth-child(2) {flex: 0 0 100% !important; width: fit-content; object-fit: cover;}
	#main02 .contain .rgh_wrap > ul > li:nth-child(3) {flex: 0 0 100% !important; width: fit-content; object-fit: cover;}
	#main02 .contain .rgh_wrap > ul > li:nth-child(4), 
	#main02 .contain .rgh_wrap > ul > li:nth-child(5) {flex: 0 0 46% !important; width: fit-content; object-fit: cover;}
	
	/* 메인 03 premium service process */        
	#main03 .inner {padding: 80px 15px;}
	#main03 .container h2 {font-size: 40px; line-height: 46px;}
	#main03 .container p  {font-size: 18px; line-height: 20px; margin-top: 30px;}
	#main02 .contain .lft_wrap .img_wrap {flex-direction: column;}
	#main03 .container .grh_wrap {flex-direction: column; align-items: center;}
	#main03 .container .grh_wrap .graph {position: relative; padding-bottom:50px;}
	#main03 .container .grh_wrap .img_wrap::after {transform: rotate(90deg) translate(0, -50%); position: absolute; bottom: 0; left: 20%;}
	#main03 .container .grh_wrap .txt_wrap {text-align: center;}
	#main03 .container .grh_wrap .txt_wrap .tit {margin-top:15px; font-size:18px;}
	#main03 .container .grh_wrap .txt_wrap .txt {margin-top:15px; font-size:14px; line-height: 20px;}
	
	/*	CONTACT US */
	#contact .contain {flex-direction: column; gap:20px;}
	#contact .contain .lft_wrap {flex:0 0 100%; width: 100%;}
	#contact .lft_wrap h2 {font-size: 40px; line-height: 46px;}
	#contact .lft_wrap .add_wrap {margin-top:30px;}
	#contact .lft_wrap .add_wrap li  {font-size: 18px; line-height: 20px; margin-top: 30px;}
	#contact .lft_wrap .bt_wrap {flex-direction: column; gap:20px;}
	#contact .contain .rgh_wrap {flex:0 0 100%; width: 100%;}
	
	/*	 footer */
	footer .fot_wrap {flex-direction: column; gap:50px;}
	footer .fot_wrap .copy {font-size:14px;}
	
}
@media screen and (max-width: 768px) {

	.inner {padding:0 20px;}
	
	/* main 해외배송비 계산 */
	#main01 .lft_wrap .img_wrap {flex-direction: column; gap:50px;}	
	#main01 .lft_wrap .img_wrap .img {height:200px;}
	#main01 .rgh_wrap .row {flex-direction: column; align-items: flex-start; padding:20px 0;}
	#main01 .rgh_wrap .row.info {padding-top:0;}
	#main01 .rgh_wrap .row .title {flex:0 0 25px; width: auto;}
	#main01 .rgh_wrap .caul_contain .caul {padding:20px;}
	#main01 .rgh_wrap .row .con {width:100%;}
	#main01 .rgh_wrap .row .con .weight {flex-direction: column;}
	#main01 .rgh_wrap input[type="text"] {padding:0 10px;}
	
	
}