@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*============================================================================================================
    리셋
============================================================================================================*/
*{outline:0!important; box-sizing:border-box;}
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {margin:0;padding:0;}
html,body{width:100%;}
html{font-family:sans-serif;}
body{width:100%;background:#fff;min-width:320px;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-text-size-adjust:100%;word-wrap:break-word;word-break:keep-all;}
body,input,select,textarea,button{border:none;font-size:12px;font-family:'Noto Sans TC', 'Noto Sans SC', sans-serif;color:#727272;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
img,fieldset{width:100%;border:0;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle;}
.hide,caption,legend{line-height:0;font-size:1px;overflow:hidden;}
hr{display:none;}
main,header,section,nav,footer,aside,article,figure{display:block;}
a{color:#fff;text-decoration:none;}

/* Selection */
::-moz-selection {background:rgba(255,90,18,0.1);}
::selection {background:rgba(255,90,18,0.1);}

/* Form */
.custom{-webkit-appearance:none;-moz-appearance:none;appearance:none;}
select.custom::-ms-expand {display:none;}

/* Kakao Map */
.root_daum_roughmap {width:100%!important; border-radius:0!important; border:none!important; padding:0!important;}
.root_daum_roughmap .wrap_controllers {display:none!important;}

/* Fonts */
.montserrat {font-family:'Montserrat', sans-serif;}





/*============================================================================================================
    레이아웃
============================================================================================================*/
.inner {position:relative; max-width:1140px; width:100%; font-size:0; margin:0 auto; padding:0 20px;}
.inner:after {display:block; clear:both; content:'';}

.only_pc {display:block;}
.only_m {display:none;}

@media all and (max-width:768px){
    .only_pc {display:none;}
    .only_m {display:block;}
}





/*============================================================================================================
    헤더
============================================================================================================*/
.header {position:fixed; width:100%; height:100px; top:0; left:0; right:0; background:transparent; box-shadow:1px 1px 3px rgba(0,0,0,0.0); z-index:100; transition:all 0.5s;}
.header h1 {float:left; padding:32.5px 0; transition:all 0.5s;}
.header h1 a {display:block; width:128px; height:35px; text-indent:-9999px; background:url('/images/chost/layout/header-logo_white.png') no-repeat center / 100%; transition:all 0.5s;}
.header .gnb {float:right;}
.header .gnb > ul {margin:0 -24px;}
.header .gnb > ul > li {display:inline-block; vertical-align:top; margin:0 18px; padding:31.5px 0; transition:all 0.5s;}
.header .gnb > ul > li > a {display:block; font-size:14px; color:#fff; font-weight:500; padding:8px 0; transition:all 0.5s;}
.header .gnb > ul > li > a:hover {border-bottom:1px solid #fff;}
.header .gnb > ul > li.active > a {border-bottom:1px solid #fff;}
.header .gnb > ul > li.lang {padding:39.5px 0;}
.header .gnb > ul > li.lang > a {display:inline-block; vertical-align:middle; background:url('/images/chost/layout/header-lang_arrow.png') right center no-repeat; padding: 0 17px 0 0; transition:all 0.5s;}
.header .gnb > ul > li.lang > a > span {background:url('/images/chost/layout/header-lang_icon.png') left center no-repeat; padding:0 0 0 27px;}
.header .gnb > ul > li.lang > a:hover {border-bottom:none;}
.header .gnb > ul > li.lang > ul {position:relative; display:none; width:100%; top:10px; left:50%; text-align:center; background:#fff; border:1px solid #dfdcda; border-radius:10px; padding:12.5px 0; transform:translate(-50%,0)}
.header .gnb > ul > li.lang > ul > li {display:inline-block; width:100%; margin:0 auto 7px;}
.header .gnb > ul > li.lang > ul > li:last-child {margin:0 auto;}
.header .gnb > ul > li.lang > ul > li > a {display:block; font-size:12px; color:#323232; font-weight:500;}
.header .toggle,
.header .toggle_btn {display:none;}
.header.scroll {height:80px; background:#fff; box-shadow:1px 1px 3px rgba(0,0,0,0.1);}
.header.scroll h1 {padding:22.5px 0;}
.header.scroll h1 a {background:url('/images/chost/layout/header-logo_color.png') no-repeat center / 100%;}
.header.scroll .gnb > ul > li {padding:21.5px 0;}
.header.scroll .gnb > ul > li > a {color:#111;}
.header.scroll .gnb > ul > li > a:hover {border-bottom:1px solid #111;}
.header.scroll .gnb > ul > li.active > a {border-bottom:1px solid #111;}
.header.scroll .gnb > ul > li.lang {padding:29px 0;}
.header.scroll .gnb > ul > li.lang > a {background:url('/images/chost/layout/header-lang_arrow-active.png') right center no-repeat;}
.header.scroll .gnb > ul > li.lang > a:hover {border-bottom:none;}
.header.scroll .gnb > ul > li.lang > a > span {background:url('/images/chost/layout/header-lang_icon-active.png') left center no-repeat;}

@media all and (max-width:1200px){
    .header .gnb {display:none;}
    .header .toggle_btn {position:absolute; display:block; top:0; right:0; text-align:center; z-index:1;}
    .header .toggle_btn a {position:relative; display:inline-block; width:100px; height:100px; transition:all 0.5s;}
    .header .toggle_btn .btn {position:absolute; display:inline-block; width:20px; height:14px; top:50%; left:50%; transform:translate(-50%,-50%)}
    .header .toggle_btn .btn .line {position:absolute; width:100%; height:2px; left:0; background:#fff; transition:top 0.3s ease, bottom 0.3s ease, background 0.5s, opacity 0.5s ease, transform 0.3s ease;}
    .header .toggle_btn .btn .line.top {top:0;}
    .header .toggle_btn .btn .line.mid {top:6px;}
    .header .toggle_btn .btn .line.btm {bottom:0;}
    .header.scroll .toggle_btn a {width:80px; height:80px;}
    .header.scroll .toggle_btn .btn .line {background:#313939;}
    .header .toggle_btn.active .btn .line.top {top:calc(50% - 1px); transform:rotate(45deg);}
    .header .toggle_btn.active .btn .line.mid {opacity:0;}
    .header .toggle_btn.active .btn .line.btm {bottom:calc(50% - 1px); transform:rotate(-45deg);}
    .header .toggle {position:fixed; width:100%; height:100%; top:0; left:0; bottom:0; right:0; background:rgb(255,0,0); background:linear-gradient(120deg, rgba(255,90,18,1) 0%, rgba(255,0,0,1) 100%); z-index:100;}
    .header .toggle_gnb {display:table; width:100%; height:100%; box-sizing:border-box;}
    .header .toggle_gnb > ul {display:table-cell; vertical-align:middle; font-size:0; text-align:center; padding:0 120px 0;}
    .header .toggle_gnb > ul > li {display:inline-block; width:50%; text-align:center; vertical-align:top; padding:35px 0;}
    .header .toggle_gnb > ul > li > a {display:block; font-size:25px; color:#fff; font-weight:700; line-height:1.34;}
    .header.toggle_clicked .toggle_btn {z-index:110;}
    .header.scroll.toggle_clicked .toggle_btn .btn .line {background:#fff;}
}

@media all and (max-width:768px){
    .header .toggle_gnb > ul {padding:0 0 20px;}
    .header .toggle_gnb > ul > li {width:100%; margin:0 auto 7vw; padding:0;}
    .header .toggle_gnb > ul > li > a {font-size:6vw;}
}

@media all and (max-width:500px){
    .header.toggle_clicked {overflow:visible;}
}



/*============================================================================================================
    POPUP
============================================================================================================*/
.popup {position:fixed; display:none; width:100%; height:100%; top:0; left:0; right:0; bottom:0; z-index:20;}
.popup .bg {position:fixed; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:25;}
.popup .cont {position:fixed; max-width:896px; max-height:672px; width:100%; height:100%; top:50%; left:50%; transform:translate(-50%,-50%); padding:20px; z-index:30;}
.popup .cont > div {position:relative; display:none; width:100%; height:100%; font-size:0; background:#fff; padding:0 30px;}
.popup .cont h4 {font-size:25px; color:#1b1b1b; font-weight:500; text-align:center; padding:22px 0 20px;}
.popup .cont a {position:absolute; display:inline-block; width:30px; height:30px; top:0; right:0; font-size:30px; color:#000; font-weight:500; line-height:30px; text-align:center;}
.popup .cont .txt {width:100%; height:82%; border-top:2px solid #1b1b1b; border-bottom:1px solid #1b1b1b; padding:25px 0 5px; overflow-y:scroll;}
.popup .cont .txt p {font-size:16px; color:#1b1b1b; font-weight:400; line-height:22px; margin:0 auto 25px;}



/*============================================================================================================
    푸터
============================================================================================================*/
.footer .bg01 {background:#2c2e31;}
.footer .bg02 {background:#3c3f44; padding:20px 0;}
.footer .left,
.footer .right {display:inline-block; width:50%; vertical-align:top;}
.footer .bg02 .left,
.footer .bg02 .right {vertical-align:middle;}
.footer .sitemap {border-bottom:1px solid #4e5053; padding:39px 0 55px;}
.footer .sitemap > ul > li {display:inline-block; width:25%; vertical-align:top;}
.footer .sitemap > ul > li > a {display:inline-block; font-size:18px; color:#fff; font-weight:500; margin:0 auto 7px;}
.footer .sitemap > ul > li > ul > li > a {display:inline-block; font-size:15px; color:#8f9090; font-weight:300; line-height:1.73333}
.footer .info {padding:54px 0 64px;}
.footer .info .left {padding:0 75px 0 0;}
.footer .info h2 {font-size:15px; color:#8f9090; font-weight:500; margin:0 auto 8px;}

.footer .info .txt p {font-size:15px; color:#8f9090; font-weight:300; line-height:1.6;}
.footer .info .txt p a {font-size:15px; color:#8f9090; font-weight:300; line-height:1.6;}

.footer .info .txt p span {font-weight:500;}
.footer .info .sns {margin:13px auto 18px;}
.footer .info .sns a {display:inline-block; margin:0 30px 0 0;}
.footer .info .sns a img {width:auto;}
.footer .info .btn a {display:inline-block; border:1px solid #8f9090; padding:13px 15px;}
.footer .info .btn a span {display:inline-block; font-size:14px; color:#fff; font-weight:400; background:url('/images/chost/layout/footer-down_icon01.png') no-repeat right center / 16px; padding:0 30px 0 0;}
.footer h1 {display:inline-block; vertical-align:middle;}
.footer h1 a {display:inline-block; width:103px; height:28px; background:url('/images/chost/layout/footer-logo.png') no-repeat center / 100%; }
.footer .copy {display:inline-block; vertical-align:middle; font-size:14px; color:#8e8f90; font-weight:300; padding:0 0 0 32px}
.footer .payments h2 {display:inline-block; vertical-align:middle; font-size:14px; color:#8f9090; font-weight:300;}
.footer .payments > div {display:inline-block; vertical-align:middle; padding:0 0 0 30px}
.footer .payments > div a {display:inline-block; margin:5px 10px 5px 5px;}
.footer .payments > div a img {width:auto} 

@media all and (max-width:1200px){
    .footer .bg02 {padding:15px 0;}
    .footer .sitemap {padding:32px 0 50px;}
    .footer .sitemap > ul > li > a {font-size:16px; margin:0 auto 5px;}
    .footer .sitemap > ul > li > ul > li > a {font-size:13.5px;}
    .footer .info {padding:45px 0 55px;}
    .footer .info .left {padding:0 60px 0 0;}
    .footer .info h2 {font-size:14px; margin:0 auto 6px;}
    .footer .info .txt p {font-size:14px;}
    .footer .info .sns {margin:10px auto 15px;}
    .footer .info .sns a {margin:0 20px 0 0;}
    .footer .info .btn a {padding:10px 12px;}
    .footer .info .btn a span {font-size:13px; background:url('/images/chost/layout/footer-down_icon01.png') no-repeat right center / 13px; padding:0 25px 0 0;}
    .footer h1 a {width:85px; height:23px;}
    .footer .copy {font-size:13px; padding:0 0 0 25px}
    .footer .payments h2 {font-size:13px;}
    .footer .payments > div {padding:0 0 0 5px}
    .footer .payments > div a {margin:3px;}
}

@media all and (max-width:850px){
    .footer .bg02 {padding:25px 0;}
    .footer .left,
    .footer .right {width:100%;}
    .footer .bg02 .left,
    .footer .bg02 .right {vertical-align:top;}
    .footer .sitemap {padding:25px 0 8px;}
    .footer .sitemap > ul > li {width:50%; padding:0 0 30px}
    .footer .sitemap > ul > li > a {font-size:14px; margin:0 auto 3px;}
    .footer .sitemap > ul > li > ul > li > a {font-size:13px;}
    .footer .info {padding:25px 0 35px;}
    .footer .info .left {padding:0;}
    .footer .info h2 {font-size:13px; margin:0 auto 4px;}
    .footer .info .txt p {font-size:13px;}
    .footer .info .sns {text-align:center; margin:20px auto;}
    .footer .info .sns a {margin:0 15px 0 0;}
    .footer .info .btn {text-align:center;}
    .footer .info .btn a {padding:8px 10px;}
    .footer .info .btn a span {font-size:12.5px; background:url('/images/chost/layout/footer-down_icon01.png') no-repeat right center / 10px; padding:0 20px 0 0;}
    .footer h1 {display:block; text-align:center; margin:0 auto 10px}
    .footer h1 a {width:103px; height:28px;}
    .footer .copy {display:block; text-align:center; font-size:12.5px; padding:0}
    .footer .payments {margin:20px auto 0;}
    .footer .payments h2 {display:block; text-align:center; font-size:12.5px; margin:0 auto 5px}
    .footer .payments > div {display:block; text-align:center; padding:0}
    .footer .payments > div a {margin:3px;}   
}