/* common ////////////////////////////////////////////////// */
*{padding: 0; margin: 0; box-sizing: border-box; font-size: 15px; font-family: 'Montserrat', 'Noto Sans KR', sans-serif;}
ol, ul, li, dl, dt, dd{list-style: none}
a, a:hover{text-decoration: none}

.inner{width: 1200px; margin: 0px auto; text-align: center; padding: 100px 0px;}
.inner h2{color: #fff; font-size: 60px; font-weight: 700; padding-bottom: 70px; text-transform: capitalize;}
.inner h2 img{height: 50px;}
h2 span.company-name-60{font-size: 60px; color: #ffa031; font-weight: 100;}
/* Bootstrap default value */
.row{margin: 0px;}


.bd-callout {padding: 1.25rem; margin: 1.25rem 0; border: 1px solid #eee; border-left-width: .25rem; border-radius: .25rem;}
.bd-callout-primary {border-left-color: #007bff;}


/* to Top*/
.btn-top{position: fixed; width: 70px; height: 70px; bottom: -70px; right: 20px; padding: 10px; font-size: 40px; line-height: 45px; text-align: center; border-radius: 50%; background: #ffa031; cursor: pointer; opacity: 0; transition: 0.5s; z-index: 10;}
.btn-top.on{bottom: 40px; opacity: 1; transition: 0.7s;}
.btn-top:hover{background: #fff; border: 1px solid #ffa031; color: #ffa031;}
.btn-top:hover i{color: #ffa031;}
.btn-top a i{font-size: 25px;}
.btn-top a:link,
.btn-top a:visited{color: #fff;}


/* top ////////////////////////////////////////////////// */
#top{position: relative; height: 5px; background: #ffa031; transition: 0.7s;}
#top .inner{height: 100%; padding: 10px; overflow: hidden;}
#top .inner .thum{color: #fff; font-size: 17px; font-weight: bold; line-height: 35px;}
#top .inner .thum::after{display: block; content: ''; clear: both;}
#top .inner .thum li{float: left; margin-right: 20px;}
#top .inner .thum li:not(:last-child){margin-right: 20px;}

#top .inner .thum li span.log{color: #fff; margin-right: 15px; text-transform: capitalize;}
#top .inner .thum li a{font-weight: 700;}
#top .inner .thum li a,
#top .inner .thum li a i.fas{color: #333;}
#top .inner .thum li a i.fas{padding-right: 2px;}

/* open/close */
#top .btn{
    width: 100px; height: 30px;
    position: absolute; left: 5%; bottom: -25px;    
    background: #ffa031; color: #333; text-align: center; line-height: 5px; cursor: pointer;
    border-bottom-right-radius: 10px; border-bottom-left-radius: 12px;    
}
#top .btn>i{transform: rotate(0deg); transition: 0.5s;}
#top .btn>p{display: inline; font-size: 12px; text-transform: uppercase; padding-left: 5px; font-weight: 700;}

#top.on{height: 50px;}
#top.on .btn>i{transform: rotate(-180deg);}


/* header ////////////////////////////////////////////////// */
#header{width: 100%; background: #282828;}
#header .inner{height: 100px; padding: 0px; position: relative;}

#header .logo{width: 250px; position: absolute; top: 0px; left: 0px; text-align: center;}
#header .logo a{color: #ffa031; font-size: 50px; font-weight: 100; line-height: 100px; /*text-shadow: 1px 1px 1px #fff;*/}
#header .logo a img{height: 50px;}
/*#header .logo a i{color: #ffa031; font-size: 50px; font-weight: 100; line-height: 100px;}*/

#header nav{width: 700px; position: absolute; top: 50px; right: 0px;}
#gnb{width: 100%;}
#gnb>li{float: left; width: 20%; height: 50px; text-align: center;}
#gnb>li>a{display: block; width: 100%; color: #fff; font-size: 20px; line-height: 50px;}

/* mouse-over : menu-color */
#gnb>li:hover a,
#gnb>li:hover i.gnb-arrow{color: #ffa031;}

/* mouse-over : turn-arrow */
#gnb>li i.gnb-arrow{transform: rotate(0deg); transition: 0.7s;}
#gnb>li:hover i.gnb-arrow{transform: rotate(180deg);}

/* submenu hide and visible */
#gnb>li>.sub{position: relative; transform: translateY(50px); visibility: hidden; opacity: 0; transition: 0.3s;}
#gnb>li>.sub.on{transform: translateY(0px); visibility: visible; opacity: 1; z-index: 10;}

/* submenu design */
#gnb>li>.sub>li>a{display: block; width: 100%; height: 40px; line-height: 40px; background: rgba(0, 0, 0, 0.6); color: #fff; transition: 0.5s;}
#gnb>li>.sub>li:hover>a{background: rgba(0, 0, 0, 0.9); color: #ffa031;}
#gnb>li>.sub>li>a:hover:before{content: '\f105 \2002'; font-family: FontAwesome;}

/* mobile icon */
.m-icon{display: none;}
.m-icon i{color: #fff; font-size: 30px;}

/* copyright ////////////////////////////////////////////////// */
#copyright{background: #282828;}
#copyright .inner{padding: 50px; text-align: left;}
#copyright .inner .wrap-box .contents-box .content{padding: 30px 20px;}
#copyright .inner .wrap-box .contents-box:last-child .content{width: 100%; padding-top: 50px;}
#copyright .inner .wrap-box .contents-box .content h2{margin-bottom: 50px; padding-bottom: 0px;}
#copyright .inner .wrap-box .contents-box .content h5{padding: 0px 0px 10px 20px;}

#copyright .inner .wrap-box .contents-box .content h2,
#copyright .inner .wrap-box .contents-box .content h5,
#copyright .inner .wrap-box .contents-box .content h5 a{color: #ffa031; font-weight: 100;}

#copyright .inner .wrap-box .contents-box .content h5 a,
#copyright .inner .wrap-box .contents-box .content h5.copy{font-size: 20px;}
#copyright .inner .wrap-box .contents-box .content .title{color: #fff;}

#copyright .inner .wrap-box .contents-box .content h5.copy{text-align: center;}

#copyright .inner .wrap-box .contents-box .remote i.r-icon{font-size: 40px;}
#copyright .inner .wrap-box .contents-box .remote h5{text-align: center; padding: 0px;}
#copyright .inner .wrap-box .contents-box .remote a{font-size: 20px;}
#copyright .inner .wrap-box .contents-box .remote a:hover{color: #282828;}
#copyright .inner .wrap-box .contents-box .remote h5:hover{color: #282828;}





/*pc 1920*1080*/
@media screen and (max-width: 1920px) {  
    /* copyright ////////////////////////////////////////////////// */
    .d-500{display: none;}
}

/*ipad-pro horizontal*/
@media screen and (max-width: 1366px) { 
    
    /* top ////////////////////////////////////////////////// */
    #top .btn{left: 10px; /*border: 1px solid #f00;*/}
    
    /* header ////////////////////////////////////////////////// */
    #header .logo{left: 100px;}    
}

/*content inner width*/
@media screen and (max-width: 1200px) { 
    
    /* common ////////////////////////////////////////////////// */
    .inner{width: 100%; padding: 80px 0px;}
    .inner h2,
    .inner .wrap-box h2{font-size: 50px; padding-bottom: 50px;}
    .inner h2 img,
    .inner .wrap-box h2 img{height: 45px;}
    
    /* top ////////////////////////////////////////////////// */
    #top .btn{display: none;}    
    
    /* header ////////////////////////////////////////////////// */
    #header nav{right: 30px;}
}

/*ipad-pro vertical*/
@media screen and (max-width: 1024px) {    
    
    /* common ////////////////////////////////////////////////// */
    .inner{padding: 60px 0px;}
    .inner h2 img,
    .inner .wrap-box h2 img{height: 40px;}
    
    /* header ////////////////////////////////////////////////// */
    #header .logo{left: 30px;}
    #header .logo a{font-size: 45px;}
    #header .logo a img{height: 45px;}
    
    /* copyright ////////////////////////////////////////////////// */
    .d-1000{display: none;}
}

/*iphoneX horizontal*/
@media screen and (max-width: 812px) {
    
    /* common ////////////////////////////////////////////////// */
    .inner h2,
    .inner .wrap-box h2{font-size: 40px; padding-bottom: 40px;}
    h2 span.company-name-60{font-size: 40px;}
    .inner h2 img,
    .inner .wrap-box h2 img{height: 35px;}
    
    /* header ////////////////////////////////////////////////// */
    #header .inner{height: 80px;}
    #header .logo{left: 30px;}
    #header .logo a{font-size: 35px; line-height: 80px;}
    #header .logo a img{height: 40px;}
        
    /* mobile menu */
    #header nav{position: fixed; width: 50%; height: 100%; top: 0px; right: 0px; background: rgba(0,0,0,0.8); transform: translateX(110%); transition: all 0.5s ease; z-index: 100;}
    #header nav #mgnb{padding-top: 80px;}
    #header nav #mgnb>li{background: #ffa031; border-bottom: 1px solid #ddd;}
    #header nav #mgnb>li:hover{background: #007bff;}
    #header nav #mgnb>li>a{display: block; width: 100%; color: #fff; font-size: 20px; line-height: 50px; padding: 15px 0px;}
        
    #header nav #mgnb>li>.sub{display: none;}
    #header nav #mgnb>li>.sub>li>a{display: block; width: 100%; padding: 15px 0px; background: #282828; color: #fff; font-size: 18px; line-height: 25px;}
    #header nav #mgnb>li>.sub>li>a:hover{background: rgba(0, 0, 0, 0.9); color: #ffa031; transition: all 0.7s ease;}    
    
    #header .inner .m-icon{display: block; position: absolute; top: 25px; right: 40px;}    
    #header .inner .m-icon a:hover i{color: #ffa031;}
        
    /* mouse-over : turn-arrow */
    #mgnb>li i.gnb-arrow{transform: rotate(0deg); transition: 0.7s; font-size: 20px; line-height: 50px;}
    #mgnb>li:hover i.gnb-arrow{transform: rotate(180deg);}
}


/*ipad-etc vertical*/
@media screen and (max-width: 768px) {
    
}


/*iphoneX vertical*/
@media screen and (max-width: 576px) { 
    /* common ////////////////////////////////////////////////// */
    .inner h2,
    .inner .wrap-box h2{font-size: 30px; padding-bottom: 30px;}
    h2 span.company-name-60{font-size: 30px;}
    .inner h2 img,
    .inner .wrap-box h2 img{height: 30px;}    
    
    /* top ////////////////////////////////////////////////// */
    #top .inner .thum li:not(:last-child){display: none;}
    
    
    /* header ////////////////////////////////////////////////// */
    #header .logo{left: 0px;}
    #header .logo a{font-size: 35px;}
    #header .logo a img{height: 30px;}
    
    /* mobile menu */
    #header nav{width: 100%;}
    .m-icon{display: block;}
    
    /* copyright ////////////////////////////////////////////////// */
    .d-500{display: block;}
    #copyright .inner{padding: 10px;}
}