html, body {overflow: auto;}
#container{ position:relative; }
#container .inr{position:relative; z-index:80; margin:0 auto;}

.area_visual{position:relative;}
.area_visual,
.area_visual .list{overflow:hidden; height:100vh;}
.area_visual .list li{height:100%; background-repeat:no-repeat; background-position:50% 0; background-size:cover; text-indent:100%; overflow:hidden; white-space:nowrap;}
.area_visual .list li.active{animation:bgScale 8000ms 1 ease-out; -webkit-animation:bgScale 8000ms 1 ease-out; -moz-animation:bgScale 8000ms 1 ease-out;}
.area_visual .bx-controls{position:absolute; right:25px; top:250px; z-index:90;}
.area_visual .bx-pager a{display:block; position:relative; width:10px; height:10px; margin:20px 0px; background:#fff; border-radius:50%; font-size:0px;}
.area_visual .bx-pager a:before{content:''; display:none; position:absolute; left:50%; top:50%; width:20px; height:20px; box-sizing:border-box; border:2px solid #df8709; border-radius:50%; transform:translate(-50%, -50%);}
.area_visual .bx-pager a.active{background:#df8709;}
.area_visual .bx-pager a.active:before{display:block;}
.area_visual .bx-controls-auto a{display:block; width:8px; height:10px; margin:0 auto; text-indent:100%; overflow:hidden; white-space:nowrap;}
.area_visual .bx-controls-auto a.bx-stop{background:url(../images/main/btn_control_pause.png) no-repeat 0 0;}
.area_visual .bx-controls-auto a.bx-start{background:url(../images/main/btn_control_play.png) no-repeat 0 0;}

.area_search {position:absolute; top:0px; width:100%; height: 100vh; text-align:center; padding-top:50px; }
.area_search h2{font-family:'Verdana'; font-size:70px; color:#202931; text-shadow:3px 3px 0px rgba(0,0,0,0.23);}
.area_search p{margin-top:30px; margin-bottom:30px; font-family:'Nanum Square', Sans-serif; font-size:20px; color:#2d2d2d; letter-spacing:-1px;}
.area_search .search{position:relative; width:534px; height:52px; box-sizing:border-box; margin:40px auto 0; padding-left:30px; background:rgba(255,255,255,0.7); border:3px solid #013668; border-radius:80px; box-shadow:3px 5px 0px rgba(0,0,0,0.16); text-align:left;}
.area_search .search input[type="text"]{width:85%; height:46px; box-sizing:border-box; padding:0 15px; background:transparent; border:0px; font-size:15px;}
.area_search .search .btn_search{position:absolute; right:15px; top:0px; width:46px; height:46px; background:url(../images/main/btn_search.png) no-repeat 50% 50%; border:0px; text-indent:100%; overflow:hidden; white-space:nowrap;}
/*.area_search .list:after{content:''; display:block; clear:both;}*/
.area_search .list{padding:90px 110px 0px; display: flex; justify-content: space-evenly;}

.area_search .list > li > a{display:block; position:relative; width:192px; height:192px; box-sizing:border-box; padding-top:45px; border-radius:40px; background:#a35435; box-shadow:3px 3px rgba(0,0,0,0.33); font-size:19px; font-weight:600; color:#fff; letter-spacing:-1px;}
.area_search .list > li > a span{opacity:0; display:block; position:absolute; top:0px; left:0px; width:100%; height:192px; border-radius:40px; background:rgba(0,33,65,0.8); color:#fff; font-size:18px; transform:scale(0,0); transition:all 0.4s ease-out 0s;}
.area_search .list > li > a span i{display:inline-block; vertical-align:middle; line-height:1.3em; letter-spacing:-1px; font-weight:400;}
.area_search .list > li > a span:after{content:''; display:inline-block; height:100%; vertical-align:middle;}
.area_search .list > li > a:before{content:''; display:block; width:78px; height:68px; margin:0 auto 20px;background:url(../images/main/icon-faq.png) no-repeat 50% 0;}
.area_search .list > li > a:hover span,
.area_search .list > li > a:focus span{opacity:1; transform:scale(1,1);}
.area_search .list > li:nth-of-type(2) > a{background-color:#3a845b;}
.area_search .list > li:nth-of-type(3) > a{background-color:#674089;}
.area_search .list > li:nth-of-type(4) > a{background-color:#53b6c7;}
.area_search .list > li:nth-of-type(5) > a{background-color:#3a6784;}
.area_search .list > li:nth-of-type(2) > a:before{background-image:url(../images/main/icon-meeting.png);}
.area_search .list > li:nth-of-type(3) > a:before{background-image:url(../images/main/icon-test.png);}
.area_search .list > li:nth-of-type(4) > a:before{background-image:url(../images/main/icon-msds.png);}
.area_search .list > li:nth-of-type(5) > a:before{background-image:url(../images/main/icon-web.png);}

.list-item-title { position: relative; display: inline-block; width: 60%; padding: 0.75rem 1.25rem;
    background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.125); white-space: nowrap;}
.list-item-action{width:80%; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.footer {position:absolute; bottom:10px; width:100%; z-index: 10000!important; font-size:12px; text-align: center; }
.footer > p {display:inline-block; font-size:13px; margin-top:0px; margin-bottom:10px; color:#fff;  }


@media (max-width: 1024px) {
    .area_search{position:absolute; top:0px; text-align:center; padding-top:12%;  }
    .area_search .list { text-align: center; margin: 0; padding: 0; display: flex; flex-direction: column;}
    .area_search .list > li{ float:none; width:100%; padding-bottom: 10px;}
    .area_search .list > li > a {display:inline-block; float: none; margin: 0px auto; position:relative; width:292px; height:92px; box-sizing:border-box; padding-top:10px; border-radius:40px; background:#a35435; box-shadow:3px 3px rgba(0,0,0,0.33); font-size:19px; font-weight:600; color:#fff; letter-spacing:-1px;}
    .area_search .list > li > a span {display: none; height: 0px;}
    .area_search .list > li > a:before{content:''; display:block; width:78px; height:68px; margin: 0 auto 0px;}
    .area_search > p {font-size:16px;}
    img.logoImg { width:240px;}
    .footer { font-size:14px;  position: absolute; bottom:10px; }
    .footer > p { margin-bottom:20px; }
}
@media (max-width: 767px) {
    .area_visual .list{ position: fixed; height: 100vh; width: 100vw;}
    .area_search { padding-top:10px; }
    .area_search p { font-size:12px; margin-top:15px; }
    .area_search .list > li > a { font-size:14px!important; height:80px; }
    img.logoImg { width:130px;}
    .area_search .list > li > a:before { height: 60px;  }
    .footer { position:static; padding-top:5px;  }
    .footer > p {margin-bottom:5px; }
}

@keyframes bgScale {
    0% {transform:scale(1.4); -webkit-transform:scale(1.4); -moz-transform:scale(1.4);}
    100% {transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}
}