@charset "utf-8";

/**************************************/
/*********  모바일 기본 설정  ***********/

/*********  브라우저 초기화  및 전체 설정***********/

* {
    margin: 0;
    padding: 0;
    font-family: 'NanumSquareNeo';
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    vertical-align: top;
}

address {
    font-style: normal;
}

small {
    font-size: 100%;
}

#wrap {
    width: 100%;
}

.behind {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    left: -1px;
    top: 0;
}

.hidden {
    width: 0;
    height: 0;
    font: 0/0 '';
    visibility: hidden;
}

/****** 헤더 영역 ******/

.y_line {
    background-color: #f6c41d;
    height: 10px;
}

#header {
    max-width: 1200px;
    margin: 0 auto;
}

.header_margin {
    position: relative;
    height: 54px;
}

.lnb_top {
    width: 100%;
}

.lnb_top > div {
    float: left;
}

.logo {
    width: 180px;
}

.logo > a {
    display: block;
    margin-top: 12px;
    margin-left: 24px;
}

/* 햄버거 버튼  */

.btn {
    width: 30px;
    height: 30px;
    float: right;
    position: fixed;
    top: 40px;
    right: 20px;
    z-index: 99;
    cursor: pointer;
}

.btn > span {
    width: 100%;
    height: 4px;
    position: absolute;
    border-radius: 40px;
    transition: all 0.3s ease-in-out;
    background-color: #000;
}

.line1 {
    top: 0;
}

.deg45 {
    transform: translateY(13px) rotate(45deg) scaleX(1.3);
}

.line2 {
    top: 13px;
}

.y90deg {
    transform: rotateY(90deg);
}

.line3 {
    bottom: 0;
}

.deg-45 {
    transform: translateY(-13px) rotate(-45deg) scaleX(1.3);
}


/******  주메뉴  ******/

.lnb {
    position: fixed;
    z-index: 10;
    left: auto;
    right: -280px;
    top: 0;
    bottom: 0;
    transition: all 0.3s ease-in-out;
    background-color: #fff;
    width: 280px;
}

.scale {
    right: 0;
    
}

.menu {
    width: 260px;
    margin-top: 100px;
    float: right;
}
.menu > li {
    position: relative;
}

.menu > li:nth-child(1) {
    border-top: 1px solid #e8e8e1;
    border-bottom: 1px solid #e8e8e1;
}

.menu > li:nth-child(2) {
    border-bottom: 1px solid #e8e8e1;
}

.menu > li:nth-child(3) {
    border-bottom: 1px solid #e8e8e1;
}

.menu > li:nth-child(4) {
    border-bottom: 1px solid #e8e8e1;
}

.menu > li > a {
    display: block;
    text-align: left;
    color: #000;
    font-size: 1em;
    font-family: 'NanumSquareNeoBold';
    color: #000; 
    line-height: 3;
    
}

/*메뉴 서브버튼, 라인*/

.s_btn {
    position: absolute;
    width: 12px;
    top: 21px;
    right: 15px;
    transition: all 0.5s;    
}

.btn_rotate {
    transform: rotate(180deg);
}

.s_line {
    position: absolute;
    width: 1px;
    height: 30px;
    top: 10px;
    right: 50px; 
    background-color: #e8e8e1;
}

/*서브메뉴*/

.sub {
    width: 100%;
}

.sub a {
    display: block;
    line-height: 40px;
    font-weight: normal;
    font-size: 0.8em;
    color: #333;
    background-color: #fff;
    padding-left: 15px;
}



/* 배경색 - 메뉴 원래대로 */

.bgclick {
    width: 100%;
    height: 100%;
    z-index: 5;
    position: fixed;
    top: 0;
    background-color: #fff0;
    display: none;
}

.show {
    display: block;
}



/****** 콘텐츠 영역 ******/

section {
    padding: 0 10px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/****  슬라이드 배너 ****/
#banner {
    width: 100%;
    margin-bottom: 50px;
    overflow: hidden;
    position: relative;
}

.slide {
    width: 300%;
    overflow: hidden;
    position: relative;
    left: -200%;
}

.slide > li {
    width: 33.333333%;
    float: left;
}

.slide > li > a > img {
    width: 100%;
}

/* 앞으로 뒤로 버튼 */
.prev,
.next {
    width: 2.5em;
    height: 2.5em;
    position: absolute;
    top: calc(40% - 2.5em / 2);
    cursor: pointer;
    position: absolute;
}

.prev {
    left: 10px
}

.next {
    right: 10px
}

.prev span,
.next span {
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    box-sizing: border-box;
    top: 0.5em;
    left: 0.5em;
}

.prev span {
    transform: rotate(-135deg);
}

.next span {
    transform: rotate(45deg);
}

/****  아이콘 배너 ****/

#icon_banner {
    margin: 0 auto 100px auto;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.icon {
    display: grid;
    height: 36em;
    grid-gap: 20px;
    grid-template-columns: auto;
}

.icon > li > img {
    
}

.icon > li > h3 {
    font-size: 1.3em;
    line-height: 2.5;

}

.icon > li > p {
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.7;
}

/****  제품 리스트****/
#index_products {
    margin: 0 auto 100px auto;
    text-align: center;
    position: relative;
}

.products {
    margin: 0 auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;
}

.products > li {
    width: 285px;
    overflow: hidden;
    border-radius: 20px;
    position: relative;
    margin: 0 auto;
}

.products > li > a {
    display: block;
    color: #000;
}

.products > li > a:hover .p_scale{
   transition: all 0.3s;
    transform: scale(1.1);
}

.products > li > a > span {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1.5;
    font-weight: bold;
    font-size: 14px;
}






/****  뉴스 ****/
#index_news {
    margin: 0 auto 100px auto;
    text-align: center;
    position: relative;
}

.i_news {
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr;
}

.i_news > li {
    background-color: #fffbf1;
}

.i_news > li > img {
    width: 100%;

}

.i_news > li > div {
    margin-top: 40px;
}

.i_news > li > div > a > img {
    margin-bottom: 40px;
}

.i_news > li > div > h3 {
    font-size: 1.2em;
    line-height: 3;

}

.i_news > li > div > p {
    width: 80%;
    margin: 0 auto;
    font-size: 0.8em;
    text-align: justify;
    line-height: 1.6;
}



/****  관련문의 ****/
#index_about {
    margin: 0 auto 100px auto;
    text-align: center;
    position: relative;
}

#index_about > span {
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #fde2e1;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#index_about > p {
    font-size: 0.8em;
    padding-top: 25px;
    line-height: 1.2;
    color: #7c7c7c;
}

#index_about > h2 {
    line-height: 1.5;
    color: #7c7c7c;
}

.about {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;
    padding-top: 50px;
}

.about > li {
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
}



.about > li  img{
    width: 100%;
}

.about > li >div:nth-child(1) {
    margin-bottom: 30px;
}

.about_tit {
    font-size: 1.2em;
    line-height: 2;
}

.about_cont {
    font-size: 0.8em;
    line-height: 1.5;
    color: #7c7c7c;
}





/*여백*/

.marginb100 {
    margin-bottom: 100px;
}

.marginb50 {
    margin-bottom: 50px;
}

.marginb30 {
    margin-bottom: 30px;
}


/*****************섹션별 페이지*****************/

#sec02, #sec03, #sec04, #sec05, #sec06, #sec07, #sec08, #sec09, #sec10 {
    text-align: center;
}

/*막대기모양*/

.s_bar {
    width: 80px;
    height: 4px;
    position: relative;
    margin: 0 auto 50px auto;
}

.left {
    width: 40px;
    height: 3px;
    background-color: #f6c41d;
    position: absolute;
    top: 0;
    left: 0;
}

.right {
    width: 40px;
    height: 3px;
    background-color: #daa803;
    position: absolute;
    top: 0;
    right: 0;
}

.ss_bar {
    width: 3px;
    height: 22px;
    position: relative;
    float: left;
}

.top {
    width: 3px;
    height: 11px;
    background-color: #f6c41d;
    position: absolute;
    top: 0;
    left: 0;
}

.bot {
    width: 3px;
    height: 11px;
    background-color: #daa803;
    position: absolute;
    bottom: 0;
    left: 0;    
}

/************기업소개***********/
.company01_1_img{
    margin-bottom: 50px;
    position: relative;
}

.company01_1_img > img {
    width: 100%;
}

.company01_1_img > span {
    width: 200px;
    height: 45px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #f6c41d;
    color: #fff;
    line-height: 45px;
    
    font-size: 16px;
    display: none;
}

.company01_1 > h3 {
    font-size: 30px;
    margin-bottom: 30px;
}

.company01_2_intro {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr; 
}

.company01_2 > ul > li {
    margin-bottom: 50px;
}

.company01_2 > ul > li > img {
    width: 100%;
}

.company01_2_tit {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 30px;
}

.company01_2_cont {
    font-size: 14px;
    line-height: 1.5;
    text-align: justify;
}

.circle_line {
    position: relative;
    width: 165px;
    height: 65px;
    margin: 0 auto 30px auto;
}

.line_p > p {
    font-size: 20px;
    line-height: 3; 
}

.line_p {
    width: 165px;
    height: 65px;
    border: 3px solid #ea4d5f;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.company01_2_tit > span {
    color: #ea4d5f;
}

.company01_circle {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;
}

.company01_circle > li {
    margin: 0 auto;    
}

.company01_list {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;   
}

.company01_list > li {
    margin: 0 auto;   
}

/*테이블*/

.table_board{
	width: 100%;
	margin: 25px auto 100px auto;
	border-top: 2px solid #000;
	border-width:1px 0;    
    border-collapse:collapse;
    color: #000;
}

.table_board th {
    width: 30%;
    font-size:20px;
	line-height: 50px;
    text-align:center;
    background-color: #f9f9f9;
}

.table_board td {
    width: 70%;
    font-size:16px;
	line-height: 36px;
    padding: 0 25px;
}

.b_title{
     text-align: left;
    padding-left: 10px;
}

.center{
	font-size:14px;
	text-align:center;    
}

.table_board th,.table_board td, .table_board tr {
	border: 1px solid #ddd;
	border-width:1px 0;
    border-collapse:collapse;
}




/*경영방침*/

.company02_tit {
    text-align: left;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: auto;     
}

.company02_tit h3 {
    margin-left: 10px;
}

.company02_text {
    background-color: #f9f9f9;
    line-height: 1.5;
    padding: 50px;
    border-radius: 20px;
    font-size: 14px;
}

.company02_1 {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;  
}

.company02_1 > li {
    background-color: #f9f9f9;
    padding: 50px;
}

.company02_1 > li > p {
    margin-bottom: 30px;
}

.company02_1 > li > p:nth-child(1) {
    color: #f6c41d;
    font-weight: bold;
    font-size: 20px;
}

.company02_1 > li > p:nth-child(3) {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;    
}

.company02_2 {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;     
}

.company02_2 > li {
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #f6c41c;
}

.company02_2 > li:nth-child(5) {
    grid-column: span 2;
}



/*연혁*/
.company03 {
    
}   


.company03_btn {
    display: none;
}

.company03_btn > li {
    border: 1px solid #ea4d5f;
    border-radius: 20px;
    padding: 20px;
    cursor: pointer;
    font-size: 30px;
    font-weight: bold;
    font-family: 'Myriad Pro';
    color: #ea4d5f;
}

.company03_btn > .check {
    background-color: #ea4d5f;
    color: #fff;
}





/*위치*/
.company04 {

}

.company04_table {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;      
}

.map > img {
    width: 100%;
}

.table_board > caption {
    font-size: 20px;
    font-weight: bold;
    
}

.company04_table > li > table_board {
    margin: 0;
    padding: 0;
}


/************브랜드소개***********/

.brand {

}

.brand_01 {
    font-size: 14px;
    line-height: 1.7;
}

.brand_02 {
    position: relative;
    width: 240px;
    height: 112px;
    line-height: 112px;
    margin: 0 auto 30px auto;    
}

.brand_02 > span {
    position: absolute;
    background-color: #000;
    width: 100px;
    height: 1px;
}

.brand_02 > img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.b_top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.b_bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.brand_03 {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;
}

.brand_03 > li {
    width: 285px;
    height: 285px;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 auto;
}






/************제품소개***********/

/*껌*/

.product011{
    position: relative;
}

.product011 > img {
width: 100%;
}

.product011 > span {
    position: absolute;
    width: 100%;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: #fff;
    display: none;
}

.product012 > p {
    line-height: 1.5;
    font-size: 14px;
}

.product012 > img {
    width: 70%;
    margin-bottom: 20px;
}

.product01_02 > .product012 > img {
    width: 200px;
    margin-bottom: 20px;
}

/*상품설명_테이블*/
.product_table {
    background-color: #f6f6f6;
    padding: 60px;
    margin: 0 auto;
}

.product_board {
    width: 100%;
    border-collapse:collapse;
}

.product_board th,.product_board td, .product_board tr {
	border: 1px solid #ccc;
	border-width:1px 0;
    border-collapse:collapse;
}

.product_board > caption {
    font-size: 20px;
    font-weight: bold;
}

.product_board th {
    width: 30%;
    line-height: 2.5;
    font-size: 14px;
    text-align: left;
    padding-left: 10px;
}

.product_board td {
    width: 70%;
    line-height: 2.5;
    font-size: 14px;
    text-align: left;
}


/*탭버튼*/
/*껌*/
.product_tab {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(6, 1fr);
}

.product_tab > li {
    cursor: pointer;
}

.product_tab > li:hover {
    opacity: 0.8;
}

.product_tab > li:nth-child(1),.product_tab > li:nth-child(2),.product_tab > li:nth-child(3) {
    grid-column: span 2;
}
.product_tab > li:nth-child(4),.product_tab > li:nth-child(5) {
    grid-column: span 2;
}

/*사탕*/
.product02_tab {
    width: 350px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto 50px auto;    
}

.product02_tab > li {
    cursor: pointer;
}

.product02_tab > li:hover {
    opacity: 0.8;
}


/*초콜릿*/
.product03_tab {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto 50px auto;  
    width: 350px;
}

.product03_tab > li {
    cursor: pointer;
}

.product03_tab > li:hover {
    opacity: 0.8;
}

/************대영소식***********/

.news_list {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr;
}

.news_list > li {
    width: 360px;
    height: 410px;
    margin: 0 auto;
}

.news_list > li > div {
    overflow: hidden;
    width: 360px;
    height: 360px;
    border-radius: 20px;
    cursor: pointer;
}

.news_list > li:hover .news_scale{
    transform: scale(1.1);
    transition: all 0.3s;
}

.news_list > li > p {
    height: 50px;
}

.news_list > li > p > a {
    font-weight: bold;
    font-size: 16px;
    line-height: 2.5;
    display: block;
    color: #000;
}









/****** 푸터 영역 ******/

#footer {
    margin: 0 auto;
    background-color: #f6c41d;
    text-align: center;
    color: #fff;
}

.b_logo {
    padding-top : 20px;
    padding-bottom: 20px;
}

#contact, #address {
    max-width: 1200px;
    margin: 0 auto;
}

#contact {
    margin-bottom : 20px;
    height: 40px;
    position: relative;
    margin: 0 auto;
}

.f_sns > li {
    float: left;
    margin: 5px;
}

.f_contact {
    position: absolute;
    right: 10px;
}

.f_contact > li {
    font-size: 0.8em;
    line-height: 1.5;
}


#fnb {
    margin: 20px auto;
    background-color: #e8b300;
}

.fnb_s {
    max-width: 1200px;
    margin: 0 auto;
}

.fnb_s > li > a {
    display: block;
    color: #fff;
    font-size: 0.8em;
    line-height: 2.5;
}

#address {
    padding-bottom: 20px;
}

#address {
    font-size: 0.7em;
    line-height: 1.5;
}










/**************************************/
/*********  태블릿pc 추가 설정  ***********/
@media all and (min-width:768px) {
    
    /*********  주 메뉴  ***********/

    #header {
        background-color: #fff;
    }
    
    .btn {
        display: none;
    }
    
    .s_btn {
        display: none;
    }
    
    .s_line {
        display: none;
    }

	.lnb {
        position: absolute;
        width: calc(100% - 180px);
		margin-top: 5px;
        height: 40px;
        right: 0;
	}
	.menu {
		width: 100%;
		margin: 0;
	}
    .menu > li {
        width: calc((100% - 10px * 3) / 4);
        float: left;
    }
    
    .menu > li:nth-child(n){
        border: 0;
    }

    .menu > li > a {
        text-align: center;
        font-size: 1em;
        font-family: 'NanumSquareNeoBold';
        color: #000;
    }    
    
    .sub {
        position: absolute;
        top: 40px;
        left: 0;
        z-index: 2;
/*        box-shadow: 2px 2px 5px #ccc;*/
        border: 1px solid #f6c41d;
        border-radius: 20px;
        overflow: hidden;
    }
    
    .sub > li {
        border-bottom: 1px solid #f6c41d;
    }
    
    .sub > li:last-child {
        border-bottom: 0;
    }
    
    .sub > li > a {
        text-align: center;
        padding-left: 0;
    }
    
/*  아이콘 배너  */
    
    .icon {
    display: grid;
    height: 12em;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}
    
    /*  섹션 컨텐츠  */
    
    .products {
         grid-template-columns: 1fr 1fr;
    }
    

    /*  뉴스  */
    
    .i_news {
        grid-template-columns: 1fr 1fr;
    }
    
    .i_news > li:nth-child(3) {
        order: 1;
    }
    
    .i_news > li > div {
    margin-top: 10px;
}
    .i_news > li > div > a > img {
    margin-bottom: 5px;
}
    
    /*  수출문의*/

    .about {
        grid-template-columns: 1fr 1fr;
    }

        /*푸터*/
    
    #fnb {

    }
    
    .fnb_s > li {
        float: left;
        width: 20%;
        height: 32px;
        line-height: 32px;
        
    }
    
    .fnb_s {
        width: 100%;
        height: 32px;
    }
    
    
/* 서브페이지 회사소개01   */
    
    .company01_circle {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    }
    
    .company01_list {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 auto;    
    }
    
    .company01_1_img > span {
        display: block;
    }
    
    /*경영방침*/

    .company02_tit {
        grid-template-columns: auto auto ;     
    }    
    
    .company02_1 {
        grid-template-columns: 1fr 1fr;  
    }    
    .company02_1 > li:nth-child(5) {
        grid-column: 1 / span 2;
    }
    
    /*  오시는길  */
    .company04_table {
    grid-template-columns: 1fr 1fr;      
    }
    
    
/*  서브페이지 브랜드소개   */
    
    .brand_03 {
        grid-template-columns: 1fr 1fr;
        margin: 0 auto;
        width: 590px;
    }    
    

/*  서브페이지 제품소개  */
    
    .product_tab {
        margin: 0 auto 100px auto;
        width: 600px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
    }
    .product_tab > li:nth-child(n){
        grid-column: initial;
    }
    
    .product011 > span {
        display: block;
    }    
       
    
    .product_table {
    width: 600px;
    }
    
    .product012 > img {
        width: 40%;
    }    
    
    .product03_tab {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(6, 1fr);
    width: 710px;
    }
    
/*  서브페이지 대영소식  */
    
     .news_list {
    grid-template-columns: 1fr 1fr;
    }
    
    
    
}








/**************************************/
/*********  pc 추가 설정  ***********/
@media all and (min-width:1024px) {
    
    
    /*  아이콘 배너  */
    
    .icon {
    display: grid;
    height: 12em;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}
    
    
    /*  섹션 컨텐츠  */
    
    section{
        padding: 0;
    }

    .products {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }  
    
    .products > li {
    width: 100%;
}    
    
    
    .i_news > li > div {
    margin-top: 50px;
    }
   
    
    
    
    /*푸터*/
    
    
    
        
    
    /* 서브페이지 회사소개01   */
    
    .company01_circle {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    
    .company01_2_intro {
        grid-template-columns: 1fr 1fr; 
    }
    /*  경영방침  */
    
    .company02_1 {
        grid-template-columns: repeat(6, 1fr);
    }    
    .company02_1 > li:nth-child(n+1):nth-child(-n+3) {
        grid-column: span 2;
    }   
    .company02_1 > li:nth-child(n+4):nth-child(-n+5) {
        grid-column: span 3;
    }        
    
    .company02_2 {
        grid-template-columns: repeat(6, 1fr);
    }
    .company02_2 > li:nth-child(n+1):nth-child(-n+3) {
        grid-column: span 2;
    }  
    .company02_2 > li:nth-child(n+4):nth-child(-n+5) {
        grid-column: span 3;
    }      
    
    /*  연혁   */
    
    .company03_btn {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    }    
    
    .company03_slide {
    width: 100%;
    overflow: hidden;
    }
    .company03_slide > ul {
    width: 400%;
    position: relative;
    left: 0;
    }
    .company03_slide > ul > li {
    width: 25%;
    float: left;
    }
    
/*  서브페이지 브랜드소개   */
    
    .brand_03 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin: 0 auto;
        width: 1200px;
    } 
/*  서브페이지 소식  */
    
     .news_list {
    grid-template-columns: 1fr 1fr 1fr;
    }    
    
    

}