@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

body{font-family: "Pretendard", Roboto, "Noto Sans KR", "Malgun Gothic", sans-serif;}
table{width: 100%;
border-spacing: 0;
border-collapse: collapse;
display:table;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}

*, p{-ms-word-break: keep-all; word-break: keep-all;}


#container{margin: 101px 0 0 0; max-width:100%;}

.wrap{width: 100%; max-width:1200px; margin: 0 auto;}

#hd_wr {display: flex;justify-content: space-between;align-items: center;width: 100%;padding: 0px 0;box-sizing: border-box;}
#logo {order: 1; flex: 0 0 auto; }
#category {order: 2; flex: 1 0 auto;text-align: center;}
#category .menu_wr{float:none;}
#tnb {order: 3; flex: 0 0 auto; display: flex;}
#hd_btn {position: unset;top: 15px;right: 0;}


#hd_sch{background: rgba(0, 0, 0, 0.95);}


.btn_login {float: none; line-height: 45px;}
.tac{text-align: center;}

.other-btn{display: none;}
.lg_icon{display: flex; align-items: center; }

.flex{display: flex; align-items: center;}

h1,h2,h3,h4,h5,h6{letter-spacing: -1px;}
    
#main_products .tit{justify-content: space-between; margin: 100px 0 50px;}
#main_products .tit h3{font-size: clamp(20px, 2.3vw, 36px); font-weight: 300;}
#main_products .tit a{color: #777;}
#main_products .tit a span{font-weight: 200;}
#main_products{}
#main_products .con{}
#main_products .con .flex{justify-content: space-between; align-items: stretch;}
#main_products .article-box {display: flex;flex-direction: column;justify-content: space-between;}
#main_products .article-box .article{}
#main_products .article{text-align: center;}
/*
#main_products .article h4{font-size: clamp(20px, 2.3vw, 36px); margin-bottom: 10px; margin-top: 20px; font-weight: 600;} 
#main_products .article p{font-size: clamp(14px, 1.5vw, 24px); color: #777;}
*/


#main_products .products01{margin-bottom: 100px;}
#main_products .products02{margin-bottom: 100px;}



#main_bn .bn-img{min-height:750px; display: grid; }

#main_bn .swiper {width: 100%;height: 100%;}

#main_bn .control {display: flex;align-items: center;gap: 30px;margin-top: 30px;position: absolute;z-index: 999;width: 100%;max-width: 1200px;left: 50%;bottom: 20%;transform: translateX(-50%);}

#main_bn .swiper-button-next, 
#main_bn .swiper-button-prev {color: #000;position: relative;}

#main_bn .swiper-button-next:after,
#main_bn .swiper-button-prev:after {font-size: 16px;}

#main_bn .swiper-pagination {color: #666;position: relative;width: auto;font-size: 20px;margin-bottom: 7px;font-weight: 200;}
#main_bn .swiper-pagination-current{color: #666;}
#main_bn .swiper-pagination-total{color: #000; font-weight: 400;}



.register .dos_form > ul > li{display: flex;align-items: center; padding: 10px 0;}
.register .dos_form > ul > li > div:first-child{flex: 0 0 15%;}
.register .dos_form > ul > li > div{flex:1}


.dos_form{background: #fff; padding: 20px; margin: 20px 0;}
.dos_form label.label_name{font-size: 14px; display: block; margin-bottom: 5px; color: #202842; font-weight: 600;}
.dos_form .row{margin-bottom: 30px;}
.dos_form .row:last-child{margin-bottom: 0;}

.dos_form .zip {display: block;}
.dos_form .zip input {width: 100px;}
.dos_form .zip button{background: #000; color: #fff; border: 0; height: 45px; line-height: 45px;}

.dos_form input[type="text"]{width: 100%; border: 1px solid #d2d4d9; border-radius:5px; padding: 5px 15px; height: 45px; box-shadow:none}
.dos_form input[type="password"]{width: 100%; border: 1px solid #d2d4d9; border-radius:5px; padding: 5px 15px; height: 45px; box-shadow:none}
.dos_form input[type="email"]{width: 100%; border: 1px solid #d2d4d9; border-radius:5px; padding: 5px 15px; height: 45px; box-shadow:none}
.dos_form input[type="date"]{width: 100%; border: 1px solid #d2d4d9;border-radius:5px; padding: 5px 15px; height: 45px; box-shadow:none}
.dos_form input[type="tel"]{width: 100%; border: 1px solid #d2d4d9; border-radius:5px; padding: 5px 15px; height: 45px; box-shadow:none}
.dos_form input[type="number"]{width: 100%; border: 1px solid #d2d4d9; border-radius:5px; padding: 5px 15px; height: 45px; box-shadow:none}
.dos_form input[type="file"]{width: 100%; border: 1px solid #d2d4d9;border-radius:5px; padding: 5px 15px; height: 37px; margin-left: -3px; box-shadow:none}
.dos_form select{width: 100%; border: 1px solid #d2d4d9; border-radius:5px; padding: 5px 15px; height: 45px; box-shadow:none}
.dos_form textarea{width: 100%; border: 1px solid #d2d4d9;border-radius:5px; padding: 10px 10px; height: 150px;}
.dos_form .zip{display: flex; gap:5px}
.dos_form .zip input{flex:0 0 100px; }
.dos_form .zip button.btn_frmline{height: 45px !important; border-radius:5px; }
.dos_form .addr{margin-top: 5px;}
.dos_form .file-upload{display: flex; align-items: center;}
.dos_form .file-upload .material-symbols-outlined{background: #000; color: #fff; width: 40px; line-height: 37px; text-align: center;  z-index: 9; font-size: 20px;} 
.dos_form .RadioStyle {display: flex; flex-wrap: wrap; align-items: center; gap:20px; padding: 5px 0; }
.dos_form .RadioStyle .etc-input-box{display: flex; align-items: center; gap:5px; }
.dos_form .CheckboxStyle {display: flex; flex-wrap: wrap; align-items: center; gap:20px; padding: 5px 0; }
.dos_form .CheckboxStyle .etc-input-box{display: flex; align-items: center; gap:5px; }
.dos_form .frm_info{margin-top: 10px; font-size: 12px; color: #797e8f; display: block;}



header .hd_bg{background: rgb(255 255 255 / 90%);    backdrop-filter: blur(10px); position: absolute; top:101px; left: 0; width: 100%;  z-index: 99998; height: 0;  transition: all .3s;}
header .hd_bg.active{height: 310px; border-bottom: 1px solid #e1e1e1;} 


header nav a{color: #000;}
header nav > ul{display: flex; justify-content: center;}
header nav > ul > li {position: relative;}
header nav > ul > li > a{display: block; line-height: 100px; text-align: center; padding: 0 30px; font-size:18px;font-weight:500}
header nav > ul > li > ul{display: none; text-align: center; padding-top: 20px; position: absolute;top: 100px; width: 100%; min-height: 310px; z-index: 99999; }
header nav > ul > li > ul a{font-size: 16px; display: block; color: #000; padding: 10px 0; text-align: center; font-weight: 300; }
header nav > ul > li > ul a:hover{color: #000; font-weight: 400;}
header nav > ul > li > ul li.on a{color: #000; font-weight: 400;}
header nav > ul > li.active > a{font-weight: 600; color: #000;}
header nav > ul > li:after{content:""; position: absolute; display: block; width: 0%; height: 3px; background: #d71820; z-index: 999999;  transition: var(--transition-effect);}
header nav > ul > li:hover:after{width: 100%;}
header nav > ul > li:hover > a{color: #d71820;}
header nav > ul > li.on > a{color: #d71820;}



#sbn_side li{}
#main_bn ul li{min-height:750px}
#main_bn .bn-img{background-position:center; background-size: cover;}

#main_bn .bn-txt{padding: 0; font-size: 48px; font-weight: 400; letter-spacing: -1px;}
#main_bn .bn-txt b{font-weight: 600;}
#main_bn .bn-txt  a{display: inline-block;}

#main_bn .bn-txt .sub_link{display: flex; gap:20px; align-items: center; margin-top: 30px;}
#main_bn .bn-txt .sub_link small{font-size: 20px;}



.menu_wr li button{display: none;}


#sit_inf_open {margin: 100px 0 0;}

#review{margin: 20px;}
#review ul{display: grid;grid-template-columns: repeat(1, 1fr);gap: 20px;}
#review ul li > div {border: 1px solid #e1e1e1;padding: 20px;border-radius: 15px;}
#review .star{margin: 0 10px 10px;}
#review .con{margin: 0 10px;}
#review .con h2{font-size:18px}
#review .con .review_content{color: #777; margin: 10px 0; font-size: 14px; }
#review .con button{border: 0; background: none;}
#review .con .material-symbols-outlined{font-weight: 200;}
#review .con .review_content_btn button{display: flex;align-items: center; color: #185ad7; font-size: 12px;}
#review .con .thum{display: none;}
#review .con .thum a{display: block; width: 150px; height: 150px; overflow: hidden; border-radius:15px;}
#review .item{margin: 10px 0 0; background: #f9f9f9; padding: 10px; border-radius:15px;}
#review .item span{font-size: 14px;}
#review .item a{display: flex; gap:10px; align-items: center;}
#review .item i{display: grid; width: 50px; height: 50px; overflow: hidden; border-radius:50%; align-items: center; justify-content: center; border: 1px solid #e1e1e1;}
#review .item i img{min-height:50px;}
#review .item u{display: block; text-decoration: none; font-size: 12px; display: block; margin-top: 3px; color: #777;}

#review .wr_info{color: #999; margin: 20px 0 0;}

.review_content {min-height: 60px;max-height: 60px;line-height: 140%;overflow: hidden;transition: max-height 0.3s ease;}
.review_content.open {max-height: none;overflow: visible;}


.sps_reply{border-top: 1px dashed  #555;}
.sps_dl{display: flex;}

#container_title{text-align: left; padding: 20px 0px 50px; font-size: 40px; font-weight: 400;}





.map-info{}
.map-info dl{display: flex; gap:10px; margin: 20px 0; align-items: center; font-size: 16px;}
.map-info dl dt{font-weight: 500; flex: 0 0 auto; display: flex; align-items: center; gap:10px; width: 80px;}
.map-info dl dt:before{content:""; display: block; width: 3px; height: 12px; background: #d71820;}
.map-info dl dd{font-weight: 300; color: #555;}

#map{display: flex; gap:50px}
#map .section_address{display: none;}



#navigator {padding-top: 70px;}
#navigator .material-symbols-outlined { font-variation-settings: 'FILL' 1; font-size: 18px; line-height: normal;}
#navigator a{color: #777; font-size: 14px;}
#navigator ul{display: flex; align-items: center; }
#navigator ul li{display: flex; align-items: center;}
#navigator ul li:after{content:""; width: 1px; height: 10px; background: #ccc; display: block; margin: 0 10px;}
#navigator ul li:last-child:after{display: none;}


#ft .ft_wr > ul{display: flex; gap:50px; font-size: 14px;}
#ft .ft_wr .copy-info span{display: block; margin-bottom: 10px; color: #ccc; font-weight: 300;}
#ft .ft_wr .copy-info .ft-link{margin-bottom: 30px; margin-top: 10px;}
#ft .ft_wr .copy-info .ft-link ul{display: flex;}
#ft .ft_wr .copy-info .ft-link ul li{display: flex;  align-items: center;}
#ft .ft_wr .copy-info .ft-link ul li:after{content:""; display: block; width: 1px; height: 10px; background: #999; margin: 0 20px;}
#ft .ft_wr .copy-info .ft-link ul li:last-child:after{display: none;}
#ft .ft_wr .copy-info .ft-link a{color: #fff; font-size: 16px;}

#ft .ft_wr .cc-info{margin-left: auto; margin-top: 40px;}
#ft .ft_wr .cc-info p{font-size: 40px; color: #fff; font-weight: 500; text-align: right;}
#ft .ft_wr .cc-info dl {display: flex; color: #fff; margin: 10px 0;}
#ft .ft_wr .cc-info dl dt{width: 170px;}

.ft_wr ul:after{display: none;}




.head_detail{max-width:900px; margin: 50px auto;}
.head_detail h4{font-size: 19px; margin-bottom: 5px;}
.head_detail p{color: #777;}
.head_detail table{width: 100%; margin: 10px 0; font-size: 13px; border-top: 2px solid #000;}

.head_detail table th{text-align: center;}
.head_detail table th, .head_detail table td{border:1px solid #e1e1e1; padding: 10px;} 
.head_detail table td{width: 33%; text-align: center;}
.head_detail table td:nth-child(2){text-align: center;}
.head_detail table td:last-child{text-align: center;}
.head_detail table.recycle td:last-child{text-align: center;}
.head_detail table td span{display: flex; gap:5px;align-items: center; justify-content: center}
.head_detail table td i{width: 70px; display: block;}



#sit_ex h3{font-size: 19px; margin-bottom: 5px;}
#sit_dvex h3 {font-size: 19px; margin-bottom: 5px;}

.sit_ex_custom{font-size: 14px; color: #222;}
.sit_ex_custom > p{color: #777;}
.sit_ex_custom .baesong{margin-top: 40px;}
.sit_ex_custom .baesong dl{display: flex; margin: 10px 0; }
.sit_ex_custom .baesong dl dt{font-weight: 300; width: 100px;}
.sit_ex_custom .baesong dl dd{font-weight: 500;}
.sit_ex_custom div{margin: 20px 0; border-bottom: 1px solid #e1e1e1; padding-bottom: 20px;}
.sit_ex_custom div:last-child{border: 0;}
.sit_ex_custom .txt dt{font-weight: 500; font-size: 16px; margin-bottom: 5px;}
.sit_ex_custom .txt dd{font-weight: 300; color: #555;}
.sit_ex_custom ul{margin-top: 20px;}
.sit_ex_custom ul li{margin-top: 10px; color: #555;}


.sit_ex_custom2{font-size: 14px; color: #222;}
.sit_ex_custom2 > p{color: #777;}
.sit_ex_custom2 .baesong{margin-top: 40px; -ms-word-break: keep-all;word-break: keep-all;}
.sit_ex_custom2 .baesong dl{ margin: 20px 0; }
.sit_ex_custom2 .baesong dl dt:before{content:""; width: 4px; height: 4px; background: #000; border-radius:50%; display: block;}
.sit_ex_custom2 .baesong dl dt{font-weight: 500; display: flex; align-items: center; gap:5px}
.sit_ex_custom2 .baesong dl dd{font-weight: 400; padding-left: 10px; margin-top: 5px; color: #555;}
.sit_ex_custom2 div{margin: 20px 0; border-bottom: 1px solid #e1e1e1; padding-bottom: 20px;}
.sit_ex_custom2 div:last-child{border: 0;}
.sit_ex_custom2 .txt dt{font-weight: 500; font-size: 16px; margin-bottom: 5px;}
.sit_ex_custom2 .txt dd{font-weight: 300; color: #555;}
.sit_ex_custom2 ul{margin-top: 20px;}
.sit_ex_custom2 ul li{margin-top: 10px; color: #555;}




a.btn_b02, .btn_b02{background: #d71820;}

#sct_wrap{display: grid; grid-template-columns: repeat(3, 1fr)}
#sct_wrap li{width: auto !important; float:none}
.sct_10 .sct_li .sct_img a{display: block;text-align: center;}
.sct_10 .sct_li .sct_img a img{max-height:270px; width: auto; max-width:100%;}

#SubPage{padding: 50px 0 0px;}


.business {margin: 0px 0 200px;}




.competitiveness .sec01{background: #f9f9f9; padding: 100px 0;}
.competitiveness .sec01 p b{color: #CD2B2B;}
.competitiveness .exp ul{display: grid; grid-template-columns: repeat(2, 1fr); gap:20px}
.competitiveness .exp ul li{border-top: 3px solid #D71820; display: flex; justify-content: space-between; padding: 20px; background: #fff; align-items: center;}
.competitiveness .exp ul li div:first-child{padding: 30px;}
.competitiveness .exp ul li h5{font-size: clamp(18px, 2vw, 28px); color: #000; margin-bottom: 10px;}
.competitiveness .exp ul li p{color: #666; font-size: 14px; line-height: 140%;}
.competitiveness .tit {text-align: center; position: relative; margin: 0 0 30px;}
.competitiveness .tit p{font-size: clamp(20px, 2.3vw, 36px); }
.competitiveness .tit p b{font-size: clamp(26px, 3vw, 46px); display: block;}
.competitiveness .tit .flex{position: absolute; right:0; display: flex; gap:20px; top: 0;}
.competitiveness .tit .flex span{display: grid; width: 100px; height: 100px; text-align: center; background: #D71820; border-radius:100%; color: #fff;    align-items:center; align-content: center;}
.competitiveness .tit .flex span i{font-style: normal; display: block; }
.competitiveness .tit .flex span i{font-style: normal; display: block; }
.competitiveness .tit .flex span b{display: block; font-size: clamp(16px, 2vw, 30px); }


.competitiveness .sec02{padding: 100px 0;}
.competitiveness .exp2 ul{}
.competitiveness .exp2 ul li{display: flex; gap:30px; margin: 0 0 50px;} 
.competitiveness .exp2 ul li h5{font-size: clamp(18px, 2.5vw, 30px); color: #000; margin-bottom: 10px;}
.competitiveness .exp2 ul li h5 span{display: block; color: #D71820;}
.competitiveness .exp2 ul li p{color: #666; font-size: clamp(13px, 1.3vw, 16px); line-height: 140%;}
.competitiveness .exp2 ul li .txt{padding: 50px; flex-grow: 1;}
.competitiveness .exp2 ul li > div{}
.competitiveness .exp2 ul li:nth-child(even) {flex-direction: row-reverse;}


.competitiveness .sec03{background: url('/img/sub/competitiveness_sec03_bg.png'); background-size:cover; padding: 100px 0;}
.competitiveness .sec03 ul{display: flex; gap:20px; justify-content: center;}
.competitiveness .sec03 ul li{}
.competitiveness .sec03 ul{margin-bottom: 50px;}
.competitiveness .sec03 .cont p{font-size: clamp(13px, 1.3vw, 16px); color: #666;}



.board.wrap{margin-bottom: 100px;}
.sub.wrap{margin-bottom: 100px;}






#my_wrap{display: flex; margin-top: 150px;}
#my_wrap .grid-left{flex: 0 0 200px}
#my_wrap .grid-right{flex: 1}


#my_menu > div{margin-bottom: 30px;}
#my_menu h4{font-size: 25px; font-weight: 600; margin-bottom: 10px;}
#my_menu ul li a{display: block; line-height: 35px; margin: 5px 0; padding: 0px; font-size: 15px; color: #777;}
#my_menu ul li:hover a{color: #d71820;}
#my_menu ul li.on a{color: #d71820;}


.nice-select{float:none !important; height: 45px !important;}






.order-filter-form { margin-bottom:15px; }

.order-list { list-style:none; padding:0; }
.order-list li { display:flex; padding:10px 0; border-bottom:1px solid #eee; align-items: center; gap:10px}

.inquiry_status{background: #000; line-height: 30px; padding: 0 5px; border-radius:5px; color: #fff;}
.inquiry_status.order{background: #49b775;}
.inquiry_status.paid{background: #ff9800;}
.inquiry_status.preparing{background: #2196f3;}
.inquiry_status.shipping{background: #7c57ad;}
.inquiry_status.shipped{background: #333;}


.inquiry_idtime { width:150px; }
.inquiry_name { flex:1; }
.inquiry_status { width:120px; text-align:center; }
.empty { text-align:center; color:#888; padding:20px 0; }

.inquiry_name .item-name{display: block;}
.inquiry_name .item-option{display: block; color: #555;}

.od-status .order-status-tabs{display: flex; padding: 30px 0; background: #333;}
.od-status .order-status-tabs a{ color: #999;}
.od-status .order-status-tabs li{border-right: 1px solid #555; flex:1; padding:10px 30px; }
.od-status .order-status-tabs li i{font-style: normal; font-size: 25px; font-weight: 300; display: block; margin-top: 10px;}
.od-status .order-status-tabs li:last-child{border: 0;}
.od-status .order-status-tabs li.active a{color: #fff;}
.od-status .order-status-tabs li.active i{font-weight: 600;}

.status-date .flex{display: flex; gap:5px}
.status-date .flex > li{flex:1}
.status-date .flex > li:nth-child(3):before{content:"~"; display: block; margin-right: 5px;}
.status-date .flex > li:last-child{flex:0 0  150px}
.status-date button{display: block; width: 100%; background: #d71820; color: #fff; border: 0; padding: 0 20px; line-height: 45px; border-radius:5px;}




#stv_ul{display: grid;gap: 2vw;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
#stv_ul li .prd_img{border: 1px solid #e5e5e5;}
#stv_ul li p{margin-top: 10px; font-size: 15px;}
#stv_ul li i {display: block;font-style: normal;font-size: 20px;font-weight: 600;letter-spacing: -1px;}




#wish_li {display: grid;gap: 2vw;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
#wish_li > li{max-width:300px;}
#wish_li .wish_img{border: 1px solid #e1e1e1;}
#wish_li .wish_info{padding: 10px;}
#wish_li .wish_info a{display: block; font-size: 17px;}
#wish_li .wish_info span{display: block; margin: 5px 0;}
#wish_li .wish_info .info_price{display: block; font-size: 20px; font-weight: 600; letter-spacing: -1px;}
#wish_li span.wish_del{display: inline-block; border: 1px solid #e1e1e1; border-radius:5px; line-height: 30px; padding: 0 8px;}






#sod_addr .mod_address {display: block;width: 32%;text-align: center;float: left;margin-right: 1%;border: 1px solid #aaa;background: none;color: #888;padding: 0 5px;height: 30px;line-height: 28px;vertical-align: middle;}
#sod_addr .addr_title{padding: 10px 10px;}

.mbskin{width: 100%; max-width:400px; margin: 30px auto !important;}

#point_ul .point_date{font-style: normal; color: #999;}


#scp_list ul {display: grid;gap: 2vw;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
#scp_list li{border: 1px solid #ccc; border-radius:30px; padding: 30px; text-align: center;}

#scp_list .cou_tit{font-size: 17px;}
#scp_list .cou_pri{font-size: 30px; font-weight: 600; letter-spacing: -1px; display: block; margin: 10px 0;}
#scp_list .cou_target{display: block; margin-bottom: 20px;}




.manual .ssp01 h4{font-size: 40px; margin-bottom: 10px;}
.manual .ssp01 ul {display: grid;gap: 2vw;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
.manual .ssp01 ul li {position: relative;}
.manual .ssp01 ul li i{position: absolute; width: 40px; height: 40px; display: grid; background: #D71820; color: #fff; align-items: center; font-style: normal; font-size: 20px;}
.manual .ssp01 ul li p{margin: 20px 0 0; font-size: 17px; padding: 0 20px; -ms-word-break: keep-all; word-break:  keep-all; line-height: 140%; color: #444;}
.manual .ssp01 .s-txt{margin-top: 50px;}
.manual .ssp01 .s-txt p {display: flex;background: #f5f5f5;padding: 30px;align-items: center;justify-content: center;gap: 10px; font-size: 17px; color: #444;}


.mt100{margin-top: 100px;}
.bdt{border-top: 1px solid #ccc;}
.pt100{padding-top: 100px;}


.certificate .grid{display: grid; grid-template-columns: repeat(4, 1fr); gap:50px;}
.certificate .grid li{text-align: center; margin-bottom: 50px;}
.certificate .grid li p{margin-top: 10px; font-size: 16px;}

.certificate .ceriti-box{margin-bottom: 100px;}
.certificate .ceriti-box h3{font-size: clamp(17px, 2vw, 25px); display: flex; gap:10px; align-items: center; margin-bottom: 10px;} 
.certificate .ceriti-box h3:before{content:""; display: block; width: 3px; height: 20px; background: #D71820;}




.sv-que{text-align: center;}
.sv-que h2{font-size: 32px; font-weight: 300; margin-bottom: 30px; color: #111;}
.sv-que p{font-size: 22px; font-weight: 300; color: #333; line-height: 140%;}

#survey .step-container{}
#survey .select-box{display: flex; gap:100px; justify-content: center;}

#survey .select-box a{display: block; text-align: center;}
#survey .select-box a .option-title{font-size:20px; font-weight: 300;}
#survey .select-box a span{display: grid; width: 200px; height: 50px; background: #000; color: #fff; justify-content: center; align-items: center; margin: 20px 0; transition:all 0.3s;}

#survey .select-box a:first-child span{background: #9F2227;}
#survey .select-box a span:hover{box-shadow:0px 15px 20px 0px rgb(0 0 0 / 50%); border: 1px solid rgb(255 255 255 / 10%); font-size: 16px;}

#survey .select-btn-box{max-width:300px; margin: 0 auto;}
#survey .select-btn-box a{display: flex; border: 1px solid #e1e1e1; line-height: 50px; align-items: center; padding: 0 20px; gap:10px; margin-bottom: 20px; font-size: 16px; transition:all 0.3s;}
#survey .select-btn-box a i{display: block; width: 10px; height: 10px; border: 1px solid #555; border-radius:50%; transition:all 0.3s;}
#survey .select-btn-box a:hover{box-shadow:0px 10px 15px 0px rgb(0 0 0 / 20%); border: 1px solid rgb(0 0 0 / 100%);}
#survey .select-btn-box a:hover i{border: 1px solid #000; background: #000;}

#survey .nav-buttons{max-width:300px; margin: 50px auto 0;}
#survey .nav-buttons a{display: flex; align-items: center; gap: 5px; color: #666; font-weight: 300;}

#sit_ov_wrap {margin: 50px auto 20px;}

.start-flex{display: flex; justify-content: space-between; height: 100%;}
.start-flex .sv-que{background: #f9f8ee;  display: grid; align-content: center;   flex: 0 0 45%;}
.start-flex .step-container{background: #edebe7; padding: 150px 0;   flex: 0 0 55%;}


.sv-bottom{margin-top: 20px;}
.sv-bottom .product-info > ul{display: flex; justify-content: center;}
.sv-bottom .product-info li a{display: block;}
.sv-bottom .product-info li .sct_img{border: 1px solid #e1e1e1; max-width:400px;}
.sv-bottom .product-info li .txt_wr{padding: 10px 0;}
.sv-bottom .product-info li .sct_txt {border-bottom: 1px solid #e9e9e9; margin-bottom: 10px;}
.sv-bottom .product-info li .sct_txt a{font-size: 15px; margin: 10px 0; }
.sv-bottom .product-info li .sct_basic{color: #777;}
.sv-bottom .product-info li .sct_cost{color: #000; font-weight: 600; margin-top: 10px;}


.bottom-info{border-top: 1px solid #e1e1e1; margin: 50px 0; padding: 30px; text-align: left; display: flex; justify-content: space-between;}
.bottom-info .tip{}
.bottom-info .tip h5{ font-size: 20px; font-weight: 600;}
.bottom-info .tip ul{margin: 10px 0;}
.bottom-info .tip ul li{margin: 5px 0; display: flex; align-items: center; gap:10px; font-size: 15px; color: #333;}
.bottom-info .tip ul li:before{content:""; display: block; width: 5px; height: 5px; background: #555; border-radius:100%;}
.bottom-info .share-btn a{display: flex; border: 1px solid #e1e1e1; line-height: 40px; align-items: center; padding: 0 20px; gap:10px; margin-bottom: 10px; font-size: 13px; transition:all 0.3s;}
.bottom-info .share-btn a:hover{box-shadow:0px 10px 15px 0px rgb(0 0 0 / 20%); border: 1px solid rgb(0 0 0 / 100%);}

.back-btn {margin-top: 50px; margin-bottom: 50px; display: flex; align-items: center; gap:50px;justify-content: center}
.back-btn a{display: flex; font-size: 12px; align-items: center; color: #777;}




#guest_privacy{max-height:400px; overflow: auto; text-align: left; margin-bottom: 20px;}

#guest_privacy .policymenu{overflow: auto;}


.set-itms li{display: flex;justify-content: space-between;}
.set-itms li span{display: block; margin: 5px 0;}
.set-itms li span.price{color: #555;}

.li_op_wr .sod_extra_fields{margin-top: 10px;}
.li_op_wr .sod_extra_fields li{display: flex; gap:10px; margin: 5px 0;}
.li_op_wr .sod_extra_fields li span{display: block;}
.li_op_wr .sod_extra_fields li span.price{color: #555;}




.sod_list .li_name {padding: 0;}





















i{font-style: normal;}
#main_banner_dos{margin-top: 150px;}
#main_banner_dos .slide-box{display: flex; justify-content: space-between; gap:30px;}
#main_banner_dos .slide-box > div{}
#main_banner_dos .slide-box .txt{font-size: 40px; letter-spacing: -1.5px; -ms-word-break: keep-all;word-break: keep-all;}
#main_banner_dos .slide-box .txt span{display: block;}
#main_banner_dos .slide-box .txt u {text-decoration: none;border-bottom: 10px solid #d1e4f7;line-height: 30%;display: inline-block;}
#main_banner_dos .slide-box .txt u:first-child{border-bottom: 10px solid #f7d1d2;}
#main_banner_dos .slide-box .txt i{width: 70px; height: 70px; border-radius:100%; display: grid; background: #d71820; color: #fff; font-size: 15px; justify-content: center; align-items: center; position: relative; float:right}
#main_banner_dos .slide-box .txt i:before{content:""; display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; border-style: solid; border-width: 12px 12px 0px 0px; border-color: #d71820 transparent transparent transparent;}
#main_banner_dos .slide-box .txt b{display: block;}

#main_banner_dos .slide-box .txt .control{display: flex; font-size: 15px; align-items: center; gap:20px; clear:both; margin-top: 30px;}
#main_banner_dos .slide-box .txt .control div span{font-size: 20px;}
#main_banner_dos .slide-box .txt .control .paging {}
#main_banner_dos .slide-box .txt .control .paging b{display: inline-block; margin-right: 10px;}
#main_banner_dos .slide-box .txt .control .paging span{text-decoration: none; margin-left: 10px; font-size: 15px;}
#main_banner_dos .slide-box .img{overflow: hidden; border-bottom-left-radius: 150px; max-width:750px}

/* 슬라이드 컨테이너 */
#main_banner_dos .wrap {
    position: relative;
    min-height: 750px; /* 최소 높이 설정으로 깜빡임 방지 */
}

/* 슬라이드 개별 제어 */
#main_banner_dos .slide-box {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), 
                visibility 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#main_banner_dos .slide-box.active {
    opacity: 1;
    visibility: visible;
}

/* 텍스트 자연스러운 애니메이션 */
#main_banner_dos .slide-box .txt {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0s;
}

#main_banner_dos .slide-box.active .txt {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0.3s;
}

/* 텍스트 요소들 개별 애니메이션 */
#main_banner_dos .slide-box .txt span {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
#main_banner_dos .slide-box .txt em {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
	display: block;
	font-style: normal;
	font-size: 20px;
	margin-bottom: 10px;
}

#main_banner_dos .slide-box.active .txt em{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}


#main_banner_dos .slide-box.active .txt span:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

#main_banner_dos .slide-box.active .txt span:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}

#main_banner_dos .slide-box.active .txt span:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.9s;
}

/* 컨트롤 버튼 애니메이션 */
#main_banner_dos .slide-box .txt .control {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#main_banner_dos .slide-box.active .txt .control {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.1s;
}

/* 이미지 자연스러운 애니메이션 */
#main_banner_dos .slide-box .img {
    opacity: 0;
    transform: translateX(80px) scale(0.9);
    transition: all 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0s;
}

#main_banner_dos .slide-box.active .img {
    opacity: 1;
    transform: translateX(0) scale(1);
    transition-delay: 0.6s;
}

#main_banner_dos .slide-box .img img {
    transform: scale(1.1);
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#main_banner_dos .slide-box.active .img img {
    transform: scale(1);
    transition-delay: 0.8s;
}

/* 컨트롤 버튼 개선된 스타일 */
#main_banner_dos .slide-box .txt .control div {
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

#main_banner_dos .slide-box .txt .control div:hover {
    background: rgba(215, 24, 32, 0.1);
    transform: scale(1.1);
}

#main_banner_dos .slide-box .txt .control div:active {
    transform: scale(0.95);
}

/* 페이징 스타일 개선 */
#main_banner_dos .slide-box .txt .control .paging {
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    transition: all 0.3s ease;
}

/* 슬라이드 전환 시 부드러운 효과 */
#main_banner_dos .slide-box.exiting {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-30px);
    transition: all 0.6s cubic-bezier(0.55, 0, 0.45, 1);
}

#main_banner_dos .slide-box.entering {
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
}

/* 미세한 움직임을 위한 키프레임 */
@keyframes subtleFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

#main_banner_dos .slide-box.active .txt i {
    animation: subtleFloat 3s ease-in-out infinite;
}

/* 로딩 상태 */
#main_banner_dos .slide-box.loading .txt,
#main_banner_dos .slide-box.loading .img {
    opacity: 0.3;
    filter: blur(2px);
}






#main_products .article i{display: block; }
#main_products .article a{display: block; position: relative; overflow: hidden; border-bottom-right-radius: 50px;}
#main_products .article .txt{position: absolute; bottom: 0; left: 0; z-index: 99; width: 100%; padding: 100px 25px 25px; color: #fff; text-align: left;
background: #000; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 50%);}
#main_products .article .txt h4{font-size: 30px; margin-bottom: 5px;}
#main_products .article p{color: #fff; font-size: 16px;}





.mTabmenu .swiper-slide p{background: #f5f5f5; text-align: center; line-height: 50px; font-size: 16px; border-radius:5px;}
.mTabmenu .swiper-slide-thumb-active p{background: #000; color: #fff;}
.mTabCon .swiper-slide{background: #fff;}

.manual-ongi .tip{padding: 20px; font-size: 15px;}
.manual-ongi .tip i{display: inline-block; background: #000; color: #fff; border-radius:3px; line-height: 20px; padding: 0 5px; font-style: normal; margin-right: 5px;}

.manual-ongi .tip1{padding: 20px; font-size: 15px; background: #f5f5f5; margin: 30px 0; text-align: center;}
.manual-ongi .tip1 p {background: #777;padding: 10px 15px;border-radius: 60px;color: #fff;width: 120px;text-align: center;margin: 10px auto;}
.manual-ongi .tip1 .txt{font-style: normal; font-size: 16px;}


.manual-ongi .tip3{padding: 20px; font-size: 15px; background: #f5f5f5; margin: 30px 0; text-align: center;}
.manual-ongi .tip3 p {background: #777;padding: 10px 15px;border-radius: 60px;color: #fff;width: 120px;text-align: center;margin: 40px auto 10px;}
.manual-ongi .tip3 .txt{font-style: normal; font-size: 16px;}



.manual-ongi .inner {margin: 20px 0 50px;padding: 20px;border: 1px solid #e5e5e5;border-radius: 10px;}
.manual-ongi .inner h4{font-size: 25px; margin-bottom: 10px;}
.manual-ongi .inner ul{display: grid;gap: 2vw;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
.manual-ongi .inner ul li{position: relative;}
.manual-ongi .inner ul li p {font-size: 17px;margin: 5px;font-weight: 300; }
.manual-ongi .inner ul li small{margin-left: 5px; display: block; color: #e94040; font-size: 13px;}
.manual-ongi .inner ul li span {position: absolute;width: 30px;height: 30px;display: grid;background: #D71820;color: #fff;align-items: center;font-style: normal;font-size: 15px;justify-content: center;z-index: 999;border-radius: 5px;left: 10px;top: 10px;}
.manual-ongi .import {display: flex;padding: 20px 20px;align-items: center;justify-content: center;gap: 10px;font-size: 20px;color: #fff;
background: #ff0000;
background: linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(166, 20, 20, 1) 100%);
border-radius:40px;
}
.manual-ongi .import span{display: none;}
.roll_wrap {position: relative;height: 250px;}
.roll_item {position: absolute;top: 0;left: 0;width: 100%;opacity: 0;transition: opacity 0.5s ease;}
.roll_item.show {opacity: 1;}
.roll_navi {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 5px;}
.roll_btns {width: 10px;height: 10px;border-radius: 50%;border: none;background: #ccc;cursor: pointer;}
.roll_btns.active {background: #333;}





#sit_ov_wrap #sit_pvi{width: 60%;}
#sit_ov_wrap #sit_ov{width: 40%;}
.mySwiper33{margin-top: 5px;}
.mySwiper33 .swiper-slide{width: auto !important; margin: 5px 0 0 0;}
.swiper-slide-thumb-active{border: 1px solid red;}
.mySwiper44 .swiper-slide{border: 1px solid #e1e1e1; text-align: center; background: #111;}

.import {width: 100%; max-width:600px; margin: 0 auto;}
.import .imp-hd{text-align: center; color: #000; margin: 0 auto; font-size: 25px; margin-bottom: 20px;}
.import .imp-hd span{color: #ff1111; font-size: 50px;}
.import li{padding: 15px; background: #f5f5f5; border-radius:5px; margin: 15px 0; font-size: 17px; font-weight: 500; display: flex; align-items: center; gap:10px; color: #000; -ms-word-break: keep-all; word-break: keep-all; line-height: 140%;}






.import li::before {content: counter(item);background: #ed2a2a; color: white;width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center; font-weight: bold; min-width:30px;}
.import ol{  counter-reset: item; /* 카운터를 'item'으로 초기화 */}
.import li {  counter-increment: item; /* 각 li가 'item' 카운터를 +1 증가 */}






#it_supply_1{text-transform:uppercase }

























@media (max-width: 720px){



	#logo {
		flex: 1 0 auto;
	}
	#hd_wr{padding: 0 10px;}

	#container {
	margin: 51px 0 0 0;
	}

	#main_bn .bn-txt {
	font-size: 20px;
	}

	#main_bn .bn-img {
	min-height: 220px;
	padding: 20px 20px;
	align-content: space-between;
	background-position: 70%;

	}





	#main_bn .bn-txt .sub_link {
	gap: 10px;
	margin-top: 20px;
	}
	#main_bn .bn-txt .sub_link  i{display: block; width: 35px;}

	#main_bn .bn-txt .sub_link small {
	font-size: 13px;
	}

	#main_bn .control{gap:20px; bottom: 10%;}


	#main_bn .swiper-pagination{font-size: 13px;}

	#main_products .tit {
		margin: 40px 0 10px;
	}
	#container > .wrap {
		padding: 0 20px;
	}

	header nav > ul{display: block;}
	header nav > ul > li > a{line-height: 50px; text-align: left;}
	header nav > ul > li > ul a{text-align: left;}
	header nav > ul > li.active{border-top: 3px solid #d71820;}
	header nav > ul > li.active > ul{display: block; position: relative; top: 0; padding-top: 0; min-height:auto;}


	.menu_wr {
			padding: 0;
			margin: 55px 0;
			border-top: 0px solid #eee;
		}

	header nav > ul > li.on > a{color: unset;}






	#container_title {
		padding: 5px 0px 10px;
		font-size: 30px;
	}



	.competitiveness .tit .flex{position: relative;
		gap: 5px;
		top: 10px;
		justify-content: center;

	}

	.competitiveness .tit .flex span {
		width: 70px;
		height: 70px;

	}

	.competitiveness .sec01 {
		padding: 20px 0;
	}

	.competitiveness .exp ul {
		grid-template-columns: repeat(1, 1fr);
		gap: 5px;
	}


	.competitiveness .exp ul li div p{
		-ms-word-break: keep-all;
		word-break: keep-all;
	}

	.competitiveness .exp ul li div:first-child {
		padding: 0px;
	}
	.competitiveness .exp ul li div:first-child br{
		display: none;
	}

	.competitiveness .exp ul li div:last-child {
		max-width: 70px;
	}

	.competitiveness .sec02 {
		padding: 10px 5px;
	}


	.competitiveness .exp2 ul li {
		gap: 0px;
		margin: 0 0 30px;
		flex-direction: column;
	}
	.competitiveness .exp2 ul li .txt {
		padding: 10px;
	}

	.competitiveness .exp2 ul li .txt br {
		display: none;
	}


	.competitiveness .exp2 ul li:nth-child(even) {
		flex-direction: column;
	}


	#ft .ft_wr > ul {
		display: block;
	}


	#ft .ft_wr .copy-info .ft-link ul {
		flex-wrap: wrap;
	}

	#ft .ft_wr .copy-info .ft-link a {
		font-size: 13px;
	}


	#ft .ft_wr .copy-info .ft-link ul li:after {
		margin: 0 5px;
	}

	#ft .ft_wr .cc-info p {
		font-size: 30px;
	}



	.certificate .grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}


	.certificate .grid li p {
		margin-top: 5px;
		font-size: 13px;
	}


#map {
    gap: 20px;
    flex-direction: column;
}


#daumRoughmapContainer1741783102104{width: 100% !important; height:250px}










.map-info dl {
    gap: 5px;
    font-size: 13px;
	margin: 10px 0;
}


#sct_wrap {
    grid-template-columns: repeat(1, 1fr);
}
.sct_10 {
    padding: 0 0px;
}

.sct_10 .sct_li{padding: 10px 0;}


.sct_10 .txt_wr {
    margin-top: 0px;
}
.sct_10 .sct_txt{margin-bottom: 0;}
.sct_10 .sct_basic {
    margin: 0px 0 5px;
    padding-top: 0px;
}


#sct_sortlst {
    padding: 10px 0px 0px;
}

#navigator {
    padding-top: 30px;
}



#sit_pvi, #sit_ov {
	padding: 0px;
}


.sit_pvi_thumb {
	margin: 0px 0;
}

.sit_pvi_thumb{display: flex;}
.sit_pvi_thumb a{margin: 0 5px;}

.bx-viewport{height: auto !important; min-height:200px; margin-bottom: 10px;}

#sit_ov{margin-top: 20px;}
#sit_star_sns {right: 0px; position: relative; text-align: right;}
#sit_btn_wish {width: 20px;}


#sit_tab .tab_con {
    padding: 20px 0;
}

#sit_tab .tab_tit li {
    padding: 0 10px;
}






    .buy_wr {
        max-height: 300px;
		padding: 10px 20px;
    }


.sit_option_wr {
    padding: 10px 0;
}


#my_wrap .grid-left {
        flex: 0 0 200px;
        position: fixed;
        background: #fff;
        display: block;
        left: -160px;
        z-index: 9999999;
        padding: 20px;
        width: 160px;
        top: 56px;
		transition:0.3s;
		border-right: 1px solid #e1e1e1;
		height: 100vh;
    }


#my_wrap .grid-left.active {
        left: 0px;

}



#sod_fin {
    margin: 0;
}

#my_wrap {
    margin-top: 20px;
}



#my_menu h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

#my_menu ul li a {
    line-height: 25px;
    font-size: 13px;
}




.order-list li {
    align-items: flex-start;
    flex-direction: column;
}


.od-status .order-status-tabs {
    padding: 10px 0;
    background: #333;
    flex-wrap: wrap;
}


.status-date .flex {
    flex-wrap: wrap;
}
#sod_v {
    margin: 0 0px;
}
.od-status .order-status-tabs li {
    flex: 1;
    padding: 5px 5px;
}
.od-status .order-status-tabs li a p{-ms-word-break: keep-all; word-break: keep-all; font-size: 11px;}
.od-status .order-status-tabs a {text-align: center;}
.od-status .order-status-tabs li i{font-size: 17px;}













}