@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700;900&display=swap');

@font-face {
    font-family: 'notokr-thin';
    src: url('fonts/NotoKR-Thin/notokr-thin.eot');
    src: url('fonts/NotoKR-Thin/notokr-thin.eot?#iefix') format('embedded-opentype'),
         url('fonts/NotoKR-Thin/notokr-thin.woff2') format('woff2'),
         url('fonts/NotoKR-Thin/notokr-thin.woff') format('woff'),
         url('fonts/NotoKR-Thin/notokr-thin.ttf') format('truetype'),
         url('fonts/NotoKR-Thin/notokr-thin.svg#notokr-thin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'notokr-regular';
    src: url('fonts/NotoKR-Regular/notokr-regular.eot');
    src: url('fonts/NotoKR-Regular/notokr-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/NotoKR-Regular/notokr-regular.woff2') format('woff2'),
         url('fonts/NotoKR-Regular/notokr-regular.woff') format('woff'),
         url('fonts/NotoKR-Regular/notokr-regular.ttf') format('truetype'),
         url('fonts/NotoKR-Regular/notokr-regular.svg#notokr-regular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'notokr-medium';
    src: url('fonts/NotoKR-Medium/notokr-medium.eot');
    src: url('fonts/NotoKR-Medium/notokr-medium.eot?#iefix') format('embedded-opentype'),
         url('fonts/NotoKR-Medium/notokr-medium.woff2') format('woff2'),
         url('fonts/NotoKR-Medium/notokr-medium.woff') format('woff'),
         url('fonts/NotoKR-Medium/notokr-medium.ttf') format('truetype'),
         url('fonts/NotoKR-Medium/notokr-medium.svg#notokr-medium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'notokr-light';
    src: url('fonts/NotoKR-Light/notokr-light.eot');
    src: url('fonts/NotoKR-Light/notokr-light.eot?#iefix') format('embedded-opentype'),
         url('fonts/NotoKR-Light/notokr-light.woff2') format('woff2'),
         url('fonts/NotoKR-Light/notokr-light.woff') format('woff'),
         url('fonts/NotoKR-Light/notokr-light.ttf') format('truetype'),
         url('fonts/NotoKR-Light/notokr-light.svg#notokr-light') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'notokr-demilight';
    src: url('fonts/NotoKR-DemiLight/notokr-demilight.eot');
    src: url('fonts/NotoKR-DemiLight/notokr-demilight.eot?#iefix') format('embedded-opentype'),
         url('fonts/NotoKR-DemiLight/notokr-demilight.woff2') format('woff2'),
         url('fonts/NotoKR-DemiLight/notokr-demilight.woff') format('woff'),
         url('fonts/NotoKR-DemiLight/notokr-demilight.ttf') format('truetype'),
         url('fonts/NotoKR-DemiLight/notokr-demilight.svg#notokr-demilight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'notokr-bold';
    src: url('fonts/NotoKR-Bold/notokr-bold.eot');
    src: url('fonts/NotoKR-Bold/notokr-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/NotoKR-Bold/notokr-bold.woff2') format('woff2'),
         url('fonts/NotoKR-Bold/notokr-bold.woff') format('woff'),
         url('fonts/NotoKR-Bold/notokr-bold.ttf') format('truetype'),
         url('fonts/NotoKR-Bold/notokr-bold.svg#notokr-bold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'notokr-black';
    src: url('fonts/NotoKR-Black/notokr-black.eot');
    src: url('fonts/NotoKR-Black/notokr-black.eot?#iefix') format('embedded-opentype'),
         url('fonts/NotoKR-Black/notokr-black.woff2') format('woff2'),
         url('fonts/NotoKR-Black/notokr-black.woff') format('woff'),
         url('fonts/NotoKR-Black/notokr-black.ttf') format('truetype'),
         url('fonts/NotoKR-Black/notokr-black.svg#notokr-black') format('svg');
    font-weight: normal;
    font-style: normal;

}

*
{font-family:'notokr-regular'; line-height:130%;}

h1,h2,h3,h4,h5,h6,strong,b,th,dt,em
{font-family:'notokr-medium'; font-weight:normal; margin:0px;}



.container
{max-width:1200px; width:100%; margin:0 auto;}
.container:after
{content:''; display:block; clear:both;}


/******************************************
    TOP BG
*******************************************/
#topbg
{height:30px;}
#topbg #top,
#topbg #top #top_right
{height:100%;}
#top_right
{padding-right:35px;}
#topbg #top #top_right ul
{display:flex;align-items:center; height:100%;}
#topbg #top #top_right ul li
{height:100%; display:flex; align-items:center; border-left:1px solid #494949;}
#topbg #top #top_right ul li:last-child
{border-right:1px solid #494949;}
#topbg #top #top_right ul li a
{padding:0px; font-size:12px; font-family:'notokr-regular'; color:#fff; padding:0 10px;}
/******************************************
    NAV
*******************************************/
#wraper #header
{height:75px; top:30px;}
#wraper #header nav:after
{clear:both; content:''; display:block;}
#wraper #header nav #logo
{float:left; margin:12px 0;}
#wraper #header nav #logo a
{width: 184px; height:47px;}
#wraper #header nav #logo a img
{left:0px; width:100%; height:auto; margin:0px;}

#wraper #header nav .menu_wrap
{margin:0px; padding:0px; width:60%; left:auto; line-height:76px;}
#wraper #header nav .menu_wrap ul
{display:flex; justify-content:space-between;}
#wraper #header nav .menu_wrap > ul > li > a
{font-size:18px; color:#4e4e4e; font-family:'notokr-regular'; font-weight:normal;}
#wraper #header nav .menu_wrap ul > li > ul
{display:block; }
#wraper #header nav .menu_wrap ul > li > ul > li
{border-top:1px solid #eee}
#wraper #header nav .menu_wrap ul > li > ul > li > a
{background:#fff; font-family:'notokr-regular'; font-size:13px; color:#333; font-weight:normal;}
#wraper #header nav .menu_wrap ul > li > ul > li > a:hover
{background:#e74e2c;}


#wraper #header nav .menu_wrap ul li.m01,
#wraper #header nav .menu_wrap ul li.m02,
#wraper #header nav .menu_wrap ul li.m03,
#wraper #header nav .menu_wrap ul li.m04,
#wraper #header nav .menu_wrap ul li.m05
{width:100%;position:relative;}


/******************************************
    SLIDE
*******************************************/
#hero
{height:560px; padding-top:76px;}
#hero .slides .visual01
{background:url('img/visual01.jpg'); height:560px;}
#hero .slides .visual02
{background:url('img/visual02.jpg'); height:560px;}
#hero .slides > li .txt
{margin:110px auto 0;}
#hero .slides > li h1
{font-size:60px; color:#fff; font-family:'Roboto'; font-weight:700; margin:0 0 5px;}
#hero .slides > li p
{font-size:30px; color:#fff; font-family:'Roboto'; font-weight:100; margin:0 0 20px;}
#hero .slides > li span
{font-size:20px; color:#fff;}



/******************************************
    SLIDE OPTION
*******************************************/
#hero .flex-control-paging li a
{background:#fff; width:12px; height:12px; margin:0px -1px; }
#hero .flex-control-paging li a:hover, 
#hero .flex-control-paging li a.flex-active
{background:#cb3411; border-color:#cb3411}


/******************************************
    SECTION 01
*******************************************/
.section01
{padding:65px 0 40px;}
.section01 .sec01-wrap
{display:flex; justify-content:space-evenly; flex-wrap:wrap;}

.section01 .sec01-wrap .sec01-box h3
{font-size:21px; color:#4a4a4a; margin:10px 0;}
.section01 .sec01-wrap .sec01-box p
{font-family:'notokr-demilight'; font-size:15px; color:#919191; margin:0 0 15px;}
.section01 .sec01-wrap .sec01-box span
{font-family:'notokr-demilight'; font-size:14px; color:#868686; display:inline-block; padding:10px 30px; border:1px solid #eee;}
.section01 .sec01-wrap .sec01-box:hover span
{background:#cb3411; border-color:#cb3411; color:#fff; transition-duration:0.25s}

/******************************************
    SECTION 02
*******************************************/
.section02
{padding:50px 0 50px; background:url('img/sec02-bg.jpg') center no-repeat;}
.section02 .sec02-icon-wrap
{display:flex; flex-wrap:wrap; justify-content:space-evenly;}
.section02 .sec02-icon 
{width:auto; text-align:center;}
.section02 .sec02-icon h4
{font-size:18px; color:#fff; margin:20px 0px;}
.section02 .sec02-icon p
{font-size:16px; color:#fff; font-weight:normal; font-family:'notokr-demilight';}
.section02 .sec02-icon:hover h4
{color:#f19884}
.section02 .sec02-icon:hover p
{color:#d3aba2}

/******************************************
    FOOTER
*******************************************/
.footer
{padding:45px 0px 40px; background:#20283a;}
.footer .f-txt
{width:70%; display:inline-block;}
.footer .f-police ul li
{display:inline-block; padding-right:10px;}
.footer .f-police ul li a
{font-size:15px; color:#ebebeb; font-family:'notokr-demilight';}
.footer .f-police ul li a:hover
{color:#fff; font-family:'notokr-regular';}
.footer .f-info
{margin:20px 0 0;}
.footer .f-info ul li span
{font-size:15px; color:#ebebeb; padding-right:15px; font-family:'notokr-light';}
.footer .f-info ul li.copy
{margin-top:15px;}
.footer .f-call
{float:right; width:26%;}
.footer .f-call-img
{background:url('img/f-call.png') no-repeat; height:123px; display:block;}

/******************************************
    SUB PAGE
*******************************************/
.top_area
{padding-top:76px;}
.top_area.intro.on img
{top:76px;}
.sub-cont-wrap
{height:auto; margin: 0 auto 30px;}
.sub-cont-wrap:After
{display:block; clear:both; content:'';}


.sub-cont-wrap #s_navi h3
{color:#1e1e1e; font-family:'notokr-medium'; font-weight:normal;}
.sub-cont-wrap #s_navi #sub_menu > li a
{font-size:14px;}
#page01 #sub_menu a.menu1, #page02 #sub_menu a.menu2, #page03 #sub_menu a.menu3, #page04 #sub_menu a.menu4, #page05 #sub_menu a.menu5, #page06 #sub_menu a.menu6, #page07 #sub_menu a.menu7, #page08 #sub_menu a.menu8, #page09 #sub_menu a.menu9, #page16 #sub_menu a.menu10
{font-family:'notokr-medium';}

.sub-cont-wrap .title-wrap .cont-title
{color:#333;}




/******************************************
    SUB GREETING
*******************************************/
.greeting-top-txt h3
{font-family:'notokr-demilight'; font-size:22px; color:#000; text-align:center; padding: 0 0 10px; position:relative; margin:0 0 10px;}
.greeting-top-txt h3:after
{content:''; width:150px; height:2px; background:#cb3411; position:absolute; bottom:0px; left:40%;}
.greeting-bottom
{padding-top:30px; text-align:center;}
.greeting-bottom .greeting-bottom-tit
{font-size:24px; font-family:'notokr-regular'; color:#333;}
.greeting-bottom .greeting-bottom-tit strong
{font-family:'notokr-regular'; color:#cb3411}
.greeting-bottom .greeting-bottom-txt
{font-family:'notokr-regular'; font-weight:300; line-height:140%; color:#666; font-size:16px; padding-top:15px;}
.greeting-bottom .greeting-sign
{padding-top:40px;}
.greeting-bottom .greeting-sign p
{font-size:15px; font-family:'notokr-thin'; color:#cb3411; }


/******************************************
    SUB LOCATION
*******************************************/
.location-txt
{padding:30px 0;}

.location-txt ul li
{ width:100%; font-size:18px; color:#000; padding:0 10px 10px; border-bottom:1px solid #ddd; font-family:'notokr-demilight';}




/******************************************
    SUB PRODUCT
*******************************************/

.pro-sec-tit
{font-size:19px; color:#000; position:relative; padding-left:10px; margin:0 0 20px;}
.pro-sec-tit::before
{content:''; position:absolute; left:0px; top:2px; width:5px; height:20px; background:#d1492a; border-radius:10px;}
.pro-sec table
{width:100%; border:1px solid #eee; border-top:3px solid #d1492a;}
.pro-sec table tr
{border-bottom:1px solid #eee;}
.pro-sec table tr th
{padding:15px 0px; background:#f4f4f4; font-size:15px; color:#000; border-right:1px solid #eee;}
.pro-sec table tr td
{font-size:14px; color:#333; text-align:center; padding:12px 0px; border-right:1px solid #eee;}

.pro-sub-sec
{margin:0 0 50px;}
.pro-sub-sec .tit
{font-size:19px; color:#333;}
.pro-sub-sec .sub-des
{font-size:15px; color:#666; line-height:25px; margin:0 0 30px;}

.pro-sec .sub-tit
{font-size:16px; color:#d1492a; margin:0 0 5px;}
.pro-sub-sec .sub-sec-inner
{margin:0 0 30px; border-bottom:1px dashed #e5e5e5;}
.pro-sub-sec .sub-inner-txt
{padding-left:20px; padding:0px 0 0 20px; margin:0 0 15px;}
.pro-sub-sec .sub-inner-txt p
{font-size:14px; color:#666; line-height:25px;}



.prd-img
{text-align:center; border:1px solid #ddd;}
.prd-img-wrap
{display:flex; justify-content:start; padding:10px 0; border:none; align-items:center; flex-wrap:wrap}
.prd-img-wrap img
{border:1px solid #ddd ;padding:2px;margin-right:20px;}
.no-border > img
{border:none;}

.txt-box-list
{display:flex; justify-content:space-between;}
.txt-box-list .txt-box
{width:48%; border-top:4px solid #d1492a;}
.txt-box-list .txt-box:only-child
{width:100%;}
.txt-box-list .txt-box .inner
{border:1px solid #ddd; padding:20px;}
.txt-box-list .txt-box .inner .txt
{margin:20px 0 0; font-size:14px; line-height:160%; color:#666; display:flex;flex-wrap : wrap;}
.txt-box-list .txt-box .inner .txt span
{display:block; position:relative; padding-left:15px; font-size:14px; margin-bottom:10px; width:100%;}
.txt-box-list .txt-box .inner .txt span:before
{content:''; left:0px; width:5px; height:5px; background:#000; position:absolute; border-radius:50px; top:6px;}
.txt-box-list .txt-box .inner .inline-list span
{display:inline-block; width:44%;}


/******************************************
    SUB DELIVER
*******************************************/
.board #container_list #cafe_blt_titleWrap td
{font-family:'notokr-medium'; font-weight:normal; font-size:14px; color:#333;}
.board #container_list #cafe_blt_titleWrap .titleWrap_group1
{width:120px; }
.board #container_list .general_item_table .item_group1
{width:120px; text-align:center;font-size:13px;}
.board #container_list .general_item_table .item_group2
{font-size:13px; text-align:center;}
.board #container_list .general_item_table .item_group3
{font-size:13px;}

.list-center #container_list .general_item_table .item_group2
{text-align:center;}




.personal h3
{font-size:25px; font-family:'notokr-medium'; color:#000; line-height:130%; margin:20px 0;}
.personal p
{font-family:'notokr-regular'; font-size:15px; color:#666; line-height:180%; margin-bottom:20px;}
.personal p strong
{font-family:'notokr-medium'; font-weight:normal; color:#333; font-size:18px;}


@media screen and (max-width:414px){
    #wraper #header nav #logo
    {margin:12px 0;}
    #wraper #header nav #logo a
    {width:180px; height:40px;}

    #wraper #header nav .menu_wrap ul
    {display:block;}
    #wraper #header nav .menu_wrap > ul > li > a
    {font-size:16px;}

    #hero,
    #hero .flexslider
    {height:280px;}
    #hero .slides .visual01,
    #hero .slides .visual02
    {height:280px; background-size:cover; background-position:560px 0px;}
    #hero .slides > li .txt
    {width:auto; padding:0 20px; margin: 55px auto 0;}
    #hero .slides > li h1
    {font-size:46px; line-height:100%; text-shadow:1px 1px 1px #000;}
    #hero .slides > li p
    {font-size:24px; text-shadow:1px 1px 5px #000; font-weight:500; margin:0 0 10px;}
    #hero .slides > li span
    {font-size:17px; text-shadow:1px 1px 1px #000;}


    .flex-direction-nav
    {display:none;}


    .section01 .sec01-box
    {margin:0 0 20px;}

    .section02
    {background-size:cover;}
    .section02 .sec02-icon
    {margin:0 0 60px;}

    .footer
    {padding:45px 10px 40px;}
    .footer .f-txt
    {width:100%;}
    .footer .f-info ul li span
    {padding-right:10px; line-height:22px;}
    .footer .f-call
    {float:none; margin-top:20px; width:100%;}



    #wraper #container .content
    {overflow:scroll;}


    .top_area
    {height:150px;}
    .top_inner
    {padding:55px 0 20px 0;}

    .greeting-top-txt h3
    {font-size:19px;}
    .greeting-top-txt h3:after
    {left:28%;}
    .greeting-bottom .greeting-bottom-tit
    {font-size:19px;}
    .greeting-bottom .greeting-bottom-txt
    {font-size:15px;}
    .greeting-bottom .greeting-sign
    {padding-top:20px;}

    .organ > img
    {width:100%;}

    .history #container_list .general_item_table .item-line-0,
    .history #container_list .general_item_table .item-line-1
    {display:flex; }
    
    .history #container_list .general_item_table .item_group1
    {display:inline-block;}
    .history #container_list #cafe_blt_titleWrap .titleWrap_group1
    {display:inline-block;}
    .history #container_list .general_item_table .item_group2
    {padding:0px;align-items:center; display:flex; vertical-align:middle; width:100%;}
    .history #container_list .general_item_table .item_group2 span
    {width:100%; display:inline-block;}


    .pro-sec table tr td
    {padding:12px 10px;}
    .prd-img-wrap
    {display:inline-block;}
    .prd-img-wrap img
    {margin:0px;}
    .dimension img
    {width:100%;}
    .txt-box-list
    {flex-wrap:wrap;}
    .txt-box-list .txt-box
    {width:100%; margin:0 0 20px;}
    .txt-box-list .txt-box .inner .inline-list span
    {width:100%;}
    .txt-box-list .txt-box .inner .inline-list span br
    {display:none;}
    

    .deliv #container_list #cafe_blt_titleWrap .titleWrap_group1,
    .deliv #container_list #cafe_blt_titleWrap .titleWrap_group3
    {display:table-cell;}
    .deliv #container_list .general_item_table .item_group1,
    .deliv #container_list .general_item_table .item_group3
    {display:table-cell;}
}