﻿@charset "utf-8";
/* CSS Document */


/* CSS Information ----------------------------------------

Site Name : 반응형 고급형 C
Part : 기본세팅
Last edit : 2024.12
Author : Gautech

관련폰트 :
font-family: "Nanum Brush Script", serif; (100,300,400,500,700,900)
font-family: "Noto Sans KR", serif; (100,300,400,500,700,900)
font-family: "Noto Serif KR", serif; (100,300,400,500,700,900)
font-family: "Nanum Gothic", serif; (100,300,400,500,700,900)
font-family: "Roboto", serif; (100,300,400,500,700,900)

--------------------------------------------------------- */





/* 서브 start ----------------------------------- */


header {}
.top_menu_sub_bg { background-color: rgba(255,255,255,0.8);}



/* 서브 비주얼 */

.container_visual {}
.sub_visual { position:relative; width:100%; height:300px; overflow:hidden;}
.sub_visual .sub_bg { width:100%; height:300px; min-width:1200px; background-size:100% auto; -webkit-transition: all 0.45s ease; -moz-transition: all 0.45s ease; -ms-transition: all 0.45s ease; -o-transition: all 0.45s ease; transition: all 0.45s ease;}
.sub_visual .sub_bg:hover { -ms-transform: scale(1.05,1.05); -webkit-transform: scale(1.05,1.05); transform: scale(1.05,1.05);}
.sub_visual_view_pc { display:block;}
.sub_visual_view_tb { display:none;}
.sub_visual .sub01_bg_pc { background-image:url(/images/main/mv1_02.jpg); background-position:50% 10%;}
.sub_visual .sub01_bg_tb { background-image:url(/images/main/mv1_02.jpg); background-position:50% 10%;}
.sub_visual .sub02_bg_pc { background-image:url(/images/main/mv1_04.jpg); background-position:50% 20%;}
.sub_visual .sub02_bg_tb { background-image:url(/images/main/mv1_04.jpg); background-position:50% 20%;}
.sub_visual .sub03_bg_pc { background-image:url(/images/main/mv1_03.jpg); background-position:50% 20%;}
.sub_visual .sub03_bg_tb { background-image:url(/images/main/mv1_03.jpg); background-position:50% 20%;}




/* 서브공통 */

.sub_box { position:relative; width:100%; min-width:1200px; border-bottom:1px solid #e1ded8;}
.sub_container { position: relative; width:1200px; margin:0 auto; padding:0 0 50px 0;}
.sub_container:after { display:block; content:""; clear:both;}
.sub_title { position:relative; width:94%; margin:0 auto 40px auto; padding:60px 0 20px 20px; font-size:28px; font-weight:700; letter-spacing:-1px; text-align:left; border-bottom:1px solid #e1ded8;}
.sub_title_sub { display:inline-block; font-size:14px; font-weight:400; color:#999; padding-left:20px; letter-spacing:0;}
.sub_title_fixed { padding:110px 0 20px 20px;}
.box100per { width:94%; margin:0 auto; padding:0 20px 40px 20px;}
.box50per { display:inline-block; width:50%; padding:0; vertical-align:top; max-width:544px;}
.in_box { display: block; width: 100%; margin-bottom: 30px; padding: 25px 30px 25px 30px; vertical-align: top; border: 1px solid #CCC; border-radius: 10px; background-color: #F9F9F9;}
.in_title1 { font-size:40px; line-height:1.2; font-weight:700; margin:0 0 20px 0; letter-spacing:-0.02em; color:#333;}
.in_title1_txt { font-size:20px; line-height:1.2; font-weight:400;  margin:0 0 30px 0; letter-spacing:-0.02em; color:#777;}
.in_title2 { font-size:30px; line-height:1.2; font-weight:700;  margin:0 0 10px 0; letter-spacing:-0.04em;}
.in_title2_txt { font-size:16px; line-height:1.2; font-weight:400;  margin:0 0 30px 0; letter-spacing:-0.04em; color:#777;}
.in_title3 { font-size:20px; line-height:26px; font-weight:400; margin-bottom:20px; background-image:url(/images/icon/ar_18x18.png); background-repeat:no-repeat; background-position:0% 4px; padding-left:25px;}
.line_1px { width:100%; height:1px; background-color:#ddd; margin-bottom:30px;}
.sub_img { position:relative;}
.sub_img_m { display:none;}
.big_view { display: none;}
.big_view>a { display: none;}

.preparing { width:100%; text-align:center;}
.preparing>img { width:80%; height:auto; max-width:392px;}


/* 서브탭 start */

.depth3_tab { width:100%; max-width:1600px; height:auto; font-size:0; padding:0 0 50px 0; margin:0 auto;}
.depth3_tab>a { display:inline-block; font-size:16px; text-align:center; padding:14px 0; background-color:#eee;}
.depth3_tab>a:nth-child(2n) { background-color:#ddd;}
.depth3_tab>a.depth3_active, .depth3_tab>a:hover { color:#FFF; background-color:#e95702;}



/* 서브01 */

.sub01_tab { width:14.2857142857142%;}
.sub01_box { position:relative; width:100%; margin:0 auto; padding:0 0 20px 0; font-size:0;}
.sub01_box:after { display:block; content:""; clear:both;}

.sub01_box_in { position:relative; display:inline-block; background-color:#f5f5f5; width:32.333333333%; min-height:430px; padding:20px 20px 80px 20px; line-height:1.2; margin:0 1% 1% 0;}
.sub01_box_in_txt { font-size:22px; font-weight:500;}
.sub01_box_in_img { display:inline-block; vertical-align:top; width:100%; margin:20px 0;}
.sub01_box_in_img>img { width:100%; height:auto;}
.sub01_box_in_txt2 { font-size:16px;}
.sub01_box_in_btn { position:absolute; left:20px; bottom:20px; display:block; width: calc(100% - 40px); text-align:center; font-size:16px; color:#fff; background-color:#e95702; padding:10px;}
.sub01_box_in:hover>.sub01_box_in_btn { background-color:#eb6e27;}


/* 서브02 */

.sub02_tab { width:50%;}
.sub02_box { position:relative; width:100%; margin:0 auto; padding:0 0 20px 0;}
.sub02_box:after { display:block; content:""; clear:both;}




/* 서브03 */

.sub03_box { position:relative; width:100%; margin:0 auto; padding:100px 80px 100px 330px; background-image:url(/images/sub/sub03_01_bg.png); background-repeat:no-repeat; background-position:0% 0%; background-size:auto 100%; min-height:700px; background-color:#f5f5f5;}
.sub03_box:after { display:block; content:""; clear:both;}

.sub03_box_title { font-size:45px; font-weight:700; line-height:1.2; margin-bottom:40px;}
.sub03_box_txt { font-size:18px;}





/* 서브 end ----------------------------------- */



/* 1024 ~ 768까지 태블릿 설정 */

@media screen and (max-width:1024px){



/* 서브 비주얼 */

.container_visual {}
.sub_visual { width:100%; height:280px; margin-top:0; padding-top:80px;}
.sub_visual .sub_bg { width:100%; height:200px; min-width:768px; background-position:50% 0%; background-attachment:fixed; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -ms-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease;}
.sub_visual .sub_bg:hover { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);}
.sub_visual_view_pc { display:none;}
.sub_visual_view_tb { display:block;}
.sub_visual_title { position:absolute; width:100%; top:60px; left:auto; margin-left:0; font-size:34px; font-weight:500; color:#FFF; letter-spacing:-1px; z-index:3; padding-left:40px;}
.sub_visual_txt { position:absolute; width:100%; top:115px; left:auto; margin-left:0; font-size:12px; font-weight:400; color:rgba(255,255,255,0.7); z-index:3; padding-left:44px;}



/* 서브공통 */

.sub_box { position:relative; width:100%; min-width:768px;}
.sub_container { position: relative; width:100%; margin:0 auto; padding:0 0 50px 0;}
.sub_container:after { display:block; content:""; clear:both;}
.sub_title { position:relative; width:94%; margin:0 auto 40px auto; padding:60px 0 20px 0; font-size:28px; font-weight:700; letter-spacing:-1px; text-align:left; border-bottom:1px solid #e1ded8;}
.sub_title_sub { display:inline-block; font-size:14px; font-weight:400; color:#999; padding-left:20px; letter-spacing:0;}
.box100per { width:94%; margin:0 auto; padding:0 0 40px 0;}
.box50per { display:inline-block; width:50%; padding:0; vertical-align:top; max-width:auto;}
.in_box { display: block; width: 100%; margin-bottom: 30px; padding: 25px 30px 25px 30px; vertical-align: top; border: 1px solid #CCC; border-radius: 10px; background-color: #F9F9F9;}
.in_title1 { font-size:30px; line-height:1.2; font-weight:700; margin:0 0 20px 0; letter-spacing:0; color:#333;}
.in_title1_txt { font-size:18px; line-height:1.2; font-weight:400;  margin:0 0 30px 0; letter-spacing:0; color:#777;}
.in_title2 { font-size:24px; line-height:1.2; font-weight:700;  margin:0 0 10px 0; letter-spacing:-0.04em;}
.in_title2_txt { font-size:15px; line-height:1.2; font-weight:400;  margin:0 0 30px 0; letter-spacing:-0.04em; color:#777;}
.in_title3 { font-size:18px; line-height:24px; font-weight:400; margin-bottom:20px; background-image:url(/images/icon/ar_18x18.png); background-repeat:no-repeat; background-position:0% 4px; padding-left:25px;}
.line_1px { width:100%; height:1px; background-color:#ddd; margin-bottom:30px;}
.sub_img { position:relative;}
.big_view { display: block; position: absolute; top: 0; right: 0; background-image: url(/images/icon/view.png); width: 60px; height: 60px;}
.big_view>a { display: block; width: 100%; height: 100%;}


/* 서브탭 start */

.depth3_tab { padding:0 0 40px 0;}
.depth3_tab>a { display:inline-block; font-size:15px; padding:10px 15px; margin:0 1% 1% 0;}



/* 서브01 */

.sub01_tab { width:auto;}
.sub01_box { position:relative; width:100%; margin:0 auto; padding:0;}
.sub01_box:after { display:block; content:""; clear:both;}

.sub01_box_in { display:inline-block; background-color:#f5f5f5; width:48%; min-height:410px; padding:20px 20px 80px 20px; line-height:1.2; margin:0 2% 2% 0;}
.sub01_box_in_txt { font-size:20px; font-weight:500;}
.sub01_box_in_img { display:inline-block; vertical-align:top; width:100%; margin:20px 0;}
.sub01_box_in_img>img { width:100%; height:auto;}
.sub01_box_in_txt2 { font-size:15px;}
.sub01_box_in_btn { position:absolute; left:20px; bottom:20px; display:block; width: calc(100% - 40px); text-align:center; font-size:15px; color:#fff; background-color:#e95702; padding:10px;}
.sub01_box_in:hover>.sub01_box_in_btn { background-color:#eb6e27;}



/* 서브02 */

.sub02_tab { width:50%;}
.sub02_box { position:relative; width:100%; margin:0 auto; padding:0;}
.sub02_box:after { display:block; content:""; clear:both;}




/* 서브03 */

.sub03_box { position:relative; width:100%; margin:0 auto; padding:60px 60px 60px 220px; background-image:url(/images/sub/sub03_01_bg.png); background-repeat:no-repeat; background-position:0% 0%; background-size:auto 100%; min-height:1px; background-color:#f5f5f5;}
.sub03_box:after { display:block; content:""; clear:both;}

.sub03_box_title { font-size:40px; font-weight:700; line-height:1.2; margin-bottom:35px;}
.sub03_box_txt { font-size:16px; line-height:1.2;}









/* 서브 end ----------------------------------- */
}



/* 767 ~ 320까지 모바일 설정 */

@media screen and (max-width:767px){



/* 서브 비주얼 */

.sub_visual { display:none;}



/* 서브공통 */

.sub_box { position:relative; width:100%; min-width:320px; padding-top:60px;}
.sub_container { position: relative; width:94%; margin:0 auto; padding:0 0 50px 0;}
.sub_container:after { display:block; content:""; clear:both;}
.sub_title { width:100%; margin:0 auto 30px auto; padding:30px 0 20px 0; font-size:24px; font-weight:700; text-align:left; border-bottom:1px solid #e1ded8;}
.sub_title_sub { display:block; font-size:12px; font-weight:400; color:#999; padding-left:0; letter-spacing:0;}
.box100per { width:100%; margin:0 auto; padding:0 0 40px 0;}
.box50per { display:block; width:100%; padding:0 0 40px 0; vertical-align:top;}
.in_box { display: block; width: 100%; margin-bottom: 30px; padding: 25px 20px 25px 20px; vertical-align: top; border: 1px solid #CCC; border-radius: 10px; background-color: #F9F9F9;}
.in_title1 { font-size:22px; line-height:1.2; font-weight:700; margin:0 0 10px 0; letter-spacing:0; color:#333;}
.in_title1_txt { font-size:14px; line-height:1.2; font-weight:400;  margin:0 0 30px 0; letter-spacing:0; color:#777;}
.in_title2 { font-size:20px; line-height:1.2; font-weight:700;  margin:0 0 10px 0; letter-spacing:-0.04em;}
.in_title2_txt { font-size:13px; line-height:1.2; font-weight:400;  margin:0 0 30px 0; letter-spacing:-0.04em; color:#777;}
.in_title3 { font-size:16px; line-height:22px; font-weight:400; margin-bottom:20px; background-image:url(/images/icon/ar_18x18.png); background-repeat:no-repeat; background-position:0% 4px; padding-left:25px;}
.line_1px { width:100%; height:1px; background-color:#ddd; margin-bottom:30px;}
.sub_img { position:relative;}
.sub_img_pt { display:none;}
.sub_img_m { display:block;}
.big_view { display: block; position: absolute; top: 0; right: 0; background-image: url(/images/icon/view.png); background-size:100%; width: 40px; height: 40px;}
.big_view>a { display: block; width: 100%; height: 100%;}


/* 서브탭 start */

.depth3_tab { padding:0 0 30px 0;}
.depth3_tab>a { display:inline-block; font-size:14px; padding:10px 15px; margin:0 1% 1% 0;}




/* 서브01 */

.sub01_tab { width:auto;}
.sub01_box { position:relative; width:100%; max-width:none; margin:0 auto; padding:0;}
.sub01_box:after { display:block; content:""; clear:both;}

.sub01_box_in { display:inline-block; background-color:#f5f5f5; width:100%; min-height:1px; padding:20px 20px 80px 20px; line-height:1.2; margin:0 0 20px 0;}
.sub01_box_in_txt { font-size:18px; font-weight:500;}
.sub01_box_in_img { display:inline-block; vertical-align:top; width:100%; margin:20px 0;}
.sub01_box_in_img>img { width:100%; height:auto;}
.sub01_box_in_txt2 { font-size:13px;}
.sub01_box_in_btn { position:absolute; left:20px; bottom:20px; display:block; width: calc(100% - 40px); text-align:center; font-size:13px; color:#fff; background-color:#e95702; padding:10px;}
.sub01_box_in:hover>.sub01_box_in_btn { background-color:#eb6e27;}




/* 서브02 */

.sub02_tab { width:auto;}
.sub02_box { position:relative; width:100%; max-width:none; margin:0 auto; padding:0;}
.sub02_box:after { display:block; content:""; clear:both;}




/* 서브03 */

.sub03_box { position:relative; width:100%; max-width:none; margin:0 auto; padding:40px 30px 80% 30px; background-image:url(/images/sub/sub03_01_bg2.png); background-repeat:no-repeat; background-position:50% 100%; background-size:100% auto; min-height:1px; background-color:#f5f5f5;}
.sub03_box:after { display:block; content:""; clear:both;}

.sub03_box_title { font-size:30px; font-weight:700; line-height:1.2; margin-bottom:25px;}
.sub03_box_txt { font-size:14px; line-height:1.2;}





/* 서브 end ----------------------------------- */
}