@charset 'euc-kr';
@import url('./board.css');
@import url('./all.min.css');


.W_in{ position: relative; width:90% !important; max-width:1280px; margin: 0 auto; }
em { position: absolute; width: 100%; left: 0; bottom: 0; background: rgba(25,25,25,0.45); padding: 5% 0%; color: #fff; text-align: center; font-style: normal;}
a em.click { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; font-size: 1.8em; opacity: 0; transition: all 0.3s ease; }
a:hover em.click { opacity:1;}

article { display: table; position: relative; width: 100%; min-height:700px; transition:.6s;}
.scroll { overflow-x:auto; }
.Text_Balloon { position: relative; display: inline-block; padding:2% 5%; background: #fff;}
.Text_Balloon:after { content:''; position: absolute; bottom: -30px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 30px solid #fff;}

blockquote.dash{ position: relative; border: 3px dashed #697e87; padding:20px 35px; background: #fff;}
blockquote.dash h4 { color:#000; margin-bottom: 10px}
blockquote.dash h4 span { display: inline-block; font-size: 16px; font-weight: 900; vertical-align: top; margin-right: 5px; margin-top: 5px; }
blockquote.dash h5 { position: absolute; top: -20px; background:#0f92c8; color:#fff; padding: 3px 35px; }
blockquote.dash figure { display: inline-block; vertical-align: middle; padding: 15px 35px 15px 15px; }
blockquote.dash dl { width: 88%; display: inline-block; vertical-align: middle; font-size: clamp(0.9rem, 5.5vw, 1.186rem); line-height: 1.4; color: #000; font-weight: 100;}
blockquote.dash p { list-style: auto; font-size: clamp(0.9rem, 5.5vw, 1.186rem); line-height: 1.4; color: #000; }
blockquote.dash li { list-style: auto; font-size: clamp(0.9rem, 5.5vw, 1.186rem); line-height: 1.4; color: #000; }
blockquote.dash li span { display: inline-block; margin-left: 1em; font-weight: 100;}
blockquote.dash .disc { position: relative; text-indent: -5.1em; margin-left: 5.1em; color:#000; margin-bottom:0; }
blockquote.dash .disc:first-child { text-indent: -6.3em; margin-left: 6.3em; }
blockquote.dash .disc strong { margin-left: 15px; }
blockquote.dash .disc strong:before { content:''; position: absolute; top: 10px; margin-left: -20px; width:7px; height:7px; border-radius:50%; background:#9bc8e7; }
blockquote.dash ol li { list-style: disc; margin-left: 25px;}
blockquote.dash ol li::marker { color:#6a8eca; }


fieldset h4 { color:#000; margin-bottom: 10px}
fieldset h4 span { display: inline-block; font-size: 16px; font-weight: 900; vertical-align: top; margin-right: 5px; margin-top: 5px; }
fieldset h5.Title_board { position: absolute; top: -20px; background:#0f92c8; color:#fff; padding: 3px 35px; }
fieldset h6 {color:#0f91c5;display:block; margin:20px 0 5px; font-weight:bold;}
fieldset h6:first-child { margin:0; }
fieldset figure { display: inline-block; vertical-align: top; padding: 5px 35px 15px 15px; }
fieldset dl { width: 88%; display: inline-block; vertical-align: top; }
fieldset dl dd { font-size:0.9em; line-height: 1.4; text-indent: 0.2em;}
fieldset li { list-style: auto; font-size:1.1rem; font-size: clamp(0.8rem, 4.2vw, 1.1rem); line-height: 1.4; color: #000; text-indent: -1.2rem; margin-bottom: 10px;}
fieldset li span { font-weight: 100;}
fieldset ol li { list-style: disc; margin-left: 25px; text-indent: 0;}
fieldset ol li::marker { color:#6a8eca; }
fieldset.solid {background: #f0f4f8; padding: 10px 16px; border: 1px solid #b6cddd; margin-bottom: 10px; }
fieldset.dash{ border: 3px dashed #0f92c8; padding:20px 35px; }
fieldset i { position: absolute; top: -20px; background:#0f92c8; color:#fff; padding: 3px 35px; }
fieldset i h4,fieldset i h5,fieldset i h6 { color:#fff; }
fieldset.Bnone { border:0; padding:0; background:none; }


/*** Header ***/
.logo_M,#Mnav { display:none; }
.fp-viewing-0 header nav .Menu span { color:#fff; }
header {position: fixed; display: flex; justify-content: center; align-items: flex-start; height: 80px; width: 100%; z-index: 10; transition:.5s; background:rgba(255,255,255,.8);
			padding:0 calc((100vw -  min(1280px,100vw))/2);/*box-shadow: 0px 5px 10px 0px rgb(23 58 90 / 10%);*/ }
header:before { content:''; position: absolute; height: 80px; width: 100%; background:rgba(255,255,255,.8); transition:2s; opacity:0;  }
header .hd_logo { float: left; width: 25%; margin-top: 20px; padding-left: 1%; min-width: 210px;}
header nav { display: flex; align-items: self-start; width: 75%; }
header nav .Menu {position: relative; float: left; width: 20%; font-size: 1.1rem; font-size: clamp(1.05rem, 1.05vw, 1.15rem); color: #333; font-weight: 500; text-align: center; transition:.3s; }
header nav .Menu > span { position: relative; display: block; width:100%; line-height: 80px; cursor: pointer; transition: background 0.2s ease; }
header nav .Menu > span:after { content: ''; display: block; position: absolute; left: 50%; bottom:0; width: 0%; height: 3px; background:#d44; transition:.3s; transform:translate(-50%,0);}
header:hover,.fp-viewing-0 header:hover { background:rgba(255,255,255,.8); }
header:hover nav .Menu span {color: #333; /*border-right: 1px solid #ddd;*/ }
header:hover nav .Sub { color: #666; opacity:1; }
/*header nav .Menu:hover { background:rgba(23,69,152,.8);}*/
header nav .Menu:hover span { color: #d44;}
header nav .Menu:hover .Sub > li {color: #555; }
header nav .Menu:hover .Sub > li:hover {color: #d44; }
header nav .Menu:hover .Sub:before {width:100%; height:1px; background:#0e3883; }
header nav .Menu:hover > span:after { width:calc(30% - 2px); }/*Sub menu가 없을때를 고려하여 Main menu에 바 생성*/
header nav .Sub { position: absolute;  z-index: 1; padding-top: 19px; display:none; width: 100%; padding: 20px 0 30px; opacity:0; }
header nav .Sub > li {text-align: center; font-size: 0.86em;  font-weight: 400; padding:11px 0; line-height: 1; cursor: pointer;}
header nav .Sub > li:hover {color: #005aa9; font-weight: 500; }
header nav .Menu a { display:block; color:inherit; }

header .hd_logo { transform-style: preserve-3d; transition: transform 0.6s; }
header .hd_logo img { max-width:180px; }
.fp-viewing-0 header .hd_logo {transform: rotateX(90deg); }
header .logo,header .logo_ov { position: absolute; line-height:1; top:0px; left: 0;}
header .logo {transform: rotateX(-90deg); bottom:0px; }
.fp-viewing-0 header:hover .logo_ov {transform: rotateX(-90deg); bottom:0px; }

header a.btn_join { background: url('/images/icon/mypage_ov.png') no-repeat center / contain; }
header a.btn_login { background: url('/images/icon/login_400_ov.svg') no-repeat center / contain; } 
header a.btn_logout { background: url('/images/icon/logout_400_ov.svg') no-repeat center / contain; }

header:hover .hd_sitemap span { background:#666;}
header:hover .hd_sitemap p:before {color:#666;}

.fp-viewing-0 .hd_sitemap p:before { color:#fff; }
.fp-viewing-0 .hd_sitemap span { background:#fff; }
.fp-viewing-0 header { background: transparent;}
.fp-viewing-0 header:hover nav .Menu {color: #333;}
.fp-viewing-0 header a.btn_join {background: url('/images/icon/mypage.png') no-repeat center / contain; }
.fp-viewing-0 header:hover a.btn_join {background-image: url('/images/icon/mypage_ov.png'); }
.fp-viewing-0 header a.btn_login {background: url('/images/icon/login_400.svg') no-repeat center / contain; }
.fp-viewing-0 header:hover a.btn_login {background-image: url('/images/icon/login_400_ov.svg'); }
.fp-viewing-0 header a.btn_logout {background: url('/images/icon/logout_400.svg') no-repeat center / contain; }
.fp-viewing-0 header:hover a.btn_logout {background-image: url('/images/icon/logout_400_ov.svg'); }
.fp-viewing-0 #TopBtn {display:none;}

.hd_sitemap { position: absolute; top: 42px; right: 5%; padding-left: 3%; float: right;}
.hd_sitemap > a { position: relative; display: block; float: left; }
.hd_sitemap span{ display:block; width:100%; min-width: 22px; height:3px; background:#666; position:relative; transition:all 0.1s; margin: 20% auto;}
.hd_sitemap span:nth-child(1){ margin-top: 0; }
.hd_sitemap span:nth-child(3){ margin-bottom: 0; }
.hd_sitemap p { line-height:1; padding-bottom:0; }
.hd_sitemap p:before { content:'MENU'; position: relative; font-size: 10px; top: 3px; font-weight: bold; color:#666;  }

#TopBtn {display:block; position: fixed; width: 60px; height:60px; line-height:60px; padding:0; border:0; right: 2%; bottom: 67px; text-align: center; z-index: 50; transition:.3s; font-size: 15px; font-weight: 700; background:#07979b; color:#fff;}
#QuickMenu #TopBtn { position:relative; right:auto; bottom:auto; }

/* QuickMenu START */
#QuickMenu { position:fixed; right:2%; top:160px; z-index:10; }
#QuickMenu > h6 { line-height:30px; font-size:16px; cursor: pointer; margin-bottom:10px;}
#QuickMenu > h6 span { position: relative; float: right; width: 16px; height: 16px; margin-top: 14px; }
#QuickMenu > h6 span:before,#QuickMenu > h6 span:after { content:''; position:absolute; width:16px; height:2px; background:#fff; z-index: 10; border-radius:100px; left: 0; top: 7px; transition:all 0.6s; }
#QuickMenu > h6 span:after { transform:rotate(90deg); }
#QuickMenu.on h6 span:after { transform:rotate(0deg); }
#QuickMenu .QuickArea { right:0; top:142px; z-index:10; display:none; width:100%; }
#QuickMenu.on .QuickArea { display:block; }
#QuickMenu ul { width:100%; ; padding: 8px 0px; }
#QuickMenu ul li { margin: 10px auto; text-align: center; }
#QuickMenu ul li a { display: block; position: relative; width: 100%; height: 100%; margin: auto; color: #fff; }
#QuickMenu ul li a span { display: block; text-align: center; font-size: 14px; }
#QuickMenu ul li a span:before { content: ''; display: block; width: 100%; position: relative; background: #555; }
#QuickMenu .customer { text-align:center; border-top: 1px solid #404246; padding:18px 0; }
#QuickMenu .customer h6 { font-size: 16px; }
#QuickMenu .customer h3 { font-size: 32px; font-weight: 500; letter-spacing: -1px;}
#QuickMenu .customer p {  font-size: 14px; color: #bbb; }
#QuickMenu .close a { display:block; border-top: 1px solid #404246; font-weight:500; text-align:center; padding: 12px; }
.ChatBot { margin-top:50%; text-align: center;}
.QuickTop { cursor: pointer; position: relative; right: 0; bottom: auto; margin: 15px auto;}


/* Sub Visual Section */
.sv_sec {position: relative; display: flex; align-items:center; width: 100%; height: 30vmax; box-sizing: border-box; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; }
.sv_sec .tit_box {align-items:center; flex:1; text-align: center; color: #fff; margin-top: 7vh;}
.sv_sec .tit_box h1,.sv_sec .tit_box h3 { color:#fff; text-shadow: 0px 0px 5px rgba(0,0,0,0.2);}
.sv_sec .tit_box h6 {letter-spacing: .05vmin; text-shadow: 0px 0px 5px rgba(0,0,0,0.2);}


/* fixed_bg */
.fixed_bg {position: relative; width: 100%; z-index: 1; overflow: hidden; margin: 0 auto; height: min(45vw,48vh); margin-bottom:min(10vw, 10vh); text-align: center; background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
.fixed_bg:before { content:''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: rgba(0 0 0 /30%);	}
.fixed_bg h1,.fixed_bg h2,.fixed_bg h3,.fixed_bg h4,.fixed_bg h5,.fixed_bg h6,.fixed_bg p { position: relative; }
.fixed_bg h5 { color:#ddeeff; margin-bottom:20px;}
.fixed_bg h6 { color:#ddd; font-weight:normal; }


/* history */
.history-container{position: relative;padding: 60px 0 150px;}
.history-container:before{content: '';position: absolute;top:0;left:50%;width: 1px;height: 100%;background-color: #ddd;}
.history-container .history-row{overflow: hidden; }
.history-container .history-row dl{float: right;width: 50%;padding-left: 68px;}
.history-container .history-row:nth-child(even) dl{float: left;text-align: right;padding: 0 68px 0 0 ;}
.history-container .history-row:nth-child(odd) dl dt { text-align:left; }
.history-container .history-row dl dt{position: relative;padding-bottom: 10px;margin-bottom: 16px;font-size:2.5rem;font-weight: 600;color: #12498a;}
.history-container .history-row dl dt i { position: absolute;bottom:-7px;left:-75px;z-index: 1}
.history-container .history-row dl dt i:before{content: '';position: absolute;bottom:4px;left:4px; z-index: 1;width:7px;height: 7px; background:#12498a; border-radius: 50%;}
.history-container .history-row dl dt i:after{content: '';position: absolute;bottom:0;left:0;z-index: 1;width:15px;height: 15px; background:#12498a; border-radius: 50%; opacity: 0.3;}
.history-container .history-row dl dt:after{content: '';position: absolute;bottom:0;left:-68px;width:94.6%;height: 1px;background-color: #ddd;}
.history-container .history-row:nth-child(even) dl dt i {left:auto;right:-61px;}
.history-container .history-row:nth-child(even) dl dt:after{left:auto;right:-68px;}
.history-container .history-row dl dd{position: relative; display: inline-block; width: 100%; font-size:1.125rem;line-height: 1.777;word-break:keep-all; margin-bottom: 10px;}
.history-container .history-row:nth-child(odd) dl dd span{float: left;}
.history-container .history-row:nth-child(even) table td p span,.history-container .history-row:nth-child(odd) table td p span { float:none; }
.history-container .history-row:nth-child(even) dl dd span{float: right;}
.history-container .history-row:nth-child(odd) dl dd span.history_month{margin-right: 30px; font-size:1.1rem; font-weight: 500; color: #333;}
.history-container .history-row:nth-child(even) dl dd span.history_month{margin-left: 30px; font-size:1.1rem; font-weight: 500;color: #333;}
.history-container .history-row dl dd span.history_text{color: #666; font-size:1.1rem; font-weight: 400;}


/* Mapping */
.Mapping.Layer.Mg>li:nth-child(1) { width:259px; height: 460px; margin: 0 auto; background:url('/include/network/img/area_map.png') no-repeat center / cover;}
.Mapping li:nth-child(1) > a { background: #089E97; color: #fff;padding: 5px;	border-radius: 3px;font-size: 13px;	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3); position: absolute; }
.Mapping a.map01 {left: 50%; margin-left:-35%; top: 50%; margin-top: -58%;}
.Mapping a.map02 {left: 50%; margin-left:-35%; top: 50%; margin-top: -58%;}
.Mapping a.map03 {left: 50%; margin-left:-35%; top: 50%; margin-top: -50%;}
.Mapping a.map04 {left: 50%; margin-left:5%; top: 50%; margin-top: -67%;}
.Mapping a.map05 {left: 50%; margin-left:0%; top: 50%; margin-top: -40%;}
.Mapping a.map06 {left:50%; margin-left:-30%; top: 50%; margin-top: -26%;}
.Mapping a.map07 {left:50%; margin-left:15%; top: 50%; margin-top: -20%;}
.Mapping a.map08 {left:50%; margin-left:35%; bottom: 50%; margin-bottom: -6%;}
.Mapping a.map09 {left:50%; margin-left:8%; bottom: 50%; margin-bottom: -28%;}
.Mapping a.map10 {left:50%; margin-left:-30%; bottom: 50%; margin-bottom: -16%;}
.Mapping a.map11 {left:50%; margin-left:-30%; bottom: 50%; margin-bottom: -16%;}
.Mapping a.map12 {left:50%; margin-left:-37%; bottom: 50%; margin-bottom: -88%;}
.Mapping li:nth-child(2) {position: relative; width: 50%; height: auto; float: left; padding: 30px; background: #f7f8fa; border: 1px solid #ddd; text-align: left;}
.Mapping li:nth-child(2) h2 { font-family: 'Nanum Myeongjo'; letter-spacing: -1.5px; color: #089E97; }
.Mapping li:nth-child(2) h2 b { color: #444; }
.Mapping li:nth-child(2) p{ font-size: 16px; color: #777; margin-top: 20px; line-height: 1.8; text-align: left;}
.Mapping li:nth-child(2) form {width: 322px;position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.Mapping li:nth-child(2) form > p {font-family: "NanumSquareR";font-size: 18px;margin-bottom: 5px;line-height: 22px;}
.Mapping li:nth-child(2) form > p.mobile {display: none;}
.Mapping li:nth-child(2) form > a {position: absolute; bottom: 01px;right: 0;}
.Mapping li:nth-child(2) label {display: inline-block; width:100%; margin-top: 15px;}
.Mapping li:nth-child(2) label p {margin-bottom: 3px; }
.Mapping li:nth-child(2) select, .Mapping li:nth-child(2) input { width: 100%; height: 32px !important; }
.Mapping button { width: 100%; margin-top: 20px; padding: 15px; background-color: #005151; border: 1px solid #005151; font-size: 15px; font-weight: 300; }

.item_up { transition: all 0.3s ease; }
.item_up:hover { transform: translateY(-10px); /*box-shadow: 0 20px 40px rgba(0,0,0,0.1);*/ }
.item_zoom { background-size: cover; background-position: center; transition: all 0.3s ease; }
.item_zoom:hover { transform: scale(1.05); }

.Change,.Change figcaption { width: 100%; height:100%; display: flex; flex-direction: column; justify-content: center;}
.Change { position: relative; cursor: pointer; }
.Change figcaption{ position: absolute; top: 0; left: 0; opacity:0; padding: 2vw;
 -webkit-transition: -webkit-transform 0.6s, opacity 0.6s;
 -moz-transition: -moz-transform 0.6s, opacity 0.6s;
 transition: transform 0.6s, opacity 0.6s;
}
.Change:hover figcaption{opacity:1; z-index:2; }

.Revolve { transition:transform 0.8s; }
.Revolve:hover {transform: rotateY(-180deg);}
.Revolve div,.Revolve figcaption { transform-origin: center; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; position: absolute; }
.Revolve div { transform: rotateY(0deg); background:#fff; }
.Revolve figcaption { transform: rotateY(180deg); background:#ddd; }

.Video_Info h2 { color:#0a1e53; line-height:1; }
.Video_Info h2 span { font-weight:400; }
.Video_Info h4 { color:#000; font-size: clamp(1.4rem, 6.5vw, 1.84rem); font-weight: 600;}
.Video_Info h5 { color:#66b2b2; font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight:400;}
.Video_Info p { font-size: clamp(0.9rem, 5.5vw, 1.186rem); color:#2e2e2e;}
.Video_Info button.more { width:100%; max-width:300px; font-size: clamp(0.9rem, 3.8vw, 1.15rem); background: #ededed linear-gradient(to left, #fff, #ededed); border: 1px solid #000; color: #666; box-shadow: 2px 2px #d5d5d5; padding: 13px; margin-top: 30px;}
.Video_Info button.more:hover { background: #ededed; border: 1px solid #000; color: #666;}
.Video_Info iframe,.Video_Info iframe video { width:100%; height: 100%; }

.slider_center .slick-slide {
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
	transform:scale(0.8); 
	transition: all 300ms ease;
	opacity:0.5; 
}

.slider_center .slick-center {
transform:scale(1); opacity:1; }

.Step { counter-reset:li_num; }
.Step > li { counter-increment:li_num; margin-left: -1px; margin-top: -1px; text-align: center; }
.Step > li:before { content: 'STEP' counter(li_num); font-size: 1.5em; }
.Step > li figure:after { content: '\276F'; position: absolute; z-index: 1; right: -50%; font-size:40px; color:#d44;}
.Step > li:last-of-type > figure:after { display:none;}
.Step > li h5 { position: relative; margin-bottom: 20px;}
.Step > li h5:before {content: ''; position: absolute; top:0; left: 50%; width: 8px; height: 8px; background: #ddd; transform:translate(-40%,0);}
.Step > li dl { /*border-top: 1px dashed #bbb;*/ padding: 5% 0; margin: 0 10%; }
.Step > li dl:after {content: ''; position: absolute; top: 10px; margin-left: -0.27em; width: 0.6em; height: 0.6em; border-radius: 50%; background-color: #203473;}
.Step > li dl:before {content: ''; position: absolute; top: -2px; left: 50%; width: 1px; height: 12px; background: #203473; }

.Step.Code li figure:before { content: ''; position: absolute; right: -12%; top:50%; margin-top:-2.5px; width: 5px; height: 5px; background:#b7b9bc; border-radius: 50%;}
.Step.Code li figure:after { content: ''; right: -25%; margin-top:-2.5px; width: 5px; height: 5px; background:#567db6; border-radius: 50%;}

.Diagram { position: relative; width:auto; margin:0 auto;}
.Diagram li { width:max(14vh, 10vw) !important; height:max(14vh, 10vw) !important; line-height:max(14vh, 10vw); border-radius:50%; background:#0078ac;
					font-size:max(3vh, 2.4vw); font-weight:bold; color:#fff; text-align:center; letter-spacing: -0.1em; }
.Diagram li:nth-of-type(2) { background:#61a047;}
.Diagram li:nth-of-type(3) { background:#844cb1;}

.Diagram.Mg li { margin-right: 10%;}
.Diagram.Mg.Plus li:before { content: ''; position: absolute; width: 110%; height: 110%; top: calc(-5% - 1px); left: calc(-5% - 1px); border:1px solid #ddd; border-radius: 50%;}
.Diagram.Mg.Plus li:after { content: '\f067'; position: absolute; right: calc((min(1280px, 100vw)/100*-5) - 5%); margin-right:-0.11em; font-size: 0.8em; font-weight:bold; color:#979797; }
.Diagram.Mg.Plus li:last-of-type:after { display:none; }

.Diagram.Trig li:nth-of-type(1) { background:rgba(12,150,150,.55); position: absolute; bottom: calc(max(14vh, 10vw)/3*2); left: calc(50% - max(7vh, 5vw));}
.Diagram.Trig li:nth-of-type(2) { background:rgba(64,146,40,.55); }
.Diagram.Trig li:nth-of-type(3) { background:rgba(110,110,210,.55); margin-left:calc(max(14vh, 10vw)/-4); }


.diagram_radial {position: relative; margin: 3vw 0;}
.diagram_radial_box { position: relative; width: 30vw; height: 30vw; margin: 0 auto; border-radius: 50%; text-align: center; border: 2px dotted #bbb; }
.diagram_radial ul{ position: absolute; top: 10%; display:flex; width:100%; height: 120%; flex-wrap: wrap; }
.diagram_radial:before {content:''; display: block; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #ddd; z-index: -1;}
.diagram_radial:after {content:''; display: block; position: absolute; left: 50%; top: -10%; width: 1px; height: 120%; background: #ddd; z-index: -1;}
.diagram_radial_box:before { content:''; position: absolute; left: 13%; top: 13%; width: 74%; height: 74%; 
background-image: linear-gradient(0deg, rgba(18,73,138) 50%, transparent 50%), 
								linear-gradient(90deg, rgba(37,115,207) 49%, transparent 49%), 
								linear-gradient(-90deg, rgba(39,93,173) 49%, 
								transparent 49%); border-radius: 50%; }
.diagram_radial_box h3 { width: 100%; height: 100%;padding-top: 9vw; position: relative; z-index: 2; }
.diagram_radial_box h3:before { content:''; position: absolute; z-index:-1; left: 21%; top: 21%; width: 58%; height: 58%; background: #fff; border-radius: 50%; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
background: 
repeating-linear-gradient(15deg, rgba(230, 230, 230, 0.6) 60px, rgba(250, 250, 250, 0.8) 205px), 
repeating-linear-gradient(30deg, rgba(127, 127, 127, 0.6) 40px, rgba(240, 240, 240, 0.8) 220px),
repeating-linear-gradient(143deg, rgba(127, 127, 127, 0.6) 60px, rgba(240, 240, 240, 0.8) 200px), 
repeating-linear-gradient(-30deg, rgba(127, 127, 127, 0.6) 80px, rgba(240, 240, 240, 0.8) 250px), 
repeating-linear-gradient(-15deg, rgba(230, 230, 230, 0.6) 30px, rgba(180, 180, 180, 0.8) 150px);}
.diagram_radial_box h3:after { content:''; position: absolute; z-index:-1; left: 24%; top: 24%; width: 52%; height: 52%; border-radius: 50%; border: 0.5vw solid #eee; box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.3); box-sizing: border-box; background: url(/css/img/logo_ov.svg) no-repeat center / 60%;}
.diagram_radial li { position: relative; width: 50%; display:flex; justify-content: center;}
.diagram_radial li h4 { color:#333; margin-bottom:1rem; letter-spacing: -0.1rem; font-size: clamp(1.3rem, 1.7vw, 1.71rem);}
.diagram_radial li p { color:#666; font-size: clamp(0.9rem, 1.3vw, 1.1rem);}
.diagram_radial li figure { width: 28%; max-width:130px; }
.diagram_radial li .text { max-width:350px; width: 100%; padding-top: 3%;}
.diagram_radial li:nth-child(odd) { padding-right:12%;}
.diagram_radial li:nth-child(even) { padding-left:13%;}
.diagram_radial li:nth-child(odd) .text { text-align: right; padding-right:3%;}
.diagram_radial li:nth-child(even) .text { padding-left:2%; text-align: left;}
.diagram_radial li:nth-child(odd) figure { order: 2; }


.Price{ display: inline-block; width: 100%; padding:20px 20px 10px; margin-bottom: 10px; border:0; border-top:1px solid #1c7bc0; border-bottom:1px solid #1c7bc0; background:#f0f4f8; }
.Price h6 { margin-bottom: 15px; }
.Price p { color: #d34; font-size:clamp(1.16rem, 1.4vw, 1.4rem); padding:0; }
.Price i { background-color:#999; padding: 3px 7px; color: #fff; text-align: center; border-radius:3px; font-size:13px; font-weight:400; margin-right:5px; vertical-align: middle;}
.Price small { font-size:0.7em; font-weight: 400; }
.Price small { margin-right:10px; }
.Price input { width:110px; border:0px; color:#d34; text-align:right; font-size:clamp(1.16rem, 2vw, 1.3rem); outline-style:none;}
.Price span { color:#d34; margin-right:0; } 


/* product */
#product h2{padding:20px 0 15px;margin-bottom:30px;border-bottom:1px solid #000;font-size:22px;}
#product .sect{margin-bottom:50px}
#product .tb-fixed td:nth-child(1),#product .tb-fixed th:nth-child(1){min-width:200px}
#product .tb-fixed td:nth-child(2),#product .tb-fixed th:nth-child(2){min-width:100%;text-align:left}
#product .tb-fixed td:nth-child(3),#product .tb-fixed th:nth-child(3){min-width:100px}
#product .tb-fixed td:nth-child(4),#product .tb-fixed th:nth-child(4){min-width:100px}
#product .tb-fixed td:nth-child(5),#product .tb-fixed th:nth-child(5){width:100px}
.prod-detail .thumb-group{float:left;width:100%;}
.prod-detail .thumb-group .bx-call{margin-top:50px;padding:15px 25px;border:2px solid #e4c897;font-size:18px;font-weight:500;background-color:#fffcf6;}
.prod-detail .thumb-slide .thumb>img{display:block;width:100%;}
.prod-detail .info-group{float:right;width:100%}
.prod-detail .info-group .share{margin-bottom:25px}
.prod-detail .info-group .share a{ display:inline-block;}
.prod-detail .info-group .prod-info{padding-left:100px;}
.prod-detail .info-group .prod-info dt{float:left;margin-left:-100px;}
.prod-detail .info-group .prod-info>*{margin-bottom:20px;font-size:16px;line-height:34px; }
.prod-detail .info-group .prod-info>.form{height:34px}
.prod-detail .info-group .bx-price{padding:20px;border-top:1px solid #1c7bc0;border-bottom:1px solid #1c7bc0;background-color:#eff4f7;}
.prod-detail .info-group .prod-btn>*{width:191px;padding:10px;margin-top:30px;font-size:20px}
.prod-detail .bx-noti .lst-num li{line-height:2;font-weight:500}
.prod-detail .bx-noti>*>*{height:100%;padding:25px;border:2px solid;}
.prod-detail .bx-noti .bx-border1{border-color:#39a8b9;}
.prod-detail .bx-noti .bx-border2{border-color:#b7b7b7;}
.prod-contents .tab-type2>*{width:20%}
.prod-contents .tab-content{margin-bottom:50px;border-left:1px solid #e2e2e2;border-right:1px solid #e2e2e2;border-bottom:1px solid #8e8e8e;}

*[ID^="MIDCONT"],*[ID^="SMCONT"]{ display:none; }
.MidT_Cont { text-align: left; border:1px solid #e2e2e2; counter-increment: num; border-top:2px solid #12498a; margin-bottom: 20px;}
.MidT_Cont h4 { margin-bottom:0; line-height: 70px; color:#1c7bc0;}
.MidT_Cont h4 span { float: right; font-size: 18px; font-weight: 400; padding-right: 3%; color:#1c7bc0; }
.MidT_Cont h4 span i {padding:0 10px;}
.SmT_Cont { padding: 1% 2% 3%;}
.SmT_Cont img { max-width:100%; }
.MidT_Cont h4.DateTitle { border-bottom:1px solid #e2e2e2; background-color:#faf9f9; }
.MidT_Cont h4.DateTitle:before { content: counter(num); color: white; font-size:40px; padding: 7px 20px; background:#12498a; vertical-align: top; margin-right: 5px}
.Sche_Title em { font-size: 18px;}
.Sche_Title em:before{content:'';display:inline-block;height:.8em;width:1px;margin:0 10px;background-color: #7c7c7c; }
.Sche_Title .hotel-option{margin-top:20px;font-size:17px;font-weight:500}
.Sche_hotel { padding:1.5% 2%; background:#f0f9f9; border-top:1px solid #e2e2e2; }
.Sche_bld { padding:1.5% 2%; background:#fdebeb; border-top:1px solid #e2e2e2; }
.Sche_bld i { font-style: normal;}

.bx-booking{margin-bottom:30px;}
.bx-booking h3{margin-bottom:10px;font-size:26px;}
.bx-agree .scroll{overflow-y:auto;overflow-x:hidden;height:180px;padding:20px 30px;border-top:1px solid #414141;border-bottom:1px solid #ebebeb;font-size:16px;background-color:#f8f8f8;}
.bx-agree .btn-wrp{padding:20px 30px 0;font-size:16px}

.Agr_box { overflow-y:scroll; display:block; height:158px; padding:20px; border:solid 1px #ddd;}

.icon-kstory{width:30px;height:30px;background-image:url('/images/icon/icon_kstory.png')}
.icon-twitter{width:30px;height:30px;background-image:url('/images/icon/icon_twitter.png')}
.icon-fb2{width:30px;height:30px;background-image:url('/images/icon/icon_fb2.png')}
.icon-print{width:30px;height:30px;background-image:url('/images/icon/icon_print.png')}

.addinfo { margin-top: 5px; border-top: 1px dotted; }

.Cont_Box h6 { padding:30px 0 5px; color:#333;}
.Cont_Box h6:first-of-type { padding-top:0; }
.Cont_Box ol {margin-top:10px;}



@media (max-width:1280px){/********** 1280 **********/
#QuickMenu  {display: none;}

.map_txt .lbx {flex-direction: column;}
.map_txt .lbx > .ul2 {margin-left: 0; margin-top: 20px;}

.Diagram.Mg.Plus li:after { margin-right:0;  }

.Price p { text-align: center;}
.Price i { display: block; margin-right:0; }
.Price .Layer.L3.Mg>li { width:32%; margin-bottom: 2%}
}



@media (max-width:1024px){/********** iPad Pro **********/
.layer_pop,#slide_pop { top:calc(67px - 5px); }

/* header */
header .logo_ov { position: relative; display: block; margin-top: 3%; left: 5%;}
header .hd_logo img { max-height: 32px; }
header .logo { display:none; }

#Mnav { display:block; }
.logo_M { display:block; padding: 10% 8%; border-bottom:1px solid #074b8a; background:#eef2fc; }
.logo_M a { vertical-align: text-top; }
.logo_M img { max-height:26px;  }

.fp-viewing-0 header .hd_logo,.fp-viewing-0 #SubP header .hd_logo,.fp-viewing-0 header:hover .logo_ov { transform:none; }
.fp-viewing-0 header nav .Menu span { color:#000; }
header { justify-content: start; }
header .hd_sub .hd_logo > a, .subb.sc .hd_sub .hd_logo > a {height: 67px; width: 150px;}
header nav { display:none; }
header:hover:before { display:none; }

#Mnav {  display:none; position: absolute; z-index: 40; background:#fff; width:100%; max-width:260px; height: 100%; right:0; top: 0px; text-align:left; }
#Mnav .MobileLogo {display:block; width:100%; height:50px; background-color:#101f3e; padding-left: 20px;}
#Mnav .MobileLogo img { position: relative; top: 17px;width: 101px; }
#Mnav .Menu div{ position: relative; padding-top: 0px; padding-left:20px; line-height: 43px; font-size: 16px;}
#Mnav .Menu div a { color: #222; }
#Mnav .Menu.on { background:#fff; height: auto;}
#Mnav .Menu.on div{ color:#222;  background:#fff;}
#Mnav .Menu.on a:hover .Sub{ color:#777; }
#Mnav .Menu span:nth-child(2){ transform:rotate(90deg); }
#Mnav .Menu.on span:nth-child(2){ transform:rotate(0deg); }

#Mnav .Menu span,#Mnav .Menu:hover span { position: relative; display: block; padding-left:20px; line-height:50px; width:100%; height:auto; background:#ffffff; border-bottom:1px solid #e1e1e1; text-align: left; color:#333;}
#Mnav .Sub { display:none; height:auto; border:0; padding:0 20px; background-color:#f5f5f5; border-bottom:1px solid #101f3e; opacity: 1;}
#Mnav .Sub li a{ display: block; color:#777; padding: 15px 0; border-bottom:1px solid #e1e1e1; text-align:left; padding-left:15px; }
#Mnav .Sub li:last-child a{border-bottom:0;}
#Mnav .Menu.plus .Main>i { position:absolute; z-index: 5; top: 1px; right: 0px; width:4rem; height: 100%; cursor: pointer;}
#Mnav .Menu.plus .Main>i:before,#Mnav .Menu.plus .Main>i:after { content:''; position:absolute; z-index: 2; height: 1px; width: 14px; background: #777; transform: rotate(90deg); top: calc(50% - 2px); left: calc(50% - 9px); transition: all 0.6s ease;}
#Mnav .Menu.plus .Main>i:after { transform: rotate(0deg); }
#Mnav .Menu.plus.on .Main>i:before { transform: rotate(0deg); }
#Mnav .Main a { display:inline-block; font-size: 1.1em;}
#Mnav .Menu:hover { background:#fff;}
#Mnav .Menu:hover span { color: #000;}
#Mnav .Menu:hover .Sub > li {color: #555; }
#Mnav .Menu:hover .Sub > li:hover {color: ##d45; }

.Mmenu { position:absolute; top:2em; right: 1em; cursor: pointer; z-index: 50; padding: 5px; text-align: center;}
.Mmenu span{ display:block; width:24px; height:3px; background:#000; position:relative; transition:all 0.6s; margin-bottom: 5px;}
.Mmenu span:nth-child(3){ margin-bottom: 0; } 
.Mmenu.on span:nth-child(1){ transform:rotate(45deg); top:8px; background: #000;}
.Mmenu.on span:nth-child(2){ opacity:0; }
.Mmenu.on span:nth-child(3){ transform:rotate(-45deg); bottom:8px; background: #000;}
}



@media (max-width:768px) {/********** iPad **********/

.Layer.T1>li,.Layer.Mg.T1>li { width: 100% !important; max-width:100% !important; }
.Layer.Mg.T1>li { margin-right:0; }

.Layer.T2>li { width: 50% !important; }
.Layer.Mg.T2>li { width: calc((100% - (1vw + 2%))/2) !important; margin-right: calc(1vw + 2%) !important;}
.Layer.Mg.T2>li:nth-child(2n+2) { margin-right: 0 !important; }

.Layer.T3>li { width: 33.3% !important; }
.Layer.Mg.T3>li { width: calc((100% - (1vw + 2%)*2)/3) !important; margin-right: calc(1vw + 2%) !important;}
.Layer.Mg.T3>li:nth-child(3n+3) { margin-right: 0 !important; }


.fixed_bg { background-attachment: local; background-size: cover;}

.daum_map .root_daum_roughmap .wrap_map {height: 250px;}
.map_txt ol {clear: both; margin-top: 30px;}
.map_txt ol li {width: 35px; height: 35px;}
.map_txt ol li a {height: 100%;}
.map_txt ol li a img {width: 15px; margin-top: 8px;}
.map_txt .lbx {width: 100%;}
.map_txt .lbx ul li {display:flex;}
.map_txt .lbx ul li span {width: 100px; padding-right: 0px; }
.map_txt .lbx ul li b {width: 95%; }

.history-container {padding:10vw 0;}
.history-container:before {display: none;}
.history-container .history-row {margin-bottom: 3vw;}
.history-container .history-row dl,.history-container .history-row:nth-child(even) dl {width: 100%; padding:0;}
.history-container .history-row dl dt i {left: 0;}
.history-container .history-row dl dt:after {left:4px;}
.history-container .history-row:nth-child(even) dl dt i {right: 15px;}
.history-container .history-row:nth-child(even) dl dt:after {right: 4px;}
.history-container .history-row:nth-child(odd) dl dd span.history__month {margin-right: 10px;}
.history-container .history-row:nth-child(even) dl dd span.history__month {margin-left: 10px;}
.history-container .history-row dl dd span.history__text,
.history-container .history-row:nth-child(odd) dl dd span.history__month,
.history-container .history-row:nth-child(even) dl dd span.history__month {font-size: 12px;}

.diagram_radial {border-top: 1px solid #ddd;} 
.diagram_radial:before,.diagram_radial:after,.diagram_radial_box {display:none;}
.diagram_radial ul{position: relative;}
.diagram_radial li {width: 100%; border-bottom:1px solid #ddd; padding:3rem 0 2rem;}
.diagram_radial li:nth-child(odd) { padding-right: 0; justify-content:right;}
.diagram_radial li:nth-child(even) { padding-left: 0; justify-content:left; }

.Step li:nth-child(2n+2) figure:before,.Step li:nth-child(2n+2) figure:after,.Step li dl:before,.Step li dl:after { display:none; }
.Step li figure:after {display:none;}

#Prod #Btn_Area { position: relative; }

.Diagram {width: 100%; }
.Diagram.Layer.L3.Mg>li:nth-child(2n+2) { margin-right: 10%; }

.Price span { display:block; }
.Price p { text-align: left;}
.Price i { display: inline-block; margin-right:5px; }
.Price .Layer.L3.Mg>li { width:100%; }

.Revolve figure:hover figcaption,.Revolve figcaption { transform: rotate(0deg); }
}



@media (max-width:540px){/********** Mobile **********/
.diagram_radial li { flex-direction: column; text-align: center;}
.diagram_radial li figure {order:1 !important; margin: 0 auto;}
.diagram_radial li .text {order:2 !important; text-align: center !important; margin: 0 auto;}
.diagram_radial li:nth-child(odd) .text,.diagram_radial li:nth-child(even) .text { padding:0;}

.Mapping.Layer.L2.Mg>li:nth-child(2) { width:100%; margin-top:40px;}

fieldset.dash { padding: 30px;}

.Prod_cal li:first-child,.Prod_cal li:last-child { width:100%;}

.course span { width: 45%;}
.course span s { position: absolute; width: auto; top: 12px; margin-left: 5%; }
.course span s:before,.course span:nth-child(2) s { display: none; }
.course span s:after { content:'>'; }
.course span:nth-child(2),.course span:nth-child(2) s { margin-right:0;}
.course span.cruise { position: relative; padding:5px 0; margin:10px 0 15px; border: 1px solid #ddd;}
.course span.cruise:before { content:''; position: absolute; top: -7px; width: 11px; height: 1px; margin-left:-6px; background: #bbb; left: 50%; transform:rotate(90deg);}
.course span.cruise:after { content:''; position: absolute; bottom: -7px; width: 11px; height: 1px; margin-left:-6px; background: #bbb; left: 50%; transform:rotate(90deg);}

#schelist_Limg .thum,#schelist_Limg .item,#schelist_Limg .button_wrap { position:relative; width:100%; float:none;}
#schelist_Limg .button_wrap .state,#schelist_Limg .button_wrap .btn_download { height:auto; padding: 5% 0; margin: 1% 0; }

#schelist_Timg .thum,#schelist_Timg .item,#schelist_Timg .button_wrap { position:relative; width:100%; float:none;}
#schelist_Timg .button_wrap .state,#schelist_Timg .button_wrap .btn_download { height:auto; padding: 5% 0; margin: 1% 0; }
}


@media (max-width:320px){/********** iPhone5 **********/

}