@charset "UTF-8";
@font-face{
    font-family:'Nanum Gothic';
    font-style:normal;
    font-weight:400;
    src:url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot);
    src:url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
    url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'),
    url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff'),
    url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf) format('truetype');
}
@font-face{
    font-family:'Nanum Gothic';
    font-style:normal;
    font-weight:700;
    src:url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot);
    src:url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
    url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff2) format('woff2'),
    url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff) format('woff'),
    url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.ttf) format('truetype');
}
@font-face{
    font-family:'Nanum Gothic';
    font-style:normal;
    font-weight:800;
    src:url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot);
    src:url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
    url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff2) format('woff2'),
    url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff) format('woff'),
    url(https://fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.ttf) format('truetype');
}

/**
 * reset
 */

*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box}
*{-webkit-tap-highlight-color: rgba(0,0,0,.1);}
html{font-size:62.5%}
html,body{height:100%}
article,aside,details,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
body{background-color:#fff;word-wrap:break-word;word-break:break-all;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body,p,h1,h2,h3,h4,h5,h6,div,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,select,button,iframe{padding:0;margin:0}
body,th,td,input,select,textarea,button{color:#333;font-size:1.6rem;line-height:1;font-family:'Nanum Gothic','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif;letter-spacing:-.05rem}
img,fieldset,iframe,button{border:0}
img,iframe{vertical-align:top}
dl,ul,ol,li{list-style:none}
i,em,address{font-style:normal}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{outline:0;-webkit-border-radius:0;border-radius:0;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none}
button{background-color:transparent;line-height:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=checkbox]{-webkit-appearance:checkbox;-moz-appearance:checkbox;appearance:checkbox}
input[type=radio]{-webkit-appearance:radio;-moz-appearance:radio;appearance:radio}
input,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
::-webkit-input-placeholder{color:#999}
:-moz-placeholder{color:#999}
::-moz-placeholder{color:#999}
:-ms-input-placeholder{color:#999}
::placeholder{color:#999;opacity:1}
table{width:100%;border:0;border-spacing:0;border-collapse:collapse;empty-cells:show}
caption{visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0}
legend{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.blind{overflow:hidden;position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px}

/**
 * layout
 */

body { overflow-y:scroll; background-color: #000 }

#header{position: absolute;z-index: 1001;/* background-color:#fff; */width: 100%;background-color: rgba(0,0,0,0.0);background-image: linear-gradient(0deg, rgba(0,0,0,0.0), rgba(0,0,0,0.3));}
#header.fixed {position:fixed;top:0;right:0;left:0;z-index:9001}
#header.fixed .inner{ }
#header.fixed .gnb{ }
#header.fixed .logo img{}
#header .inner{position:relative;width: auto;margin:0 auto}
#header .inner:after{position:absolute;right:0;bottom:0;left: 0;height: 1px;background-color: rgba(255,255,255,0.3);content:''}
#header .logo{display:inline-block;vertical-align:top}
#header .logo a{display:inline-block;overflow:hidden;vertical-align:top}
#header .logo img{width:auto;height: 34px;margin: 2rem 0 1.8rem 4.5rem;}

#header .btn_srch{display:none;position:absolute;top:2.7rem;right:7.1rem;width:3rem;height:3rem}
#header .btn_srch:after{display:block;position:absolute;top:50%;left:50%;width:3rem;height:3rem;background:url(../images/ico/ico_search.png) -3rem 0 no-repeat;-webkit-background-size:6rem auto;background-size:6rem auto;content:'';-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
#header .btn_side{display:none;position:absolute;top:2.7rem;right:2.2rem;width:3rem;height:3rem}
#header .btn_side:before,#header .btn_side:after{display:block;position:absolute;top:50%;left:50%;width:2.4rem;content:'';-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
#header .btn_side:before{height:1.7rem;border:3px solid #000;border-width:3px 0}
#header .btn_side:after{height:3px;background-color:#000}
.head_bn{position:absolute}
.head_bn a{display:block}
.head_bn.lft{top:2.2rem;left:0}
.head_bn.rgt{top:5.6rem;right:0}
.gnb{position:absolute;top:14rem;right:0}
.gnb .country,.gnb .date{float:left;color:#808080;font-size:1.3rem;line-height:2rem}
.gnb .country{margin-right:1rem}
.gnb .date{letter-spacing:0}
.report_svc{position:absolute;top:1.4rem;right:0}
.report_svc li{float:left;margin-left:2rem}
.report_svc li:first-child{margin-left:0}
.report_svc li a{display:block;font-size:1.4rem;line-height:2rem}

.nav{position: relative;display: inline-block;/* width: 600px; */top: 0;margin: auto;left: 14%;}
.nav ul{padding: 1rem 1.5rem;margin:0 auto;font-size:0;position: relative;}
.nav li{display:inline-block;vertical-align:top}
.nav li a{display:block;position:relative;padding: 0rem 2.8rem;color: rgba(255,255,255,0.85);font-weight:700;font-size: 1.7rem;line-height: 5rem;text-decoration:none; transition: all 0.3s ease;}
.nav li a:hover:after {transition: all 0.3s ease;display:block;position:absolute;right:0;bottom:-1.0rem;left:0;z-index:1;height:1px;color: #017eef;background-color: #fff;content:''}
.nav li.on a:after {transition: all 0.3s ease;display:block;position:absolute;right:0;bottom:-1.0rem;left:0;z-index:1;height:1px;color: #017eef;background-color: #fff;content:''}
.nav li.view_all a:hover:after {transition: all 0.3s ease;display:block;position:absolute;right:0;bottom:-1.0rem;left:0;z-index:1;height:1px;color: #017eef;background-color: #fff;content:''}
.nav li a:hover,.nav li.on a {color: #ebebeb;}

@media all and (max-width:1700px){
    .nav li a{padding: 0rem 2.0rem; font-size: 1.6rem;}
}

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

    .nav{left: 5%;}
    .nav li a{padding: 0rem 2.0rem; font-size: 1.6rem;}
}


.nav li.view_all a{margin-right: 2rem;}
.nav li.view_all a:before{display:block;position:absolute;top:50%;right:-1.1rem;width:1px;height: 1.5rem;background-color: rgba(255,255,255,0.5);content:'';-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.nav li.view_all.on a:after{display:none}

.nav .ico_menu{display:inline-block;position:relative;width:3.2rem;height: 5rem;margin:0 1.5rem 0 -1.6rem;vertical-align:top}
.nav .ico_menu:before,.nav .ico_menu:after{display:block;position:absolute;top:50%;left:50%;width:2.4rem;content:'';-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.nav .ico_menu:before{height:1.7rem;border: 2px solid rgba(255,255,255,0.85);border-width: 2px 0;}
.nav .ico_menu:after{height: 2px;background-color: rgba(255,255,255,0.85);}

.popular{/* border-bottom: 1px solid rgba(0,0,0,0.1); */}
.popular ul{padding: 0.4rem 3rem;margin:0 auto;font-size:0}
.popular li{display:inline-block;vertical-align:top}
.popular li a{display:block;position:relative;padding: 0.4rem 1.0rem;color: #666;font-weight:700;font-size: 1.1rem;text-decoration:none;border: 1px #e5e5e5 solid;border-radius: 2rem;margin: 0.3rem;background-color: rgba(0,0,0,0.02);transition: all 0.1s;}
.popular li a:hover {color: #fff; border: 1px #999 solid; background-color: rgba(0,0,0,0.30);   transition: all 0.3s; }

.head_search{position:absolute;right: 1.5em;top: 1.8rem;z-index:1;width: 30rem;background-color: #fff;border-radius: 2rem;}
.head_search .box_search{position:relative;height: 3.6rem;padding: 0 5rem 0 2.0rem;-webkit-border-radius:50px;border-radius:50px;background-color: rgba(0,0,0,0.04);border: rgba(255,255,255,1) solid 1px;}
.head_search .tf_keyword{width:100%;height: 3.3rem;padding:0;border:0;background-color:transparent;color:#666;font-size:1.6rem;vertical-align:top}
.head_search .tf_keyword::-webkit-input-placeholder{color:#666}
.head_search .tf_keyword:-moz-placeholder{color:#666}
.head_search .tf_keyword::-moz-placeholder{color:#666}
.head_search .tf_keyword:-ms-input-placeholder{color:#666}
.head_search .tf_keyword::placeholder{color:#666}
.head_search .tf_keyword::-ms-clear{display:none}
.head_search .btn_search{display:block;position:absolute;top:0;right:.7rem;z-index:2;width: 3rem;height: 3.6rem;}
.head_search .btn_search:after{display:block;position:absolute;top:50%;left:50%;width: 2.5rem;height: 2.7rem;background:url(../images/ico/ico_search.png) 0 0 no-repeat;-webkit-background-size:6rem auto;background-size: 5rem auto;content:'';-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.head_search .btn_del_txt{display:none;position:absolute;top:50%;right:.5rem;z-index:2;width:3rem;height:3rem;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.head_search .btn_del_txt:before,.head_search .btn_del_txt:after{display:block;position:absolute;top:50%;left:50%;width:1.3rem;height:2px;background-color:#000;content:'';-webkit-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}
.head_search .btn_del_txt:after{-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}
.head_search .tf_keyword:placeholder-shown+.btn_del_txt{display:none}
.head_search .btn_srch_back{display:none;position:absolute;top:50%;left:.5rem;z-index:2;width:3rem;height:3rem;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.head_search .btn_srch_back:after{display:block;position:absolute;top:50%;left:50%;width:1rem;height:1rem;border:2px solid #000;border-width:0 2px 2px 0;content:'';-webkit-transform:translate(-20%,-50%) rotate(135deg);transform:translate(-20%,-50%) rotate(135deg)}

.top_banner { position: relative; width: 100%;}
.top_banner .visual-text-wrap { width: calc(100% - 0px); margin: auto;}
.top_banner .visual-text-wrap button { background-color: #f7c000; color: #fff; border-radius: 3px; font-size: 21px; font-weight: 400; padding: 1.5% 5%; outline: none; cursor: pointer; margin-top: 0; border: 0; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}

.top_banner .visual-text-wrap button:hover { background-color: #f79700;}
.top_banner .visual-text-wrap .visual-text { z-index: 3; width: 100%; margin: 0; text-align: left; font-weight: 600; color: #fff; line-height: 1.2em;}
.top_banner .products_banner1_top {top:calc(100% - 360px);}
.top_banner .visual-text-wrap button { background-color:#f7c000;  color:#fff; border-radius:3px; font-size:18px; font-weight:400; padding:1.5% 5%; outline:none; cursor:pointer; margin-top:0; border:0; box-shadow:2px 2px 4px rgba(0,0,0,0.3);}
.top_banner .visual-text-wrap button:hover { background-color:#f79700; }
.top_banner .visual-text-wrap .visual-text {z-index: 101;width: calc(100% - 6rem);margin:0;text-align: center;font-weight:600;color:#fff;position: absolute;margin: auto;}


.top_banner .visual-text-wrap .visual-text h3 {padding: 11.5% 0 4%;font-size: 2.4rem;line-height:1.2em;color: #fff;font-weight: 400;margin:auto;letter-spacing: -0.03em;font-family: 'Arita-buri';}
.top_banner .visual-text-wrap .visual-text h3 strong {font-weight: 900;}
.top_banner .visual-text-wrap .visual-text h1 {padding: 0;font-size: 10rem;line-height:1.2em;color: #fff;font-weight:600;margin:auto;font-family: 'Arita-buri';}
.top_banner .visual-text-wrap .visual-text h1 strong {font-weight: bolder;font-size: 15rem;}
.top_banner .visual-text-wrap .visual-text h1 span  {display:block;font-size:1.8rem;font-weight:400;line-height:30px;margin: 3% 0 1.8%;letter-spacing: 0.00em}
.top_banner .visual-text-wrap .visual-text h1 span.other_text {color: #fff;}
/*.top_banner .visual-text-wrap .visual-text h1 span.other_text:before { content: ''; border-top: 1px solid #857676; width: 114px; margin-top: -40px; float: left }*/
.top_banner .visual-text-wrap .visual-text h1 span.other_text strong { font-size:1.8rem; text-decoration: underline }

.top_banner .visual-text-wrap .visual-text  {
    animation: banner_h 1.9s;
    animation-delay: 0.0s;
}

@keyframes banner_h {
    from {padding-top: 130px; opacity: 0}
    to {padding-top: 0px; opacity: 1}
}


.top_banner .visual-text-wrap .visual-text .btn {width: 300px;height: 5rem;line-height: 5rem;border: 0;position: relative;cursor: pointer;transition: all 0.3s ease;overflow: hidden;margin:42px 0 0;text-align:center;font-family:'Noto Sans KR', SF Pro Display, Century Gothic, 'CenturyGothic', nanumSqure, 'KoPub Dotum', 나눔고딕, AppleSDGothicNeo, sans-serif;border:1px solid rgb(204, 204, 204);border-radius: 4rem;background-color: rgba(255, 255, 255, 0.1);box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.1);}



.top_banner .visual-text-wrap .visual-text .btn > a { position: relative; /* color: #000; */ font-weight: 600; font-size: 1.6rem; letter-spacing: 0.0em; z-index: 1; transition: all 0.2s ease; vertical-align: top; }
/* sliders */
.top_banner .visual-text-wrap .visual-text .btn:before{  content: ""; width: 100%;height: 100%; background-color: #017eef; position: absolute;transition: all 0.2s ease; }
/* Left Slider */
.top_banner .visual-text-wrap .visual-text .btn-2:before{ top: 0; left: -380px; }
/* Hover Effect */
.top_banner .visual-text-wrap .visual-text .btn-2:hover:before { left: 0; }
.top_banner .visual-text-wrap .visual-text .btn:hover a{ text-decoration: none;  color: #fff; }

/*
.top_banner .visual-text-wrap .visual-text title {padding: 12.5% 0 5%;margin:auto;}
.top_banner .visual-text-wrap .visual-text title a img { display: inline-block; margin: auto}
*/

#player {padding-bottom: 55.9%;height: 0px;}
#myVideo {position: absolute;right: 0;width: 100%;height: auto;opacity: 1;z-index: 0;margin-top: 0;} #myBtn { cursor: pointer; }

.btn_install {display: block;text-align: right;/* margin: 20px 40px 20px; */z-index: 100000;position: fixed;top: 50rem;right: 0;}




/** 워크 슬라이드 210608 dt **/
.section input[id*="slide"] { display: none; }
.section .slidewrap {display: block;position: relative;width: calc(100% - 0px);min-width: 100%;margin: 0px auto;}
.section .slidelist { white-space: nowrap; font-size: 0; overflow: hidden; position: relative; }
.section .slidelist>li { display: inline-block; vertical-align: middle; width: 100%; transition: all .5s; overflow: hidden; /* padding-bottom: 14%; */ z-index: 1; position: inherit;}
.section .slidelist>li>a { display: block; position: relative; }
.section .slidelist>li>a img { width: 100%; }
.section .slidelist label {position:absolute; z-index: 10;top: 50%;transform: translateY(-50%);padding:36px 25px;margin: 0 10px;cursor: pointer; display: none}

.section .slidelist .banner_work { position: absolute; right: 0;  }
.section .slidelist .textbox {/* position: absolute; *//* z-index: 1; *//* top: 100px; *//* transform: translate(10%, -0%); */line-height: 1.6;text-align:justify; white-space: normal;}
.section .slidelist .textbox_w { position: relative; z-index: 2; width: 100%; padding: 19% 0 3%; line-height: 1.2; text-align: justify; white-space: normal; margin: auto; text-align: center;}
.section .slidelist .textbox_w h3 { font-size: 72px; color: #fff; opacity: 0; transform: translateY(30px); transition: all .5s; margin: auto; padding: 0; text-align: center; font-weight: 500;}
.section .slidelist .textbox_w h3 strong { display: block; font-weight: 600}/*.section .slidelist .textbox_w h3:after { content: ''; position: absolute; border-top: 1px solid #fff; width: 100px; margin-top: 50px; display: block;}*/
.section .slidelist .textbox_w p { font-size: 21px; color: #fff; opacity: 0; transform: translateY(30px); transition: all .5s; margin: auto; text-align: center; letter-spacing: 0.3rem; border-top: rgba(255, 255, 255, 0.7) solid 1px; padding-top: 1.5rem; margin-top: 0.5rem; display: inline-block;}
.section .slidelist .textbox_w p strong { display: block; font-size: 18px; color: #fff; font-weight: 400; margin-bottom: 30px;}


/* input에 체크되면 슬라이드 효과 */
.section input[id="slide01"]:checked~.slidewrap .slidelist>li { transform: translateX(-0%); opacity: 1 }
.section input[id="slide02"]:checked~.slidewrap .slidelist>li { transform: translateX(-100%); opacity: 1 }
.section input[id="slide03"]:checked~.slidewrap .slidelist>li { transform: translateX(-200%); opacity: 1 }
.section input[id="slide04"]:checked~.slidewrap .slidelist>li { transform: translateX(-300%); opacity: 1 }
.section input[id="slide05"]:checked~.slidewrap .slidelist>li { transform: translateX(-400%); opacity: 1 }
.section input[id="slide06"]:checked~.slidewrap .slidelist>li { transform: translateX(-500%); opacity: 1 }

/* input에 체크되면 텍스트 효과 */

/* 좌,우 슬라이드 버튼 */
.slide-control>div { display: none; }


#footer_intro{font-size: 1.05rem;line-height: 1.1rem;background-color: rgba(37,41,49,0.25);color: #fff;position: fixed;width: 100%;bottom: 0;z-index: 101;}
#footer_intro .inner{position:relative;padding: 2.6rem 0 3.6rem;margin:0 auto;text-align: center}
#footer_intro .copyright{ letter-spacing:0;margin: -0.4rem auto; width: 700px;opacity: 0.8;}
#footer_intro .info{padding-top:3rem;margin-top:3rem;border-top:1px solid rgba(227,227,227,.3)}
#header,#container,#footer_intro{}

#footer_intro .info_upload { float: left; margin-left: 40px;vertical-align: middle;}
#footer_intro .info_upload a {display: inline-block;background-color: #4b85e8;font-size: 1.4rem;font-weight: 600;border-radius: 2rem;padding: 0.8rem 2.4rem;}
#footer_intro .info_corp {float: right;margin-right: 40px;vertical-align: middle;}
#footer_intro .info_corp a  {display: inline-block;width: 100px;height: 26px;line-height: 24px;/* background-color: #4e4e4e; */font-size: 14px;border:#fff solid 1px;font-weight: 600}


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

    #footer_intro{ position: relative; bottom: auto; font-size: 1.1rem; line-height: 1.6rem;}
    #footer_intro .inner{position:relative;padding: 1.6rem 0;margin: 0 2rem;text-align: left;}
    #footer_intro .copyright{letter-spacing:0;margin-top: 2.5rem;padding: 0;display: block;width: 100%;}
    #footer_intro .info{padding-top:3rem;margin-top:3rem;border-top:1px solid rgba(227,227,227,.3)}

    #footer_intro .info_upload {float: none;margin: auto;vertical-align: middle;width: auto;display: inline-block;/* text-align: center; */}
    #footer_intro .info_upload a { font-size: 1.1rem; padding: 0.55rem 1.0rem; letter-spacing: -0.03rem; border-radius: 0rem;}
    #footer_intro .info_corp {margin-right: revert;vertical-align: middle;}
    #footer_intro .info_corp a  {display: inline-block;width: 60px;height: 26px;line-height: 24px;font-size: 12px;border: #e6e6e6 solid 1px;font-weight: 600;text-align: center;}
}


.btn_download_intro {margin: 0 auto 0;display: flex;flex-wrap: nowrap;padding: 2.4rem 0;width: 60rem;}
.btn_download_intro a {display:flex;margin: 0 auto;align-items: center;font-size: 36px;font-weight: 900;width: 460px;height: 84px;border-radius: 5rem;justify-content: center;gap: 25px;}
.btn_download_intro a .add_txt {font-size: 16px;line-height: 1.2;font-weight: 400;}
.btn_download_intro a .download_icon {max-height: 52px;}
.btn_download_intro a .download_w {background-color: rgba(56,107,233,0); border: #fff solid 1px;border-radius: 50px;padding: 15px 18px;height: 60px;}

.btn_app {display: block;margin:1rem auto;border-width: 0px;border-color: rgb(0, 0, 0);border-style: solid;background-color: rgba(0,0,0,0.7);box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.1);width: 100%;height: 45px;line-height: 45px;font-size:1.5rem;color: #fff;text-align: center;font-weight: 600;border-radius: 3rem;transition: all 0.3s;}
.btn_app:hover { background-color: rgba(54,25,91,1.0); transition: all 0.3s; text-decoration: none }

.btn_view {display: block;margin:1rem auto;border-width: 1px;border-color: rgba(255,255,255,1);border-style: solid;background-color: rgba(255,255,255,.1);box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.1);width: 50%;height: 5.5rem;line-height: 5.5rem;font-size: 2rem;color: #fff;text-align: center;font-weight: 600;border-radius: 3rem;transition: all 0.3s;}
.btn_view:hover { background-color: rgba(255,255,255,1); transition: all 0.3s; text-decoration: none; color: #333;transition: all 0.3s;}
.btn_view:hover .download_w {background-color: #386BE9; transition: all 0.3s; padding: 13px 16px;}


.btn_file2 {display: flow-root;margin:1rem auto;border-width: 1px;border-color: rgba(1,102,235,0.90);border-style: solid;background-color: rgba(1,102,235,0.90);box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.1);width: 50%;height: 5.5rem;line-height: 5.5rem;font-size: 2rem;color: #fff;text-align: center;font-weight: 600;border-radius: 3rem;transition: all 0.3s;}
.btn_file2:hover { background-color: rgba(0,60,140,1); border-color: rgba(0,60,140,1); transition: all 0.3s; text-decoration: none;transition: all 0.3s;}
.btn_file2 img {height: 18px;vertical-align: text-top;margin-right: 1rem;}

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

    .btn_download_intro {width: unset;}
    .btn_download_intro a {font-size: 30px;width: 336px;height: 60px;gap: 15px;}
    .btn_download_intro a .add_txt {font-size: 13px;line-height: 1.2;font-weight: 400;}
    .btn_download_intro a .download_icon {max-height: 40px;}
    .btn_download_intro a .download_w {background-color: rgba(56,107,233,0);border: #fff solid 1px;border-radius: 50px;padding: 10px 13px;height: 45px;}

    .btn_app {display: block;margin:1rem auto;border-width: 0px;border-color: rgb(0, 0, 0);border-style: solid;background-color: rgba(0,0,0,0.7);box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.1);width: 100%;height: 45px;line-height: 45px;font-size:1.5rem;color: #fff;text-align: center;font-weight: 600;border-radius: 3rem;transition: all 0.3s;}
    .btn_app:hover { background-color: rgba(54,25,91,1.0); transition: all 0.3s; text-decoration: none }

    .btn_view {display: block;margin:1rem auto;border-width: 1px;border-color: rgba(255,255,255,1);border-style: solid;background-color: rgba(255,255,255,.1);box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.1);width: 50%;height: 5.5rem;line-height: 5.5rem;font-size: 2rem;color: #fff;text-align: center;font-weight: 600;border-radius: 3rem;transition: all 0.3s;}
    .btn_view:hover { background-color: rgba(255,255,255,1); transition: all 0.3s; text-decoration: none; color: #333;transition: all 0.3s;}
    .btn_view:hover .download_w {background-color: #386BE9; transition: all 0.3s; padding: 13px 16px;}

    .btn_file2 {display: flow-root;margin:1rem auto;border-width: 1px;border-color: rgba(1,102,235,0.90);border-style: solid;background-color: rgba(1,102,235,0.90);box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.1);width: 40%;height: 4.5rem;line-height: 4.5rem;font-size: 1.6rem;color: #fff;text-align: center;font-weight: 600;border-radius: 3rem;transition: all 0.3s;}
    .btn_file2:hover { background-color: rgba(0,60,140,1); border-color: rgba(0,60,140,1); transition: all 0.3s; text-decoration: none;transition: all 0.3s;}
    .btn_file2 img {height: 18px;vertical-align: text-top;margin-right: 1rem;}


}

@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
    @media screen and (max-width:320px){
        html{font-size:56%}
    }
    @media screen and (min-width:405px){
        html{font-size:70%}
    }
}

/* 페이징 */
.slide-pagelist {display: none }


@media all and (max-width:640px){
    *{text-decoration:none !important}
    *:hover .thumb img,.thumb:hover img{-webkit-transition-duration:0s !important;transition-duration:0s !important;-webkit-transform:scale(1) !important;transform:scale(1) !important }

    /**
     * layout
     */

    #header .inner{width:100%;padding: 0;}
    #header .inner:after{/* right:10.5rem; *//* left:10.5rem; *//* height: 0; */}
    #header .logo{display:block;text-align:center}
    #header .logo img{ height: 3rem; margin: 1.8rem auto;}


    #header .btn_srch,#header .btn_side{display:block}

    .head_bn,.gnb,.nav{/* display:none; */position: relative;left: auto;overflow: hidden;overflow-x: auto;height: 50px;}

    .head_search{display:none;top:0;right:0;bottom:auto;left:0;width:auto;padding:1.6rem 2rem 1.7rem;background-color:#2f1764}
    .head_search .box_search{height:5rem;padding:0 4rem;border:1px solid #ccc;-webkit-border-radius:5px;border-radius:5px;background-color:#fff}
    .head_search .tf_keyword{margin-top:1.3rem;color:#676767;font-weight:700;font-size:1.5rem}
    .head_search .tf_keyword::-webkit-input-placeholder{color:#676767}
    .head_search .tf_keyword:-moz-placeholder{color:#676767}
    .head_search .tf_keyword::-moz-placeholder{color:#676767}
    .head_search .tf_keyword:-ms-input-placeholder{color:#676767}
    .head_search .tf_keyword::placeholder{color:#676767}
    .head_search .btn_search{display:none;right:0;width:4.8rem;height:4.8rem}
    .head_search .btn_search:after{background-position:-3rem 0}
    .head_search .btn_del_txt,.head_search .btn_srch_back{display:block}

    .nav{position: relative;display: inline-block; width: 100%; top: 0;left: 0;height: auto;}
    .nav ul{overflow:hidden;overflow-x:auto;padding: 0rem 1.5rem;white-space:nowrap}
    .nav li a{padding:0 .6rem;margin:0 .2rem ;font-size:1.3rem;line-height:3.4rem}
    .nav li a{display:block;position:relative;/* padding: 0.5rem 0.8rem; *//* color: #333; */font-weight:700;font-size: 1.4rem;line-height: 3rem;text-decoration:none}
    .nav li a:hover:after,
    .nav li.on a:after {display:block;position:absolute;right:0;bottom:-1.0rem;left:0;z-index:1;height:1px;color: #017eef;background-color: #017eef;content:''}
    .nav li a:hover,
    .nav li.on a {/* color: #017eef; */}


    .nav .ico_menu {display: inline-block;position: relative;width: 3.2rem;height: 3.2rem;margin: 0 1.5rem 0 -1.6rem;vertical-align: top;}
    .nav .ico_menu:before,.nav .ico_menu:after{display:block;position:absolute;top:50%;left:50%;width:2.4rem;content:'';-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
    .nav .ico_menu:before{height:1.7rem;border: 2px solid rgba(255,255,255,0.85);border-width: 2px 0;}
    .nav .ico_menu:after{height: 2px;background-color: rgba(255,255,255,0.85);}

    .head_search{display:none;top:1.2rem;right:6rem;bottom:auto;left:1.5rem;width:auto}
    .head_search .box_search{height:4.7rem;padding:1rem 4rem 1.1rem 1.8rem;border-width:2px;-webkit-border-radius:6px;border-radius:6px}
    .head_search .btn_search{display:none;right:0;width:4.4rem;height:4.3rem}
    .head_search .btn_del_txt{display:block;right:.5rem}
    .head_search .btn_srch_back{display:block}


    #container .inner{width:100%;padding-top:3.3rem}
    #container.main{background:none}
    .content,.aside{float:none;width:100%}


    .customer {display: block;text-align: center; max-width: 100%; margin: auto;}
    .customer_box { min-width: 100%; }

    #footer{font-size:1rem}
    #footer .inner{width:100%;padding: 2.5rem 2rem 10rem;text-align: left;}
    #footer .foot_logo{display:block;position:static;top:auto;left:auto;text-align:center}
    #footer .foot_logo img{height:4.5rem}
    #footer .info_corp{padding-left: 0;margin-top: 0;margin-right: 0;text-align: center;}
    #footer .info_corp li{margin-right:2rem}
    #footer .info_corp li a{font-size:1rem}
    #footer address{padding-left:0;margin-top:1.3rem;font-size:1rem;line-height:1.8rem}
    #footer address span{margin-right:1rem}
    #footer address br{display:none}
    #footer .info{padding-top:1.6rem;margin-top:1.6rem;line-height:1.8rem}
    #footer .copyright{margin-top: 2.5rem;padding: 0;display: block;width: auto;}
    #header,#container,#footer{min-width:auto;text-align: left;}

    .top_banner .visual-text-wrap { width: calc(100% - 0px); margin: auto; }
    .top_banner .visual-text-wrap button { background-color: #f7c000; color: #fff; border-radius: 3px; font-size: 21px; font-weight: 400; padding: 1.5% 5%; outline: none; cursor: pointer; margin-top: 0; border: 0; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); }
    .top_banner .visual-text-wrap button:hover { background-color: #f79700; }
    .top_banner .visual-text-wrap .visual-text {z-index: 3;width: 100%;margin: 0;/* text-align: left; */font-weight: 600;color: #fff;line-height: 1.2em;}
    .top_banner .products_banner1_top {top:calc(100% - 360px);}
    .top_banner .visual-text-wrap button { background-color:#f7c000;  color:#fff; border-radius:3px; font-size:18px; font-weight:400; padding:1.5% 5%; outline:none; cursor:pointer; margin-top:0; border:0; box-shadow:2px 2px 4px rgba(0,0,0,0.1);}
    .top_banner .visual-text-wrap button:hover { background-color:#f79700; }
    .top_banner .visual-text-wrap .visual-text {z-index:3;width:100%;margin:0;/* text-align:left; */font-weight:600;color:#fff;}

    .top_banner .visual-text-wrap .visual-text h3 {padding: 43% 0 5%;font-size: 1.4rem;line-height:1.2em;color: #fff;font-weight: 400;margin:auto;letter-spacing: -0.03em;font-family: 'Arita-buri';}
    .top_banner .visual-text-wrap .visual-text h3 strong {font-weight: 900;}


    .top_banner .visual-text-wrap .visual-text h1 {padding: 0;font-size: 3rem;line-height: normal;color: #fff;font-weight:600;margin:auto;font-family: 'Arita-buri';}
    .top_banner .visual-text-wrap .visual-text h1 strong {font-weight: bolder;font-size: 8rem;}
    .top_banner .visual-text-wrap .visual-text h1 img { max-width: calc(100% - 6rem)}
    .top_banner .visual-text-wrap .visual-text h1 span  {display:block;font-size: 1.4rem;font-weight:400;line-height:1.4;width: calc(100% - 6rem);margin: 2.5rem auto 0;letter-spacing: 0.00em;}
    .top_banner .visual-text-wrap .visual-text h1 span.other_text {color: #fff;}

    .top_banner .visual-text-wrap .visual-text .btn {width: 240px;height: 36px;line-height: 36px;border: 0;position: relative;cursor: pointer;transition: all 0.3s ease;overflow: hidden;background-color: #4b85e8;border-radius: 0.3rem;margin: 25px 0 0;text-align:center;font-family:'Noto Sans KR', SF Pro Display, Century Gothic, 'CenturyGothic', nanumSqure, 'KoPub Dotum', 나눔고딕, AppleSDGothicNeo, sans-serif;}
    .top_banner .visual-text-wrap .visual-text .btn > a { color: #fff; font-weight: 600; font-size: 15px; position: relative; z-index: 1; transition: all 0.2s ease;     font-size: 14px;
        vertical-align: top; }
    /* sliders */
    .top_banner .visual-text-wrap .visual-text .btn:before{  content: ""; width: 100%;height: 100%;background-color: #017eef; position: absolute;transition: all 0.2s ease; }
    /* Left Slider */
    .top_banner .visual-text-wrap .visual-text .btn-2:before{ top: 0; left: -380px; }
    /* Hover Effect */
    .top_banner .visual-text-wrap .visual-text .btn-2:hover:before { left: 0; }
    .top_banner .visual-text-wrap .visual-text .btn:hover a{ text-decoration: none  }

    #player {height: 580px;padding-bottom: 30%;}
    #myVideo {position: absolute;left: 0;right: 0;width: auto;height: calc(100% - 16px);opacity: 1;z-index: 0;top: 0rem;margin: 0;} #myBtn { cursor: pointer; }

    /**
     *  content
     */

    .cont_top,.cont_med,.cont_btm{width:100%}
    .cont_btm{padding-top:1rem}
    .cont_med .col_left,.cont_btm .col_left,.cont_med .col_right,.cont_btm .col_right{float:none;width:100%}
    .popular ul {padding: 1rem; }
    .popular li{ }
    .popular li a{display:block;position:relative;padding: 0.5rem 1.0rem;color: #666;font-weight:700;font-size: 1.1rem;text-decoration:none;border: 1px #ccc solid;border-radius: 2rem;margin: 0.3rem;background-color: rgba(0,0,0,0.03);transition: all 0.3s;}
    .popular li a:hover {color: #fff; border: 1px #999 solid; background-color: rgba(0,0,0,0.30);   transition: all 0.3s; }


    #container table { width: 100%; border: 1px solid #cccccc;  border-collapse: separate; border-spacing: 0; border-radius: 0px; overflow: hidden; margin: auto}
    #container table th,
    #container table td { color:#666; font-size: 11px; padding: 0.6em; border-bottom: 1px solid #cccccc; background-color: #fff; font-weight: 400; line-height: 1.3em; text-align: center   }
    #container table th { color:#666; font-size: 11px; background-color:#f6f7fb; text-transform: uppercase; }
    #container table th + th { border-left: 1px solid #cccccc;  text-align:center;}
    #container table .last_tr td { border-bottom:0 }
    #container table font { text-transform:none }

}