/*============================================================================================================
    怨듯넻
============================================================================================================*/
/* visual */
.sub .visual {text-align:center; background:rgb(255,0,0); background:linear-gradient(120deg, rgba(255,90,18,1) 0%, rgba(255,0,0,1) 100%); padding:179px 0 79px;}
.sub .visual h2 {font-size:42px; color:#fff; font-weight:700; text-transform:capitalize;}
.sub .visual .title_note {margin:12px auto 0; font-size:16px; color:#fff; font-weight:300; text-align:center; line-height:1.5;}

@media all and (max-width:1200px){   
    .sub .visual {padding:140px 0 80px;}
    .sub .visual h2 {font-size:36px;}
    .sub .visual .title_note {font-size:14px;}
}

@media all and (max-width:768px){   
    .sub .visual {padding:110px 0 60px;}
    .sub .visual h2 {font-size:30px;}   
    .sub .visual .title_note {font-size:12.5px;}
}

/* common_title */
.sub .common_title {font-size:36px; color:#111; font-weight:700; text-align:center;}

@media all and (max-width:1200px){
    .sub .common_title {font-size:32px;}
}

@media all and (max-width:768px){
    .sub .common_title {font-size:20px;}
}

/* content */
.sub .content {padding:100px 0;}

@media all and (max-width:1200px){
    .sub .content {padding:80px 0;}
}

@media all and (max-width:768px){
    .sub .content {padding:45px 0;}
}





/*============================================================================================================
    discount
============================================================================================================*/
.sub .discount .table_layout {margin:65px auto 0;}
.sub .discount .table_layout:first-child {margin:0;}
.sub .discount .table_layout h2 {margin:0 auto 18px;}
.sub .discount .table_layout .table {border-top:1px solid #969696;}
.sub .discount .table_layout .table table th {width:50%; height:57px; font-size:18px; color:#1b1b1b; font-weight:500; background:#f7f7f7; border:1px solid #d4d4d4;}
.sub .discount .table_layout .table table td {width:50%; height:61px; font-size:16px; color:#1b1b1b; font-weight:300; text-align:center; background:#fff; border:1px solid #d4d4d4;}

@media all and (max-width:1200px){
    .sub .discount .table_layout {margin:40px auto 0;}
    .sub .discount .table_layout h2 {margin:0 auto 12px;}
    .sub .discount .table_layout .table table th {height:52px; font-size:16px;}
    .sub .discount .table_layout .table table td {height:54px; font-size:14px;}
}

@media all and (max-width:768px){
    .sub .discount .table_layout {margin:25px auto 0;}
    .sub .discount .table_layout h2 {margin:0 auto 8px;}
    .sub .discount .table_layout .table table th {height:50px; font-size:14px;}
    .sub .discount .table_layout .table table td {height:52px; font-size:12.5px;}
}





/*============================================================================================================
    speed
============================================================================================================*/
.sub .speed .apply ul {margin:73px -75px 0;}
.sub .speed .apply ul li {position:relative; display:inline-block; width:33.33333%; vertical-align:top; padding:25px 75px }
.sub .speed .apply ul li:after {position:absolute; width:15px; height:24px; top:50%; right:0; background:url('/images/chost/sub/speed-arrow.png') no-repeat center / 100%; margin:-12px -7.5px 0 0; content:'';}
.sub .speed .apply ul li:nth-child(3n):after {display:none;}
.sub .speed .apply ul li .box {position:relative; width:100%; height:238px; text-align:center; border-radius:10px; padding:39px 0 0; box-shadow: 0px 0px 10px rgba(7,0,2,0.15); }
.sub .speed .apply ul li .box h2 {font-size:22px; color:#111; font-weight:700; background-repeat:no-repeat; background-position:center top; background-size:70px; margin:0 auto 11px; padding:87px 0 0 0;}
.sub .speed .apply ul li .box h2.icon01 {background-image:url('/images/chost/sub/speed-icon01.png');}
.sub .speed .apply ul li .box h2.icon02 {background-image:url('/images/chost/sub/speed-icon02.png');}
.sub .speed .apply ul li .box h2.icon03 {background-image:url('/images/chost/sub/speed-icon03.png');}
.sub .speed .apply ul li .box h2.icon04 {background-image:url('/images/chost/sub/speed-icon04.png');}
.sub .speed .apply ul li .box h2.icon05 {background-image:url('/images/chost/sub/speed-icon05.png');}
.sub .speed .apply ul li .box h2.icon06 {background-image:url('/images/chost/sub/speed-icon06.png');}
.sub .speed .apply ul li .box .desc {font-size:14px; color:#111; font-weight:300; line-height:1.28571;}
.sub .speed .apply ul li .box .num {position:absolute; top:0; right:20px; font-size:92px; color:#f3f3f3; font-weight:700; line-height:1;}

@media all and (max-width:1270px){
    .sub .speed .apply ul {margin:65px 0 0;}
    .sub .speed .apply ul li {padding:23px 40px }
    .sub .speed .apply ul li:after {width:12px; height:19px; margin:-9.5px -6px 0 0;}
    .sub .speed .apply ul li .box {height:210px; border-radius:8px; padding:32px 0 0;}
    .sub .speed .apply ul li .box h2 {font-size:18px; background-size:60px; margin:0 auto 8px; padding:80px 0 0 0;}
    .sub .speed .apply ul li .box .desc {font-size:13.5px;}
    .sub .speed .apply ul li .box .num {right:15px; font-size:75px;}    
}

@media all and (max-width:900px){
    .sub .speed .apply ul {margin:40px 0 0;}
    .sub .speed .apply ul li {width:50%; padding:20px 30px }
    .sub .speed .apply ul li:after {width:10px; height:16px; margin:-8px -5px 0 0;}
    .sub .speed .apply ul li:nth-child(2n):after {display:none;}
    .sub .speed .apply ul li:nth-child(3n):after {display:inline-block;}
    .sub .speed .apply ul li:last-child:after {display:none;}
    .sub .speed .apply ul li .box {height:180px; border-radius:6px; padding:26px 20px 0;}
    .sub .speed .apply ul li .box h2 {font-size:16px; background-size:45px; margin:0 auto 6px; padding:60px 0 0 0;}
    .sub .speed .apply ul li .box .desc {font-size:13px;}
    .sub .speed .apply ul li .box .num {right:10px; font-size:60px;}    
}

@media all and (max-width:768px){
    .sub .speed .apply ul {margin:30px 0 0;}
    .sub .speed .apply ul li {width:100%; padding:0 0 50px }
    .sub .speed .apply ul li:after {width:10px; height:16px; top:inherit; bottom:0; right:inherit; left:50%; margin:0 0 16px -5px; transform:rotate(90deg);}
    .sub .speed .apply ul li:nth-child(2n):after {display:inline-block;}
    .sub .speed .apply ul li:last-child {padding:0}
    .sub .speed .apply ul li:last-child:after {display:none;}
    .sub .speed .apply ul li .box {height:auto; border-radius:4px; padding:22px 40px;}
    .sub .speed .apply ul li .box h2 {font-size:15px; background-size:35px; margin:0 auto 5px; padding:45px 0 0 0;}
    .sub .speed .apply ul li .box .desc {font-size:12px;}
    .sub .speed .apply ul li .box .num {right:8px; font-size:50px;}    
}





/*============================================================================================================
    faq
============================================================================================================*/
.sub .faq .left {display:inline-block; width:23.5%; vertical-align:top; padding:0 45px 0 0;}
.sub .faq .left ul {border-radius:10px; box-shadow:0px 0px 10px rgba(7,0,2,0.15)}
.sub .faq .left ul li {border-bottom:1px solid #d8d9d9;}
.sub .faq .left ul li:last-child {border-bottom:none;}
.sub .faq .left ul li a {display:block; font-size:18px; color:#111; font-weight:500; line-height:1.22222; padding:17px 0 17px 20px;}
.sub .faq .left ul li.active a {color:#ff1a09;}
.sub .faq .right {display:inline-block; width:76.5%; vertical-align:top;}
.sub .faq .right .tab_content > h2 {font-size:24px; color:#111; font-weight:500;}
.sub .faq .right .tab_content ul li {border-radius:10px; box-shadow:0px 0px 10px rgba(7,0,2,0.15); margin:15px auto 0; padding:0 20px; transition:all 0.5s;}
.sub .faq .right .tab_content ul li a {display:block; padding:18px 0;}
.sub .faq .right .tab_content ul li h2 {position:relative; font-size:20px; color:#111; font-weight:500; padding:0 0 0 34px;}
.sub .faq .right .tab_content ul li h2:before {position:absolute; display:inline-block; width:15px; height:8px; top:50%; left:0; background:url('/images/chost/sub/faq-arrow.png') no-repeat center / 100%; margin:-4px auto 0; content:''; transition:all 0.5s;}
.sub .faq .right .tab_content ul li p {display:none; font-size:14px; color:#111; font-weight:300; margin:20px auto 0; padding:0 0 0 34px}
.sub .faq .right .tab_content ul li.active {box-shadow:0px 0px 10px rgba(255,94,45,0.4);}
.sub .faq .right .tab_content ul li.active h2:before {transform:rotate(180deg)}

@media all and (max-width:1200px){
    .sub .faq .left {padding:0 30px 0 0;}
    .sub .faq .left ul li a {font-size:16px; padding:12px 0 12px 15px;}
    .sub .faq .right .tab_content > h2 {font-size:20px;}
    .sub .faq .right .tab_content ul li {margin:10px auto 0; padding:0 15px;}
    .sub .faq .right .tab_content ul li a {padding:14px 0;}
    .sub .faq .right .tab_content ul li h2 {font-size:18px; padding:0 0 0 30px;}
    .sub .faq .right .tab_content ul li h2:before {width:12px; height:6px; margin:-3px auto 0;}
    .sub .faq .right .tab_content ul li p {font-size:13px; margin:15px auto 0; padding:0 0 0 30px}    
}

@media all and (max-width:768px){
    .sub .faq .left {width:100%; margin:0 auto 20px; padding:0;}
    .sub .faq .left ul li a {font-size:14px; padding:10px 0 10px 12px;}
    .sub .faq .right {width:100%;}
    .sub .faq .right .tab_content > h2 {font-size:18px;}
    .sub .faq .right .tab_content ul li {margin:8px auto 0; padding:0 12px;}
    .sub .faq .right .tab_content ul li a {padding:12px 0;}
    .sub .faq .right .tab_content ul li h2 {font-size:16px; padding:0 0 0 24px;}
    .sub .faq .right .tab_content ul li p {font-size:12.5px; margin:10px auto 0; padding:0 0 0 24px}    
}





/*============================================================================================================
    Who are we
============================================================================================================*/
.sub .who .article01 {text-align:center;}
.sub .who .article01 h2 {margin:0 auto 10px;}
.sub .who .article01 p {font-size:16px; color:#111; font-weight:300; line-height:1.5;}
.sub .who .article02 {text-align:center; margin:100px auto 0;}
.sub .who .article02 h2 {font-size:18px; color:#111; font-weight:500; line-height:1.33333; margin:0 auto 74px;}
.sub .who .article02 ul {width:90%; margin:0 auto;}
.sub .who .article02 ul li {position:relative; display:inline-block; width:33.33333%; vertical-align:top;}
.sub .who .article02 ul li:after {position:absolute; width:32px; height:32px; top:50%; right:0; background:url('/images/chost/sub/who-plus.png') no-repeat center / 100%; margin:-16px -16px 0 0; content:'';}
.sub .who .article02 ul li:last-child:after {display:none;}
.sub .who .article02 ul li .icon {width:76px; height:76px; background:#fff; border-radius:50%; box-shadow:0px 0px 10px rgba(7,0,2,0.15); margin:0 auto 15px;}
.sub .who .article02 ul li .icon i {display:inline-block; width:76px; height:76px; background-repeat:no-repeat; background-position:center; background-size:48px;}
.sub .who .article02 ul li .icon i.icon01 {background-image:url('/images/chost/sub/who-icon01.png');}
.sub .who .article02 ul li .icon i.icon02 {background-image:url('/images/chost/sub/who-icon02.png');}
.sub .who .article02 ul li .icon i.icon03 {background-image:url('/images/chost/sub/who-icon03.png');}
.sub .who .article02 ul li p {font-size:16px; color:#1b1b1b; font-weight:500;}
.sub .who .article03 {margin:96px auto 0;}
.sub .who .article03 .common_title {border-top:1px solid #d8d9d9; padding:63px 0 0 0;}
.sub .who .article03 ul {margin:71px auto 0;}
.sub .who .article03 ul li {margin:46px auto 0;}
.sub .who .article03 ul li:nth-child(1) {margin:0;}
.sub .who .article03 ul li .year {display:inline-block; width:29.5%; vertical-align:top; font-size:36px; color:#111; font-weight:700; line-height:1.111111;}
.sub .who .article03 ul li .desc {display:inline-block; width:70.5%; vertical-align:top; border-top:1px solid #111; padding:11px 0 0 0;}
.sub .who .article03 ul li .desc p {font-size:16px; color:#111; font-weight:300; line-height:1.75; text-indent:-8px; padding:0 0 0 8px;}

@media all and (max-width:1200px){
    .sub .who .article01 h2 {margin:0 auto 8px;}
    .sub .who .article01 p {font-size:14.5px;}
    .sub .who .article02 {margin:80px auto 0;}
    .sub .who .article02 h2 {font-size:16px; margin:0 auto 60px;}
    .sub .who .article02 ul {width:100%;}
    .sub .who .article02 ul li:after {width:26px; height:26px; margin:-13px -13px 0 0;}
    .sub .who .article02 ul li .icon {width:65px; height:65px; margin:0 auto 12px;}
    .sub .who .article02 ul li .icon i {width:65px; height:65px; background-size:42px;}
    .sub .who .article02 ul li p {font-size:14.5px;}
    .sub .who .article03 {margin:80px auto 0;}
    .sub .who .article03 .common_title {padding:56px 0 0 0;}
    .sub .who .article03 ul {margin:60px auto 0;}
    .sub .who .article03 ul li {margin:38px auto 0;}
    .sub .who .article03 ul li .year {font-size:32px;}
    .sub .who .article03 ul li .desc {padding:8px 0 0 0;}
    .sub .who .article03 ul li .desc p {font-size:14px;}    
}

@media all and (max-width:768px){
    .sub .who .article01 h2 {margin:0 auto 5px;}
    .sub .who .article01 p {font-size:13px;}
    .sub .who .article02 {margin:50px auto 0;}
    .sub .who .article02 h2 {font-size:14px; margin:0 auto 35px;}
    .sub .who .article02 ul li:after {width:18px; height:18px; margin:-9px -9px 0 0;}
    .sub .who .article02 ul li .icon {width:50px; height:50px; margin:0 auto 8px;}
    .sub .who .article02 ul li .icon i {width:50px; height:50px; background-size:36px;}
    .sub .who .article02 ul li p {font-size:13px;}
    .sub .who .article03 {margin:50px auto 0;}
    .sub .who .article03 .common_title {padding:35px 0 0 0;}
    .sub .who .article03 ul {margin:30px auto 0;}
    .sub .who .article03 ul li {margin:32px auto 0;}
    .sub .who .article03 ul li .year {width:100%; font-size:20px; margin:0 auto 7px;}
    .sub .who .article03 ul li .desc {width:100%; padding:5px 0 0 0;}
    .sub .who .article03 ul li .desc p {font-size:12.5px;}    
}





/*============================================================================================================
    Contact Us
============================================================================================================*/
.sub .contact .left {display:inline-block; width:57%; vertical-align:middle; padding:0 60px 0 0;}
.sub .contact .left ul {margin:-10px;}
.sub .contact .left ul li {display:inline-block; width:50%; vertical-align:top; padding:10px;}
.sub .contact .left input[type="text"] {display:inline-block; width:100%; height:58px; font-size:18px; color:#000; font-weight:500; line-height:58px; border-radius:10px; box-shadow:0px 0px 10px rgba(7,0,2,0.15); padding:0 30px; appearance:none; -webkit-appearance:none; -moz-appearance:none;}
.sub .contact .left select {display:inline-block; width:100%; height:58px; font-size:18px; color:#afafaf; font-weight:500; line-height:58px; border-radius:10px; box-shadow:0px 0px 10px rgba(7,0,2,0.15); padding:0 40px 0 30px; background-color:#fff; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image: linear-gradient(45deg, transparent 50%, #888 50%), linear-gradient(135deg, #888 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size:6px 6px; background-repeat:no-repeat;}
.sub .contact .left select:valid {color:#000;}
.sub .contact .left select:invalid {color:#afafaf;}
.sub .contact .left select option {color:#000;}
.sub .contact .left select option[value=""] {color:#afafaf;}
.sub .contact .left input[type="text"]::placeholder {font-size:18px; color:#afafaf; font-weight:400;}
.sub .contact .left input[type="text"]::-webkit-input-placeholder {font-size:18px; color:#afafaf; font-weight:400;}
.sub .contact .left input[type="text"]:-ms-input-placeholder {font-size:18px; color:#afafaf; font-weight:400;}
.sub .contact .left textarea {width:100%; height:258px; font-size:18px; color:#000; font-weight:500; border-radius:10px; box-shadow:0px 0px 10px rgba(7,0,2,0.15); margin:20px 0 30px; padding:30px; appearance:none; -webkit-appearance:none; -moz-appearance:none;}
.sub .contact .left textarea::placeholder {font-size:18px; color:#afafaf; font-weight:400;}
.sub .contact .left textarea::-webkit-input-placeholder {font-size:18px; color:#afafaf; font-weight:400;}
.sub .contact .left textarea:-ms-input-placeholder {font-size:18px; color:#afafaf; font-weight:400;}
.sub .contact .left input[type="button"] {display:inline-block; width:161px; height:51px; font-size:16px; color:#fff; font-weight:500; line-height:51px; background:rgb(255,0,0); background:linear-gradient(120deg, rgba(255,90,18,1) 0%, rgba(255,0,0,1) 100%); border-radius:51px; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none;}
.sub .contact .right {display:inline-block; width:43%; vertical-align:middle;}
.sub .contact .right p {font-size:15px; color:#111; font-weight:300; line-height:1.6;}
.sub .contact .right p.addr {letter-spacing:-0.5px; margin:0 auto 26px;}
.sub .contact .right p span {font-weight:500;}
.sub .contact .right .sns {margin:28px auto 0;}
.sub .contact .right .sns a {display:inline-block; margin:0 30px 0 0;}
.sub .contact .right .sns a:last-child {margin:0;}
.sub .contact .right .sns a img {width:auto;}


/*---------220425 源€?쒖씤 異붽?------------*/
.sub .contact .left .captcha{margin-bottom:20px}
.sub .contact .left .captcha p{font-size:14px; color: #262626; text-align:left;}
.sub .contact .left .captcha li{width:25%; height: 42px;}
.sub .contact .left .captcha li input[type=text]{height: 42px;}
.sub .contact .left .captcha li img{display:table; vertical-align: middle;}

.sub .contact .left .captcha li:nth-child(5){width: 100%; padding-top: 20px;}
.sub .contact .left .captcha li:nth-child(5) button{border: 1px solid #CCC; width: 90px; height: 30px;border-radius: 5px; float: right;}


@media all and (max-width:1200px){
    .sub .contact .left {padding:0 30px 0 0;}
    .sub .contact .left ul {margin:-6px;}
    .sub .contact .left ul li {padding:6px;}
    .sub .contact .left input[type="text"] {height:52px; font-size:16px; line-height:52px; border-radius:8px; padding:0 20px;}
.sub .contact .left select {height:52px; font-size:16px; line-height:52px; border-radius:8px; padding:0 32px 0 20px; background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;}
    .sub .contact .left input[type="text"]::placeholder {font-size:16px;}
    .sub .contact .left input[type="text"]::-webkit-input-placeholder {font-size:16px;}
    .sub .contact .left input[type="text"]:-ms-input-placeholder {font-size:16px;}
    .sub .contact .left textarea {height:230px; font-size:16px; border-radius:8px; margin:12px 0 24px; padding:20px; }
    .sub .contact .left textarea::placeholder {font-size:16px;}
    .sub .contact .left textarea::-webkit-input-placeholder {font-size:16px;}
    .sub .contact .left textarea:-ms-input-placeholder {font-size:16px;}
    .sub .contact .left input[type="button"] {width:140px; height:46px; font-size:14.5px; line-height:46px; border-radius:46px;}
    .sub .contact .right p {font-size:14px;}
    .sub .contact .right p.addr {letter-spacing:0; margin:0 auto 20px;}
    .sub .contact .right .sns {margin:20px auto 0;}
    .sub .contact .right .sns a {margin:0 20px 0 0;}
}

@media all and (max-width:768px){
    .sub .contact .left {width:100%; text-align:center; margin:0 auto 30px; padding:0;}
    .sub .contact .left ul {margin:-4px;}
    .sub .contact .left ul li {padding:4px;}
    .sub .contact .left input[type="text"] {height:48px; font-size:14px; line-height:48px; border-radius:6px; padding:0 12px;}
.sub .contact .left select {height:48px; font-size:14px; line-height:48px; border-radius:6px; padding:0 28px 0 12px; background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;}
    .sub .contact .left input[type="text"]::placeholder {font-size:14px;}
    .sub .contact .left input[type="text"]::-webkit-input-placeholder {font-size:14px;}
    .sub .contact .left input[type="text"]:-ms-input-placeholder {font-size:14px;}
    .sub .contact .left textarea {height:180px; font-size:14px; border-radius:6px; margin:8px 0 18px; padding:12px; }
    .sub .contact .left textarea::placeholder {font-size:14px;}
    .sub .contact .left textarea::-webkit-input-placeholder {font-size:14px;}
    .sub .contact .left textarea:-ms-input-placeholder {font-size:14px;}
    .sub .contact .left input[type="button"] {width:120px; height:38px; font-size:13px; line-height:38px; border-radius:38px;}
    .sub .contact .right {width:100%; text-align:center;}
    .sub .contact .right p {font-size:13px;}
    .sub .contact .right p.addr {margin:0 auto 16px;}
    .sub .contact .right .sns {margin:14px auto 0;}
    .sub .contact .right .sns a {margin:0 8px 0 0;}
    .sub .contact .right .sns a img {width:70%}
}
@media all and (min-width:1500px){
.divpopup{position:fixed;left:200px;top:200px;width:420px;height:470px;z-index:100;filter:alpha(opacity=80);line-height:0px;vertical-align:middle;text-align:center;background-image:url(back_top.jpg)}
}
@media all and (max-width:1499px){
.divpopup{display:none}
}