/******************* Type A  *******************/

html, body {margin:0; height:100%; font-family:'S-CoreDream-5Medium',Arial, Helvetica, sans-serif; letter-spacing:-0.1px; font-weight:500;}
#wrap {width:100%; height:100%; min-width:320px; background-color:#ffffff; scroll-behavior: smooth; margin-top:80px;}

/* ------- Top nav -------  */
/* .topnav_left {float:left;} */
.section {width:100%; position:relative;}
.contents_area {width:100%; margin:0 auto; position:relative; padding-bottom:0px;}
.contents_area_2 {width:100%; margin:0 auto; position:relative; padding-bottom:0px;}
.map_area {width:1280px; margin:0 auto; position:relative; padding-bottom:60px;}
.qna_area {width:1280px; margin:0 auto; position:relative; padding-bottom:0px;}
.btnopen {display:none;}
.btnopen_mobile {display:block; cursor:pointer;}

/* ------- Style the navbar ------- */

#navbar {overflow: hidden; width:100%; background-color:#ffffff; height:80px; line-height:40px; opacity:0.9; position: fixed; top: 0; z-index:1001; white-space: nowrap;}
#navbar .logo {float: left; margin-right:50px; height:100%; margin-left:20px;}
#navbar .logo a{font-size:35px; font-weight:bold; padding:0;}
#navbar a {float: left; color:#101010; display:block; text-align:center; text-decoration:none; font-size:18px; letter-spacing: -1px; margin:0 10px;}
#navbar a:hover {color:#ff6600;}
#navbar a.active {background-color:#ff6600; color:white;}
#mySidenav {left:100%; padding:50px; opacity:0.9; }
#mySidenav a {line-height:50px;}
#navbar .topnav_left {height:100%; display:flex; align-items:center;justify-content: center;}
 
#navbar span {height:100%; display:inline-block; display:flex; align-items:center; justify-content:center; padding:0; margin:0;}
#navbar span a {padding:0; margin:0; line-height:0.1em;}

.btnopen {display:block;}
.btnopen_mobile {padding:0; float:right;}

.content {padding: 16px;}
.sticky {position: fixed; top: 0; width: 100%; z-index:1000;}
.sticky + .content {padding-top: 60px;}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {padding-top: 60px;}

.sidenav {height: 100%; width:100%; position: fixed; z-index: 1001; top: 0; left: 0; background-color: #000000; overflow-x: hidden; transition: 0.5s; padding-top: 60px;}
.sidenav a {padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #ffffff; display: block; transition: 0.3s;}
.sidenav a:hover {color: #f30;}
.sidenav .closebtn {position: absolute; top: 20px; right: 25px; font-size: 36px; margin-left: 50px; padding:0;}

.sidenav {height:100%; width: 100%; position:fixed; z-index:10001; top:0; left:100%; background-color:#101010; overflow-x:hidden; transition:0.5s; padding-top:50px; padding-left:40px;}
.sidenav a:hover {color:#f30;}
.sidenav .sidenav_grp {width:50%; min-width:340px;}
.sidenav ul {width:260px;}
.sidenav ul li a {padding:8px 8px 8px 32px; text-decoration:none; font-size:16px; color:#ffffff; display:block; transition:0.3s;}
.sidenav .btn_submenu {border-bottom:solid 1px #303030; padding:15px 0;}
.sidenav .closebtn {position:absolute; top:20px; left:220px; font-size:36px; margin-left:50px; padding:0; color:#ffffff;}
.sidenav .submenu2dp {display:none; border-bottom:solid 1px #606060; background-color:#202020;}
.sidenav .submenu2dp a {font-size:13px; color:#eeeeee; padding:10px;}
.sidenav .submenu2dp a:hover {color:#f30;}



/* ------- Main area -------  */
.main {height:calc(100% - 80px); /* background-image:url('../image/main.jpg'); background-size:cover;*/ }
.main .slogan_grp {max-width:1280px; margin:0 auto; height:100%; display:flex; align-items:center; justify-content:center;}
.main .slogan_grp .slogan {font-size:80px; font-weight:bold; color:#ffffff; line-height:90px; padding-bottom:10%; text-align:center;}
.main .slogan_grp .slogan .slogan_h {font-size:24px; font-weight:normal; color:#ffffff; line-height:30px; padding-top:30px; text-align:center;}
/* .main .slogan_grp .slogan .box_more {width:200px; height:70px; border:solid 1px #dddddd; position:absolute; top:260px; left:0; font-size:16px; padding-left: 20px; display:flex; align-items:center;} */
.main .slogan_grp .slogan .arrow_plus {width:25px; height:25px; background-image:url('../image/arrow_plus.png'); position:absolute; right:30px; top:35%;}

/* ------- Title box for section  -------  */
.gallery_title_box {width:100%; padding:35px 0; margin:0 auto; text-align:center;}
@media(max-width:960px) {.gallery_title_box {width:100%; padding:10px 0; margin:0 auto; text-align:center; padding-bottom: 30px;}}
.title_box {width:100%; padding:35px 0; margin:0 auto; text-align:center; padding-bottom: 15px;}
.title_box1 {width:100%; padding:35px 0; margin:0 auto; text-align:center; padding-bottom: 18px;}
@media(max-width:960px) {.title_box1 {width:100%; padding:10px 0; margin:0 auto; text-align:center; padding-bottom: 16.5px;}}
.map_title_box {width:100%; padding:35px 0; margin:0 auto; text-align:center; padding-bottom: 35px;}
.title_box .title {font-size:60px; color:#101010;}
.title_box .title_han {display:block; width:fit-content; font-size:30px; padding:0 10px; border-left:solid 1px #909090; border-right:solid 1px #909090; margin:0 auto;}
.title_box .w4 {width:230px;}
.title_box .w3 {width:180px;}
.title_box .w2 {width:140px;}
.title_box .w1 {width:100px;}
 
/* ------- About section -------  */
/* .about {background-image:url('../image/about_bg.jpg'); background-size:cover;} */
.about {background-size:cover;}

.about .about_img {width:100%; height:246px;  margin-bottom:20px; background-image:url('../image/about.jpg'); background-size:cover;}
.about .about_txt {font-size:18px; line-height:2.0em;}

/* ------- Gallery section -------  */
.gallery_grp {overflow:hidden;}
.gallery {background-color:#ffffff; background-size:cover;}
.gallery li {float:left; width:calc(100%/2); padding:0 3px; text-align:center;}
.gallery .gallery_box {margin:0 auto; width:100%;}
.gallery li img {width:100%; max-width:800px;}
.gallery .desc {width:100%; margin:10px 0;}
.gallery .desc .item_name {font-size:24px; font-weight:bold;}
.gallery .desc .item_desc {font-size:16px; padding:20px 0; line-height:1.8em;}

/* ------- Product section -------  */
.product_grp {overflow:hidden;}
.product {background-color:#303030; background-size:cover; color:#cccccc;}
.product li {float:left; width:calc(100%/2); text-align:center;}
.product .product_box {margin:0 auto; width:90%;}
.product li img {width:100%; max-width:800px;}
.product .title {color:#ffffff;}
.product .title_han {border-left:solid 1px #555555; border-right:solid 1px #555555;}
.product .desc {width:100%; margin:10px 0;}
.product .desc .item_name {font-size:24px; font-weight:bold;}
.product .desc .item_desc {font-size:16px; padding:10px 0; line-height:1.8em;}
 
/* ------- Q&A section -------  */
.qna {/*  height:100%; */ background-image:url('../image/qna_bg.jpg'); background-size:cover; padding-bottom: 65px;}
.qna .title {color:#ffffff; padding-bottom: 20px;}
.qna .title_box .title_han {color:#ffffff; border-left:solid 1px #cccccc; border-right:solid 1px #cccccc;}
.qna .qna_grp {width:100%; padding:40px; background-color:#ffffff; /* height:calc(100% - 140px);*/ overflow-y:auto; line-height:2.0em;}
.qna .qna_grp .question {font-size:16px; font-weight:bold; padding:10px 0; border-bottom:solid 1px #999999;}
.qna .qna_grp .answer {font-size:16px; font-weight:500; padding:10px 0; border-bottom:solid 1px #999999;}

/* ------- Contact section -------  */
.contact {/*  height:100%; */ background-image:url('../image/map_bg.jpg'); background-size:cover;}
.contact .box_grp {width:100%; overflow:hidden; height:calc(100% - 140px); background-color:#ffffff;}
.contact .box_grp .box_half {width:50%; height:100%; float:left; background-color:#ffffff; padding:30px;}
.contact .box_grp .box_half li {font-size:20px; line-height:2.0em;}

/* ------- Accordion menu ------- */

.qna_grp .accordion {background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s;}
.qna_grp .active, .accordion:hover {background-color: #ccc;}
.qna_grp .accordion:after {content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px;}
.qna_grp .active:after {content: "\2212";}
.qna_grp .panel {padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}


/* ------- Bottom area ------- */
.bottom {max-width:1280px; padding:50px 0 60px 0; font-size:16px; line-height:1.8em; margin:0 auto;}

.bottom_grp {width:100%; background-color:#ffffff;}
.bottom_grp .bottom {max-width:1280px; padding:50px 0 60px 0; font-size:16px; line-height:1.6em; margin:0 auto;}
.bottom_grp .bottom p {padding:0; margin:0; line-height:1.6em;}

/* ------- Scroll down ------- */
.scroll-downs {position: absolute; /* top: 0; */ right: 0; text-align:center; bottom: 30px; left: 0; margin: auto; width :100px; height: 90px;}
.txt_scrolldown {color:#ffffff; font-size:16px; font-weight:bold; padding-bottom:10px;}
.mousey {width: 3px; padding: 10px 15px; height: 35px; border: 3px solid #fff; border-radius: 25px; opacity: 0.75; box-sizing: content-box; margin:0 auto;}
.scroller {width: 3px; height: 18px; border-radius: 25%; background-color: #fff; animation-name: scroll; animation-duration: 1.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite;}@keyframes scroll {0% { opacity: 0; }  10% { transform: translateY(0); opacity: 1; }  100% { transform: translateY(15px); opacity: 0;}}

/* ------- Right circle menu ------- */
.jmp_nav_grp {position:fixed; z-index:5000; top:0; right:50px; bottom:0; margin:auto; width:20px; height:200px; display:none;}
.jmp_nav_grp .jmp_nav {width:15px; height:15px; border-radius:50%; border:solid 1px #ffffff; margin:15px 0; cursor:pointer; }
.jmp_nav_grp .jmp_nav:hover {background-color:#ffffff; animation-name: jmp; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite;}
.jmp_nav_grp .here {background-color:#ffffff;}@keyframes jmp {0% { opacity: 1;}  50% { opacity: 0;}}


/* -------- Phone & talk Box ------------*/
.phone_talk_grp {display:none;} /* 모바?��?��?���? 보이�? */


* -------- Floating menu  ------------*/
.quickmenu {position:absolute; width:100px; top:70%; margin-top:-50px; right:50px; font-size:13px;}
.quickmenu ul li {width:100%; height:100px; margin:5px 0; border-radius:50%; text-align:center; padding:10px; background:#546e81; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#ffffff;}
 
.quickmenu ul li a {line-height:1.5em; text-align:center; color:#ffffff; font-size:1.0em; text-decoration:none;}
.quickmenu ul li:hover {background-color:#5d798d;}

.content {position:relative; min-height:1000px;}

/* -------- Qucik menu  ------------*/
.qm {position:fixed; right:20px; bottom:20px; z-index:9999; text-align:right;}
.qm li {padding:0; margin:0; font-size:14px;}
.qm li a {display:inline-block; width:40px; height:40px; margin:3px 0; border-radius:20px 20px; text-align:center; background:#546e81; cursor:pointer; color:#ffffff; transition:0.2s ease-out; overflow:hidden; box-shadow: 3px 4px 10px 2px rgb(0 0 0 / 20%); transform-origin: 0 100%; -webkit-transform-origin:0 100%; color:#ffffff; text-decoration:none;}
.qm li .name { white-space: nowrap; line-height:40px;}
.qm li a:hover .name {display:inline-block;}
.qm .q1:hover {width:160px;}
.qm .q2:hover {width:110px;}
.qm .material-icons-outlined {width:40px; line-height:40px; font-size:22px; font-weight:normal; text-align:center;}
.qm span {line-height:30px;  float:left; font-weight:normal;}

.content {position:relative;min-height:1000px;}

/* -------- Modal Share  ------------*/
.modal_screen { width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0,0,0,0.8); z-index:20000; display:flex; align-items:center; justify-content:center; transition: opacity 0.2s;}
.modal_share_grp {width:370px; height:300px; background-color:#ffffff; padding:20px; position:fixed; left:50%; top:50%; transform: translate(-50%, -50%);}
.modal_share_grp .title {font-size:24px; padding:10px 0;}
.modal_share_grp .title .close_modal {position:absolute; top:15px; right:15px; width:20px; height:20px; cursor:pointer; font-size:30px;}
.modal_share_grp ul {padding-top:20px;}
.modal_share_grp li {display:block; padding:5px 0;}
.modal_share_grp button {width:100%; height:50px; background-color:#eeeeee; border-radius:3px; border:solid 1px #cccccc; font-size:16px; color:#303030; padding:0 20px; line-height:48px; cursor:pointer;}
.modal_share_grp .input_box {width:100%; height:50px; background-color:#eeeeee; border-radius:3px; border:solid 1px #cccccc; font-size:16px; color:#303030; padding:0; line-height:48px; }
.modal_share_grp input {display:inline-block; border:0; width:250px; height:42px; background-color:#eeeeee; padding:0 10px;}
.modal_share_grp .btn_copy {height:46px; display:inline-block; padding-right:10px;cursor:pointer; position:relative; right:-30px;}



/*---------------  Media Tag -------------- */


 @media all and (max-width:1280px) {

    .section {width:100%; padding:70px 0;}
    #navbar .topnav_left {display:none;}
    .topnav {display:block;}
    
    .contents_area {width:90%; margin:0 auto; position:relative; }
    .contents_area_2 {width:90%; margin:0 auto; position:relative; }
    .map_area {width:90%; margin:0 auto; position:relative; }
    .qna_area {width:90%; margin:0 auto; position:relative; }
    .bottom {width:90%; padding:50px 0 60px 0; font-size:15px; line-height:1.6em; margin:0 auto;}

    .title_box {width:100%; margin-bottom:10px; padding:30px 0;}
    .title_box .title {font-size:50px;}
    .title_box .title_han {font-size:28px; padding:0 10px;}

    .quickmenu {display:none;} /*---- Hidden menu to follow----*/
}

@media all and (max-width:920px) {

    #navbar .logo a {font-size:30px;}
    #navbar .topnav_left a {font-size:22px;}

    .section {width:100%; padding:60px 0;}

    .contents_area {width:90%; margin:0 auto; position:relative;}
    .contents_area_2 {width:90%; margin:0 auto; position:relative; padding-bottom: 0px;}
    .map_area {width:90%; margin:0 auto; position:relative; padding-bottom: 10px;}
    .qna_area {width:90%; margin:0 auto; position:relative; padding-bottom: 10px;}
    .main {/* background-image:url('../image/main_h.jpg');*/ background-size:cover; height:100%;}
    .main .contents_area .slogan {font-size:60px; line-height:50px;}
    .main .contents_area .slogan .slogan_h {font-size:20px; top:110px; line-height:1.2em;}
    .main .contents_area .slogan .box_more {top:240px;}

    .main .slogan_grp .slogan {font-size:60px; font-weight:bold; line-height:70px; padding-bottom:10%;}
    .main .slogan_grp .slogan .slogan_h {font-size:20px; line-height:24px; padding-top:30px;}

    .about {height:auto;}
    .about .about_img {width:100%; background-image:url('../image/about.jpg'); background-size:cover;}
    .about .about_txt {font-size:16px; line-height:1.6em;}
    .gallery li {float:left; width:calc(100%/3); padding:0 3px; overflow-y:auto;}
    .product_grp .product_box {width:90%;}
    .product li {float:left; width:calc(100%/3);}
    .qna {height:auto;}
    .qna .qna_grp {padding:30px;}
    .contact {height:auto;}
 
    .title_box .title {font-size:40px;}
    .title_box .title_han {font-size:22px; padding:0 10px;}
 
    .contact .box_grp .box_half li {font-size:18px; line-height:1.6em;}

}

@media all and (max-width:768px) {

    .section {padding:50px; padding-bottom: 0px;}
    .topnav.responsive {position:relative;}
    #mySidenav {display:block;}

    .main {padding:0; height:100%;}

    /*.main {background-image:url('../image/main_h.jpg'); background-size:cover; height:800px;}*/
    .main .slogan_grp .slogan {font-size:36px; font-weight:bold; line-height:46px; padding-bottom:7%;}
    .main .slogan_grp .slogan .slogan_h {font-size:18px; line-height:22px; padding-top:20px;}

    .contents_area {width:100%; margin:0 auto; position:relative; padding-bottom:20px;}
    .contents_area_2 {width:100%; margin:0 auto; position:relative; padding-bottom: 0px;}
    .map_area {width:100%; margin:0 auto; position:relative; padding-bottom: 40px;}
    .qna_area {width:100%; margin:0 auto; position:relative; padding-bottom: 30px;}
    .contents_area span {font-size:1.2em !important;}
    .bottom {width:90%; padding:50px 0 50px 0; font-size:15px; line-height:1.6em; margin:0 auto;}
    .jmp_nav_grp {display:none;}
    .about .about_txt {font-size:16px; line-height:1.6em;  }
    .product_grp .product_box {width:90%;}
    .gallery li {float:left; width:calc(100%/2); padding:0 3px; overflow-y:auto;}
    .product li {float:left; width:calc(100%/2);}

    .qna .qna_grp {padding:20px;}
    
    .contact .box_grp .box_half li {font-size:16px; line-height:1.6em;}  
    .topnav .topnav_left {display:none;}

    .title_box {width:100%; padding:10px 0;}
    .map_title_box {width:100%; padding:10px 0; margin-bottom:30px;}
    .title_box .title {font-size:36px;}
    .title_box .title_han {font-size:18px; padding:0 10px;}
 
    /* -------- Phone & talk Box ------------*/
    .phone_talk_grp {display:block; width:100%; padding:20px; overflow:hidden;}
    .phone_talk_grp .phone_box {width:100%; padding:20px 0; text-align:center; font-size:24px; font-weight:500;}
    .phone_talk_grp .talk_box {text-align:center;}

    .contact .box_grp .box_half {width:100%; height:40%; float:left; background-color:#ffffff; padding:20px;}
    .contact .box_grp .box_half li {font-size:16px; line-height:1.6em;}
 }

 @media screen and (max-width:480px) {

    .section {padding:20px 0; font-size:0.8rem; padding-bottom: 0px;}
    .btnopen_mobile {display:block;}
    #mySidenav {display:block;}
    
    .main {padding:0; height:70%;}

    .main .slogan_grp .slogan {font-size:26px; line-height:34px; padding-bottom:5%;}
    .main .slogan_grp .slogan .slogan_h {font-size:14px; line-height:20px; padding-top:20px;}

    /* ------- Scroll down ------- */
    .scroll-downs {width:90px; height:90px;}
    .txt_scrolldown {font-size:13px;}
    .mousey {padding: 8px 12px; height:30px;}

    .title_box {width:100%; padding:30px 0;}
    .title_box {width:100%; padding:10px 0 10px 0; margin-bottom:0px;}
    .map_title_box {width:100%; padding:10px 0 10px 0; margin-bottom:20px;}
    .title_box .title {font-size:30px;}
    .title_box .title_han {font-size:18px; padding:0 10px;}

    .contents_area {height:100%;}
    .contents_area_2 {height:100%; padding-bottom: 0px;}
    .map_area {height:100%; padding-bottom: 40px;}
    .qna_area {height:100%; padding-bottom: 40px;}
    .contents_area span {font-size:1.0em !important;}

    .about .about_img {width:100%; height:200px; margin:20px 0; background-image:url('../image/about.jpg'); background-size:cover;}
    .about .about_txt {line-height:1.6em;}
    .gallery_grp {height:calc(100% - 200px); overflow-y:auto; margin-top:0px;}
    .product_grp {height:calc(100% - 200px); overflow-y:auto; margin-top:0px;}
    .gallery li {float:left; width:calc(100%/1); padding:0 3px; overflow-y:auto;}
    .product li {float:left; width:calc(100%/1); }
    .product li img {width:100%;}
    .qna .qna_grp {padding:0;}
    .product .desc .item_name {font-size:16px; font-weight:bold;}
    .product .desc .item_desc {font-size:13px; padding:10px 0; line-height:1.4em;}  

    .bottom {font-size:12px; color:#505050;}
    

}

 @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
    .sidenav {display:block;}
}

/* Youtube fullpage */
.ytLandscape {
    position: relative;   padding-bottom: 56.25%;
}
.ytLandscape iframe {
    position: absolute;   width: 100%;   height: 100%;   left: 0;   right: 0;
}




/***********************************************/