@charset "UTF-8";

:root{
    --main-color:#e21e26
}

@media screen and (min-width:768px) 
{
.no-landscape
{
    display: none;
    visibility: hidden;
}

}
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation:portrait)
{
    .no-landscape
    {
        display: none;
        visibility: hidden;
        z-index: -9;
    }
     
}
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    .no-landscape {
   
    width: 100%;
    height: 100vh;
    position: fixed;
    top:0px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:rgba(0,0,0, 0.8);
    z-index: 9999;
    pointer-events: none;
    }
    .no-landscape  p
    {
        font-weight: calc(1rem + 5vw);
        color: white;
        font-weight: bold;
    }
    }

a {
    color: #333;
    text-decoration: none!important;
}

a:hover
{
    color: var(--main-color);
}

.en,.en * {font-family: 'Lato', sans-serif;}

/* float clear */

.floatClear {
    clear: both;
}
.allcenter
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

    
.sticked {
    position: fixed !important;    
    background-color: rgb(250,250,250,1);
	z-index:9999;
    left: 0px;
    top:0px;
    height: 100%;  
    max-height: 80px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border-bottom: 1px solid #eee;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    max-width: 1980px !important;
    padding: 0 1rem;
}

/*var*/

.main-color{color:#e21e26;}
.mobile-over{overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
display: block;
width: 100%;}
.h100{height:100vh}

@media screen and (max-width:48em) {
    .pc{display: none;visibility: hidden;}
    .mobile{display: block;} 
    
}
@media screen and (min-width:48em) {
    .pc{display: block;}
    .mobile{display: none;visibility: hidden;} 
}
@media screen and (max-width:64em) {
    .pc2{height: 1px!important;opacity: 0;overflow: hidden;}
    .mobile2{display: block;} 
}
@media screen and (min-width:64em) {
    .pc2{display: block;}
    .mobile2{display: none;visibility: hidden;} 
}

@media screen and (max-width:1024px) {
    .mobile-top{
        position:fixed;
        z-index: 999;
        bottom:5vh;
        right:2rem;width: 2.5rem;
        height:2.5rem;
        background-color: rgba(255,255,255,0.5);
        border-radius:50%;
        display:flex;
        border: 1px solid rgba(0, 0, 0, 0.1);
        justify-content: center;
        align-items: center;
    }
    .mobile-top a i
    {
        fill:white;
    }
    
}

.talkstore
{
    background-color: #fae104!important;
   
}
.talkstore a i
{
 color: #381d1e!important;
}
/*header*/

header {
    position: absolute;
    background-color: transparent;
    width: 100%;    
    z-index:9999;
    max-height: 160px;    
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top:0px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  
}


.topMenu
{
    color: #fff;
    width: 100%;
    max-width: 1600px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transform-origin: center center;
            transform-origin: center center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100px;
    align-items: center;
    position: relative;
    padding: 0 3rem;

}
  
#pcMenuWrapper
{
    color: #fff;
    width: 100%; 
    max-width: 1600px;  
    -webkit-transition: all 0.2s;  
    transition: all 0.2s;
    -webkit-transform-origin: center center;
            transform-origin: center center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100px;
    align-items: center;
    position: relative;
    padding: 0 3rem;
    margin: 0 auto;

}
@media screen and (max-width:1024px)  
{
#pcMenuWrapper
{
max-width: 100%!important;
padding: 0px;
}   
#pcMenuWrapper .topMenu-navg h1
{
    width: 0px;
} 
.topMenu-navg
{
    width: 100%;
}
.topMenu-navf > div
{
    width: 2.0rem!important;
}

}
#pcMenuWrapper .topMenu-navg
{
   width: 70%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
#pcMenuWrapper .topMenu-navg h1
{
   width: 10%;
}
.topMenu-navf
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.topMenu-navf > div
{
    width: 2.5rem;
    text-align: center;
}
.topMenu-navf img
{
    width: 28px;
    transform: translateY(-1px);
}
.topMenu-navf a
{
    color:white;
    font-size: 0.7rem;
    display: block;
    width: 28px;
    height: 28px;
    line-height: 25px;
   
    border-radius: 50%;
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-transition: all .2s;
    transition: all .2s;
    -webkit-transform: scale(1) translateZ(0);
            transform: scale(1) translateZ(0);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: rgba(255,255,255,.5);
   
}

.topMenu-navf a:hover
{
    -webkit-transform: scale(1.5) translateZ(0);
            transform: scale(1.5) translateZ(0);
}

.topMenu.sticked .topMenu-navf a
{
    color:#333
}

/*panel*/






.menuDepth::-webkit-scrollbar {
  width: 7px;
}
.menuDepth::-webkit-scrollbar-thumb {

  background-color: var(--main-color);
  border-radius: 10px;
  background-clip: padding-box;
  border: 2px solid transparent;
  min-height: 40px;
}

.menuDepth {
	scrollbar-3dLight-Color: #efefef; 
	scrollbar-arrow-color: #ffffff; 
	scrollbar-base-color: #efefef; 
	scrollbar-Face- color: var(--main-color); 
	scrollbar-Track-Color: #efefef; 
	scrollbar-DarkShadow-Color: #efefef; 
	scrollbar-Highlight-Color: #efefef; 
	scrollbar-Shadow-Color: #efefef
}





@keyframes gnb_menu_ani {
    0% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}



.topMenu .pcMenuWrapper {
    width: 100%;
    height: 100%;
    min-height: 100px;
    position: relative;
}


.pcMenuItemsWrap {
    overflow: hidden;
    width: 280px;
    height: 300px;
    border-radius: 5px;
}

.pcMenuItemsSubtitle {
    font-size: 1rem;
    font-weight: 100;
    color: #222;
    letter-spacing: -0.8px;
    margin-top: 10px;
}

.pcMenuItemsTitle {
    font-size: 24px;
    color: #813B20;
    letter-spacing: -0.4px;
}

.topMenu .menuList {
    list-style: none;
    width: 100%;
    z-index: 999;
    
}



.topMenu .menuList > li {
    line-height: 37px;
    padding: 0px 20px;
   position: relative;
    cursor: pointer;
}

.topMenu .menuList > li a {
    font-size: 1rem;
	text-decoration: none;
    color: #555;
    display: block;
    position: relative;
    z-index: 9999;
    width: 100%;
    font-weight: normal;
    padding-left: 1rem;
    min-width: 150px;
    text-align: left;
}
.topMenu .menuList > li a:hover
{
    background-color: #eff5ea;
    border-radius: 50px; 
    width: 100%;
    color: var(--main-color);
}
.topMenu .menuList > li a:hover::after
{
    content: url("../images/pcMenuArrow.png");
    position: absolute;
    right: 10%;
    width: 5px;
    height: 7px;
    top:3px;
}



.topMenu > div
{
    height: inherit;
}


.sticked .menuPad{
    -webkit-transform: translateY(0);
            transform: translateY(0);
    padding-top: 60px;
}
.topMenu .hamburgerMenu button {
    background-color: transparent;
    border: 0px;
     color: var(--main-color);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.7px;
    margin-top: -3px;   
    -webkit-transition: color 0.5s;   
    transition: color 0.5s;
}

.topMenu .hamburgerMenu .hamburgerMenuButtonActive {
     color: var(--main-color);
}

.topMenu .hamburgerMenu img {
    width: auto;
}


/*햄버거*/

.menu {
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 0;
	width: 40px;
	height: 40px;
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
            position: relative;
    
  }
  @media screen and (min-width:769px) {
      

  .menu::after
  {
      content: '쇼핑';
      color:var(--main-color);
      position: absolute;
      z-index: 1;
      right: 0px;
      font-weight: bold;
      top:50%;
      transform: translate(80%,-60%);
      line-height: 1;
  }
}
  .menu svg
  {
	  width: 100%;
	  height: inherit;
  }
  .line {
	fill: none;
	stroke: #fff;
	stroke-width: 6;
	-webkit-transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
	  stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
	transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
	  stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sticked .line,.opened .line
  {
      stroke: #333;
  }
  .line1 {
	stroke-dasharray: 60 207;
	stroke-width: 6;
  }
  .line2 {
	stroke-dasharray: 60 60;
	stroke-width: 6;
  }
  .line3 {
	stroke-dasharray: 60 207;
	stroke-width: 6;
  }
  .opened .line1 {
	stroke-dasharray: 90 207;
	stroke-dashoffset: -134;
	stroke-width: 6;
  }
  .opened .line2 {
	stroke-dasharray: 1 60;
	stroke-dashoffset: -30;
	stroke-width: 6;
  }
  .opened .line3 {
	stroke-dasharray: 90 207;
	stroke-dashoffset: -134;
	stroke-width: 6;
  }

/*햄버거end*/

.topMenu .iconpcMenuBg {
    width: 40px;
    height: 40px;
     -webkit-transition: all 0.5s ease-out;
     transition: all 0.5s ease-out;
}

.iconpcMenuBgActive {
    opacity: 0;
}


.iconpcMenuSub {
    vertical-align: -8%;
    width: 15px;
    height: 15px;
}

.topMenu .menuPad {
    width: 220px;
    height: 200px;
    background-color: white;
    border: 1px solid #888;
    border-radius: 1rem ;
    -webkit-box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.2);
    text-align: left;
    padding: 4rem 0 1rem 1.2rem;
    display: none;
    opacity: 0.0;
    overflow: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    position: absolute;
    z-index: 1;
    left:0px;
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
}


.topMenu > div
{
    height: inherit;
}

.topMenu .hamburgerMenu {
    
    min-width: 50px;   
	cursor: pointer;
    position:relative;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    z-index: 1000;
}


.topMenu .hamburgerMenu button {
    background-color: transparent;
    border: 0px;
    color: var(--main-color);
    font-size:1rem;
    font-weight: 700;
    letter-spacing: -0.7px;
  
    -webkit-transition: color 0.5s;
  
    transition: color 0.5s;
    white-space: nowrap;
    
}

.topMenu .hamburgerMenu .hamburgerMenuButtonActive {
     color: var(--main-color);
     margin-top: 0.2rem;
}
.topMenu .hamburgerMenu img {
    width: auto;
}


@media screen and (max-width:768px) {
    #pcMenuWrapper
    {
        display: none!important;
    }
}




/**/
.icon-scroll,
.icon-scroll:before {
    position: absolute;
    left: 50%
}
.icon-scroll {
    width: 20px;
    height: 36px;
    margin-left: -10px;
    bottom: 20px;
    margin-top: -25px;
    border: 2px solid #fff;
    border-radius: 25px
}
@media (max-width: 767px) {
    .icon-scroll {
        transform: scale(0.8);
    }
}
.icon-scroll:before {
    content: '';
    width: 4px;
    height: 4px;
    background: #fff;
    margin-left: -2px;
    top: 8px;
    border-radius: 4px;
    animation-duration: 1.0s;
    animation-iteration-count: infinite;
    animation-name: scroll
}
@keyframes scroll {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        transform: translateY(26px)
    }
}


.cursor {
    width: 3rem;
    height: 3rem;
    border: 1px solid #fff;
    border-radius: 50%;
    position: absolute;
    z-index: -1;  
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-transition-property: background, -webkit-transform;
    transition-property: background, -webkit-transform;
    transition-property: background, transform;
    transition-property: background, transform, -webkit-transform;
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-backdrop-filter: sepia(20%);
            backdrop-filter: sepia(20%);
    background-size: cover;
  
}

.cursor::after
{
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #fff;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    transition: all .5s;
}
.link-grow {
    -webkit-transform: scale(2);
            transform: scale(2);
    background-color: #1d1d1d;
    
}
.gnb
{
    display: flex;
    justify-content:space-between ;
    width: auto;
    align-items: center;
   
}
.gnb > li
{
    width: auto;
    position: relative;
    padding: 0 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
}
.gnb li a
{
    font-weight: bold;
    color:#fff;
    white-space: nowrap;
    font-size: 1.2rem;
    text-align: center;
    width: 100%;
    height: 100%;
    line-height: inherit;
    
}
.topMenu.sticked .gnb a
{
    color: #333;
}
.gnb li a:hover::after {
    content: '';
    width: calc(100% - 2rem);
    height: 3px;
    background-size: contain; 
   

  }

  .hovered-link {
      color: #fff!important;
      
     
  }

  .hovered-link::after {
  
      background-image: url("../images/white_dot.svg")!important;
     
     
 
  }




#pcMenuWrapper h1 img
{
    height: 56px;
    width: 78px;
}

 .topMenu.sticked
{
    color: #333;
   
   
   
}
body > section 
{
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
}
body > section > .container,footer .container
{
    width: 100%;
    max-width: 1600px;
    position: relative;
    margin: 0 auto;
    padding: 0;

    height: inherit;
   
}
@media screen and (max-width:1024px) {
    body > section > .container,footer .container
    {
        padding: 0.5rem 1rem!important;
    }
    
}
/*main*/
#main-visual,#main-infos,#main-visual .container,#main-infos .container
{
    height: 100vh;   
}
@media only screen and (max-width:640px)
{
     #main-visual
    {
        height: 86vh;   
    }
    #main-visual .container
{
    height: 86vh;   
}
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    #main-visual
    {
        height: 86vh;   
    }
    #main-visual .container
{
    height: 86vh;   
}
}

/*main-visual*/
#main-visual
{
    
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
    
}
#main-visual h2
{
    line-height: 1.2;
    font-size: calc(1.4em + 3vw);
    color: white;
    letter-spacing: -1px;
    font-weight: bold;
    white-space: nowrap;    
    max-width: 1000px;
    text-align: center;
    background: rgba(255, 253, 160, 1);
    background: -webkit-linear-gradient( left, #00ffff 0%, #97fba0 25%, #97b1fb 50%, #00ffff 100%) repeat;
    -webkit-background-clip: text;
    -ms-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -ms-text-fill-color: transparent;
    -moz-text-fill-color: transparent;     
    animation:masked-animation 50s infinite linear ;
    /*-webkit-text-stroke:1px #fff*/
  
  }
  
  @-webkit-keyframes masked-animation {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -8000px -3000px;
    }
  }

#main-about
{
    padding: 2rem 0;
}
.ma-title 
{
    padding: 1rem 0;
    margin-top: 1rem;
    font-size: 2.5rem;
    line-height: 4;
    overflow: hidden;
  
}
@media screen and (max-width:48em) {
    .ma-title 
    {
        padding: 0px;
    } 
    
}
.ma-title p{
    font-size: 0.96rem;
    text-transform: uppercase;
    font-weight: normal;
    line-height: 1.1;
    font-family: -apple-system, 'Lato',sans-serif;
}
.ma-title h3{
    font-size: calc(1rem + 2vw);
    text-align: center;
    letter-spacing: -1px;
    line-height: 2;
    word-break: keep-all;
      font-family: 'GmarketSansBold',sans-serif;
}

.ma-box
{
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;   
    
    margin-top: 2rem;
}
@media screen and (min-width:64em) {
    .ma-box
    {
        grid-template-rows:repeat(1, minmax(50vh, auto));  
    } 
}
@media screen and (max-width:64em) {
    .ma-box
    {
    
        grid-template-rows:30vh;
        gap:10px 0px;
    }
}
@media screen and (max-width:48em) {
    .ma-box
    {
        grid-template-columns: 100%;
        grid-template-rows:repeat(2,30vh);
        gap:10px 0px;
    }
    .ma-title h3{
        font-size: calc(1rem + 3vw);
    }
}
.ma-box > div
{
    background-size: cover!important;
    background: no-repeat;
    background-position: center center;
    position: relative;
    padding: 1rem;
}
.ma-box > div > p
{
    letter-spacing: -0.2px;
    font-size: 0.96rem;
    background: #000;
    width: auto;
    display: inline-block;
    color: white;
    padding: 0.3rem;
    white-space: nowrap;
}
.ma-box > div:nth-child(1)
{
    background-image: url(../images/main-focus1.jpg);
}
.ma-box > div:nth-child(2)
{
   background-image: url(../images/main-focus2.jpg);
    /* background-color: skyblue;
    padding: 1rem;*/

}


/*상품*/

.mainitems,.main-items
{
    min-height: 500px;
    background:#fff;
}
.mainnav
{
   
   width: 100%;
  position: relative;
  margin: 1rem 0;
  
   
}
.mainnav-tabs
{
    width: 100%;
overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mainnav-tabs > ul
{
    padding: 0;
    margin: 0;   
min-width: 768px;   
}
.mainnav li
{
justify-content: center;
align-items: center;
text-align: center;



}
.mainnav button
{
    border: none;
    background-color: #fff;
    border-bottom: 2px solid #eee;
    height: 3rem;
    white-space: nowrap;
    font-weight: normal;
    color:#666;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: -0.1px;
}
.mainnav button.active
{
    border-bottom: 2px solid var(--main-color);
    transition: all 0.2s;
    color:var(--main-color);
    font-weight: bold;
}
.mainnav button:hover
{
    color:#333
}
.maintc
{
    padding: 2rem 0;
}


/*상품목록*/
.mi-items
{
    margin: 2rem 0;
}
.item
{
    position: relative;
}
.item figure{
    position: relative;
    overflow: hidden;
    
}
.item figure img
{
    margin-bottom: 1rem;
    transition: all .3s ease-in-out;
    transform: scale(1) translateZ(0);
    transform-origin: center;
    filter: brightness(1.1);
}

.discount-rate
{
    position: absolute;
    z-index: 1;
    background-color: darkgreen;
    width: 3rem;
    top:4px;
    right:1rem;
    height: 3rem;
    text-align: center;
    color: white;
    font-weight: bold;
    line-height: 3rem;
    border-radius: 50%;
 
}
.discount-rate::after
{
    content: '';
    position: absolute;
    z-index: -1;
    top:0px;
    right:0px;
    width: 1.5rem;
    height: 1.5rem;
    background-color: inherit;
    
}

.item  a
{
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover
}
.item  figure::after
		{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: rgba(0,0,0,0.01);
			mix-blend-mode:multiply;
			-webkit-transition: .5s;
			-o-transition: .5s;
			transition: .5s;
			
		}
		



.item-text
{
    position: relative;
    width: 100%;
}
.item-text .item-title
{
    font-weight: bolder;
    font-size: calc(.6em + 3vw);
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 1rem;
}
@media (min-width: 37.5em) {
   .item-text .item-title {
        font-size: 1.3rem;
    }
}
.item dl
{
    display: flex;
    justify-content: center;
   
}
.item dl dt
{
  padding-right: 1rem; 
    
}
.item dl dt strong
{
    font-weight: 500;
}
.item dl dd .sijung_price
{
    
    text-decoration: line-through;
}
.item .price
{
    font-size: 1.4rem;
    font-weight: bold;
}
/*상품목록끝*/
#js-prev1,#js-next1
{
    height: calc(100% - 5rem);
    top:0px;
}
/*main-infos:start*/

.boxContents
{
position: relative;
display: -ms-grid;
display: grid;

gap: 0px;
height: 100vh;
}
@media screen and (min-width:48em) {
    .boxContents
    {
        -ms-grid-columns: 1fr 0px 1fr 0px 1fr 0px 1fr;
grid-template-columns: repeat(4, 1fr);
-ms-grid-rows: minmax(50vh, auto) 0px minmax(50vh, auto) 0px minmax(50vh, auto) 0px minmax(50vh, auto);
grid-template-rows: repeat(4, minmax(50vh, auto));
    }


    .boxContents div:nth-child(1) {	
        -ms-grid-column: 1;	
        -ms-grid-column-span: 2;	
        grid-column: 1 / 3;	
        -ms-grid-row: 1;	
        -ms-grid-row-span: 2;	
        grid-row: 1 / span 2;
        background:yellowgreen;
        
        
    }
    .boxContents div:nth-child(2)
    {
        -ms-grid-column: 3 ;
        grid-column: 3 ;
      
    }
    .boxContents div:nth-child(3)
    {
        -ms-grid-column: 4 ;
        grid-column: 4 ;
        
    }
    .boxContents div:nth-child(4)
    {
        -ms-grid-column: 3 ;
        grid-column: 3 ;
       
    }
}

.boxContents > div
{

    text-align: center;
    align-items: center;
  justify-content: center;
   position: relative;
   display: flex;
   flex-direction: column;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover!important;
   transition: all 0.3s;
   transform-origin: center center;
   cursor: pointer;
   transition: all  ease-in-out 0.3s;
   transform-origin: center;
   transform:scale(1) translateZ(0);
  

}


.boxContents > div::after
{
    content:'';
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0px;
    top:0px;
    background-color: rgb(0, 0, 0,0.4);
    transition: all 0.2s ease-in-out;
}
.boxContents > div h4{
  
    z-index: 2;
    color:white;
    transition: all 0.3s;
    font-size: calc(0.4em + 2vw);
}
.boxContents > div:nth-child(1) {	

    background:#081b19 ;
    color:white
    
    
}
.boxContents > div h4 a
{
    color: whitesmoke!important;
    font-size: calc(0.3em + 2vw);
    font-weight: bold;
}
@media screen and (max-width:1024px) {
   .boxContents > div h4, .boxContents > div h4 a
    {
        font-size: calc(0.3rem + 5vw);
    }
    
}
.boxContents > div:hover::after
{
    background-color: rgb(0, 0, 0,0.3);
}
.boxContents  p
{
    color: white!important;
}
.boxContents > div:nth-child(1)
{
   
    background-image: url(../images/main-infos00.jpg);
}
/*
.boxContents > div:nth-child(3)
{
  
    background-image: url(../images/main-infos02.jpg);
}
.boxContents > div:nth-child(4)
{
    
    background-image: url(../images/main-infos03.jpg);
}
.boxContents > div:nth-child(5)
{
   
    background-image: url(../images/main-infos04.jpg);
}
*/
@media screen and (max-width:64em) {
    .boxContents
    {
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(2, minmax(20vh,33.3333vh));

    }
    .boxContents > div {
       display: flex;
       justify-content: center;
       align-items: center;
    }
    .boxContents div:nth-child(1) h4
    {
       line-height: 1;
    } 
    .boxContents div:nth-child(1)
    {
       display: flex;
       justify-content: center;
       align-items: center;
        width: 100%;
        grid-row: 1 ;
        place-items:center ;
        grid-column: 1/span2;
       
       
    }
    .boxContents div:nth-child(2)
    {
grid-row: 2;
grid-column: 1;
    }
    .boxContents div:nth-child(3)
    {
grid-row: 2;
grid-column: 2;
    }
    .boxContents div:nth-child(4)
    {
grid-row: 3;
grid-column: 1;
    }
    .boxContents div:nth-child(5)
    {
grid-row: 3;
grid-column: 2;
    }
}

/*main-infos:end*/

/*main-banner*/
#main-banner
{
    
    margin: 4rem 0;
    background-color: #fff;
    
    height: 410px;
    padding-top: 20px;
    border-width: 1px 0;
    
    position: relative;
   
    
}
#main-banner .focusSwiper
{
    padding-left: 0.01rem;
}

#main-banner #gallery .swiper-slide
{
  
   width: 100%;
   min-width:320px ;
   min-height: 300px;
   height: 100%;
   max-height: 400px;
   border:1px solid rgba(0, 0, 0, 0.1);
   background-color: beige;
   padding: 1rem;   
}

.ss-inner
{
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    align-items: center;
   
}

#main-banner #gallery .swiper-slide h3{
    font-size: calc(1rem + 2vw);
    opacity: 0.5;
    transform: scale(1) translateZ(0);
    transition: all .3s;
    transform-origin: center left;
   position: absolute;
   z-index: 1;
   top:0rem;
   left:1rem
}

#main-banner  .swiper-slide-active h3
{
    transform:scale(1.1) translateZ(0)!important;
    color: var(--main-color)!important;
    opacity: 1!important;
}
.ss-contents
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    max-height: 146px;
}
#main-banner #gallery .swiper-slide img
{
    max-width: 30%;
    border-radius: 50%;
    text-align: center;
    margin: 0 auto;
    transform: scale(1) translateZ(0);
    transform-origin: center center;
    transition: all 0.3s ease-in-out;
}
#main-banner  .swiper-slide-active img
{
    transform:scale(1.3) translateZ(0) rotate(5deg);   
    z-index: 1;
}
#main-banner #gallery .swiper-slide dl
{
    width: 67%;
    place-self: center;
}
#main-banner #gallery .swiper-slide dt
{
    font-size: calc(0.3rem + 1vw);
    width: 100%;
}
#main-banner #gallery .swiper-slide dd
{
    text-transform: capitalize;
    font-size: 0.8rem;
    opacity: 0.5;
    white-space:pre-line;
    width: 100%;
}
@media screen and (max-width:1024px) {
    .ss-inner
    {
        display: flex;
        flex-direction: column;
     } 
     .ss-contents
{
    display: flex;
    flex-direction: column!important;

}
     #main-banner #gallery .swiper-slide img
     {
         max-width: 50%;
     }
     #main-banner  .swiper-slide-active img
{
    transform:scale(1) translateZ(0) rotate(0deg);   
    z-index: 1;
}
#main-banner #gallery .swiper-slide dl
{
    width: 100%;
    margin-top: 1rem;
    text-align: center;
}
#main-banner #gallery .swiper-slide dt
{
    font-size: calc(0.5rem + 1vw);
    width: 100%;
}
#main-banner #gallery .swiper-slide dd
{
    font-size: 0.76rem;
}
}
@media screen and (max-width:768px) {
    #main-banner #gallery .swiper-slide dt
{
    font-size: calc(0.5rem + 3vw);
   
}
}
.neon {
    color: #fff;
    font-size: calc(.5em + 2vw);
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 20px #fff,
      0 0 40px rgb(255, 0, 64),
      0 0 80px rgb(255, 0, 64),
      0 0 90px rgb(255, 0, 64),
      0 0 100px rgb(255, 0, 64),
      0 0 150px rgb(255, 0, 64);
      line-height: 1;
}


/*custom-items*/
#main-custom
{
    min-height: 150px;
    margin-bottom: 1rem;
}

#main-custom .container
{
    display: grid;
   grid-gap: 1rem;
justify-content: stretch;
   
}
#main-custom .container > div
{
    width: 100%;
    transition: all 0.3s ease-in-out;
     border:1px solid rgb(0, 0, 0,0.1);
}
@media screen and (min-width:1280px) {
    #main-custom .container
    {
        grid-template-columns: repeat(3,1fr);
    }
    
}

@media screen and (min-width:769px) and (max-width:1280px) {
      #main-custom .container
    {
        grid-template-columns: repeat(6,1fr);
    }
    #main-custom .container div:nth-child(1)
    {
        grid-column: 1/ 7;
        grid-row: 2;
    }
     #main-custom .container div:nth-child(2) 
     {
         grid-column: 1/4;
     }
       #main-custom .container div:nth-child(3) 
     {
         grid-column: 4/7;
     }
}

@media screen and (max-width:768px) {
    #main-custom .container
    {
        grid-template-columns: 100%;
    }
     #main-custom .container div:nth-child(1)
     {
         grid-row: 1;
     }
      #main-custom .container div:nth-child(2)
     {
         grid-row: 2;
     }
      #main-custom .container div:nth-child(3)
     {
         grid-row: 3;
     }
}
.custom-items
{
    position: relative;
   
    justify-content:space-around;
    min-height: 3rem;
    height: 100%;
    max-height: 5rem;
    margin-bottom: 1rem;
}

.custom-items > div > a
{
   
    padding: 1rem;
    width: 100%;
    
    
    height: inherit;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0px ;
    
}
.custom-items > div > a:hover
{
    color: steelblue;
   
}
.custom-items > div > a:hover dt
{
    color: #333 !important;
}

.custom-items > div > a > div
{
    padding-right: 1rem;
    width: 15%;
    min-width: 40px;
    text-align: center;
    
}
.custom-items > div  dl
{
    padding: 0;
    
    line-height: 1.2;
    width: 80%;

}
.custom-items > div dt
{
    position: relative;
}
.custom-items i
{
    font-size: 1.42rem;
}
.custom-items img
{
    width: 36px;
}
.custom-items > div dd
{
  
    white-space: nowrap;
overflow: hidden;
display: block;
    text-overflow: ellipsis;
 
 
    padding: 0;
}
#main-custom .container div:nth-child(2) dt::after
{
    content: 'more';
    font-size: 0.7rem;
    padding: 0.0rem 0.3rem ;
    border:1px solid silver;
  
    margin-left: 0.5rem;
    transform: translateY(0%);
    z-index: 1;
   
    position: absolute;
    top:0px;
    left:60px
   
}

.bank #textbox-url {
    position:   absolute;
    top:        0;
    left:       0;
    width:      1px;
    height:     1px;
    margin:     0;
    padding:    0;
    border:     0;
}
#copy-url
{
    position: relative;
}
@media screen and (min-width:1024px) {
    

#copy-url::after
{
    content: '복사';
  
    font-size: 0.7rem;
    padding: 0.2rem 0.3rem ;
    border:1px solid silver;
    line-height: 1;
    margin-left: 0.5rem;
    transform: translateY(0%);
    z-index: 1000;
    background:#fff;
    position: absolute;
    top:0px;
    right:-40px
}
}
footer
{
    background-color: floralwhite;
    min-height: 30vh;
    overflow: hidden;
    display: block;
    width: 100%;
    clear: both;
    font-size: 1rem;
}
footer *
{
    color: #666;
    
}
footer h5
{
    font-weight: bold;
    font-size: 1.3rem!important;
    letter-spacing: normal;
   margin-bottom: 0.5rem;
   color:black
}
footer nav
{
    border-bottom: 1px solid #555;
    text-align: center;
    height: 3rem;
    background-color: #000;
   
}
footer .container
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: inherit;
}
@media screen and (max-width:768px) {
    footer .container
    {
        justify-content: flex-start!important;
    }
}
footer nav .container a
{
    width: auto;
    padding: 0 .5rem;
    font-size:0.96rem;
    white-space: nowrap;
    color: gray;
}
.footer-contents
{
    padding: 1rem 0;
}
.footer-contents .container
{
justify-content: space-between;
flex-direction: row;
font-size: 0.96rem;
align-items: flex-start;
}

.footer-logos
{

width: 20%;
text-align: center;

}
.footer-logos img
{
    width: 100%;
    max-width: 140px;

    filter:grayscale();
    opacity: .5;
}
.footer-infos
{
width: 50%;
font-weight: normal;
letter-spacing: -0.4px;

}
.footer-infos *
{
    font-size: 0.96rem!important;
    line-height: 1.5;
    letter-spacing: -0.1px;
}
.footer-infos a
{
    border-bottom: 1px dotted darkslategray;
}
.footer-infos p:first-child strong:first-child
{
    color: #f60!important;
}
.footer-infos  strong
{
    color: #222;
}
.footer-infos p:last-child
{
    letter-spacing: 0.5px!important;
}
.footer-interactive
{
    width: 20%;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap:1rem;
    
}
.footer-interactive h5
{
    font-size: 1.2rem;
    line-height: 1;
    margin-bottom: 0;
}
@media only screen 
  and (device-width: 768px) 

 {
.footer-interactive {

     flex-direction: row;
}
.footer-interactive div
{
    width: 50%;
    padding-right: 5vw;
}
  }
.footer-interactive a{
    font-weight: bold;
}

@media screen and (max-width:48em) {
    .footer-contents .container
    {
        flex-direction: column!important;
    }
    .footer-contents .container > div
    {
        width: 100%;
        padding-bottom: 1rem;
        font-size: calc(0.3em + 2vw);
       
        line-height: 1.3;
    }
    
}

@media screen and (max-width:1280px) {
    .w-containerBox
    {
        display: none;
    }
    
}

@media screen and (min-width:1280px) {
    

    /*widget*/
    .w-containerBox
    {
        position: fixed;
        z-index: 999;
        right:10px;
        display: block;
        top:calc(50% - 200px);
    }
    .w-container
    {
        position: relative;
       
    }
    .w-container .master
    {
        position: absolute;
        z-index:-1;
        left:10%;
        top:-90px;
    }
    .w-container .navigation
    
    {
        position: relative;
        width: 80px;
        height: 360px;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease-in-out;
    }
    .w-container .navigation.active
    {
        width: 200px;
    }
    .w-container .navigation ul
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0;
    }
    .w-container .navigation ul li
    {
        position: relative;
        list-style: none;
        width: 100%;
    }
    .w-container .navigation ul li:hover
    {
       background-color: #efefef;
    }
    .w-container .navigation ul li a
    {
        position: relative;
        list-style: none;
        display: flex;
        width: 100%;
        justify-content: flex-start;
        color:black
    }
    .w-container .navigation ul li a .icon
    {
        position: relative;
        display: block;
        min-width: 80px;
        height: 60px;
        line-height:60px!important;
        text-align: center;
    }
    .w-container .navigation ul li a .icon .fa
    {
        font-size: 24px!important;
    }
    .w-container .navigation ul li a .title
    {
        position: relative;
        display: block;  
        height: 60px;
        line-height: 60px;
        white-space: nowrap;
    }
    
    
    .w-container .navigation .cart_cnt
    {
        position: absolute;
        z-index: 1;
        width: 1.5rem;
        height: 1.5rem;
        background-color: crimson;
        text-align: center;
        color: white;
        left:45px;
        top:10px;
        line-height: 1.5rem;
        font-size: 50%;
        display: block;
        border-radius: 50%;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    }
    
    .w-container .toggle
    {
        position: absolute;
        top:calc(50% - 20px);
       left: -20px;
        width: 40px;
        height: 40px;
        background-color: #f5f5f5;
        cursor: pointer;
        border-radius: 50%;
        z-index: 1;
        display: flex;    
        justify-content: center;
        align-items: center;
    }
    .w-container .toggle i
    {
        font-size: 24px;
        transition: all 0.5s;
       
    }
    
    .toggle.active i
    {
        transform: rotate(180deg);
       
    }
    }



    /*mobile*/


/*mobile*/
.mobileMenu
{
    display: none;
}

@media screen and (max-width:768px) {
    .mobileMenu
    {
        
        width: 100%;
        padding: 0px;
        height: 68px!important;
        display: flex;
        align-items: center;
       flex-direction: row;
    }
    .topMenu
    {
        width: 100%!important;
        padding: 0px 0.8rem!important;
        height: 68px!important;
    }
    .sticked
    {
        height: 68px!important;
    }
    
}
.mobileNav
{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[5];
    grid-template-columns: repeat(5,1fr);
    width: 100%;
  

    
}
.mlogo
{
    text-align: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    line-height: 40px;
    grid-column: 2/4;
    transform: translateX(20%);
   
    
}
.mlogo h1
{
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
    line-height: 40px;
    flex: 1;
    grid-column: 1;
    
}
.mlogo h1 a{
display: block;
width: 100%;
height: 100%;


}
.mlogo h1 img
{
   height: 2rem;
   transform: translateY(-0px);
}
.mobileHome
{

display: flex;
justify-content: flex-end;
grid-column: 4/6;
justify-items: center;

}
.mobileHome > div
{
    overflow: hidden;
  
    max-width: 32px;
width: 100%;
height: 100%;
    max-height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    place-self: center;
    background-color: rgba(255,255,255,0.1);
border-radius: 50%;
border:1px solid rgba(0,0,0,0.2);
margin-right: 0.5rem;

}
@media screen and (max-width:640px) {
    .mobileHome > div
    {
        width: 24px!important;
        height: 24px!important;
    }
    
}
.mobileHome a
{

width: 100%;

display:inherit;
color: white;
line-height: inherit;
justify-content: center;
align-items: center


}

.mobileHome a img

{
   max-width: 100%;
   
}

.sticked .mobileHome a
{
    color: #333;
}
@media screen and (min-width:1024px) and (-webkit-min-device-pixel-ratio: 2) {
    

    #sidebar,.dismiss
{
    display: none!important;
    visibility: hidden;
}

}

 
#sidebar {
    width: 90vw;
    position:fixed!important;
    top: 0;
    left: -92vw;
    height: 100vh;
    z-index: 99998!important;
    background: #fff;
    color: #fff;
    transition: all 0.3s;
    /*overflow-y: scroll;*/
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    display: block;
}
@media screen and (max-width:768px) 
{
    #sidebar.active {
    left: 0!important;
    
} 
.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99991!important;
    opacity: 0;
    transition: all 0.5s ease-in-out;
	top:0px;
	left:0px;
    
}
.overlay.active {
    display: block;
    opacity: 1;
    
}     
}
@media screen and (device-width:768px) {

    #sidebar 
    {
        width: 36vw!important;
    }
}

#sidebar h3
{
	font-weight: bold;
	color: white
}


#dismiss {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;    
    position: absolute;
    top: 14px;
    transform: translateY(-15%);
    right: 10px;
    cursor: pointer;
     transition: all 0.3s;
	z-index: 99999;
    color: #555;
}
#dismiss span
{
	font-size: 1.2rem!important;
	color: #333
}

#dismiss:hover {
    background: #fff;
    color:rgba(244,23,71,1.00);
}



#sidebar .sidebar-header {
    padding: 1rem;
    background-color:#fff;
	color: #333
}

.mpanel-head
{
display: grid;
grid-template-columns: 30% 70%;
position: relative;
place-content: center;
z-index: 1000;
background-color: #fff;


}
.mpanel-head > div:first-child
{
    color: black;
    font-size: 1rem;
    letter-spacing: -1px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mpanel-head > div.mfuncs
{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 3.6rem;
color:#333;
padding-left: 1rem;
font-size: 0.96rem;
letter-spacing: -1px;
padding-right: 0.5rem;
}

.mpanel-head > div.mfuncs > div
{
    
    margin-left: 0.5rem;
    width: 28px;
    height:28px;
    background-color: rgba(255,255,255,0.1);
border-radius: 50%;
border:1px solid rgba(0,0,0,0.2);
position: relative;
display: flex;
justify-content: center;
align-items: center;

}
.mpanel-head > div.mfuncs > div:last-child
{
    display: none!important;
    z-index: -999;
    visibility: hidden;
}

.mpanel-head .cart_cnt
{
    position: absolute;
        z-index: 1;
        width: 1.5rem;
        height: 1.5rem;
        background-color: crimson;
        text-align: center;
        color: white;
        left:1rem;
        top:-10px;
        line-height: 1.5rem;
        font-size: 80%;
        display: block;
        border-radius: 50%;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.mpanel-head a
{

width: 100%;

display: flex;
color: #666;
line-height: inherit;
text-align: center;
justify-content: center;
align-items: center;


}

.mpanel-head a img

{
   max-width: 100%;

}


#sidebar ul.components {
padding: 0rem;
}


#sidebar ul li a {
 
    font-size: 1em;
    display: block;
	color:#333;
	padding:  0.8rem;
    text-align: left;
    line-height: 1.1;
    position: relative;
   
    width: 100%;
}

#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active> span > a,
#sidebar ul li> span > a[aria-expanded="true"] {
    color: #000;
	font-weight: bold;
   background-color: rgba(255,255,255,1.00);
 
}
#sidebar ul li> span > a > i {
    -ms-grid-column: 4;
    grid-column: 4;
    text-align:right;
}
#sidebar   .collapse li{
	background-color:transparent!important;
    position: relative;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}
.sidebar-foot
{
	padding: 1rem;
    color: black;
}
.sidebar-foot h5
{
    font-size: 1.3rem;
}
   .sidebar-foot p{
       line-height: 2;
   }


/**********************sub****************************/
.if-sub
{
    background-color: rgba(255,255,255);
}
.if-sub a{
    color: #333 !important;
}
.if-sub .line
{
    stroke: #333;
}
#sub-top
{
    display: flex;
    position: relative;
    width: 100%;   
    height: 100%;
    max-height: 30vh;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-background-size: cover;
    background-size: cover;
   
    overflow: hidden;
    
}
@media screen and (max-width:1024px) {
    #sub-top
    {
        max-height: 24vh!important;  
    }
}
#view-top
{
   height: 15vh;
   background-color: rgb(16, 50, 83);
   margin-bottom: 2rem;
}
@media screen and (max-width:1024px) {
    #view-top
    {
        height: 10vh;
        
    }  
}
.sub-header
{
    position: relative;
    width: 100%;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    place-content: center;
  
    background-position: center center;
    background: no-repeat;
    background-size: cover;
}
.sub-header h2
{
    font-size: 3rem;
    line-height: 1;
    transform: translateY(50%);
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    
}
.category-bg
{
    position: absolute;
    width: 100%;
    height: inherit;
    display: block;
    left:0px;
    top:0px;
    object-fit: cover;
    min-height: 30vh;
}
.category-bg img
{
    width: 100%;
}
@media screen and (max-width:768px) {
    #sub-top,.category-bg,.sub-header
    {
        max-height: 25vh!important;
        overflow: hidden;
    }
    
}
#sub-top .container
{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sub-contents
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-bottom: 2rem;
}
nav.sub-menu,nav.sub-menu2
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    margin-top: 1rem;
   width: 100%;
}
nav.sub-menu a
{
    width: auto;
   font-size: 1rem;
    border:1px solid #f2f2f2;
    padding:0.5rem 2rem;
    margin-right: -1px;
    white-space: nowrap;   
    text-align: center;

}
nav.sub-menu2 a
{
    width: auto;
    min-width: 120px;
    border:1px solid #f2f2f2;
    padding:1rem 2rem;
    margin-right: -1px;
    white-space: nowrap;
    overflow:hidden;
    font-size: 1rem;
    text-align: center;
  

}
@media screen and (min-width:1024px) {
    nav.sub-menu2 a
    {
        min-width: auto;
        text-align: center;
    }  
}
nav.sub-menu a.on
{
    background: var(--main-color);
    color:white;
    font-weight: bold;
}
nav.sub-menu2 a.on
{
    background: #fff;
    color:var(--main-color);
    border:1px solid var(--main-color);
    font-weight: bold;
    z-index: 1;
}
.sub-body
{
    position: relative;
    min-height: 300px;
    background-color: #fff;
    padding: 0 0 3rem;
}
.sub-body article > h4
{
    text-align: center;
    line-height: 1.1;
    font-size:calc(0.3rem + 2vw);
    margin: 1rem 0 2rem;   
    letter-spacing: -1px;
}
@media screen and (max-width:600px) {
    nav.sub-menu,nav.sub-menu2
    {
        justify-content: flex-start!important;
    }
    .sub-body article > h4
    { font-size:calc(1rem + 2vw);}
}
.wrap {
	position: relative;	
	width: 100%;	
    height: 100%;
	overflow: hidden;
    min-height: 250px;
    display: block;
   word-break: keep-all;
    margin-top: 3rem;
    padding:0rem;
}

@media screen and (max-width:768px){
    .wrap 
    {
        margin-top: 2rem; 
    }
}


.text-contents
{
    display: flex;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 1rem 0 0 0;
   flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    gap:0px;
   
    height: 100%;
    position: relative;
    min-height: 10vh;
}
.text-contents *,.text-contents p
{
    font-size: 1.1rem;
    line-height: 1.6;
    word-break: keep-all;
}
.text-contents > div >  p 
{
    margin-bottom: 1rem;
}
.system-head div p
{
    margin-bottom: 1rem;
}
@media screen and (max-width:1024px) {
    .text-contents *,.text-contents p
{
    font-size: calc(0.1rem + 1.8vw);
    line-height: 1.3;
}
}
@media screen and (max-width:768px) {
    .text-contents *,.text-contents p
{
    font-size: calc(0.1rem + 2vw);
    line-height: 1.3;
}
}
@media screen and (max-width:640px) {
    .text-contents *,.text-contents p
{
    font-size: calc(0.1rem + 3vw);
    line-height: 1.3;
}
.w-100 > h5
{
    text-align: center;
}
}
.text-contents.grid1 > div
{
    width: 100%;
}
.text-contents.grid2 > div
{
    width: 50%;
}
.text-contents.grid3 > div
{
    width: 33.33333%;
}
.text-contents.grid4 > div
{
    width: 25%;
}

.text-contents > div
{
    width: 100%;
    padding: 0 1rem;
    position: relative;
}
@media screen and (max-width:768px) {
    .wrap
    {
        margin-top: 1rem;
    }
    .text-contents
    {
        flex-direction: column;
        justify-content: center;
        margin: 0!important;
    }
    .text-contents > div
    {
        width: 100%!important;
       margin-bottom: 1rem;
    }
    .text-contents.grid2 > div
    {
        width: 100%;
        margin-bottom: 1rem;
    }
    .text-contents.grid3 > div
    {
        width: 100%;
        margin-bottom: 1rem;
    }
    .text-contents.grid4 > div
    {
        width: 100%;
        margin-bottom: 1rem;
    }
    
}
.text-contents h5
{
    font-size: calc(0.3rem + 1vw);
    line-height: 1.2;
    margin: 0.5rem 0;
   
   color:#666;
font-weight: normal;
}

@media screen and (max-width:1024px) {
    .text-contents h5
    {
        font-size: calc(0.2rem + 3vw);
        
    margin: 0.5rem 0;
    }   


}

:root{
    --span12:1/3;
    --span23:2/4;
}

/*이미지 노출 애니*/
.image-wrapper
{
   position: relative;
   display: block; 
}
.image-wrapper img ,.image-wrapper .cover
{
    position: absolute;
   
}
.image-wrapper .cover
{
    width: 100%;
    height: 100%;
    background: #000;
}

/*sub 일부레이아우정의*/
.layout37 > div:nth-child(1)
{
    width: 30%;
}
.layout37 > div:nth-child(2)
{
    width: 70%;
}

.layout73 > div:nth-child(1)
{
    width: 70%;
}
.layout73 > div:nth-child(2)
{
    width: 30%;
}

.sub-body article:nth-child(1) .sub21 > div:nth-child(1)
{
width: 30%;
}
.sub-body article:nth-child(1) .sub21 > div:nth-child(2)
{
width: 70%;
}
@media screen and (max-width:"1024px") {
    

.sub-body article:nth-child(1) .sub21 > div
{
    width: 100%;
    margin-bottom: 1rem;
}
}
.sub21 div:nth-child(2) p
{
    margin-bottom: 1rem;
    word-break: keep-all;
    font-size: calc(0.2rem + 1vw);
    line-height: 1.6;
}
/*CEO*/
.ceo01  img
{
   border:1px solid rgba(0, 0, 0, 0.1)
}
.ceo01 figure
{
    width: 100%;
    text-align: center;
}
.ceo02 .name1
{
    font-size: 1rem;
    margin-bottom: 0px!important;
    color:slategray
}
.ceo02 .name2
{
    font-size: 1.2rem;
    font-weight: bold;
}
.ceo02 h4
{
    font-size: 2rem;
    line-height: 1.3;
    font-weight: bolder;
    margin-bottom: 1rem;
    
}
.ceo02 p
{
    margin-bottom: 1rem;
}


.chart
{
   
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 0 auto;
    
    padding: 1rem 0;

}
.chart > div
{
    display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-template-rows: repeat(auto-fill,minmax(30px, auto));
    width: 100%;
    position: relative;
}
.chart > div.chart-top
{
    position: relative;
    margin-bottom: 2rem;
}
.chart > div.chart-top div
{
    grid-column: 4;
    position: relative;
   
}
.chart > div.chart-top div::after
{
    content:'';
    width: 1px!important;
    height: 2rem;
    background-color: #222;
    bottom:-2rem;
    left:50%;
    z-index: 1;
    position: absolute;
    transform: translateX(-50%);
}
.chart .ff
{
    background-color: #000;
    text-align: center;
    color:white;
    padding: 1rem 0;
    min-width:140px

}
.chart .ff strong
{
    color:gold
}
.chart > div.chart-mid div
{
    grid-column: 4;
    position: relative;
    transform: translateY(-25%);

}
.chart > div.chart-mid div::after{
content: '';
    position: absolute;
    z-index: 1;
    width: 1px;
    height: 5.7rem;
    background-color: #222;
    top:56px;
    right:50%;
}
.chart > div.chart-bottom
{
    display: flex!important;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 1.2rem;
}
.chart > div.chart-bottom > div
{
    width: 50%;
    display: flex;
    position: relative;
  justify-content: flex-start;
  flex-direction: column;
    margin-top: 1rem;
    align-items: center;
   
}

.chart > div.chart-bottom > div > div
{
    grid-column: 2/3;
    background-color: royalblue;
    color: white;
    font-weight: bold;
    text-align: center;
    place-self: center;
    padding: 1rem 0;
    min-width:140px;
    font-size: 1rem;
    position: relative;
   
}


.chart > div.chart-bottom > div:nth-child(1) > div::before,
.chart > div.chart-bottom > div:nth-child(2) > div::after{
    content: '';
        position: absolute;
        z-index: 1;
        width: 1px;
        height: 2rem;
        background-color: royalblue;
        top:56px;
        right:50%;
    }

.chart-bottom li
{
    font-size: 1rem;
}

@media screen and (min-width:1024px) {
    .chart > div.chart-bottom > div:nth-child(1) > div::after
    {
        content: '';
        position: absolute;
        z-index: 1;
        width: 21rem;
        height: 1px;
        background-color: #222;
        top:50%;
        right:-21rem;
    }
    .chart > div.chart-bottom > div:nth-child(2) > div::before
    {
        content: '';
        position: absolute;
        z-index: 1;
        width: 21rem;
        height: 1px;
        background-color: #222;
        top:50%;
        left:-21rem;
    }
    
}


@media screen and (max-width:1024px) {
    .chart > div.chart-bottom
    {
        flex-direction: column;
    }
    .chart > div.chart-bottom > div
    {
        width: 100%!important;
        margin-bottom: 1.2rem;
    }
}
.chart > div.chart-bottom > div li div
{
    background-color: darkturquoise;
    text-align: center;
    font-weight: bold;
    color:white;
    padding: 0.5rem 0;
    min-width: 100px;
    position: relative;
}
.chart > div.chart-bottom > div li div::before
{
    content: '';
    position: absolute;
    z-index: 1;
    width: 1px!important;
    height: 2rem;
    background-color: darkturquoise;
    top:-1rem;
    left:50%
}
.chart > div.chart-bottom > div > ul > li 
{
    padding: 1rem;
}
.chart > div.chart-bottom > div  ul
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 2rem;
    border-top:1px solid darkturquoise

   
}

@media screen and (max-width:1024px) {
    .chart *::after,.chart *::before
    {
        display: none!important;
    }
    .chart > div.chart-bottom > div  ul
    {
        flex-direction: row!important;
        width: 100%!important;
        display: block;
        border:none
    }  
    .chart li
    {
        text-align: center;
        font-size: calc(0.2rem + 3vw);
    }
}

.chart > div.chart-bottom > div ol
{
    list-style-type: none;
}
/*철학*/
.iz600
{
    width: 320px;
    height: 320px;
    object-fit: cover;
    border-radius: 50%;
    transition: all .3s;
}
@media screen and (max-width:768px) {

    
    .iz600
    {
        width: 60vw;
        height: 60vw;
        margin: 0 auto;
        
    }  
    .sub21 div:nth-child(2) p
    {
        font-size: calc(0.3rem + 2vw); 
    }
}

.pt
{

}

.purpose-title
{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    color: white;
    padding: 0px!important;
    
  
}
@media screen  and (max-width:900px) {
  .purpose-title
  {
     grid-template-columns: repeat(2,1fr);  
     row-gap: 1rem;
  }  
}
.purpose-title > div
{
   
   place-self: center;
 text-align: center;
 height: 25vh;  
  width: 100%;
  font-size: 0.96rem;
max-width: 25vh;
line-height: 1.1;


}
.purpose-title > div > p
{
    font-weight: bold;
    font-size: 2rem;
    margin-top: 50%;
    transform: translateY(-80%);
}
.purpose-title > div:nth-child(1)
{
    background-color: #ff5422;
}
.purpose-title > div:nth-child(2)
{
    background-color: #ffac26;
}

.purpose-title > div:nth-child(3)
{
    background-color: #21ddba;
}

.purpose-title > div:nth-child(4)
{
    background-color: #02c0da;
}

.vision6
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.vision6 > div
{
    width: 48%;
    position: relative;
    border: 1px solid #dedede;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
    border-radius: 1rem;
   
    transform: scale(1) translateZ(0);
    transition:all 0.3s ease-in-out;    
    transform-origin: center;
}
.vision6  div:hover
{
    transform: scale(1.3) translateZ(0);
    cursor: pointer;
}
.vision6 > div dt
{
    font-size: 1.6rem;
}
.vision6 > div dd
{
    font-size: 0.8rem;
}
@media screen and (max-width:768px){
    .vision6 > div
    {
        width: 100%;
        font-size: calc(0.3rem + 3vw);
    } 
    .vision6 > div:nth-child(odd)
    {
        background-color: #efefef;
    }
}


/*생산능력,식품사업공통*/
.ability
{
    display: grid;
    grid-template-columns:repeat(3,1fr);
    gap: 2rem;
}

@media screen and (max-width:768px){
    .ability
    {
        grid-template-columns: 100%;
       
    }
    
}

.ability img
{
    border-radius: 1rem;
    margin: 1rem 0px;
    border:1px solid rgba(0, 0, 0, 0.05)!important
}
.ability h5
{
     line-height: 1.2;
    margin: 0.5rem 0;
    text-align: left;
}
.ability ul li
{
    font-size: 1.12rem;
    text-align: left;
    
}
.ability ul li span
{
    font-weight: bold;
    letter-spacing: -1px;
}
.ability .system
{
    font-weight: bold;
    font-size: 1.2em;
}
.ability .system div p
{
    margin-bottom: 1rem;
}

.system-head
{
    display: grid;
    grid-template-columns: 30% 70%;
    gap:0px
}
@media screen and (max-width:1024px) {
    .system-head
    {
        grid-template-columns: 50% 50%;  
    }   
}
@media screen and (max-width:768px) {
    .system-head
    {
        grid-template-columns: 100%;  
    }   
}
/*경영이념*/
.manage-wrap
{
width:100%;
margin: 5rem auto 1rem;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
padding: 5rem 0;

}
.manage-wrap .pc2
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;  
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    height: 360px;
   
}
/*수출*/
.nations li
{
    min-width: 140px;
    border:1px solid #efefef;
    margin-right: -1px;
    padding: 0.5rem 1rem;
    text-align: center;
    height: 3rem;
}
#map svg
{
    max-width:1360px;
    width: 100%;
    min-width: 860px;
    max-height: 500px;
    height: 100%;
    min-height: 360px;
}
.export-text
{
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 20% 1rem 80%;
  grid-template-columns: 20% 80%;
  -ms-grid-rows: 200px;
  grid-template-rows: 200px;
  gap:1rem;
  border-style: dotted;
  border-radius: 1rem;
}
.export-text > *:nth-child(1)
{
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}.export-text > *:nth-child(2)
{
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
@media screen and (max-width:768px) {
 .export-text
 {-ms-grid-columns: 100%;grid-template-columns: 100%;
 row-gap: 1rem;    
 }
}
.export-text > div:nth-child(1)
{
  background-color: crimson; 
  color:white; 
  border-radius: 50%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-indent: -100px;
  font-weight: bold;
  font-size: 1.3rem;
}
.export-text > div:nth-child(1)::after
{
    content:'50%';
    position: absolute;
    z-index: 1;
    top:50%;
    right:0px;
    width: 50%;
    height: 50%;
    background-color:midnightblue;
    color:#fff;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-indent: 0px;
    font-weight: bold;
    font-family: 'Lato', sans-serif;
    font-size: 2.4rem;
}
.export-text > div:nth-child(2)
{

background: #fff;
place-self: center;

}
.export-text > div:nth-child(2)  p
{
font-size: 1.2rem;
}
.m-center
{
position: relative;
width: 360px;
height: 360px;
background-color: gold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 50%;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-transform: scale(1);
        transform: scale(1);
}

.m-core
{
    width: 70%;
    height: 70%;
    background-color: brown;
    border-radius:50% ;
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-ms-flex-line-pack: center;
    align-content: center;
}
.m-core *
{
    width: 100%;
    display: block;
    font-size: 2.3rem;
    line-height: 1;

}
.m-core  h5
{
    color: lemonchiffon!important;
    font-size: 1.5rem;
}
.m-core p
{
    font-size: 1.2rem;
    text-transform: capitalize;
    line-height: 1.1;
}
.m-circle
{
    position: absolute;
    z-index: 2;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #fff;
    font-size: 1rem;
    word-break: keep-all;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-weight: bold;
    color:chocolate;
    line-height: 1.1;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
border: 1px solid rgba(0, 0, 0, 0.1);

}
.m-circle.left
{
left:0px;
-webkit-transform: translateX(-50%);
        transform: translateX(-50%);
}
.m-circle.top
{
  top:0px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); 
}
.m-circle.right
{
    right:0px;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
}

.m-content
{
    
    position: absolute;
    z-index: 1;
        width: 360px;
        height: 110px;
    padding: 1rem 2rem;
    background-color:beige;
    z-index: 1;
    border-radius: 1rem;
    font-size: 1rem;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -0.3px;
    word-break: keep-all;
    
}

.m-content.left
{
left:0px;
-webkit-transform: translateX(-105%);
        transform: translateX(-105%);
}
.m-content.top
{
  top:0px;
  -webkit-transform: translateY(-115%);
          transform: translateY(-115%); 
}
.m-content.right
{
    right:0px;
    -webkit-transform: translateX(105%);
            transform: translateX(105%);
}

@media screen and (max-width:64em) {
    .m-center
    {
        -webkit-transform: scale(0.8);
                transform: scale(0.8);
    }
    .mobile2  .manage-wrap 
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
margin-top: 0rem!important;
padding: 0px!important;

    }
    .m-content-list
    {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;
grid-template-columns: repeat(5,1fr);
-ms-grid-rows: minmax(60px,auto) 10px minmax(60px,auto) 10px minmax(60px,auto);
grid-template-rows: repeat(3,minmax(60px,auto));
gap: 10px;

    }
    .m-content-list > *:nth-child(1)
    {
        -ms-grid-row: 1;
        -ms-grid-column: 1;

    }
    .m-content-list > *:nth-child(2)
    {
        -ms-grid-row: 1;
        -ms-grid-column: 3;

    }
    .m-content-list > *:nth-child(3)
    {
        -ms-grid-row: 1;
        -ms-grid-column: 5;

    }
    .m-content-list > *:nth-child(4)
    {
        -ms-grid-row: 1;
        -ms-grid-column: 7;

    }
    .m-content-list > *:nth-child(5)
    {
        -ms-grid-row: 1;
        -ms-grid-column: 9;

    }
    .m-content-list > *:nth-child(6)
    {
        -ms-grid-row: 3;
        -ms-grid-column: 1;

    }
    .m-content-list > *:nth-child(7)
    {
        -ms-grid-row: 3;
        -ms-grid-column: 3;

    }
    .m-content-list > *:nth-child(8)
    {
        -ms-grid-row: 3;
        -ms-grid-column: 5;

    }
    .m-content-list > *:nth-child(9)
    {
        -ms-grid-row: 3;
        -ms-grid-column: 7;

    }
    .m-content-list > *:nth-child(10)
    {
        -ms-grid-row: 3;
        -ms-grid-column: 9;

    }
    .m-content-list > *:nth-child(11)
    {
        -ms-grid-row: 5;
        -ms-grid-column: 1;

    }
    .m-content-list > *:nth-child(12)
    {
        -ms-grid-row: 5;
        -ms-grid-column: 3;

    }
    .m-content-list > *:nth-child(13)
    {
        -ms-grid-row: 5;
        -ms-grid-column: 5;

    }
    .m-content-list > *:nth-child(14)
    {
        -ms-grid-row: 5;
        -ms-grid-column: 7;

    }
    .m-content-list > *:nth-child(15)
    {
        -ms-grid-row: 5;
        -ms-grid-column: 9;

    }
    .m-head{
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: 1/2;
font-weight: bold;
color:chocolate;
font-size: 1.2rem;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
place-items: center;
    }
    .m-right
    {
-ms-grid-column: 2;
-ms-grid-column-span: 4;
grid-column: 2/6;
background-color: beige;
border-radius: 1rem;
padding: 1rem;
font-size: 1rem;
text-align: left;
    }
}
@media screen and (max-width:48em)
{
    .m-content-list
    {
        place-items: center;
    } 
}


/*시장*/
.sub-goal
{
    position: relative;
    padding: 1rem;
    background-color: #eff5ea;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    font-size: 1rem;
    margin-bottom: 2rem;
}
.sub-goal p
{
    font-size: 0.7rem!important;
    letter-spacing: -1px;
}
.marketing
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    font-size: 1.4rem;
}

.marketing > div
{
    width: 30%;
    position: relative;
    transition: all 0.3s;

}
@media screen and (max-width:1024px) {
    .marketing
    {
        font-size: 1rem;
    }
    .marketing > div
    {
        width: 100%;
        position: relative;
    
    }
    
}
.marketing > div .head
{
    width: 20vh;
    height: 20vh;
    border-radius: 50%;
    background-color: #fff;
    color: white;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    word-break: keep-all;
    margin: 1rem auto;
    position: relative;
    padding: 1rem;
    font-weight: bold;
}

.marketing > div .head::before
{
    content: '';
    position: absolute;
    z-index: 1;
    width: 110%;
    height: 110%;
    top:0px;
    left:0px;
    border:2px solid navy;
    border-radius: 50%;
    transform: translate(-5%, -5%);
   
}
.marketing > div .head::after
{
    content: '';
    position: absolute;
    z-index: 1;
    width: 1px;
    height: 5vh;
    bottom:-5vh;
    left:calc(20vh - 50%);
    border:1px dotted slategray;
   
   
}
.marketing > div:nth-child(1) .head
{
    background-color:navy;
   
}
.marketing > div:nth-child(1) .head::before
{

    border-color: navy;
}

.marketing > div:nth-child(2) .head
{

    background-color:lightslategray!important;
   
}
.marketing > div:nth-child(2) .head::before
{

    border-color: lightslategray!important;
}
   
.marketing > div:nth-child(3) .head
{

    background-color:royalblue!important;
   
}
.marketing > div:nth-child(3) .head::before
{

    border-color: royalblue!important;
}
   
.marketing > div .body
{
    padding: 1rem;
   
    border:1px slategray solid;
    border-radius: 1rem;
    margin-top:5vh
}
.marketing > div .body ul
{
    list-style: disc;
    padding: 0 0 0 1rem;
    
}
.marketing > div .body  li
{
    letter-spacing: -1px;
    font-size: 1.2rem;
    word-break: keep-all;
}

.goal-steps
{
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
overflow: hidden;
width: 90%;
}
.goal-steps > div
{
    width: 33.3333%;
    position: relative;
}
@media screen and (max-width:996px) {
    .goal-steps > div
    {
        width: 100%;
        margin-bottom: 1rem;
    }
}

.goal-steps > div h5
{
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
    color:lightblue
}
.steps-head
{
width: 90%;
height: 10vh;
background-color:dodgerblue;
display: flex;
color: white;
justify-content: center;
align-items: center;
position: relative;
transition: all 0.3s;
font-weight: bold;


}
.steps-head::before
{
    content: '';
    position: absolute;
    z-index: 1;
    border-top: 5vh solid transparent;
	border-bottom: 5vh solid transparent;
	border-left: 5vh solid white;
    top:0px;
    left:0px;
}
.steps-head::after
{
    content: '';
    position: absolute;
    z-index: 2;
    border-top: 5vh solid transparent;
  border-bottom: 5vh solid transparent;
  border-left: 5vh solid dodgerblue;    
    top:0px;
   right:-5vh;
}
.goal-steps > div:nth-child(2) .steps-head
{
    opacity: 0.8;
}
.goal-steps > div:nth-child(3) .steps-head
{
    opacity: 0.7;
}
.steps-body
{
width: 98%;
}
.steps-body .title
{
font-weight: bold;
line-height: 2;
}
.steps-body dt,.steps-body dd{
    display: inline-block;
    font-size: 1rem;
}
.steps-body dd
{
    letter-spacing: -1px;
}
/*역사*/
.timeline {
    position: relative;
    margin: 1rem auto;
    width: 100%;
    max-width: 1200px;
}
.timeline:before {
   /* vertical line*/
    content: '';
    position: absolute;
    top: 10px;
   /* to align with midline*/
    left: 7px;
    width: 2px;
    height: 97%;
    background-color: #ccc;
}
.timeline__block {
    position: relative;
    margin-top: 42px;
    margin-bottom: 42px;
    padding-left: 15px;
    height: auto;
   
}
.timeline__block:last-child {
    margin-bottom: 3em;
}
.timeline__block:after {
    content: "";
    display: table;
    clear: both;
}
.timeline__midpoint {
    position: absolute;
    top: 6px;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: gray;
}
.timeline__midpoint:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    width: 15px;
    border-top: 1px solid #ccc;
}
.timeline__content {
    position: relative;
    margin-left: 20px;
}
.timeline__content p + p {
    padding-top: 0;
}
.timeline__content:after {
    content: "";
    display: table;
    clear: both;
}
.timeline__midpoint--highlight > .timeline__year {
    display: none;
}
/* timeline typography */
.timeline__content .timeline__year {
    padding-top: 6px;
    color: black;
    text-align: left;
    line-height: 1;
    transform: translateY(-5px);
    font-size: 1.1rem;
}
.timeline__midpoint--highlight .timeline__year {
    color: #fff;
    line-height: 4.5;
}
.timeline__year, .timeline__midpoint--highlight + .timeline__content {
    font-weight: 600;
}
.timeline__content > p,article.wrap {
    font-size: calc(0.2rem + 3vw);
}

/* 히스토리 */
@media (min-width: 768px) {
    .timeline__content > p,article.wrap {
        font-size: calc(0.2rem + 1vw);
    }
   
    .timeline:before {
       /* vertical line */
        left: 50%;
        margin-left: -1px;
   }
    .timeline__midpoint {
        left: 50%;
        margin-left: -8px;
   }
    .timeline__midpoint:before {
        width: 40px;
   }
    .timeline__midpoint:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 16px;
        width: 40px;
        border-top: 1px solid #c5e1ec;
   }
    .timeline__midpoint--highlight {
        top: 0;
        width: 76px;
        height: 76px;
        margin-left: -29px;
        margin-left: -38px;
        text-align: center;
   }
    .timeline__midpoint--highlight.no-top-margin {
        margin-top: 0;
   }
    .timeline__midpoint--highlight .timeline__year {
        display: block;
   }
    .timeline__midpoint--highlight:before, .timeline__midpoint.timeline__midpoint--highlight:after {
        content: none;
   }
    .timeline__midpoint--highlight, .timeline__midpoint--highlight + .timeline__content {
        margin-top: 2em;
        margin-bottom: 2em;
   }
    .timeline__content {
        width: 50%;
   }
    .timeline__content .timeline__year--mobile {
        display: none;
   }
    .timeline__content--left {
        margin-left: -6%;
   }
    .timeline__content--left .timeline__year {
        left: 128%;
   }
    .timeline__year {
        position: absolute;
        width: 100%;
        margin-top: 0;
   }
    .timeline__text--left {
        padding-right: 25px;
        text-align: right;
   }
    .timeline__content--right {
        float: right;
        width: 53%;
        left: 11%;
   }
    .timeline__content--right .timeline__year {
        right: 134%;
        text-align: right;
   }
    .timeline__content--right .timeline__text--right {
        margin-top: 0;
   }
  .timeline__img {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
   }
    .timeline__content--left .timeline__img {
        left: 127%;
   }
    .timeline__content--right .timeline__img {
        right: 133.5%;
   }
}
/*수출*/
{
    font-size: 12px!important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%; 
    min-width: 680px;
    height: 360px
}

/*총판사업*/
.branches
{
    position: relative;
    margin-bottom: 1rem;
    padding: 2rem 0;
    border-width: 0px;
    border-style: solid;
    border-color: lightgray;
}
.branches > div
{
    width: 33.3333%;
}
@media screen and (max-width:768px) {
    .branches > div
    {
        width: 100%;
        margin-bottom: 1rem;
    }
    
}
.branches .txt2
{
    padding: 1rem;
    font-size: 1rem;
}
.branches .txt2 ul
{
    list-style: disc;
    list-style-position:inside;
  
}
.branches  li{
    font-size: 1.2rem;
    letter-spacing: -1px;
}
.branches h5
{
    text-align: left!important;
}
/*브랜드*/
.brand
{
    position: relative;
}
.brand img
{
    width: 360px;
}
/**/
.laver-wrap
{
    position: relative;
    font-size: 1.2rem;
}
.laver-wrap h5,.text-contents h5
{
     line-height: 1.2;
    margin: 0.5rem 0;
    font-weight: bold;
    color:darkslateblue;
    
}
.laver-wrap  ul
{
    list-style-type: disc;
    list-style-position: inside;
}
.laver-wrap ol
{
    list-style-position: inside;
    list-style-type: decimal-leading-zero;
    padding: 1rem;
}

.laver-buy ul
{
list-style: none!important;
padding: 1rem;
}
.laver-buy li:nth-child(2n+1)
{
color:slategray
}
{
 
   display: -webkit-box; 
   display: -ms-flexbox; 
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
   padding: 0.5rem 0;
}
.laver-buy dt
{
    width: 36px;
}
.laver-buy .lb-q,.laver-buy .lb-a
{
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
}
.laver-buy  dd
{
    line-height: 2rem;
}
/*제조공정*/
.process-wrap
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    position: relative;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.process-wrap dt
{
    font-size: 1rem;
    margin-bottom: 1rem;
}
.process-wrap dd
{
    font-size: 1.1rem;
    line-height: 1.2;
    letter-spacing: -.4px;
    color:#666;
    word-break: keep-all;
}
.process-wrap> div
{
    width: 30%;
    position: relative;
    margin-bottom: calc(1rem + 2vh);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
@media screen and (max-width:85em) {
   .process-wrap> div
    {
        width: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    
}

@media screen and (max-width:48em) {
   .process-wrap> div
    {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .process-wrap> div > div
    {
        width: 100%!important;
        display: block;
        margin-bottom: 1.3rem;
    }
    
}

.process-wrap .figure 
{
    width: 30%;
    position: relative;
    
}

.process-wrap .figure span
{
    position: absolute;
    z-index: 1;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    top:3px;
    left:10px;
    color:black;
    opacity: 0.6;
    
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;  
}
.process-wrap .text
{
    width: 65%;
}
.process-wrap  .figure > img
{
    max-width: 100%;
    border-radius: 1rem;
}

/*비디오*/
.video-wrap
{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.video-wrap> div
{
    padding: 0 1rem;
    width: 50%;
}
@media screen and (max-width:768px) {

 .video-wrap> div
 {
     padding: 0;
     width: 100%;
     margin-bottom: 1.2rem;
 }   
}

/*개인정보*/
.privacybody
{
    position: relative;
}
.privacybody div
{
    padding: 1rem 0;
}
.privacybody  p ,.privacybody h4
{
    margin-bottom: 1rem;
}

@media screen and ( max-width:1450px) {
    #nutritionfacts
    {
        display: none!important;
    }
}

#nutritionfacts { 
    background-color:white; 
    border:1px solid black; 
    padding:3px; width:250px;
	margin-left:30px; 
    position: absolute;
    z-index: 1;
    top:100px;
    right:0px;
}
#nutritionfacts td { 
    color:black; 
    
    font-size:8pt; 
    padding:0; 
}
#nutritionfacts td.header { 
    
    font-size:28px; 
    white-space:nowrap; 
	font-weight:bold
}        
#nutritionfacts div.label { 
    float:left; 
    
}
#nutritionfacts div.serving { 
    
    font-size:8pt; 
    text-align:center; 
}
#nutritionfacts div.weight { 
    display:inline; 
   
    padding-left:1px; 
}
#nutritionfacts div.dv { 
    display:inline; 
    float:right; 
    font-family:'Noto Sans KR', Georgia,Helvetica, Arial, serif, Apple Gothic, Dotum; 
}
#nutritionfacts table.vitamins td {  
    white-space:nowrap; 
    width:33%; 
}
#nutritionfacts div.line { 
    border-top:1px solid black; 
}
#nutritionfacts div.labellight { 
    float:left; 
    }
#nutritionfacts .highlighted {
    border:1px dotted grey;
    padding:2px;
}


/*상품목록*/
div[class^="product-"]
{
    position: relative;
}
.product-category
{
    margin: 2rem 0;
}

.product-category ul
{
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.product-category li
{
    width: auto;
    min-width: 100px;
    text-align: center;
    height: 2.5rem;
    border:1px solid rgba(222,222,222,0.5);
    background-color: #fff;
    margin-right: -1px;
}
.product-category li a
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}
.product-category li.on
{
    z-index: 1;
}
.product-category li.on a{
    background-color: midnightblue;
    color:whitesmoke;
    z-index: 1;

}
.product-sort
{
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[10];
grid-template-columns: repeat(10,1fr);
margin: 2rem 0 1rem;
}
.product-sort p
{
    -ms-grid-column: 1;
    grid-column: 1;
}

.product-sort ul
{
    -ms-grid-column: 5;
    -ms-grid-column-span: 6;
    grid-column: 5/11;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.product-sort li
{
    padding: 0;
   
    
}
.product-sort li a
{
    font-size: 0.96rem;
    max-width: 100%;
    padding: 0 1rem;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.product-sort li  strong
{
    font-size: 0.96rem;
}
.product-list
{
display: -ms-grid;
display: grid;
-webkit-column-gap: 2rem;
   -moz-column-gap: 2rem;
        column-gap: 2rem;
row-gap: 3rem;
-webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
margin: 1rem 0;
}

.product-list .item
{
    background: no-repeat;
    background-position: 0 0;
    background-size: cover;
}
.product-list .item a
{
    width: 100%;
    height: 100%;
    position: relative;
    object-fit: cover;
    display: block;
    z-index: 9999;
}
.product-list .item i
{
position: absolute;
z-index: 10;
top:86%;
right:5%;
font-size: 1.5rem;
color: lightsteelblue!important;
}
.product-list figure 
{
   
    border:1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    position: relative;
   
   object-fit: cover;
}
.product-list figure  a
{
    height: 100%;
    display: block;
}
.product-list  figcaption
{
    display: none;
    visibility: hidden;
}
.product-list figure img
{
    opacity: 0;
}
.product-subject
{
    font-size: 1.45rem;
    font-weight: bold;
    color:black;
    line-height: 1;
    margin: 0.5rem 0;
}

.product-subject span
{
    font-size: 0.8em;
}
.product-list .info2
{
   height: 2.6em;
   position: relative;
   font-size: 0.96rem;
   line-height: 1.3;
   overflow: hidden;
   margin-bottom: 0.5rem;
    
}
.product-list .info2::after
{
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
    height: 1.2em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);   
}

.product-list .sijung-price
{
font-size: 0.9rem;
text-decoration: line-through;
opacity: 0.8;
}
.product-list .price
{
font-size: 1.6rem;
font-weight: bold;
color:var(--main-color);
line-height: 1.3;
font-family: 'Lato', sans-serif;
}

.product-list .sold-out
{
font-weight: bold;
}

.product-list .goods-info
{
font-size: 0.96rem;
letter-spacing: normal;
}

.product-list .event-icon
{
margin: 0.5rem 0;
}


@media screen and (min-width:1024px) {
    .product-list
    {
        -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4,1fr);
grid-template-rows: repeat(auto-fill,minmax(330px,auto));
    }
    
}

@media screen and (max-width:1024px) {
    .product-list
    {
        -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(auto-fill,minmax(350px,auto));
    }
    
}

@media screen and (max-width:768px) {
    .product-list
    {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(auto-fill,minmax(300px,auto));
    }
    
}

@media screen and (max-width:640px) {
    .product-list
    {
        -ms-grid-columns: (1fr)[1];
        grid-template-columns: repeat(1,1fr);
grid-template-rows: repeat(auto-fill,minmax(300px,auto));
    }
    
}



/*******************************상세상품기본정보*****************************/


.sub-view-header .sv-header
{
	margin: 1rem 0;
    padding: 0!important;    
position: relative;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
}

.sv-header > div
{
	border: 1px solid rgba(222,222,222,0.5)!important;
	position: relative;
    width: 33%;


	
}


@media screen and (max-width:912px) {
    
    .sv-header
    {
        position: relative;
   display: flex;
   flex-direction: column;
    }
    .sv-header > div
    {
        position: relative;
        width: 100%;
        display: block;
        margin-bottom: 1rem;
    }

}



.sv-1
{
	background-color: transparent!important;
	border: none!important;
	padding: 0!important;
    -ms-grid-column: 1;
    grid-column: 1;
    overflow: hidden;
}
.sv-1 .imgBx
{
	-o-object-fit: cover;
	   object-fit: cover;
	position: relative;
	
}
.imgZoom
{
	position: absolute;
	z-index: 5;
	bottom:0px;
	right:0rem;
	width: 36px;
	height: 36px;	
	background-color:rgba(0,0,0,.3);
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
	transform-origin: center center;

}
.imgZoom a
{
	
	width:100%;
	height: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
    color: white;
	
}
.imgZoom svg
{
	color:white;
	width:24px
	
}
.goods_content02 img{
	max-width: 100%;
	display: block;
	margin: 0 auto;
}


@media screen and (min-width:768px) {
    

.sv-1 
{
	background-color: #fff;
  
}
}
.sv-2,.sv-3{
	font-size: 1rem;
    padding: 1rem;
}


.sv-option dl
{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 1rem 0;
}
.sv-option  dt
{
    width: 15%;
    min-width: 100px
}

.sv-option  dl:first-child dd {
	font-size: 1.3rem;
	font-weight: bold;
	color: red !important;
}




.sv-count
{
	margin-top:1rem;
}

.sv-count h5
{
	font-size: 1rem;
	font-weight: 600;
    margin-bottom: 1rem;
}
.order-caution
{
	
}
.order-count
{
	
}
#span_price_str
{
    font-size: 1.6rem;
    line-height: 1.1;
    margin: 0;
}
.font_priceb
{
    font-size: 0.9rem;
    padding-left: 0.6rem;
    
}
.order-count-input
{
	display: flex;
    justify-content: flex-start;
    align-items: center;
}
.order-count-input i
{
	font-size: 2rem;
}
.order-count-input input
{
	margin: 0 5px; 
}
.order-count-input  a
{
	opacity: 0.5;
}
.order-count-input  a:hover,.order-count-input  a:focus
{
	opacity: .9;
}

.sv-mini-cal
{
	color: red;
}
.sv-mini-cal strong
{
	font-weight: 800;
}
.sv-3 p{
	line-height: 1.5;
}

.sv-u1 
{
    margin-bottom: 1rem;
}

.orders a:hover{
	color:#d3242c
}
.orders-main a
{
position: relative;
	padding: 16px 20px;
	
	margin: 5px;
	display: inline-block;
	text-decoration: none;
	color:block;
	letter-spacing: -0.2px;
	text-transform: uppercase;
	-webkit-transition: 0.55s;
	-o-transition: 0.55s;
	transition: 0.55s;
	font-size: 1.2em;
	font-weight: 500;
}
.orders-main a span
{
	position: absolute;
	display: block;
	background: red;
}
.orders-main a span:nth-child(1)
{
	left: 0;
	bottom: 0;
	width: 1px;
	height: 100%;
	transform:scaleY(0);
	transform-origin: top;
	transition: transform 0.25s;
}

.orders-main a:hover span:nth-child(1)
{

	transform:scaleY(1);
	transform-origin: bottom;
	transition: transform 0.25s;
}

.orders-main a span:nth-child(2)
{
	left:0;
	top: 0;
	width: 100%;
	height: 1px;
	transform:scaleX(0);
	transform-origin: right;
	transition: transform 0.25s;
	-webkit-transition-delay: 0.25s;
	-o-transition-delay: 0.25s;
	transition-delay: 0.25s;
}

.orders-main a:hover span:nth-child(2)
{

	transform:scaleX(1);
	transform-origin: left;
	transition: transform 0.25s;
	-webkit-transition-delay: 0.25s;
	-o-transition-delay: 0.25s;
	transition-delay: 0.25s;
}


.orders-main a span:nth-child(3)
{
	right: 0;
	bottom: 0;
	width: 1px;
	height: 100%;
	transform:scaleY(0);
	transform-origin: top;
	transition: transform 0.25s;
	-webkit-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.orders-main a:hover span:nth-child(3)
{

	transform:scaleY(1);
	transform-origin: top;
	transition: transform 0.25s;
	-webkit-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	transition-delay: 0.5s;
}


.orders-main a span:nth-child(4)
{
	left:0;
	bottom: 0;
	width: 100%;
	height: 1px;
	transform:scaleX(0);
	transform-origin: left;
	transition: transform 0.25s;
	-webkit-transition-delay: 0.75s;
	-o-transition-delay: 0.75s;
	transition-delay: 0.75s;
}

.orders-main a:hover span:nth-child(4)
{

	transform:scaleX(1);
	transform-origin: right;
	transition: transform 0.25s;
	-webkit-transition-delay: 0.75s;
	-o-transition-delay: 0.75s;
	transition-delay: 0.75s;
}


.orders-main a:hover
{
	color:#111;
	
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	-webkit-transition-delay: 1s;
	-o-transition-delay: 1s;
	transition-delay: 1s;
	
}
.orders-main a:nth-child(1)
{
	background-color:goldenrod;
	color:white
}
.orders-main a:nth-child(2)
{
	background-color: gold;
	color:white
}
.orders-main a:nth-child(3)
{
	background-color: darkgoldenrod;
	color:white
}
.orders-main
{
	
}
.orders-inter
{
text-align: left;	
}
.orders-inter a
{
	padding: 10px 20px;
	display: inline-block;
	opacity: 0.6;
}
.orders-inter a:hover
{
	opacity: 1;
}

.orders-inter a i
{
	margin-right: 5px;
}

.ofixed
{
	position: fixed;
	z-index: 9999;
	bottom: 10vh;
	transition: 0.1s;		
	width: 100%;
	max-width: 360px;
	min-width: 300px;
	background-color:rgba(0,0,0,0.8);
	border-radius: 6px;
	height: 3.6rem;
	text-align: center;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 3px 3px 3px rgba(0,0,0,.3);
	
}
@media (max-width:1024px)
{
.ofixed
	{
		left: 50%;
		-webkit-transform:translateX(-50%) ;
	transform:translateX(-50%);
	}
}
@media (min-width:1024px)
{
.ofixed
	{
		left: 86vw;
		-webkit-transform:translateX(-50%) ;
	transform:translateX(-50%);
	}
}
.ofixed a
{
padding: 0.5rem 2rem!important;
font-size: 1rem!important;
}
/*뷰페이지 sns*/
.sv-sns 
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    

}
.sv-sns  span
{
    text-align: center;
}
.sv-sns a
{
	-webkit-transition: 0.5s;
	transition: 0.5s;
	
}
.sv-sns a:hover{
	opacity: 0.6;
-webkit-transform:scale(1.2) ;
transform:scale(1.2);
	top:-5px
}


/**************************상세페이지 구분*****************************/
article[id^="sub-view"] nav
{
	height: 48px;
}
article[id^="sub-view"]  ul
{
	padding: 0;
	margin: 0;
}
article[id^="sub-view"] ol
{
    padding: 1rem;
}

article[id^="sub-view"] ul {
    display:block;
    font-size:0;
     width: 100%;
}
 article[id^="sub-view"] li {
    position:relative;
    width:100%;
    min-width:100px;
    border:1px solid #ccc;
    border-left-width:0;
    background:#fafafa;
    
}
 article[id^="sub-view"] li:first-child {
    border-left-width:1px
}
 article[id^="sub-view"] li.on {
    border-bottom:0;
    background:none
}
 article[id^="sub-view"] li.on:before {
    content:'';
    display:block;
    position:absolute;
    top:-1px;
    right:-1px;
    bottom:-1px;
    left:-1px;
    border:1px solid #000;
    border-bottom:0;
    z-index:1
}
 article[id^="sub-view"] li > a {
    display:block;
    height:40px;
    line-height:40px;
    padding:0 5px;
    font-size:14px;
    color:#888;
    text-align:center;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
}
 article[id^="sub-view"] li.on > a {
     color:#000
}



/*사은품과 테이블조정*/
.sub-view-contents caption {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color:#18243D;
    text-align: left;
    caption-side:top!important;
	font-size: 1.1rem;
}
.sub-view-contents .table-bordered
{
	border: 1px solid #9C9C9C!important;
	
}

.gift,.product-basic-info,.product-vessel-info
{
	font-size: 0.96rem;
}




.product-table
{
	border-bottom: 1px solid #dee2e6;
    min-width: 640px;
    
}

.product-table th,.product-vessel-info td
{
	text-align: center;
    white-space: nowrap;
    font-size: 0.9rem;
    letter-spacing: -1px;
    vertical-align: middle;
    font-weight: bold;
}
.product-table td
{
    font-size: 0.96rem;
    letter-spacing: -1px;
}
/*용기*/

/*교환반품내용*/

.delivery
{
	margin: 1rem 0;
}
.delivery h3
{
	font-size: 1.1rem;
}
.delivery h4
{
	font-size: 1.2em;
	margin: 1rem 0;
}
.delivery ul
{
	padding: 0;
	margin:10px 0
}
.delivery  li
{
	width: 100%!important;
	border: none!important;
	text-align:left!important;
	font-size: 0.96rem;
    line-height: 1.3;
}
.delivery ol li
{
	padding-left: 1em;
}


/*후기상품문의 겸용*/
.afternote
{
	padding: 1rem 0;
	
}
.empty
{

    width: 100%!important;
    text-align: center;
}
.afternote > div
{
	border-style: dashed!important;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;	
	margin-bottom: 1rem;
	height: 176px;
	overflow: hidden;
}

/*2022*/
.qnaitem 
{
    display: grid;
    grid-template-columns: 100%;
    row-gap: 1rem;
}
.qnaitem > div
{
	min-height: 176px;
	height:100%;
    width: 100%;
	
}

.new-list22 td:not(:nth-child(2)),.new-list22 th
{
    text-align: center;
}
.qna-top h4

{
font-size: calc(1rem + 0.3px);
}

.qna-cotent
{
    font-size: 1em;
    padding: 0.5rem 0;
    line-height: 1.1;
}
.qna-date,.qna-no
{
    font-size: 0.8rem;
    opacity: 0.7;
}
.afternote div:nth-child(2n)
{
	background-color:rgba(248,248,248,0.76);
}
.afternote p
{
	font-size: 0.96rem;
	margin-bottom: 0.5rem!important;
}
.afternote p:nth-child(1)
{
	font-size: 11px;
}
.afternote h4
{
	font-size: 1.2rem;
}
.afternote p:last-child
{
	font-size: 13px;
	font-weight: 300;
}

.table-status
{
	font-size: 0.96rem;
}
.table-footer-btn a,a.btn-norl
{
	position: relative;
	padding: 16px 20px;
	font-size: 0.9rem;
	display: inline-block;
	text-align: center;
	border: 1px solid #eee;
	margin: 0 1rem;
	transition: 0.5s;
}
.table-footer-btn a:hover,a:hover.btn-norl{
	border: 1px solid #E89E00;
	transition-delay: 0.5s;
	color: #E89E00
}


.qna-bottom 
{
	font-size: 0.96rem;
	line-height: 1.5;
}
.qna-bottom p
{
	color:gold;
	font-size: 11px!important;
}


/*수상*/
.prize-wrap
{
    position: relative;
    width: 100%;
    display: grid;
    padding: 0;
    margin: 1rem 0;
    gap: 3rem 1rem;
}
.prize-wrap *::after
{
    background-color: rgba(0,0,0,0)!important;
    z-index: -1!important;
}
.prize-wrap figure
{
    margin: 0;
    
}
.prize-wrap  img
{
    border:1px solid rgba(0, 0, 0, 0.1)
}
.prize-wrap p
{
    font-size: 0.9rem;
    padding: 0 1rem;
}
@media screen and (min-width:1360px) {
    .prize-wrap
    {
        grid-template-columns: repeat(5,1fr);
    }
    
}

@media screen and (max-width:1360px) {
    .prize-wrap
    {
        grid-template-columns: repeat(4,1fr);
    }
    
}
@media screen and (max-width:1024px) {
    .prize-wrap
    {
        grid-template-columns: repeat(3,1fr);
    }
    
}
@media screen and (max-width:768px) {
    .prize-wrap
    {
        grid-template-columns: repeat(2,1fr);
    }
    
}
@media screen and (max-width:640px) {
    .prize-wrap
    {
        grid-template-columns: 100%;
    }
    
}

/*게시판*/
.ui-input
{
    border: none!important;
    box-shadow: none!important;
}


/*출석체크*/
.attendance .Img img{width:100%;height:auto;}
.attendance .calendar{background-color:var(--main-color);padding:50px 20px;}
.attendance .days{overflow:hidden;text-align:center;margin-bottom:20px;}
.attendance .days a{display:inline-block; vertical-align: middle;}
.attendance .days span{display:inline-block;color:#fff;font-size:3rem;font-weight:600;vertical-align: middle;font-family: Montserrat;margin:0 20px;}
.attendance .week{background-color:#043068;}
.attendance .week th{padding:10px 0;color:#fff;font-size:1.25rem;text-align:center;}
.attendance .week td{font-size:1.2rem;height:100px;padding:5px;border-width:0px 1px 1px; border-top-style: solid;border-color:#ddd;;vertical-align:top;}
.attendance .week td p{vertical-align:top;}
.attendance .week td p img{width:auto;height:auto;}
.attendance .check{text-align:center;margin:30px 0;}
.attendance tr{border-bottom: 1px solid #ddd;}
.attendance .check a{display:inline-block;text-decoration:none;background-color:#000;color:#fff;font-size:2rem;padding:16px 70px;border-radius:2px;}
@media screen and (max-width: 768px) { 
	.attendance .days{margin-bottom:10px;}
	.attendance .days span{font-size:2rem;}
	.attendance .calendar{padding:20px 10px;}
	.attendance .week td{height:60px;}
	.attendance .week td p img{width:60%;height:auto;}
	.attendance .check{margin:15px 0;}
	.attendance .check a{background-color:#441E1F;color:#fff;font-size:1.7rem;padding:12px 80px;border-radius:5px;}
}